feat: mejorar la interfaz de usuario en la configuración de términos de pago y optimizar acciones de fila
This commit is contained in:
parent
81da489ca8
commit
12c496e93a
@ -1,5 +1,4 @@
|
||||
import { RdxBadge } from "@repo/rdx-ui/components";
|
||||
import { Card, CardContent } from "@repo/shadcn-ui/components";
|
||||
import { CalendarClockIcon } from "lucide-react";
|
||||
|
||||
import { useTranslation } from "../../../../i18n";
|
||||
@ -48,120 +47,116 @@ export const PaymentTermListItem = ({
|
||||
const formatLocalizedDueDays = (value: number) => formatPaymentTermDueDays(value, t);
|
||||
|
||||
return (
|
||||
<Card className="border-border/70 shadow-none">
|
||||
<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 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">
|
||||
<CalendarClockIcon aria-hidden className="size-5" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-5 rounded-xl border border-border/70 bg-card 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 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">
|
||||
<CalendarClockIcon aria-hidden className="size-5" />
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-sm font-semibold text-foreground sm:text-base">
|
||||
{paymentTerm.name}
|
||||
</h3>
|
||||
<div className="min-w-0 space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-sm font-semibold text-foreground sm:text-base">
|
||||
{paymentTerm.name}
|
||||
</h3>
|
||||
|
||||
<RdxBadge variant={paymentTerm.isActive ? "outline" : "secondary"}>
|
||||
{paymentTerm.isActive
|
||||
? t("settings.paymentTerms.status.active")
|
||||
: t("settings.paymentTerms.status.inactive")}
|
||||
</RdxBadge>
|
||||
<RdxBadge variant={paymentTerm.isActive ? "outline" : "secondary"}>
|
||||
{paymentTerm.isActive
|
||||
? t("settings.paymentTerms.status.active")
|
||||
: t("settings.paymentTerms.status.inactive")}
|
||||
</RdxBadge>
|
||||
|
||||
{paymentTerm.isSystem ? (
|
||||
<RdxBadge variant="secondary">
|
||||
{t("settings.paymentTerms.status.system")}
|
||||
</RdxBadge>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{paymentTerm.description ? (
|
||||
<p className="max-w-3xl text-sm text-muted-foreground">{paymentTerm.description}</p>
|
||||
{paymentTerm.isSystem ? (
|
||||
<RdxBadge variant="secondary">{t("settings.paymentTerms.status.system")}</RdxBadge>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaymentTermRowActions
|
||||
activeDisabledReason={activeDisabledReason}
|
||||
deleteDisabledReason={deleteDisabledReason}
|
||||
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>
|
||||
{paymentTerm.description ? (
|
||||
<p className="max-w-3xl text-sm text-muted-foreground">{paymentTerm.description}</p>
|
||||
) : null}
|
||||
</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>
|
||||
<PaymentTermRowActions
|
||||
activeDisabledReason={activeDisabledReason}
|
||||
deleteDisabledReason={deleteDisabledReason}
|
||||
isTogglingActive={isTogglingActive}
|
||||
onDelete={onDelete}
|
||||
onEdit={onEdit}
|
||||
onToggleActive={onToggleActive}
|
||||
paymentTerm={paymentTerm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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="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">
|
||||
<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 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 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>
|
||||
|
||||
<PaymentTermSegmentedBar
|
||||
formatDueDays={formatLocalizedDueDays}
|
||||
formatPercentage={formatLocalizedPercentage}
|
||||
segments={segments}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<PaymentTermSegmentedBar
|
||||
formatDueDays={formatLocalizedDueDays}
|
||||
formatPercentage={formatLocalizedPercentage}
|
||||
segments={segments}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,12 +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 { PaymentTermListRow } from "../../../../payment-terms/shared";
|
||||
@ -36,68 +30,50 @@ export const PaymentTermRowActions = ({
|
||||
const toggleDisabled = paymentTerm.isSystem || isTogglingActive;
|
||||
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 (
|
||||
<div className="flex w-full flex-wrap items-center gap-2 xl:w-auto xl:justify-end">
|
||||
<Button
|
||||
aria-label={t("settings.paymentTerms.actions.edit")}
|
||||
className="flex-1 sm:flex-none"
|
||||
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>
|
||||
<RdxRowActions
|
||||
overflowActions={overflowActions}
|
||||
overflowLabel={t("settings.paymentTerms.actions.more")}
|
||||
primaryActions={primaryActions}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 PaymentTermsEmptyState = ({ 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.paymentTerms.empty.title")}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("settings.paymentTerms.empty.description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button className="mt-6" onClick={onCreate}>
|
||||
{t("settings.paymentTerms.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.paymentTerms.empty.title")}
|
||||
</span>
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
{t("settings.paymentTerms.empty.description")}
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { PageErrorState } from "@erp/core/components";
|
||||
import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components";
|
||||
import { RdxPageContainer } from "@repo/rdx-ui/components";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Input,
|
||||
Select,
|
||||
SelectContent,
|
||||
@ -10,7 +13,7 @@ import {
|
||||
SelectValue,
|
||||
Spinner,
|
||||
} from "@repo/shadcn-ui/components";
|
||||
import { PlusIcon, SearchIcon } from "lucide-react";
|
||||
import { CalendarClockIcon, PlusIcon, SearchIcon } from "lucide-react";
|
||||
import type { ChangeEvent } from "react";
|
||||
|
||||
import { useTranslation } from "../../../../i18n";
|
||||
@ -85,144 +88,156 @@ export const PaymentTermsSettingsPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<RdxPageContainer width="full">
|
||||
<RdxPageStack className="mx-auto w-full max-w-6xl" spacing="default">
|
||||
<RdxPageHeader
|
||||
actions={
|
||||
<Button className="w-full sm:w-auto" onClick={featureCtrl.openCreateDialog}>
|
||||
<PlusIcon aria-hidden className="mr-2 size-4" />
|
||||
{t("settings.paymentTerms.actions.create")}
|
||||
</Button>
|
||||
}
|
||||
description={t("settings.paymentTerms.description")}
|
||||
title={t("settings.paymentTerms.title")}
|
||||
/>
|
||||
|
||||
<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">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
||||
<div className="relative w-full lg:w-96 xl:w-[30rem]">
|
||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
aria-label={t("settings.paymentTerms.toolbar.searchPlaceholder")}
|
||||
className="pl-9 pr-10"
|
||||
onChange={handleSearchChange}
|
||||
placeholder={t("settings.paymentTerms.toolbar.searchPlaceholder")}
|
||||
value={ctrl.search}
|
||||
/>
|
||||
{ctrl.isBackgroundFetching ? (
|
||||
<Spinner
|
||||
aria-hidden
|
||||
className="absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground"
|
||||
<>
|
||||
<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">
|
||||
<CalendarClockIcon aria-hidden className="size-6" />
|
||||
</div>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
{t("settings.paymentTerms.title")}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("settings.paymentTerms.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="shrink-0 self-start" onClick={featureCtrl.openCreateDialog}>
|
||||
<PlusIcon aria-hidden className="size-4" />
|
||||
{t("settings.paymentTerms.actions.create")}
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="@container space-y-4">
|
||||
<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">
|
||||
<div className="relative w-full lg:w-96 xl:w-[30rem]">
|
||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
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 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")}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground lg:justify-end">
|
||||
{ctrl.isBackgroundFetching ? <Spinner aria-hidden className="size-4" /> : null}
|
||||
<span>
|
||||
{t("settings.paymentTerms.toolbar.totalCount", { count: ctrl.totalItems })}
|
||||
</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 className="flex items-center gap-2 text-sm text-muted-foreground lg:justify-end">
|
||||
{ctrl.isBackgroundFetching ? <Spinner aria-hidden className="size-4" /> : null}
|
||||
<span>{t("settings.paymentTerms.toolbar.totalCount", { count: ctrl.totalItems })}</span>
|
||||
</div>
|
||||
</div>
|
||||
{ctrl.hasEmptyState ? (
|
||||
<PaymentTermsEmptyState onCreate={featureCtrl.openCreateDialog} />
|
||||
) : ctrl.hasNoResults ? (
|
||||
<PaymentTermsNoResultsState onClear={ctrl.clearFilters} />
|
||||
) : (
|
||||
<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 ? (
|
||||
<PaymentTermsEmptyState onCreate={featureCtrl.openCreateDialog} />
|
||||
) : ctrl.hasNoResults ? (
|
||||
<PaymentTermsNoResultsState onClear={ctrl.clearFilters} />
|
||||
) : (
|
||||
<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;
|
||||
}
|
||||
featureCtrl.enable(item);
|
||||
}}
|
||||
paymentTerm={paymentTerm}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
featureCtrl.enable(item);
|
||||
}}
|
||||
paymentTerm={paymentTerm}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<PaymentTermFormDialog
|
||||
description={t("settings.paymentTerms.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.paymentTerms.actions.create")}
|
||||
title={t("settings.paymentTerms.create.title")}
|
||||
/>
|
||||
|
||||
<PaymentTermFormDialog
|
||||
description={t("settings.paymentTerms.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.paymentTerms.actions.create")}
|
||||
title={t("settings.paymentTerms.create.title")}
|
||||
/>
|
||||
<PaymentTermFormDialog
|
||||
description={t("settings.paymentTerms.edit.description")}
|
||||
form={featureCtrl.form}
|
||||
formId={`${featureCtrl.formId}-edit`}
|
||||
isEditMode
|
||||
isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingPaymentTermLoading}
|
||||
onSubmit={featureCtrl.onSubmit}
|
||||
open={Boolean(featureCtrl.editingPaymentTerm) || featureCtrl.isEditingPaymentTermLoading}
|
||||
openChange={(open) => {
|
||||
if (!open) {
|
||||
featureCtrl.closeEditDialog();
|
||||
}
|
||||
}}
|
||||
submitLabel={t("settings.paymentTerms.actions.save")}
|
||||
title={t("settings.paymentTerms.edit.title")}
|
||||
/>
|
||||
|
||||
<PaymentTermFormDialog
|
||||
description={t("settings.paymentTerms.edit.description")}
|
||||
form={featureCtrl.form}
|
||||
formId={`${featureCtrl.formId}-edit`}
|
||||
isEditMode
|
||||
isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingPaymentTermLoading}
|
||||
onSubmit={featureCtrl.onSubmit}
|
||||
open={Boolean(featureCtrl.editingPaymentTerm) || featureCtrl.isEditingPaymentTermLoading}
|
||||
openChange={(open) => {
|
||||
if (!open) {
|
||||
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>
|
||||
<DeletePaymentTermDialog
|
||||
isSubmitting={featureCtrl.isDeleting}
|
||||
onConfirm={featureCtrl.confirmDelete}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
featureCtrl.closeDeleteDialog();
|
||||
}
|
||||
}}
|
||||
open={Boolean(featureCtrl.deletingPaymentTerm)}
|
||||
target={featureCtrl.deletingPaymentTerm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user