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 15:24:29 +01:00
parent de222b7fc6
commit 27c966f92c
1 changed files with 96 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,6 +27,7 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogDescription, DialogDescription,
DialogFooter,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@@ -323,99 +324,113 @@ export default function CustomerManagementPage() {
</div> </div>
{/* Customer Details Dialog */} {/* Customer Details Dialog */}
{selectedCustomer && (
<Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}> <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
<DialogContent className="sm:max-w-md bg-black/90 border-zinc-800"> <DialogContent className="max-w-[95vw] sm:max-w-2xl w-full overflow-y-auto max-h-[90vh] z-[80]">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-white">Customer Details</DialogTitle> <DialogTitle className="text-base">
<DialogDescription className="text-gray-400"> Customer Details
View detailed information about this customer. </DialogTitle>
</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4">
<Card className="bg-black/30 border-zinc-800">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-gray-400">Profile</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<div className="flex justify-between">
<div className="text-sm font-medium text-gray-400">Username</div>
<div className="font-medium text-white">@{selectedCustomer?.telegramUsername || "Unknown"}</div>
</div>
<div className="flex justify-between">
<div className="text-sm font-medium text-gray-400">Telegram ID</div>
<div className="font-medium text-white">{selectedCustomer?.telegramUserId}</div>
</div>
</CardContent>
</Card>
<Card className="bg-black/30 border-zinc-800"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-4">
<CardHeader className="pb-2"> {/* Customer Information */}
<CardTitle className="text-sm font-medium text-gray-400"> <div>
{selectedCustomer?.hasOrders ? "Order Statistics" : "Customer Information"} <div className="mb-4">
</CardTitle> <h3 className="text-sm font-medium mb-2">Customer Information</h3>
</CardHeader> <div className="space-y-3">
<CardContent className="space-y-2"> <div className="flex justify-between items-center text-sm">
{selectedCustomer?.hasOrders ? ( <div className="text-muted-foreground">Username:</div>
<> <div className="font-medium">@{selectedCustomer.telegramUsername || "Unknown"}</div>
<div className="flex justify-between">
<div className="text-sm font-medium text-gray-400">Total Orders</div>
<div className="font-medium text-white">{selectedCustomer.totalOrders}</div>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between items-center text-sm">
<div className="text-sm font-medium text-gray-400">Total Spent</div> <div className="text-muted-foreground">Telegram ID:</div>
<div className="font-medium text-white">{formatCurrency(selectedCustomer.totalSpent)}</div> <div className="font-medium">{selectedCustomer.telegramUserId}</div>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between items-center text-sm">
<div className="text-sm font-medium text-gray-400">First Order</div> <div className="text-muted-foreground">Chat ID:</div>
<div className="font-medium text-white">{formatDate(selectedCustomer.firstOrderDate)}</div> <div className="font-medium">{selectedCustomer.chatId}</div>
</div> </div>
<div className="flex justify-between">
<div className="text-sm font-medium text-gray-400">Last Order</div>
<div className="font-medium text-white">{formatDate(selectedCustomer.lastOrderDate)}</div>
</div> </div>
</>
) : (
<>
<div className="flex justify-between">
<div className="text-sm font-medium text-gray-400">Status</div>
<Badge variant="outline" className="bg-purple-900/30 text-purple-300 border-purple-700">
<UserPlus className="h-3 w-3 mr-1" />
New User
</Badge>
</div> </div>
<div className="flex justify-between">
<div className="text-sm font-medium text-gray-400">Registered</div>
<div className="font-medium text-white">{formatDate(selectedCustomer?.firstOrderDate)}</div>
</div>
<div className="text-center mt-3">
<p className="text-gray-400 text-sm">
This user hasn't placed any orders yet.
</p>
</div>
</>
)}
</CardContent>
</Card>
<div className="flex justify-end space-x-2">
<Button <Button
variant="outline" variant="outline"
size="sm"
className="w-full"
onClick={() => { onClick={() => {
window.open(`https://t.me/${selectedCustomer?.telegramUsername || selectedCustomer?.telegramUserId}`, '_blank'); window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
}} }}
> >
Contact on Telegram <MessageCircle className="h-4 w-4 mr-2" />
Open Telegram Chat
</Button>
</div>
{/* Order Statistics */}
<div>
<h3 className="text-sm font-medium mb-2">Order Statistics</h3>
<div className="bg-background rounded-lg border border-border p-4 space-y-3">
<div className="flex justify-between items-center text-sm">
<div className="text-muted-foreground">Total Orders:</div>
<div className="font-medium">{selectedCustomer.totalOrders}</div>
</div>
<div className="flex justify-between items-center text-sm">
<div className="text-muted-foreground">Total Spent:</div>
<div className="font-medium">{formatCurrency(selectedCustomer.totalSpent)}</div>
</div>
<div className="flex justify-between items-center text-sm">
<div className="text-muted-foreground">First Order:</div>
<div className="font-medium">{formatDate(selectedCustomer.firstOrderDate)}</div>
</div>
<div className="flex justify-between items-center text-sm">
<div className="text-muted-foreground">Last Order:</div>
<div className="font-medium">{formatDate(selectedCustomer.lastOrderDate)}</div>
</div>
</div>
</div>
</div>
{/* Order Status Breakdown */}
<div className="mb-4">
<h3 className="text-sm font-medium mb-2">Order Status Breakdown</h3>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div className="bg-blue-500/10 rounded-lg border border-blue-500/20 p-3">
<p className="text-sm text-muted-foreground">Paid</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p>
</div>
<div className="bg-purple-500/10 rounded-lg border border-purple-500/20 p-3">
<p className="text-sm text-muted-foreground">Acknowledged</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p>
</div>
<div className="bg-amber-500/10 rounded-lg border border-amber-500/20 p-3">
<p className="text-sm text-muted-foreground">Shipped</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p>
</div>
<div className="bg-green-500/10 rounded-lg border border-green-500/20 p-3">
<p className="text-sm text-muted-foreground">Completed</p>
<p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p>
</div>
</div>
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setSelectedCustomer(null)}
>
Close
</Button> </Button>
<Button <Button
onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer?.telegramUserId}`)} onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer.telegramUserId}`)}
> >
<MessageCircle className="h-4 w-4 mr-2" /> <MessageCircle className="h-4 w-4 mr-2" />
Start Chat Start Chat
</Button> </Button>
</div> </DialogFooter>
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
)}
</div> </div>
</Layout> </Layout>
); );