.

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";

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>
+  );
+};

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,6 +89,10 @@ export const ListIssuedInvoicesPage = () => {
         </Alert>
 
         {/* Search and filters */}
+        {listCtrl.data.totalItems === 0 && <IssuedInvoicesEmptyGrid className="mx-auto" />}
+
+        {listCtrl.data.totalItems !== 0 && (
+          <>
             <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
               <SimpleSearchInput
                 loading={listCtrl.isLoading}
@@ -104,7 +109,9 @@ export const ListIssuedInvoicesPage = () => {
                   <SelectValue placeholder={t("filters.status")} />
                 </SelectTrigger>
                 <SelectContent>
-              <SelectItem value="all">{t("catalog.issued_invoices.status.all.label")}</SelectItem>
+                  <SelectItem value="all">
+                    {t("catalog.issued_invoices.status.all.label")}
+                  </SelectItem>
                   <SelectItem value="Correcto">
                     {t("catalog.issued_invoices.status.correcto.label")}
                   </SelectItem>
@@ -145,6 +152,8 @@ export const ListIssuedInvoicesPage = () => {
                 pageSize={listCtrl.pageSize}
               />
             </div>
+          </>
+        )}
       </AppContent>
     </section>
   );

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'
+      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'
       {...props}
     >
-      <div className='flex items-center gap-4 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'>
+        <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' />
+          <UserSearchIcon className="size-6 text-muted-foreground group-hover:text-primary" />
         </div>
-        <div className='flex-1 text-left'>
+        <div className="flex-1 text-left">
-          <h3 className='font-medium text-muted-foreground mb-1 group-hover:text-primary'>
+          <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>