Update page.tsx

This commit is contained in:
NotII
2025-04-02 15:41:42 +01:00
parent 375dd90551
commit 81a813c3f0

View File

@@ -133,7 +133,7 @@ export default function CustomerManagementPage() {
})); }));
}; };
// Format date without time // Format date with time
const formatDate = (dateString: string | null | undefined) => { const formatDate = (dateString: string | null | undefined) => {
if (!dateString) return "N/A"; if (!dateString) return "N/A";
try { try {
@@ -141,7 +141,9 @@ export default function CustomerManagementPage() {
return new Intl.DateTimeFormat('en-GB', { return new Intl.DateTimeFormat('en-GB', {
day: '2-digit', day: '2-digit',
month: 'short', month: 'short',
year: 'numeric' year: 'numeric',
hour: '2-digit',
minute: '2-digit'
}).format(date); }).format(date);
} catch (error) { } catch (error) {
return "N/A"; return "N/A";
@@ -219,6 +221,15 @@ export default function CustomerManagementPage() {
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</div> </div>
</TableHead> </TableHead>
<TableHead
className="cursor-pointer w-[180px] text-gray-300"
onClick={() => handleSort("lastOrderDate")}
>
<div className="flex items-center">
Last Order
<ArrowUpDown className="ml-2 h-4 w-4" />
</div>
</TableHead>
<TableHead className="w-[250px] text-gray-300">Status</TableHead> <TableHead className="w-[250px] text-gray-300">Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@@ -247,6 +258,9 @@ export default function CustomerManagementPage() {
<TableCell className="font-medium text-gray-100"> <TableCell className="font-medium text-gray-100">
{formatCurrency(customer.totalSpent)} {formatCurrency(customer.totalSpent)}
</TableCell> </TableCell>
<TableCell className="text-sm text-gray-100">
{customer.lastOrderDate ? formatDate(customer.lastOrderDate) : "N/A"}
</TableCell>
<TableCell> <TableCell>
{customer.hasOrders ? ( {customer.hasOrders ? (
<div className="flex space-x-1"> <div className="flex space-x-1">
@@ -381,11 +395,15 @@ export default function CustomerManagementPage() {
</div> </div>
<div className="flex justify-between items-center text-sm"> <div className="flex justify-between items-center text-sm">
<div className="text-muted-foreground">First Order:</div> <div className="text-muted-foreground">First Order:</div>
<div className="font-medium">{formatDate(selectedCustomer.firstOrderDate)}</div> <div className="font-medium">
{formatDate(selectedCustomer.firstOrderDate)}
</div>
</div> </div>
<div className="flex justify-between items-center text-sm"> <div className="flex justify-between items-center text-sm">
<div className="text-muted-foreground">Last Order:</div> <div className="text-muted-foreground">Last Order:</div>
<div className="font-medium">{formatDate(selectedCustomer.lastOrderDate)}</div> <div className="font-medium">
{formatDate(selectedCustomer.lastOrderDate)}
</div>
</div> </div>
</div> </div>
</div> </div>