g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor and relocate customer insights in order details

Browse Source 
Moved the customer insights section from a separate card to the customer history area within the order details page. Simplified the display and removed unused icon imports for a cleaner UI.
This commit is contained in:
NotII
2025-08-31 18:56:52 +01:00
parent a10b9e0094
commit 8e591a3d88
2 changed files with 45 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/dashboard/orders/[id]/page.tsx
View File

@@ -22,7 +22,7 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy, Loader2, RefreshCw, Users, TrendingUp, Calendar, DollarSign } from "lucide-react";
import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy, Loader2, RefreshCw } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
@@ -691,77 +691,7 @@ export default function OrderDetailsPage() {
</Card>
)}
{/* Customer Insights */}
{customerInsights && order?.telegramUsername && (
<Card className="mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="h-5 w-5" />
Customer Insights - @{order.telegramUsername}
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="text-center">
<div className="text-2xl font-bold text-blue-600">
{customerInsights.totalOrders}
</div>
<div className="text-sm text-muted-foreground">Total Orders</div>
<div className="text-xs text-muted-foreground">
{customerInsights.paidOrders} paid
</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">
£{customerInsights.totalSpent.toFixed(2)}
</div>
<div className="text-sm text-muted-foreground">Total Spent</div>
<div className="text-xs text-muted-foreground">
£{customerInsights.averageOrderValue.toFixed(2)} avg
</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-purple-600">
{customerInsights.paymentSuccessRate.toFixed(1)}%
</div>
<div className="text-sm text-muted-foreground">Success Rate</div>
<div className="text-xs text-muted-foreground">
{customerInsights.completionRate.toFixed(1)}% completed
</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-orange-600">
{customerInsights.customerSince}
</div>
<div className="text-sm text-muted-foreground">Days as Customer</div>
<div className="text-xs text-muted-foreground">
{customerInsights.firstOrder ?
new Date(customerInsights.firstOrder).toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
}) : 'N/A'
}
</div>
</div>
</div>
{customerInsights.cancellationRate > 20 && (
<div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
<div className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
<AlertTriangle className="h-4 w-4" />
<span className="text-sm font-medium">
High cancellation rate: {customerInsights.cancellationRate.toFixed(1)}%
</span>
</div>
</div>
)}
</CardContent>
</Card>
)}
<div className="grid grid-cols-3 gap-6">
{/* Left Column - Order Details */}
@@ -862,6 +792,47 @@ export default function OrderDetailsPage() {
</div>
)}
{/* Customer History */}
{customerInsights && (
<div className="space-y-2">
<Label className="text-sm font-medium text-zinc-500">Customer History</Label>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="flex items-center justify-between">
<span className="text-zinc-400">Total Orders</span>
<span className="font-medium">{customerInsights.totalOrders}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-zinc-400">Total Spent</span>
<span className="font-medium">£{customerInsights.totalSpent.toFixed(2)}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-zinc-400">Success Rate</span>
<span className="font-medium">{customerInsights.paymentSuccessRate.toFixed(1)}%</span>
</div>
<div className="flex items-center justify-between">
<span className="text-zinc-400">Customer Since</span>
<span className="font-medium">
{customerInsights.firstOrder ?
new Date(customerInsights.firstOrder).toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
}) : 'N/A'
}
</span>
</div>
</div>
{customerInsights.cancellationRate > 20 && (
<div className="mt-2 p-2 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded text-xs">
<div className="flex items-center gap-1 text-yellow-800 dark:text-yellow-200">
<AlertTriangle className="h-3 w-3" />
<span>High cancellation rate: {customerInsights.cancellationRate.toFixed(1)}%</span>
</div>
</div>
)}
</div>
)}
<div>
<Label className="text-sm font-medium text-zinc-500">PGP Address</Label>
<div className="flex items-start gap-2 mt-1">

4
public/git-info.json
View File

@@ -1,4 +1,4 @@
{
"commitHash": "9cf2265",
"buildTime": "2025-08-31T17:30:00.225Z"
"commitHash": "a10b9e0",
"buildTime": "2025-08-31T17:56:33.446Z"
}