:D

components/analytics/GrowthAnalyticsChart.tsx

@@ -24,6 +24,7 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
+  Area,
 } from "recharts";
 
 interface GrowthAnalyticsChartProps {
@@ -195,18 +196,32 @@ export default function GrowthAnalyticsChart({
                   }))}
                   margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                 >
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis dataKey="formattedMonth" tick={{ fontSize: 12 }} />
-                  <YAxis yAxisId="left" tick={{ fontSize: 12 }} />
+                  <defs>
+                    <linearGradient id="colorRevenueGrowth" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
+                      <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
+                  <XAxis
+                    dataKey="formattedMonth"
+                    tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                    axisLine={false}
+                    tickLine={false}
+                  />
+                  <YAxis yAxisId="left" tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} />
                   <YAxis
                     yAxisId="right"
                     orientation="right"
-                    tick={{ fontSize: 12 }}
+                    tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                    axisLine={false}
+                    tickLine={false}
                     tickFormatter={(value) =>
                       hideNumbers ? "***" : `£${(value / 1000).toFixed(0)}k`
                     }
                   />
                   <Tooltip
+                    cursor={{ fill: "transparent", stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }}
                     content={({ active, payload }) => {
                       if (active && payload?.length) {
                         const data = payload[0].payload;
@@ -240,14 +255,16 @@ export default function GrowthAnalyticsChart({
                       return null;
                     }}
                   />
-                  <Bar
+                  <Line
                     yAxisId="left"
+                    type="monotone"
                     dataKey="orders"
-                    fill="#3b82f6"
-                    radius={[4, 4, 0, 0]}
+                    stroke="#3b82f6"
+                    strokeWidth={2}
+                    dot={{ fill: "#3b82f6", r: 3 }}
                     name="Orders"
                   />
-                  <Line
+                  <Area
                     yAxisId="right"
                     type="monotone"
                     dataKey="revenue"
@@ -255,6 +272,7 @@ export default function GrowthAnalyticsChart({
                     strokeWidth={3}
                     dot={{ fill: "#10b981", r: 4 }}
                     name="Revenue"
+                    fill="url(#colorRevenueGrowth)"
                   />
                 </ComposedChart>
               </ResponsiveContainer>

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>