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

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

@@ -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,21 +106,28 @@ 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) => (
+      {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-transparent px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
+              "group h-auto min-w-fit rounded-md border-none 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",
+              disabled,
               option.activeClassName
             )}
             key={option.value}
@@ -129,7 +139,7 @@ export const ProformaStatusSegmentedFilter = ({
             value={option.value}
           >
             <span className="flex items-center gap-2">
-            {option.icon ? <option.icon className="size-3.5" /> : null}
+              {option.icon ? <option.icon className="size-4" /> : null}
               <span>{t(option.labelKey)}</span>
               <RdxBadge
                 className={cn(
@@ -143,7 +153,8 @@ export const ProformaStatusSegmentedFilter = ({
               </RdxBadge>
             </span>
           </ToggleGroupItem>
-      ))}
+        );
+      })}
     </ToggleGroup>
   );
 };