Phase3: Billing Customerpage/Mailings

2026-05-24 21:44:10 +02:00
parent a3b080f542
commit cf190e5ac5
17 changed files with 1057 additions and 4 deletions
--- a/src/components/billing/customer-invoice-list.tsx
+++ b/src/components/billing/customer-invoice-list.tsx
@@ -0,0 +1,92 @@
+import { useTranslations, useFormatter } from "next-intl";
+import { Link } from "@/i18n/navigation";
+import { Card } from "@/components/ui/card";
+import type { Invoice } from "@/types";
+
+interface Props {
+  invoices: Invoice[];
+}
+
+const statusColors: Record<string, string> = {
+  issued: "text-text-secondary bg-surface-3",
+  paid: "text-success bg-success/10",
+  overdue: "text-error bg-error/10",
+  void: "text-text-muted bg-surface-3 line-through",
+};
+
+/**
+ * Customer's invoice history table. Server component — gets a
+ * pre-fetched Invoice[] from /billing/page.tsx. Each row links
+ * to /billing/<invoice-number> for the full detail view.
+ *
+ * Columns: number, period, due date, total, status. Status is
+ * displayed with a colored badge so the customer can scan for
+ * outstanding ones at a glance.
+ */
+export function CustomerInvoiceList({ invoices }: Props) {
+  const t = useTranslations("customerBilling");
+  const fmt = useFormatter();
+
+  if (invoices.length === 0) {
+    return (
+      <Card>
+        <p className="text-sm text-text-muted italic text-center py-8">
+          {t("emptyHistory")}
+        </p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <table className="w-full text-sm">
+        <thead className="text-xs text-text-muted text-left">
+          <tr>
+            <th className="pb-2">{t("numberCol")}</th>
+            <th className="pb-2">{t("periodCol")}</th>
+            <th className="pb-2">{t("dueCol")}</th>
+            <th className="pb-2 text-right">{t("totalCol")}</th>
+            <th className="pb-2 text-right">{t("statusCol")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {invoices.map((inv) => (
+            <tr
+              key={inv.id}
+              className="border-t border-border hover:bg-surface-2 transition-colors"
+            >
+              <td className="py-2">
+                <Link
+                  href={`/billing/${inv.invoiceNumber}`}
+                  className="font-mono text-xs text-accent hover:underline"
+                >
+                  {inv.invoiceNumber}
+                </Link>
+              </td>
+              <td className="py-2 text-xs text-text-secondary">
+                {fmt.dateTime(new Date(inv.periodStart), { dateStyle: "medium" })}
+                <span className="text-text-muted mx-1">→</span>
+                {fmt.dateTime(new Date(inv.periodEnd), { dateStyle: "medium" })}
+              </td>
+              <td className="py-2 text-xs text-text-secondary">
+                {fmt.dateTime(new Date(inv.dueAt), { dateStyle: "medium" })}
+              </td>
+              <td className="py-2 text-right font-mono">
+                CHF {inv.totalChf.toFixed(2)}
+              </td>
+              <td className="py-2 text-right">
+                <span
+                  className={`text-[10px] uppercase tracking-wider px-2 py-1 rounded-md font-semibold ${
+                    statusColors[inv.status] ?? "text-text-muted bg-surface-3"
+                  }`}
+                >
+                  {t(`status.${inv.status}` as any)}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  );
+}