Imporve the predicciones page

frontend/src/pages/app/operations/procurement/ProcurementPage.tsx

@@ -8,6 +8,7 @@ import {
   useProcurementPlans,
   useCurrentProcurementPlan,
   useCriticalRequirements,
+  usePlanRequirements,
   useGenerateProcurementPlan,
   useUpdateProcurementPlanStatus,
   useTriggerDailyScheduler
@@ -22,7 +23,9 @@ const ProcurementPage: React.FC = () => {
   const [selectedPlan, setSelectedPlan] = useState<any>(null);
   const [editingPlan, setEditingPlan] = useState<any>(null);
   const [editFormData, setEditFormData] = useState<any>({});
-  
+  const [selectedPlanForRequirements, setSelectedPlanForRequirements] = useState<string | null>(null);
+  const [showCriticalRequirements, setShowCriticalRequirements] = useState(false);
+
   const { currentTenant } = useTenantStore();
   const tenantId = currentTenant?.id || '';
 
@@ -35,6 +38,15 @@ const ProcurementPage: React.FC = () => {
   });
   const { data: currentPlan, isLoading: isCurrentPlanLoading } = useCurrentProcurementPlan(tenantId);
   const { data: criticalRequirements, isLoading: isCriticalLoading } = useCriticalRequirements(tenantId);
+
+  // Get plan requirements for selected plan
+  const { data: planRequirements, isLoading: isPlanRequirementsLoading } = usePlanRequirements({
+    tenant_id: tenantId,
+    plan_id: selectedPlanForRequirements || '',
+    status: 'critical' // Only get critical requirements
+  }, {
+    enabled: !!selectedPlanForRequirements && !!tenantId
+  });
   
   const generatePlanMutation = useGenerateProcurementPlan();
   const updatePlanStatusMutation = useUpdateProcurementPlanStatus();
@@ -107,6 +119,16 @@ const ProcurementPage: React.FC = () => {
     setEditFormData({});
   };
 
+  const handleShowCriticalRequirements = (planId: string) => {
+    setSelectedPlanForRequirements(planId);
+    setShowCriticalRequirements(true);
+  };
+
+  const handleCloseCriticalRequirements = () => {
+    setShowCriticalRequirements(false);
+    setSelectedPlanForRequirements(null);
+  };
+
   if (!tenantId) {
     return (
       <div className="flex justify-center items-center h-64">
@@ -391,6 +413,15 @@ const ProcurementPage: React.FC = () => {
                   }
                 });
 
+                // Show Critical Requirements button
+                actions.push({
+                  label: 'Req. Críticos',
+                  icon: AlertCircle,
+                  variant: 'outline' as const,
+                  priority: 'secondary' as const,
+                  onClick: () => handleShowCriticalRequirements(plan.id)
+                });
+
                 // Tertiary action: Cancel (least prominent, destructive)
                 if (!['completed', 'cancelled'].includes(plan.status)) {
                   actions.push({