Add prev data and update icons

dashboard/src/components/dashboard/MiniSalesChart.jsx

@@ -19,7 +19,7 @@ import {
 import { DateTime } from "luxon";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { AlertCircle, TrendingUp, DollarSign, ShoppingCart } from "lucide-react";
+import { AlertCircle, TrendingUp, DollarSign, ShoppingCart, Truck, PiggyBank, ArrowUp,ArrowDown, Banknote, Package } from "lucide-react";
 import { formatCurrency, CustomTooltip, processData, StatCard } from "./SalesChart.jsx";
 
 const SkeletonChart = () => (
@@ -57,22 +57,56 @@ const SkeletonChart = () => (
   </div>
 );
 
-const MiniStatCard = memo(({ title, value, icon: Icon, colorClass, iconColor, iconBackground, background }) => (
+const MiniStatCard = memo(({ 
+  title, 
+  value, 
+  icon: Icon, 
+  colorClass, 
+  iconColor, 
+  iconBackground, 
+  background,
+  previousValue,
+  trend,
+  trendValue 
+}) => (
   <Card className={`w-full ${background || 'bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-md'}`}>
     <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">
         {title}
       </CardTitle>
       {Icon && (
-        <div className="relative p-3">
+        <div className="relative p-2">
           <div className={`absolute inset-0 rounded-full ${iconBackground}`} />
-          <Icon className={`h-4 w-4 ${iconColor} relative`} />
+          <Icon className={`h-5 w-5 ${iconColor} relative`} />
         </div>
       )}
     </CardHeader>
     <CardContent className="p-4 pt-0">
-      <div className={`text-3xl font-extrabold ${colorClass}`}>
-        {value}
+      <div className="space-y-2">
+        <div>
+          <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>
+            {trend && (
+              <span
+                className={`flex items-center gap-0 px-1 py-0.5 rounded-full ${
+                  trend === 'up'
+                    ? 'text-sm bg-emerald-300 text-emerald-900'
+                    : 'text-sm bg-rose-300 text-rose-900'
+                }`}
+              >
+                {trend === "up" ? (
+                  <ArrowUp className="w-4 h-4" />
+                ) : (
+                  <ArrowDown className="w-4 h-4" />
+                )}
+                {trendValue}
+              </span>
+            )}
+          </div>
+        </div>
       </div>
     </CardContent>
   </Card>
@@ -87,6 +121,12 @@ const MiniSalesChart = ({ className = "" }) => {
   const [summaryStats, setSummaryStats] = useState({
     totalRevenue: 0,
     totalOrders: 0,
+    prevRevenue: 0,
+    prevOrders: 0,
+    growth: {
+      revenue: 0,
+      orders: 0
+    }
   });
 
   const fetchData = useCallback(async () => {
@@ -112,14 +152,31 @@ const MiniSalesChart = ({ className = "" }) => {
 
       const processedData = processData(stats);
 
-      // Calculate totals
+      // Calculate totals and growth
       const totals = stats.reduce((acc, day) => ({
         totalRevenue: acc.totalRevenue + (Number(day.revenue) || 0),
         totalOrders: acc.totalOrders + (Number(day.orders) || 0),
-      }), { totalRevenue: 0, totalOrders: 0 });
+        prevRevenue: acc.prevRevenue + (Number(day.prevRevenue) || 0),
+        prevOrders: acc.prevOrders + (Number(day.prevOrders) || 0),
+      }), { 
+        totalRevenue: 0, 
+        totalOrders: 0,
+        prevRevenue: 0,
+        prevOrders: 0
+      });
+
+      // Calculate growth percentages
+      const growth = {
+        revenue: totals.prevRevenue > 0 
+          ? ((totals.totalRevenue - totals.prevRevenue) / totals.prevRevenue) * 100 
+          : 0,
+        orders: totals.prevOrders > 0
+          ? ((totals.totalOrders - totals.prevOrders) / totals.prevOrders) * 100
+          : 0
+      };
 
       setData(processedData);
-      setSummaryStats(totals);
+      setSummaryStats({ ...totals, growth });
       setError(null);
     } catch (error) {
       console.error("Error fetching data:", error);
@@ -161,8 +218,11 @@ const MiniSalesChart = ({ className = "" }) => {
         <MiniStatCard
           title="30 Days Revenue"
           value={formatCurrency(summaryStats.totalRevenue, false)}
+          previousValue={formatCurrency(summaryStats.prevRevenue, false)}
+          trend={summaryStats.growth.revenue >= 0 ? "up" : "down"}
+          trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
           colorClass="text-emerald-200"
-          icon={DollarSign}
+          icon={PiggyBank}
           iconColor="text-emerald-900"
           iconBackground="bg-emerald-300"
           background="bg-gradient-to-br from-emerald-900 to-emerald-800"
@@ -170,8 +230,11 @@ const MiniSalesChart = ({ className = "" }) => {
         <MiniStatCard
           title="30 Days Orders"
           value={summaryStats.totalOrders.toLocaleString()}
+          previousValue={summaryStats.prevOrders.toLocaleString()}
+          trend={summaryStats.growth.orders >= 0 ? "up" : "down"}
+          trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
           colorClass="text-blue-200"
-          icon={ShoppingCart}
+          icon={Truck}
           iconColor="text-blue-900"
           iconBackground="bg-blue-300"
           background="bg-gradient-to-br from-blue-900 to-blue-800"

dashboard/src/components/dashboard/MiniStatCards.jsx

@@ -387,7 +387,7 @@ const MiniStatCards = ({
           description={
             stats?.periodProgress < 100 ? (
               <div className="flex items-center gap-1 text-sm">
-                <span>Projected: </span>
+                <span>Proj: </span>
                 {projectionLoading ? (
                   <Skeleton className="h-4 w-15" />
                 ) : (

dashboard/src/components/dashboard/StatCards.jsx

@@ -1044,13 +1044,13 @@ const StatCard = ({
           )}
         </div>
         {Icon && (
-          <div className={`${variant === 'mini' ? 'relative p-3' : ''}`}>
+          <div className={`${variant === 'mini' ? 'relative p-2' : ''}`}>
             {variant === 'mini' && iconBackground && (
               <div 
                 className={`absolute inset-0 rounded-full ${iconBackground}`}
               />
             )}
-            <Icon className={`h-4 w-4 ${iconVariants[variant]} relative`} />
+            <Icon className={`h-5 w-5 ${iconVariants[variant]} relative`} />
           </div>
         )}
       </CardHeader>