Add improved production UI

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

@@ -3,6 +3,7 @@ import { Plus, ShoppingCart, Truck, Euro, Calendar, Clock, CheckCircle, AlertCir
 import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { PageHeader } from '../../../../components/layout';
+import { CreatePurchaseOrderModal } from '../../../../components/domain/procurement/CreatePurchaseOrderModal';
 import {
   useProcurementDashboard,
   useProcurementPlans,
@@ -25,6 +26,8 @@ const ProcurementPage: React.FC = () => {
   const [showGeneratePlanModal, setShowGeneratePlanModal] = useState(false);
   const [showRequirementDetailsModal, setShowRequirementDetailsModal] = useState(false);
   const [selectedRequirement, setSelectedRequirement] = useState<any>(null);
+  const [showCreatePurchaseOrderModal, setShowCreatePurchaseOrderModal] = useState(false);
+  const [selectedRequirementsForPO, setSelectedRequirementsForPO] = useState<any[]>([]);
   const [generatePlanForm, setGeneratePlanForm] = useState({
     plan_date: new Date().toISOString().split('T')[0],
     planning_horizon_days: 14,
@@ -255,11 +258,16 @@ const ProcurementPage: React.FC = () => {
         description="Administra planes de compras, requerimientos y análisis de procurement"
         actions={[
           {
-            id: "generate",
-            label: "Generar Plan",
+            id: "create-po",
+            label: "Crear Orden de Compra",
             variant: "primary" as const,
             icon: Plus,
-            onClick: () => setShowGeneratePlanModal(true)
+            onClick: () => {
+              // Open the purchase order modal with empty requirements
+              // This allows manual creation of purchase orders without procurement plans
+              setSelectedRequirementsForPO([]);
+              setShowCreatePurchaseOrderModal(true);
+            }
           },
           {
             id: "trigger",
@@ -561,7 +569,21 @@ const ProcurementPage: React.FC = () => {
                   <Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
                 </div>
               ) : planRequirements && planRequirements.length > 0 ? (
-                <div className="grid gap-4">
+                <div className="space-y-4">
+                  <div className="flex justify-end mb-4">
+                    <Button
+                      variant="primary"
+                      onClick={() => {
+                        // Set all requirements for PO creation
+                        setSelectedRequirementsForPO(planRequirements);
+                        setShowCreatePurchaseOrderModal(true);
+                      }}
+                    >
+                      <Plus className="w-4 h-4 mr-2" />
+                      Crear Orden de Compra para Todos
+                    </Button>
+                  </div>
+                  
                   {planRequirements.map((requirement) => (
                     <StatusCard
                       key={requirement.id}
@@ -619,7 +641,9 @@ const ProcurementPage: React.FC = () => {
                             variant: 'outline' as const,
                             priority: 'secondary' as const,
                             onClick: () => {
-                              // TODO: Create purchase order for requirement
+                              // Set the single requirement for PO creation
+                              setSelectedRequirementsForPO([requirement]);
+                              setShowCreatePurchaseOrderModal(true);
                             }
                           }
                         ]),
@@ -954,6 +978,23 @@ const ProcurementPage: React.FC = () => {
         </div>
       )}
 
+      {/* Create Purchase Order Modal */}
+      {showCreatePurchaseOrderModal && (
+        <CreatePurchaseOrderModal
+          isOpen={showCreatePurchaseOrderModal}
+          onClose={() => {
+            setShowCreatePurchaseOrderModal(false);
+            setSelectedRequirementsForPO([]);
+          }}
+          requirements={selectedRequirementsForPO}
+          onSuccess={() => {
+            // Refresh the plan requirements data
+            setSelectedRequirementsForPO([]);
+            // You might want to invalidate queries here to refresh data
+          }}
+        />
+      )}
+
       {/* Requirement Details Modal */}
       {showRequirementDetailsModal && selectedRequirement && (
         <div className="fixed top-[var(--header-height)] left-0 right-0 bottom-0 bg-black bg-opacity-50 flex items-center justify-center z-40">