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">