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

Finish styling ministatcards

Browse Source
This commit is contained in:
Matt
2025-01-01 21:50:44 -05:00
parent f5d20f92b8
commit a874303023
2 changed files with 65 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -401,15 +401,16 @@ const MiniStatCards = ({
progress={stats?.periodProgress < 100 ? stats.periodProgress : undefined} progress={stats?.periodProgress < 100 ? stats.periodProgress : undefined}
trend={projectionLoading && stats?.periodProgress < 100 ? undefined : revenueTrend?.trend} trend={projectionLoading && stats?.periodProgress < 100 ? undefined : revenueTrend?.trend}
trendValue={revenueTrend?.value ? formatPercentage(revenueTrend.value) : null} trendValue={revenueTrend?.value ? formatPercentage(revenueTrend.value) : null}
colorClass="text-green-200" colorClass="text-emerald-200"
titleClass="text-emerald-100 font-bold text-md"
descriptionClass="text-emerald-200 text-md font-semibold"
icon={DollarSign} icon={DollarSign}
iconColor="text-green-200" iconColor="text-emerald-900"
titleColor="text-green-200" iconBackground="bg-emerald-300"
descriptionColor="text-green-200"
onDetailsClick={() => setSelectedMetric("revenue")} onDetailsClick={() => setSelectedMetric("revenue")}
isLoading={loading || !stats} isLoading={loading || !stats}
variant="mini" variant="mini"
background="bg-gradient-to-br from-green-950 to-green-900 backdrop-blur-md" background="bg-gradient-to-br from-emerald-900 to-emerald-800"
/> />
<StatCard <StatCard
@@ -419,14 +420,15 @@ const MiniStatCards = ({
trend={orderTrend?.trend} trend={orderTrend?.trend}
trendValue={orderTrend?.value ? formatPercentage(orderTrend.value) : null} trendValue={orderTrend?.value ? formatPercentage(orderTrend.value) : null}
colorClass="text-blue-200" colorClass="text-blue-200"
titleClass="text-blue-100 font-bold text-md"
descriptionClass="text-blue-200 text-md font-semibold"
icon={ShoppingCart} icon={ShoppingCart}
iconColor="text-blue-200" iconColor="text-blue-900"
titleColor="text-blue-200" iconBackground="bg-blue-300"
descriptionColor="text-blue-200"
onDetailsClick={() => setSelectedMetric("orders")} onDetailsClick={() => setSelectedMetric("orders")}
isLoading={loading || !stats} isLoading={loading || !stats}
variant="mini" variant="mini"
background="bg-gradient-to-br from-blue-950 to-blue-900 backdrop-blur-md" background="bg-gradient-to-br from-blue-900 to-blue-800"
/> />
<StatCard <StatCard
@@ -437,14 +439,15 @@ const MiniStatCards = ({
trend={aovTrend?.trend} trend={aovTrend?.trend}
trendValue={aovTrend?.value ? formatPercentage(aovTrend.value) : null} trendValue={aovTrend?.value ? formatPercentage(aovTrend.value) : null}
colorClass="text-violet-200" colorClass="text-violet-200"
titleClass="text-violet-100 font-bold text-md"
descriptionClass="text-violet-200 text-md font-semibold"
icon={CircleDollarSign} icon={CircleDollarSign}
iconColor="text-violet-200" iconColor="text-violet-900"
titleColor="text-violet-200" iconBackground="bg-violet-300"
descriptionColor="text-violet-200"
onDetailsClick={() => setSelectedMetric("average_order")} onDetailsClick={() => setSelectedMetric("average_order")}
isLoading={loading || !stats} isLoading={loading || !stats}
variant="mini" variant="mini"
background="bg-gradient-to-br from-violet-950 to-violet-900 backdrop-blur-md" background="bg-gradient-to-br from-violet-900 to-violet-800"
/> />
<StatCard <StatCard
@@ -452,14 +455,15 @@ const MiniStatCards = ({
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"
titleClass="text-orange-100 font-bold text-sm"
descriptionClass="text-orange-200 text-md font-semibold"
icon={Package} icon={Package}
iconColor="text-orange-200" iconColor="text-orange-900"
titleColor="text-orange-200" iconBackground="bg-orange-300"
descriptionColor="text-orange-200"
onDetailsClick={() => setSelectedMetric("shipping")} onDetailsClick={() => setSelectedMetric("shipping")}
isLoading={loading || !stats} isLoading={loading || !stats}
variant="mini" variant="mini"
background="bg-gradient-to-br from-orange-950 to-orange-900 backdrop-blur-md" background="bg-gradient-to-br from-orange-900 to-orange-800"
/> />
</div> </div>

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

@@ -973,14 +973,11 @@ const StatCard = ({
trendSuffix = "", trendSuffix = "",
className = "", className = "",
colorClass = "text-gray-900 dark:text-gray-100", colorClass = "text-gray-900 dark:text-gray-100",
titleClass,
descriptionClass,
icon: Icon, icon: Icon,
iconColor = "text-gray-500", iconColor = "text-gray-500",
titleColor = "text-gray-600 dark:text-gray-300", iconBackground,
descriptionColor = "text-gray-200",
trendColor = {
up: "text-emerald-300",
down: "text-rose-300"
},
onClick, onClick,
info, info,
onDetailsClick, onDetailsClick,
@@ -996,17 +993,17 @@ const StatCard = ({
const titleVariants = { const titleVariants = {
default: "text-sm font-medium text-gray-600 dark:text-gray-300", default: "text-sm font-medium text-gray-600 dark:text-gray-300",
mini: `text-sm font-bold ${titleColor || "text-gray-100"}` mini: titleClass || "text-sm font-bold text-gray-100"
}; };
const valueVariants = { const valueVariants = {
default: "text-2xl font-bold", default: "text-2xl font-bold",
mini: `text-2xl font-extrabold ${colorClass || "text-white"}` mini: "text-3xl font-extrabold"
}; };
const descriptionVariants = { const descriptionVariants = {
default: "text-sm text-muted-foreground", default: "text-sm text-muted-foreground",
mini: `text-sm font-semibold ${descriptionColor || "text-gray-200"}` mini: descriptionClass || "text-sm font-semibold text-gray-200"
}; };
const trendColorVariants = { const trendColorVariants = {
@@ -1015,14 +1012,14 @@ const StatCard = ({
down: "text-rose-600 dark:text-rose-400" down: "text-rose-600 dark:text-rose-400"
}, },
mini: { mini: {
up: trendColor?.up || "text-emerald-300", up: "text-emerald-900",
down: trendColor?.down || "text-rose-300" down: "text-rose-900"
} }
}; };
const iconVariants = { const iconVariants = {
default: iconColor, default: iconColor,
mini: iconColor || "text-white" mini: iconColor || colorClass
}; };
return ( return (
@@ -1046,7 +1043,16 @@ const StatCard = ({
/> />
)} )}
</div> </div>
{Icon && <Icon className={`h-4 w-4 ${iconVariants[variant]}`} />} {Icon && (
<div className={`${variant === 'mini' ? 'relative p-3' : ''}`}>
{variant === 'mini' && iconBackground && (
<div
className={`absolute inset-0 rounded-full ${iconBackground}`}
/>
)}
<Icon className={`h-4 w-4 ${iconVariants[variant]} relative`} />
</div>
)}
</CardHeader> </CardHeader>
<CardContent className="p-4 pt-0"> <CardContent className="p-4 pt-0">
{isLoading ? ( {isLoading ? (
@@ -1057,17 +1063,25 @@ const StatCard = ({
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
<div> <div>
<div className={valueVariants[variant]}> <div className={`${valueVariants[variant]} ${colorClass}`}>
{valuePrefix} {valuePrefix}
{value} {value}
{valueSuffix} {valueSuffix}
</div> </div>
{description && ( {description && (
<div className={`mt-2 items-center gap-2 flex ${descriptionVariants[variant]}`}> <div className={`mt-2 items-center justify-between flex ${descriptionVariants[variant]}`}>
{description} {description}
{trend && ( {trend && (
<span <span
className={`flex items-center gap-0 ${trendColorVariants[variant][trend]}`} className={`flex items-center gap-0 px-1 py-0.5 ${
variant === 'mini' ? 'rounded-full' : ''
} ${
variant === 'mini' ? (
trend === 'up'
? 'text-sm bg-emerald-300 text-emerald-900'
: 'text-sm bg-rose-300 text-rose-900'
) : ''
} ${trendColorVariants[variant][trend]}`}
> >
{trend === "up" ? ( {trend === "up" ? (
<ArrowUp className="w-4 h-4" /> <ArrowUp className="w-4 h-4" />
@@ -1976,6 +1990,7 @@ const StatCards = ({
colorClass="text-green-600 dark:text-green-400" colorClass="text-green-600 dark:text-green-400"
icon={DollarSign} icon={DollarSign}
iconColor="text-green-500" iconColor="text-green-500"
iconBackground="bg-green-500"
onDetailsClick={() => setSelectedMetric("revenue")} onDetailsClick={() => setSelectedMetric("revenue")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -1991,6 +2006,7 @@ const StatCards = ({
colorClass="text-blue-600 dark:text-blue-400" colorClass="text-blue-600 dark:text-blue-400"
icon={ShoppingCart} icon={ShoppingCart}
iconColor="text-blue-500" iconColor="text-blue-500"
iconBackground="bg-blue-500"
onDetailsClick={() => setSelectedMetric("orders")} onDetailsClick={() => setSelectedMetric("orders")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2009,6 +2025,7 @@ const StatCards = ({
colorClass="text-purple-600 dark:text-purple-400" colorClass="text-purple-600 dark:text-purple-400"
icon={CircleDollarSign} icon={CircleDollarSign}
iconColor="text-purple-500" iconColor="text-purple-500"
iconBackground="bg-purple-500"
onDetailsClick={() => setSelectedMetric("average_order")} onDetailsClick={() => setSelectedMetric("average_order")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2020,6 +2037,7 @@ const StatCards = ({
colorClass="text-indigo-600 dark:text-indigo-400" colorClass="text-indigo-600 dark:text-indigo-400"
icon={Tags} icon={Tags}
iconColor="text-indigo-500" iconColor="text-indigo-500"
iconBackground="bg-indigo-500"
onDetailsClick={() => setSelectedMetric("brands_categories")} onDetailsClick={() => setSelectedMetric("brands_categories")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2031,6 +2049,7 @@ const StatCards = ({
colorClass="text-teal-600 dark:text-teal-400" colorClass="text-teal-600 dark:text-teal-400"
icon={Package} icon={Package}
iconColor="text-teal-500" iconColor="text-teal-500"
iconBackground="bg-teal-500"
onDetailsClick={() => setSelectedMetric("shipping")} onDetailsClick={() => setSelectedMetric("shipping")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2048,6 +2067,7 @@ const StatCards = ({
colorClass="text-yellow-600 dark:text-yellow-400" colorClass="text-yellow-600 dark:text-yellow-400"
icon={Clock} icon={Clock}
iconColor="text-yellow-500" iconColor="text-yellow-500"
iconBackground="bg-yellow-500"
onDetailsClick={() => setSelectedMetric("pre_orders")} onDetailsClick={() => setSelectedMetric("pre_orders")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2065,6 +2085,7 @@ const StatCards = ({
colorClass="text-cyan-600 dark:text-cyan-400" colorClass="text-cyan-600 dark:text-cyan-400"
icon={Map} icon={Map}
iconColor="text-cyan-500" iconColor="text-cyan-500"
iconBackground="bg-cyan-500"
onDetailsClick={() => setSelectedMetric("local_pickup")} onDetailsClick={() => setSelectedMetric("local_pickup")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2082,6 +2103,7 @@ const StatCards = ({
colorClass="text-red-600 dark:text-red-400" colorClass="text-red-600 dark:text-red-400"
icon={AlertCircle} icon={AlertCircle}
iconColor="text-red-500" iconColor="text-red-500"
iconBackground="bg-red-500"
onDetailsClick={() => setSelectedMetric("on_hold")} onDetailsClick={() => setSelectedMetric("on_hold")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2098,6 +2120,7 @@ const StatCards = ({
colorClass="text-pink-600 dark:text-pink-400" colorClass="text-pink-600 dark:text-pink-400"
icon={Clock} icon={Clock}
iconColor="text-pink-500" iconColor="text-pink-500"
iconBackground="bg-pink-500"
onDetailsClick={() => setSelectedMetric("peak_hour")} onDetailsClick={() => setSelectedMetric("peak_hour")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2119,6 +2142,7 @@ const StatCards = ({
colorClass="text-emerald-600 dark:text-emerald-400" colorClass="text-emerald-600 dark:text-emerald-400"
icon={TrendingUp} icon={TrendingUp}
iconColor="text-emerald-500" iconColor="text-emerald-500"
iconBackground="bg-emerald-500"
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
)} )}
@@ -2131,6 +2155,7 @@ const StatCards = ({
colorClass="text-orange-600 dark:text-orange-400" colorClass="text-orange-600 dark:text-orange-400"
icon={RefreshCcw} icon={RefreshCcw}
iconColor="text-orange-500" iconColor="text-orange-500"
iconBackground="bg-orange-500"
onDetailsClick={() => setSelectedMetric("refunds")} onDetailsClick={() => setSelectedMetric("refunds")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2143,6 +2168,7 @@ const StatCards = ({
colorClass="text-rose-600 dark:text-rose-400" colorClass="text-rose-600 dark:text-rose-400"
icon={XCircle} icon={XCircle}
iconColor="text-rose-500" iconColor="text-rose-500"
iconBackground="bg-rose-500"
onDetailsClick={() => setSelectedMetric("cancellations")} onDetailsClick={() => setSelectedMetric("cancellations")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />
@@ -2157,6 +2183,7 @@ const StatCards = ({
colorClass="text-violet-600 dark:text-violet-400" colorClass="text-violet-600 dark:text-violet-400"
icon={TrendingUp} icon={TrendingUp}
iconColor="text-violet-500" iconColor="text-violet-500"
iconBackground="bg-violet-500"
onDetailsClick={() => setSelectedMetric("order_range")} onDetailsClick={() => setSelectedMetric("order_range")}
isLoading={loading || !stats} isLoading={loading || !stats}
/> />