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:12:05 +01:00
parent 2745656768
commit dba321ea71
1 changed files with 151 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 date = new Date(dateString);
return new Intl.DateTimeFormat('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
}).format(date);
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'
}).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">
<Badge className="bg-blue-500 text-white hover:bg-blue-600">
{customer.ordersByStatus.paid} Paid
{customer.hasOrders ? (
<div className="flex space-x-1">
<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">
<Users className="h-5 w-5 mr-2" />
Customer Details
</DialogTitle>
<DialogTitle className="text-white">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 && (
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-gray-800 border-zinc-800">
<CardHeader className="pb-2">
<CardTitle className="text-md font-medium text-white">Customer Information</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<div className="flex justify-between text-sm">
<div className="text-gray-400">Username:</div>
<div className="font-medium text-white">@{selectedCustomer.telegramUsername || "Unknown"}</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>
<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 text-sm">
<div className="text-gray-400">Total Spent:</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 text-sm">
<div className="text-gray-400">First Order:</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 text-sm">
<div className="text-gray-400">Last Order:</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>
</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">
<CardHeader className="pb-2">
<CardTitle className="text-md font-medium text-white">Order Status Breakdown</CardTitle>
</CardHeader>
<CardContent>
<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>
<p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.paid}</p>
</div>
<div className="bg-purple-500/20 p-3 rounded-md border border-purple-500/30">
<p className="text-sm text-purple-300">Acknowledged</p>
<p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.acknowledged}</p>
</div>
<div className="bg-amber-500/20 p-3 rounded-md border border-amber-500/30">
<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 className="flex justify-end space-x-2">
<Button
variant="outline"
onClick={() => {
window.open(`https://t.me/${selectedCustomer?.telegramUsername || selectedCustomer?.telegramUserId}`, '_blank');
}}
>
Contact on Telegram
</Button>
<Button
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>
</div>