From 27c966f92c24367549f2547c668fd665e4a64079 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Wed, 2 Apr 2025 15:24:29 +0100
Subject: [PATCH] Update page.tsx

---
 app/dashboard/storefront/customers/page.tsx | 177 +++++++++++---------
 1 file changed, 96 insertions(+), 81 deletions(-)

diff --git a/app/dashboard/storefront/customers/page.tsx b/app/dashboard/storefront/customers/page.tsx
index 286ba93..bfbc53e 100644
--- a/app/dashboard/storefront/customers/page.tsx
+++ b/app/dashboard/storefront/customers/page.tsx
@@ -27,6 +27,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
+  DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { 
@@ -323,99 +324,113 @@ export default function CustomerManagementPage() {
         </div>
 
         {/* Customer Details Dialog */}
-        <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
-          <DialogContent className="sm:max-w-md bg-black/90 border-zinc-800">
-            <DialogHeader>
-              <DialogTitle className="text-white">Customer Details</DialogTitle>
-              <DialogDescription className="text-gray-400">
-                View detailed information about this customer.
-              </DialogDescription>
-            </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>
+        {selectedCustomer && (
+          <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
+            <DialogContent className="max-w-[95vw] sm:max-w-2xl w-full overflow-y-auto max-h-[90vh] z-[80]">
+              <DialogHeader>
+                <DialogTitle className="text-base">
+                  Customer Details
+                </DialogTitle>
+              </DialogHeader>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-4">
+                {/* Customer Information */}
+                <div>
+                  <div className="mb-4">
+                    <h3 className="text-sm font-medium mb-2">Customer Information</h3>
+                    <div className="space-y-3">
+                      <div className="flex justify-between items-center text-sm">
+                        <div className="text-muted-foreground">Username:</div>
+                        <div className="font-medium">@{selectedCustomer.telegramUsername || "Unknown"}</div>
+                      </div>
+                      <div className="flex justify-between items-center text-sm">
+                        <div className="text-muted-foreground">Telegram ID:</div>
+                        <div className="font-medium">{selectedCustomer.telegramUserId}</div>
+                      </div>
+                      <div className="flex justify-between items-center text-sm">
+                        <div className="text-muted-foreground">Chat ID:</div>
+                        <div className="font-medium">{selectedCustomer.chatId}</div>
+                      </div>
+                    </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>
+                  
+                  <Button 
+                    variant="outline" 
+                    size="sm" 
+                    className="w-full"
+                    onClick={() => {
+                      window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
+                    }}
+                  >
+                    <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>
-                </CardContent>
-              </Card>
+                </div>
+              </div>
 
-              <Card className="bg-black/30 border-zinc-800">
-                <CardHeader className="pb-2">
-                  <CardTitle className="text-sm font-medium text-gray-400">
-                    {selectedCustomer?.hasOrders ? "Order Statistics" : "Customer Information"}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {selectedCustomer?.hasOrders ? (
-                    <>
-                      <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 className="flex justify-between">
-                        <div className="text-sm font-medium text-gray-400">Total Spent</div>
-                        <div className="font-medium text-white">{formatCurrency(selectedCustomer.totalSpent)}</div>
-                      </div>
-                      <div className="flex justify-between">
-                        <div className="text-sm font-medium text-gray-400">First Order</div>
-                        <div className="font-medium text-white">{formatDate(selectedCustomer.firstOrderDate)}</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 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 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>
+              {/* 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>
 
-              <div className="flex justify-end space-x-2">
+              <DialogFooter>
                 <Button 
-                  variant="outline"
-                  onClick={() => {
-                    window.open(`https://t.me/${selectedCustomer?.telegramUsername || selectedCustomer?.telegramUserId}`, '_blank');
-                  }}
+                  variant="outline" 
+                  onClick={() => setSelectedCustomer(null)}
                 >
-                  Contact on Telegram
+                  Close
                 </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" />
                   Start Chat
                 </Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        )}
       </div>
     </Layout>
   );