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

Restyle dialogs and fix card titles

Browse Source
This commit is contained in:
Matt
2025-01-02 17:06:03 -05:00
parent c9df4b5fe1
commit 375ef6860b
1 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
dashboard/src/components/dashboard/MiniStatCards.jsx
View File

@@ -458,7 +458,7 @@ const MiniStatCards = ({
<> <>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
<StatCard <StatCard
title="Total Revenue" title="Today's Revenue"
value={formatCurrency(stats?.revenue || 0)} value={formatCurrency(stats?.revenue || 0)}
description={ description={
stats?.periodProgress < 100 ? ( stats?.periodProgress < 100 ? (
@@ -490,7 +490,7 @@ const MiniStatCards = ({
/> />
<StatCard <StatCard
title="Orders" title="Today's Orders"
value={stats?.orderCount} value={stats?.orderCount}
description={`${stats?.itemCount} total items`} description={`${stats?.itemCount} total items`}
trend={orderTrend?.trend} trend={orderTrend?.trend}
@@ -508,7 +508,7 @@ const MiniStatCards = ({
/> />
<StatCard <StatCard
title="AOV" title="Today's AOV"
value={stats?.averageOrderValue?.toFixed(2)} value={stats?.averageOrderValue?.toFixed(2)}
valuePrefix="$" valuePrefix="$"
description={`${stats?.averageItemsPerOrder?.toFixed(1)} items per order`} description={`${stats?.averageItemsPerOrder?.toFixed(1)} items per order`}
@@ -527,7 +527,7 @@ const MiniStatCards = ({
/> />
<StatCard <StatCard
title="Shipped" title="Shipped Today"
value={stats?.shipping?.shippedCount || 0} value={stats?.shipping?.shippedCount || 0}
description={`${stats?.shipping?.locations?.total || 0} locations`} description={`${stats?.shipping?.locations?.total || 0} locations`}
colorClass="text-orange-200" colorClass="text-orange-200"
@@ -547,11 +547,23 @@ const MiniStatCards = ({
open={!!selectedMetric} open={!!selectedMetric}
onOpenChange={() => setSelectedMetric(null)} onOpenChange={() => setSelectedMetric(null)}
> >
<DialogContent className="w-[80vw] h-[80vh] max-w-none p-0"> <DialogContent className={`w-[80vw] h-[80vh] max-w-none p-0 ${
selectedMetric === 'revenue' ? 'bg-emerald-50 dark:bg-emerald-950/30' :
selectedMetric === 'orders' ? 'bg-blue-50 dark:bg-blue-950/30' :
selectedMetric === 'average_order' ? 'bg-violet-50 dark:bg-violet-950/30' :
selectedMetric === 'shipping' ? 'bg-orange-50 dark:bg-orange-950/30' :
'bg-white dark:bg-gray-950'
} backdrop-blur-md border-none`}>
<div className="transform scale-[2] origin-top-left h-[40vh] w-[40vw]"> <div className="transform scale-[2] origin-top-left h-[40vh] w-[40vw]">
<div className="h-full w-full p-6"> <div className="h-full w-full p-6">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle className={`text-2xl font-bold ${
selectedMetric === 'revenue' ? 'text-emerald-900 dark:text-emerald-100' :
selectedMetric === 'orders' ? 'text-blue-900 dark:text-blue-100' :
selectedMetric === 'average_order' ? 'text-violet-900 dark:text-violet-100' :
selectedMetric === 'shipping' ? 'text-orange-900 dark:text-orange-100' :
'text-gray-900 dark:text-gray-100'
}`}>
{selectedMetric {selectedMetric
? `${selectedMetric ? `${selectedMetric
.split("_") .split("_")
@@ -572,7 +584,13 @@ const MiniStatCards = ({
/> />
{selectedMetric === "orders" && ( {selectedMetric === "orders" && (
<div className="mt-8"> <div className="mt-8">
<h3 className="text-lg font-medium mb-4"> <h3 className={`text-lg font-medium mb-4 ${
selectedMetric === 'revenue' ? 'text-emerald-900 dark:text-emerald-200' :
selectedMetric === 'orders' ? 'text-blue-900 dark:text-blue-200' :
selectedMetric === 'average_order' ? 'text-violet-900 dark:text-violet-200' :
selectedMetric === 'shipping' ? 'text-orange-900 dark:text-orange-200' :
'text-gray-900 dark:text-gray-200'
}`}>
Hourly Distribution Hourly Distribution
</h3> </h3>
<MiniSkeletonChart type="bar" /> <MiniSkeletonChart type="bar" />
@@ -584,19 +602,30 @@ const MiniStatCards = ({
) : ( ) : (
<div className="h-full"> <div className="h-full">
{selectedMetric === "revenue" && ( {selectedMetric === "revenue" && (
<RevenueDetails data={detailData.revenue || []} /> <RevenueDetails
data={detailData.revenue || []}
colorScheme="emerald"
/>
)} )}
{selectedMetric === "orders" && ( {selectedMetric === "orders" && (
<OrdersDetails data={detailData.orders || []} /> <OrdersDetails
data={detailData.orders || []}
colorScheme="blue"
/>
)} )}
{selectedMetric === "average_order" && ( {selectedMetric === "average_order" && (
<AverageOrderDetails <AverageOrderDetails
data={detailData.average_order || []} data={detailData.average_order || []}
orderCount={stats.orderCount} orderCount={stats.orderCount}
colorScheme="violet"
/> />
)} )}
{selectedMetric === "shipping" && ( {selectedMetric === "shipping" && (
<ShippingDetails data={[stats]} timeRange={timeRange} /> <ShippingDetails
data={[stats]}
timeRange={timeRange}
colorScheme="orange"
/>
)} )}
</div> </div>
)} )}