@voyantjs/finance-ui 0.13.0

package/README.md

@@ -0,0 +1,13 @@
+# @voyantjs/finance-ui
+
+Importable React UI components for Voyant finance. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+## Install
+
+```bash
+pnpm add @voyantjs/finance-ui @voyantjs/finance-react @voyantjs/voyant-ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/voyant-ui` provides the design-system primitives. `@voyantjs/finance-react` provides the data-layer hooks. Both are required peers.
+
+All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.

package/dist/components/invoice-dialog.d.ts

@@ -0,0 +1,9 @@
+import { type InvoiceRecord } from "@voyantjs/finance-react";
+export interface InvoiceDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    invoice?: InvoiceRecord;
+    onSuccess?: (invoice: InvoiceRecord) => void;
+}
+export declare function InvoiceDialog({ open, onOpenChange, invoice, onSuccess }: InvoiceDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=invoice-dialog.d.ts.map

package/dist/components/invoice-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invoice-dialog.d.ts","sourceRoot":"","sources":["../../src/components/invoice-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,yBAAyB,CAAA;AA4ChF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CAC7C;AAkBD,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAoO3F"}

package/dist/components/invoice-dialog.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInvoiceMutation } from "@voyantjs/finance-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/voyant-ui/components";
+import { CurrencyCombobox } from "@voyantjs/voyant-ui/components/currency-combobox";
+import { DatePicker } from "@voyantjs/voyant-ui/components/date-picker";
+import { zodResolver } from "@voyantjs/voyant-ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+const invoiceFormSchema = z.object({
+    invoiceNumber: z.string().min(1, "Invoice number is required"),
+    bookingId: z.string().min(1, "Booking ID is required"),
+    personId: z.string().optional().nullable(),
+    organizationId: z.string().optional().nullable(),
+    status: z.enum(["draft", "sent", "partially_paid", "paid", "overdue", "void"]),
+    currency: z.string().min(3).max(3, "Use 3-letter ISO code"),
+    subtotalCents: z.coerce.number().int().min(0).default(0),
+    taxCents: z.coerce.number().int().min(0).default(0),
+    totalCents: z.coerce.number().int().min(0).default(0),
+    issueDate: z.string().min(1, "Issue date is required"),
+    dueDate: z.string().min(1, "Due date is required"),
+    notes: z.string().optional().nullable(),
+});
+const INVOICE_STATUSES = [
+    { value: "draft", label: "Draft" },
+    { value: "sent", label: "Sent" },
+    { value: "partially_paid", label: "Partially Paid" },
+    { value: "paid", label: "Paid" },
+    { value: "overdue", label: "Overdue" },
+    { value: "void", label: "Void" },
+];
+function generateInvoiceNumber() {
+    const now = new Date();
+    const y = now.getFullYear();
+    const seq = String(Math.floor(Math.random() * 9000) + 1000);
+    return `INV-${y}-${seq}`;
+}
+export function InvoiceDialog({ open, onOpenChange, invoice, onSuccess }) {
+    const isEditing = Boolean(invoice);
+    const { create, update } = useInvoiceMutation();
+    const form = useForm({
+        resolver: zodResolver(invoiceFormSchema),
+        defaultValues: {
+            invoiceNumber: "",
+            bookingId: "",
+            personId: "",
+            organizationId: "",
+            status: "draft",
+            currency: "EUR",
+            subtotalCents: 0,
+            taxCents: 0,
+            totalCents: 0,
+            issueDate: "",
+            dueDate: "",
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open && invoice) {
+            form.reset({
+                invoiceNumber: invoice.invoiceNumber,
+                bookingId: invoice.bookingId,
+                personId: invoice.personId ?? "",
+                organizationId: invoice.organizationId ?? "",
+                status: invoice.status,
+                currency: invoice.currency,
+                subtotalCents: invoice.subtotalCents,
+                taxCents: invoice.taxCents,
+                totalCents: invoice.totalCents,
+                issueDate: invoice.issueDate,
+                dueDate: invoice.dueDate,
+                notes: invoice.notes ?? "",
+            });
+        }
+        else if (open) {
+            const today = new Date().toISOString().split("T")[0];
+            form.reset({
+                invoiceNumber: generateInvoiceNumber(),
+                bookingId: "",
+                personId: "",
+                organizationId: "",
+                status: "draft",
+                currency: "EUR",
+                subtotalCents: 0,
+                taxCents: 0,
+                totalCents: 0,
+                issueDate: today,
+                dueDate: "",
+                notes: "",
+            });
+        }
+    }, [open, invoice, form]);
+    const onSubmit = async (values) => {
+        const payload = {
+            invoiceNumber: values.invoiceNumber,
+            bookingId: values.bookingId,
+            personId: values.personId || null,
+            organizationId: values.organizationId || null,
+            status: values.status,
+            currency: values.currency,
+            subtotalCents: values.subtotalCents,
+            taxCents: values.taxCents,
+            totalCents: values.totalCents,
+            paidCents: invoice?.paidCents ?? 0,
+            balanceDueCents: typeof invoice?.paidCents === "number"
+                ? values.totalCents - invoice.paidCents
+                : values.totalCents,
+            issueDate: values.issueDate,
+            dueDate: values.dueDate,
+            notes: values.notes || null,
+        };
+        const saved = isEditing
+            ? await update.mutateAsync({ id: invoice.id, input: payload })
+            : await create.mutateAsync(payload);
+        onOpenChange(false);
+        onSuccess?.(saved);
+    };
+    const isSubmitting = create.isPending || update.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? "Edit Invoice" : "New Invoice" }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Invoice Number" }), _jsx(Input, { ...form.register("invoiceNumber"), placeholder: "INV-2025-1234" }), form.formState.errors.invoiceNumber ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.invoiceNumber.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { items: INVOICE_STATUSES, value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: INVOICE_STATUSES.map((status) => (_jsx(SelectItem, { value: status.value, children: status.label }, status.value))) })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Booking ID" }), _jsx(Input, { ...form.register("bookingId"), placeholder: "book_..." }), form.formState.errors.bookingId ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.bookingId.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Currency" }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? "EUR", {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Subtotal (cents)" }), _jsx(Input, { ...form.register("subtotalCents"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Tax (cents)" }), _jsx(Input, { ...form.register("taxCents"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Total (cents)" }), _jsx(Input, { ...form.register("totalCents"), type: "number", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Issue Date" }), _jsx(DatePicker, { value: form.watch("issueDate") || null, onChange: (nextValue) => form.setValue("issueDate", nextValue ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: "Pick issue date", className: "w-full" }), form.formState.errors.issueDate ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.issueDate.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Due Date" }), _jsx(DatePicker, { value: form.watch("dueDate") || null, onChange: (nextValue) => form.setValue("dueDate", nextValue ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: "Pick due date", className: "w-full" }), form.formState.errors.dueDate ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.dueDate.message })) : null] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Notes" }), _jsx(Textarea, { ...form.register("notes"), placeholder: "Invoice notes..." })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? "Save Changes" : "Create Invoice"] })] })] })] }) }));
+}

package/dist/components/supplier-payment-dialog.d.ts

@@ -0,0 +1,7 @@
+export interface SupplierPaymentDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSuccess?: () => void;
+}
+export declare function SupplierPaymentDialog({ open, onOpenChange, onSuccess, }: SupplierPaymentDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=supplier-payment-dialog.d.ts.map

package/dist/components/supplier-payment-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supplier-payment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/supplier-payment-dialog.tsx"],"names":[],"mappings":"AAyCA,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAiBD,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,SAAS,GACV,EAAE,0BAA0B,2CA6L5B"}

package/dist/components/supplier-payment-dialog.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSupplierPaymentMutation } from "@voyantjs/finance-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/voyant-ui/components";
+import { CurrencyCombobox } from "@voyantjs/voyant-ui/components/currency-combobox";
+import { DatePicker } from "@voyantjs/voyant-ui/components/date-picker";
+import { zodResolver } from "@voyantjs/voyant-ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+const supplierPaymentFormSchema = z.object({
+    bookingId: z.string().min(1, "Booking ID is required"),
+    supplierId: z.string().optional().nullable(),
+    amountCents: z.coerce.number().int().min(1, "Amount must be at least 1"),
+    currency: z.string().min(3).max(3),
+    paymentMethod: z.enum(["bank_transfer", "credit_card", "cash", "cheque", "other"]),
+    status: z.enum(["pending", "completed", "failed", "refunded"]),
+    referenceNumber: z.string().optional().nullable(),
+    paymentDate: z.string().min(1, "Payment date is required"),
+    notes: z.string().optional().nullable(),
+});
+const PAYMENT_METHODS = [
+    { value: "bank_transfer", label: "Bank Transfer" },
+    { value: "credit_card", label: "Credit Card" },
+    { value: "cash", label: "Cash" },
+    { value: "cheque", label: "Cheque" },
+    { value: "other", label: "Other" },
+];
+const PAYMENT_STATUSES = [
+    { value: "pending", label: "Pending" },
+    { value: "completed", label: "Completed" },
+    { value: "failed", label: "Failed" },
+    { value: "refunded", label: "Refunded" },
+];
+export function SupplierPaymentDialog({ open, onOpenChange, onSuccess, }) {
+    const { create } = useSupplierPaymentMutation();
+    const form = useForm({
+        resolver: zodResolver(supplierPaymentFormSchema),
+        defaultValues: {
+            bookingId: "",
+            supplierId: "",
+            amountCents: 0,
+            currency: "EUR",
+            paymentMethod: "bank_transfer",
+            status: "completed",
+            referenceNumber: "",
+            paymentDate: "",
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open) {
+            const today = new Date().toISOString().split("T")[0];
+            form.reset({
+                bookingId: "",
+                supplierId: "",
+                amountCents: 0,
+                currency: "EUR",
+                paymentMethod: "bank_transfer",
+                status: "completed",
+                referenceNumber: "",
+                paymentDate: today,
+                notes: "",
+            });
+        }
+    }, [open, form]);
+    const onSubmit = async (values) => {
+        await create.mutateAsync({
+            bookingId: values.bookingId,
+            supplierId: values.supplierId || null,
+            amountCents: values.amountCents,
+            currency: values.currency,
+            paymentMethod: values.paymentMethod,
+            status: values.status,
+            referenceNumber: values.referenceNumber || null,
+            paymentDate: values.paymentDate,
+            notes: values.notes || null,
+        });
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Record Supplier Payment" }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Booking ID" }), _jsx(Input, { ...form.register("bookingId"), placeholder: "book_..." }), form.formState.errors.bookingId ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.bookingId.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Supplier ID (optional)" }), _jsx(Input, { ...form.register("supplierId"), placeholder: "supp_..." })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Amount (cents)" }), _jsx(Input, { ...form.register("amountCents"), type: "number", min: "1" }), form.formState.errors.amountCents ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.amountCents.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Currency" }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? "EUR", {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Payment Date" }), _jsx(DatePicker, { value: form.watch("paymentDate") || null, onChange: (next) => form.setValue("paymentDate", next ?? "", {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }), placeholder: "Select payment date", className: "w-full" }), form.formState.errors.paymentDate ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.paymentDate.message })) : null] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Payment Method" }), _jsxs(Select, { items: PAYMENT_METHODS, value: form.watch("paymentMethod"), onValueChange: (value) => form.setValue("paymentMethod", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_METHODS.map((method) => (_jsx(SelectItem, { value: method.value, children: method.label }, method.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { items: PAYMENT_STATUSES, value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_STATUSES.map((status) => (_jsx(SelectItem, { value: status.value, children: status.label }, status.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Reference Number" }), _jsx(Input, { ...form.register("referenceNumber"), placeholder: "TXN-12345" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Notes" }), _jsx(Textarea, { ...form.register("notes"), placeholder: "Payment notes..." })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: create.isPending, children: [create.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, "Record Payment"] })] })] })] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { InvoiceDialog, type InvoiceDialogProps } from "./components/invoice-dialog";
+export { SupplierPaymentDialog, type SupplierPaymentDialogProps, } from "./components/supplier-payment-dialog";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACpF,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,sCAAsC,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { InvoiceDialog } from "./components/invoice-dialog";
+export { SupplierPaymentDialog, } from "./components/supplier-payment-dialog";

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@voyantjs/finance-ui",
+  "version": "0.13.0",
+  "license": "FSL-1.1-Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/finance-ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*.tsx"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@voyantjs/finance-react": "workspace:*",
+    "@voyantjs/voyant-ui": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.96.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@voyantjs/finance-react": "workspace:*",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "@voyantjs/voyant-ui": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.60.0",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2",
+    "zod": "^3.25.76"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}