apps/web/src/main.tsx

@@ -13,10 +13,8 @@ if (rootElement) {
   createRoot(rootElement).render(
     <StrictMode>
       <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-        <>
+        <App />
-          <App />
+        <TailwindIndicator />
-          <TailwindIndicator />
-        </>
       </ThemeProvider>
     </StrictMode>
   );

modules/customer-invoices/src/web/proformas/delete/controllers/use-delete-proforma-dialog-controller.ts

@@ -1,52 +1,60 @@
-// proformas/delete/controllers/use-delete-proforma-dialog-controller.ts
 import { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
-import * as React from "react";
+import React from "react";
 
 import { useTranslation } from "../../../i18n";
-import type { DeleteProformaByIdParams } from "../../shared";
+import { type ProformaListRow, useDeleteProformaMutation } from "../../shared";
-import { useProformaDeleteMutation } from "../../shared";
-import type { DeleteProformaTarget } from "../entities";
-
-type ConfirmStep = "initial" | "second";
 
 interface DeleteProformaDialogState {
   open: boolean;
-  targets: DeleteProformaTarget[];
+  proformas: ProformaListRow[];
-  confirmStep: ConfirmStep;
+  isSubmitting: boolean;
+  requiresSecondConfirm: boolean;
+  confirmStep: "initial" | "second";
 }
 
 const INITIAL_STATE: DeleteProformaDialogState = {
   open: false,
-  targets: [],
+  proformas: [],
+  isSubmitting: false,
+  requiresSecondConfirm: false,
   confirmStep: "initial",
 };
 
-const buildDeleteParams = (target: DeleteProformaTarget): DeleteProformaByIdParams => ({
+const SECOND_CONFIRM_THRESHOLD = 5;
-  id: target.id,
-});
 
-const getProformaLabel = (target: DeleteProformaTarget) => target.reference || `#${target.id}`;
+function canSubmitDelete(isSubmitting: boolean, proformas: ProformaListRow[]): boolean {
+  return !isSubmitting && proformas.length > 0;
+}
 
-export const useDeleteProformaDialogController = () => {
+function shouldMoveToSecondConfirmStep(
+  requiresSecondConfirm: boolean,
+  confirmStep: "initial" | "second"
+): boolean {
+  return requiresSecondConfirm && confirmStep === "initial";
+}
+
+export function useDeleteProformaDialogController() {
   const { t } = useTranslation();
-  const deleteMutation = useProformaDeleteMutation();
+  const { deleteProforma } = useDeleteProformaMutation();
 
   const [state, setState] = React.useState<DeleteProformaDialogState>(INITIAL_STATE);
+  const { isSubmitting, proformas, requiresSecondConfirm, confirmStep } = state;
 
-  const openDialog = React.useCallback((targets: DeleteProformaTarget[]) => {
+  const openDialog = React.useCallback((proformas: ProformaListRow[]) => {
-    if (targets.length === 0) return;
+    const requiresSecondConfirm = proformas.length > SECOND_CONFIRM_THRESHOLD;
 
     setState({
       open: true,
-      targets,
+      proformas,
+      isSubmitting: false,
+      requiresSecondConfirm,
       confirmStep: "initial",
     });
   }, []);
 
   const closeDialog = React.useCallback(() => {
-    if (deleteMutation.isPending) return;
     setState(INITIAL_STATE);
-  }, [deleteMutation.isPending]);
+  }, []);
 
   const moveToSecondConfirmStep = React.useCallback(() => {
     setState((current) => ({
@@ -55,109 +63,124 @@ export const useDeleteProformaDialogController = () => {
     }));
   }, []);
 
-  const notifySuccess = React.useCallback(
+  const deleteSelectedProformas = React.useCallback(
-    (targets: DeleteProformaTarget[]) => {
+    async (proformas: ProformaListRow[]) => {
-      if (targets.length === 1) {
+      const results = await Promise.allSettled(
+        proformas.map((proforma) =>
+          deleteProforma({
+            proformaId: proforma.id,
+          })
+        )
+      );
+
+      const successCount = results.filter((result) => result.status === "fulfilled").length;
+      const errorCount = results.length - successCount;
+
+      return {
+        successCount,
+        errorCount,
+      };
+    },
+    [deleteProforma]
+  );
+
+  const notifyDeleteResult = React.useCallback(
+    (proformas: ProformaListRow[], successCount: number, errorCount: number) => {
+      if (proformas.length === 1 && successCount === 1) {
+        const proforma = proformas[0];
+
         showSuccessToast(
           t("pages.proformas.delete.successTitle"),
           t("pages.proformas.delete.successSingleMessage", {
-            reference: getProformaLabel(targets[0]),
+            reference: proforma.reference || `#${proforma.id}`,
+          })
+        );
+      } else if (successCount > 0) {
+        showSuccessToast(
+          t("pages.proformas.delete.successTitle"),
+          t("pages.proformas.delete.successMultipleMessage", {
+            count: successCount,
           })
         );
-        return;
       }
 
-      showSuccessToast(
+      if (errorCount > 0) {
-        t("pages.proformas.delete.successTitle"),
-        t("pages.proformas.delete.successMultipleMessage", {
-          count: targets.length,
-        })
-      );
-    },
-    [t]
-  );
-
-  const notifyPartialError = React.useCallback(
-    (targets: DeleteProformaTarget[], errorCount: number) => {
-      if (targets.length === 1) {
         showErrorToast(
           t("pages.proformas.delete.errorTitle"),
-          t("pages.proformas.delete.errorSingleMessage")
+          proformas.length === 1
+            ? t("pages.proformas.delete.errorSingleMessage")
+            : t("pages.proformas.delete.errorMultipleMessage", {
+                count: errorCount,
+              })
         );
-        return;
       }
-
-      showErrorToast(
-        t("pages.proformas.delete.errorTitle"),
-        t("pages.proformas.delete.errorMultipleMessage", {
-          count: errorCount,
-        })
-      );
     },
     [t]
   );
 
   const submitDelete = React.useCallback(async () => {
-    const { targets } = state;
+    setState((current) => ({
-
+      ...current,
-    const results = await Promise.allSettled(
+      isSubmitting: true,
-      targets.map((target) => deleteMutation.mutateAsync(buildDeleteParams(target)))
+    }));
-    );
-
-    const successCount = results.filter((result) => result.status === "fulfilled").length;
-    const errorCount = results.length - successCount;
-
-    if (successCount > 0) {
-      const fulfilledTargets = targets.filter((_, index) => results[index]?.status === "fulfilled");
-      const rejectedTargets = targets.filter((_, index) => results[index]?.status === "rejected");
-
-      if (fulfilledTargets.length > 0) {
-        notifySuccess(fulfilledTargets);
-      }
-
-      if (rejectedTargets.length > 0) {
-        notifyPartialError(targets, rejectedTargets.length);
-        return;
-      }
-    }
-
-    if (errorCount > 0) {
-      notifyPartialError(targets, errorCount);
-      return;
-    }
-
-    setState(INITIAL_STATE);
-  }, [deleteMutation, notifyPartialError, notifySuccess, state]);
-
-  const confirmDelete = React.useCallback(async () => {
-    if (deleteMutation.isPending || state.targets.length === 0) {
-      return;
-    }
-
-    if (state.confirmStep === "initial") {
-      moveToSecondConfirmStep();
-      return;
-    }
 
     try {
-      await submitDelete();
+      const { successCount, errorCount } = await deleteSelectedProformas(proformas);
+
+      notifyDeleteResult(proformas, successCount, errorCount);
+
+      if (errorCount === 0) {
+        closeDialog();
+        return;
+      }
+
+      setState((current) => ({
+        ...current,
+        isSubmitting: false,
+      }));
     } catch {
       showErrorToast(
         t("pages.proformas.delete.errorTitle"),
         t("pages.proformas.delete.errorUnexpectedMessage")
       );
+
+      setState((current) => ({
+        ...current,
+        isSubmitting: false,
+      }));
     }
-  }, [deleteMutation.isPending, moveToSecondConfirmStep, state, submitDelete, t]);
+  }, [closeDialog, deleteSelectedProformas, notifyDeleteResult, proformas, t]);
+
+  const confirmDelete = React.useCallback(async () => {
+    if (!canSubmitDelete(isSubmitting, proformas)) {
+      return;
+    }
+
+    if (shouldMoveToSecondConfirmStep(requiresSecondConfirm, confirmStep)) {
+      moveToSecondConfirmStep();
+      return;
+    }
+
+    await submitDelete();
+  }, [
+    moveToSecondConfirmStep,
+    submitDelete,
+    isSubmitting,
+    proformas,
+    requiresSecondConfirm,
+    confirmStep,
+  ]);
 
   return {
     open: state.open,
-    targets: state.targets,
+    proformas: state.proformas,
-    isSubmitting: deleteMutation.isPending,
+    isSubmitting: state.isSubmitting,
+    requiresSecondConfirm: state.requiresSecondConfirm,
     isSecondConfirmStep: state.confirmStep === "second",
-    isBulkDelete: state.targets.length > 1,
+    isBulkDelete: state.proformas.length > 1,
 
     openDialog,
     closeDialog,
     confirmDelete,
   };
-};
+}

modules/customer-invoices/src/web/proformas/delete/entities/delete-proforma-target.entity.ts

@@ -1,4 +0,0 @@
-export interface DeleteProformaTarget {
-  id: string;
-  reference?: string;
-}

modules/customer-invoices/src/web/proformas/delete/entities/index.ts

@@ -1 +0,0 @@
-export * from "./delete-proforma-target.entity";

modules/customer-invoices/src/web/proformas/delete/ui/components/delete-proforma-dialog.tsx

@@ -10,60 +10,46 @@ import {
 } from "@repo/shadcn-ui/components";
 
 import { useTranslation } from "../../../../i18n";
-import type { DeleteProformaTarget } from "../../entities";
+import type { ProformaListRow } from "../../../shared";
 
 interface DeleteProformaDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  targets: DeleteProformaTarget[];
+  proformas: ProformaListRow[];
   isSubmitting: boolean;
   onConfirm: () => void;
+  requiresSecondConfirm: boolean;
   isSecondConfirmStep: boolean;
 }
 
-const getTargetLabel = (target: DeleteProformaTarget) => target.reference || `#${target.id}`;
+export function DeleteProformaDialog({
-
-export const DeleteProformaDialog = ({
   open,
   onOpenChange,
-  targets,
+  proformas,
   isSubmitting,
   onConfirm,
+  requiresSecondConfirm,
   isSecondConfirmStep,
-}: DeleteProformaDialogProps) => {
+}: DeleteProformaDialogProps) {
   const { t } = useTranslation();
 
-  const total = targets.length;
+  const total = proformas.length;
   const isSingle = total === 1;
-  const firstTarget = targets[0];
+  const firstProforma = proformas[0];
 
   const title = isSecondConfirmStep
-    ? isSingle
+    ? t("proformas.delete_proforma_dialog.second_confirm_title", { count: total })
-      ? t("components.delete_proforma_dialog.second_confirm_single_title", {
-          reference: getTargetLabel(firstTarget),
-        })
-      : t("components.delete_proforma_dialog.second_confirm_multiple_title", {
-          count: total,
-        })
     : isSingle
-      ? t("components.delete_proforma_dialog.single_title", {
+      ? t("proformas.delete_proforma_dialog.single_title", {
-          reference: getTargetLabel(firstTarget),
+          reference: firstProforma?.reference ?? `#${firstProforma?.id}`,
         })
-      : t("components.delete_proforma_dialog.multiple_title", {
+      : t("proformas.delete_proforma_dialog.multiple_title", { count: total });
-          count: total,
-        });
 
   const description = isSecondConfirmStep
-    ? isSingle
+    ? t("proformas.delete_proforma_dialog.second_confirm_description", { count: total })
-      ? t("components.delete_proforma_dialog.second_confirm_single_description")
-      : t("components.delete_proforma_dialog.second_confirm_multiple_description", {
-          count: total,
-        })
     : isSingle
-      ? t("components.delete_proforma_dialog.single_description")
+      ? t("proformas.delete_proforma_dialog.single_description")
-      : t("components.delete_proforma_dialog.multiple_description", {
+      : t("proformas.delete_proforma_dialog.multiple_description", { count: total });
-          count: total,
-        });
 
   return (
     <AlertDialog
@@ -79,39 +65,45 @@ export const DeleteProformaDialog = ({
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
 
-        {!isSecondConfirmStep && total > 1 ? (
+        {!isSecondConfirmStep && total > 1 && (
           <div className="mt-4 max-h-48 overflow-y-auto rounded-md border p-3 text-sm">
             <ul className="space-y-1">
-              {targets.map((target) => (
+              {proformas.map((proforma) => (
-                <li className="text-muted-foreground" key={target.id}>
+                <li className="flex justify-between text-muted-foreground" key={proforma.id}>
-                  {t("components.delete_proforma_dialog.list_item", {
+                  <span>
-                    reference: getTargetLabel(target),
+                    {t("proformas.delete_proforma_dialog.list_item", {
-                  })}
+                      reference: proforma.reference ?? `#${proforma.id}`,
+                    })}
+                  </span>
                 </li>
               ))}
             </ul>
           </div>
-        ) : null}
+        )}
 
         <AlertDialogFooter className="sm:justify-between">
           <Button disabled={isSubmitting} onClick={() => onOpenChange(false)} variant="outline">
-            {t("components.delete_proforma_dialog.cancel")}
+            {t("proformas.delete_proforma_dialog.cancel")}
           </Button>
 
-          <Button disabled={isSubmitting || total === 0} onClick={onConfirm} variant="destructive">
+          <Button disabled={isSubmitting} onClick={onConfirm} variant="destructive">
             {isSubmitting ? (
               <>
                 <Spinner className="mr-2 size-4" />
-                {t("components.delete_proforma_dialog.deleting")}
+                {t("proformas.delete_proforma_dialog.deleting")}
               </>
             ) : isSecondConfirmStep ? (
-              t("components.delete_proforma_dialog.confirm_delete")
+              t("proformas.delete_proforma_dialog.confirm_mass_delete")
+            ) : isSingle ? (
+              t("proformas.delete_proforma_dialog.delete")
+            ) : requiresSecondConfirm ? (
+              t("proformas.delete_proforma_dialog.continue")
             ) : (
-              t("components.delete_proforma_dialog.continue")
+              t("proformas.delete_proforma_dialog.delete_plural")
             )}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
   );
-};
+}

modules/customer-invoices/src/web/proformas/delete/utils/index.ts

@@ -1 +0,0 @@
-export * from "./prepare-delete-proforma-targets";

modules/customer-invoices/src/web/proformas/delete/utils/prepare-delete-proforma-targets.ts

@@ -1,15 +0,0 @@
-import type { Proforma, ProformaListRow } from "../../shared";
-import type { DeleteProformaTarget } from "../entities";
-
-export const prepareDeleteProformaTargets = (
-  input: Proforma | ProformaListRow | Array<Proforma | ProformaListRow>
-): DeleteProformaTarget[] => {
-  const items = Array.isArray(input) ? input : [input];
-
-  return items.map(mapToDeleteProformaTarget);
-};
-
-const mapToDeleteProformaTarget = (proforma: Proforma | ProformaListRow): DeleteProformaTarget => ({
-  id: proforma.id,
-  reference: proforma.reference,
-});

modules/customer-invoices/src/web/proformas/list/controllers/use-list-proformas-page.controller.ts

@@ -1,15 +1,11 @@
 import type { RightPanelMode } from "@repo/rdx-ui/hooks";
 import { useSearchParams } from "react-router-dom";
 
-import { useDeleteProformaDialogController } from "../../delete";
-
 import { useListProformasController } from "./use-list-proformas.controller";
 import { useProformaSummaryPanelController } from "./use-proforma-summary-panel.controller";
 
 export const useListProformasPageController = () => {
   const listCtrl = useListProformasController();
-  const deleteDialogCtrl = useDeleteProformaDialogController();
-
   const [searchParams] = useSearchParams();
 
   const proformaId = searchParams.get("proformaId") ?? "";
@@ -24,7 +20,5 @@ export const useListProformasPageController = () => {
   return {
     listCtrl,
     panelCtrl,
-
-    deleteDialogCtrl,
   };
 };

modules/customer-invoices/src/web/proformas/list/controllers/use-list-proformas.controller.ts

@@ -32,7 +32,7 @@ export const useListProformasController = () => {
       pageNumber: pageIndex,
       pageSize,
       order: "desc",
-      orderBy: "invoice_date",
+      orderBy: "invoiceDate",
       filters:
         statusFilter === "all" ? [] : [{ field: "status", operator: "eq", value: statusFilter }],
     }),

modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/proformas-grid.tsx

@@ -22,7 +22,6 @@ interface ProformasGridProps {
 export const ProformasGrid = ({
   data,
   loading,
-  fetching,
   columns,
   pageIndex,
   pageSize,
@@ -33,7 +32,7 @@ export const ProformasGrid = ({
   const { t } = useTranslation();
   const { items, totalItems } = data || { items: [], totalItems: 0 };
 
-  if (loading) {
+  if (loading)
     return (
       <SkeletonDataTable
         columns={columns.length}
@@ -42,7 +41,6 @@ export const ProformasGrid = ({
         showFooter
       />
     );
-  }
 
   return (
     <DataTable
@@ -53,6 +51,7 @@ export const ProformasGrid = ({
       manualPagination
       onPageChange={onPageChange}
       onPageSizeChange={onPageSizeChange}
+      onRowClick={(row, _index) => onRowClick?.(row.id)}
       pageIndex={pageIndex}
       pageSize={pageSize}
       totalItems={totalItems}

modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/use-proforma-grid-columns.tsx

@@ -96,6 +96,7 @@ export function useProformasGridColumns(
           return (
             <div className="flex items-center gap-2">
               <ProformaStatusBadge status={proforma.status} />
+
               {/* Enlace discreto a factura real */}
               {isIssued && (
                 <TooltipProvider>
@@ -104,13 +105,12 @@ export function useProformasGridColumns(
                       <Button
                         asChild
                         className="size-6 text-foreground hover:text-primary"
+                        onClick={() => actionHandlers.onLinkedInvoiceClick?.(proforma)}
                         size="icon"
                         variant="ghost"
                       >
-                        <a href={`/facturas/${invoiceId}`}>
+                        <ExternalLinkIcon />
-                          <ExternalLinkIcon />
+                        <span className="sr-only">Ver factura {invoiceId}</span>
-                          <span className="sr-only">Ver factura {invoiceId}</span>
-                        </a>
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>Ver factura {invoiceId}</TooltipContent>
@@ -148,6 +148,8 @@ export function useProformasGridColumns(
               >
                 {proforma.recipient.name}
               </button>
+
+              <br />
               <div className="text-xs text-muted-foreground">{proforma.recipient.tin}</div>
             </div>
           );

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

@@ -15,9 +15,8 @@ import { FilterIcon, PlusIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 import { useTranslation } from "../../../../i18n";
-import { DeleteProformaDialog } from "../../../delete";
+import { ChangeStatusDialog } from "../../../change-status";
-import { prepareDeleteProformaTargets } from "../../../delete/utils";
+import { ProformaIssueDialog } from "../../../issue-proforma";
-import type { ProformaListRow } from "../../../shared";
 import { useListProformasPageController } from "../../controllers";
 import { ProformaSummaryPanel, ProformasGrid, useProformasGridColumns } from "../blocks";
 
@@ -25,17 +24,13 @@ export const ListProformasPage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const { listCtrl, panelCtrl, deleteDialogCtrl } = useListProformasPageController();
+  const { listCtrl, panelCtrl } = useListProformasPageController();
-
-  const handleDeleteProforma = (proformaRow: ProformaListRow) => {
-    deleteDialogCtrl.openDialog(prepareDeleteProformaTargets(proformaRow));
-  };
 
   const columns = useProformasGridColumns({
     onEditClick: (proforma) => navigate(`/proformas/${proforma.id}/edit`),
-    //onIssueClick: handleIssueProforma,
+    onIssueClick: handleIssueProforma,
     onDeleteClick: handleDeleteProforma,
-    //onChangeStatusClick: handleChangeStatusProforma,
+    onChangeStatusClick: handleChangeStatusProforma,
   });
 
   const isPanelOpen = panelCtrl.panelState.isOpen;
@@ -148,18 +143,32 @@ export const ListProformasPage = () => {
           <div className="flex min-h-0 flex-1 overflow-hidden">{listContent}</div>
         )}
         <>
+          {/* Emitir factura */}
+          <ProformaIssueDialog
+            isSubmitting={issueDialogCtrl.isSubmitting}
+            onConfirm={issueDialogCtrl.confirmIssue}
+            onOpenChange={(open) => !open && issueDialogCtrl.closeDialog()}
+            open={issueDialogCtrl.open}
+            proforma={issueDialogCtrl.proforma}
+          />
+
+          {/* Cambiar estado */}
+          <ChangeStatusDialog
+            isSubmitting={changeStatusDialogCtrl.isSubmitting}
+            onConfirm={changeStatusDialogCtrl.confirmChangeStatus}
+            onOpenChange={(open) => !open && changeStatusDialogCtrl.closeDialog()}
+            open={changeStatusDialogCtrl.open}
+            proformas={changeStatusDialogCtrl.proformas} // ← recibe el status seleccionado
+          />
+
           {/* Eliminar */}
           <DeleteProformaDialog
-            isSecondConfirmStep={deleteDialogCtrl.isSecondConfirmStep}
             isSubmitting={deleteDialogCtrl.isSubmitting}
             onConfirm={deleteDialogCtrl.confirmDelete}
-            onOpenChange={(open) => {
+            onOpenChange={(open) => !open && deleteDialogCtrl.closeDialog()}
-              if (!open) {
-                deleteDialogCtrl.closeDialog();
-              }
-            }}
             open={deleteDialogCtrl.open}
-            targets={deleteDialogCtrl.targets}
+            proformas={deleteDialogCtrl.proformas}
+            requireSecondConfirm={true}
           />
         </>
       </AppContent>

modules/customer-invoices/src/web/proformas/shared/hooks/index.ts

@@ -4,3 +4,5 @@ export * from "./use-proforma-delete-mutation";
 export * from "./use-proforma-get-query";
 export * from "./use-proforma-update-mutation";
 export * from "./use-proformas-list-query";
+
+:

modules/customers/src/common/locales/en.json

@@ -192,16 +192,6 @@
     }
   },
   "components": {
-    "delete_proforma_dialog": {
-      "single_title": "Eliminar proforoma",
-      "single_description": "",
-      "second_confirm_single_title": "Confirmar eliminación",
-      "second_confirm_single_description": "",
-      "confirm_delete": "Confirmar eliminación",
-      "deleting": "Eliminando...",
-      "cancel": "Cancelar",
-      "continue": "Eliminar"
-    },
     "entity_selector": {
       "close": "Close",
       "select_entity": "Select entity",

modules/customers/src/common/locales/es.json

@@ -194,18 +194,6 @@
     }
   },
   "components": {
-    "delete_proforma_dialog": {
-      "single_title": "Eliminar proforoma",
-      "single_description": "",
-      "second_confirm_single_title": "Confirmar eliminación",
-      "second_confirm_single_description": "",
-      "multiple_description": "",
-      "confirm_delete": "Confirmar eliminación",
-      "deleting": "Eliminando...",
-      "cancel": "Cancelar",
-      "continue": "Eliminar",
-      "list_item": ""
-    },
     "entity_selector": {
       "close": "Cerrar",
       "select_entity": "Seleccionar entidad",