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