@voyantjs/finance-ui 0.30.6 → 0.31.0

package/dist/components/payments-page-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page-skeleton.d.ts","sourceRoot":"","sources":["../../src/components/payments-page-skeleton.tsx"],"names":[],"mappings":"AAcA,wBAAgB,qBAAqB,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAkCpE;AAED,wBAAgB,oBAAoB,4CAgBnC"}

package/dist/components/payments-page-skeleton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+const PAYMENT_WIDTHS = ["w-20", "w-32", "w-32", "w-24", "w-20", "w-24", "w-24"];
+export function PaymentsTableSkeleton({ rows = 8 }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const columns = messages.paymentsPage.columns;
+    return (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: columns.kind }), _jsx(TableHead, { children: columns.reference }), _jsx(TableHead, { children: columns.party }), _jsx(TableHead, { children: columns.amount }), _jsx(TableHead, { children: columns.status }), _jsx(TableHead, { children: columns.date }), _jsx(TableHead, { children: columns.method })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: Array.from({ length: 7 }).map((__, columnIndex) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: `h-4 ${PAYMENT_WIDTHS[columnIndex] ?? "w-1/2"}` }) }, columnIndex))) }, rowIndex))) })] }) }));
+}
+export function PaymentsPageSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-32" }), _jsx(Skeleton, { className: "h-4 w-80" })] }), _jsx(Skeleton, { className: "h-9 w-44" })] }), _jsx(Skeleton, { className: "h-9 w-full max-w-sm" }), _jsx(PaymentsTableSkeleton, { rows: 8 })] }));
+}

package/dist/components/payments-page.d.ts

@@ -0,0 +1,20 @@
+import { type FinancePaymentKind } from "@voyantjs/finance-react";
+import type { ReactNode } from "react";
+export interface PaymentSupplierOption {
+    id: string;
+    name: string;
+}
+export interface RecordPaymentDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    defaultKind: FinancePaymentKind;
+}
+export interface PaymentsPageProps {
+    className?: string;
+    onOpenPayment?: (paymentId: string) => void;
+    supplierOptions?: PaymentSupplierOption[];
+    onSupplierSearchChange?: (search: string) => void;
+    renderRecordPaymentDialog?: (props: RecordPaymentDialogRenderProps) => ReactNode;
+}
+export declare function PaymentsPage({ className, onOpenPayment, supplierOptions, onSupplierSearchChange, renderRecordPaymentDialog, }?: PaymentsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payments-page.d.ts.map

package/dist/components/payments-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page.d.ts","sourceRoot":"","sources":["../../src/components/payments-page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,yBAAyB,CAAA;AA4BhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAetC,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,WAAW,EAAE,kBAAkB,CAAA;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,eAAe,CAAC,EAAE,qBAAqB,EAAE,CAAA;IACzC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,yBAAyB,CAAC,EAAE,CAAC,KAAK,EAAE,8BAA8B,KAAK,SAAS,CAAA;CACjF;AAaD,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,aAAa,EACb,eAAoB,EACpB,sBAAsB,EACtB,yBAAyB,GAC1B,GAAE,iBAAsB,2CAwYxB"}

package/dist/components/payments-page.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAllPayments, } from "@voyantjs/finance-react";
+import { formatMessage } from "@voyantjs/i18n";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { DateRangePicker } from "@voyantjs/ui/components/date-picker";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowDown, ArrowUp, ArrowUpDown, ListFilter, Plus, Search, X } from "lucide-react";
+import { useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { paymentMethods, supplierPaymentStatuses } from "../i18n/messages.js";
+const PAGE_SIZE = 25;
+const KIND_ALL = "__all__";
+const STATUS_ALL = "__all__";
+const METHOD_ALL = "__all__";
+const PAYMENT_KINDS = ["customer", "supplier"];
+const paymentStatusVariant = {
+    pending: "outline",
+    completed: "default",
+    failed: "destructive",
+    refunded: "secondary",
+};
+function formatAmount(cents, currency) {
+    return `${(cents / 100).toFixed(2)} ${currency}`;
+}
+export function PaymentsPage({ className, onOpenPayment, supplierOptions = [], onSupplierSearchChange, renderRecordPaymentDialog, } = {}) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const [recordDialogOpen, setRecordDialogOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [kind, setKind] = useState(KIND_ALL);
+    const [status, setStatus] = useState(STATUS_ALL);
+    const [method, setMethod] = useState(METHOD_ALL);
+    const [currency, setCurrency] = useState(null);
+    const [supplierId, setSupplierId] = useState(null);
+    const [selectedSupplier, setSelectedSupplier] = useState(null);
+    const [paymentDateRange, setPaymentDateRange] = useState(null);
+    const [sortBy, setSortBy] = useState("createdAt");
+    const [sortDir, setSortDir] = useState("desc");
+    const [pageIndex, setPageIndex] = useState(0);
+    const [filterPopoverOpen, setFilterPopoverOpen] = useState(false);
+    const { data, isPending, isFetching, isError } = useAllPayments({
+        search: search || undefined,
+        kind: kind === KIND_ALL ? undefined : kind,
+        status: status === STATUS_ALL ? undefined : status,
+        paymentMethod: method === METHOD_ALL ? undefined : method,
+        currency: currency ?? undefined,
+        supplierId: supplierId ?? undefined,
+        paymentDateFrom: paymentDateRange?.from ?? undefined,
+        paymentDateTo: paymentDateRange?.to ?? undefined,
+        sortBy,
+        sortDir,
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+    });
+    const payments = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = pageIndex + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && payments.length === 0);
+    const resetPage = () => setPageIndex(0);
+    const handleSort = (field) => {
+        resetPage();
+        if (sortBy !== field) {
+            setSortBy(field);
+            setSortDir("asc");
+            return;
+        }
+        if (sortDir === "asc") {
+            setSortDir("desc");
+            return;
+        }
+        setSortBy("createdAt");
+        setSortDir("desc");
+    };
+    const activeFilterCount = (kind !== KIND_ALL ? 1 : 0) +
+        (status !== STATUS_ALL ? 1 : 0) +
+        (method !== METHOD_ALL ? 1 : 0) +
+        (currency !== null ? 1 : 0) +
+        (supplierId !== null ? 1 : 0) +
+        (paymentDateRange?.from || paymentDateRange?.to ? 1 : 0);
+    const hasActiveFilters = activeFilterCount > 0 || search !== "";
+    const clearFilters = () => {
+        setSearch("");
+        setKind(KIND_ALL);
+        setStatus(STATUS_ALL);
+        setMethod(METHOD_ALL);
+        setCurrency(null);
+        setSupplierId(null);
+        setSelectedSupplier(null);
+        setPaymentDateRange(null);
+        onSupplierSearchChange?.("");
+        resetPage();
+    };
+    const f = messages.paymentsPage;
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: f.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: f.description })] }) }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "payments-search", className: "sr-only", children: f.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "payments-search", placeholder: f.searchPlaceholder, value: search, onChange: (event) => {
+                                            setSearch(event.target.value);
+                                            resetPage();
+                                        }, className: "pl-9" })] }), _jsxs(Popover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4", "aria-hidden": "true" }), f.filters.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[24rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "payments-filter-kind", children: f.filters.kindLabel }), _jsxs(Select, { value: kind, onValueChange: (value) => {
+                                                                setKind(value ?? KIND_ALL);
+                                                                resetPage();
+                                                            }, children: [_jsx(SelectTrigger, { id: "payments-filter-kind", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: KIND_ALL, children: f.filters.kindAll }), PAYMENT_KINDS.map((value) => (_jsx(SelectItem, { value: value, children: f.kindLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "payments-filter-status", children: f.filters.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                                                setStatus(value ?? STATUS_ALL);
+                                                                resetPage();
+                                                            }, children: [_jsx(SelectTrigger, { id: "payments-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: f.filters.statusAll }), supplierPaymentStatuses.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.supplierPaymentStatusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "payments-filter-method", children: f.filters.methodLabel }), _jsxs(Select, { value: method, onValueChange: (value) => {
+                                                                setMethod(value ?? METHOD_ALL);
+                                                                resetPage();
+                                                            }, children: [_jsx(SelectTrigger, { id: "payments-filter-method", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: METHOD_ALL, children: f.filters.methodAll }), paymentMethods.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.paymentMethodLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: f.filters.supplierLabel }), _jsx(AsyncCombobox, { value: supplierId, onChange: (value) => {
+                                                                setSupplierId(value);
+                                                                if (!value)
+                                                                    setSelectedSupplier(null);
+                                                                else {
+                                                                    const match = supplierOptions.find((supplier) => supplier.id === value);
+                                                                    if (match)
+                                                                        setSelectedSupplier(match);
+                                                                }
+                                                                resetPage();
+                                                            }, items: supplierOptions, selectedItem: selectedSupplier, getKey: (supplier) => supplier.id, getLabel: (supplier) => supplier.name, onSearchChange: onSupplierSearchChange, placeholder: f.filters.supplierAny, emptyText: f.filters.supplierEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: f.filters.currencyLabel }), _jsx(CurrencyCombobox, { value: currency, onChange: (value) => {
+                                                                setCurrency(value);
+                                                                resetPage();
+                                                            }, placeholder: f.filters.currencyAny })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: f.filters.paymentDateLabel }), _jsx(DateRangePicker, { value: paymentDateRange, onChange: (value) => {
+                                                                setPaymentDateRange(value);
+                                                                resetPage();
+                                                            }, placeholder: f.filters.dateAny, clearable: true, className: "w-full" })] })] }) })] }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4", "aria-hidden": "true" }), f.filters.clear] })), renderRecordPaymentDialog ? (_jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: () => setRecordDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.recordPayment] }) })) : null] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.columns.kind }), _jsx(TableHead, { children: f.columns.reference }), _jsx(TableHead, { children: f.columns.party }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.amount, field: "amountCents", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.status, field: "status", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.date, field: "paymentDate", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: f.columns.method })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(PaymentRowSkeleton, { rows: 6 })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "h-24 text-center text-sm text-destructive", children: f.loadFailed }) })) : payments.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "h-24 text-center text-sm text-muted-foreground", children: f.empty }) })) : (payments.map((row) => {
+                                        const reference = row.kind === "customer" ? row.invoiceNumber : row.bookingNumber;
+                                        const party = row.kind === "supplier"
+                                            ? (row.supplierName ?? f.noValue)
+                                            : (row.personName ?? row.organizationName ?? f.noValue);
+                                        return (_jsxs(TableRow, { onClick: () => onOpenPayment?.(row.id), className: cn(onOpenPayment && "cursor-pointer"), children: [_jsx(TableCell, { children: _jsx(Badge, { variant: "outline", className: "capitalize", children: f.kindLabels[row.kind] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: reference ?? f.noValue }), row.referenceNumber ? (_jsx("span", { className: "text-xs text-muted-foreground", children: row.referenceNumber })) : null] }) }), _jsx(TableCell, { children: party }), _jsx(TableCell, { className: "font-mono", children: formatAmount(row.amountCents, row.currency) }), _jsx(TableCell, { children: _jsx(Badge, { variant: paymentStatusVariant[row.status] ?? "secondary", className: "capitalize", children: messages.common.supplierPaymentStatusLabels[row.status] }) }), _jsx(TableCell, { children: row.paymentDate }), _jsx(TableCell, { className: "capitalize", children: messages.common.paymentMethodLabels[row.paymentMethod] ?? row.paymentMethod })] }, `${row.kind}-${row.id}`));
+                                    })) })] }) }), _jsx(PaginationBar, { shown: payments.length, total: total, page: page, pageCount: pageCount, onPrevious: () => setPageIndex((prev) => Math.max(0, prev - 1)), onNext: () => setPageIndex((prev) => prev + 1), canGoBack: pageIndex > 0, canGoForward: (pageIndex + 1) * PAGE_SIZE < total })] }), renderRecordPaymentDialog?.({
+                open: recordDialogOpen,
+                onOpenChange: setRecordDialogOpen,
+                defaultKind: kind === KIND_ALL ? "customer" : kind,
+            })] }));
+}
+function SortHeader({ label, field, sortBy, sortDir, onSort, }) {
+    const active = sortBy === field;
+    const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+    return (_jsxs("button", { type: "button", onClick: () => onSort(field), className: "-ml-2 inline-flex h-8 items-center gap-1 rounded-sm px-2 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { children: label }), _jsx(Icon, { className: `size-3.5 ${active ? "text-foreground" : "text-muted-foreground/60"}`, "aria-hidden": true })] }));
+}
+function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const f = messages.paymentsPage.pagination;
+    return (_jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(f.showing, { count: shown, total }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: !canGoBack, onClick: onPrevious, children: f.previous }), _jsx("span", { children: formatMessage(f.page, { page, pageCount }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: !canGoForward, onClick: onNext, children: f.next })] })] }));
+}
+function PaymentRowSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) })] }, `skeleton-${idx}`))) }));
+}

package/dist/components/taxes-page.d.ts

@@ -0,0 +1,11 @@
+export interface TaxesPageApi {
+    get: <T = unknown>(path: string) => Promise<T>;
+    post: <T = unknown>(path: string, body?: unknown) => Promise<T>;
+    patch: <T = unknown>(path: string, body?: unknown) => Promise<T>;
+    delete: <T = unknown>(path: string) => Promise<T>;
+}
+export interface TaxesPageProps {
+    api?: TaxesPageApi;
+}
+export declare function TaxesPage({ api: apiProp }?: TaxesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=taxes-page.d.ts.map

package/dist/components/taxes-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"taxes-page.d.ts","sourceRoot":"","sources":["../../src/components/taxes-page.tsx"],"names":[],"mappings":"AAoDA,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAA;IAC/D,KAAK,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAA;IAChE,MAAM,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,YAAY,CAAA;CACnB;AAyaD,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,GAAE,cAAmB,2CAG9D"}