diff --git a/app/dashboard/storefront/customers/page.tsx b/app/dashboard/storefront/customers/page.tsx index 4057cee..8b8a02c 100644 --- a/app/dashboard/storefront/customers/page.tsx +++ b/app/dashboard/storefront/customers/page.tsx @@ -49,9 +49,7 @@ import { DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, -} from "@/components/ui/dropdown-menu"; - -import type { Metadata, Viewport } from 'next'; +} from "@/components/ui/dropdown-menu"; export default function CustomerManagementPage() { const router = useRouter(); @@ -139,374 +137,374 @@ export default function CustomerManagementPage() { } }, [searchQuery, customers]); - const handlePageChange = (newPage: number) => { - setPage(newPage); - }; + const handlePageChange = (newPage: number) => { + setPage(newPage); + }; - const handleItemsPerPageChange = (value: string) => { - setItemsPerPage(parseInt(value, 10)); - setPage(1); - }; + const handleItemsPerPageChange = (value: string) => { + setItemsPerPage(parseInt(value, 10)); + setPage(1); + }; - const handleSort = (column: "totalOrders" | "totalSpent" | "lastOrderDate") => { - setSortConfig(prev => ({ - column, - direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc" - })); - }; + const handleSort = (column: "totalOrders" | "totalSpent" | "lastOrderDate") => { + setSortConfig(prev => ({ + column, + direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc" + })); + }; - const clearSearch = () => { - setSearchQuery(""); - }; + const clearSearch = () => { + setSearchQuery(""); + }; - const formatDate = (dateString: string | null | undefined) => { - if (!dateString) return "N/A"; - try { - const date = new Date(dateString); - return new Intl.DateTimeFormat('en-GB', { - day: '2-digit', - month: 'short', - year: 'numeric', - hour: '2-digit', - minute: '2-digit' - }).format(date); - } catch (error) { - return "N/A"; - } - }; + const formatDate = (dateString: string | null | undefined) => { + if (!dateString) return "N/A"; + try { + const date = new Date(dateString); + return new Intl.DateTimeFormat('en-GB', { + day: '2-digit', + month: 'short', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }).format(date); + } catch (error) { + return "N/A"; + } + }; - return ( - -
-
-

- - Customer Management -

-
- -
-
-
-
-
Show:
- -
+ return ( + +
+
+

+ + Customer Management +

-
-
- -
- setSearchQuery(e.target.value)} - className="pl-10 pr-10 py-2 w-full bg-black/40 border-zinc-700 text-white" - /> - {searchQuery && ( - - )} -
- -
- {loading - ? "Loading..." - : searchQuery - ? `Found ${filteredCustomers.length} matching customers` - : `Showing ${filteredCustomers.length} of ${totalPages * itemsPerPage} customers`} -
-
- - {loading ? ( -
- -
- ) : filteredCustomers.length === 0 ? ( -
- -

- {searchQuery ? "No customers matching your search" : "No customers found"} -

-

- {searchQuery - ? "Try a different search term or clear the search" - : "Once you have customers placing orders, they will appear here."} -

- {searchQuery && ( - - )} -
- ) : ( -
- - - - Customer - handleSort("totalOrders")} - > -
- Orders - -
- - handleSort("totalSpent")} - > -
- Total Spent - -
- - handleSort("lastOrderDate")} - > -
- Last Order - -
- - Status - - - - {filteredCustomers.map((customer) => ( - setSelectedCustomer(customer)} - > - -
- @{customer.telegramUsername || "Unknown"} - {!customer.hasOrders && ( - - - New - - )} -
-
ID: {customer.telegramUserId}
- - - {customer.totalOrders} - - - {formatCurrency(customer.totalSpent)} - - - {customer.lastOrderDate ? formatDate(customer.lastOrderDate) : "N/A"} - - - {customer.hasOrders ? ( -
- - {customer.ordersByStatus.paid} Paid - - - {customer.ordersByStatus.completed} Completed - - - {customer.ordersByStatus.shipped} Shipped - -
- ) : ( - - No orders yet - - )} - - - ))} - -
-
- )} - -
-
- Page {page} of {totalPages} -
-
- - - {totalPages > 2 && ( - - - - - - {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => ( - handlePageChange(pageNum)} - className={`cursor-pointer ${pageNum === page ? 'bg-zinc-800 text-white' : 'text-gray-300'}`} - > - Page {pageNum} - - ))} - - - )} - - -
-
-
- - {/* Customer Details Dialog */} - {selectedCustomer && ( - !open && setSelectedCustomer(null)}> - - - - Customer Details - - - -
- {/* Customer Information */} -
-
-

Customer Information

-
-
-
Username:
-
@{selectedCustomer.telegramUsername || "Unknown"}
-
-
-
Telegram ID:
-
{selectedCustomer.telegramUserId}
-
-
-
Chat ID:
-
{selectedCustomer.chatId}
-
-
+
+
+
+
+
Show:
+
- -
+ +
+
+ +
+ setSearchQuery(e.target.value)} + className="pl-10 pr-10 py-2 w-full bg-black/40 border-zinc-700 text-white" + /> + {searchQuery && ( + + )} +
+ +
+ {loading + ? "Loading..." + : searchQuery + ? `Found ${filteredCustomers.length} matching customers` + : `Showing ${filteredCustomers.length} of ${totalPages * itemsPerPage} customers`} +
+
+ + {loading ? ( +
+ +
+ ) : filteredCustomers.length === 0 ? ( +
+ +

+ {searchQuery ? "No customers matching your search" : "No customers found"} +

+

+ {searchQuery + ? "Try a different search term or clear the search" + : "Once you have customers placing orders, they will appear here."} +

+ {searchQuery && ( + + )} +
+ ) : ( +
+ + + + Customer + handleSort("totalOrders")} + > +
+ Orders + +
+ + handleSort("totalSpent")} + > +
+ Total Spent + +
+ + handleSort("lastOrderDate")} + > +
+ Last Order + +
+ + Status + + + + {filteredCustomers.map((customer) => ( + setSelectedCustomer(customer)} + > + +
+ @{customer.telegramUsername || "Unknown"} + {!customer.hasOrders && ( + + + New + + )} +
+
ID: {customer.telegramUserId}
+ + + {customer.totalOrders} + + + {formatCurrency(customer.totalSpent)} + + + {customer.lastOrderDate ? formatDate(customer.lastOrderDate) : "N/A"} + + + {customer.hasOrders ? ( +
+ + {customer.ordersByStatus.paid} Paid + + + {customer.ordersByStatus.completed} Completed + + + {customer.ordersByStatus.shipped} Shipped + +
+ ) : ( + + No orders yet + + )} + + + ))} + +
+
+ )} + +
+
+ Page {page} of {totalPages} +
+
+ + + {totalPages > 2 && ( + + + + + + {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => ( + handlePageChange(pageNum)} + className={`cursor-pointer ${pageNum === page ? 'bg-zinc-800 text-white' : 'text-gray-300'}`} + > + Page {pageNum} + + ))} + + + )} + +
+
+
- {/* Order Statistics */} -
-

Order Statistics

-
-
-
Total Orders:
-
{selectedCustomer.totalOrders}
-
-
-
Total Spent:
-
{formatCurrency(selectedCustomer.totalSpent)}
-
-
-
First Order:
-
- {formatDate(selectedCustomer.firstOrderDate)} + {/* Customer Details Dialog */} + {selectedCustomer && ( + !open && setSelectedCustomer(null)}> + + + + Customer Details + + + +
+ {/* Customer Information */} +
+
+

Customer Information

+
+
+
Username:
+
@{selectedCustomer.telegramUsername || "Unknown"}
+
+
+
Telegram ID:
+
{selectedCustomer.telegramUserId}
+
+
+
Chat ID:
+
{selectedCustomer.chatId}
+
+
+ +
-
-
Last Order:
-
- {formatDate(selectedCustomer.lastOrderDate)} + + {/* Order Statistics */} +
+

Order Statistics

+
+
+
Total Orders:
+
{selectedCustomer.totalOrders}
+
+
+
Total Spent:
+
{formatCurrency(selectedCustomer.totalSpent)}
+
+
+
First Order:
+
+ {formatDate(selectedCustomer.firstOrderDate)} +
+
+
+
Last Order:
+
+ {formatDate(selectedCustomer.lastOrderDate)} +
+
-
-
- {/* Order Status Breakdown */} -
-

Order Status Breakdown

-
-
-

Paid

-

{selectedCustomer.ordersByStatus.paid}

+ {/* Order Status Breakdown */} +
+

Order Status Breakdown

+
+
+

Paid

+

{selectedCustomer.ordersByStatus.paid}

+
+
+

Acknowledged

+

{selectedCustomer.ordersByStatus.acknowledged}

+
+
+

Shipped

+

{selectedCustomer.ordersByStatus.shipped}

+
+
+

Completed

+

{selectedCustomer.ordersByStatus.completed}

+
+
-
-

Acknowledged

-

{selectedCustomer.ordersByStatus.acknowledged}

-
-
-

Shipped

-

{selectedCustomer.ordersByStatus.shipped}

-
-
-

Completed

-

{selectedCustomer.ordersByStatus.completed}

-
-
-
- - - - - -
- )} -
- - ); -} \ No newline at end of file + + + + + +
+ )} +
+ + ); + } \ No newline at end of file