:D

components/analytics/PredictionsChart.tsx

@@ -34,6 +34,7 @@ import {
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { Skeleton } from "@/components/ui/skeleton";
+import CountUp from "react-countup";
 import {
   getPredictionsOverviewWithStore,
   getStockPredictionsWithStore,
@@ -146,10 +147,11 @@ export default function PredictionsChart({
 
   const simulatedData = useMemo(() => {
     if (!predictions?.sales?.dailyPredictions) return [];
-    return predictions.sales.dailyPredictions.map((d) => ({
+    return predictions.sales.dailyPredictions.map((d: any) => ({
       ...d,
       formattedDate: format(new Date(d.date), "MMM d"),
       value: d.predicted,
+      orders: d.predictedOrders || 0, // Ensure orders exist
     }));
   }, [predictions]);
 
@@ -301,7 +303,13 @@ export default function PredictionsChart({
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <div className="text-2xl font-bold w-fit cursor-help">
-                              {formatGBP(predictions.sales.predicted)}
+                              <CountUp
+                                end={predictions.sales.predicted}
+                                duration={1.5}
+                                separator=","
+                                decimals={2}
+                                prefix="£"
+                              />
                             </div>
                           </TooltipTrigger>
                           <TooltipContent>