From 919c20f0182780f947c3a917c51c1164b616c2d4 Mon Sep 17 00:00:00 2001
From: Seazn <seazncode@gmail.com>
Date: Mon, 16 Mar 2026 16:05:19 +0100
Subject: [PATCH] feat: add due date column to invoice table with conditional
 styling

---
 src/app/admin/finance-management/page.tsx | 25 ++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/finance-management/page.tsx b/src/app/admin/finance-management/page.tsx
index 9d6f73d..96d72ae 100644
--- a/src/app/admin/finance-management/page.tsx
+++ b/src/app/admin/finance-management/page.tsx
@@ -278,6 +278,7 @@ export default function FinanceManagementPage() {
                     <th className="px-3 py-2 font-semibold">Invoice</th>
                     <th className="px-3 py-2 font-semibold">Customer</th>
                     <th className="px-3 py-2 font-semibold">Issued</th>
+                    <th className="px-3 py-2 font-semibold">Due Date</th>
                     <th className="px-3 py-2 font-semibold">Amount</th>
                     <th className="px-3 py-2 font-semibold">Status</th>
                     <th className="px-3 py-2 font-semibold">Actions</th>
@@ -286,12 +287,12 @@ export default function FinanceManagementPage() {
                 <tbody className="divide-y divide-gray-100">
                   {invLoading ? (
                     <>
-                      <tr><td colSpan={6} className="px-3 py-3"><div className="h-4 w-40 bg-gray-200 animate-pulse rounded" /></td></tr>
-                      <tr><td colSpan={6} className="px-3 py-3"><div className="h-4 w-3/4 bg-gray-200 animate-pulse rounded" /></td></tr>
+                      <tr><td colSpan={7} className="px-3 py-3"><div className="h-4 w-40 bg-gray-200 animate-pulse rounded" /></td></tr>
+                      <tr><td colSpan={7} className="px-3 py-3"><div className="h-4 w-3/4 bg-gray-200 animate-pulse rounded" /></td></tr>
                     </>
                   ) : filteredBills.length === 0 ? (
                     <tr>
-                      <td colSpan={6} className="px-3 py-4 text-center text-gray-500">
+                      <td colSpan={7} className="px-3 py-4 text-center text-gray-500">
                         Keine Rechnungen gefunden.
                       </td>
                     </tr>
@@ -301,6 +302,24 @@ export default function FinanceManagementPage() {
                         <td className="px-3 py-2">{inv.invoice_number ?? inv.id}</td>
                         <td className="px-3 py-2">{inv.buyer_name ?? '—'}</td>
                         <td className="px-3 py-2">{inv.issued_at ? new Date(inv.issued_at).toLocaleDateString() : '—'}</td>
+                        <td className="px-3 py-2">
+                          {(() => {
+                            if (!inv.due_at) return <span className="text-gray-400">—</span>
+                            const due = new Date(inv.due_at)
+                            const now = new Date()
+                            const diffDays = Math.ceil((due.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+                            let cls = 'bg-green-100 text-green-700' // plenty of time
+                            if (inv.status === 'paid') cls = 'bg-green-100 text-green-700'
+                            else if (diffDays < 0) cls = 'bg-red-100 text-red-700'
+                            else if (diffDays <= 3) cls = 'bg-red-100 text-red-700'
+                            else if (diffDays <= 7) cls = 'bg-amber-100 text-amber-700'
+                            return (
+                              <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${cls}`}>
+                                {due.toLocaleDateString()}
+                              </span>
+                            )
+                          })()}
+                        </td>
                         <td className="px-3 py-2">
                           €{Number(inv.total_gross ?? 0).toFixed(2)}{' '}
                           <span className="text-xs text-gray-500">{inv.currency ?? 'EUR'}</span>