From c7b72875a99a35fdbe2c4bf91ee5c141bba5828e Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Thu, 2 Jan 2025 16:07:58 -0500
Subject: [PATCH] Standardize card layouts and fix more spacing

---
 .../src/components/dashboard/DateTime.jsx     | 32 +++++++++----------
 .../dashboard/MiniRealtimeAnalytics.jsx       | 14 ++++----
 .../components/dashboard/MiniSalesChart.jsx   | 16 +++++++---
 .../components/dashboard/MiniStatCards.jsx    | 10 +++---
 4 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/dashboard/src/components/dashboard/DateTime.jsx b/dashboard/src/components/dashboard/DateTime.jsx
index 0dae73e..648c154 100644
--- a/dashboard/src/components/dashboard/DateTime.jsx
+++ b/dashboard/src/components/dashboard/DateTime.jsx
@@ -148,7 +148,7 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
       case code >= 800 && code < 803:
         return <CloudSun className={cn(iconProps, "text-gray-600")} />;
       case code >= 803:
-        return <Cloud className={cn(iconProps, "text-gray-600")} />;
+        return <Cloud className={cn(iconProps, "text-gray-200")} />;
       default:
         return <CircleAlert className={cn(iconProps, "text-red-700")} />;
     }
@@ -347,30 +347,30 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
 );
 
 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 */}
-    <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">
-      <CardContent className="p-3">
-        <div className="flex justify-center items-baseline">
+    <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 h-[106px] flex items-center">
+        <div className="flex justify-center items-baseline w-full">
           <div className={`transition-opacity duration-200 ${isTimeChanging ? 'opacity-60' : 'opacity-100'}`}>
-            <span className="text-6xl font-bold text-white">{hours}</span>
-            <span className="text-6xl font-bold text-white">:</span>
-            <span className="text-6xl font-bold text-white">{minutes}</span>
-            <span className="text-lg font-medium text-white/90 ml-1">{ampm}</span>
+            <span className="text-7xl font-bold text-white">{hours}</span>
+            <span className="text-7xl font-bold text-white">:</span>
+            <span className="text-7xl font-bold text-white">{minutes}</span>
+            <span className="text-xl font-medium text-white/90 ml-1">{ampm}</span>
           </div>
         </div>
       </CardContent>
     </Card>
 
     {/* Date and Weather Display */}
-    <div className="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">
+    <div className="h-[125px] mb-[6px] grid grid-cols-2 gap-2 w-full">
+      <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">
           <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}
             </span>
-            <span className="text-xs font-bold text-white/70 mt-2">
+            <span className="text-sm font-bold text-white mt-2">
               {dateInfo.weekday}
             </span>
           </div>
@@ -385,13 +385,13 @@ return (
                 weather.weather[0]?.id,
                 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">
                   {getWeatherIcon(weather.weather[0]?.id, datetime)}
                   <span className={cn(
-                    "text-2xl font-bold ml-1 mt-2",
+                    "text-3xl font-bold ml-1 mt-2",
                     getTemperatureColor(
                       weather.weather[0]?.id,
                       datetime.getHours() >= 18 || datetime.getHours() < 6
diff --git a/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx b/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
index b2af127..b862514 100644
--- a/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
+++ b/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
@@ -110,28 +110,28 @@ const MiniRealtimeAnalytics = () => {
 
         <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
           {summaryCard(
-            "Last 30 minutes",
+            "Last 30 Minutes",
             "Active users",
             basicData.last30MinUsers,
             { 
               colorClass: "text-sky-200",
               titleClass: "text-sky-100 font-bold text-md",
-              descriptionClass: "text-sky-200 text-md font-semibold",
-              background: "h-[150px] bg-gradient-to-br from-sky-900 to-sky-800",
+              descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
+              background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
               icon: Users,
               iconColor: "text-sky-900",
               iconBackground: "bg-sky-300"
             }
           )}
           {summaryCard(
-            "Last 5 minutes",
+            "Last 5 Minutes",
             "Active users",
             basicData.last5MinUsers,
             { 
               colorClass: "text-sky-200",
               titleClass: "text-sky-100 font-bold text-md",
-              descriptionClass: "text-sky-200 text-md font-semibold",
-              background: "h-[150px] bg-gradient-to-br from-sky-900 to-sky-800",
+              descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
+              background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
               icon: Activity,
               iconColor: "text-sky-900",
               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">
           <CardContent className="p-4">
-            <div className="h-[200px]">
+            <div className="h-[230px]">
               <ResponsiveContainer width="100%" height="100%">
                 <BarChart
                   data={basicData.byMinute}
diff --git a/dashboard/src/components/dashboard/MiniSalesChart.jsx b/dashboard/src/components/dashboard/MiniSalesChart.jsx
index a853f99..26a553c 100644
--- a/dashboard/src/components/dashboard/MiniSalesChart.jsx
+++ b/dashboard/src/components/dashboard/MiniSalesChart.jsx
@@ -69,7 +69,9 @@ const MiniStatCard = memo(({
   trend,
   trendValue,
   onClick,
-  active = true
+  active = true,
+  titleClass = "text-sm font-bold text-gray-100",
+  descriptionClass = "text-sm font-semibold text-gray-200"
 }) => (
   <Card 
     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}
   >
     <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}
       </CardTitle>
       {Icon && (
@@ -94,8 +96,8 @@ const MiniStatCard = memo(({
           <div className={`text-3xl font-extrabold ${colorClass}`}>
             {value}
           </div>
-          <div className="mt-2 items-center justify-between flex text-sm font-semibold text-gray-200">
-            <span>Prev: {previousValue}</span>
+          <div className="mt-2 items-center justify-between flex">
+            <span className={descriptionClass}>Prev: {previousValue}</span>
             {trend && (
               <span
                 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"}
           trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
           colorClass="text-emerald-200"
+          titleClass="text-emerald-100 font-bold text-md"
+          descriptionClass="text-emerald-200 text-md font-semibold"
           icon={PiggyBank}
           iconColor="text-emerald-900"
           iconBackground="bg-emerald-300"
@@ -254,6 +258,8 @@ const MiniSalesChart = ({ className = "" }) => {
           trend={summaryStats.growth.orders >= 0 ? "up" : "down"}
           trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
           colorClass="text-blue-200"
+          titleClass="text-blue-100 font-bold text-md"
+          descriptionClass="text-blue-200 text-md font-semibold"
           icon={Truck}
           iconColor="text-blue-900"
           iconBackground="bg-blue-300"
@@ -280,7 +286,7 @@ const MiniSalesChart = ({ className = "" }) => {
           </CardContent>
         ) : (
           <CardContent className="p-4">
-            <div className="h-[200px]">
+            <div className="h-[230px]">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart
                   data={data}
diff --git a/dashboard/src/components/dashboard/MiniStatCards.jsx b/dashboard/src/components/dashboard/MiniStatCards.jsx
index fe5dd9c..aaac8e4 100644
--- a/dashboard/src/components/dashboard/MiniStatCards.jsx
+++ b/dashboard/src/components/dashboard/MiniStatCards.jsx
@@ -386,7 +386,7 @@ const MiniStatCards = ({
           value={formatCurrency(stats?.revenue || 0)}
           description={
             stats?.periodProgress < 100 ? (
-              <div className="flex items-center gap-1 text-sm">
+              <div className="flex items-center gap-1">
                 <span>Proj: </span>
                 {projectionLoading ? (
                   <Skeleton className="h-4 w-15" />
@@ -428,7 +428,7 @@ const MiniStatCards = ({
           onDetailsClick={() => setSelectedMetric("orders")}
           isLoading={loading || !stats}
           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
@@ -447,7 +447,7 @@ const MiniStatCards = ({
           onDetailsClick={() => setSelectedMetric("average_order")}
           isLoading={loading || !stats}
           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
@@ -455,7 +455,7 @@ const MiniStatCards = ({
           value={stats?.shipping?.shippedCount || 0}
           description={`${stats?.shipping?.locations?.total || 0} locations`}
           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"
           icon={Package}
           iconColor="text-orange-900"
@@ -463,7 +463,7 @@ const MiniStatCards = ({
           onDetailsClick={() => setSelectedMetric("shipping")}
           isLoading={loading || !stats}
           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>