From 430ae8e5eabf737613e3fcd3113437a9c88bf012 Mon Sep 17 00:00:00 2001
From: david <darranz@rodax-software.com>
Date: Sun, 12 Apr 2026 21:20:31 +0200
Subject: [PATCH] .

---
 .../list/ui/components/index.ts               |   1 +
 .../components/issued-invoices-grid-empty.tsx |  17 +++
 .../ui/pages/list-issued-invoices-page.tsx    | 121 ++++++++++--------
 .../customer-empty-card.tsx                   |  18 +--
 4 files changed, 92 insertions(+), 65 deletions(-)
 create mode 100644 modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-grid-empty.tsx

diff --git a/modules/customer-invoices/src/web/issued-invoices/list/ui/components/index.ts b/modules/customer-invoices/src/web/issued-invoices/list/ui/components/index.ts
index 2cf1fb81..d9f7dce1 100644
--- a/modules/customer-invoices/src/web/issued-invoices/list/ui/components/index.ts
+++ b/modules/customer-invoices/src/web/issued-invoices/list/ui/components/index.ts
@@ -1 +1,2 @@
+export * from "./issued-invoices-grid-empty";
 export * from "./verifactu-status-badge";
diff --git a/modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-grid-empty.tsx b/modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-grid-empty.tsx
new file mode 100644
index 00000000..8d6d9f66
--- /dev/null
+++ b/modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-grid-empty.tsx
@@ -0,0 +1,17 @@
+import { Card, CardContent } from "@repo/shadcn-ui/components";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { ChartNoAxesColumnIncreasingIcon } from "lucide-react";
+
+export const IssuedInvoicesEmptyGrid = ({ className }: React.ComponentProps<"div">) => {
+  return (
+    <Card className={cn("w-full max-w-lg", className)}>
+      <CardContent>
+        <div className="rounded-md border border-dashed p-6 text-center">
+          <ChartNoAxesColumnIncreasingIcon className="text-muted-foreground mx-auto size-12" />
+          <p className="mt-2 text-sm font-medium">No data to show</p>
+          <p className="text-muted-foreground mt-1 text-sm">May take 15 minutes for data to load</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx b/modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx
index afbe7149..cde08e4b 100644
--- a/modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx
@@ -17,6 +17,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "../../../../i18n";
 import { useIssuedInvoiceListPageController } from "../../controllers";
 import { IssuedInvoicesGrid, useIssuedInvoicesGridColumns } from "../blocks";
+import { IssuedInvoicesEmptyGrid } from "../components";
 
 export const ListIssuedInvoicesPage = () => {
   const { t } = useTranslation();
@@ -88,63 +89,71 @@ export const ListIssuedInvoicesPage = () => {
         </Alert>
 
         {/* Search and filters */}
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <SimpleSearchInput
-            loading={listCtrl.isLoading}
-            onSearchChange={listCtrl.setSearchValue}
-            value={listCtrl.search}
-          />
+        {listCtrl.data.totalItems === 0 && <IssuedInvoicesEmptyGrid className="mx-auto" />}
 
-          <Select
-            onValueChange={(value) => listCtrl.setStatusFilter(value ?? "all")}
-            value={listCtrl.statusFilter}
-          >
-            <SelectTrigger className="w-full sm:w-48">
-              <FilterIcon aria-hidden className="mr-2 size-4" />
-              <SelectValue placeholder={t("filters.status")} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t("catalog.issued_invoices.status.all.label")}</SelectItem>
-              <SelectItem value="Correcto">
-                {t("catalog.issued_invoices.status.correcto.label")}
-              </SelectItem>
-              <SelectItem value="Pendiente">
-                {t("catalog.issued_invoices.status.pendiente.label")}
-              </SelectItem>
-              <SelectItem value="aceptado_con_error">
-                {t("catalog.issued_invoices.status.aceptado_con_error.label")}
-              </SelectItem>
-              <SelectItem value="incorrecto">
-                {t("catalog.issued_invoices.status.incorrecto.label")}
-              </SelectItem>
-              <SelectItem value="duplicado">
-                {t("catalog.issued_invoices.status.duplicado.label")}
-              </SelectItem>
-              <SelectItem value="anulado">
-                {t("catalog.issued_invoices.status.anulado.label")}
-              </SelectItem>
-              <SelectItem value="factura_inexistente">
-                {t("catalog.issued_invoices.status.duplicado.label")}
-              </SelectItem>
-              <SelectItem value="rechazado">
-                {t("catalog.issued_invoices.status.rechazado.label")}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="min-h-0 flex-1 overflow-auto">
-          <IssuedInvoicesGrid
-            columns={columns}
-            data={listCtrl.data}
-            loading={listCtrl.isLoading}
-            onPageChange={listCtrl.setPageIndex}
-            onPageSizeChange={listCtrl.setPageSize}
-            // acciones rápidas del grid → page controller
-            //onRowClick={(id) => navigate(`/issuedInvoices/${id}`)}
-            pageIndex={listCtrl.pageIndex}
-            pageSize={listCtrl.pageSize}
-          />
-        </div>
+        {listCtrl.data.totalItems !== 0 && (
+          <>
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <SimpleSearchInput
+                loading={listCtrl.isLoading}
+                onSearchChange={listCtrl.setSearchValue}
+                value={listCtrl.search}
+              />
+
+              <Select
+                onValueChange={(value) => listCtrl.setStatusFilter(value ?? "all")}
+                value={listCtrl.statusFilter}
+              >
+                <SelectTrigger className="w-full sm:w-48">
+                  <FilterIcon aria-hidden className="mr-2 size-4" />
+                  <SelectValue placeholder={t("filters.status")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    {t("catalog.issued_invoices.status.all.label")}
+                  </SelectItem>
+                  <SelectItem value="Correcto">
+                    {t("catalog.issued_invoices.status.correcto.label")}
+                  </SelectItem>
+                  <SelectItem value="Pendiente">
+                    {t("catalog.issued_invoices.status.pendiente.label")}
+                  </SelectItem>
+                  <SelectItem value="aceptado_con_error">
+                    {t("catalog.issued_invoices.status.aceptado_con_error.label")}
+                  </SelectItem>
+                  <SelectItem value="incorrecto">
+                    {t("catalog.issued_invoices.status.incorrecto.label")}
+                  </SelectItem>
+                  <SelectItem value="duplicado">
+                    {t("catalog.issued_invoices.status.duplicado.label")}
+                  </SelectItem>
+                  <SelectItem value="anulado">
+                    {t("catalog.issued_invoices.status.anulado.label")}
+                  </SelectItem>
+                  <SelectItem value="factura_inexistente">
+                    {t("catalog.issued_invoices.status.duplicado.label")}
+                  </SelectItem>
+                  <SelectItem value="rechazado">
+                    {t("catalog.issued_invoices.status.rechazado.label")}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="min-h-0 flex-1 overflow-auto">
+              <IssuedInvoicesGrid
+                columns={columns}
+                data={listCtrl.data}
+                loading={listCtrl.isLoading}
+                onPageChange={listCtrl.setPageIndex}
+                onPageSizeChange={listCtrl.setPageSize}
+                // acciones rápidas del grid → page controller
+                //onRowClick={(id) => navigate(`/issuedInvoices/${id}`)}
+                pageIndex={listCtrl.pageIndex}
+                pageSize={listCtrl.pageSize}
+              />
+            </div>
+          </>
+        )}
       </AppContent>
     </section>
   );
diff --git a/modules/customers/src/web/_archived/components/customer-modal-selector/customer-empty-card.tsx b/modules/customers/src/web/_archived/components/customer-modal-selector/customer-empty-card.tsx
index 33929706..1accd7f4 100644
--- a/modules/customers/src/web/_archived/components/customer-modal-selector/customer-empty-card.tsx
+++ b/modules/customers/src/web/_archived/components/customer-modal-selector/customer-empty-card.tsx
@@ -3,21 +3,21 @@ import { UserSearchIcon } from "lucide-react";
 export const CustomerEmptyCard = (props: React.ComponentProps<"button">) => {
   return (
     <button
+      aria-label="Seleccionar cliente"
+      className="group w-full cursor-pointer rounded-lg border border-border bg-card p-4 transition hover:bg-accent/50 hover:border-primary"
       tabIndex={0}
-      type='button'
-      className='group w-full cursor-pointer rounded-lg border border-border bg-card p-4 transition hover:bg-accent/50 hover:border-primary'
-      aria-label='Seleccionar cliente'
+      type="button"
       {...props}
     >
-      <div className='flex items-center gap-4 group-hover:text-primary'>
-        <div className='flex size-12 items-center justify-center rounded-full bg-muted group-hover:bg-primary/15'>
-          <UserSearchIcon className='size-6 text-muted-foreground group-hover:text-primary' />
+      <div className="flex items-center gap-4 group-hover:text-primary">
+        <div className="flex size-12 items-center justify-center rounded-full bg-muted group-hover:bg-primary/15">
+          <UserSearchIcon className="size-6 text-muted-foreground group-hover:text-primary" />
         </div>
-        <div className='flex-1 text-left'>
-          <h3 className='font-medium text-muted-foreground mb-1 group-hover:text-primary'>
+        <div className="flex-1 text-left">
+          <h3 className="font-medium text-muted-foreground mb-1 group-hover:text-primary">
             Seleccionar Cliente
           </h3>
-          <p className='text-sm text-muted-foreground/70 group-hover:text-primary'>
+          <p className="text-sm text-muted-foreground/70 group-hover:text-primary">
             Haz clic para buscar un cliente existente o crear uno nuevo
           </p>
         </div>