Add AI insights feature

This commit is contained in:
Urtzi Alfaro
2025-12-15 21:14:22 +01:00
parent 5642b5a0c0
commit c566967bea
39 changed files with 17729 additions and 404 deletions

View File

@@ -18,6 +18,10 @@ interface AIInsight {
impact_value?: string;
impact_currency?: string;
created_at: string;
recommendation_actions?: Array<{
label: string;
action: string;
}>;
}
interface AIInsightsBlockProps {
@@ -143,17 +147,44 @@ export function AIInsightsBlock({ insights = [], loading = false, onViewAll }: A
{insight.description}
</p>
{/* Recommendations */}
{insight.recommendation_actions && insight.recommendation_actions.length > 0 && (
<div className="mb-2 p-2 bg-[var(--color-primary-50)] border border-[var(--color-primary-100)] rounded">
<div className="flex items-start gap-1.5">
<Lightbulb className="w-4 h-4 text-[var(--color-primary-600)] flex-shrink-0 mt-0.5" />
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-[var(--color-primary-700)] mb-1">
{t('dashboard:ai_insights.recommendations', 'Recomendaciones')}:
</p>
<ul className="space-y-1">
{insight.recommendation_actions.slice(0, 2).map((action, idx) => (
<li key={idx} className="text-xs text-[var(--color-primary-700)] flex items-start gap-1">
<span className="flex-shrink-0"></span>
<span className="flex-1">{action.label || action.action}</span>
</li>
))}
</ul>
</div>
</div>
</div>
)}
{/* Impact Value */}
{insight.impact_value && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 mt-2">
{insight.type === 'cost_optimization' && (
<span className="text-sm font-semibold text-[var(--color-success-600)]">
{insight.impact_currency}{insight.impact_value} {t('dashboard:ai_insights.savings')}
💰 {insight.impact_currency}{insight.impact_value} {t('dashboard:ai_insights.savings')}
</span>
)}
{insight.type === 'waste_reduction' && (
<span className="text-sm font-semibold text-[var(--color-success-600)]">
{insight.impact_value} {t('dashboard:ai_insights.reduction')}
{insight.impact_value} {t('dashboard:ai_insights.reduction')}
</span>
)}
{!['cost_optimization', 'waste_reduction'].includes(insight.type) && (
<span className="text-sm font-semibold text-[var(--color-success-600)]">
💰 {insight.impact_currency}{insight.impact_value}
</span>
)}
</div>