Feat ERP 3

frontend/counter-panel/src/pages/UniversalPosPage.tsx

@@ -9,8 +9,9 @@ import PaymentModal, { type Payment } from '../components/PaymentModal';
 import { orderService } from '../services/orderService';
 import type { CreateOrderRequest } from '../types/Order';
 import AdEditorModal from '../components/POS/AdEditorModal';
-// Importamos el componente de búsqueda de clientes para el modal (Asumiremos que existe o usamos un simple prompt por ahora para no extender demasiado, idealmente ClientSearchModal)
-// import ClientSearchModal from '../components/POS/ClientSearchModal'; 
+import ClientCreateModal from '../components/POS/ClientCreateModal';
+import ClientSearchModal from '../components/POS/ClientSearchModal';
+import { AnimatePresence } from 'framer-motion';
 
 export default function UniversalPosPage() {
   const { showToast } = useToast();
@@ -23,6 +24,8 @@ export default function UniversalPosPage() {
   // Estados de Modales
   const [showAdEditor, setShowAdEditor] = useState(false);
   const [selectedAdProduct, setSelectedAdProduct] = useState<Product | null>(null);
+  const [showCreateClient, setShowCreateClient] = useState(false);
+  const [showClientSearch, setShowClientSearch] = useState(false);
 
   // Estado de carga para agregar combos (puede tardar un poco en traer los hijos)
   const [addingProduct, setAddingProduct] = useState(false);
@@ -56,17 +59,6 @@ export default function UniversalPosPage() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [items, clientId]); // Dependencias para que handleCheckout tenga el estado fresco
 
-  const handleChangeClient = () => {
-    // Aquí abriríamos el ClientSearchModal.
-    // Para no bloquear, simulamos un cambio rápido o un prompt simple si no hay modal aún.
-    // En producción: setShowClientModal(true);
-    const id = prompt("Ingrese ID de Cliente (Simulación F7):", "1003");
-    if (id) {
-      // Buscar nombre real en API...
-      setClient(parseInt(id), "Cliente #" + id);
-    }
-  };
-
   const handleProductSelect = async (product: Product) => {
     setAddingProduct(true);
     try {
@@ -122,6 +114,29 @@ export default function UniversalPosPage() {
     setShowPayment(true);
   };
 
+  const handleChangeClient = () => {
+    setShowClientSearch(true);
+  };
+
+  // Callback cuando seleccionan del buscador
+  const handleClientSelected = (client: { id: number; name: string }) => {
+    setClient(client.id, client.name);
+    // showClientSearch se cierra automáticamente por el componente, o lo forzamos aquí si es necesario
+    // El componente ClientSearchModal llama a onClose internamente después de onSelect
+  };
+
+  // Callback cuando crean uno nuevo
+  const handleClientCreated = (client: { id: number; name: string }) => {
+    setClient(client.id, client.name);
+    setShowCreateClient(false);
+  };
+
+  // Función puente: Del Buscador -> Al Creador
+  const switchToCreate = () => {
+    setShowClientSearch(false);
+    setTimeout(() => setShowCreateClient(true), 100); // Pequeño delay para transición suave
+  };
+
   const finalizeOrder = async (_payments: Payment[], isCreditSale: boolean) => {
     setIsProcessing(true);
     try {
@@ -297,6 +312,27 @@ export default function UniversalPosPage() {
           clientId={clientId || 1005}
         />
       )}
+
+      {/* MODAL DE BÚSQUEDA DE CLIENTE (F7) */}
+      <AnimatePresence>
+        {showClientSearch && (
+          <ClientSearchModal
+            onClose={() => setShowClientSearch(false)}
+            onSelect={handleClientSelected}
+            onCreateNew={switchToCreate}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* MODAL DE ALTA RÁPIDA */}
+      <AnimatePresence>
+        {showCreateClient && (
+          <ClientCreateModal
+            onClose={() => setShowCreateClient(false)}
+            onSuccess={handleClientCreated}
+          />
+        )}
+      </AnimatePresence>
     </div>
   );
 }