Update page.tsx

app/dashboard/storefront/customers/page.tsx

@@ -35,10 +35,18 @@ import {
   Loader2, 
   Users, 
   ArrowUpDown,
-  MessageCircle
+  MessageCircle,
+  UserPlus,
+  MoreHorizontal
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
 
 export default function CustomerManagementPage() {
   const router = useRouter();
@@ -70,6 +78,12 @@ export default function CustomerManagementPage() {
             ? a.totalSpent - b.totalSpent 
             : b.totalSpent - a.totalSpent;
         } else if (sortConfig.column === "lastOrderDate") {
+          // Handle null lastOrderDate values
+          if (!a.lastOrderDate && !b.lastOrderDate) return 0;
+          if (!a.lastOrderDate) return sortConfig.direction === "asc" ? -1 : 1;
+          if (!b.lastOrderDate) return sortConfig.direction === "asc" ? 1 : -1;
+          
+          // Both have valid dates
           return sortConfig.direction === "asc" 
             ? new Date(a.lastOrderDate).getTime() - new Date(b.lastOrderDate).getTime() 
             : new Date(b.lastOrderDate).getTime() - new Date(a.lastOrderDate).getTime();
@@ -119,13 +133,18 @@ export default function CustomerManagementPage() {
   };
 
   // Format date without time
-  const formatDate = (dateString: string) => {
+  const formatDate = (dateString: string | null | undefined) => {
-    const date = new Date(dateString);
+    if (!dateString) return "N/A";
-    return new Intl.DateTimeFormat('en-GB', {
+    try {
-      day: '2-digit',
+      const date = new Date(dateString);
-      month: 'short',
+      return new Intl.DateTimeFormat('en-GB', {
-      year: 'numeric'
+        day: '2-digit',
-    }).format(date);
+        month: 'short',
+        year: 'numeric'
+      }).format(date);
+    } catch (error) {
+      return "N/A";
+    }
   };
 
   return (
@@ -206,11 +225,19 @@ export default function CustomerManagementPage() {
                   {customers.map((customer) => (
                     <TableRow 
                       key={customer.userId}
-                      className="cursor-pointer"
+                      className={`cursor-pointer ${!customer.hasOrders ? "bg-black/30" : ""}`}
                       onClick={() => setSelectedCustomer(customer)}
                     >
                       <TableCell>
-                        <div className="font-medium text-gray-100">@{customer.telegramUsername || "Unknown"}</div>
+                        <div className="font-medium text-gray-100">
+                          @{customer.telegramUsername || "Unknown"}
+                          {!customer.hasOrders && (
+                            <Badge variant="outline" className="ml-2 bg-purple-900/30 text-purple-300 border-purple-700">
+                              <UserPlus className="h-3 w-3 mr-1" />
+                              New
+                            </Badge>
+                          )}
+                        </div>
                         <div className="text-sm text-gray-400">ID: {customer.telegramUserId}</div>
                       </TableCell>
                       <TableCell>
@@ -220,17 +247,23 @@ export default function CustomerManagementPage() {
                         {formatCurrency(customer.totalSpent)}
                       </TableCell>
                       <TableCell>
-                        <div className="flex space-x-1">
+                        {customer.hasOrders ? (
-                          <Badge className="bg-blue-500 text-white hover:bg-blue-600">
+                          <div className="flex space-x-1">
-                            {customer.ordersByStatus.paid} Paid
+                            <Badge className="bg-blue-500 text-white hover:bg-blue-600">
+                              {customer.ordersByStatus.paid} Paid
+                            </Badge>
+                            <Badge className="bg-green-500 text-white hover:bg-green-600">
+                              {customer.ordersByStatus.completed} Completed
+                            </Badge>
+                            <Badge className="bg-amber-500 text-white hover:bg-amber-600">
+                              {customer.ordersByStatus.shipped} Shipped
+                            </Badge>
+                          </div>
+                        ) : (
+                          <Badge variant="outline" className="bg-gray-800 text-gray-300 border-gray-700">
+                            No orders yet
                           </Badge>
-                          <Badge className="bg-green-500 text-white hover:bg-green-600">
+                        )}
-                            {customer.ordersByStatus.completed} Completed
-                          </Badge>
-                          <Badge className="bg-amber-500 text-white hover:bg-amber-600">
-                            {customer.ordersByStatus.shipped} Shipped
-                          </Badge>
-                        </div>
                       </TableCell>
                     </TableRow>
                   ))}
@@ -253,6 +286,29 @@ export default function CustomerManagementPage() {
                 <ChevronLeft className="h-4 w-4 mr-1" />
                 Previous
               </Button>
+              
+              {totalPages > 2 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <span className="sr-only">Go to page</span>
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="center" className="bg-black/90 border-zinc-800 max-h-60 overflow-y-auto">
+                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
+                      <DropdownMenuItem
+                        key={pageNum}
+                        onClick={() => handlePageChange(pageNum)}
+                        className={`cursor-pointer ${pageNum === page ? 'bg-zinc-800 text-white' : 'text-gray-300'}`}
+                      >
+                        Page {pageNum}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              
               <Button
                 variant="outline"
                 size="sm"
@@ -268,105 +324,96 @@ export default function CustomerManagementPage() {
 
         {/* Customer Details Dialog */}
         <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
-          <DialogContent className="max-w-2xl bg-gray-900 text-white border-zinc-800">
+          <DialogContent className="sm:max-w-md bg-black/90 border-zinc-800">
             <DialogHeader>
-              <DialogTitle className="text-xl font-semibold flex items-center text-white">
+              <DialogTitle className="text-white">Customer Details</DialogTitle>
-                <Users className="h-5 w-5 mr-2" />
-                Customer Details
-              </DialogTitle>
               <DialogDescription className="text-gray-400">
-                Details and order statistics for this customer
+                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>
+                  </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>
 
-            {selectedCustomer && (
+              <Card className="bg-black/30 border-zinc-800">
-              <div className="space-y-4">
+                <CardHeader className="pb-2">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <CardTitle className="text-sm font-medium text-gray-400">
-                  <Card className="bg-gray-800 border-zinc-800">
+                    {selectedCustomer?.hasOrders ? "Order Statistics" : "Customer Information"}
-                    <CardHeader className="pb-2">
+                  </CardTitle>
-                      <CardTitle className="text-md font-medium text-white">Customer Information</CardTitle>
+                </CardHeader>
-                    </CardHeader>
+                <CardContent className="space-y-2">
-                    <CardContent className="space-y-2">
+                  {selectedCustomer?.hasOrders ? (
-                      <div className="flex justify-between text-sm">
+                    <>
-                        <div className="text-gray-400">Username:</div>
+                      <div className="flex justify-between">
-                        <div className="font-medium text-white">@{selectedCustomer.telegramUsername || "Unknown"}</div>
+                        <div className="text-sm font-medium text-gray-400">Total Orders</div>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <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-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 border-zinc-800 text-gray-300 hover:text-white hover:bg-gray-700"
-                          onClick={() => {
-                            window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
-                          }}
-                        >
-                          <MessageCircle className="h-3.5 w-3.5 mr-1" />
-                          Open Chat
-                        </Button>
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card className="bg-gray-800 border-zinc-800">
-                    <CardHeader className="pb-2">
-                      <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-400">Total Orders:</div>
                         <div className="font-medium text-white">{selectedCustomer.totalOrders}</div>
                       </div>
-                      <div className="flex justify-between text-sm">
+                      <div className="flex justify-between">
-                        <div className="text-gray-400">Total Spent:</div>
+                        <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 text-sm">
+                      <div className="flex justify-between">
-                        <div className="text-gray-400">First Order:</div>
+                        <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 text-sm">
+                      <div className="flex justify-between">
-                        <div className="text-gray-400">Last Order:</div>
+                        <div className="text-sm font-medium text-gray-400">Last Order</div>
                         <div className="font-medium text-white">{formatDate(selectedCustomer.lastOrderDate)}</div>
                       </div>
-                    </CardContent>
+                    </>
-                  </Card>
+                  ) : (
-                </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>
 
-                <Card className="bg-gray-800 border-zinc-800">
+              <div className="flex justify-end space-x-2">
-                  <CardHeader className="pb-2">
+                <Button 
-                    <CardTitle className="text-md font-medium text-white">Order Status Breakdown</CardTitle>
+                  variant="outline"
-                  </CardHeader>
+                  onClick={() => {
-                  <CardContent>
+                    window.open(`https://t.me/${selectedCustomer?.telegramUsername || selectedCustomer?.telegramUserId}`, '_blank');
-                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                  }}
-                      <div className="bg-blue-500/20 p-3 rounded-md border border-blue-500/30">
+                >
-                        <p className="text-sm text-blue-300">Paid</p>
+                  Contact on Telegram
-                        <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.paid}</p>
+                </Button>
-                      </div>
+                <Button 
-                      <div className="bg-purple-500/20 p-3 rounded-md border border-purple-500/30">
+                  onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer?.telegramUserId}`)}
-                        <p className="text-sm text-purple-300">Acknowledged</p>
+                >
-                        <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.acknowledged}</p>
+                  <MessageCircle className="h-4 w-4 mr-2" />
-                      </div>
+                  Start Chat
-                      <div className="bg-amber-500/20 p-3 rounded-md border border-amber-500/30">
+                </Button>
-                        <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-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>
-                </Card>
               </div>
-            )}
+            </div>
           </DialogContent>
         </Dialog>
       </div>