Agregar mensaje de operación en progreso en el archivo de traducción

modules/customer-invoices/src/common/locales/en.json

@@ -68,7 +68,8 @@
       "complete": "Complete",
       "archive": "Archive",
       "duplicate": "Duplicate",
-      "delete": "Delete"
+      "delete": "Delete",
+      "operation_in_progress": "Operation in progress"
     },
     "status": {
       "all": "All",

modules/customer-invoices/src/common/locales/es.json

@@ -68,7 +68,8 @@
       "complete": "Completar",
       "archive": "Archivar",
       "duplicate": "Duplicar",
-      "delete": "Eliminar"
+      "delete": "Eliminar",
+      "operation_in_progress": "Operación en curso"
     },
     "status": {
       "all": "Todos",

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

@@ -1,15 +1,22 @@
 import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
-import { DataTable, DataTableColumnHeader, RdxPageContainer } from "@repo/rdx-ui/components";
 import {
-  Badge,
+  DataTable,
-  Button,
+  DataTableColumnHeader,
-  DropdownMenu,
+  RdxPageContainer,
-  DropdownMenuContent,
+  RdxRowActions,
-  DropdownMenuItem,
+  type RdxRowAction,
-  DropdownMenuTrigger,
+} from "@repo/rdx-ui/components";
-} from "@repo/shadcn-ui/components";
+import { Badge, Button } from "@repo/shadcn-ui/components";
 import type { ColumnDef } from "@tanstack/react-table";
-import { CircleIcon, MoreHorizontalIcon } from "lucide-react";
+import {
+  ArchiveIcon,
+  CheckCircle2Icon,
+  CircleIcon,
+  CirclePauseIcon,
+  CopyIcon,
+  PlayCircleIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 
@@ -46,6 +53,37 @@ const getActions = (status: RecurringProformaListRow["status"]): RecurringProfor
   }
 };
 
+const actionIcons = {
+  activate: PlayCircleIcon,
+  pause: CirclePauseIcon,
+  resume: PlayCircleIcon,
+  complete: CheckCircle2Icon,
+  archive: ArchiveIcon,
+  duplicate: CopyIcon,
+  delete: Trash2Icon,
+} as const;
+
+const buildRowActions = (params: {
+  recurringProforma: RecurringProformaListRow;
+  execute: (id: string, action: RecurringProformaAction) => void;
+  isPending: boolean;
+  t: (key: string) => string;
+}): RdxRowAction[] =>
+  getActions(params.recurringProforma.status).map((action) => {
+    const Icon = actionIcons[action];
+    return {
+      id: action,
+      label: params.t(`recurring_proformas.actions.${action}`),
+      icon: <Icon className="size-4" />,
+      destructive: action === "archive" || action === "delete",
+      disabled: params.isPending,
+      disabledReason: params.isPending
+        ? params.t("recurring_proformas.actions.operation_in_progress")
+        : undefined,
+      onSelect: () => params.execute(params.recurringProforma.id, action),
+    };
+  });
+
 export const ListRecurringProformasPage = () => {
   const { t, i18n } = useTranslation();
   const [isSearchPending, setIsSearchPending] = useState(false);
@@ -61,6 +99,9 @@ export const ListRecurringProformasPage = () => {
   } = useListRecurringProformasPageController();
   const actionMutation = useRecurringProformaActionMutation();
   const dateLocale = i18n.language === "en" ? "en-US" : "es-ES";
+  const executeAction = (id: string, action: RecurringProformaAction) => {
+    actionMutation.mutate({ id, action });
+  };
 
   const columns = useMemo<ColumnDef<RecurringProformaListRow>[]>(
     () => [
@@ -188,45 +229,27 @@ export const ListRecurringProformasPage = () => {
       },
       {
         id: "actions",
-        header: ({ column }) => (
+        meta: {
-          <DataTableColumnHeader
+          isActionsColumn: true,
-            column={column}
+          headerClassName: "text-right",
-            title={t("recurring_proformas.list.columns.actions")}
+          cellClassName: "flex justify-end",
-          />
+        },
-        ),
+        header: "",
+        enableSorting: false,
         cell: ({ row }) => (
-          <DropdownMenu>
+          <RdxRowActions
-            <DropdownMenuTrigger
+            overflowActions={buildRowActions({
-              render={
+              recurringProforma: row.original,
-                <Button
+              execute: executeAction,
-                  aria-label={t("recurring_proformas.list.columns.actions")}
+              isPending: actionMutation.isPending,
-                  size="icon"
+              t,
-                  type="button"
+            })}
-                  variant="ghost"
+            overflowLabel={t("common.more_actions")}
-                >
+          />
-                  <MoreHorizontalIcon className="size-4" />
-                </Button>
-              }
-            />
-            <DropdownMenuContent align="end">
-              {getActions(row.original.status).map((action) => (
-                <DropdownMenuItem
-                  disabled={actionMutation.isPending}
-                  key={action}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    actionMutation.mutate({ id: row.original.id, action });
-                  }}
-                >
-                  {t(`recurring_proformas.actions.${action}`)}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
         ),
       },
     ],
-    [actionMutation, dateLocale, t]
+    [actionMutation.isPending, dateLocale, t]
   );
 
   if (hasBlockingError && pageError) {