Update PredictionsChart.tsx

components/analytics/PredictionsChart.tsx

@@ -65,6 +65,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Slider } from "@/components/ui/slider";
 
 interface PredictionsChartProps {
   timeRange?: number;
@@ -81,6 +82,7 @@ export default function PredictionsChart({
   const [loading, setLoading] = useState(true);
   const [daysAhead, setDaysAhead] = useState(7);
   const [activeTab, setActiveTab] = useState<"overview" | "stock">("overview");
+  const [simulationFactor, setSimulationFactor] = useState(0);
   const { toast } = useToast();
 
   const fetchPredictions = async () => {
@@ -138,6 +140,16 @@ export default function PredictionsChart({
     }
   };
 
+  const simulatedData = useMemo(() => {
+    if (!predictions?.sales?.dailyPredictions) return [];
+    return predictions.sales.dailyPredictions.map((d) => ({
+      ...d,
+      formattedDate: format(new Date(d.date), "MMM d"),
+      value: d.predicted * (1 + simulationFactor / 100),
+      originalValue: d.predicted,
+    }));
+  }, [predictions, simulationFactor]);
+
   if (loading) {
     return (
       <Card>
@@ -433,20 +445,46 @@ export default function PredictionsChart({
             {predictions.sales.dailyPredictions &&
               predictions.sales.dailyPredictions.length > 0 && (
                 <Card>
-                  <CardHeader className="pb-3">
+                  <CardHeader className="pb-3 flex flex-row items-center justify-between space-y-0">
                     <CardTitle className="text-sm font-medium">
                       Daily Revenue Forecast
                     </CardTitle>
+                    <div className="flex items-center gap-4">
+                      <div className="flex flex-col items-end">
+                        <span className="text-xs font-medium text-muted-foreground">
+                          Simulate Traffic:{" "}
+                          <span className={simulationFactor > 0 ? "text-green-600" : simulationFactor < 0 ? "text-red-600" : ""}>
+                            {simulationFactor > 0 ? "+" : ""}
+                            {simulationFactor}%
+                          </span>
+                        </span>
+                        <Slider
+                          value={[simulationFactor]}
+                          min={-50}
+                          max={50}
+                          step={5}
+                          onValueChange={(val) => setSimulationFactor(val[0])}
+                          className="w-[150px] mt-1.5"
+                        />
+                      </div>
+                      {simulationFactor !== 0 && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6"
+                          onClick={() => setSimulationFactor(0)}
+                          title="Reset simulation"
+                        >
+                          <RefreshCw className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
                   </CardHeader>
                   <CardContent>
                     <div className="h-[300px] w-full mt-4">
                       <ResponsiveContainer width="100%" height="100%">
                         <AreaChart
-                          data={predictions.sales.dailyPredictions.map(d => ({
+                          data={simulatedData}
-                            ...d,
-                            formattedDate: format(new Date(d.date), "MMM d"),
-                            value: d.predicted
-                          }))}
                           margin={{
                             top: 5,
                             right: 10,
@@ -456,8 +494,16 @@ export default function PredictionsChart({
                         >
                           <defs>
                             <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
-                              <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
+                              <stop
-                              <stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
+                                offset="5%"
+                                stopColor={simulationFactor !== 0 ? "#10b981" : "#8884d8"}
+                                stopOpacity={0.8}
+                              />
+                              <stop
+                                offset="95%"
+                                stopColor={simulationFactor !== 0 ? "#10b981" : "#8884d8"}
+                                stopOpacity={0}
+                              />
                             </linearGradient>
                           </defs>
                           <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
@@ -486,9 +532,10 @@ export default function PredictionsChart({
                           <Area
                             type="monotone"
                             dataKey="value"
-                            stroke="#8884d8"
+                            stroke={simulationFactor !== 0 ? "#10b981" : "#8884d8"}
                             fillOpacity={1}
                             fill="url(#colorValue)"
+                            strokeDasharray={simulationFactor !== 0 ? "5 5" : "0"}
                           />
                         </AreaChart>
                       </ResponsiveContainer>