Update page.tsx
This commit is contained in:
NotII
@@ -138,8 +138,8 @@ export default function CustomerManagementPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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="bg-black rounded-lg shadow overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-800 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-400">Show:</div>
|
||||
@@ -164,22 +164,22 @@ export default function CustomerManagementPage() {
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 flex justify-center">
|
||||
<div className="p-8 flex justify-center bg-black">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : customers.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<Users className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-medium mb-2">No customers found</h3>
|
||||
<p className="text-muted-foreground">
|
||||
<div className="p-8 text-center bg-black">
|
||||
<Users className="h-12 w-12 mx-auto text-gray-500 mb-4" />
|
||||
<h3 className="text-lg font-medium mb-2 text-white">No customers found</h3>
|
||||
<p className="text-gray-500">
|
||||
Once you have customers placing orders, they will appear here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="border-t border-gray-700">
|
||||
<TableHeader className="bg-gray-800/40">
|
||||
<TableRow className="hover:bg-gray-800/60 border-gray-700">
|
||||
<Table className="border-t border-gray-800 bg-black">
|
||||
<TableHeader className="bg-black">
|
||||
<TableRow className="hover:bg-gray-900 border-gray-800">
|
||||
<TableHead className="w-[250px] text-gray-300">Customer</TableHead>
|
||||
<TableHead
|
||||
className="cursor-pointer w-[100px] text-gray-300"
|
||||
@@ -202,11 +202,11 @@ export default function CustomerManagementPage() {
|
||||
<TableHead className="w-[250px] text-gray-300">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableBody className="bg-black">
|
||||
{customers.map((customer) => (
|
||||
<TableRow
|
||||
key={customer.userId}
|
||||
className="cursor-pointer hover:bg-gray-800/60 border-gray-700"
|
||||
className="cursor-pointer hover:bg-gray-900 border-gray-800 bg-black"
|
||||
onClick={() => setSelectedCustomer(customer)}
|
||||
>
|
||||
<TableCell>
|
||||
@@ -214,7 +214,7 @@ export default function CustomerManagementPage() {
|
||||
<div className="text-sm text-gray-400">ID: {customer.telegramUserId}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className="font-medium">{customer.totalOrders}</Badge>
|
||||
<Badge className="bg-gray-700 text-white hover:bg-gray-600">{customer.totalOrders}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-gray-100">
|
||||
{formatCurrency(customer.totalSpent)}
|
||||
@@ -239,7 +239,7 @@ export default function CustomerManagementPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4 border-t border-gray-700 flex justify-between items-center">
|
||||
<div className="p-4 border-t border-gray-800 flex justify-between items-center">
|
||||
<div className="text-sm text-gray-400">
|
||||
Page {page} of {totalPages}
|
||||
</div>
|
||||
@@ -247,6 +247,7 @@ export default function CustomerManagementPage() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-gray-700 bg-gray-900 text-gray-300 hover:bg-gray-800 hover:text-white"
|
||||
onClick={() => handlePageChange(Math.max(1, page - 1))}
|
||||
disabled={page === 1 || loading}
|
||||
>
|
||||
@@ -256,6 +257,7 @@ export default function CustomerManagementPage() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-gray-700 bg-gray-900 text-gray-300 hover:bg-gray-800 hover:text-white"
|
||||
onClick={() => handlePageChange(Math.min(totalPages, page + 1))}
|
||||
disabled={page === totalPages || loading}
|
||||
>
|
||||
@@ -268,13 +270,13 @@ export default function CustomerManagementPage() {
|
||||
|
||||
{/* Customer Details Dialog */}
|
||||
<Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogContent className="max-w-2xl bg-gray-900 text-white border-gray-700">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl font-semibold flex items-center">
|
||||
<DialogTitle className="text-xl font-semibold flex items-center text-white">
|
||||
<Users className="h-5 w-5 mr-2" />
|
||||
Customer Details
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
<DialogDescription className="text-gray-400">
|
||||
Details and order statistics for this customer
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
@@ -282,28 +284,28 @@ export default function CustomerManagementPage() {
|
||||
{selectedCustomer && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<Card className="bg-gray-800 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-md font-medium">Customer Information</CardTitle>
|
||||
<CardTitle className="text-md font-medium text-white">Customer Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">Username:</div>
|
||||
<div className="font-medium">@{selectedCustomer.telegramUsername || "Unknown"}</div>
|
||||
<div className="text-gray-400">Username:</div>
|
||||
<div className="font-medium text-white">@{selectedCustomer.telegramUsername || "Unknown"}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">Telegram ID:</div>
|
||||
<div className="font-medium">{selectedCustomer.telegramUserId}</div>
|
||||
<div className="text-gray-400">Telegram ID:</div>
|
||||
<div className="font-medium text-white">{selectedCustomer.telegramUserId}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">Chat ID:</div>
|
||||
<div className="font-medium">{selectedCustomer.chatId}</div>
|
||||
<div className="text-gray-400">Chat ID:</div>
|
||||
<div className="font-medium text-white">{selectedCustomer.chatId}</div>
|
||||
</div>
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs"
|
||||
className="text-xs border-gray-600 text-gray-300 hover:text-white hover:bg-gray-700"
|
||||
onClick={() => {
|
||||
window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
|
||||
}}
|
||||
@@ -315,34 +317,34 @@ export default function CustomerManagementPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card className="bg-gray-800 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-md font-medium">Order Statistics</CardTitle>
|
||||
<CardTitle className="text-md font-medium text-white">Order Statistics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">Total Orders:</div>
|
||||
<div className="font-medium">{selectedCustomer.totalOrders}</div>
|
||||
<div className="text-gray-400">Total Orders:</div>
|
||||
<div className="font-medium text-white">{selectedCustomer.totalOrders}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">Total Spent:</div>
|
||||
<div className="font-medium">{formatCurrency(selectedCustomer.totalSpent)}</div>
|
||||
<div className="text-gray-400">Total Spent:</div>
|
||||
<div className="font-medium text-white">{formatCurrency(selectedCustomer.totalSpent)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">First Order:</div>
|
||||
<div className="font-medium">{formatDate(selectedCustomer.firstOrderDate)}</div>
|
||||
<div className="text-gray-400">First Order:</div>
|
||||
<div className="font-medium text-white">{formatDate(selectedCustomer.firstOrderDate)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="text-gray-500 dark:text-gray-400">Last Order:</div>
|
||||
<div className="font-medium">{formatDate(selectedCustomer.lastOrderDate)}</div>
|
||||
<div className="text-gray-400">Last Order:</div>
|
||||
<div className="font-medium text-white">{formatDate(selectedCustomer.lastOrderDate)}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Card className="bg-gray-800 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-md font-medium">Order Status Breakdown</CardTitle>
|
||||
<CardTitle className="text-md font-medium text-white">Order Status Breakdown</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
|
||||
Reference in New Issue
Block a user