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:40:43 +01:00
parent 0a7acf55b8
commit 466137a74a
1 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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