balls :D

components/analytics/PredictionsChart.tsx

@@ -30,6 +30,7 @@ import {
   Layers,
   Zap,
   Info,
+  Download,
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -83,13 +84,16 @@ export default function PredictionsChart({
   const [daysAhead, setDaysAhead] = useState(7);
   const [activeTab, setActiveTab] = useState<"overview" | "stock">("overview");
   const [simulationFactor, setSimulationFactor] = useState(0);
+  const [committedSimulationFactor, setCommittedSimulationFactor] = useState(0);
   const { toast } = useToast();
 
   const fetchPredictions = async () => {
     try {
       setLoading(true);
+      // Convert percentage (e.g. 50) to factor (e.g. 0.5)
+      const factor = committedSimulationFactor / 100;
       const [overview, stock] = await Promise.all([
-        getPredictionsOverviewWithStore(daysAhead, timeRange),
+        getPredictionsOverviewWithStore(daysAhead, timeRange, factor),
         getStockPredictionsWithStore(timeRange),
       ]);
       setPredictions(overview);
@@ -108,7 +112,7 @@ export default function PredictionsChart({
 
   useEffect(() => {
     fetchPredictions();
-  }, [daysAhead, timeRange]);
+  }, [daysAhead, timeRange, committedSimulationFactor]);
 
   const getConfidenceColor = (confidence: string) => {
     switch (confidence) {
@@ -145,10 +149,41 @@ export default function PredictionsChart({
     return predictions.sales.dailyPredictions.map((d) => ({
       ...d,
       formattedDate: format(new Date(d.date), "MMM d"),
-      value: d.predicted * (1 + simulationFactor / 100),
-      originalValue: d.predicted,
+      value: d.predicted,
     }));
-  }, [predictions, simulationFactor]);
+  }, [predictions]);
+
+  const handleExportCSV = () => {
+    if (!simulatedData.length) return;
+
+    // Create CSV headers
+    const headers = ["Date", "Predicted Revenue", "Orders", "Confidence"];
+
+    // Create CSV rows
+    const rows = simulatedData.map(d => [
+      format(new Date(d.date), "yyyy-MM-dd"),
+      d.predicted.toFixed(2),
+      d.orders || "", // Provide fallback if orders is undefined
+      predictions?.sales?.confidence || "unknown"
+    ]);
+
+    // Combine headers and rows
+    const csvContent = [
+      headers.join(","),
+      ...rows.map(row => row.join(","))
+    ].join("\n");
+
+    // Create download link
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.setAttribute("href", url);
+    link.setAttribute("download", `predictions_export_${format(new Date(), "yyyyMMdd")}.csv`);
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   if (loading) {
     return (
@@ -462,8 +497,9 @@ export default function PredictionsChart({
                           value={[simulationFactor]}
                           min={-50}
                           max={50}
-                          step={5}
+                          step={10}
                           onValueChange={(val) => setSimulationFactor(val[0])}
+                          onValueCommit={(val) => setCommittedSimulationFactor(val[0])}
                           className="w-[150px] mt-1.5"
                         />
                       </div>
@@ -472,13 +508,20 @@ export default function PredictionsChart({
                           variant="ghost"
                           size="icon"
                           className="h-6 w-6"
-                          onClick={() => setSimulationFactor(0)}
+                          onClick={() => {
+                            setSimulationFactor(0);
+                            setCommittedSimulationFactor(0);
+                          }}
                           title="Reset simulation"
                         >
                           <RefreshCw className="h-3 w-3" />
                         </Button>
                       )}
                     </div>
+                    <Button variant="outline" size="sm" onClick={handleExportCSV} title="Export to CSV">
+                      <Download className="mr-2 h-4 w-4" />
+                      Export
+                    </Button>
                   </CardHeader>
                   <CardContent>
                     <div className="h-[300px] w-full mt-4">

components/analytics/RevenueChart.tsx

@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { TrendingUp, DollarSign } from "lucide-react";
 import { getRevenueTrendsWithStore, type RevenueData } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
 import { ChartSkeleton } from './SkeletonLoaders';
 
 interface RevenueChartProps {
@@ -61,9 +61,9 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
       date: date.toISOString().split('T')[0], // YYYY-MM-DD format
       revenue: item.revenue || 0,
       orders: item.orders || 0,
-      formattedDate: date.toLocaleDateString('en-GB', { 
+      formattedDate: date.toLocaleDateString('en-GB', {
         weekday: 'short',
-        month: 'short', 
+        month: 'short',
         day: 'numeric',
         timeZone: 'UTC'
       })
@@ -79,12 +79,12 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
   // Function to mask sensitive numbers
   const maskValue = (value: string): string => {
     if (!hideNumbers) return value;
-    
+
     // For currency values (£X.XX), show £***
     if (value.includes('£')) {
       return '£***';
     }
-    
+
     // For regular numbers, replace with asterisks
     return '***';
   };
@@ -110,7 +110,7 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
 
   if (isLoading) {
     return (
-      <ChartSkeleton 
+      <ChartSkeleton
         title="Revenue Trends"
         description="Revenue performance over the selected time period"
         icon={TrendingUp}
@@ -176,31 +176,43 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
           {/* Chart */}
           <div className="h-64">
             <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis 
-                  dataKey="formattedDate" 
-                  tick={{ fontSize: 12 }}
+              <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+                <defs>
+                  <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#2563eb" stopOpacity={0.8} />
+                    <stop offset="95%" stopColor="#2563eb" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
+                <XAxis
+                  dataKey="formattedDate"
+                  tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                  axisLine={false}
+                  tickLine={false}
                   angle={-45}
                   textAnchor="end"
                   height={60}
+                  minTickGap={30}
                 />
-                <YAxis 
-                  tick={{ fontSize: 12 }}
+                <YAxis
+                  tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                  axisLine={false}
+                  tickLine={false}
                   tickFormatter={(value) => hideNumbers ? '***' : `£${(value / 1000).toFixed(0)}k`}
                 />
-                <Tooltip content={<CustomTooltip />} />
-                <Bar 
-                  dataKey="revenue" 
-                  fill="#2563eb" 
-                  stroke="#1d4ed8"
-                  strokeWidth={1}
-                  radius={[2, 2, 0, 0]}
+                <Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent", stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }} />
+                <Area
+                  type="monotone"
+                  dataKey="revenue"
+                  stroke="#2563eb"
+                  fillOpacity={1}
+                  fill="url(#colorRevenue)"
+                  strokeWidth={2}
                 />
-              </BarChart>
+              </AreaChart>
             </ResponsiveContainer>
           </div>
-          
+
           {/* Summary stats */}
           <div className="grid grid-cols-3 gap-4 pt-4 border-t">
             <div className="text-center">

lib/services/analytics-service.ts

@@ -494,15 +494,18 @@ export const getStockPredictions = async (
  * @param daysAhead Number of days to predict ahead (default: 7)
  * @param period Historical period in days (default: 30)
  * @param storeId Optional storeId for staff users
+ * @param simulation Simulation factor (e.g. 0.1 for +10%)
  */
 export const getPredictionsOverview = async (
   daysAhead: number = 7,
   period: number = 30,
   storeId?: string,
+  simulation: number = 0,
 ): Promise<PredictionsOverview> => {
   const params = new URLSearchParams({
     daysAhead: daysAhead.toString(),
     period: period.toString(),
+    simulation: simulation.toString(),
   });
   if (storeId) params.append("storeId", storeId);
 
@@ -538,7 +541,8 @@ export const getStockPredictionsWithStore = async (
 export const getPredictionsOverviewWithStore = async (
   daysAhead: number = 7,
   period: number = 30,
+  simulation: number = 0,
 ): Promise<PredictionsOverview> => {
   const storeId = getStoreIdForUser();
-  return getPredictionsOverview(daysAhead, period, storeId);
+  return getPredictionsOverview(daysAhead, period, storeId, simulation);
 };