matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up shipped orders dialog

Browse Source
This commit is contained in:
Matt
2024-12-23 14:46:35 -05:00
parent fd0e6d1789
commit 411f01129d
1 changed files with 83 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
dashboard/src/components/dashboard/StatCards.jsx
View File

@@ -159,7 +159,7 @@ const DetailDialog = ({
children children
}) => ( }) => (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden"> <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -368,7 +368,7 @@ const BrandsCategoriesDetails = ({ data }) => {
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="flex flex-col h-[30vh] sm:h-[60vh]"> <div className="flex flex-col h-[40vh] md:h-[60vh]">
<h3 className="text-md font-medium mb-4 flex items-center gap-2"> <h3 className="text-md font-medium mb-4 flex items-center gap-2">
<Star className="h-5 w-5 text-yellow-500" /> <Star className="h-5 w-5 text-yellow-500" />
Brands ({stats?.brands?.total || 0}) Brands ({stats?.brands?.total || 0})
@@ -382,7 +382,7 @@ const BrandsCategoriesDetails = ({ data }) => {
<TableHead className="text-right">Revenue</TableHead> <TableHead className="text-right">Revenue</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody className="max-h-[40vh] md:max-h-[60vh] overflow-auto">
{brandsList.map((brand) => ( {brandsList.map((brand) => (
<TableRow key={brand.name}> <TableRow key={brand.name}>
<TableCell className="font-medium">{brand.name}</TableCell> <TableCell className="font-medium">{brand.name}</TableCell>
@@ -395,7 +395,7 @@ const BrandsCategoriesDetails = ({ data }) => {
</div> </div>
</div> </div>
<div className="flex flex-col h-[30vh] md:h-[60vh]"> <div className="flex flex-col h-[40vh] md:h-[60vh]">
<h3 className="text-md font-medium mb-4 flex items-center gap-2"> <h3 className="text-md font-medium mb-4 flex items-center gap-2">
<Tags className="h-5 w-5 text-indigo-500" /> <Tags className="h-5 w-5 text-indigo-500" />
Categories ({stats?.categories?.total || 0}) Categories ({stats?.categories?.total || 0})
@@ -409,7 +409,7 @@ const BrandsCategoriesDetails = ({ data }) => {
<TableHead className="text-right">Revenue</TableHead> <TableHead className="text-right">Revenue</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody className="max-h-[40vh] md:max-h-[60vh] overflow-auto">
{categoriesList.map((category) => ( {categoriesList.map((category) => (
<TableRow key={category.name}> <TableRow key={category.name}>
<TableCell className="font-medium">{category.name}</TableCell> <TableCell className="font-medium">{category.name}</TableCell>
@@ -432,232 +432,91 @@ const ShippingDetails = ({ data }) => {
const locations = data[0]?.shipping?.locations || {}; const locations = data[0]?.shipping?.locations || {};
const methodStats = data[0]?.shipping?.methodStats || []; const methodStats = data[0]?.shipping?.methodStats || [];
// Custom colors for the pie chart
const COLORS = [
'hsl(171.2 77.2% 53.3%)',
'hsl(200 95% 50%)',
'hsl(280 95% 60%)',
'hsl(340 95% 60%)',
'hsl(40 95% 50%)',
'hsl(120 95% 45%)',
'hsl(240 95% 60%)',
'hsl(30 95% 50%)',
];
// Custom label renderer for pie chart
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }) => {
const RADIAN = Math.PI / 180;
// Extend the radius for label placement
const radius = outerRadius * 1.2;
// Calculate position
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
// Only show label if percentage is greater than 3%
if (percent < 0.03) return null;
return (
<text
x={x}
y={y}
fill="currentColor"
textAnchor={x > cx ? 'start' : 'end'}
dominantBaseline="central"
className="text-xs font-medium"
>
{name} ({(percent * 100).toFixed(1)}%)
</text>
);
};
// Custom legend renderer
const renderLegend = (props) => {
const { payload } = props;
return (
<div className="flex flex-wrap gap-4 justify-center mt-4">
{payload.map((entry, index) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div
className="w-3 h-3 rounded-full"
style={{ backgroundColor: entry.color }}
/>
<span className="text-sm">
{entry.value}: {((entry.payload.value / shippedCount) * 100).toFixed(1)}%
</span>
</div>
))}
</div>
);
};
return ( return (
<div className="space-y-8"> <div className="space-y-8">
<div className="grid grid-cols-2 gap-4"> {/* Shipping Methods */}
<StatCard
title="Total Shipped Orders"
value={shippedCount.toLocaleString()}
description="orders"
colorClass="text-teal-600 dark:text-teal-400"
icon={Package}
/>
<StatCard
title="Shipping Locations"
value={locations.total || 0}
description="unique locations"
colorClass="text-teal-600 dark:text-teal-400"
icon={MapPin}
/>
</div>
<div> <div>
<h3 className="text-lg font-medium mb-4">Shipping Methods Distribution</h3> <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
<div className="h-[400px] w-full"> <Package className="h-5 w-5 text-teal-500" />
<ResponsiveContainer width="100%" height="100%"> Shipping Methods
<PieChart> </h3>
<Pie <div className="rounded-md border">
data={methodStats} <Table>
dataKey="value" <TableHeader>
nameKey="name" <TableRow>
cx="50%" <TableHead className="w-[50%]">Method</TableHead>
cy="45%" <TableHead className="w-[25%] text-right">Orders</TableHead>
outerRadius={120} <TableHead className="w-[25%] text-right">% of Total</TableHead>
labelLine={false} </TableRow>
label={renderCustomizedLabel} </TableHeader>
> <TableBody>
{methodStats.map((entry, index) => ( {methodStats.map((method) => (
<Cell <TableRow key={method.name}>
key={`cell-${index}`} <TableCell className="font-medium">{method.name}</TableCell>
fill={COLORS[index % COLORS.length]} <TableCell className="text-right">{method.value.toLocaleString()}</TableCell>
/> <TableCell className="text-right">
))} {((method.value / shippedCount) * 100).toFixed(1)}%
</Pie> </TableCell>
<Tooltip </TableRow>
formatter={(value, name) => [ ))}
`${value.toLocaleString()} orders (${((value / shippedCount) * 100).toFixed(1)}%)`, </TableBody>
name </Table>
]}
contentStyle={{
backgroundColor: 'hsl(var(--background))',
border: '1px solid hsl(var(--border))',
borderRadius: '0.5rem',
padding: '0.5rem'
}}
/>
<Legend
content={renderLegend}
verticalAlign="bottom"
align="center"
/>
</PieChart>
</ResponsiveContainer>
</div> </div>
</div> </div>
{/* Countries */}
<div> <div>
<h3 className="text-lg font-medium mb-4">Shipping Locations</h3> <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
<div className="space-y-6"> <MapPin className="h-5 w-5 text-teal-500" />
{/* Country summary cards */} Countries ({locations.byCountry?.length || 0})
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> </h3>
{locations.byCountry?.slice(0, 3).map((country) => ( <div className="rounded-md border">
<Card key={country.country} className="p-4"> <Table>
<div className="flex justify-between items-start mb-2"> <TableHeader>
<div> <TableRow>
<h4 className="font-semibold">{country.country}</h4> <TableHead className="w-[50%]">Country</TableHead>
<p className="text-sm text-muted-foreground"> <TableHead className="w-[25%] text-right">Orders</TableHead>
{country.states.length} states/regions <TableHead className="w-[25%] text-right">% of Total</TableHead>
</p> </TableRow>
</div> </TableHeader>
<div className="text-right"> <TableBody>
<div className="font-semibold">{country.count.toLocaleString()}</div> {locations.byCountry?.map((country) => (
<div className="text-sm text-muted-foreground"> <TableRow key={country.country}>
{country.percentage.toFixed(1)}% <TableCell className="font-medium">{country.country}</TableCell>
</div> <TableCell className="text-right">{country.count.toLocaleString()}</TableCell>
</div> <TableCell className="text-right">{country.percentage.toFixed(1)}%</TableCell>
</div> </TableRow>
<div className="h-2 bg-muted rounded-full overflow-hidden"> ))}
<div </TableBody>
className="h-full bg-teal-500" </Table>
style={{ width: `${country.percentage}%` }} </div>
/> </div>
</div>
</Card>
))}
</div>
{/* States grid */} {/* States */}
<div className="rounded-lg border bg-card"> <div>
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-border"> <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
{/* Left column */} <MapPin className="h-5 w-5 text-teal-500" />
<div className="p-4 space-y-3"> States/Regions ({locations.byState?.length || 0})
<div className="flex justify-between items-center text-sm font-medium text-muted-foreground px-2"> </h3>
<span>Top States</span> <div className="rounded-md border">
<span>Orders</span> <Table>
</div> <TableHeader>
{locations.byState?.slice(0, Math.ceil(locations.byState.length / 2)).map((location) => ( <TableRow>
<div <TableHead className="w-[50%]">State</TableHead>
key={`${location.state}-${location.country}`} <TableHead className="w-[25%] text-right">Orders</TableHead>
className="flex justify-between items-center p-2 hover:bg-accent rounded-lg transition-colors" <TableHead className="w-[25%] text-right">% of Total</TableHead>
> </TableRow>
<div className="flex items-center gap-2"> </TableHeader>
<span className="font-medium">{location.state}</span> <TableBody>
<span className="text-xs text-muted-foreground"> {locations.byState?.map((state) => (
{location.country} <TableRow key={state.state}>
</span> <TableCell className="font-medium">{state.state}</TableCell>
</div> <TableCell className="text-right">{state.count.toLocaleString()}</TableCell>
<div className="flex items-center gap-3"> <TableCell className="text-right">{state.percentage.toFixed(1)}%</TableCell>
<span className="font-medium"> </TableRow>
{location.count.toLocaleString()} ))}
</span> </TableBody>
<span className="text-xs text-muted-foreground w-12 text-right"> </Table>
{location.percentage.toFixed(1)}%
</span>
</div>
</div>
))}
</div>
{/* Right column */}
<div className="p-4 space-y-3">
<div className="flex justify-between items-center text-sm font-medium text-muted-foreground px-2">
<span>Additional States</span>
<span>Orders</span>
</div>
{locations.byState?.slice(Math.ceil(locations.byState.length / 2)).map((location) => (
<div
key={`${location.state}-${location.country}`}
className="flex justify-between items-center p-2 hover:bg-accent rounded-lg transition-colors"
>
<div className="flex items-center gap-2">
<span className="font-medium">{location.state}</span>
<span className="text-xs text-muted-foreground">
{location.country}
</span>
</div>
<div className="flex items-center gap-3">
<span className="font-medium">
{location.count.toLocaleString()}
</span>
<span className="text-xs text-muted-foreground w-12 text-right">
{location.percentage.toFixed(1)}%
</span>
</div>
</div>
))}
</div>
</div>
</div>
{/* Summary footer */}
<div className="flex justify-between items-center text-sm text-muted-foreground px-2">
<span>
Showing all {locations.byState?.length || 0} states across {locations.byCountry?.length || 0} countries
</span>
<span>
Total Orders: {shippedCount.toLocaleString()}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1553,7 +1412,7 @@ const StatCards = ({
case 'brands_categories': case 'brands_categories':
return <MemoizedBrandsCategoriesDetails data={[stats]} />; return <MemoizedBrandsCategoriesDetails data={[stats]} />;
case 'shipping': case 'shipping':
return <MemoizedShippingDetails data={[stats]} />; return <MemoizedShippingDetails data={[stats]} timeRange={timeRange} />;
case 'peak_hour': case 'peak_hour':
if (!['today', 'yesterday'].includes(timeRange)) { if (!['today', 'yesterday'].includes(timeRange)) {
return <div className="text-muted-foreground">Peak hour details are only available for single-day periods.</div>; return <div className="text-muted-foreground">Peak hour details are only available for single-day periods.</div>;