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:37:24 +01:00
parent 5adf3ebdda
commit 0a7acf55b8
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -132,17 +132,17 @@ export default function CustomerManagementPage() {
<Layout> <Layout>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center"> <h1 className="text-2xl font-semibold text-white flex items-center">
<Users className="mr-2 h-6 w-6" /> <Users className="mr-2 h-6 w-6" />
Customer Management Customer Management
</h1> </h1>
</div> </div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden"> <div className="bg-gray-800 rounded-lg shadow overflow-hidden">
<div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> <div className="p-4 border-b border-gray-700 flex justify-between items-center">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="text-sm font-medium text-gray-500 dark:text-gray-400">Show:</div> <div className="text-sm font-medium text-gray-400">Show:</div>
<Select value={itemsPerPage.toString()} onValueChange={handleItemsPerPageChange}> <Select value={itemsPerPage.toString()} onValueChange={handleItemsPerPageChange}>
<SelectTrigger className="w-[70px]"> <SelectTrigger className="w-[70px]">
<SelectValue placeholder="25" /> <SelectValue placeholder="25" />
@@ -156,7 +156,7 @@ export default function CustomerManagementPage() {
</div> </div>
</div> </div>
<div className="text-sm text-gray-500 dark:text-gray-400"> <div className="text-sm text-gray-400">
{loading {loading
? "Loading..." ? "Loading..."
: `Showing ${customers.length} of ${totalPages * itemsPerPage} customers`} : `Showing ${customers.length} of ${totalPages * itemsPerPage} customers`}
@@ -177,12 +177,12 @@ export default function CustomerManagementPage() {
</div> </div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table className="border-t border-gray-700">
<TableHeader> <TableHeader className="bg-gray-800/40">
<TableRow> <TableRow className="hover:bg-gray-800/60 border-gray-700">
<TableHead className="w-[250px]">Customer</TableHead> <TableHead className="w-[250px] text-gray-300">Customer</TableHead>
<TableHead <TableHead
className="cursor-pointer w-[100px]" className="cursor-pointer w-[100px] text-gray-300"
onClick={() => handleSort("totalOrders")} onClick={() => handleSort("totalOrders")}
> >
<div className="flex items-center"> <div className="flex items-center">
@@ -191,7 +191,7 @@ export default function CustomerManagementPage() {
</div> </div>
</TableHead> </TableHead>
<TableHead <TableHead
className="cursor-pointer w-[150px]" className="cursor-pointer w-[150px] text-gray-300"
onClick={() => handleSort("totalSpent")} onClick={() => handleSort("totalSpent")}
> >
<div className="flex items-center"> <div className="flex items-center">
@@ -199,35 +199,35 @@ 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="w-[250px]">Status</TableHead> <TableHead className="w-[250px] text-gray-300">Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{customers.map((customer) => ( {customers.map((customer) => (
<TableRow <TableRow
key={customer.userId} key={customer.userId}
className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700" className="cursor-pointer hover:bg-gray-800/60 border-gray-700"
onClick={() => setSelectedCustomer(customer)} onClick={() => setSelectedCustomer(customer)}
> >
<TableCell> <TableCell>
<div className="font-medium">@{customer.telegramUsername || "Unknown"}</div> <div className="font-medium text-gray-100">@{customer.telegramUsername || "Unknown"}</div>
<div className="text-sm text-gray-500">ID: {customer.telegramUserId}</div> <div className="text-sm text-gray-400">ID: {customer.telegramUserId}</div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Badge className="font-medium">{customer.totalOrders}</Badge> <Badge className="font-medium">{customer.totalOrders}</Badge>
</TableCell> </TableCell>
<TableCell className="font-medium"> <TableCell className="font-medium text-gray-100">
{formatCurrency(customer.totalSpent)} {formatCurrency(customer.totalSpent)}
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex space-x-1"> <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"> <Badge className="bg-blue-500 text-white hover:bg-blue-600">
{customer.ordersByStatus.paid} Paid {customer.ordersByStatus.paid} Paid
</Badge> </Badge>
<Badge className="bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300"> <Badge className="bg-green-500 text-white hover:bg-green-600">
{customer.ordersByStatus.completed} Completed {customer.ordersByStatus.completed} Completed
</Badge> </Badge>
<Badge className="bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300"> <Badge className="bg-amber-500 text-white hover:bg-amber-600">
{customer.ordersByStatus.shipped} Shipped {customer.ordersByStatus.shipped} Shipped
</Badge> </Badge>
</div> </div>
@@ -239,8 +239,8 @@ export default function CustomerManagementPage() {
</div> </div>
)} )}
<div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center"> <div className="p-4 border-t border-gray-700 flex justify-between items-center">
<div className="text-sm text-gray-500 dark:text-gray-400"> <div className="text-sm text-gray-400">
Page {page} of {totalPages} Page {page} of {totalPages}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -346,21 +346,21 @@ 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-100 dark:bg-blue-900/30 p-3 rounded-md"> <div className="bg-blue-500/20 p-3 rounded-md border border-blue-500/30">
<p className="text-sm text-blue-800 dark:text-blue-300">Paid</p> <p className="text-sm text-blue-300">Paid</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p> <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.paid}</p>
</div> </div>
<div className="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-md"> <div className="bg-purple-500/20 p-3 rounded-md border border-purple-500/30">
<p className="text-sm text-purple-800 dark:text-purple-300">Acknowledged</p> <p className="text-sm text-purple-300">Acknowledged</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p> <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.acknowledged}</p>
</div> </div>
<div className="bg-amber-100 dark:bg-amber-900/30 p-3 rounded-md"> <div className="bg-amber-500/20 p-3 rounded-md border border-amber-500/30">
<p className="text-sm text-amber-800 dark:text-amber-300">Shipped</p> <p className="text-sm text-amber-300">Shipped</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p> <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.shipped}</p>
</div> </div>
<div className="bg-green-100 dark:bg-green-900/30 p-3 rounded-md"> <div className="bg-green-500/20 p-3 rounded-md border border-green-500/30">
<p className="text-sm text-green-800 dark:text-green-300">Completed</p> <p className="text-sm text-green-300">Completed</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p> <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.completed}</p>
</div> </div>
</div> </div>
</CardContent> </CardContent>