Rodax_Software/FactuGES_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): mejorar el filtro segmentado de estado de proforma con iconos y soporte para múltiples valores

Browse Source
This commit is contained in:
David Arranz 2026-09-15 12:37:44 +02:00
parent 902f7806ed
commit 939577dbec
1 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-segmented-filter.tsx
View File

@ -11,7 +11,8 @@ import {
import type { ElementType } from "react";
import { useTranslation } from "../../../../i18n";
import type { ProformaStatusCounts } from "../../../shared";
import { getProformaStatusDisplayIcon } from "../../../change-status/helpers";
import type { ProformaStatus, ProformaStatusCounts } from "../../../shared";
import type { ProformaListStatusFilter } from "../../types/proforma-list-filters";
export type ProformaStatusFilter = ProformaListStatusFilter;
@ -92,7 +93,9 @@ export const ProformaStatusSegmentedFilter = ({
}: ProformaStatusSegmentedFilterProps) => {
const { t } = useTranslation();
const handleValueChange = (nextValue: string) => {
const handleValueChange = (nextValues: string[]) => {
const nextValue = nextValues[0];
if (!(nextValue && isProformaStatusFilter(nextValue)) || nextValue === value) {
return;
}
@ -103,47 +106,55 @@ export const ProformaStatusSegmentedFilter = ({
return (
<ToggleGroup
aria-label={t("pages.proformas.list.filters.status.label")}
className="w-full flex-wrap justify-start gap-1"
className="w-full flex-wrap justify-start gap-4"
disabled={disabled}
multiple={false}
onValueChange={handleValueChange}
size="sm"
spacing={1}
type="single"
value={value}
value={[value]}
variant="outline"
>
{PROFORMA_STATUS_FILTER_OPTIONS.map((option) => (
<ToggleGroupItem
className={cn(
"group h-auto min-w-fit rounded-md border-transparent px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
"text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground",
"data-[state=on]:shadow-none",
option.activeClassName
)}
key={option.value}
onPointerDown={(event) => {
if (option.value === value) {
event.preventDefault();
}
}}
value={option.value}
>
<span className="flex items-center gap-2">
{option.icon ? <option.icon className="size-3.5" /> : null}
<span>{t(option.labelKey)}</span>
<RdxBadge
className={cn(
"min-w-5 rounded-full px-1.5 text-[11px] font-semibold tabular-nums",
"bg-muted text-muted-foreground",
"group-data-[state=on]:bg-white/20 group-data-[state=on]:text-current"
)}
variant="secondary"
>
{counts[option.countKey]}
</RdxBadge>
</span>
</ToggleGroupItem>
))}
{PROFORMA_STATUS_FILTER_OPTIONS.map((option) => {
const normalizedStatus = option.value.toLowerCase() as ProformaStatus;
const Icon = getProformaStatusDisplayIcon(normalizedStatus);
const disabled =
"text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground";
return (
<ToggleGroupItem
className={cn(
"group h-auto min-w-fit rounded-md border-none px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
"data-[state=on]:shadow-none",
disabled,
option.activeClassName
)}
key={option.value}
onPointerDown={(event) => {
if (option.value === value) {
event.preventDefault();
}
}}
value={option.value}
>
<span className="flex items-center gap-2">
{option.icon ? <option.icon className="size-4" /> : null}
<span>{t(option.labelKey)}</span>
<RdxBadge
className={cn(
"min-w-5 rounded-full px-1.5 text-[11px] font-semibold tabular-nums",
"bg-muted text-muted-foreground",
"group-data-[state=on]:bg-white/20 group-data-[state=on]:text-current"
)}
variant="secondary"
>
{counts[option.countKey]}
</RdxBadge>
</span>
</ToggleGroupItem>
);
})}
</ToggleGroup>
);
};