Add missing skeletons

dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx

@@ -17,6 +17,35 @@ import {
   SkeletonBarChart,
   processBasicData,
 } from "./RealtimeAnalytics";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const SkeletonCard = ({ colorScheme = "sky" }) => (
+  <Card className={`w-full h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm`}>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+      <CardTitle>
+        <div className="space-y-2">
+          <Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
+        </div>
+      </CardTitle>
+      <div className="relative p-2">
+        <div className={`absolute inset-0 rounded-full bg-${colorScheme}-300/20`} />
+        <div className="h-5 w-5 relative rounded-full bg-${colorScheme}-300/20" />
+      </div>
+    </CardHeader>
+    <CardContent className="p-4 pt-0">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Skeleton className={`h-8 w-32 bg-${colorScheme}-300/20`} />
+          <div className="flex justify-between items-center">
+            <div className="space-y-1">
+              <Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
 
 const MiniRealtimeAnalytics = () => {
   const [basicData, setBasicData] = useState({
@@ -76,95 +105,68 @@ const MiniRealtimeAnalytics = () => {
     };
   }, [isPaused]);
 
-  if (loading && !basicData) {
+  const renderContent = () => {
-    return (
+    if (error) {
-      <div>
+      return (
-        <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
+        <Alert variant="destructive" className="mb-4">
-          <Card className="h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
+          <AlertTriangle className="h-4 w-4" />
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+          <AlertDescription>{error}</AlertDescription>
-              <CardTitle className="text-sky-100 font-bold text-md">
+        </Alert>
-                <Skeleton className="h-4 w-24 bg-sky-700" />
+      );
-              </CardTitle>
+    }
-              <div className="relative p-2">
+
-                <div className="absolute inset-0 rounded-full bg-sky-300" />
+    if (loading) {
-                <Skeleton className="h-5 w-5 bg-sky-700 relative rounded-full" />
+      return (
-              </div>
+        <div>
-            </CardHeader>
+          <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
-            <CardContent className="p-4 pt-0">
+            <SkeletonCard colorScheme="sky" />
-              <div className="space-y-2">
+            <SkeletonCard colorScheme="sky" />
-                <Skeleton className="h-8 w-20 bg-sky-700" />
+          </div>
-                <Skeleton className="h-4 w-32 bg-sky-700" />
+
-              </div>
+          <Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
-            </CardContent>
+            <CardContent className="p-4">
-          </Card>
+              <div className="h-[216px]">
-          <Card className="h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
+                <div className="h-full w-full relative">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+                  {/* Grid lines */}
-              <CardTitle className="text-sky-100 font-bold text-md">
+                  {[...Array(5)].map((_, i) => (
-                <Skeleton className="h-4 w-24 bg-sky-700" />
+                    <div
-              </CardTitle>
+                      key={i}
-              <div className="relative p-2">
+                      className="absolute w-full h-px bg-sky-300/20"
-                <div className="absolute inset-0 rounded-full bg-sky-300" />
+                      style={{ top: `${(i + 1) * 20}%` }}
-                <Skeleton className="h-5 w-5 bg-sky-700 relative rounded-full" />
+                    />
-              </div>
+                  ))}
-            </CardHeader>
+                  {/* Y-axis labels */}
-            <CardContent className="p-4 pt-0">
+                  <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
-              <div className="space-y-2">
+                    {[...Array(5)].map((_, i) => (
-                <Skeleton className="h-8 w-20 bg-sky-700" />
+                      <Skeleton key={i} className="h-3 w-6 bg-sky-300/20 rounded-sm" />
-                <Skeleton className="h-4 w-32 bg-sky-700" />
+                    ))}
+                  </div>
+                  {/* X-axis labels */}
+                  <div className="absolute left-8 right-4 bottom-0 flex justify-between">
+                    {[...Array(6)].map((_, i) => (
+                      <Skeleton key={i} className="h-3 w-8 bg-sky-300/20 rounded-sm" />
+                    ))}
+                  </div>
+                  {/* Bars */}
+                  <div className="absolute inset-x-8 bottom-6 top-4 flex items-end justify-between gap-1">
+                    {[...Array(24)].map((_, i) => (
+                      <div
+                        key={i}
+                        className="w-2 bg-sky-300/20 rounded-sm"
+                        style={{ height: `${Math.random() * 80 + 10}%` }}
+                      />
+                    ))}
+                  </div>
+                </div>
               </div>
             </CardContent>
           </Card>
         </div>
+      );
+    }
 
-        <Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
+    return (
-          <CardContent className="p-4">
+      <div>
-            <div className="h-[230px] relative">
-              {/* Grid lines */}
-              {[...Array(5)].map((_, i) => (
-                <div
-                  key={i}
-                  className="absolute w-full h-px bg-sky-700"
-                  style={{ top: `${(i + 1) * 20}%` }}
-                />
-              ))}
-              {/* Y-axis labels */}
-              <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
-                {[...Array(5)].map((_, i) => (
-                  <Skeleton key={i} className="h-3 w-6 bg-sky-700 rounded-sm" />
-                ))}
-              </div>
-              {/* X-axis labels */}
-              <div className="absolute left-8 right-4 bottom-0 flex justify-between">
-                {[...Array(6)].map((_, i) => (
-                  <Skeleton key={i} className="h-3 w-8 bg-sky-700 rounded-sm" />
-                ))}
-              </div>
-              {/* Bars */}
-              <div className="absolute inset-x-8 bottom-6 top-4 flex items-end justify-between gap-1">
-                {[...Array(24)].map((_, i) => (
-                  <div
-                    key={i}
-                    className="w-2 bg-sky-700 rounded-sm"
-                    style={{ height: `${Math.random() * 80 + 10}%` }}
-                  />
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-   <div>
-        {error && (
-          <Alert variant="destructive" className="mb-4">
-            <AlertTriangle className="h-4 w-4" />
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
         <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
           {summaryCard(
             "Last 30 Minutes",
@@ -245,7 +247,10 @@ const MiniRealtimeAnalytics = () => {
           </CardContent>
         </Card>
       </div>
-  );
+    );
+  };
+
+  return renderContent();
 };
 
 export default MiniRealtimeAnalytics; 

dashboard/src/components/dashboard/MiniSalesChart.jsx

@@ -309,7 +309,7 @@ const MiniSalesChart = ({ className = "" }) => {
               trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
               colorClass="text-emerald-300"
               titleClass="text-emerald-300 font-bold text-md"
-              descriptionClass="text-emerald-300 text-md font-semibold"
+              descriptionClass="text-emerald-300 text-md font-semibold pb-1"
               icon={PiggyBank}
               iconColor="text-emerald-900"
               iconBackground="bg-emerald-300"
@@ -324,7 +324,7 @@ const MiniSalesChart = ({ className = "" }) => {
               trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
               colorClass="text-blue-300"
               titleClass="text-blue-300 font-bold text-md"
-              descriptionClass="text-blue-300 text-md font-semibold"
+              descriptionClass="text-blue-300 text-md font-semibold pb-1"
               icon={Truck}
               iconColor="text-blue-900"
               iconBackground="bg-blue-300"