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">
<StatCard
title="Total Revenue"
title="Today's Revenue"
value={formatCurrency(stats?.revenue || 0)}
description={
stats?.periodProgress < 100 ? (
@@ -490,7 +490,7 @@ const MiniStatCards = ({
/>
<StatCard
title="Orders"
title="Today's Orders"
value={stats?.orderCount}
description={`${stats?.itemCount} total items`}
trend={orderTrend?.trend}
@@ -508,7 +508,7 @@ const MiniStatCards = ({
/>
<StatCard
title="AOV"
title="Today's AOV"
value={stats?.averageOrderValue?.toFixed(2)}
valuePrefix="$"
description={`${stats?.averageItemsPerOrder?.toFixed(1)} items per order`}
@@ -527,7 +527,7 @@ const MiniStatCards = ({
/>
<StatCard
title="Shipped"
title="Shipped Today"
value={stats?.shipping?.shippedCount || 0}
description={`${stats?.shipping?.locations?.total || 0} locations`}
colorClass="text-orange-200"
@@ -547,11 +547,23 @@ const MiniStatCards = ({
open={!!selectedMetric}
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="h-full w-full p-6">
<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
.split("_")
@@ -572,7 +584,13 @@ const MiniStatCards = ({
/>
{selectedMetric === "orders" && (
<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
</h3>
<MiniSkeletonChart type="bar" />
@@ -584,19 +602,30 @@ const MiniStatCards = ({
) : (
<div className="h-full">
{selectedMetric === "revenue" && (
<RevenueDetails data={detailData.revenue || []} />
<RevenueDetails
data={detailData.revenue || []}
colorScheme="emerald"
/>
)}
{selectedMetric === "orders" && (
<OrdersDetails data={detailData.orders || []} />
<OrdersDetails
data={detailData.orders || []}
colorScheme="blue"
/>
)}
{selectedMetric === "average_order" && (
<AverageOrderDetails
data={detailData.average_order || []}
orderCount={stats.orderCount}
colorScheme="violet"
/>
)}
{selectedMetric === "shipping" && (
<ShippingDetails data={[stats]} timeRange={timeRange} />
<ShippingDetails
data={[stats]}
timeRange={timeRange}
colorScheme="orange"
/>
)}
</div>
)}