g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
NotII
2025-04-02 00:36:34 +01:00
parent 79a6f2b0c8
commit 5adf3ebdda
1 changed files with 21 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/dashboard/storefront/customers/page.tsx
View File

@@ -180,18 +180,18 @@ export default function CustomerManagementPage() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead className="w-[300px]">Customer</TableHead> <TableHead className="w-[250px]">Customer</TableHead>
<TableHead <TableHead
className="cursor-pointer" className="cursor-pointer w-[100px]"
onClick={() => handleSort("totalOrders")} onClick={() => handleSort("totalOrders")}
> >
<div className="flex items-center"> <div className="flex items-center">
Total Orders Orders
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</div> </div>
</TableHead> </TableHead>
<TableHead <TableHead
className="cursor-pointer" className="cursor-pointer w-[150px]"
onClick={() => handleSort("totalSpent")} onClick={() => handleSort("totalSpent")}
> >
<div className="flex items-center"> <div className="flex items-center">
@@ -199,7 +199,7 @@ 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>Status Breakdown</TableHead> <TableHead className="w-[250px]">Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -214,27 +214,24 @@ export default function CustomerManagementPage() {
<div className="text-sm text-gray-500">ID: {customer.telegramUserId}</div> <div className="text-sm text-gray-500">ID: {customer.telegramUserId}</div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Badge variant="outline">{customer.totalOrders}</Badge> <Badge className="font-medium">{customer.totalOrders}</Badge>
</TableCell> </TableCell>
<TableCell className="font-medium"> <TableCell className="font-medium">
{formatCurrency(customer.totalSpent)} {formatCurrency(customer.totalSpent)}
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex space-x-1 text-xs"> <div className="flex space-x-1">
<Badge variant="outline" className="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/30"> <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300">
Paid: {customer.ordersByStatus.paid} {customer.ordersByStatus.paid} Paid
</Badge> </Badge>
<Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300 dark:hover:bg-green-900/30"> <Badge className="bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300">
Completed: {customer.ordersByStatus.completed} {customer.ordersByStatus.completed} Completed
</Badge> </Badge>
<Badge variant="outline" className="bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-300 dark:hover:bg-amber-900/30"> <Badge className="bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300">
Shipped: {customer.ordersByStatus.shipped} {customer.ordersByStatus.shipped} Shipped
</Badge> </Badge>
</div> </div>
</TableCell> </TableCell>
<TableCell>
{/* {formatDate(customer.lastOrderDate)} */}
</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
@@ -349,20 +346,20 @@ export default function CustomerManagementPage() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
<div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md"> <div className="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-md">
<p className="text-sm text-blue-700 dark:text-blue-300">Paid</p> <p className="text-sm text-blue-800 dark:text-blue-300">Paid</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p> <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p>
</div> </div>
<div className="bg-purple-50 dark:bg-purple-900/20 p-3 rounded-md"> <div className="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-md">
<p className="text-sm text-purple-700 dark:text-purple-300">Acknowledged</p> <p className="text-sm text-purple-800 dark:text-purple-300">Acknowledged</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p> <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p>
</div> </div>
<div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-md"> <div className="bg-amber-100 dark:bg-amber-900/30 p-3 rounded-md">
<p className="text-sm text-amber-700 dark:text-amber-300">Shipped</p> <p className="text-sm text-amber-800 dark:text-amber-300">Shipped</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p> <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p>
</div> </div>
<div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-md"> <div className="bg-green-100 dark:bg-green-900/30 p-3 rounded-md">
<p className="text-sm text-green-700 dark:text-green-300">Completed</p> <p className="text-sm text-green-800 dark:text-green-300">Completed</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p> <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p>
</div> </div>
</div> </div>