Rodax_Software/FactuGES_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Arranz 2026-09-05 11:43:48 +02:00
parent 66f24468ab
commit bbca943c87
3 changed files with 193 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
modules/catalogs/src/web/settings/tax-regimes/ui/components/tax-regime-row-actions.tsx
View File

@ -1,5 +1,6 @@
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Spinner } from "@repo/shadcn-ui/components"; import { type RdxRowAction, RdxRowActions } from "@repo/rdx-ui/components";
import { MoreHorizontalIcon } from "lucide-react"; import { Spinner } from "@repo/shadcn-ui/components";
import { PencilIcon, PowerIcon, PowerOffIcon, Trash2Icon } from "lucide-react";
import { useTranslation } from "../../../../i18n"; import { useTranslation } from "../../../../i18n";
import type { TaxRegimeListRow } from "../../../../tax-regimes/shared"; import type { TaxRegimeListRow } from "../../../../tax-regimes/shared";
@ -29,61 +30,50 @@ export const TaxRegimeRowActions = ({
const toggleDisabled = taxRegime.isSystem || isTogglingActive; const toggleDisabled = taxRegime.isSystem || isTogglingActive;
const deleteDisabled = taxRegime.isSystem; 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 ( return (
<div className="flex items-center gap-2"> <RdxRowActions
<Button overflowActions={overflowActions}
aria-label={t("settings.taxRegimes.actions.edit")} overflowLabel={t("settings.taxRegimes.actions.more")}
disabled={editDisabled} primaryActions={primaryActions}
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>
); );
}; };

26
modules/catalogs/src/web/settings/tax-regimes/ui/components/tax-regimes-empty-state.tsx
View File

@ -1,4 +1,5 @@
import { Button } from "@repo/shadcn-ui/components"; import { Button } from "@repo/shadcn-ui/components";
import { CirclePlusIcon } from "lucide-react";
import { useTranslation } from "../../../../i18n"; import { useTranslation } from "../../../../i18n";
@ -6,17 +7,18 @@ export const TaxRegimesEmptyState = ({ onCreate }: { onCreate: () => void }) =>
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="rounded-xl border border-dashed border-border bg-muted/20 p-8 text-center"> <Button
<div className="space-y-2"> 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"
<h3 className="text-lg font-semibold">{t("settings.taxRegimes.empty.title")}</h3> onClick={onCreate}
<p className="text-sm text-muted-foreground"> variant="outline"
{t("settings.taxRegimes.empty.description")} >
</p> <span className="flex items-center justify-center gap-2">
</div> <CirclePlusIcon aria-hidden className="size-5 text-muted-foreground" />
{t("settings.taxRegimes.empty.title")}
<Button className="mt-6" onClick={onCreate}> </span>
{t("settings.taxRegimes.actions.create")} <span className="text-sm font-normal text-muted-foreground">
</Button> {t("settings.taxRegimes.empty.description")}
</div> </span>
</Button>
); );
}; };

244
modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx
View File

@ -1,7 +1,8 @@
import { PageErrorState } from "@erp/core/components"; import { PageErrorState } from "@erp/core/components";
import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components"; import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
import { Button, Card, CardContent } from "@repo/shadcn-ui/components"; import { Button, Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react"; import { cn } from "@repo/shadcn-ui/lib/utils";
import { CircleIcon, LandmarkIcon, PlusIcon } from "lucide-react";
import { useTranslation } from "../../../../i18n"; import { useTranslation } from "../../../../i18n";
import { useTaxRegimesSettingsPageController } from "../../controllers"; import { useTaxRegimesSettingsPageController } from "../../controllers";
@ -63,123 +64,142 @@ export const TaxRegimesSettingsPage = () => {
}; };
return ( return (
<RdxPageContainer width="full"> <>
<div className="mx-auto flex w-full max-w-5xl flex-col gap-6"> <Card>
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between"> <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="space-y-2"> <div className="flex min-w-0 items-start gap-4">
<h2 className="text-2xl font-semibold tracking-tight"> <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
{t("settings.taxRegimes.title")} <LandmarkIcon aria-hidden className="size-6" />
</h2> </div>
<p className="max-w-3xl text-sm text-muted-foreground"> <div className="min-w-0 space-y-1">
{t("settings.taxRegimes.description")} <h2 className="text-2xl font-semibold tracking-tight">
</p> {t("settings.taxRegimes.title")}
</h2>
<p className="text-sm text-muted-foreground">
{t("settings.taxRegimes.description")}
</p>
</div>
</div> </div>
{ctrl.list.length > 0 && (
<Button onClick={featureCtrl.openCreateDialog}> <Button className="shrink-0 self-start" onClick={featureCtrl.openCreateDialog}>
<PlusIcon aria-hidden className="mr-2 size-4" /> <PlusIcon aria-hidden className="size-4" />
{t("settings.taxRegimes.actions.create")} {t("settings.taxRegimes.actions.create")}
</Button> </Button>
</div> )}
</CardHeader>
{ctrl.list.length === 0 ? ( <CardContent className="@container space-y-3">
<TaxRegimesEmptyState onCreate={featureCtrl.openCreateDialog} /> {ctrl.list.length > 0 && (
) : ( <div className="space-y-3">
<div className="space-y-3"> {ctrl.list.map((taxRegime) => (
{ctrl.list.map((taxRegime) => ( <div
<Card key={taxRegime.id}> className="flex min-w-0 flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 @min-[52rem]:flex-nowrap"
<CardContent className="flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between"> key={taxRegime.id}
<div className="min-w-0 space-y-2"> >
<div className="flex flex-wrap items-center gap-2"> <div className="flex min-w-0 basis-full items-center gap-3 @min-[52rem]:basis-0 @min-[52rem]:flex-1">
<span className="rounded-md border border-border bg-muted px-2 py-1 font-mono text-xs font-medium text-muted-foreground"> <div className="hidden flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
{taxRegime.code} <LandmarkIcon aria-hidden className="size-5" />
</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>
</div> </div>
<div className="min-w-0 flex-1 space-y-1">
<div className="space-y-1"> <p
<p className="text-sm font-medium text-foreground">{taxRegime.description}</p> className="truncate font-mono text-sm font-semibold text-foreground"
title={taxRegime.description}
>
{taxRegime.description}
</p>
</div> </div>
</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 featureCtrl.enable(item);
activeDisabledReason={activeDisabledReason(taxRegime.isSystem)} }}
deleteDisabledReason={deleteDisabledReason(taxRegime.isSystem)} taxRegime={taxRegime}
isTogglingActive={featureCtrl.isTogglingActive} />
onDelete={featureCtrl.openDeleteDialog} </div>
onEdit={featureCtrl.openEditDialog} </div>
onToggleActive={(item) => { ))}
if (item.isActive) { </div>
featureCtrl.disable(item); )}
return; {ctrl.list.length === 0 && (
} <TaxRegimesEmptyState onCreate={featureCtrl.openCreateDialog} />
)}
</CardContent>
</Card>
featureCtrl.enable(item); <TaxRegimeFormDialog
}} description={t("settings.taxRegimes.create.description")}
taxRegime={taxRegime} form={featureCtrl.form}
/> formId={featureCtrl.formId}
</CardContent> isEditMode={false}
</Card> isSubmitting={featureCtrl.isSaving}
))} onSubmit={featureCtrl.onSubmit}
</div> open={featureCtrl.isCreateOpen}
)} openChange={(open) => {
if (!open) {
featureCtrl.closeCreateDialog();
}
}}
submitLabel={t("settings.taxRegimes.actions.create")}
title={t("settings.taxRegimes.create.title")}
/>
<TaxRegimeFormDialog <TaxRegimeFormDialog
description={t("settings.taxRegimes.create.description")} description={t("settings.taxRegimes.edit.description")}
form={featureCtrl.form} form={featureCtrl.form}
formId={featureCtrl.formId} formId={`${featureCtrl.formId}-edit`}
isEditMode={false} isEditMode
isSubmitting={featureCtrl.isSaving} isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingTaxRegimeLoading}
onSubmit={featureCtrl.onSubmit} onSubmit={featureCtrl.onSubmit}
open={featureCtrl.isCreateOpen} open={Boolean(featureCtrl.editingTaxRegime) || featureCtrl.isEditingTaxRegimeLoading}
openChange={(open) => { openChange={(open) => {
if (!open) { if (!open) {
featureCtrl.closeCreateDialog(); featureCtrl.closeEditDialog();
} }
}} }}
submitLabel={t("settings.taxRegimes.actions.create")} submitLabel={t("settings.taxRegimes.actions.save")}
title={t("settings.taxRegimes.create.title")} title={t("settings.taxRegimes.edit.title")}
/> />
<TaxRegimeFormDialog <DeleteTaxRegimeDialog
description={t("settings.taxRegimes.edit.description")} isSubmitting={featureCtrl.isDeleting}
form={featureCtrl.form} onConfirm={featureCtrl.confirmDelete}
formId={`${featureCtrl.formId}-edit`} onOpenChange={(open) => {
isEditMode if (!open) {
isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingTaxRegimeLoading} featureCtrl.closeDeleteDialog();
onSubmit={featureCtrl.onSubmit} }
open={Boolean(featureCtrl.editingTaxRegime) || featureCtrl.isEditingTaxRegimeLoading} }}
openChange={(open) => { open={Boolean(featureCtrl.deletingTaxRegime)}
if (!open) { target={featureCtrl.deletingTaxRegime}
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>
); );
}; };