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

Standardize card layouts and fix more spacing

Browse Source
This commit is contained in:
Matt
2025-01-02 16:07:58 -05:00
parent 74fb67db18
commit c7b72875a9
4 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dashboard/src/components/dashboard/DateTime.jsx
View File

@@ -148,7 +148,7 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
case code >= 800 && code < 803: case code >= 800 && code < 803:
return <CloudSun className={cn(iconProps, "text-gray-600")} />; return <CloudSun className={cn(iconProps, "text-gray-600")} />;
case code >= 803: case code >= 803:
return <Cloud className={cn(iconProps, "text-gray-600")} />; return <Cloud className={cn(iconProps, "text-gray-200")} />;
default: default:
return <CircleAlert className={cn(iconProps, "text-red-700")} />; return <CircleAlert className={cn(iconProps, "text-red-700")} />;
} }
@@ -347,30 +347,30 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
); );
return ( return (
<div className="flex flex-col space-y-2 items-center w-full transition-opacity duration-300 ${mounted ? 'opacity-100' : 'opacity-0'}"> <div className="flex flex-col items-center w-full transition-opacity duration-300 ${mounted ? 'opacity-100' : 'opacity-0'}">
{/* Time Display */} {/* Time Display */}
<Card className="bg-gradient-to-br from-slate-900 via-sky-800 to-cyan-800 dark:bg-slate-800 px-1 py-2 w-full hover:scale-[1.02] transition-transform duration-300"> <Card className="bg-gradient-to-br mb-[7px] from-slate-900 via-sky-800 to-cyan-800 dark:bg-slate-800 px-1 py-2 w-full hover:scale-[1.02] transition-transform duration-300">
<CardContent className="p-3"> <CardContent className="p-3 h-[106px] flex items-center">
<div className="flex justify-center items-baseline"> <div className="flex justify-center items-baseline w-full">
<div className={`transition-opacity duration-200 ${isTimeChanging ? 'opacity-60' : 'opacity-100'}`}> <div className={`transition-opacity duration-200 ${isTimeChanging ? 'opacity-60' : 'opacity-100'}`}>
<span className="text-6xl font-bold text-white">{hours}</span> <span className="text-7xl font-bold text-white">{hours}</span>
<span className="text-6xl font-bold text-white">:</span> <span className="text-7xl font-bold text-white">:</span>
<span className="text-6xl font-bold text-white">{minutes}</span> <span className="text-7xl font-bold text-white">{minutes}</span>
<span className="text-lg font-medium text-white/90 ml-1">{ampm}</span> <span className="text-xl font-medium text-white/90 ml-1">{ampm}</span>
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* Date and Weather Display */} {/* Date and Weather Display */}
<div className="grid grid-cols-2 gap-2 w-full"> <div className="h-[125px] mb-[6px] grid grid-cols-2 gap-2 w-full">
<Card className="bg-gradient-to-br from-slate-900 via-violet-800 to-purple-800 aspect-square flex items-center justify-center"> <Card className="h-full bg-gradient-to-br from-slate-900 via-violet-800 to-purple-800 flex items-center justify-center">
<CardContent className="h-full p-0"> <CardContent className="h-full p-0">
<div className="flex flex-col items-center justify-center h-full"> <div className="flex flex-col items-center justify-center h-full">
<span className="text-6xl font-bold text-white"> <span className="text-7xl font-bold text-white">
{dateInfo.day} {dateInfo.day}
</span> </span>
<span className="text-xs font-bold text-white/70 mt-2"> <span className="text-sm font-bold text-white mt-2">
{dateInfo.weekday} {dateInfo.weekday}
</span> </span>
</div> </div>
@@ -385,13 +385,13 @@ return (
weather.weather[0]?.id, weather.weather[0]?.id,
datetime.getHours() >= 18 || datetime.getHours() < 6 datetime.getHours() >= 18 || datetime.getHours() < 6
), ),
"flex items-center justify-center aspect-square cursor-pointer hover:brightness-110 transition-all relative" "flex items-center justify-center cursor-pointer hover:brightness-110 transition-all relative"
)}> )}>
<CardContent className="p-3"> <CardContent className="h-full p-3">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{getWeatherIcon(weather.weather[0]?.id, datetime)} {getWeatherIcon(weather.weather[0]?.id, datetime)}
<span className={cn( <span className={cn(
"text-2xl font-bold ml-1 mt-2", "text-3xl font-bold ml-1 mt-2",
getTemperatureColor( getTemperatureColor(
weather.weather[0]?.id, weather.weather[0]?.id,
datetime.getHours() >= 18 || datetime.getHours() < 6 datetime.getHours() >= 18 || datetime.getHours() < 6

14
dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
View File

@@ -110,28 +110,28 @@ const MiniRealtimeAnalytics = () => {
<div className="grid grid-cols-2 gap-2 mt-1 mb-2"> <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
{summaryCard( {summaryCard(
"Last 30 minutes", "Last 30 Minutes",
"Active users", "Active users",
basicData.last30MinUsers, basicData.last30MinUsers,
{ {
colorClass: "text-sky-200", colorClass: "text-sky-200",
titleClass: "text-sky-100 font-bold text-md", titleClass: "text-sky-100 font-bold text-md",
descriptionClass: "text-sky-200 text-md font-semibold", descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
background: "h-[150px] bg-gradient-to-br from-sky-900 to-sky-800", background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
icon: Users, icon: Users,
iconColor: "text-sky-900", iconColor: "text-sky-900",
iconBackground: "bg-sky-300" iconBackground: "bg-sky-300"
} }
)} )}
{summaryCard( {summaryCard(
"Last 5 minutes", "Last 5 Minutes",
"Active users", "Active users",
basicData.last5MinUsers, basicData.last5MinUsers,
{ {
colorClass: "text-sky-200", colorClass: "text-sky-200",
titleClass: "text-sky-100 font-bold text-md", titleClass: "text-sky-100 font-bold text-md",
descriptionClass: "text-sky-200 text-md font-semibold", descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
background: "h-[150px] bg-gradient-to-br from-sky-900 to-sky-800", background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
icon: Activity, icon: Activity,
iconColor: "text-sky-900", iconColor: "text-sky-900",
iconBackground: "bg-sky-300" iconBackground: "bg-sky-300"
@@ -141,7 +141,7 @@ const MiniRealtimeAnalytics = () => {
<Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm"> <Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="h-[200px]"> <div className="h-[230px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<BarChart <BarChart
data={basicData.byMinute} data={basicData.byMinute}

16
dashboard/src/components/dashboard/MiniSalesChart.jsx
View File

@@ -69,7 +69,9 @@ const MiniStatCard = memo(({
trend, trend,
trendValue, trendValue,
onClick, onClick,
active = true active = true,
titleClass = "text-sm font-bold text-gray-100",
descriptionClass = "text-sm font-semibold text-gray-200"
}) => ( }) => (
<Card <Card
className={`w-full ${background || 'bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-md'} ${ className={`w-full ${background || 'bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-md'} ${
@@ -78,7 +80,7 @@ const MiniStatCard = memo(({
onClick={onClick} onClick={onClick}
> >
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-sm font-bold text-gray-100"> <CardTitle className={titleClass}>
{title} {title}
</CardTitle> </CardTitle>
{Icon && ( {Icon && (
@@ -94,8 +96,8 @@ const MiniStatCard = memo(({
<div className={`text-3xl font-extrabold ${colorClass}`}> <div className={`text-3xl font-extrabold ${colorClass}`}>
{value} {value}
</div> </div>
<div className="mt-2 items-center justify-between flex text-sm font-semibold text-gray-200"> <div className="mt-2 items-center justify-between flex">
<span>Prev: {previousValue}</span> <span className={descriptionClass}>Prev: {previousValue}</span>
{trend && ( {trend && (
<span <span
className={`flex items-center gap-0 px-1 py-0.5 rounded-full ${ className={`flex items-center gap-0 px-1 py-0.5 rounded-full ${
@@ -240,6 +242,8 @@ const MiniSalesChart = ({ className = "" }) => {
trend={summaryStats.growth.revenue >= 0 ? "up" : "down"} trend={summaryStats.growth.revenue >= 0 ? "up" : "down"}
trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`} trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
colorClass="text-emerald-200" colorClass="text-emerald-200"
titleClass="text-emerald-100 font-bold text-md"
descriptionClass="text-emerald-200 text-md font-semibold"
icon={PiggyBank} icon={PiggyBank}
iconColor="text-emerald-900" iconColor="text-emerald-900"
iconBackground="bg-emerald-300" iconBackground="bg-emerald-300"
@@ -254,6 +258,8 @@ const MiniSalesChart = ({ className = "" }) => {
trend={summaryStats.growth.orders >= 0 ? "up" : "down"} trend={summaryStats.growth.orders >= 0 ? "up" : "down"}
trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`} trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
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={Truck} icon={Truck}
iconColor="text-blue-900" iconColor="text-blue-900"
iconBackground="bg-blue-300" iconBackground="bg-blue-300"
@@ -280,7 +286,7 @@ const MiniSalesChart = ({ className = "" }) => {
</CardContent> </CardContent>
) : ( ) : (
<CardContent className="p-4"> <CardContent className="p-4">
<div className="h-[200px]"> <div className="h-[230px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart <LineChart
data={data} data={data}

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

@@ -386,7 +386,7 @@ const MiniStatCards = ({
value={formatCurrency(stats?.revenue || 0)} value={formatCurrency(stats?.revenue || 0)}
description={ description={
stats?.periodProgress < 100 ? ( stats?.periodProgress < 100 ? (
<div className="flex items-center gap-1 text-sm"> <div className="flex items-center gap-1">
<span>Proj: </span> <span>Proj: </span>
{projectionLoading ? ( {projectionLoading ? (
<Skeleton className="h-4 w-15" /> <Skeleton className="h-4 w-15" />
@@ -428,7 +428,7 @@ const MiniStatCards = ({
onDetailsClick={() => setSelectedMetric("orders")} onDetailsClick={() => setSelectedMetric("orders")}
isLoading={loading || !stats} isLoading={loading || !stats}
variant="mini" variant="mini"
background="bg-gradient-to-br from-blue-900 to-blue-800" background="h-[150px] bg-gradient-to-br from-blue-900 to-blue-800"
/> />
<StatCard <StatCard
@@ -447,7 +447,7 @@ const MiniStatCards = ({
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-900 to-violet-800" background="h-[150px] bg-gradient-to-br from-violet-900 to-violet-800"
/> />
<StatCard <StatCard
@@ -455,7 +455,7 @@ 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" titleClass="text-orange-100 font-bold text-md"
descriptionClass="text-orange-200 text-md font-semibold" descriptionClass="text-orange-200 text-md font-semibold"
icon={Package} icon={Package}
iconColor="text-orange-900" iconColor="text-orange-900"
@@ -463,7 +463,7 @@ const MiniStatCards = ({
onDetailsClick={() => setSelectedMetric("shipping")} onDetailsClick={() => setSelectedMetric("shipping")}
isLoading={loading || !stats} isLoading={loading || !stats}
variant="mini" variant="mini"
background="bg-gradient-to-br from-orange-900 to-orange-800" background="h-[150px] bg-gradient-to-br from-orange-900 to-orange-800"
/> />
</div> </div>