Seazn/profit-planet-frontend
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add due date column to invoice table with conditional styling

Browse Source
This commit is contained in:
Seazn 2026-03-16 16:05:19 +01:00
parent adfe136d74
commit 919c20f018
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/admin/finance-management/page.tsx
View File

@ -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">Invoice</th>
<th className="px-3 py-2 font-semibold">Customer</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">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">Amount</th>
<th className="px-3 py-2 font-semibold">Status</th> <th className="px-3 py-2 font-semibold">Status</th>
<th className="px-3 py-2 font-semibold">Actions</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"> <tbody className="divide-y divide-gray-100">
{invLoading ? ( {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={7} 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-3/4 bg-gray-200 animate-pulse rounded" /></td></tr>
</> </>
) : filteredBills.length === 0 ? ( ) : filteredBills.length === 0 ? (
<tr> <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. Keine Rechnungen gefunden.
</td> </td>
</tr> </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.invoice_number ?? inv.id}</td>
<td className="px-3 py-2">{inv.buyer_name ?? '—'}</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">{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"> <td className="px-3 py-2">
€{Number(inv.total_gross ?? 0).toFixed(2)}{' '} €{Number(inv.total_gross ?? 0).toFixed(2)}{' '}
<span className="text-xs text-gray-500">{inv.currency ?? 'EUR'}</span> <span className="text-xs text-gray-500">{inv.currency ?? 'EUR'}</span>