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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user