28136cf198
- Updated TypeScript types to support reasoning_data field - Integrated useReasoningTranslation hook in all dashboard components: * ActionQueueCard: Translates PO reasoning_data and UI text * ProductionTimelineCard: Translates batch reasoning_data and UI text * OrchestrationSummaryCard: Translates all hardcoded English text * HealthStatusCard: Translates all hardcoded English text - Added missing translation keys to all language files (EN, ES, EU): * health_status: never, critical_issues, actions_needed * action_queue: total, critical, important * orchestration_summary: ready_to_plan, run_info, took, show_more/less * production_timeline: Complete rebuild with new keys - Components now support fallback for deprecated text fields - Full multilingual support: English, Spanish, Basque Dashboard is now fully translatable and will display reasoning in user's language.
273 lines
9.0 KiB
TypeScript
273 lines
9.0 KiB
TypeScript
// ================================================================
|
|
// frontend/src/components/dashboard/ActionQueueCard.tsx
|
|
// ================================================================
|
|
/**
|
|
* Action Queue Card - What needs your attention right now
|
|
*
|
|
* Prioritized list of actions the user needs to take, with context
|
|
* about why each action is needed and what happens if they don't do it.
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import {
|
|
FileText,
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
Eye,
|
|
Edit,
|
|
Clock,
|
|
Euro,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
} from 'lucide-react';
|
|
import { ActionItem, ActionQueue } from '../../api/hooks/newDashboard';
|
|
import { useReasoningFormatter } from '../../hooks/useReasoningTranslation';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface ActionQueueCardProps {
|
|
actionQueue: ActionQueue;
|
|
loading?: boolean;
|
|
onApprove?: (actionId: string) => void;
|
|
onViewDetails?: (actionId: string) => void;
|
|
onModify?: (actionId: string) => void;
|
|
}
|
|
|
|
const urgencyConfig = {
|
|
critical: {
|
|
bg: 'bg-red-50',
|
|
border: 'border-red-300',
|
|
badge: 'bg-red-100 text-red-800',
|
|
icon: AlertCircle,
|
|
},
|
|
important: {
|
|
bg: 'bg-amber-50',
|
|
border: 'border-amber-300',
|
|
badge: 'bg-amber-100 text-amber-800',
|
|
icon: AlertCircle,
|
|
},
|
|
normal: {
|
|
bg: 'bg-blue-50',
|
|
border: 'border-blue-300',
|
|
badge: 'bg-blue-100 text-blue-800',
|
|
icon: FileText,
|
|
},
|
|
};
|
|
|
|
function ActionItemCard({
|
|
action,
|
|
onApprove,
|
|
onViewDetails,
|
|
onModify,
|
|
}: {
|
|
action: ActionItem;
|
|
onApprove?: (id: string) => void;
|
|
onViewDetails?: (id: string) => void;
|
|
onModify?: (id: string) => void;
|
|
}) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const config = urgencyConfig[action.urgency];
|
|
const UrgencyIcon = config.icon;
|
|
const { formatPOAction } = useReasoningFormatter();
|
|
const { t } = useTranslation('reasoning');
|
|
|
|
// Translate reasoning_data (or fallback to deprecated text fields)
|
|
const { reasoning, consequence, severity } = action.reasoning_data
|
|
? formatPOAction(action.reasoning_data)
|
|
: { reasoning: action.reasoning || '', consequence: action.consequence || '', severity: '' };
|
|
|
|
return (
|
|
<div
|
|
className={`${config.bg} ${config.border} border-2 rounded-lg p-4 md:p-5 transition-all duration-200 hover:shadow-md`}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-start gap-3 mb-3">
|
|
<UrgencyIcon className={`w-6 h-6 flex-shrink-0 ${config.badge.split(' ')[1]}`} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2 mb-1">
|
|
<h3 className="font-bold text-lg">{action.title}</h3>
|
|
<span className={`${config.badge} px-2 py-1 rounded text-xs font-semibold uppercase flex-shrink-0`}>
|
|
{action.urgency}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600">{action.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Amount (for POs) */}
|
|
{action.amount && (
|
|
<div className="flex items-center gap-2 mb-3 text-lg font-bold">
|
|
<Euro className="w-5 h-5" />
|
|
<span>
|
|
{action.amount.toFixed(2)} {action.currency}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reasoning (always visible) */}
|
|
<div className="bg-white rounded-md p-3 mb-3">
|
|
<p className="text-sm font-medium text-gray-700 mb-1">
|
|
{t('jtbd.action_queue.why_needed')}
|
|
</p>
|
|
<p className="text-sm text-gray-600">{reasoning}</p>
|
|
</div>
|
|
|
|
{/* Consequence (expandable) */}
|
|
{consequence && (
|
|
<>
|
|
<button
|
|
onClick={() => setExpanded(!expanded)}
|
|
className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors mb-3 w-full"
|
|
>
|
|
{expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
|
<span className="font-medium">{t('jtbd.action_queue.what_if_not')}</span>
|
|
</button>
|
|
|
|
{expanded && (
|
|
<div className="bg-amber-50 border border-amber-200 rounded-md p-3 mb-3">
|
|
<p className="text-sm text-amber-900">{consequence}</p>
|
|
{severity && (
|
|
<span className="text-xs font-semibold text-amber-900 mt-1 block">
|
|
{severity}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Time Estimate */}
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 mb-4">
|
|
<Clock className="w-4 h-4" />
|
|
<span>
|
|
{t('jtbd.action_queue.estimated_time')}: {action.estimatedTimeMinutes} min
|
|
</span>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{action.actions.map((button, index) => {
|
|
const buttonStyles = {
|
|
primary: 'bg-blue-600 hover:bg-blue-700 text-white',
|
|
secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
|
|
tertiary: 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300',
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (button.action === 'approve' && onApprove) {
|
|
onApprove(action.id);
|
|
} else if (button.action === 'view_details' && onViewDetails) {
|
|
onViewDetails(action.id);
|
|
} else if (button.action === 'modify' && onModify) {
|
|
onModify(action.id);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={handleClick}
|
|
className={`${buttonStyles[button.type]} px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-200 flex items-center gap-2 min-h-[44px]`}
|
|
>
|
|
{button.action === 'approve' && <CheckCircle2 className="w-4 h-4" />}
|
|
{button.action === 'view_details' && <Eye className="w-4 h-4" />}
|
|
{button.action === 'modify' && <Edit className="w-4 h-4" />}
|
|
{button.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ActionQueueCard({
|
|
actionQueue,
|
|
loading,
|
|
onApprove,
|
|
onViewDetails,
|
|
onModify,
|
|
}: ActionQueueCardProps) {
|
|
const [showAll, setShowAll] = useState(false);
|
|
const displayedActions = showAll ? actionQueue.actions : actionQueue.actions.slice(0, 3);
|
|
const { t } = useTranslation('reasoning');
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-md p-6">
|
|
<div className="animate-pulse space-y-4">
|
|
<div className="h-6 bg-gray-200 rounded w-1/2"></div>
|
|
<div className="h-32 bg-gray-200 rounded"></div>
|
|
<div className="h-32 bg-gray-200 rounded"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (actionQueue.actions.length === 0) {
|
|
return (
|
|
<div className="bg-green-50 border-2 border-green-200 rounded-xl p-8 text-center">
|
|
<CheckCircle2 className="w-16 h-16 text-green-600 mx-auto mb-4" />
|
|
<h3 className="text-xl font-bold text-green-900 mb-2">
|
|
{t('jtbd.action_queue.all_caught_up')}
|
|
</h3>
|
|
<p className="text-green-700">{t('jtbd.action_queue.no_actions')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-md p-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900">{t('jtbd.action_queue.title')}</h2>
|
|
{actionQueue.totalActions > 3 && (
|
|
<span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-semibold">
|
|
{actionQueue.totalActions} {t('jtbd.action_queue.total')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Summary Badges */}
|
|
{(actionQueue.criticalCount > 0 || actionQueue.importantCount > 0) && (
|
|
<div className="flex flex-wrap gap-2 mb-6">
|
|
{actionQueue.criticalCount > 0 && (
|
|
<span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-semibold">
|
|
{actionQueue.criticalCount} {t('jtbd.action_queue.critical')}
|
|
</span>
|
|
)}
|
|
{actionQueue.importantCount > 0 && (
|
|
<span className="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-semibold">
|
|
{actionQueue.importantCount} {t('jtbd.action_queue.important')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Items */}
|
|
<div className="space-y-4">
|
|
{displayedActions.map((action) => (
|
|
<ActionItemCard
|
|
key={action.id}
|
|
action={action}
|
|
onApprove={onApprove}
|
|
onViewDetails={onViewDetails}
|
|
onModify={onModify}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Show More/Less */}
|
|
{actionQueue.totalActions > 3 && (
|
|
<button
|
|
onClick={() => setShowAll(!showAll)}
|
|
className="w-full mt-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold text-gray-700 transition-colors duration-200"
|
|
>
|
|
{showAll
|
|
? t('jtbd.action_queue.show_less')
|
|
: t('jtbd.action_queue.show_more', { count: actionQueue.totalActions - 3 })}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|