chore: initial project import

app/billing/invoices/[invoiceId]/page.tsx

@@ -0,0 +1,115 @@
+import Link from "next/link";
+import { ShellPage } from "@/components/page-templates";
+import { Badge, SectionCard } from "@/components/ui";
+import { getSession } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { redirect } from "next/navigation";
+
+function formatDate(value: Date | null) {
+  if (!value) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat("id-ID", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(value);
+}
+
+function formatMoney(value: number) {
+  return new Intl.NumberFormat("id-ID", {
+    style: "currency",
+    currency: "IDR",
+    maximumFractionDigits: 0
+  }).format(value);
+}
+
+function statusTone(status: string) {
+  if (status === "PAID") {
+    return "success";
+  }
+
+  if (status === "OVERDUE") {
+    return "danger";
+  }
+
+  return "warning";
+}
+
+export default async function BillingInvoiceDetailPage({
+  params
+}: {
+  params: Promise<{ invoiceId: string }>;
+}) {
+  const session = await getSession();
+  if (!session) {
+    redirect("/login");
+  }
+
+  const { invoiceId } = await params;
+  const invoice = await prisma.billingInvoice.findFirst({
+    where: { id: invoiceId, tenantId: session.tenantId },
+    include: {
+      tenant: { select: { name: true, slug: true } },
+      plan: { select: { name: true, code: true } }
+    }
+  });
+
+  if (!invoice) {
+    redirect("/billing/history?error=invoice_not_found");
+  }
+
+  return (
+    <ShellPage shell="admin" title="Invoice Detail" description="Ringkasan invoice per tenant.">
+      <div className="grid gap-6 xl:grid-cols-2">
+        <SectionCard title="Invoice summary">
+          <div className="space-y-2 text-sm text-on-surface-variant">
+            <p>
+              <strong className="text-on-surface">Invoice:</strong> {invoice.invoiceNumber}
+            </p>
+            <p>
+              <strong className="text-on-surface">Tenant:</strong>{" "}
+              <Link href="/billing/history" className="text-brand hover:underline">
+                {invoice.tenant.name} ({invoice.tenant.slug})
+              </Link>
+            </p>
+            <p>
+              <strong className="text-on-surface">Plan:</strong> {invoice.plan.name} ({invoice.plan.code})
+            </p>
+            <p>
+              <strong className="text-on-surface">Period:</strong> {formatDate(invoice.periodStart)} - {formatDate(invoice.periodEnd)}
+            </p>
+            <p>
+              <strong className="text-on-surface">Subtotal:</strong> {formatMoney(invoice.subtotal)} | Tax: {formatMoney(invoice.taxAmount)}
+            </p>
+            <p>
+              <strong className="text-on-surface">Total:</strong> {formatMoney(invoice.totalAmount)}
+            </p>
+            <p>
+              <strong className="text-on-surface">Status:</strong> <Badge tone={statusTone(invoice.paymentStatus)}>{invoice.paymentStatus}</Badge>
+            </p>
+          </div>
+        </SectionCard>
+        <SectionCard title="Timeline">
+          <div className="space-y-2 text-sm text-on-surface-variant">
+            <p>
+              <strong className="text-on-surface">Issued:</strong> {formatDate(invoice.createdAt)}
+            </p>
+            <p>
+              <strong className="text-on-surface">Due date:</strong> {formatDate(invoice.dueDate)}
+            </p>
+            <p>
+              <strong className="text-on-surface">Paid at:</strong> {formatDate(invoice.paidAt)}
+            </p>
+            <p>
+              <strong className="text-on-surface">Updated:</strong> {formatDate(invoice.updatedAt)}
+            </p>
+          </div>
+        </SectionCard>
+      </div>
+    </ShellPage>
+  );
+}