.

modules/customer-invoices/src/web/proformas/list/ui/pages/list-proformas-page.tsx

@@ -1,6 +1,6 @@
 import { ErrorAlert, PageHeader, SimpleSearchInput } from "@erp/core/components";
 import { useDataSource, useReturnToNavigation } from "@erp/core/hooks";
-import { type DataTableMeta, AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
+import { AppContent, BackHistoryButton, type DataTableMeta } from "@repo/rdx-ui/components";
 import { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
 import {
   Button,
@@ -28,8 +28,8 @@ import {
   RefreshCwIcon,
   Trash2Icon,
 } from "lucide-react";
-import { createSearchParams, useNavigate } from "react-router-dom";
 import { useCallback, useMemo, useState } from "react";
+import { createSearchParams, useNavigate } from "react-router-dom";
 
 import { useTranslation } from "../../../../i18n";
 import { ChangeProformaStatusDialog } from "../../../change-status";
@@ -143,7 +143,9 @@ const ProformasSelectionActions = ({
     } catch (error) {
       showErrorToast(
         "Error al descargar",
-        error instanceof Error ? error.message : "No se pudieron descargar las proformas seleccionadas."
+        error instanceof Error
+          ? error.message
+          : "No se pudieron descargar las proformas seleccionadas."
       );
     } finally {
       setIsDownloading(false);
@@ -166,9 +168,7 @@ const ProformasSelectionActions = ({
       <Button
         className="cursor-pointer"
         disabled={isDownloading}
-        onClick={() => {
+        onClick={handleDownloadSelection}
-          void handleDownloadSelection();
-        }}
         size="sm"
         type="button"
         variant="outline"
@@ -194,10 +194,7 @@ const ProformasSelectionActions = ({
           <DropdownMenuContent align="start" className="w-52">
             <DropdownMenuLabel>Selección</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuItem
+            <DropdownMenuItem onClick={() => onDelete(selectedProformas)} variant="destructive">
-              onClick={() => onDelete(selectedProformas)}
-              variant="destructive"
-            >
               <Trash2Icon aria-hidden="true" className="mr-2 size-4" />
               <span>Eliminar borradores</span>
             </DropdownMenuItem>
@@ -365,36 +362,53 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
         ) : null}
 
         {/* Explicación técnica */}
-        <div className="mt-8 rounded border border-border bg-card p-3 sm:p-4 text-xs sm:text-sm text-muted-foreground space-y-4">
+        <section className="rounded-xl border bg-card p-5 shadow-sm mt-6">
-          <p className="font-semibold text-foreground">Estado de proforma</p>
+          <h2 className="text-sm font-semibold">Estado de proforma</h2>
-          <ul className="list-disc list-inside space-y-4">
+          <dl className="mt-4 grid gap-x-6 gap-y-3 sm:grid-cols-2 lg:grid-cols-3">
-            <li>
+            <div className="flex items-start gap-3">
+              <dt className="shrink-0 pt-0.5">
                 <ProformaStatusBadge status="draft" />
-              <strong className="text-foreground">Borrador:</strong> Una proforma sin terminar y
+              </dt>
-              pendiente de modificaciones.
+              <dd className="text-sm text-muted-foreground text-pretty">
-            </li>
+                Una proforma sin terminar y pendiente de modificaciones.
-            <li>
+              </dd>
-              <ProformaStatusBadge status="sent" />
-              <strong className="text-foreground">Enviada:</strong> Se ha enviado la proforma al
-              cliente para su aprobación.
-            </li>
-            <li>
-              <ProformaStatusBadge status="approved" />
-              <strong className="text-foreground">Aprobada:</strong> La proforma ha sido aprobada
-              por el cliente y puede pasar a factura.
-            </li>
-            <li>
-              <ProformaStatusBadge status="rejected" />
-              <strong className="text-foreground">Rechazada:</strong> La proforma ha sido rechazada
-              por el cliente. Puede quedarse así o volver a "borrador".
-            </li>
-            <li>
-              <ProformaStatusBadge status="issued" />
-              <strong className="text-foreground">Facturada:</strong> La proforma ya ha sido pasada
-              a factura.
-            </li>
-          </ul>
             </div>
+
+            <div className="flex items-start gap-3">
+              <dt className="shrink-0 pt-0.5">
+                <ProformaStatusBadge status="sent" />
+              </dt>
+              <dd className="text-sm text-muted-foreground text-pretty">
+                Se ha enviado la proforma al cliente para su aprobación.
+              </dd>
+            </div>
+            <div className="flex items-start gap-3">
+              <dt className="shrink-0 pt-0.5">
+                <ProformaStatusBadge status="approved" />
+              </dt>
+              <dd className="text-sm text-muted-foreground text-pretty">
+                La proforma ha sido aprobada por el cliente y puede pasar a factura.
+              </dd>
+            </div>
+            <div className="flex items-start gap-3">
+              <dt className="shrink-0 pt-0.5">
+                <ProformaStatusBadge status="rejected" />
+              </dt>
+              <dd className="text-sm text-muted-foreground text-pretty">
+                La proforma ha sido rechazada por el cliente. Puede quedarse así o volver a
+                "borrador".
+              </dd>
+            </div>
+            <div className="flex items-start gap-3">
+              <dt className="shrink-0 pt-0.5">
+                <ProformaStatusBadge status="issued" />
+              </dt>
+              <dd className="text-sm text-muted-foreground text-pretty">
+                La proforma ya ha sido pasada a factura.
+              </dd>
+            </div>
+          </dl>
+        </section>
       </div>
     </div>
   );