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

feat: mejorar la interfaz de usuario en la configuración de términos de pago y optimizar acciones de fila

Browse Source
This commit is contained in:
David Arranz 2026-09-05 11:57:12 +02:00
parent 81da489ca8
commit 12c496e93a
4 changed files with 302 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx
View File

@ -1,5 +1,4 @@
import { RdxBadge } from "@repo/rdx-ui/components"; import { RdxBadge } from "@repo/rdx-ui/components";
import { Card, CardContent } from "@repo/shadcn-ui/components";
import { CalendarClockIcon } from "lucide-react"; import { CalendarClockIcon } from "lucide-react";
import { useTranslation } from "../../../../i18n"; import { useTranslation } from "../../../../i18n";
@ -48,120 +47,116 @@ export const PaymentTermListItem = ({
const formatLocalizedDueDays = (value: number) => formatPaymentTermDueDays(value, t); const formatLocalizedDueDays = (value: number) => formatPaymentTermDueDays(value, t);
return ( return (
<Card className="border-border/70 shadow-none"> <div className="flex flex-col gap-5 rounded-xl border border-border/70 bg-card p-4 sm:gap-6 sm:p-5">
<CardContent className="flex flex-col gap-5 p-4 sm:gap-6 sm:p-5"> <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
<div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between"> <div className="flex min-w-0 items-start gap-3 sm:gap-4">
<div className="flex min-w-0 items-start gap-3 sm:gap-4"> <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-muted/40 text-primary sm:size-11">
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-muted/40 text-primary sm:size-11"> <CalendarClockIcon aria-hidden className="size-5" />
<CalendarClockIcon aria-hidden className="size-5" /> </div>
</div>
<div className="min-w-0 space-y-2"> <div className="min-w-0 space-y-2">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<h3 className="text-sm font-semibold text-foreground sm:text-base"> <h3 className="text-sm font-semibold text-foreground sm:text-base">
{paymentTerm.name} {paymentTerm.name}
</h3> </h3>
<RdxBadge variant={paymentTerm.isActive ? "outline" : "secondary"}> <RdxBadge variant={paymentTerm.isActive ? "outline" : "secondary"}>
{paymentTerm.isActive {paymentTerm.isActive
? t("settings.paymentTerms.status.active") ? t("settings.paymentTerms.status.active")
: t("settings.paymentTerms.status.inactive")} : t("settings.paymentTerms.status.inactive")}
</RdxBadge> </RdxBadge>
{paymentTerm.isSystem ? ( {paymentTerm.isSystem ? (
<RdxBadge variant="secondary"> <RdxBadge variant="secondary">{t("settings.paymentTerms.status.system")}</RdxBadge>
{t("settings.paymentTerms.status.system")}
</RdxBadge>
) : null}
</div>
{paymentTerm.description ? (
<p className="max-w-3xl text-sm text-muted-foreground">{paymentTerm.description}</p>
) : null} ) : null}
</div> </div>
</div>
<PaymentTermRowActions {paymentTerm.description ? (
activeDisabledReason={activeDisabledReason} <p className="max-w-3xl text-sm text-muted-foreground">{paymentTerm.description}</p>
deleteDisabledReason={deleteDisabledReason} ) : null}
isTogglingActive={isTogglingActive}
onDelete={onDelete}
onEdit={onEdit}
onToggleActive={onToggleActive}
paymentTerm={paymentTerm}
/>
</div>
<div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
<div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{t("settings.paymentTerms.summary.installmentsLabel")}
</p>
<p className="text-sm font-semibold text-foreground">
{t("settings.paymentTerms.summary.installmentsCount", { count: installmentCount })}
</p>
</div>
<div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{t("settings.paymentTerms.summary.lastInstallmentLabel")}
</p>
<p className="text-sm font-semibold text-foreground">
{lastDueDays === null ? "-" : formatLocalizedDueDays(lastDueDays)}
</p>
</div>
<div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3 md:col-span-2 xl:col-span-1">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{t("settings.paymentTerms.summary.distributionLabel")}
</p>
<p className="text-sm font-semibold text-foreground">
{percentageDistribution.map(formatLocalizedPercentage).join(" / ")}
</p>
</div> </div>
</div> </div>
<div className="space-y-4"> <PaymentTermRowActions
<div className="space-y-3"> activeDisabledReason={activeDisabledReason}
<h4 className="text-sm font-semibold text-foreground"> deleteDisabledReason={deleteDisabledReason}
{t("settings.paymentTerms.details.title")} isTogglingActive={isTogglingActive}
</h4> onDelete={onDelete}
onEdit={onEdit}
onToggleActive={onToggleActive}
paymentTerm={paymentTerm}
/>
</div>
<div className="grid gap-3 md:grid-cols-2"> <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
{sortedDueRules.map((rule, index) => ( <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
<div <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
className="rounded-lg border border-border/60 bg-background px-4 py-3" {t("settings.paymentTerms.summary.installmentsLabel")}
key={`${paymentTerm.id}-${rule.dueDays}-${rule.percentage}`} </p>
> <p className="text-sm font-semibold text-foreground">
<div className="flex items-start gap-3"> {t("settings.paymentTerms.summary.installmentsCount", { count: installmentCount })}
<div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground"> </p>
{index + 1} </div>
</div>
<div className="space-y-1"> <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
<p className="text-sm font-medium text-foreground tabular-nums"> <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{formatLocalizedPercentage(rule.percentage)} ·{" "} {t("settings.paymentTerms.summary.lastInstallmentLabel")}
{formatLocalizedDueDays(rule.dueDays)} </p>
</p> <p className="text-sm font-semibold text-foreground">
<p className="text-xs text-muted-foreground"> {lastDueDays === null ? "-" : formatLocalizedDueDays(lastDueDays)}
{rule.dueDays === 0 </p>
? t("settings.paymentTerms.details.sameDay") </div>
: t("settings.paymentTerms.details.baseDate")}
</p> <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3 md:col-span-2 xl:col-span-1">
</div> <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{t("settings.paymentTerms.summary.distributionLabel")}
</p>
<p className="text-sm font-semibold text-foreground">
{percentageDistribution.map(formatLocalizedPercentage).join(" / ")}
</p>
</div>
</div>
<div className="space-y-4">
<div className="space-y-3">
<h4 className="text-sm font-semibold text-foreground">
{t("settings.paymentTerms.details.title")}
</h4>
<div className="grid gap-3 md:grid-cols-2">
{sortedDueRules.map((rule, index) => (
<div
className="rounded-lg border border-border/60 bg-background px-4 py-3"
key={`${paymentTerm.id}-${rule.dueDays}-${rule.percentage}`}
>
<div className="flex items-start gap-3">
<div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
{index + 1}
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-foreground tabular-nums">
{formatLocalizedPercentage(rule.percentage)} ·{" "}
{formatLocalizedDueDays(rule.dueDays)}
</p>
<p className="text-xs text-muted-foreground">
{rule.dueDays === 0
? t("settings.paymentTerms.details.sameDay")
: t("settings.paymentTerms.details.baseDate")}
</p>
</div> </div>
</div> </div>
))} </div>
</div> ))}
</div> </div>
<PaymentTermSegmentedBar
formatDueDays={formatLocalizedDueDays}
formatPercentage={formatLocalizedPercentage}
segments={segments}
/>
</div> </div>
</CardContent>
</Card> <PaymentTermSegmentedBar
formatDueDays={formatLocalizedDueDays}
formatPercentage={formatLocalizedPercentage}
segments={segments}
/>
</div>
</div>
); );
}; };

118
modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-row-actions.tsx
View File

@ -1,12 +1,6 @@
import { import { type RdxRowAction, RdxRowActions } from "@repo/rdx-ui/components";
Button, import { Spinner } from "@repo/shadcn-ui/components";
DropdownMenu, import { PencilIcon, PowerIcon, PowerOffIcon, Trash2Icon } from "lucide-react";
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
Spinner,
} from "@repo/shadcn-ui/components";
import { MoreHorizontalIcon } from "lucide-react";
import { useTranslation } from "../../../../i18n"; import { useTranslation } from "../../../../i18n";
import type { PaymentTermListRow } from "../../../../payment-terms/shared"; import type { PaymentTermListRow } from "../../../../payment-terms/shared";
@ -36,68 +30,50 @@ export const PaymentTermRowActions = ({
const toggleDisabled = paymentTerm.isSystem || isTogglingActive; const toggleDisabled = paymentTerm.isSystem || isTogglingActive;
const deleteDisabled = paymentTerm.isSystem; const deleteDisabled = paymentTerm.isSystem;
const primaryActions: RdxRowAction[] = [
{
id: "edit",
label: t("settings.paymentTerms.actions.edit"),
icon: <PencilIcon aria-hidden className="size-4" />,
disabled: editDisabled,
disabledReason: editDisabled ? t("settings.paymentTerms.protections.systemEdit") : undefined,
onSelect: () => onEdit(paymentTerm),
},
{
id: "toggle-active",
label: paymentTerm.isActive
? t("settings.paymentTerms.actions.disable")
: t("settings.paymentTerms.actions.enable"),
icon: isTogglingActive ? (
<Spinner aria-hidden className="size-4" />
) : paymentTerm.isActive ? (
<PowerOffIcon aria-hidden className="size-4" />
) : (
<PowerIcon aria-hidden className="size-4" />
),
disabled: toggleDisabled,
disabledReason: toggleDisabled ? activeDisabledReason : undefined,
onSelect: () => onToggleActive(paymentTerm),
},
];
const overflowActions: RdxRowAction[] = [
{
id: "delete",
label: t("settings.paymentTerms.actions.delete"),
icon: <Trash2Icon aria-hidden className="size-4" />,
destructive: true,
disabled: deleteDisabled,
disabledReason: deleteDisabled ? deleteDisabledReason : undefined,
onSelect: () => onDelete(paymentTerm),
},
];
return ( return (
<div className="flex w-full flex-wrap items-center gap-2 xl:w-auto xl:justify-end"> <RdxRowActions
<Button overflowActions={overflowActions}
aria-label={t("settings.paymentTerms.actions.edit")} overflowLabel={t("settings.paymentTerms.actions.more")}
className="flex-1 sm:flex-none" primaryActions={primaryActions}
disabled={editDisabled} />
onClick={() => onEdit(paymentTerm)}
size="sm"
title={editDisabled ? t("settings.paymentTerms.protections.systemEdit") : undefined}
variant="outline"
>
{t("settings.paymentTerms.actions.edit")}
</Button>
<Button
aria-busy={isTogglingActive}
aria-label={
paymentTerm.isActive
? t("settings.paymentTerms.actions.disable")
: t("settings.paymentTerms.actions.enable")
}
className="flex-1 sm:flex-none"
disabled={toggleDisabled}
onClick={() => onToggleActive(paymentTerm)}
size="sm"
title={toggleDisabled ? activeDisabledReason : undefined}
variant="outline"
>
{isTogglingActive ? <Spinner aria-hidden className="mr-2 size-4" /> : null}
{paymentTerm.isActive
? t("settings.paymentTerms.actions.disable")
: t("settings.paymentTerms.actions.enable")}
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
aria-label={t("settings.paymentTerms.actions.more")}
className="shrink-0"
size="icon"
variant="ghost"
>
<MoreHorizontalIcon className="size-4" />
</Button>
}
/>
<DropdownMenuContent
align="end"
className="w-48"
render={
<DropdownMenuItem
disabled={deleteDisabled}
onClick={() => onDelete(paymentTerm)}
title={deleteDisabled ? deleteDisabledReason : undefined}
variant="destructive"
>
{t("settings.paymentTerms.actions.delete")}
</DropdownMenuItem>
}
/>
</DropdownMenu>
</div>
); );
}; };

26
modules/catalogs/src/web/settings/payment-terms/ui/components/payment-terms-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 PaymentTermsEmptyState = ({ 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.paymentTerms.empty.title")}</h3> onClick={onCreate}
<p className="text-sm text-muted-foreground"> variant="outline"
{t("settings.paymentTerms.empty.description")} >
</p> <span className="flex items-center justify-center gap-2">
</div> <CirclePlusIcon aria-hidden className="size-5 text-muted-foreground" />
{t("settings.paymentTerms.empty.title")}
<Button className="mt-6" onClick={onCreate}> </span>
{t("settings.paymentTerms.actions.create")} <span className="text-sm font-normal text-muted-foreground">
</Button> {t("settings.paymentTerms.empty.description")}
</div> </span>
</Button>
); );
}; };

275
modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx
View File

@ -1,7 +1,10 @@
import { PageErrorState } from "@erp/core/components"; import { PageErrorState } from "@erp/core/components";
import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components"; import { RdxPageContainer } from "@repo/rdx-ui/components";
import { import {
Button, Button,
Card,
CardContent,
CardHeader,
Input, Input,
Select, Select,
SelectContent, SelectContent,
@ -10,7 +13,7 @@ import {
SelectValue, SelectValue,
Spinner, Spinner,
} from "@repo/shadcn-ui/components"; } from "@repo/shadcn-ui/components";
import { PlusIcon, SearchIcon } from "lucide-react"; import { CalendarClockIcon, PlusIcon, SearchIcon } from "lucide-react";
import type { ChangeEvent } from "react"; import type { ChangeEvent } from "react";
import { useTranslation } from "../../../../i18n"; import { useTranslation } from "../../../../i18n";
@ -85,144 +88,156 @@ export const PaymentTermsSettingsPage = () => {
}; };
return ( return (
<RdxPageContainer width="full"> <>
<RdxPageStack className="mx-auto w-full max-w-6xl" spacing="default"> <Card>
<RdxPageHeader <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
actions={ <div className="flex min-w-0 items-start gap-4">
<Button className="w-full sm:w-auto" onClick={featureCtrl.openCreateDialog}> <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
<PlusIcon aria-hidden className="mr-2 size-4" /> <CalendarClockIcon aria-hidden className="size-6" />
{t("settings.paymentTerms.actions.create")} </div>
</Button> <div className="min-w-0 space-y-1">
} <h2 className="text-2xl font-semibold tracking-tight">
description={t("settings.paymentTerms.description")} {t("settings.paymentTerms.title")}
title={t("settings.paymentTerms.title")} </h2>
/> <p className="text-sm text-muted-foreground">
{t("settings.paymentTerms.description")}
<div className="flex flex-col gap-4 rounded-xl border border-border/60 bg-card p-4 shadow-none md:p-5 lg:flex-row lg:items-center lg:justify-between"> </p>
<div className="flex flex-col gap-3 lg:flex-row lg:items-center"> </div>
<div className="relative w-full lg:w-96 xl:w-[30rem]"> </div>
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <Button className="shrink-0 self-start" onClick={featureCtrl.openCreateDialog}>
<Input <PlusIcon aria-hidden className="size-4" />
aria-label={t("settings.paymentTerms.toolbar.searchPlaceholder")} {t("settings.paymentTerms.actions.create")}
className="pl-9 pr-10" </Button>
onChange={handleSearchChange} </CardHeader>
placeholder={t("settings.paymentTerms.toolbar.searchPlaceholder")} <CardContent className="@container space-y-4">
value={ctrl.search} <div className="flex flex-col gap-4 rounded-xl border border-border/60 bg-card p-4 shadow-none lg:flex-row lg:items-center lg:justify-between">
/> <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
{ctrl.isBackgroundFetching ? ( <div className="relative w-full lg:w-96 xl:w-[30rem]">
<Spinner <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
aria-hidden <Input
className="absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground" aria-label={t("settings.paymentTerms.toolbar.searchPlaceholder")}
className="pl-9 pr-10"
onChange={handleSearchChange}
placeholder={t("settings.paymentTerms.toolbar.searchPlaceholder")}
value={ctrl.search}
/> />
) : null} {ctrl.isBackgroundFetching ? (
<Spinner
aria-hidden
className="absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground"
/>
) : null}
</div>
<div className="grid gap-2 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center">
<span className="text-sm font-medium text-muted-foreground sm:whitespace-nowrap">
{t("settings.paymentTerms.toolbar.statusLabel")}
</span>
<Select onValueChange={handleStatusChange} value={ctrl.status}>
<SelectTrigger
aria-label={t("settings.paymentTerms.toolbar.statusLabel")}
className="w-full sm:min-w-44 lg:w-44"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
{t("settings.paymentTerms.toolbar.statusOptions.all")}
</SelectItem>
<SelectItem value="active">
{t("settings.paymentTerms.toolbar.statusOptions.active")}
</SelectItem>
<SelectItem value="inactive">
{t("settings.paymentTerms.toolbar.statusOptions.inactive")}
</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
<div className="grid gap-2 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center"> <div className="flex items-center gap-2 text-sm text-muted-foreground lg:justify-end">
<span className="text-sm font-medium text-muted-foreground sm:whitespace-nowrap"> {ctrl.isBackgroundFetching ? <Spinner aria-hidden className="size-4" /> : null}
{t("settings.paymentTerms.toolbar.statusLabel")} <span>
{t("settings.paymentTerms.toolbar.totalCount", { count: ctrl.totalItems })}
</span> </span>
<Select onValueChange={handleStatusChange} value={ctrl.status}>
<SelectTrigger
aria-label={t("settings.paymentTerms.toolbar.statusLabel")}
className="w-full sm:min-w-44 lg:w-44"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
{t("settings.paymentTerms.toolbar.statusOptions.all")}
</SelectItem>
<SelectItem value="active">
{t("settings.paymentTerms.toolbar.statusOptions.active")}
</SelectItem>
<SelectItem value="inactive">
{t("settings.paymentTerms.toolbar.statusOptions.inactive")}
</SelectItem>
</SelectContent>
</Select>
</div> </div>
</div> </div>
<div className="flex items-center gap-2 text-sm text-muted-foreground lg:justify-end"> {ctrl.hasEmptyState ? (
{ctrl.isBackgroundFetching ? <Spinner aria-hidden className="size-4" /> : null} <PaymentTermsEmptyState onCreate={featureCtrl.openCreateDialog} />
<span>{t("settings.paymentTerms.toolbar.totalCount", { count: ctrl.totalItems })}</span> ) : ctrl.hasNoResults ? (
</div> <PaymentTermsNoResultsState onClear={ctrl.clearFilters} />
</div> ) : (
<div aria-busy={ctrl.isBackgroundFetching} className="space-y-4">
{ctrl.list.map((paymentTerm) => (
<PaymentTermListItem
activeDisabledReason={activeDisabledReason(paymentTerm.isSystem)}
deleteDisabledReason={deleteDisabledReason(paymentTerm.isSystem)}
isTogglingActive={featureCtrl.isTogglingActive}
key={paymentTerm.id}
onDelete={featureCtrl.openDeleteDialog}
onEdit={featureCtrl.openEditDialog}
onToggleActive={(item) => {
if (item.isActive) {
featureCtrl.disable(item);
return;
}
{ctrl.hasEmptyState ? ( featureCtrl.enable(item);
<PaymentTermsEmptyState onCreate={featureCtrl.openCreateDialog} /> }}
) : ctrl.hasNoResults ? ( paymentTerm={paymentTerm}
<PaymentTermsNoResultsState onClear={ctrl.clearFilters} /> />
) : ( ))}
<div aria-busy={ctrl.isBackgroundFetching} className="space-y-4"> </div>
{ctrl.list.map((paymentTerm) => ( )}
<PaymentTermListItem </CardContent>
activeDisabledReason={activeDisabledReason(paymentTerm.isSystem)} </Card>
deleteDisabledReason={deleteDisabledReason(paymentTerm.isSystem)}
isTogglingActive={featureCtrl.isTogglingActive}
key={paymentTerm.id}
onDelete={featureCtrl.openDeleteDialog}
onEdit={featureCtrl.openEditDialog}
onToggleActive={(item) => {
if (item.isActive) {
featureCtrl.disable(item);
return;
}
featureCtrl.enable(item); <PaymentTermFormDialog
}} description={t("settings.paymentTerms.create.description")}
paymentTerm={paymentTerm} form={featureCtrl.form}
/> formId={featureCtrl.formId}
))} isEditMode={false}
</div> isSubmitting={featureCtrl.isSaving}
)} onSubmit={featureCtrl.onSubmit}
open={featureCtrl.isCreateOpen}
openChange={(open) => {
if (!open) {
featureCtrl.closeCreateDialog();
}
}}
submitLabel={t("settings.paymentTerms.actions.create")}
title={t("settings.paymentTerms.create.title")}
/>
<PaymentTermFormDialog <PaymentTermFormDialog
description={t("settings.paymentTerms.create.description")} description={t("settings.paymentTerms.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.isEditingPaymentTermLoading}
onSubmit={featureCtrl.onSubmit} onSubmit={featureCtrl.onSubmit}
open={featureCtrl.isCreateOpen} open={Boolean(featureCtrl.editingPaymentTerm) || featureCtrl.isEditingPaymentTermLoading}
openChange={(open) => { openChange={(open) => {
if (!open) { if (!open) {
featureCtrl.closeCreateDialog(); featureCtrl.closeEditDialog();
} }
}} }}
submitLabel={t("settings.paymentTerms.actions.create")} submitLabel={t("settings.paymentTerms.actions.save")}
title={t("settings.paymentTerms.create.title")} title={t("settings.paymentTerms.edit.title")}
/> />
<PaymentTermFormDialog <DeletePaymentTermDialog
description={t("settings.paymentTerms.edit.description")} isSubmitting={featureCtrl.isDeleting}
form={featureCtrl.form} onConfirm={featureCtrl.confirmDelete}
formId={`${featureCtrl.formId}-edit`} onOpenChange={(open) => {
isEditMode if (!open) {
isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingPaymentTermLoading} featureCtrl.closeDeleteDialog();
onSubmit={featureCtrl.onSubmit} }
open={Boolean(featureCtrl.editingPaymentTerm) || featureCtrl.isEditingPaymentTermLoading} }}
openChange={(open) => { open={Boolean(featureCtrl.deletingPaymentTerm)}
if (!open) { target={featureCtrl.deletingPaymentTerm}
featureCtrl.closeEditDialog(); />
} </>
}}
submitLabel={t("settings.paymentTerms.actions.save")}
title={t("settings.paymentTerms.edit.title")}
/>
<DeletePaymentTermDialog
isSubmitting={featureCtrl.isDeleting}
onConfirm={featureCtrl.confirmDelete}
onOpenChange={(open) => {
if (!open) {
featureCtrl.closeDeleteDialog();
}
}}
open={Boolean(featureCtrl.deletingPaymentTerm)}
target={featureCtrl.deletingPaymentTerm}
/>
</RdxPageStack>
</RdxPageContainer>
); );
}; };