diff --git a/components/analytics/PredictionsChart.tsx b/components/analytics/PredictionsChart.tsx index 4eb2a57..6c94f46 100644 --- a/components/analytics/PredictionsChart.tsx +++ b/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 ( @@ -433,20 +445,46 @@ export default function PredictionsChart({ {predictions.sales.dailyPredictions && predictions.sales.dailyPredictions.length > 0 && ( - + Daily Revenue Forecast +
+
+ + Simulate Traffic:{" "} + 0 ? "text-green-600" : simulationFactor < 0 ? "text-red-600" : ""}> + {simulationFactor > 0 ? "+" : ""} + {simulationFactor}% + + + setSimulationFactor(val[0])} + className="w-[150px] mt-1.5" + /> +
+ {simulationFactor !== 0 && ( + + )} +
({ - ...d, - formattedDate: format(new Date(d.date), "MMM d"), - value: d.predicted - }))} + data={simulatedData} margin={{ top: 5, right: 10, @@ -456,8 +494,16 @@ export default function PredictionsChart({ > - - + + @@ -486,9 +532,10 @@ export default function PredictionsChart({