Add improved production UI 3

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Plus, ShoppingCart, Truck, Euro, Calendar, Clock, CheckCircle, AlertCircle, Package, Eye, Loader, Edit, ArrowRight, X, Save, Building2, Play } from 'lucide-react';
+import { Plus, ShoppingCart, Truck, Euro, Calendar, Clock, CheckCircle, AlertCircle, Package, Eye, Loader, Edit, ArrowRight, X, Save, Building2, Play, Zap, User } from 'lucide-react';
 import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { PageHeader } from '../../../../components/layout';
@@ -28,6 +28,7 @@ const ProcurementPage: React.FC = () => {
   const [selectedRequirement, setSelectedRequirement] = useState<any>(null);
   const [showCreatePurchaseOrderModal, setShowCreatePurchaseOrderModal] = useState(false);
   const [selectedRequirementsForPO, setSelectedRequirementsForPO] = useState<any[]>([]);
+  const [isAIMode, setIsAIMode] = useState(true);
   const [generatePlanForm, setGeneratePlanForm] = useState({
     plan_date: new Date().toISOString().split('T')[0],
     planning_horizon_days: 14,
@@ -253,28 +254,63 @@ const ProcurementPage: React.FC = () => {
 
   return (
     <div className="space-y-6">
-      <PageHeader
-        title="Planificación de Compras"
-        description="Administra planes de compras, requerimientos y análisis de procurement"
-        actions={[
-          {
-            id: "create-po",
-            label: "Crear Orden de Compra",
-            variant: "primary" as const,
-            icon: Plus,
-            onClick: () => {
-              // Open the purchase order modal with empty requirements
-              // This allows manual creation of purchase orders without procurement plans
-              setSelectedRequirementsForPO([]);
-              setShowCreatePurchaseOrderModal(true);
-            }
-          },
-          {
-            id: "trigger",
-            label: triggerSchedulerMutation.isPending ? "Ejecutando..." : "Ejecutar Programador",
-            variant: "outline" as const,
-            icon: triggerSchedulerMutation.isPending ? Loader : Calendar,
-            onClick: () => {
+      <div className="flex items-center justify-between mb-6">
+        <PageHeader
+          title="Planificación de Compras"
+          description="Administra planes de compras, requerimientos y análisis de procurement"
+        />
+        <div className="flex items-center gap-4">
+          {/* AI/Manual Mode Segmented Control */}
+          <div className="inline-flex p-1 bg-[var(--surface-secondary)] rounded-xl border border-[var(--border-primary)] shadow-sm">
+            <button
+              onClick={() => setIsAIMode(true)}
+              className={`
+                flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out
+                ${isAIMode
+                  ? 'bg-[var(--color-primary)] text-white shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-tertiary)]'
+                }
+              `}
+            >
+              <Zap className="w-4 h-4" />
+              Automático IA
+            </button>
+            <button
+              onClick={() => setIsAIMode(false)}
+              className={`
+                flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out
+                ${!isAIMode
+                  ? 'bg-[var(--color-primary)] text-white shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-tertiary)]'
+                }
+              `}
+            >
+              <User className="w-4 h-4" />
+              Manual
+            </button>
+          </div>
+
+          {/* Action Buttons */}
+          {!isAIMode && (
+            <Button
+              variant="primary"
+              onClick={() => {
+                // Open the purchase order modal with empty requirements
+                // This allows manual creation of purchase orders without procurement plans
+                setSelectedRequirementsForPO([]);
+                setShowCreatePurchaseOrderModal(true);
+              }}
+              className="flex items-center gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              Crear Orden de Compra
+            </Button>
+          )}
+
+          {/* Testing button - keep for development */}
+          <Button
+            variant="outline"
+            onClick={() => {
               triggerSchedulerMutation.mutate(tenantId, {
                 onSuccess: (data) => {
                   // Scheduler executed successfully
@@ -287,11 +323,19 @@ const ProcurementPage: React.FC = () => {
                   // toast.error('Error ejecutando el programador de compras');
                 }
               })
-            },
-            disabled: triggerSchedulerMutation.isPending
-          }
-        ]}
-      />
+            }}
+            disabled={triggerSchedulerMutation.isPending}
+            className="flex items-center gap-2"
+          >
+            {triggerSchedulerMutation.isPending ? (
+              <Loader className="w-4 h-4 animate-spin" />
+            ) : (
+              <Calendar className="w-4 h-4" />
+            )}
+            {triggerSchedulerMutation.isPending ? "Ejecutando..." : "Ejecutar Programador"}
+          </Button>
+        </div>
+      </div>
 
       {/* Stats Grid */}
       {isDashboardLoading ? (