Update PredictionsChart.tsx
All checks were successful
Build Frontend / build (push) Successful in 1m3s

This commit is contained in:
g
2026-01-12 01:41:17 +00:00
parent c0f4b05ef4
commit bd4683d91e

View File

@@ -64,6 +64,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
interface PredictionsChartProps { interface PredictionsChartProps {
timeRange?: number; timeRange?: number;
@@ -237,7 +238,7 @@ export default function PredictionsChart({
<div className="space-y-6"> <div className="space-y-6">
{/* Sales Predictions */} {/* Sales Predictions */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<TooltipProvider> <TooltipProvider delayDuration={0}>
<Card> <Card>
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="text-sm font-medium flex items-center gap-2"> <CardTitle className="text-sm font-medium flex items-center gap-2">
@@ -261,8 +262,8 @@ export default function PredictionsChart({
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="inline-flex"> <span className="inline-flex cursor-help">
<Badge <Badge
className={getConfidenceColor( className={getConfidenceColor(
predictions.sales.confidence, predictions.sales.confidence,
@@ -275,7 +276,7 @@ export default function PredictionsChart({
</span> </span>
)} )}
</Badge> </Badge>
</div> </span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Based on data consistency, historical accuracy, and model agreement</p> <p>Based on data consistency, historical accuracy, and model agreement</p>
@@ -284,8 +285,8 @@ export default function PredictionsChart({
{predictions.sales.aiModel?.used && ( {predictions.sales.aiModel?.used && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="inline-flex"> <span className="inline-flex cursor-help">
<Badge variant="outline" className="bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/30"> <Badge variant="outline" className="bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/30">
🤖 AI Powered 🤖 AI Powered
{predictions.sales.aiModel.modelAccuracy !== undefined && ( {predictions.sales.aiModel.modelAccuracy !== undefined && (
@@ -294,7 +295,7 @@ export default function PredictionsChart({
</span> </span>
)} )}
</Badge> </Badge>
</div> </span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Predictions generated using a Deep Learning Ensemble Model (TensorFlow.js)</p> <p>Predictions generated using a Deep Learning Ensemble Model (TensorFlow.js)</p>
@@ -303,8 +304,8 @@ export default function PredictionsChart({
)} )}
{predictions.sales.trend && ( {predictions.sales.trend && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="inline-flex"> <span className="inline-flex cursor-help">
<Badge <Badge
variant="outline" variant="outline"
className={ className={
@@ -327,7 +328,7 @@ export default function PredictionsChart({
? "Trending Down" ? "Trending Down"
: "Stable"} : "Stable"}
</Badge> </Badge>
</div> </span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Direction of the recent sales trend (slope analysis)</p> <p>Direction of the recent sales trend (slope analysis)</p>
@@ -418,6 +419,14 @@ export default function PredictionsChart({
</TooltipProvider> </TooltipProvider>
</div> </div>
<Alert className="bg-yellow-500/10 border-yellow-500/30 text-yellow-700 dark:text-yellow-400">
<AlertTriangle className="h-4 w-4 stroke-yellow-700 dark:stroke-yellow-400" />
<AlertTitle>Prediction Accuracy Warning</AlertTitle>
<AlertDescription>
These predictions are estimates based on historical sales data. Actual results may vary due to external factors, market conditions, and unforeseen events. Use these insights as a guide, not a guarantee.
</AlertDescription>
</Alert>
{/* Daily Predictions Chart */} {/* Daily Predictions Chart */}
{predictions.sales.dailyPredictions && {predictions.sales.dailyPredictions &&
predictions.sales.dailyPredictions.length > 0 && ( predictions.sales.dailyPredictions.length > 0 && (