bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): Add reasoning modal for action buttons

Browse Source 
- Create ReasoningModal component with AI reasoning display
- Add business impact section (financial impact, affected orders)
- Add urgency context display (time remaining)
- Wire up 'reasoning:show' event listener in UnifiedActionQueueCard
- Export ReasoningModal from domain/dashboard index

The smartActionHandlers already emit the 'reasoning:show' event,
this adds the missing listener and modal to display the AI reasoning
when users click "See Full Reasoning" on alerts.

Fixes: Issue #2 - "See Full Reasoning" button not working

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Urtzi Alfaro
2025-11-27 07:36:06 +01:00
parent 035b45a0a6
commit b2bde32502
3 changed files with 903 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
frontend/src/components/domain/dashboard/ReasoningModal.tsx Normal file
View File

@@ -0,0 +1,128 @@
import React from 'react';
import { X, Brain, TrendingUp, Clock, AlertCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
interface ReasoningModalProps {
isOpen: boolean;
onClose: () => void;
reasoning: {
action_id?: string;
po_id?: string;
batch_id?: string;
reasoning?: string;
title?: string;
ai_reasoning_summary?: string;
business_impact?: {
financial_impact_eur?: number;
affected_orders?: number;
};
urgency_context?: {
deadline?: string;
time_until_consequence_hours?: number;
};
};
}
export function ReasoningModal({ isOpen, onClose, reasoning }: ReasoningModalProps) {
const { t } = useTranslation(['alerts', 'common']);
if (!isOpen) return null;
const displayText = reasoning.ai_reasoning_summary || reasoning.reasoning || t('alerts:no_reasoning_available');
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
<div
className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto"
style={{ backgroundColor: 'var(--bg-primary)' }}
>
{/* Header */}
<div className="sticky top-0 flex items-center justify-between p-6 border-b" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--color-info-100)' }}>
<Brain className="w-6 h-6" style={{ color: 'var(--color-info-600)' }} />
</div>
<div>
<h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
{reasoning.title || t('alerts:orchestration.reasoning_title')}
</h2>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{t('common:ai_reasoning')}
</p>
</div>
</div>
<button
onClick={onClose}
className="p-2 rounded-lg hover:bg-black/5 transition-colors"
>
<X className="w-6 h-6" style={{ color: 'var(--text-secondary)' }} />
</button>
</div>
{/* Content */}
<div className="p-6 space-y-4">
{/* AI Reasoning Summary */}
<div className="rounded-lg p-4 border-l-4" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--color-info-600)' }}>
<p className="text-base leading-relaxed" style={{ color: 'var(--text-primary)' }}>
{displayText}
</p>
</div>
{/* Business Impact (if available) */}
{reasoning.business_impact && (
<div className="space-y-2">
<h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>
{t('alerts:business_impact')}
</h3>
<div className="grid grid-cols-2 gap-3">
{reasoning.business_impact.financial_impact_eur !== undefined && (
<div className="rounded-lg p-3" style={{ backgroundColor: 'var(--color-warning-50)' }}>
<div className="flex items-center gap-2 mb-1">
<TrendingUp className="w-4 h-4" style={{ color: 'var(--color-warning-600)' }} />
<span className="text-xs font-semibold" style={{ color: 'var(--color-warning-800)' }}>
{t('alerts:context.financial_impact', { amount: reasoning.business_impact.financial_impact_eur.toFixed(0) })}
</span>
</div>
</div>
)}
{reasoning.business_impact.affected_orders !== undefined && (
<div className="rounded-lg p-3" style={{ backgroundColor: 'var(--color-info-50)' }}>
<div className="flex items-center gap-2 mb-1">
<AlertCircle className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
<span className="text-xs font-semibold" style={{ color: 'var(--color-info-800)' }}>
{reasoning.business_impact.affected_orders} {t('common:orders_affected')}
</span>
</div>
</div>
)}
</div>
</div>
)}
{/* Urgency Context (if available) */}
{reasoning.urgency_context?.time_until_consequence_hours !== undefined && (
<div className="rounded-lg p-4" style={{ backgroundColor: 'var(--color-error-50)', borderLeft: '4px solid var(--color-error-600)' }}>
<div className="flex items-center gap-2">
<Clock className="w-5 h-5" style={{ color: 'var(--color-error-600)' }} />
<span className="font-semibold" style={{ color: 'var(--color-error-800)' }}>
{Math.round(reasoning.urgency_context.time_until_consequence_hours)}h {t('common:remaining')}
</span>
</div>
</div>
)}
</div>
{/* Footer */}
<div className="sticky bottom-0 p-6 border-t" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
<button
onClick={onClose}
className="w-full px-6 py-3 rounded-lg font-semibold transition-colors"
style={{ backgroundColor: 'var(--color-primary)', color: 'white' }}
>
{t('common:close')}
</button>
</div>
</div>
</div>
);
}

5
frontend/src/components/domain/dashboard/index.ts
View File

@@ -1,16 +1,17 @@
// Dashboard Domain Components - Bakery Management System
// Existing dashboard components
export { default as RealTimeAlerts } from './RealTimeAlerts';
export { default as PendingPOApprovals } from './PendingPOApprovals';
export { default as TodayProduction } from './TodayProduction';
export { default as AlertTrends } from './AlertTrends';
// Production Management Dashboard Widgets
export { default as ProductionCostMonitor } from './ProductionCostMonitor';
export { default as EquipmentStatusWidget } from './EquipmentStatusWidget';
export { default as AIInsightsWidget } from './AIInsightsWidget';
// Reasoning Modal
export { ReasoningModal } from './ReasoningModal';
// Types
export type { ProductionCostData } from './ProductionCostMonitor';
export type { EquipmentStatus } from './EquipmentStatusWidget';