Phase2: Invoicecomputation/AdminpricingUI/Ainvoicemgnt
Some checks failed
Build and Push / build (push) Failing after 28s
Some checks failed
Build and Push / build (push) Failing after 28s
This commit is contained in:
345
src/components/admin/billing/generate-form.tsx
Normal file
345
src/components/admin/billing/generate-form.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
"use client";
|
||||
|
||||
import { useState, Fragment } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardHeader } from "@/components/ui/card";
|
||||
import type { InvoiceDraft } from "@/types";
|
||||
|
||||
interface OrgEntry {
|
||||
zitadelOrgId: string;
|
||||
tenantNames: string[];
|
||||
companyName: string | null;
|
||||
country: string | null;
|
||||
hasBillingAddress: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
orgs: OrgEntry[];
|
||||
}
|
||||
|
||||
const LOCALE_OPTIONS = [
|
||||
{ value: "de", label: "Deutsch" },
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "fr", label: "Français" },
|
||||
{ value: "it", label: "Italiano" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Two-step flow: preview (dryRun) → commit.
|
||||
*
|
||||
* Preview displays the InvoiceDraft (lines, subtotal, VAT, total)
|
||||
* plus any warnings. Admin reviews and either commits or aborts.
|
||||
* Commit re-runs the generator without dryRun and redirects to the
|
||||
* persisted invoice's detail page.
|
||||
*/
|
||||
export function GenerateForm({ orgs }: Props) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const router = useRouter();
|
||||
|
||||
// Default to previous calendar month — that's the typical "bill
|
||||
// for last month" use case.
|
||||
const now = new Date();
|
||||
const prevMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
const [orgId, setOrgId] = useState(orgs[0]?.zitadelOrgId ?? "");
|
||||
const [year, setYear] = useState(String(prevMonth.getFullYear()));
|
||||
const [month, setMonth] = useState(String(prevMonth.getMonth() + 1));
|
||||
const [locale, setLocale] = useState<string>("");
|
||||
const [draft, setDraft] = useState<InvoiceDraft | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const selectedOrg = orgs.find((o) => o.zitadelOrgId === orgId);
|
||||
// Auto-detect default locale from country if admin hasn't picked
|
||||
// one. Same logic as billing.ts's defaultLocaleForCountry.
|
||||
const effectiveLocale =
|
||||
locale ||
|
||||
(() => {
|
||||
const c = (selectedOrg?.country || "").toUpperCase();
|
||||
if (["CH", "LI", "AT", "DE"].includes(c)) return "de";
|
||||
if (["FR", "BE", "LU"].includes(c)) return "fr";
|
||||
if (c === "IT") return "it";
|
||||
return "en";
|
||||
})();
|
||||
|
||||
const preview = async () => {
|
||||
setError("");
|
||||
setDraft(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await fetch("/api/admin/billing/generate", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
zitadelOrgId: orgId,
|
||||
year: Number(year),
|
||||
month: Number(month),
|
||||
locale: effectiveLocale,
|
||||
dryRun: true,
|
||||
}),
|
||||
});
|
||||
const j = await res.json();
|
||||
if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
|
||||
setDraft(j.draft);
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const commit = async () => {
|
||||
if (!draft) return;
|
||||
if (!confirm(t("confirmGenerate"))) return;
|
||||
setError("");
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await fetch("/api/admin/billing/generate", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
zitadelOrgId: orgId,
|
||||
year: Number(year),
|
||||
month: Number(month),
|
||||
locale: effectiveLocale,
|
||||
dryRun: false,
|
||||
}),
|
||||
});
|
||||
const j = await res.json();
|
||||
if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
|
||||
// Navigate to the new invoice's detail page.
|
||||
if (j.invoice?.id) {
|
||||
router.push(`/admin/billing/invoices/${j.invoice.id}`);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>{t("generateFormTitle")}</CardHeader>
|
||||
{orgs.length === 0 ? (
|
||||
<p className="text-sm text-text-muted italic">{t("noOrgsToGenerate")}</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">{t("orgLabel")}</span>
|
||||
<select
|
||||
value={orgId}
|
||||
onChange={(e) => {
|
||||
setOrgId(e.target.value);
|
||||
setDraft(null);
|
||||
}}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
>
|
||||
{orgs.map((o) => (
|
||||
<option key={o.zitadelOrgId} value={o.zitadelOrgId}>
|
||||
{o.companyName ?? o.zitadelOrgId}
|
||||
{!o.hasBillingAddress ? ` — ${t("noBillingAddrTag")}` : ""}
|
||||
{` (${o.tenantNames.length} ${t("tenantsLabel")})`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedOrg && !selectedOrg.hasBillingAddress && (
|
||||
<p className="text-xs text-error mt-1">
|
||||
{t("noBillingAddrWarning")}
|
||||
</p>
|
||||
)}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">{t("yearLabel")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min="2020"
|
||||
max="2100"
|
||||
value={year}
|
||||
onChange={(e) => {
|
||||
setYear(e.target.value);
|
||||
setDraft(null);
|
||||
}}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">{t("monthLabel")}</span>
|
||||
<select
|
||||
value={month}
|
||||
onChange={(e) => {
|
||||
setMonth(e.target.value);
|
||||
setDraft(null);
|
||||
}}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
>
|
||||
{Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{String(m).padStart(2, "0")}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">
|
||||
{t("localeLabel")}
|
||||
</span>
|
||||
<select
|
||||
value={locale}
|
||||
onChange={(e) => {
|
||||
setLocale(e.target.value);
|
||||
setDraft(null);
|
||||
}}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
>
|
||||
<option value="">
|
||||
{t("localeAuto")} ({effectiveLocale})
|
||||
</option>
|
||||
{LOCALE_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<button
|
||||
onClick={preview}
|
||||
disabled={busy || !selectedOrg?.hasBillingAddress}
|
||||
className="px-4 py-2 rounded-md border border-border text-sm disabled:opacity-50"
|
||||
>
|
||||
{busy && !draft ? t("computing") : t("previewBtn")}
|
||||
</button>
|
||||
{draft && (
|
||||
<button
|
||||
onClick={commit}
|
||||
disabled={busy}
|
||||
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
|
||||
>
|
||||
{busy ? t("saving") : t("commitBtn")}
|
||||
</button>
|
||||
)}
|
||||
{error && (
|
||||
<span className="text-sm text-error">{error}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{draft && <DraftPreview draft={draft} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DraftPreview({ draft }: { draft: InvoiceDraft }) {
|
||||
const t = useTranslations("adminBilling");
|
||||
|
||||
// Group lines by tenant for the preview (matches PDF layout).
|
||||
const linesByTenant = new Map<string | null, typeof draft.lines>();
|
||||
for (const ln of draft.lines) {
|
||||
const key = ln.tenantName;
|
||||
if (!linesByTenant.has(key)) linesByTenant.set(key, []);
|
||||
linesByTenant.get(key)!.push(ln);
|
||||
}
|
||||
const tenantOrder = [...linesByTenant.keys()].sort((a, b) => {
|
||||
if (a === null) return 1;
|
||||
if (b === null) return -1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
{t("previewTitle")} — {draft.periodStart} → {draft.periodEnd}
|
||||
</CardHeader>
|
||||
|
||||
{draft.warnings.length > 0 && (
|
||||
<div className="mb-4 p-3 rounded-md border border-warning bg-warning/10 text-sm space-y-1">
|
||||
<div className="font-semibold text-warning">{t("warningsTitle")}</div>
|
||||
{draft.warnings.map((w, i) => (
|
||||
<div key={i} className="text-text-secondary">• {w}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-xs text-text-muted text-left">
|
||||
<tr>
|
||||
<th className="pb-2">{t("descCol")}</th>
|
||||
<th className="pb-2 text-right">{t("qtyCol")}</th>
|
||||
<th className="pb-2 text-right">{t("unitPriceCol")}</th>
|
||||
<th className="pb-2 text-right">{t("amountCol")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tenantOrder.map((tenantKey) => {
|
||||
const lines = linesByTenant.get(tenantKey)!;
|
||||
return (
|
||||
<Fragment key={tenantKey ?? "_org"}>
|
||||
{tenantKey && (
|
||||
<tr className="border-t border-border">
|
||||
<td colSpan={4} className="py-1.5 pt-3">
|
||||
<span className="text-xs font-semibold text-accent">
|
||||
{tenantKey}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{lines.map((ln, i) => (
|
||||
<tr
|
||||
key={`${tenantKey}-${i}`}
|
||||
className="border-t border-border"
|
||||
>
|
||||
<td className="py-1.5">
|
||||
<div>{ln.description}</div>
|
||||
<div className="text-xs text-text-muted font-mono">
|
||||
{ln.kind}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-1.5 text-right">
|
||||
{ln.quantity}
|
||||
{ln.unitLabel ? ` ${ln.unitLabel}` : ""}
|
||||
</td>
|
||||
<td className="py-1.5 text-right font-mono text-xs">
|
||||
{ln.unitPriceChf.toFixed(4)}
|
||||
</td>
|
||||
<td className="py-1.5 text-right">
|
||||
{ln.amountChf.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
{draft.lines.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="py-4 text-center text-text-muted italic">
|
||||
{t("noLinesGenerated")}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="mt-4 pt-3 border-t border-border space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-muted">{t("subtotal")}</span>
|
||||
<span>CHF {draft.subtotalChf.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-muted">
|
||||
{t("vat")} ({draft.vatRate.toFixed(2)}%)
|
||||
</span>
|
||||
<span>CHF {draft.vatAmountChf.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between pt-1 border-t border-border font-semibold">
|
||||
<span>{t("total")}</span>
|
||||
<span>CHF {draft.totalChf.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
307
src/components/admin/billing/invoice-detail-view.tsx
Normal file
307
src/components/admin/billing/invoice-detail-view.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
"use client";
|
||||
|
||||
import { useState, Fragment } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardHeader } from "@/components/ui/card";
|
||||
import type { InvoiceDetail, InvoiceStatus } from "@/types";
|
||||
|
||||
interface Props {
|
||||
detail: InvoiceDetail;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the invoice header (status, totals, action bar) then
|
||||
* line items grouped by tenant, then billing snapshot. Actions are
|
||||
* mark-paid (POST), delete (DELETE), PDF download (link to /pdf).
|
||||
*
|
||||
* On successful action we router.refresh() — the server-side page
|
||||
* re-renders against the new DB state. For delete we navigate
|
||||
* away first.
|
||||
*/
|
||||
export function InvoiceDetailView({ detail }: Props) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const router = useRouter();
|
||||
const { invoice, lines } = detail;
|
||||
|
||||
const [busyAction, setBusyAction] = useState<null | "mark-paid" | "delete">(
|
||||
null
|
||||
);
|
||||
const [actionError, setActionError] = useState("");
|
||||
const [noteInput, setNoteInput] = useState("");
|
||||
const [noteOpen, setNoteOpen] = useState(false);
|
||||
|
||||
const markPaid = async () => {
|
||||
setActionError("");
|
||||
setBusyAction("mark-paid");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/admin/billing/invoices/${invoice.id}/mark-paid`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ note: noteInput || undefined }),
|
||||
}
|
||||
);
|
||||
const j = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
|
||||
setNoteOpen(false);
|
||||
setNoteInput("");
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setActionError(e.message);
|
||||
} finally {
|
||||
setBusyAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteInvoice = async () => {
|
||||
if (!confirm(t("confirmDeleteInvoice", { num: invoice.invoiceNumber })))
|
||||
return;
|
||||
setActionError("");
|
||||
setBusyAction("delete");
|
||||
try {
|
||||
const res = await fetch(`/api/admin/billing/invoices/${invoice.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const j = await res.json().catch(() => ({}));
|
||||
throw new Error(j.error || `HTTP ${res.status}`);
|
||||
}
|
||||
router.push("/admin/billing/invoices");
|
||||
} catch (e: any) {
|
||||
setActionError(e.message);
|
||||
setBusyAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Group lines by tenant for display (matches PDF layout).
|
||||
const linesByTenant = new Map<string | null, typeof lines>();
|
||||
for (const ln of lines) {
|
||||
const k = ln.tenantName;
|
||||
if (!linesByTenant.has(k)) linesByTenant.set(k, []);
|
||||
linesByTenant.get(k)!.push(ln);
|
||||
}
|
||||
const tenantOrder = [...linesByTenant.keys()].sort((a, b) => {
|
||||
if (a === null) return 1;
|
||||
if (b === null) return -1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-in">
|
||||
<div className="flex items-end justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold accent-rule">
|
||||
{invoice.invoiceNumber}
|
||||
</h1>
|
||||
<div className="flex items-center gap-3 mt-3 text-sm">
|
||||
<StatusPill status={invoice.status} />
|
||||
<span className="text-text-muted">
|
||||
{invoice.periodStart} → {invoice.periodEnd}
|
||||
</span>
|
||||
<span className="text-text-muted">·</span>
|
||||
<span className="text-text-muted">
|
||||
{t("dueOnLabel")}: {invoice.dueAt}
|
||||
</span>
|
||||
<span className="text-text-muted">·</span>
|
||||
<span className="text-text-muted font-mono text-xs">
|
||||
{invoice.locale}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-text-muted">{t("totalLabel")}</div>
|
||||
<div className="text-2xl font-semibold font-mono">
|
||||
CHF {invoice.totalChf.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action bar */}
|
||||
<Card>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{invoice.hasPdf && (
|
||||
<a
|
||||
href={`/api/admin/billing/invoices/${invoice.id}/pdf`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 rounded-md border border-border text-sm hover:bg-surface-2"
|
||||
>
|
||||
{t("downloadPdfBtn")}
|
||||
</a>
|
||||
)}
|
||||
{(invoice.status === "open" || invoice.status === "overdue") && (
|
||||
<>
|
||||
{!noteOpen ? (
|
||||
<button
|
||||
onClick={() => setNoteOpen(true)}
|
||||
disabled={busyAction !== null}
|
||||
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
|
||||
>
|
||||
{t("markPaidBtn")}
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 flex-grow">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t("paidNotePlaceholder")}
|
||||
value={noteInput}
|
||||
onChange={(e) => setNoteInput(e.target.value)}
|
||||
className="flex-grow px-3 py-1.5 rounded-md border border-border bg-surface-2 text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={markPaid}
|
||||
disabled={busyAction !== null}
|
||||
className="px-3 py-1.5 rounded-md bg-accent text-white text-sm disabled:opacity-50"
|
||||
>
|
||||
{busyAction === "mark-paid" ? t("saving") : t("confirm")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setNoteOpen(false);
|
||||
setNoteInput("");
|
||||
}}
|
||||
className="px-3 py-1.5 rounded-md border border-border text-sm"
|
||||
>
|
||||
{t("cancel")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={deleteInvoice}
|
||||
disabled={busyAction !== null}
|
||||
className="ml-auto px-4 py-2 rounded-md border border-error text-error text-sm disabled:opacity-50 hover:bg-error/10"
|
||||
title={t("deleteHint")}
|
||||
>
|
||||
{busyAction === "delete" ? t("deleting") : t("deleteBtn")}
|
||||
</button>
|
||||
</div>
|
||||
{actionError && (
|
||||
<div className="mt-3 text-sm text-error">{actionError}</div>
|
||||
)}
|
||||
{invoice.paidAt && (
|
||||
<div className="mt-3 text-xs text-text-muted">
|
||||
{t("paidOnLabel")}: {invoice.paidAt} · {invoice.paidBy} ·{" "}
|
||||
{invoice.paidMethodDetail}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Lines */}
|
||||
<Card>
|
||||
<CardHeader>{t("lineItemsTitle")}</CardHeader>
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-xs text-text-muted text-left">
|
||||
<tr>
|
||||
<th className="pb-2">{t("descCol")}</th>
|
||||
<th className="pb-2 text-right">{t("qtyCol")}</th>
|
||||
<th className="pb-2 text-right">{t("unitPriceCol")}</th>
|
||||
<th className="pb-2 text-right">{t("amountCol")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tenantOrder.map((tenantKey) => {
|
||||
const tenantLines = linesByTenant.get(tenantKey)!;
|
||||
return (
|
||||
<Fragment key={tenantKey ?? "_org"}>
|
||||
{tenantKey && (
|
||||
<tr>
|
||||
<td colSpan={4} className="pt-3 pb-1">
|
||||
<span className="text-xs font-semibold text-accent">
|
||||
{tenantKey}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{tenantLines.map((ln) => (
|
||||
<tr key={ln.id} className="border-t border-border">
|
||||
<td className="py-1.5">
|
||||
<div>{ln.description}</div>
|
||||
<div className="text-xs text-text-muted font-mono">
|
||||
{ln.kind}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-1.5 text-right">
|
||||
{ln.quantity}
|
||||
{ln.unitLabel ? ` ${ln.unitLabel}` : ""}
|
||||
</td>
|
||||
<td className="py-1.5 text-right font-mono text-xs">
|
||||
{ln.unitPriceChf.toFixed(4)}
|
||||
</td>
|
||||
<td className="py-1.5 text-right">
|
||||
{ln.amountChf.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="mt-4 pt-3 border-t border-border space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-muted">{t("subtotal")}</span>
|
||||
<span>CHF {invoice.subtotalChf.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-text-muted">
|
||||
{t("vat")} ({invoice.vatRate.toFixed(2)}%)
|
||||
</span>
|
||||
<span>CHF {invoice.vatAmountChf.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between pt-1 border-t border-border font-semibold">
|
||||
<span>{t("total")}</span>
|
||||
<span>CHF {invoice.totalChf.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Billing snapshot */}
|
||||
<Card>
|
||||
<CardHeader>{t("billToSnapshotTitle")}</CardHeader>
|
||||
<div className="text-sm space-y-1">
|
||||
<div className="font-semibold">
|
||||
{invoice.billingSnapshot.companyName}
|
||||
</div>
|
||||
<div>{invoice.billingSnapshot.streetAddress}</div>
|
||||
<div>
|
||||
{invoice.billingSnapshot.postalCode}{" "}
|
||||
{invoice.billingSnapshot.city}
|
||||
</div>
|
||||
<div>{invoice.billingSnapshot.country}</div>
|
||||
{invoice.billingSnapshot.vatNumber && (
|
||||
<div className="text-text-muted">
|
||||
VAT: {invoice.billingSnapshot.vatNumber}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-text-muted">
|
||||
{invoice.billingSnapshot.billingEmail}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusPill({ status }: { status: InvoiceStatus }) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const color =
|
||||
status === "paid"
|
||||
? "bg-success/15 text-success"
|
||||
: status === "overdue"
|
||||
? "bg-error/15 text-error"
|
||||
: status === "void" || status === "uncollectible"
|
||||
? "bg-text-muted/15 text-text-muted"
|
||||
: "bg-accent/15 text-accent";
|
||||
return (
|
||||
<span
|
||||
className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${color}`}
|
||||
>
|
||||
{t(`status_${status}` as any)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
183
src/components/admin/billing/invoices-table.tsx
Normal file
183
src/components/admin/billing/invoices-table.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import type { Invoice, InvoiceStatus } from "@/types";
|
||||
|
||||
interface Props {
|
||||
initialInvoices: Invoice[];
|
||||
}
|
||||
|
||||
const STATUS_FILTERS: (InvoiceStatus | "all")[] = [
|
||||
"all",
|
||||
"open",
|
||||
"overdue",
|
||||
"paid",
|
||||
"void",
|
||||
];
|
||||
|
||||
/**
|
||||
* Filterable invoice list. Filters live in URL-less local state
|
||||
* (simpler than syncing to query string for a v1 admin tool); a
|
||||
* page refresh resets.
|
||||
*
|
||||
* Re-fetching strategy: when filters change, hit the API directly
|
||||
* rather than router.refresh() so we don't bounce the user through
|
||||
* a full page render.
|
||||
*/
|
||||
export function InvoicesTable({ initialInvoices }: Props) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const [statusFilter, setStatusFilter] = useState<InvoiceStatus | "all">("all");
|
||||
const [monthFilter, setMonthFilter] = useState("");
|
||||
const [invoices, setInvoices] = useState(initialInvoices);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Effect runs after initial render too; skip refetch on mount
|
||||
// when filters are at their defaults — the server already
|
||||
// gave us the right initial set.
|
||||
if (statusFilter === "all" && monthFilter === "") return;
|
||||
let cancelled = false;
|
||||
setBusy(true);
|
||||
const params = new URLSearchParams();
|
||||
if (statusFilter !== "all") params.set("status", statusFilter);
|
||||
if (monthFilter) params.set("month", monthFilter);
|
||||
fetch(`/api/admin/billing/invoices?${params}`)
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (!cancelled) setInvoices(data);
|
||||
})
|
||||
.catch((e) => console.error("Failed to load invoices:", e))
|
||||
.finally(() => {
|
||||
if (!cancelled) setBusy(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [statusFilter, monthFilter]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<label className="block">
|
||||
<span className="text-xs text-text-muted">{t("statusFilterLabel")}</span>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) =>
|
||||
setStatusFilter(e.target.value as InvoiceStatus | "all")
|
||||
}
|
||||
className="mt-1 px-3 py-1.5 rounded-md border border-border bg-surface-2 text-sm"
|
||||
>
|
||||
{STATUS_FILTERS.map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{s === "all" ? t("allStatuses") : t(`status_${s}` as any)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-xs text-text-muted">{t("monthFilterLabel")}</span>
|
||||
<input
|
||||
type="month"
|
||||
value={monthFilter}
|
||||
onChange={(e) => setMonthFilter(e.target.value)}
|
||||
className="mt-1 px-3 py-1.5 rounded-md border border-border bg-surface-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
{monthFilter && (
|
||||
<button
|
||||
onClick={() => setMonthFilter("")}
|
||||
className="text-xs text-text-muted hover:underline"
|
||||
>
|
||||
{t("clearFilter")}
|
||||
</button>
|
||||
)}
|
||||
{busy && (
|
||||
<span className="text-xs text-text-muted ml-auto">
|
||||
{t("loading")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
{invoices.length === 0 ? (
|
||||
<p className="text-sm text-text-muted italic text-center py-6">
|
||||
{t("noInvoicesFound")}
|
||||
</p>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-xs text-text-muted text-left">
|
||||
<tr>
|
||||
<th className="pb-2">{t("invoiceNumberCol")}</th>
|
||||
<th className="pb-2">{t("orgCol")}</th>
|
||||
<th className="pb-2">{t("periodCol")}</th>
|
||||
<th className="pb-2">{t("statusCol")}</th>
|
||||
<th className="pb-2 text-right">{t("totalCol")}</th>
|
||||
<th className="pb-2 text-right">{t("dueCol")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invoices.map((inv) => (
|
||||
<tr
|
||||
key={inv.id}
|
||||
className="border-t border-border hover:bg-surface-2 cursor-pointer"
|
||||
>
|
||||
<td className="py-2">
|
||||
<Link
|
||||
href={`/admin/billing/invoices/${inv.id}`}
|
||||
className="font-mono text-xs hover:underline"
|
||||
>
|
||||
{inv.invoiceNumber}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<div className="text-xs">
|
||||
{inv.billingSnapshot.companyName || (
|
||||
<span className="font-mono">{inv.zitadelOrgId}</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-2 text-xs font-mono">
|
||||
{inv.periodStart.slice(0, 7)}
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<StatusPill status={inv.status} />
|
||||
</td>
|
||||
<td className="py-2 text-right">
|
||||
CHF {inv.totalChf.toFixed(2)}
|
||||
</td>
|
||||
<td className="py-2 text-right text-xs text-text-muted">
|
||||
{inv.dueAt}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusPill({ status }: { status: InvoiceStatus }) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const color =
|
||||
status === "paid"
|
||||
? "bg-success/15 text-success"
|
||||
: status === "overdue"
|
||||
? "bg-error/15 text-error"
|
||||
: status === "void" || status === "uncollectible"
|
||||
? "bg-text-muted/15 text-text-muted"
|
||||
: "bg-accent/15 text-accent";
|
||||
return (
|
||||
<span
|
||||
className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${color}`}
|
||||
>
|
||||
{t(`status_${status}` as any)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
399
src/components/admin/billing/pricing-editor.tsx
Normal file
399
src/components/admin/billing/pricing-editor.tsx
Normal file
@@ -0,0 +1,399 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardHeader } from "@/components/ui/card";
|
||||
import type { PlatformPricing, SkillPricing } from "@/types";
|
||||
|
||||
interface CatalogEntry {
|
||||
id: string;
|
||||
name: string;
|
||||
kind: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
initialPricing: PlatformPricing;
|
||||
initialSkillPricing: SkillPricing[];
|
||||
catalog: CatalogEntry[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Two-card layout:
|
||||
* 1. Platform pricing form (4 inputs, save = PUT to /pricing).
|
||||
* 2. Skill pricing table — list of priced skills, "Add skill"
|
||||
* picker below.
|
||||
*
|
||||
* No optimistic updates — every save round-trips and we
|
||||
* router.refresh() afterwards so the server-side render stays
|
||||
* the source of truth.
|
||||
*/
|
||||
export function PricingEditor({
|
||||
initialPricing,
|
||||
initialSkillPricing,
|
||||
catalog,
|
||||
}: Props) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const router = useRouter();
|
||||
|
||||
// -- Platform pricing form ----------------------------------------------
|
||||
const [monthly, setMonthly] = useState(
|
||||
String(initialPricing.tenantMonthlyFeeChf)
|
||||
);
|
||||
const [setup, setSetup] = useState(String(initialPricing.tenantSetupFeeChf));
|
||||
const [threema, setThreema] = useState(
|
||||
String(initialPricing.threemaMessageChf)
|
||||
);
|
||||
const [vat, setVat] = useState(String(initialPricing.vatRateChli));
|
||||
const [savingPricing, setSavingPricing] = useState(false);
|
||||
const [pricingError, setPricingError] = useState("");
|
||||
const [pricingSaved, setPricingSaved] = useState(false);
|
||||
|
||||
const savePricing = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSavingPricing(true);
|
||||
setPricingError("");
|
||||
setPricingSaved(false);
|
||||
try {
|
||||
const res = await fetch("/api/admin/billing/pricing", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
tenantMonthlyFeeChf: Number(monthly),
|
||||
tenantSetupFeeChf: Number(setup),
|
||||
threemaMessageChf: Number(threema),
|
||||
vatRateChli: Number(vat),
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const j = await res.json().catch(() => ({}));
|
||||
throw new Error(j.error || `HTTP ${res.status}`);
|
||||
}
|
||||
setPricingSaved(true);
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setPricingError(e.message);
|
||||
} finally {
|
||||
setSavingPricing(false);
|
||||
}
|
||||
};
|
||||
|
||||
// -- Skill pricing ------------------------------------------------------
|
||||
// Server is authoritative — we don't keep an editable local copy of the
|
||||
// table; instead each action posts to the API and we router.refresh().
|
||||
const [newSkillId, setNewSkillId] = useState(
|
||||
catalog.find((c) => c.kind === "skill")?.id ?? ""
|
||||
);
|
||||
const [newSkillPrice, setNewSkillPrice] = useState("0.10");
|
||||
const [addingSkill, setAddingSkill] = useState(false);
|
||||
const [skillError, setSkillError] = useState("");
|
||||
|
||||
const addOrUpdateSkill = async (
|
||||
e: React.FormEvent,
|
||||
overrideId?: string,
|
||||
overridePrice?: string
|
||||
) => {
|
||||
e.preventDefault();
|
||||
setAddingSkill(true);
|
||||
setSkillError("");
|
||||
try {
|
||||
const res = await fetch("/api/admin/billing/skill-pricing", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
skillId: overrideId ?? newSkillId,
|
||||
dailyPriceChf: Number(overridePrice ?? newSkillPrice),
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const j = await res.json().catch(() => ({}));
|
||||
throw new Error(j.error || `HTTP ${res.status}`);
|
||||
}
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setSkillError(e.message);
|
||||
} finally {
|
||||
setAddingSkill(false);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteSkill = async (skillId: string) => {
|
||||
if (!confirm(t("confirmDeleteSkillPrice", { skill: skillId }))) return;
|
||||
setSkillError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/admin/billing/skill-pricing/${encodeURIComponent(skillId)}`,
|
||||
{ method: "DELETE" }
|
||||
);
|
||||
if (!res.ok) {
|
||||
const j = await res.json().catch(() => ({}));
|
||||
throw new Error(j.error || `HTTP ${res.status}`);
|
||||
}
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setSkillError(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Catalog filtered to skill-kind entries for the picker, but keeping
|
||||
// existing pricing rows even if they reference non-skill packages.
|
||||
const skillCatalogOptions = catalog.filter((c) => c.kind === "skill");
|
||||
const catalogIndex = new Map(catalog.map((c) => [c.id, c]));
|
||||
const pricedIds = new Set(initialSkillPricing.map((s) => s.skillId));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>{t("platformPricingTitle")}</CardHeader>
|
||||
<form onSubmit={savePricing} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">
|
||||
{t("monthlyFeeLabel")} (CHF)
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={monthly}
|
||||
onChange={(e) => setMonthly(e.target.value)}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">
|
||||
{t("setupFeeLabel")} (CHF)
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={setup}
|
||||
onChange={(e) => setSetup(e.target.value)}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">
|
||||
{t("threemaMessageLabel")} (CHF)
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.0001"
|
||||
min="0"
|
||||
value={threema}
|
||||
onChange={(e) => setThreema(e.target.value)}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm text-text-secondary">
|
||||
{t("vatRateLabel")} (%)
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
value={vat}
|
||||
onChange={(e) => setVat(e.target.value)}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={savingPricing}
|
||||
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
|
||||
>
|
||||
{savingPricing ? t("saving") : t("save")}
|
||||
</button>
|
||||
{pricingSaved && (
|
||||
<span className="text-sm text-success">{t("savedOk")}</span>
|
||||
)}
|
||||
{pricingError && (
|
||||
<span className="text-sm text-error">{pricingError}</span>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>{t("skillPricingTitle")}</CardHeader>
|
||||
<p className="text-sm text-text-muted mb-4">{t("skillPricingDesc")}</p>
|
||||
|
||||
{initialSkillPricing.length > 0 ? (
|
||||
<table className="w-full text-sm mb-6">
|
||||
<thead className="text-xs text-text-muted text-left">
|
||||
<tr>
|
||||
<th className="pb-2">{t("skillCol")}</th>
|
||||
<th className="pb-2 text-right">{t("dailyPriceCol")}</th>
|
||||
<th className="pb-2 text-right">{t("actionsCol")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{initialSkillPricing.map((sp) => {
|
||||
const entry = catalogIndex.get(sp.skillId);
|
||||
return (
|
||||
<tr
|
||||
key={sp.skillId}
|
||||
className="border-t border-border align-top"
|
||||
>
|
||||
<td className="py-2">
|
||||
<div className="font-mono text-xs">{sp.skillId}</div>
|
||||
{entry && (
|
||||
<div className="text-xs text-text-muted">{entry.name}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 text-right">
|
||||
<InlinePriceEditor
|
||||
skillId={sp.skillId}
|
||||
initialPrice={sp.dailyPriceChf}
|
||||
onSave={(price) =>
|
||||
addOrUpdateSkill(
|
||||
new Event("submit") as any,
|
||||
sp.skillId,
|
||||
String(price)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="py-2 text-right">
|
||||
<button
|
||||
onClick={() => deleteSkill(sp.skillId)}
|
||||
className="text-xs text-error hover:underline"
|
||||
>
|
||||
{t("remove")}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p className="text-sm text-text-muted italic mb-4">{t("noSkillsPriced")}</p>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={(e) => addOrUpdateSkill(e)}
|
||||
className="flex items-end gap-3"
|
||||
>
|
||||
<label className="flex-grow">
|
||||
<span className="text-xs text-text-muted">{t("addSkillLabel")}</span>
|
||||
<select
|
||||
value={newSkillId}
|
||||
onChange={(e) => setNewSkillId(e.target.value)}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
>
|
||||
{skillCatalogOptions
|
||||
.filter((c) => !pricedIds.has(c.id))
|
||||
.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name} ({c.id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="w-32">
|
||||
<span className="text-xs text-text-muted">
|
||||
{t("dailyPriceLabel")} (CHF)
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={newSkillPrice}
|
||||
onChange={(e) => setNewSkillPrice(e.target.value)}
|
||||
className="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addingSkill || !newSkillId}
|
||||
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
|
||||
>
|
||||
{addingSkill ? t("saving") : t("add")}
|
||||
</button>
|
||||
</form>
|
||||
{skillError && (
|
||||
<p className="text-sm text-error mt-2">{skillError}</p>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Tiny inline editor for a single skill's daily price. Mounts in
|
||||
* "view" mode showing the current value as a clickable badge;
|
||||
* clicking turns it into an input + save/cancel buttons.
|
||||
*/
|
||||
function InlinePriceEditor({
|
||||
skillId,
|
||||
initialPrice,
|
||||
onSave,
|
||||
}: {
|
||||
skillId: string;
|
||||
initialPrice: number;
|
||||
onSave: (price: number) => Promise<void> | void;
|
||||
}) {
|
||||
const t = useTranslations("adminBilling");
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [value, setValue] = useState(String(initialPrice));
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
if (!editing) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="text-sm font-mono hover:underline"
|
||||
title={t("clickToEdit")}
|
||||
>
|
||||
CHF {initialPrice.toFixed(2)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
className="w-20 px-2 py-1 text-sm border border-border bg-surface-2 rounded"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
await onSave(Number(value));
|
||||
setEditing(false);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}}
|
||||
disabled={busy}
|
||||
className="text-xs px-2 py-1 bg-accent text-white rounded"
|
||||
>
|
||||
{busy ? "…" : "✓"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setValue(String(initialPrice));
|
||||
setEditing(false);
|
||||
}}
|
||||
className="text-xs px-2 py-1 border border-border rounded"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user