feat: refactor acciones de fila y estado vacío en la configuración de regímenes fiscales

2026-09-05 11:43:48 +02:00 · 2026-09-05 11:43:48 +02:00 · bbca943c87
commit bbca943c87
parent 66f24468ab
3 changed files with 193 additions and 181 deletions
--- a/modules/catalogs/src/web/settings/tax-regimes/ui/components/tax-regime-row-actions.tsx
+++ b/modules/catalogs/src/web/settings/tax-regimes/ui/components/tax-regime-row-actions.tsx
@ -1,5 +1,6 @@
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Spinner } from "@repo/shadcn-ui/components";
-import { MoreHorizontalIcon } from "lucide-react";
+import { type RdxRowAction, RdxRowActions } from "@repo/rdx-ui/components";
+import { Spinner } from "@repo/shadcn-ui/components";
+import { PencilIcon, PowerIcon, PowerOffIcon, Trash2Icon } from "lucide-react";

 import { useTranslation } from "../../../../i18n";
 import type { TaxRegimeListRow } from "../../../../tax-regimes/shared";
@ -29,61 +30,50 @@ export const TaxRegimeRowActions = ({
  const toggleDisabled = taxRegime.isSystem || isTogglingActive;
  const deleteDisabled = taxRegime.isSystem;

+  const primaryActions: RdxRowAction[] = [
+    {
+      id: "edit",
+      label: t("settings.taxRegimes.actions.edit"),
+      icon: <PencilIcon aria-hidden className="size-4" />,
+      disabled: editDisabled,
+      disabledReason: editDisabled ? t("settings.taxRegimes.protections.systemEdit") : undefined,
+      onSelect: () => onEdit(taxRegime),
+    },
+    {
+      id: "toggle-active",
+      label: taxRegime.isActive
+        ? t("settings.taxRegimes.actions.disable")
+        : t("settings.taxRegimes.actions.enable"),
+      icon: isTogglingActive ? (
+        <Spinner aria-hidden className="size-4" />
+      ) : taxRegime.isActive ? (
+        <PowerOffIcon aria-hidden className="size-4" />
+      ) : (
+        <PowerIcon aria-hidden className="size-4" />
+      ),
+      disabled: toggleDisabled,
+      disabledReason: toggleDisabled ? activeDisabledReason : undefined,
+      onSelect: () => onToggleActive(taxRegime),
+    },
+  ];
+
+  const overflowActions: RdxRowAction[] = [
+    {
+      id: "delete",
+      label: t("settings.taxRegimes.actions.delete"),
+      icon: <Trash2Icon aria-hidden className="size-4" />,
+      destructive: true,
+      disabled: deleteDisabled,
+      disabledReason: deleteDisabled ? deleteDisabledReason : undefined,
+      onSelect: () => onDelete(taxRegime),
+    },
+  ];
+
  return (
-    <div className="flex items-center gap-2">
-      <Button
-        aria-label={t("settings.taxRegimes.actions.edit")}
-        disabled={editDisabled}
-        onClick={() => onEdit(taxRegime)}
-        size="sm"
-        title={editDisabled ? t("settings.taxRegimes.protections.systemEdit") : undefined}
-        variant="outline"
-      >
-        {t("settings.taxRegimes.actions.edit")}
-      </Button>
-
-      <Button
-        aria-label={
-          taxRegime.isActive
-            ? t("settings.taxRegimes.actions.disable")
-            : t("settings.taxRegimes.actions.enable")
-        }
-        aria-busy={isTogglingActive}
-        disabled={toggleDisabled}
-        onClick={() => onToggleActive(taxRegime)}
-        size="sm"
-        title={toggleDisabled ? activeDisabledReason : undefined}
-        variant="outline"
-      >
-        {isTogglingActive ? <Spinner aria-hidden className="mr-2 size-4" /> : null}
-        {taxRegime.isActive
-          ? t("settings.taxRegimes.actions.disable")
-          : t("settings.taxRegimes.actions.enable")}
-      </Button>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          render={
-            <Button aria-label={t("settings.taxRegimes.actions.more")} size="icon" variant="ghost">
-              <MoreHorizontalIcon className="size-4" />
-            </Button>
-          }
-        />
-        <DropdownMenuContent
-          align="end"
-          className="w-48"
-          render={
-            <DropdownMenuItem
-              disabled={deleteDisabled}
-              onClick={() => onDelete(taxRegime)}
-              title={deleteDisabled ? deleteDisabledReason : undefined}
-              variant="destructive"
-            >
-              {t("settings.taxRegimes.actions.delete")}
-            </DropdownMenuItem>
-          }
-        />
-      </DropdownMenu>
-    </div>
+    <RdxRowActions
+      overflowActions={overflowActions}
+      overflowLabel={t("settings.taxRegimes.actions.more")}
+      primaryActions={primaryActions}
+    />
  );
 };
--- a/modules/catalogs/src/web/settings/tax-regimes/ui/components/tax-regimes-empty-state.tsx
+++ b/modules/catalogs/src/web/settings/tax-regimes/ui/components/tax-regimes-empty-state.tsx
@ -1,4 +1,5 @@
 import { Button } from "@repo/shadcn-ui/components";
+import { CirclePlusIcon } from "lucide-react";

 import { useTranslation } from "../../../../i18n";

@ -6,17 +7,18 @@ export const TaxRegimesEmptyState = ({ onCreate }: { onCreate: () => void }) =>
  const { t } = useTranslation();

  return (
-    <div className="rounded-xl border border-dashed border-border bg-muted/20 p-8 text-center">
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">{t("settings.taxRegimes.empty.title")}</h3>
-        <p className="text-sm text-muted-foreground">
-          {t("settings.taxRegimes.empty.description")}
-        </p>
-      </div>
-
-      <Button className="mt-6" onClick={onCreate}>
-        {t("settings.taxRegimes.actions.create")}
-      </Button>
-    </div>
+    <Button
+      className="h-auto min-h-28 w-full flex-col gap-2 whitespace-normal rounded-xl border-dashed px-4 py-6 text-center shadow-none transition-colors hover:bg-muted/50"
+      onClick={onCreate}
+      variant="outline"
+    >
+      <span className="flex items-center justify-center gap-2">
+        <CirclePlusIcon aria-hidden className="size-5 text-muted-foreground" />
+        {t("settings.taxRegimes.empty.title")}
+      </span>
+      <span className="text-sm font-normal text-muted-foreground">
+        {t("settings.taxRegimes.empty.description")}
+      </span>
+    </Button>
  );
 };
--- a/modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx
+++ b/modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx
@ -1,7 +1,8 @@
 import { PageErrorState } from "@erp/core/components";
 import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
-import { Button, Card, CardContent } from "@repo/shadcn-ui/components";
-import { PlusIcon } from "lucide-react";
+import { Button, Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { CircleIcon, LandmarkIcon, PlusIcon } from "lucide-react";

 import { useTranslation } from "../../../../i18n";
 import { useTaxRegimesSettingsPageController } from "../../controllers";
@ -63,123 +64,142 @@ export const TaxRegimesSettingsPage = () => {
  };

  return (
-    <RdxPageContainer width="full">
-      <div className="mx-auto flex w-full max-w-5xl flex-col gap-6">
-        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-          <div className="space-y-2">
-            <h2 className="text-2xl font-semibold tracking-tight">
-              {t("settings.taxRegimes.title")}
-            </h2>
-            <p className="max-w-3xl text-sm text-muted-foreground">
-              {t("settings.taxRegimes.description")}
-            </p>
+    <>
+      <Card>
+        <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-start gap-4">
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <LandmarkIcon aria-hidden className="size-6" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                {t("settings.taxRegimes.title")}
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                {t("settings.taxRegimes.description")}
+              </p>
+            </div>
          </div>
-
-          <Button onClick={featureCtrl.openCreateDialog}>
-            <PlusIcon aria-hidden className="mr-2 size-4" />
-            {t("settings.taxRegimes.actions.create")}
-          </Button>
-        </div>
-
-        {ctrl.list.length === 0 ? (
-          <TaxRegimesEmptyState onCreate={featureCtrl.openCreateDialog} />
-        ) : (
-          <div className="space-y-3">
-            {ctrl.list.map((taxRegime) => (
-              <Card key={taxRegime.id}>
-                <CardContent className="flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
-                  <div className="min-w-0 space-y-2">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <span className="rounded-md border border-border bg-muted px-2 py-1 font-mono text-xs font-medium text-muted-foreground">
-                        {taxRegime.code}
-                      </span>
-
-                      {taxRegime.isSystem ? (
-                        <RdxBadge variant="secondary">
-                          {t("settings.taxRegimes.status.system")}
-                        </RdxBadge>
-                      ) : null}
-
-                      <RdxBadge variant={taxRegime.isActive ? "outline" : "secondary"}>
-                        {taxRegime.isActive
-                          ? t("settings.taxRegimes.status.active")
-                          : t("settings.taxRegimes.status.inactive")}
-                      </RdxBadge>
+          {ctrl.list.length > 0 && (
+            <Button className="shrink-0 self-start" onClick={featureCtrl.openCreateDialog}>
+              <PlusIcon aria-hidden className="size-4" />
+              {t("settings.taxRegimes.actions.create")}
+            </Button>
+          )}
+        </CardHeader>
+        <CardContent className="@container space-y-3">
+          {ctrl.list.length > 0 && (
+            <div className="space-y-3">
+              {ctrl.list.map((taxRegime) => (
+                <div
+                  className="flex min-w-0 flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 @min-[52rem]:flex-nowrap"
+                  key={taxRegime.id}
+                >
+                  <div className="flex min-w-0 basis-full items-center gap-3 @min-[52rem]:basis-0 @min-[52rem]:flex-1">
+                    <div className="hidden flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                      <LandmarkIcon aria-hidden className="size-5" />
                    </div>
-
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium text-foreground">{taxRegime.description}</p>
+                    <div className="min-w-0 flex-1 space-y-1">
+                      <p
+                        className="truncate font-mono text-sm font-semibold text-foreground"
+                        title={taxRegime.description}
+                      >
+                        {taxRegime.description}
+                      </p>
                    </div>
                  </div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <RdxBadge
+                      className={cn(
+                        "gap-1.5 rounded-full px-3",
+                        taxRegime.isActive && "bg-primary/10 text-primary"
+                      )}
+                      variant={taxRegime.isActive ? "secondary" : "destructive"}
+                    >
+                      <CircleIcon aria-hidden className="fill-current" />
+                      {taxRegime.isActive
+                        ? t("settings.taxRegimes.status.active")
+                        : t("settings.taxRegimes.status.inactive")}
+                    </RdxBadge>
+                    {taxRegime.isSystem && (
+                      <RdxBadge className="rounded-full px-3" variant="secondary">
+                        {t("settings.taxRegimes.status.system")}
+                      </RdxBadge>
+                    )}
+                  </div>
+                  <div className="ml-auto shrink-0">
+                    <TaxRegimeRowActions
+                      activeDisabledReason={activeDisabledReason(taxRegime.isSystem)}
+                      deleteDisabledReason={deleteDisabledReason(taxRegime.isSystem)}
+                      isTogglingActive={featureCtrl.isTogglingActive}
+                      onDelete={featureCtrl.openDeleteDialog}
+                      onEdit={featureCtrl.openEditDialog}
+                      onToggleActive={(item) => {
+                        if (item.isActive) {
+                          featureCtrl.disable(item);
+                          return;
+                        }

-                  <TaxRegimeRowActions
-                    activeDisabledReason={activeDisabledReason(taxRegime.isSystem)}
-                    deleteDisabledReason={deleteDisabledReason(taxRegime.isSystem)}
-                    isTogglingActive={featureCtrl.isTogglingActive}
-                    onDelete={featureCtrl.openDeleteDialog}
-                    onEdit={featureCtrl.openEditDialog}
-                    onToggleActive={(item) => {
-                      if (item.isActive) {
-                        featureCtrl.disable(item);
-                        return;
-                      }
+                        featureCtrl.enable(item);
+                      }}
+                      taxRegime={taxRegime}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {ctrl.list.length === 0 && (
+            <TaxRegimesEmptyState onCreate={featureCtrl.openCreateDialog} />
+          )}
+        </CardContent>
+      </Card>

-                      featureCtrl.enable(item);
-                    }}
-                    taxRegime={taxRegime}
-                  />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        )}
+      <TaxRegimeFormDialog
+        description={t("settings.taxRegimes.create.description")}
+        form={featureCtrl.form}
+        formId={featureCtrl.formId}
+        isEditMode={false}
+        isSubmitting={featureCtrl.isSaving}
+        onSubmit={featureCtrl.onSubmit}
+        open={featureCtrl.isCreateOpen}
+        openChange={(open) => {
+          if (!open) {
+            featureCtrl.closeCreateDialog();
+          }
+        }}
+        submitLabel={t("settings.taxRegimes.actions.create")}
+        title={t("settings.taxRegimes.create.title")}
+      />

-        <TaxRegimeFormDialog
-          description={t("settings.taxRegimes.create.description")}
-          form={featureCtrl.form}
-          formId={featureCtrl.formId}
-          isEditMode={false}
-          isSubmitting={featureCtrl.isSaving}
-          onSubmit={featureCtrl.onSubmit}
-          open={featureCtrl.isCreateOpen}
-          openChange={(open) => {
-            if (!open) {
-              featureCtrl.closeCreateDialog();
-            }
-          }}
-          submitLabel={t("settings.taxRegimes.actions.create")}
-          title={t("settings.taxRegimes.create.title")}
-        />
+      <TaxRegimeFormDialog
+        description={t("settings.taxRegimes.edit.description")}
+        form={featureCtrl.form}
+        formId={`${featureCtrl.formId}-edit`}
+        isEditMode
+        isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingTaxRegimeLoading}
+        onSubmit={featureCtrl.onSubmit}
+        open={Boolean(featureCtrl.editingTaxRegime) || featureCtrl.isEditingTaxRegimeLoading}
+        openChange={(open) => {
+          if (!open) {
+            featureCtrl.closeEditDialog();
+          }
+        }}
+        submitLabel={t("settings.taxRegimes.actions.save")}
+        title={t("settings.taxRegimes.edit.title")}
+      />

-        <TaxRegimeFormDialog
-          description={t("settings.taxRegimes.edit.description")}
-          form={featureCtrl.form}
-          formId={`${featureCtrl.formId}-edit`}
-          isEditMode
-          isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingTaxRegimeLoading}
-          onSubmit={featureCtrl.onSubmit}
-          open={Boolean(featureCtrl.editingTaxRegime) || featureCtrl.isEditingTaxRegimeLoading}
-          openChange={(open) => {
-            if (!open) {
-              featureCtrl.closeEditDialog();
-            }
-          }}
-          submitLabel={t("settings.taxRegimes.actions.save")}
-          title={t("settings.taxRegimes.edit.title")}
-        />
-
-        <DeleteTaxRegimeDialog
-          isSubmitting={featureCtrl.isDeleting}
-          onConfirm={featureCtrl.confirmDelete}
-          onOpenChange={(open) => {
-            if (!open) {
-              featureCtrl.closeDeleteDialog();
-            }
-          }}
-          open={Boolean(featureCtrl.deletingTaxRegime)}
-          target={featureCtrl.deletingTaxRegime}
-        />
-      </div>
-    </RdxPageContainer>
+      <DeleteTaxRegimeDialog
+        isSubmitting={featureCtrl.isDeleting}
+        onConfirm={featureCtrl.confirmDelete}
+        onOpenChange={(open) => {
+          if (!open) {
+            featureCtrl.closeDeleteDialog();
+          }
+        }}
+        open={Boolean(featureCtrl.deletingTaxRegime)}
+        target={featureCtrl.deletingTaxRegime}
+      />
+    </>
  );
 };