Merge pull request #146 from henrypeters/feature/issue-19-implement-invoice

feat: implement invoice

Author: Kingsman-99

src/app/invoice/[id]/page.tsx

@@ -12,6 +12,8 @@ import {
 import { formatAmount, parseAmount, truncateAddress } from "@stellar-split/sdk";
 import PaymentProgress from "@/components/PaymentProgress";
 import CountdownTimer from "@/components/CountdownTimer";
+import RecipientPieChart from "@/components/RecipientPieChart";
+import InvoicePDF from "@/components/InvoicePDF";
 import InstallmentPanel from "@/components/InstallmentPanel";
 import CommentSection from "@/components/CommentSection";
 import StatusTimeline from "@/components/StatusTimeline";
@@ -253,13 +255,19 @@ export default function InvoiceDetailPage({ params }: Props) {
         >
           {invoice.status}
         </span>
+<<<<<<< feature/issue-19-implement-invoice
+        <div className="ml-auto print:hidden">
+          <InvoicePDF invoice={invoice} total={total} />
+        </div>
+=======
         <button
           type="button"
           onClick={() => window.print()}
           className="sm:ml-auto min-h-11 px-3 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm transition-colors print:hidden self-start sm:self-auto"
         >
           Print Invoice
         </button>
+>>>>>>> main
       </div>
 
       {/* Status Timeline */}

src/components/CountdownTimer.tsx

@@ -33,6 +33,8 @@ export default function CountdownTimer({ deadline, compact = false }: Props) {
   const hours = Math.floor((timeLeft % 86400) / 3600);
   const minutes = Math.floor((timeLeft % 3600) / 60);
   const seconds = timeLeft % 60;
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const isUrgent = timeLeft < 86400;
 
   const pad = (n: number) => String(n).padStart(2, "0");
   const isUrgent = timeLeft < 86400;
@@ -43,6 +45,7 @@ export default function CountdownTimer({ deadline, compact = false }: Props) {
     : `${pad(days)}:${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
 
   return (
+    <span className={`font-mono text-xs font-semibold tabular-nums ${isUrgent ? "text-red-400" : "text-gray-300"}`}>
     <span className={`font-mono text-xs font-semibold tabular-nums ${colorClass}`}>
       {display}
     </span>

src/components/InvoicePDF.tsx

@@ -0,0 +1,76 @@
+import { formatAmount } from "@stellar-split/sdk";
+import type { Invoice } from "@stellar-split/sdk";
+
+interface Props {
+  invoice: Invoice;
+  total: bigint;
+}
+
+/**
+ * InvoicePDF — print-only invoice layout + "Download PDF" button.
+ * The button is hidden in print view via print:hidden.
+ * The #invoice-print section is shown only in print via the global @media print styles.
+ */
+export default function InvoicePDF({ invoice, total }: Props) {
+  const deadline = invoice.deadline > 0
+    ? new Date(invoice.deadline * 1000).toLocaleString()
+    : "No deadline";
+
+  return (
+    <>
+      {/* Trigger button — hidden when printing */}
+      <button
+        type="button"
+        onClick={() => window.print()}
+        className="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-colors print:hidden"
+      >
+        Download PDF
+      </button>
+
+      {/* Print-only content */}
+      <div id="invoice-print" className="hidden print:block text-black bg-white p-8 text-sm leading-relaxed">
+        <h1 className="text-2xl font-bold mb-1">Invoice #{invoice.id}</h1>
+        <p className="text-gray-500 mb-6">StellarSplit On-Chain Invoice</p>
+
+        <table className="w-full mb-6 text-left border-collapse">
+          <tbody>
+            <tr className="border-b border-gray-200">
+              <th className="py-1.5 pr-4 font-semibold w-32">Status</th>
+              <td className="py-1.5">{invoice.status}</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <th className="py-1.5 pr-4 font-semibold">Creator</th>
+              <td className="py-1.5 font-mono break-all">{invoice.creator}</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <th className="py-1.5 pr-4 font-semibold">Deadline</th>
+              <td className="py-1.5">{deadline}</td>
+            </tr>
+            <tr>
+              <th className="py-1.5 pr-4 font-semibold">Total</th>
+              <td className="py-1.5">{formatAmount(total)} USDC</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h2 className="font-semibold text-base mb-2">Recipients</h2>
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b-2 border-gray-300">
+              <th className="text-left py-1.5 pr-4">Address</th>
+              <th className="text-right py-1.5">Amount (USDC)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {invoice.recipients.map((r, i) => (
+              <tr key={i} className="border-b border-gray-100">
+                <td className="py-1.5 pr-4 font-mono break-all">{r.address}</td>
+                <td className="py-1.5 text-right">{formatAmount(r.amount)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}

src/components/RecipientPieChart.tsx

@@ -14,6 +14,7 @@ interface Props {
 export default function RecipientPieChart({ recipients, total }: Props) {
   const data = recipients.map((r) => ({
     address: r.address,
+    name: truncateAddress(r.address),
     label: truncateAddress(r.address),
     amount: r.amount,
     value: Number((r.amount * 10000n) / total) / 100,
@@ -22,6 +23,7 @@ export default function RecipientPieChart({ recipients, total }: Props) {
   return (
     <ResponsiveContainer width="100%" height={260}>
       <PieChart>
+        <Pie dataKey="value" data={data} cx="50%" cy="45%" outerRadius="60%" isAnimationActive={false}>
         <Pie
           data={data}
           dataKey="value"
@@ -36,6 +38,7 @@ export default function RecipientPieChart({ recipients, total }: Props) {
           ))}
         </Pie>
         <Tooltip
+          formatter={(value: number, _: string, props: { payload?: { address: string; amount: bigint } }) => [
           formatter={(value: number, _name: string, props: { payload?: { address: string; amount: bigint } }) => [
             `${formatAmount(props.payload?.amount ?? 0n)} USDC (${value.toFixed(2)}%)`,
             props.payload?.address ?? "",
@@ -45,6 +48,11 @@ export default function RecipientPieChart({ recipients, total }: Props) {
           labelStyle={{ display: "none" }}
         />
         <Legend
+          wrapperStyle={{ fontSize: "11px", paddingTop: "8px" }}
+          formatter={(value: string, entry: { payload?: Record<string, unknown> }) => {
+            const amount = (entry.payload?.amount as bigint | undefined) ?? 0n;
+            return `${value} — ${formatAmount(amount)} USDC`;
+          }}
           formatter={(value: string, entry: { payload?: { amount: bigint } }) =>
             `${value} — ${formatAmount(entry.payload?.amount ?? 0n)} USDC`
           }