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