From 939577dbec8df253752880ae20c104f27920ef08 Mon Sep 17 00:00:00 2001
From: David <darranz@rodax-software.com>
Date: Tue, 15 Sep 2026 12:37:44 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20mejorar=20el=20filtro=20segmentado?=
 =?UTF-8?q?=20de=20estado=20de=20proforma=20con=20iconos=20y=20soporte=20p?=
 =?UTF-8?q?ara=20m=C3=BAltiples=20valores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../proforma-status-segmented-filter.tsx      | 85 +++++++++++--------
 1 file changed, 48 insertions(+), 37 deletions(-)

diff --git a/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-segmented-filter.tsx b/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-segmented-filter.tsx
index 9d32f32f..d28b73d9 100644
--- a/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-segmented-filter.tsx
+++ b/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,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>
   );
 };