feat(suppliers-orders): sincronizar modulo de proveedores, gestion de pedidos, api evolution v2 y compilacion apk en todas las aplicaciones

almeira-store-app/src/app/admin/layout.tsx

@@ -15,6 +15,7 @@ import {
   Store,
   Users,
   MessageSquare,
+  Building2,
 } from 'lucide-react';
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -22,6 +23,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   const NAV_ITEMS = [
     { href: '/admin', label: 'Resumen & KPIs', icon: LayoutDashboard },
+    { href: '/admin/proveedores', label: 'Proveedores & Bodegas', icon: Building2, badge: 'Activos/Inactivos' },
     { href: '/admin/grupos-whatsapp', label: 'Grupos WhatsApp', icon: MessageSquare, badge: 'Monitoreo 24/7' },
     { href: '/admin/usuarios', label: 'Control de Usuarios', icon: Users, badge: 'Roles & Accesos' },
     { href: '/admin/configuracion', label: 'Datos de la Tienda', icon: Store },

almeira-store-app/src/app/admin/productos/page.tsx

@@ -33,6 +33,11 @@ export default function AdminProductsPage() {
       .then((r) => r.json())
       .then((d) => d.success && setProducts(d.products))
       .catch(() => {});
+
+    fetch('/api/suppliers?all=true')
+      .then((r) => r.json())
+      .then((d) => d.success && d.suppliers && setSuppliers(d.suppliers))
+      .catch(() => {});
   }, []);
 
   const handleToggleProductStatus = async (product: Product) => {

almeira-store-app/src/app/admin/proveedores/page.tsx

@@ -0,0 +1,593 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Building2,
+  Plus,
+  Search,
+  CheckCircle2,
+  XCircle,
+  Phone,
+  MapPin,
+  MessageCircle,
+  Edit2,
+  Power,
+  Package,
+  ShieldCheck,
+  FileText,
+  User,
+  Info,
+  Layers,
+  Sparkles,
+} from 'lucide-react';
+import { Supplier, Product } from '@/types';
+import { INITIAL_SUPPLIERS } from '@/lib/data-service';
+
+export default function AdminSuppliersPage() {
+  const [suppliers, setSuppliers] = useState<Supplier[]>(INITIAL_SUPPLIERS);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [toast, setToast] = useState<string | null>(null);
+
+  // Modal State
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingSupplier, setEditingSupplier] = useState<Supplier | null>(null);
+
+  // Form fields
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [contactPerson, setContactPerson] = useState('');
+  const [address, setAddress] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSuppliers();
+    fetchProducts();
+  }, []);
+
+  const fetchSuppliers = async () => {
+    try {
+      const res = await fetch('/api/suppliers?all=true');
+      const data = await res.json();
+      if (data.success && data.suppliers) {
+        setSuppliers(data.suppliers);
+      }
+    } catch (e) {
+      console.error('Error fetching suppliers:', e);
+    }
+  };
+
+  const fetchProducts = async () => {
+    try {
+      const res = await fetch('/api/products?all=true');
+      const data = await res.json();
+      if (data.success && data.products) {
+        setProducts(data.products);
+      }
+    } catch (e) {
+      console.error('Error fetching products:', e);
+    }
+  };
+
+  const handleOpenCreateModal = () => {
+    setEditingSupplier(null);
+    setName('');
+    setPhone('57');
+    setContactPerson('');
+    setAddress('');
+    setNotes('');
+    setIsActive(true);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEditModal = (supplier: Supplier) => {
+    setEditingSupplier(supplier);
+    setName(supplier.name);
+    setPhone(supplier.phone);
+    setContactPerson(supplier.contactPerson || '');
+    setAddress(supplier.address || '');
+    setNotes(supplier.notes || '');
+    setIsActive(supplier.isActive !== false);
+    setIsModalOpen(true);
+  };
+
+  const handleToggleActive = async (supplier: Supplier) => {
+    const nextStatus = !supplier.isActive;
+    
+    // Optimistic update
+    setSuppliers((prev) =>
+      prev.map((s) => (s.id === supplier.id ? { ...s, isActive: nextStatus } : s))
+    );
+
+    try {
+      const res = await fetch('/api/suppliers', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: supplier.id,
+          updates: { isActive: nextStatus },
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setToast(
+          nextStatus
+            ? `🟢 Proveedor "${supplier.name}" ACTIVADO exitosamente.`
+            : `⚪ Proveedor "${supplier.name}" DESACTIVADO. Su información histórica y pedidos continúan 100% seguros.`
+        );
+        setTimeout(() => setToast(null), 4500);
+      }
+    } catch (e) {
+      console.error('Error toggling supplier active status:', e);
+      fetchSuppliers();
+    }
+  };
+
+  const handleSaveSupplier = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+
+    const cleanPhone = phone.replace(/\D/g, '');
+    const finalPhone = cleanPhone.startsWith('57') ? cleanPhone : `57${cleanPhone}`;
+
+    try {
+      if (editingSupplier) {
+        // Edit existing
+        const res = await fetch('/api/suppliers', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: editingSupplier.id,
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✅ Proveedor "${name}" actualizado con éxito.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      } else {
+        // Create new
+        const res = await fetch('/api/suppliers', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✨ Proveedor "${name}" registrado correctamente.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleOpenWhatsApp = (supplier: Supplier) => {
+    const cleanPhone = supplier.phone.startsWith('57') ? supplier.phone : `57${supplier.phone}`;
+    const text = encodeURIComponent(
+      `👋 Hola ${supplier.contactPerson || supplier.name}! Te escribo desde el panel de control de Almeira Store.`
+    );
+    window.open(`https://wa.me/${cleanPhone}?text=${text}`, '_blank');
+  };
+
+  // Metrics
+  const activeSuppliers = suppliers.filter((s) => s.isActive !== false);
+  const inactiveSuppliers = suppliers.filter((s) => s.isActive === false);
+
+  const filteredSuppliers = suppliers.filter((s) => {
+    const matchesSearch =
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.phone.includes(search) ||
+      (s.contactPerson && s.contactPerson.toLowerCase().includes(search.toLowerCase())) ||
+      (s.address && s.address.toLowerCase().includes(search.toLowerCase())) ||
+      (s.notes && s.notes.toLowerCase().includes(search.toLowerCase()));
+
+    if (!matchesSearch) return false;
+    if (statusFilter === 'active' && s.isActive === false) return false;
+    if (statusFilter === 'inactive' && s.isActive !== false) return false;
+    return true;
+  });
+
+  const getProductCountForSupplier = (supplierId: string, supplierName: string) => {
+    return products.filter(
+      (p) => p.supplierId === supplierId || (p.supplierName && p.supplierName.toLowerCase() === supplierName.toLowerCase())
+    ).length;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-black text-white flex items-center gap-2">
+            <Building2 className="w-6 h-6 text-cyan-400" />
+            <span>Proveedores & Bodegas Aliadas ({suppliers.length})</span>
+          </h1>
+          <p className="text-xs text-slate-400 mt-1">
+            Activa o desactiva proveedores en 1 clic <strong>sin perder el histórico de pedidos, productos ni trazabilidad logística</strong>.
+          </p>
+        </div>
+
+        <button
+          onClick={handleOpenCreateModal}
+          className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold text-xs px-4 py-2.5 rounded-2xl flex items-center space-x-2 shadow-lg cursor-pointer transition-all active:scale-95 self-start sm:self-auto"
+        >
+          <Plus className="w-4 h-4" />
+          <span>Nuevo Proveedor</span>
+        </button>
+      </div>
+
+      {toast && (
+        <div className="bg-cyan-950/90 border border-cyan-500 text-cyan-200 px-4 py-3 rounded-2xl text-xs flex items-center justify-between shadow-xl animate-in fade-in">
+          <span>{toast}</span>
+          <button onClick={() => setToast(null)} className="font-bold text-white cursor-pointer ml-3">
+            ✕
+          </button>
+        </div>
+      )}
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3.5">
+        <div className="bg-slate-900 border border-slate-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-slate-400 text-xs font-bold uppercase tracking-wider">
+            <span>Total Proveedores</span>
+            <Building2 className="w-4 h-4 text-cyan-400" />
+          </div>
+          <p className="text-2xl font-black text-white">{suppliers.length}</p>
+          <p className="text-[10px] text-slate-400">Bodegas y mayoristas registrados</p>
+        </div>
+
+        <div className="bg-slate-900 border border-emerald-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-emerald-400 text-xs font-bold uppercase tracking-wider">
+            <span>Proveedores Activos</span>
+            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+          </div>
+          <p className="text-2xl font-black text-emerald-300">{activeSuppliers.length}</p>
+          <p className="text-[10px] text-emerald-400/80">Disponibles para nuevas zapatillas y pedidos</p>
+        </div>
+
+        <div className="bg-slate-900 border border-amber-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-amber-400 text-xs font-bold uppercase tracking-wider">
+            <span>Desactivados / Históricos</span>
+            <XCircle className="w-4 h-4 text-amber-400" />
+          </div>
+          <p className="text-2xl font-black text-amber-300">{inactiveSuppliers.length}</p>
+          <p className="text-[10px] text-slate-400">Historial preservado 100% intacto</p>
+        </div>
+
+        <div className="bg-slate-900 border border-slate-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-slate-400 text-xs font-bold uppercase tracking-wider">
+            <span>Zapatillas Vinculadas</span>
+            <Package className="w-4 h-4 text-purple-400" />
+          </div>
+          <p className="text-2xl font-black text-purple-300">{products.length}</p>
+          <p className="text-[10px] text-slate-400">Modelos en catálogo</p>
+        </div>
+      </div>
+
+      {/* Info Banner About Historical Safety */}
+      <div className="bg-gradient-to-r from-slate-900 via-slate-900 to-cyan-950/40 border border-cyan-500/20 rounded-3xl p-4 flex items-start space-x-3 text-xs text-slate-300 shadow-md">
+        <Info className="w-5 h-5 text-cyan-400 shrink-0 mt-0.5" />
+        <div className="space-y-1">
+          <p className="font-bold text-white">
+            🛡️ Trazabilidad & Protección Histórica Garantizada
+          </p>
+          <p className="text-[11px] text-slate-400">
+            Al desactivar un proveedor, <strong>ningún pedido pasado se altera ni se pierde</strong>. Los manifiestos de despacho, reportes financieros y costos mayoristas de pedidos anteriores conservan su información original. El proveedor simplemente se oculta para nuevas asignaciones de zapatillas.
+          </p>
+        </div>
+      </div>
+
+      {/* Filter and Search Bar */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+        <div className="flex items-center space-x-1.5 bg-slate-900 border border-slate-800 p-1 rounded-2xl overflow-x-auto">
+          <button
+            onClick={() => setStatusFilter('all')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all ${
+              statusFilter === 'all' ? 'bg-white text-slate-950 shadow' : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            Todos ({suppliers.length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('active')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'active'
+                ? 'bg-emerald-500/30 border border-emerald-500/50 text-emerald-300 shadow'
+                : 'text-slate-400 hover:text-emerald-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-emerald-400" />
+            <span>Activos ({activeSuppliers.length})</span>
+          </button>
+          <button
+            onClick={() => setStatusFilter('inactive')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'inactive'
+                ? 'bg-amber-500/30 border border-amber-500/50 text-amber-300 shadow'
+                : 'text-slate-400 hover:text-amber-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-amber-400" />
+            <span>Inactivos ({inactiveSuppliers.length})</span>
+          </button>
+        </div>
+
+        <div className="max-w-xs w-full">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Buscar proveedor, teléfono o bodega..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-9 pr-3.5 py-2 text-xs text-white outline-hidden focus:border-cyan-400"
+            />
+            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          </div>
+        </div>
+      </div>
+
+      {/* Supplier Cards Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filteredSuppliers.length === 0 ? (
+          <div className="col-span-full bg-slate-900 border border-slate-800 rounded-3xl p-12 text-center text-slate-500 space-y-2">
+            <Building2 className="w-12 h-12 text-slate-600 mx-auto" />
+            <p className="font-bold text-white text-sm">No se encontraron proveedores</p>
+            <p className="text-xs">Prueba con otro término de búsqueda o cambia los filtros.</p>
+          </div>
+        ) : (
+          filteredSuppliers.map((supplier) => {
+            const isSupActive = supplier.isActive !== false;
+            const linkedProductsCount = getProductCountForSupplier(supplier.id, supplier.name);
+
+            return (
+              <div
+                key={supplier.id}
+                className={`bg-slate-900 border rounded-3xl p-5 shadow-xl transition-all flex flex-col justify-between space-y-4 ${
+                  isSupActive
+                    ? 'border-slate-800 hover:border-cyan-500/40'
+                    : 'border-slate-800/80 opacity-75 bg-slate-950/60'
+                }`}
+              >
+                {/* Card Top: Status & Name */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span
+                      className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border flex items-center gap-1 ${
+                        isSupActive
+                          ? 'bg-emerald-500/20 border-emerald-500/40 text-emerald-300'
+                          : 'bg-amber-500/20 border-amber-500/40 text-amber-300'
+                      }`}
+                    >
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${
+                          isSupActive ? 'bg-emerald-400 animate-pulse' : 'bg-amber-400'
+                        }`}
+                      />
+                      <span>{isSupActive ? 'Activo para Pedidos' : 'Inactivo (Histórico Seguro)'}</span>
+                    </span>
+
+                    <button
+                      onClick={() => handleToggleActive(supplier)}
+                      className={`text-[11px] font-bold px-2.5 py-1 rounded-xl border flex items-center gap-1 cursor-pointer transition-all ${
+                        isSupActive
+                          ? 'bg-red-500/10 border-red-500/30 text-red-400 hover:bg-red-500/20'
+                          : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20'
+                      }`}
+                      title={isSupActive ? 'Desactivar proveedor (conserva historial)' : 'Reactivar proveedor'}
+                    >
+                      <Power className="w-3 h-3" />
+                      <span>{isSupActive ? 'Desactivar' : 'Activar'}</span>
+                    </button>
+                  </div>
+
+                  <h3 className="font-black text-white text-base leading-snug">{supplier.name}</h3>
+
+                  {/* Details List */}
+                  <div className="space-y-1.5 text-xs pt-1">
+                    {supplier.contactPerson && (
+                      <p className="text-slate-300 flex items-center gap-1.5">
+                        <User className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+                        <span>Contacto: <strong className="text-white">{supplier.contactPerson}</strong></span>
+                      </p>
+                    )}
+
+                    <p className="text-slate-300 flex items-center gap-1.5">
+                      <Phone className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                      <span className="font-mono text-emerald-300 font-semibold">{supplier.phone}</span>
+                    </p>
+
+                    {supplier.address && (
+                      <p className="text-slate-400 flex items-center gap-1.5 text-[11px]">
+                        <MapPin className="w-3.5 h-3.5 text-purple-400 shrink-0" />
+                        <span>{supplier.address}</span>
+                      </p>
+                    )}
+
+                    {supplier.notes && (
+                      <p className="text-slate-400 italic text-[11px] bg-slate-950 p-2 rounded-xl border border-slate-800 mt-1">
+                        "{supplier.notes}"
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Card Bottom: Metrics & Actions */}
+                <div className="pt-3 border-t border-slate-800 space-y-3">
+                  <div className="flex items-center justify-between text-xs text-slate-400">
+                    <span className="flex items-center gap-1">
+                      <Package className="w-3.5 h-3.5 text-purple-400" />
+                      <span>Modelos asignados:</span>
+                    </span>
+                    <strong className="text-white bg-slate-950 px-2 py-0.5 rounded-lg border border-slate-800">
+                      {linkedProductsCount} pares
+                    </strong>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <button
+                      onClick={() => handleOpenWhatsApp(supplier)}
+                      className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer shadow transition-all active:scale-95"
+                    >
+                      <MessageCircle className="w-3.5 h-3.5" />
+                      <span>WhatsApp</span>
+                    </button>
+
+                    <button
+                      onClick={() => handleOpenEditModal(supplier)}
+                      className="bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer transition-all active:scale-95"
+                    >
+                      <Edit2 className="w-3.5 h-3.5 text-cyan-400" />
+                      <span>Modificar</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Modal Crear / Editar Proveedor */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
+          <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 space-y-4 shadow-2xl">
+            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
+              <h3 className="font-black text-white text-base flex items-center gap-2">
+                <Building2 className="w-5 h-5 text-cyan-400" />
+                <span>{editingSupplier ? 'Modificar Proveedor' : 'Registrar Nuevo Proveedor'}</span>
+              </h3>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-slate-400 hover:text-white cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            <form onSubmit={handleSaveSupplier} className="space-y-4 text-xs">
+              <div>
+                <label className="block text-slate-400 font-bold mb-1">Nombre Comercial / Bodega *</label>
+                <input
+                  type="text"
+                  required
+                  placeholder="Ej. 💎 DIFUSIÓN JOVIC STORE COLOMBIA"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-cyan-400 font-semibold"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-emerald-400 font-bold mb-1">Celular / WhatsApp *</label>
+                  <input
+                    type="tel"
+                    required
+                    placeholder="ej: 573167455877"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-emerald-300 outline-hidden focus:border-emerald-400 font-mono font-bold"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-slate-400 font-bold mb-1">Persona de Contacto</label>
+                  <input
+                    type="text"
+                    placeholder="Ej. Asesor Despachos"
+                    value={contactPerson}
+                    onChange={(e) => setContactPerson(e.target.value)}
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-cyan-400"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-slate-400 font-bold mb-1">Ubicación / Dirección de la Bodega</label>
+                <input
+                  type="text"
+                  placeholder="Ej. CC MÍO Local 3B / San Andresito Cali"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-cyan-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-slate-400 font-bold mb-1">Notas / Políticas de Garantía & Horarios</label>
+                <textarea
+                  rows={3}
+                  placeholder="Ej. Especialista en Nike/Jordan Top Quality. Recogida de 9:00 AM a 6:00 PM."
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-cyan-400"
+                />
+              </div>
+
+              <div className="bg-slate-950 p-3 rounded-2xl border border-slate-800 flex items-center justify-between">
+                <div>
+                  <p className="font-bold text-white text-xs">Estado del Proveedor</p>
+                  <p className="text-[10px] text-slate-400">
+                    {isActive
+                      ? '🟢 Activo: disponible para asignar nuevas zapatillas y recibir pedidos'
+                      : '⚪ Desactivado: no aparecerá en nuevas publicaciones (el historial se mantiene)'}
+                  </p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isActive}
+                    onChange={(e) => setIsActive(e.target.checked)}
+                    className="sr-only peer"
+                  />
+                  <div className="w-11 h-6 bg-slate-800 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
+                </label>
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-2 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold py-2.5 px-4 rounded-xl cursor-pointer"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold py-2.5 px-5 rounded-xl shadow-lg cursor-pointer transition-all disabled:opacity-50"
+                >
+                  {isSaving ? 'Guardando...' : editingSupplier ? 'Actualizar Proveedor' : 'Guardar Proveedor'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

almeira-store-app/src/app/api/orders/route.ts

@@ -28,3 +28,49 @@ export async function POST(request: Request) {
     return NextResponse.json({ success: false, error: error.message }, { status: 400 });
   }
 }
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateOrder(targetId, payload);
+
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Orden no encontrada' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, order: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const deleted = dataService.deleteOrder(id);
+    return NextResponse.json({ success: deleted, message: deleted ? 'Orden eliminada correctamente' : 'No se encontró la orden' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

almeira-store-app/src/app/api/suppliers/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server';
+import { dataService } from '@/lib/data-service';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const includeInactive = searchParams.get('all') === 'true' || searchParams.get('includeInactive') === 'true';
+    const suppliers = dataService.getSuppliers(includeInactive);
+    return NextResponse.json({ success: true, suppliers });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    if (!body.name || !body.phone) {
+      return NextResponse.json({ success: false, error: 'El nombre y el teléfono son requeridos' }, { status: 400 });
+    }
+    const newSupplier = dataService.addSupplier(body);
+    return NextResponse.json({ success: true, supplier: newSupplier });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateSupplier(targetId, payload);
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Proveedor no encontrado' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, supplier: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    // Soft-deactivate to ensure 100% preservation of historical orders & catalog references
+    const success = dataService.deleteSupplier(id);
+    return NextResponse.json({ success, message: 'Proveedor desactivado correctamente sin perder historial' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

almeira-store-app/src/components/mobile/MobileBottomDock.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { Home, Search, ShoppingBag, MessageCircle, Download, Check } from 'lucide-react';
+import { Home, Search, ShoppingBag, MessageCircle, Download, User } from 'lucide-react';
 import { useBrand } from '@/context/BrandContext';
 
 interface MobileBottomDockProps {
@@ -20,6 +20,18 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
 }) => {
   const { currentBrand } = useBrand();
   const [activeTab, setActiveTab] = useState('home');
+  const [isInsideApp, setIsInsideApp] = useState(false);
+
+  useEffect(() => {
+    const isNativeApp =
+      typeof window !== 'undefined' &&
+      (!!(window as any).Capacitor?.isNativePlatform?.() ||
+        (window as any).Capacitor?.getPlatform?.() === 'android' ||
+        (window as any).Capacitor?.getPlatform?.() === 'ios' ||
+        window.matchMedia?.('(display-mode: standalone)')?.matches ||
+        (window.navigator as any)?.standalone === true);
+    setIsInsideApp(isNativeApp);
+  }, []);
 
   const handleWhatsApp = () => {
     const text = encodeURIComponent(
@@ -88,17 +100,28 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold">WhatsApp</span>
         </button>
 
-        {/* 5. Instalar App */}
+        {/* 5. App Móvil (solo en Web) vs Perfil/Admin (si ya está en la App) */}
+        {!isInsideApp ? (
           <button
             onClick={onOpenInstallModal}
-          className={`flex flex-col items-center gap-0.5 cursor-pointer text-cyan-400 hover:text-cyan-300`}
+            className="flex flex-col items-center gap-0.5 cursor-pointer text-cyan-400 hover:text-cyan-300"
           >
             <div className="relative">
               <Download className="w-5 h-5 animate-bounce" />
             </div>
             <span className="text-[10px] font-bold">App Móvil</span>
           </button>
+        ) : (
+          <Link
+            href="/admin"
+            className="flex flex-col items-center gap-0.5 cursor-pointer text-slate-400 hover:text-white"
+          >
+            <User className="w-5 h-5" />
+            <span className="text-[10px] font-bold">Admin</span>
+          </Link>
+        )}
       </div>
     </div>
   );
 };
+

almeira-store-app/src/context/AuthContext.tsx

@@ -5,6 +5,8 @@ import { User } from '@/types';
 
 interface AuthContextType {
   user: User | null;
+  sendOtp: (identifier: string) => Promise<{ success: boolean; error?: string; message?: string; phone?: string }>;
+  verifyOtp: (identifier: string, code: string) => Promise<{ success: boolean; error?: string }>;
   login: (identifier: string) => Promise<{ success: boolean; error?: string }>;
   register: (data: { name: string; email: string; phone: string; city?: string; address?: string }) => Promise<{ success: boolean; error?: string }>;
   logout: () => void;
@@ -28,26 +30,47 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   }, []);
 
-  const login = async (identifier: string) => {
+  const sendOtp = async (identifier: string) => {
     try {
-      const res = await fetch('/api/auth/login', {
+      const res = await fetch('/api/auth/send-otp', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ identifier }),
       });
       const data = await res.json();
+      if (data.success) {
+        return { success: true, message: data.message, phone: data.phone };
+      }
+      return { success: false, error: data.error || 'Error al enviar código' };
+    } catch (e: any) {
+      return { success: false, error: e.message };
+    }
+  };
+
+  const verifyOtp = async (identifier: string, code: string) => {
+    try {
+      const res = await fetch('/api/auth/verify-otp', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ identifier, code }),
+      });
+      const data = await res.json();
       if (data.success && data.user) {
         setUser(data.user);
         localStorage.setItem('almeira_user', JSON.stringify(data.user));
         setIsAuthModalOpen(false);
         return { success: true };
       }
-      return { success: false, error: data.error || 'Error al iniciar sesión' };
+      return { success: false, error: data.error || 'Código incorrecto' };
     } catch (e: any) {
       return { success: false, error: e.message };
     }
   };
 
+  const login = async (identifier: string) => {
+    return sendOtp(identifier);
+  };
+
   const register = async (data: { name: string; email: string; phone: string; city?: string; address?: string }) => {
     try {
       const res = await fetch('/api/auth/register', {
@@ -73,19 +96,18 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     localStorage.removeItem('almeira_user');
   };
 
-  const openAuthModal = () => setIsAuthModalOpen(true);
-  const closeAuthModal = () => setIsAuthModalOpen(false);
-
   return (
     <AuthContext.Provider
       value={{
         user,
+        sendOtp,
+        verifyOtp,
         login,
         register,
         logout,
         isAuthModalOpen,
-        openAuthModal,
+        openAuthModal: () => setIsAuthModalOpen(true),
-        closeAuthModal,
+        closeAuthModal: () => setIsAuthModalOpen(false),
       }}
     >
       {children}

almeira-store-app/src/lib/data-service.ts

@@ -2334,17 +2334,42 @@ class DataService {
     return this.products.length < initialLen;
   }
 
-  getSuppliers(): Supplier[] {
+  getSuppliers(includeInactive: boolean = true): Supplier[] {
-    return this.suppliers;
+    if (includeInactive) return this.suppliers;
+    return this.suppliers.filter((s) => s.isActive !== false);
   }
 
   getSupplierById(id: string): Supplier | undefined {
     return this.suppliers.find((s) => s.id === id);
   }
 
-  addSupplier(supplier: Supplier): Supplier {
+  addSupplier(supplier: Partial<Supplier>): Supplier {
-    this.suppliers.push(supplier);
+    const newSupplier: Supplier = {
-    return supplier;
+      id: supplier.id || `sup-${Date.now()}`,
+      name: supplier.name || 'Nuevo Proveedor',
+      phone: supplier.phone || '573167455877',
+      contactPerson: supplier.contactPerson || '',
+      address: supplier.address || '',
+      notes: supplier.notes || '',
+      isActive: supplier.isActive !== undefined ? supplier.isActive : true,
+    };
+    this.suppliers.push(newSupplier);
+    return newSupplier;
+  }
+
+  updateSupplier(id: string, updates: Partial<Supplier>): Supplier | null {
+    const idx = this.suppliers.findIndex((s) => s.id === id);
+    if (idx === -1) return null;
+    this.suppliers[idx] = { ...this.suppliers[idx], ...updates };
+    return this.suppliers[idx];
+  }
+
+  deleteSupplier(id: string): boolean {
+    // Soft delete (desactivación segura para preservar 100% el historial de pedidos y productos)
+    const supplier = this.suppliers.find((s) => s.id === id);
+    if (!supplier) return false;
+    supplier.isActive = false;
+    return true;
   }
 
   getCities(): City[] {
@@ -2382,6 +2407,10 @@ class DataService {
     return this.orders;
   }
 
+  getOrderById(id: string): Order | undefined {
+    return this.orders.find((o) => o.id === id);
+  }
+
   addOrder(order: Order): Order {
     this.orders.unshift(order);
     return order;
@@ -2389,7 +2418,7 @@ class DataService {
 
   createOrder(orderData: Partial<Order>): Order {
     const newOrder: Order = {
-      id: `ord-${Date.now()}`,
+      id: orderData.id || `ord-${Date.now()}`,
       customerName: orderData.customerName || 'Cliente',
       customerPhone: orderData.customerPhone || '',
       address: orderData.address || '',
@@ -2399,18 +2428,43 @@ class DataService {
       subtotal: orderData.subtotal || 0,
       shippingCost: orderData.shippingCost || 0,
       totalAmount: orderData.totalAmount || 0,
-      depositAmount: orderData.depositAmount || 10000,
+      depositAmount: orderData.depositAmount !== undefined ? orderData.depositAmount : 10000,
-      balanceDue: (orderData.totalAmount || 0) - (orderData.depositAmount || 10000),
+      balanceDue: orderData.balanceDue !== undefined ? orderData.balanceDue : ((orderData.totalAmount || 0) - (orderData.depositAmount !== undefined ? orderData.depositAmount : 10000)),
       paymentMethodId: orderData.paymentMethodId || 'pay-contraentrega',
       paymentMethodName: orderData.paymentMethodName || 'Contraentrega',
-      status: 'pending',
+      status: orderData.status || 'pending',
       notes: orderData.notes,
-      createdAt: new Date().toISOString(),
+      createdAt: orderData.createdAt || new Date().toISOString(),
     };
     this.orders.unshift(newOrder);
     return newOrder;
   }
 
+  updateOrder(id: string, updates: Partial<Order>): Order | null {
+    const idx = this.orders.findIndex((o) => o.id === id);
+    if (idx === -1) return null;
+
+    const current = this.orders[idx];
+    const total = updates.totalAmount !== undefined ? updates.totalAmount : current.totalAmount;
+    const deposit = updates.depositAmount !== undefined ? updates.depositAmount : current.depositAmount;
+    const balanceDue = updates.balanceDue !== undefined ? updates.balanceDue : (total - deposit);
+
+    this.orders[idx] = {
+      ...current,
+      ...updates,
+      totalAmount: total,
+      depositAmount: deposit,
+      balanceDue,
+    };
+    return this.orders[idx];
+  }
+
+  deleteOrder(id: string): boolean {
+    const initialLen = this.orders.length;
+    this.orders = this.orders.filter((o) => o.id !== id);
+    return this.orders.length < initialLen;
+  }
+
   updateOrderStatus(orderId: string, status: Order['status']): Order | null {
     const order = this.orders.find((o) => o.id === orderId);
     if (!order) return null;

almeira-store-app/src/lib/evolution-api.ts

@@ -6,30 +6,28 @@ const EVOLUTION_API_KEY = process.env.EVOLUTION_API_KEY || 'EE49029EEB85-4568-8F
 const EVOLUTION_INSTANCE_NAME = process.env.EVOLUTION_INSTANCE_NAME || 'AutomataAlmeira';
 
 /**
- * Enviar mensaje de texto por WhatsApp a través de Evolution API
+ * Enviar mensaje de texto por WhatsApp a través de Evolution API v2
  */
 export async function sendWhatsAppMessage(toPhone: string, message: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendText/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1200,
-          presence: 'composing',
-        },
-        textMessage: {
         text: message,
-        },
+        delay: 1200,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 20000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -40,32 +38,31 @@ export async function sendWhatsAppMessage(toPhone: string, message: string): Pro
 }
 
 /**
- * Enviar mensaje con foto/catálogo a través de Evolution API
+ * Enviar mensaje con foto/catálogo a través de Evolution API v2
  */
 export async function sendWhatsAppMedia(toPhone: string, imageUrl: string, caption: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendMedia/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1500,
-          presence: 'composing',
-        },
-        mediaMessage: {
         mediatype: 'image',
-          caption,
+        mimetype: 'image/jpeg',
+        caption: caption,
         media: imageUrl,
-        },
+        delay: 1500,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 25000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -83,7 +80,7 @@ export function buildOrderConfirmationMessage(order: any): string {
     .map((item: any) => `👟 *${item.productName}*\n   📏 Talla: *${item.size}* | Cantidad: ${item.quantity} | Valor: ${formatCOP(item.price)}`)
     .join('\n\n');
 
-  return `🎉 *¡GRACIAS POR TU PEDIDO EN SNEAKERS CALI!* 🎉
+  return `🎉 *¡GRACIAS POR TU PEDIDO EN ALMEIRA STORE!* 🎉
 📌 *No. de Orden:* #${order.id}
 
 👤 *Cliente:* ${order.customerName}

dripzone-app/src/app/admin/layout.tsx

@@ -16,6 +16,7 @@ import {
   Store,
   Users,
   MessageSquare,
+  Building2,
 } from 'lucide-react';
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -23,6 +24,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   const NAV_ITEMS = [
     { href: '/admin', label: 'Resumen & KPIs', icon: LayoutDashboard },
+    { href: '/admin/proveedores', label: 'Proveedores & Bodegas', icon: Building2, badge: 'Activos/Inactivos' },
     { href: '/admin/grupos-whatsapp', label: 'Grupos WhatsApp', icon: MessageSquare, badge: 'Monitoreo 24/7' },
     { href: '/admin/usuarios', label: 'Control de Usuarios', icon: Users, badge: 'Roles & Accesos' },
     { href: '/admin/configuracion', label: 'Datos de la Tienda', icon: Store },

dripzone-app/src/app/admin/pedidos/page.tsx

@@ -20,25 +20,90 @@ import {
   Sparkles,
   Compass,
   Check,
-  AlertCircle
+  AlertCircle,
+  Edit3,
+  Trash2,
+  Plus,
+  X,
+  CreditCard,
+  User,
+  FileText
 } from 'lucide-react';
-import { Order, OrderItem } from '@/types';
+import { Order, OrderItem, Supplier, City } from '@/types';
 import { formatCOP } from '@/lib/pricing-engine';
 
 export default function AdminOrdersPage() {
   const [orders, setOrders] = useState<Order[]>([]);
+  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
+  const [cities, setCities] = useState<City[]>([]);
   const [activeTab, setActiveTab] = useState<'individual' | 'suppliers' | 'routes'>('individual');
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [toastMessage, setToastMessage] = useState<string | null>(null);
 
+  // Edit Order Modal State
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editingOrder, setEditingOrder] = useState<Order | null>(null);
+  const [editCustomerName, setEditCustomerName] = useState('');
+  const [editCustomerPhone, setEditCustomerPhone] = useState('');
+  const [editAddress, setEditAddress] = useState('');
+  const [editCityId, setEditCityId] = useState('city-cali');
+  const [editCityName, setEditCityName] = useState('Cali');
+  const [editStatus, setEditStatus] = useState<Order['status']>('pending');
+  const [editPaymentMethodName, setEditPaymentMethodName] = useState('');
+  const [editTotalAmount, setEditTotalAmount] = useState(0);
+  const [editDepositAmount, setEditDepositAmount] = useState(10000);
+  const [editShippingCost, setEditShippingCost] = useState(0);
+  const [editNotes, setEditNotes] = useState('');
+  const [editItems, setEditItems] = useState<OrderItem[]>([]);
+  const [isSavingOrder, setIsSavingOrder] = useState(false);
+
+  // Delete Order Confirmation Modal State
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [orderToDelete, setOrderToDelete] = useState<Order | null>(null);
+
   useEffect(() => {
-    fetch('/api/orders')
+    fetchOrders();
-      .then((r) => r.json())
+    fetchSuppliers();
-      .then((d) => d.success && setOrders(d.orders))
+    fetchCities();
-      .catch(() => {});
   }, []);
 
+  const fetchOrders = async () => {
+    try {
+      const r = await fetch('/api/orders');
+      const d = await r.json();
+      if (d.success && d.orders) {
+        setOrders(d.orders);
+      }
+    } catch (e) {
+      console.error('Error loading orders:', e);
+    }
+  };
+
+  const fetchSuppliers = async () => {
+    try {
+      const r = await fetch('/api/suppliers?all=true');
+      const d = await r.json();
+      if (d.success && d.suppliers) {
+        setSuppliers(d.suppliers);
+      }
+    } catch (e) {
+      console.error('Error loading suppliers:', e);
+    }
+  };
+
+  const fetchCities = async () => {
+    try {
+      const r = await fetch('/api/cities');
+      const d = await r.json();
+      if (d.success && d.cities) {
+        setCities(d.cities);
+      }
+    } catch (e) {
+      console.error('Error loading cities:', e);
+    }
+  };
+
   const handleStatusChange = async (orderId: string, newStatus: Order['status']) => {
     setOrders((prev) =>
       prev.map((o) => (o.id === orderId ? { ...o, status: newStatus } : o))
@@ -51,14 +116,158 @@ export default function AdminOrdersPage() {
         body: JSON.stringify({ id: orderId, status: newStatus }),
       });
       setToastMessage(`Estado de la orden #${orderId} actualizado a "${newStatus}".`);
+      setTimeout(() => setToastMessage(null), 4000);
     } catch (e) {
       console.error(e);
     }
   };
 
+  // Open Edit Order Modal
+  const handleOpenEditModal = (order: Order) => {
+    setEditingOrder(order);
+    setEditCustomerName(order.customerName);
+    setEditCustomerPhone(order.customerPhone);
+    setEditAddress(order.address);
+    setEditCityId(order.cityId);
+    setEditCityName(order.cityName);
+    setEditStatus(order.status);
+    setEditPaymentMethodName(order.paymentMethodName || 'Contraentrega');
+    setEditTotalAmount(order.totalAmount);
+    setEditDepositAmount(order.depositAmount);
+    setEditShippingCost(order.shippingCost || 0);
+    setEditNotes(order.notes || '');
+    setEditItems([...order.items]);
+    setIsEditModalOpen(true);
+  };
+
+  // Handle Edit Item in Modal
+  const handleItemChange = (index: number, field: keyof OrderItem, value: any) => {
+    const updated = [...editItems];
+    updated[index] = { ...updated[index], [field]: value };
+
+    // If changing supplierId, auto update supplierName and supplierPhone
+    if (field === 'supplierName') {
+      const foundSup = suppliers.find((s) => s.name === value || s.id === value);
+      if (foundSup) {
+        updated[index].supplierName = foundSup.name;
+        updated[index].supplierPhone = foundSup.phone;
+      }
+    }
+
+    setEditItems(updated);
+
+    // Auto update total amount if prices/quantities change
+    if (field === 'price' || field === 'quantity') {
+      const newSubtotal = updated.reduce((acc, curr) => acc + (curr.price || 0) * (curr.quantity || 1), 0);
+      setEditTotalAmount(newSubtotal + editShippingCost);
+    }
+  };
+
+  const handleRemoveItemFromEdit = (index: number) => {
+    const updated = editItems.filter((_, idx) => idx !== index);
+    setEditItems(updated);
+    const newSubtotal = updated.reduce((acc, curr) => acc + (curr.price || 0) * (curr.quantity || 1), 0);
+    setEditTotalAmount(newSubtotal + editShippingCost);
+  };
+
+  const handleAddItemToEdit = () => {
+    const defaultSup = suppliers[0] || { name: 'DIFUSIÓN JOVIC STORE', phone: '573167455877' };
+    const newItem: OrderItem = {
+      productId: `prod-manual-${Date.now()}`,
+      productName: 'Nuevo Modelo / Zapatilla',
+      brand: 'Nike',
+      size: '39',
+      quantity: 1,
+      price: 125000,
+      supplierPrice: 90000,
+      supplierName: defaultSup.name,
+      supplierPhone: defaultSup.phone,
+      image: 'https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?auto=format&fit=crop&w=800&q=80',
+    };
+    const updated = [...editItems, newItem];
+    setEditItems(updated);
+    const newSubtotal = updated.reduce((acc, curr) => acc + (curr.price || 0) * (curr.quantity || 1), 0);
+    setEditTotalAmount(newSubtotal + editShippingCost);
+  };
+
+  // Save Order Updates
+  const handleSaveOrderEdits = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingOrder) return;
+    setIsSavingOrder(true);
+
+    const balanceDue = editTotalAmount - editDepositAmount;
+
+    const payload: Partial<Order> = {
+      id: editingOrder.id,
+      customerName: editCustomerName,
+      customerPhone: editCustomerPhone,
+      address: editAddress,
+      cityId: editCityId,
+      cityName: editCityName,
+      status: editStatus,
+      paymentMethodName: editPaymentMethodName,
+      totalAmount: editTotalAmount,
+      depositAmount: editDepositAmount,
+      shippingCost: editShippingCost,
+      balanceDue: balanceDue > 0 ? balanceDue : 0,
+      items: editItems,
+      notes: editNotes,
+    };
+
+    try {
+      const res = await fetch('/api/orders', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setOrders((prev) =>
+          prev.map((o) => (o.id === editingOrder.id ? { ...o, ...payload } as Order : o))
+        );
+        setToastMessage(`✅ Orden #${editingOrder.id} modificada y guardada correctamente.`);
+        setTimeout(() => setToastMessage(null), 4000);
+        setIsEditModalOpen(false);
+      }
+    } catch (err) {
+      console.error('Error saving order edits:', err);
+    } finally {
+      setIsSavingOrder(false);
+    }
+  };
+
+  // Delete Order
+  const handleOpenDeleteModal = (order: Order) => {
+    setOrderToDelete(order);
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleConfirmDeleteOrder = async () => {
+    if (!orderToDelete) return;
+    const targetId = orderToDelete.id;
+
+    try {
+      const res = await fetch(`/api/orders?id=${targetId}`, {
+        method: 'DELETE',
+      });
+      const data = await res.json();
+      if (data.success) {
+        setOrders((prev) => prev.filter((o) => o.id !== targetId));
+        setToastMessage(`🗑️ Orden #${targetId} eliminada correctamente.`);
+        setTimeout(() => setToastMessage(null), 4000);
+      }
+    } catch (err) {
+      console.error('Error deleting order:', err);
+    } finally {
+      setIsDeleteModalOpen(false);
+      setOrderToDelete(null);
+    }
+  };
+
   // 1. Notificar separación individual a proveedor
   const handleNotifySingleSupplier = (order: Order, item: OrderItem) => {
-    const supplierPhone = item.supplierPhone || '573134848203';
+    const supplierPhone = item.supplierPhone || '573167455877';
     const supplierName = item.supplierName || 'Proveedor Mayorista';
     const supplierCost = item.supplierPrice ? formatCOP(item.supplierPrice) : 'Precio Mayorista';
 
@@ -97,25 +306,21 @@ export default function AdminOrdersPage() {
     setToastMessage(`📲 Manifiesto de ${totalPairs} pares enviado a ${supplierName}.`);
   };
 
-  // 3. Abrir en Waze
   const handleOpenWaze = (address: string, city: string) => {
     const query = encodeURIComponent(`${address}, ${city}, Colombia`);
-    // Waze Universal Deep Link
     const wazeUrl = `https://waze.com/ul?q=${query}&navigate=yes`;
     window.open(wazeUrl, '_blank');
   };
 
-  // 4. Abrir en Google Maps
   const handleOpenGoogleMaps = (address: string, city: string) => {
     const query = encodeURIComponent(`${address}, ${city}, Colombia`);
     const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${query}`;
     window.open(mapsUrl, '_blank');
   };
 
-  // 5. Avisar al cliente que el mensajero va en camino
   const handleNotifyCustomerOnTheWay = (order: Order) => {
     const cleanPhone = order.customerPhone.startsWith('57') ? order.customerPhone : `57${order.customerPhone}`;
-    const text = `👋 ¡Hola *${order.customerName}*!\n\n🛵 Tu pedido de *DripZone* ya va *EN CAMINO* con nuestro mensajero.\n\n📍 *Dirección de Entrega:* ${order.address}\n🏙️ *Ciudad:* ${order.cityName}\n💵 *Saldo a Pagar Contraentrega:* *${formatCOP(order.balanceDue)}*\n💳 *Medio de Pago:* Efectivo o Transferencia Nequi\n\nPor favor estar atento a la portería o celular. ¡Gracias por tu compra! 🔥`;
+    const text = `👋 ¡Hola *${order.customerName}*!\n\n🛵 Tu pedido ya va *EN CAMINO* con nuestro mensajero.\n\n📍 *Dirección de Entrega:* ${order.address}\n🏙️ *Ciudad:* ${order.cityName}\n💵 *Saldo a Pagar Contraentrega:* *${formatCOP(order.balanceDue)}*\n💳 *Medio de Pago:* Efectivo o Transferencia Nequi\n\nPor favor estar atento a la portería o celular. ¡Gracias por tu compra! 🔥`;
     
     window.open(`https://wa.me/${cleanPhone}?text=${encodeURIComponent(text)}`, '_blank');
     handleStatusChange(order.id, 'dispatched');
@@ -138,7 +343,6 @@ export default function AdminOrdersPage() {
     }
   };
 
-  // Filtrado de pedidos
   const filteredOrders = orders.filter((o) => {
     const matchesSearch =
       o.customerName.toLowerCase().includes(search.toLowerCase()) ||
@@ -152,15 +356,19 @@ export default function AdminOrdersPage() {
     return true;
   });
 
-  // Agrupación por Proveedor
+  // Consolidado por Proveedor
   const supplierGroups = orders.reduce((acc, order) => {
     order.items.forEach((item) => {
-      const suppName = item.supplierName || 'DIFUSION JOVIC STORE';
+      const suppName = item.supplierName || '💎 DIFUSIÓN JOVIC STORE COLOMBIA';
-      const suppPhone = item.supplierPhone || '573134848203';
+      const suppPhone = item.supplierPhone || '573167455877';
+      const matchingSupplier = suppliers.find((s) => s.name.toLowerCase() === suppName.toLowerCase());
+      const isActiveSup = matchingSupplier ? matchingSupplier.isActive !== false : true;
+
       if (!acc[suppName]) {
         acc[suppName] = {
           name: suppName,
           phone: suppPhone,
+          isActive: isActiveSup,
           entries: [],
           totalPairs: 0,
           totalCost: 0,
@@ -171,9 +379,8 @@ export default function AdminOrdersPage() {
       acc[suppName].totalCost += (item.supplierPrice || 0) * item.quantity;
     });
     return acc;
-  }, {} as Record<string, { name: string; phone: string; entries: { order: Order; item: OrderItem }[]; totalPairs: number; totalCost: number }>);
+  }, {} as Record<string, { name: string; phone: string; isActive: boolean; entries: { order: Order; item: OrderItem }[]; totalPairs: number; totalCost: number }>);
 
-  // Agrupación de Pendientes por Entregar (Zonas / Direcciones)
   const pendingDeliveries = orders.filter((o) => o.status !== 'delivered' && o.status !== 'cancelled');
   const totalBalanceToCollect = pendingDeliveries.reduce((acc, curr) => acc + curr.balanceDue, 0);
 
@@ -187,13 +394,13 @@ export default function AdminOrdersPage() {
             <span>Centro Logístico: Pedidos, Proveedores & Rutas Waze</span>
           </h1>
           <p className="text-xs text-neutral-400 mt-1">
-            Consolidación automática para <strong>separación con proveedores</strong> y <strong>hoja de ruta para mensajeros con navegación Waze en 1 clic</strong>.
+            Gestión completa de pedidos (<strong>editar datos, cambiar tallas, precios o eliminar</strong>), consolidación con proveedores y <strong>navegación Waze en 1 clic</strong>.
           </p>
         </div>
       </div>
 
       {toastMessage && (
-        <div className="bg-purple-950/80 border border-purple-500 text-purple-300 px-4 py-3 rounded-2xl text-xs flex items-center justify-between animate-in fade-in shadow-md">
+        <div className="bg-purple-950/80 border border-purple-500 text-purple-200 px-4 py-3 rounded-2xl text-xs flex items-center justify-between animate-in fade-in shadow-md">
           <span>{toastMessage}</span>
           <button onClick={() => setToastMessage(null)} className="font-bold text-white cursor-pointer ml-3">
             ✕
@@ -207,7 +414,7 @@ export default function AdminOrdersPage() {
           onClick={() => setActiveTab('individual')}
           className={`py-3 px-4 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2 cursor-pointer ${
             activeTab === 'individual'
-              ? 'bg-purple-600 text-white shadow-lg shadow-purple-600/30'
+              ? 'bg-gradient-to-r from-purple-600 to-fuchsia-600 text-white shadow-lg shadow-purple-500/30'
               : 'text-neutral-400 hover:text-white'
           }`}
         >
@@ -219,11 +426,11 @@ export default function AdminOrdersPage() {
           onClick={() => setActiveTab('suppliers')}
           className={`py-3 px-4 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2 cursor-pointer ${
             activeTab === 'suppliers'
-              ? 'bg-purple-600 text-white shadow-lg shadow-purple-600/30'
+              ? 'bg-gradient-to-r from-purple-600 to-fuchsia-600 text-white shadow-lg shadow-purple-500/30'
               : 'text-neutral-400 hover:text-white'
           }`}
         >
-          <Building2 className="w-4 h-4 text-fuchsia-300" />
+          <Building2 className="w-4 h-4 text-purple-300" />
           <span>2. Consolidado por Proveedor ({Object.keys(supplierGroups).length})</span>
         </button>
 
@@ -231,11 +438,11 @@ export default function AdminOrdersPage() {
           onClick={() => setActiveTab('routes')}
           className={`py-3 px-4 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2 cursor-pointer ${
             activeTab === 'routes'
-              ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-pink-600/30'
+              ? 'bg-gradient-to-r from-purple-600 to-emerald-500 text-white shadow-lg shadow-emerald-500/30'
               : 'text-neutral-400 hover:text-white'
           }`}
         >
-          <Compass className="w-4 h-4 text-cyan-300" />
+          <Compass className="w-4 h-4 text-emerald-300" />
           <span>3. Rutas de Entrega & Waze ({pendingDeliveries.length})</span>
         </button>
       </div>
@@ -243,7 +450,6 @@ export default function AdminOrdersPage() {
       {/* TAB 1: INDIVIDUAL ORDERS LIST */}
       {activeTab === 'individual' && (
         <div className="space-y-4">
-          {/* Toolbar */}
           <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
             <div className="flex items-center space-x-1.5 bg-neutral-900 border border-neutral-800 p-1 rounded-2xl overflow-x-auto">
               {['all', 'pending', 'deposit_received', 'supplier_notified', 'dispatched', 'delivered'].map((st) => (
@@ -270,7 +476,6 @@ export default function AdminOrdersPage() {
             </div>
           </div>
 
-          {/* Orders Cards Grid */}
           <div className="space-y-4">
             {filteredOrders.length === 0 ? (
               <div className="bg-neutral-900 border border-neutral-800 rounded-3xl p-12 text-center text-neutral-500">
@@ -282,7 +487,7 @@ export default function AdminOrdersPage() {
                   key={order.id}
                   className="bg-neutral-900 border border-neutral-800 hover:border-purple-500/40 rounded-3xl p-5 shadow-xl transition-all space-y-4"
                 >
-                  {/* Top Bar: Order ID, Status, Actions */}
+                  {/* Top bar */}
                   <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-neutral-800 pb-3">
                     <div className="flex items-center space-x-3">
                       <span className="font-black text-white text-base">Orden #{order.id}</span>
@@ -290,9 +495,24 @@ export default function AdminOrdersPage() {
                       <span className="text-[11px] text-neutral-500 font-mono">{order.createdAt}</span>
                     </div>
 
-                    {/* Status Dropdown */}
                     <div className="flex items-center space-x-2">
-                      <span className="text-xs text-neutral-400 font-bold">Estado:</span>
+                      <button
+                        onClick={() => handleOpenEditModal(order)}
+                        className="bg-neutral-800 hover:bg-neutral-700 text-purple-300 font-bold text-xs px-3 py-1.5 rounded-xl border border-neutral-700 flex items-center gap-1.5 cursor-pointer transition-all active:scale-95"
+                        title="Modificar o editar datos de este pedido"
+                      >
+                        <Edit3 className="w-3.5 h-3.5" />
+                        <span>Editar Pedido</span>
+                      </button>
+
+                      <button
+                        onClick={() => handleOpenDeleteModal(order)}
+                        className="bg-red-500/10 hover:bg-red-500/20 text-red-400 font-bold text-xs px-2.5 py-1.5 rounded-xl border border-red-500/30 flex items-center gap-1 cursor-pointer transition-all active:scale-95"
+                        title="Eliminar este pedido"
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+
                       <select
                         value={order.status}
                         onChange={(e) => handleStatusChange(order.id, e.target.value as any)}
@@ -308,9 +528,7 @@ export default function AdminOrdersPage() {
                     </div>
                   </div>
 
-                  {/* Customer Info & Financials */}
                   <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
-                    {/* Customer */}
                     <div className="space-y-1 bg-neutral-950/60 p-3 rounded-2xl border border-neutral-800/80">
                       <p className="font-bold text-neutral-400 uppercase text-[10px]">Cliente & Destino</p>
                       <p className="text-white font-bold text-sm">{order.customerName}</p>
@@ -321,9 +539,13 @@ export default function AdminOrdersPage() {
                         <MapPin className="w-3 h-3 shrink-0 text-purple-400 mt-0.5" />
                         <span>{order.address} ({order.cityName})</span>
                       </p>
+                      {order.notes && (
+                        <p className="text-amber-300 text-[11px] italic bg-amber-500/10 p-1.5 rounded-lg border border-amber-500/20 mt-1">
+                          Nota: {order.notes}
+                        </p>
+                      )}
                     </div>
 
-                    {/* Financial Balance */}
                     <div className="space-y-1 bg-neutral-950/60 p-3 rounded-2xl border border-neutral-800/80">
                       <p className="font-bold text-neutral-400 uppercase text-[10px]">Resumen de Cobro</p>
                       <div className="flex justify-between text-neutral-300">
@@ -332,7 +554,7 @@ export default function AdminOrdersPage() {
                       </div>
                       <div className="flex justify-between text-neutral-300">
                         <span>Anticipo / Separación:</span>
-                        <strong className="text-blue-400">-{formatCOP(order.depositAmount)}</strong>
+                        <strong className="text-purple-400">-{formatCOP(order.depositAmount)}</strong>
                       </div>
                       <div className="flex justify-between text-neutral-300 pt-1 border-t border-neutral-800 font-bold">
                         <span className="text-purple-300">Saldo Contraentrega:</span>
@@ -340,11 +562,10 @@ export default function AdminOrdersPage() {
                       </div>
                     </div>
 
-                    {/* Quick Dispatch Actions */}
                     <div className="space-y-2 bg-neutral-950/60 p-3 rounded-2xl border border-neutral-800/80 flex flex-col justify-center">
                       <button
                         onClick={() => handleOpenWaze(order.address, order.cityName)}
-                        className="w-full bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-1.5 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer shadow transition-all text-xs"
+                        className="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-1.5 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer shadow transition-all text-xs"
                       >
                         <Compass className="w-3.5 h-3.5" />
                         <span>Navegar con Waze</span>
@@ -360,7 +581,6 @@ export default function AdminOrdersPage() {
                     </div>
                   </div>
 
-                  {/* Items breakdown with Supplier notification button */}
                   <div className="space-y-2 pt-2">
                     <p className="font-bold text-neutral-400 uppercase text-[10px]">Pares en esta orden:</p>
                     <div className="space-y-2">
@@ -374,14 +594,14 @@ export default function AdminOrdersPage() {
                             <div>
                               <p className="font-bold text-white text-xs">{item.productName}</p>
                               <p className="text-[11px] text-neutral-400">
-                                Talla: <strong className="text-purple-400">{item.size}</strong> | Cantidad: <strong>{item.quantity}</strong> | Proveedor: <strong className="text-purple-300">{item.supplierName || 'Bodega Principal'}</strong>
+                                Talla: <strong className="text-purple-400">{item.size}</strong> | Cantidad: <strong>{item.quantity}</strong> | Costo: <strong className="font-mono text-emerald-300">{formatCOP(item.supplierPrice || 0)}</strong> | Proveedor: <strong className="text-purple-300">{item.supplierName || 'Bodega Principal'}</strong>
                               </p>
                             </div>
                           </div>
 
                           <button
                             onClick={() => handleNotifySingleSupplier(order, item)}
-                            className="bg-purple-600 hover:bg-purple-500 text-white font-bold text-xs px-3.5 py-2 rounded-xl flex items-center space-x-1.5 shadow cursor-pointer shrink-0 self-end sm:self-auto"
+                            className="bg-gradient-to-r from-purple-600 to-fuchsia-600 hover:from-purple-500 hover:to-fuchsia-500 text-white font-bold text-xs px-3.5 py-2 rounded-xl flex items-center space-x-1.5 shadow cursor-pointer shrink-0 self-end sm:self-auto"
                           >
                             <Send className="w-3.5 h-3.5" />
                             <span>Separar con Proveedor</span>
@@ -406,7 +626,7 @@ export default function AdminOrdersPage() {
               <span>Consolidado Automático de Compras & Separaciones</span>
             </div>
             <p>
-              Aquí se agrupan todos los pares pendientes clasificados por cada <strong>Proveedor Mayorista</strong>. Puedes enviar el <strong>manifiesto consolidado en 1 solo mensaje de WhatsApp</strong> para que el proveedor prepare y empaque todos los pedidos de la jornada juntos.
+              Agrupación automática por <strong>Proveedor Mayorista</strong>. Si un proveedor ha sido desactivado, sus pedidos y cuentas permanecen 100% calculados e intactos en el historial.
             </p>
           </div>
 
@@ -416,12 +636,18 @@ export default function AdminOrdersPage() {
                 key={group.name}
                 className="bg-neutral-900 border border-neutral-800 rounded-3xl p-6 shadow-xl space-y-4"
               >
-                {/* Supplier Header */}
                 <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-neutral-800 pb-4">
                   <div>
+                    <div className="flex items-center gap-2">
                       <span className="bg-purple-500/20 text-purple-300 border border-purple-500/40 text-[10px] font-bold px-2.5 py-0.5 rounded-full uppercase tracking-wider">
                         Proveedor Mayorista
                       </span>
+                      {!group.isActive && (
+                        <span className="bg-amber-500/20 text-amber-300 border border-amber-500/40 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
+                          ⚪ Inactivo / Histórico
+                        </span>
+                      )}
+                    </div>
                     <h3 className="text-xl font-black text-white mt-1">{group.name}</h3>
                     <p className="text-xs text-neutral-400 flex items-center gap-1 mt-0.5">
                       <Phone className="w-3.5 h-3.5 text-emerald-400" />
@@ -441,7 +667,6 @@ export default function AdminOrdersPage() {
                   </div>
                 </div>
 
-                {/* Items Table for this supplier */}
                 <div className="overflow-x-auto">
                   <table className="w-full text-left text-xs text-neutral-300">
                     <thead className="bg-neutral-950 text-neutral-400 font-bold uppercase text-[10px]">
@@ -474,11 +699,10 @@ export default function AdminOrdersPage() {
                   </table>
                 </div>
 
-                {/* Send Batch WhatsApp Manifest Button */}
                 <div className="pt-2 flex justify-end">
                   <button
                     onClick={() => handleSendSupplierBatchManifest(group.name, group.phone, group.entries)}
-                    className="bg-gradient-to-r from-purple-600 via-fuchsia-600 to-pink-600 hover:opacity-95 text-white font-black text-xs px-5 py-3 rounded-2xl shadow-lg flex items-center gap-2 cursor-pointer transition-all active:scale-95"
+                    className="bg-gradient-to-r from-purple-600 to-fuchsia-600 hover:from-purple-500 hover:to-fuchsia-500 text-white font-black text-xs px-5 py-3 rounded-2xl shadow-lg flex items-center gap-2 cursor-pointer transition-all active:scale-95"
                   >
                     <MessageCircle className="w-4 h-4" />
                     <span>Enviar Manifiesto de {group.totalPairs} Pares por WhatsApp a {group.name}</span>
@@ -493,15 +717,14 @@ export default function AdminOrdersPage() {
       {/* TAB 3: RUTAS DE ENTREGA ORGANIZADAS POR DIRECCIONES & WAZE */}
       {activeTab === 'routes' && (
         <div className="space-y-6 animate-in fade-in">
-          {/* KPI Route Header */}
           <div className="bg-gradient-to-r from-neutral-900 via-neutral-900 to-purple-950/60 border border-purple-500/30 rounded-3xl p-6 shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
             <div>
-              <div className="flex items-center space-x-2 text-cyan-300 font-bold text-sm">
+              <div className="flex items-center space-x-2 text-purple-300 font-bold text-sm">
-                <Compass className="w-5 h-5 text-cyan-400" />
+                <Compass className="w-5 h-5 text-purple-400" />
                 <span>Hoja de Ruta & Navegación GPS (Waze / Google Maps)</span>
               </div>
               <p className="text-xs text-neutral-300 mt-1 max-w-xl">
-                Entregas contraentrega secuenciadas por zona geográfica. El mensajero puede presionar <strong>"Abrir en Waze"</strong> para iniciar la navegación instantánea a cada portería/casa.
+                Entregas contraentrega secuenciadas por zona geográfica. Presiona <strong>"Abrir en Waze"</strong> para iniciar la navegación instantánea.
               </p>
             </div>
 
@@ -518,7 +741,6 @@ export default function AdminOrdersPage() {
             </div>
           </div>
 
-          {/* Delivery Stops Sequential List */}
           <div className="space-y-3">
             {pendingDeliveries.length === 0 ? (
               <div className="bg-neutral-900 border border-neutral-800 rounded-3xl p-12 text-center text-neutral-500">
@@ -528,12 +750,10 @@ export default function AdminOrdersPage() {
               pendingDeliveries.map((delivery, index) => (
                 <div
                   key={delivery.id}
-                  className="bg-neutral-900 border border-neutral-800 hover:border-cyan-500/40 rounded-3xl p-5 shadow-lg transition-all flex flex-col lg:flex-row lg:items-center justify-between gap-4"
+                  className="bg-neutral-900 border border-neutral-800 hover:border-purple-500/40 rounded-3xl p-5 shadow-lg transition-all flex flex-col lg:flex-row lg:items-center justify-between gap-4"
                 >
-                  {/* Left: Sequence Number & Stop Details */}
                   <div className="flex items-start space-x-4">
-                    {/* Stop Number Badge */}
+                    <div className="w-12 h-12 rounded-2xl bg-purple-500/20 border border-purple-500/40 flex flex-col items-center justify-center text-purple-300 font-black shrink-0 shadow-sm">
-                    <div className="w-12 h-12 rounded-2xl bg-cyan-500/20 border border-cyan-500/40 flex flex-col items-center justify-center text-cyan-300 font-black shrink-0 shadow-sm">
                       <span className="text-[10px] uppercase font-bold text-neutral-400 leading-none">Parada</span>
                       <span className="text-lg leading-tight">#{index + 1}</span>
                     </div>
@@ -545,9 +765,8 @@ export default function AdminOrdersPage() {
                         {getStatusBadge(delivery.status)}
                       </div>
 
-                      {/* Exact Address Highlight */}
                       <p className="text-xs font-bold text-white flex items-center gap-1.5 bg-neutral-950 px-3 py-1 rounded-xl border border-neutral-800 w-fit">
-                        <MapPin className="w-4 h-4 text-cyan-400 shrink-0" />
+                        <MapPin className="w-4 h-4 text-purple-400 shrink-0" />
                         <span>{delivery.address} ({delivery.cityName})</span>
                       </p>
 
@@ -569,25 +788,29 @@ export default function AdminOrdersPage() {
                     </div>
                   </div>
 
-                  {/* Right: Balance & 1-Click Waze / WhatsApp Actions */}
                   <div className="flex items-center gap-3 self-end lg:self-auto shrink-0">
-                    {/* Cash to collect badge */}
                     <div className="bg-neutral-950 border border-neutral-800 px-3.5 py-2 rounded-2xl text-right">
                       <p className="text-[10px] text-neutral-400 font-bold uppercase">Cobrar Contraentrega</p>
                       <p className="text-base font-black text-emerald-400">{formatCOP(delivery.balanceDue)}</p>
                     </div>
 
-                    {/* Waze GPS Button */}
+                    <button
+                      onClick={() => handleOpenEditModal(delivery)}
+                      className="bg-neutral-800 hover:bg-neutral-700 text-purple-300 font-bold text-xs p-3 rounded-2xl shadow cursor-pointer transition-all"
+                      title="Editar datos de este pedido"
+                    >
+                      <Edit3 className="w-4 h-4" />
+                    </button>
+
                     <button
                       onClick={() => handleOpenWaze(delivery.address, delivery.cityName)}
-                      className="bg-cyan-600 hover:bg-cyan-500 text-white font-black text-xs px-4 py-3 rounded-2xl shadow-lg flex items-center gap-1.5 cursor-pointer active:scale-95 transition-all"
+                      className="bg-purple-600 hover:bg-purple-500 text-white font-black text-xs px-4 py-3 rounded-2xl shadow-lg flex items-center gap-1.5 cursor-pointer active:scale-95 transition-all"
                       title="Abrir ubicación directamente en Waze"
                     >
                       <Compass className="w-4 h-4" />
                       <span>Waze</span>
                     </button>
 
-                    {/* Google Maps GPS Button */}
                     <button
                       onClick={() => handleOpenGoogleMaps(delivery.address, delivery.cityName)}
                       className="bg-neutral-800 hover:bg-neutral-700 text-white font-bold text-xs p-3 rounded-2xl shadow cursor-pointer transition-all"
@@ -596,7 +819,6 @@ export default function AdminOrdersPage() {
                       <Navigation className="w-4 h-4 text-emerald-400" />
                     </button>
 
-                    {/* WhatsApp Alert */}
                     <button
                       onClick={() => handleNotifyCustomerOnTheWay(delivery)}
                       className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-3.5 py-3 rounded-2xl shadow flex items-center gap-1.5 cursor-pointer active:scale-95 transition-all"
@@ -612,6 +834,297 @@ export default function AdminOrdersPage() {
           </div>
         </div>
       )}
+
+      {/* MODAL: EDITAR / MODIFICAR PEDIDO */}
+      {isEditModalOpen && editingOrder && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in overflow-y-auto">
+          <div className="bg-neutral-900 border border-neutral-800 rounded-3xl max-w-2xl w-full p-6 space-y-4 shadow-2xl my-8 max-h-[90vh] overflow-y-auto">
+            <div className="flex items-center justify-between border-b border-neutral-800 pb-3">
+              <div className="flex items-center space-x-2">
+                <Edit3 className="w-5 h-5 text-purple-400" />
+                <h3 className="font-black text-white text-base">Modificar Orden #{editingOrder.id}</h3>
+              </div>
+              <button
+                onClick={() => setIsEditModalOpen(false)}
+                className="text-neutral-400 hover:text-white cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            <form onSubmit={handleSaveOrderEdits} className="space-y-4 text-xs">
+              {/* Customer details */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 bg-neutral-950/60 p-3.5 rounded-2xl border border-neutral-800">
+                <div>
+                  <label className="block text-neutral-400 font-bold mb-1">Nombre del Cliente *</label>
+                  <input
+                    type="text"
+                    required
+                    value={editCustomerName}
+                    onChange={(e) => setEditCustomerName(e.target.value)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-400 font-bold"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-emerald-400 font-bold mb-1">Celular WhatsApp *</label>
+                  <input
+                    type="tel"
+                    required
+                    value={editCustomerPhone}
+                    onChange={(e) => setEditCustomerPhone(e.target.value)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-emerald-300 outline-hidden focus:border-emerald-400 font-mono font-bold"
+                  />
+                </div>
+
+                <div className="sm:col-span-2">
+                  <label className="block text-neutral-400 font-bold mb-1">Dirección de Entrega *</label>
+                  <input
+                    type="text"
+                    required
+                    value={editAddress}
+                    onChange={(e) => setEditAddress(e.target.value)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-400"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-neutral-400 font-bold mb-1">Ciudad Destino</label>
+                  <select
+                    value={editCityName}
+                    onChange={(e) => {
+                      const cityName = e.target.value;
+                      setEditCityName(cityName);
+                      const foundCity = cities.find((c) => c.name === cityName);
+                      if (foundCity) setEditCityId(foundCity.id);
+                    }}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden font-semibold"
+                  >
+                    {cities.map((c) => (
+                      <option key={c.id} value={c.name}>
+                        {c.name} ({c.department})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-purple-400 font-bold mb-1">Estado de la Orden</label>
+                  <select
+                    value={editStatus}
+                    onChange={(e) => setEditStatus(e.target.value as any)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden font-bold"
+                  >
+                    <option value="pending">⏳ Pendiente Confirmar</option>
+                    <option value="deposit_received">💳 Separación $10k Pagada</option>
+                    <option value="supplier_notified">🏢 Proveedor Notificado</option>
+                    <option value="dispatched">🛵 En Ruta con Mensajero</option>
+                    <option value="delivered">✅ Entregado & Cobrado</option>
+                    <option value="cancelled">❌ Cancelado</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Items Management */}
+              <div className="space-y-2 bg-neutral-950/60 p-3.5 rounded-2xl border border-neutral-800">
+                <div className="flex items-center justify-between">
+                  <p className="font-bold text-white uppercase text-[11px]">Zapatillas & Proveedores en la Orden</p>
+                  <button
+                    type="button"
+                    onClick={handleAddItemToEdit}
+                    className="text-[11px] text-purple-400 hover:text-purple-300 font-bold flex items-center gap-1 cursor-pointer"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    <span>Agregar Par</span>
+                  </button>
+                </div>
+
+                <div className="space-y-3">
+                  {editItems.map((item, idx) => (
+                    <div key={idx} className="bg-neutral-900 border border-neutral-800 p-3 rounded-xl space-y-2">
+                      <div className="flex items-center justify-between">
+                        <span className="font-bold text-white text-xs">Par #{idx + 1}</span>
+                        {editItems.length > 1 && (
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveItemFromEdit(idx)}
+                            className="text-red-400 hover:text-red-300 text-[10px] font-bold cursor-pointer"
+                          >
+                            Eliminar Par
+                          </button>
+                        )}
+                      </div>
+
+                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+                        <div className="sm:col-span-2">
+                          <label className="block text-[10px] text-neutral-400 font-bold">Modelo / Nombre</label>
+                          <input
+                            type="text"
+                            value={item.productName}
+                            onChange={(e) => handleItemChange(idx, 'productName', e.target.value)}
+                            className="w-full bg-neutral-950 border border-neutral-800 rounded-lg px-2.5 py-1.5 text-white outline-hidden"
+                          />
+                        </div>
+
+                        <div>
+                          <label className="block text-[10px] text-purple-400 font-bold">Talla</label>
+                          <input
+                            type="text"
+                            value={item.size}
+                            onChange={(e) => handleItemChange(idx, 'size', e.target.value)}
+                            className="w-full bg-neutral-950 border border-neutral-800 rounded-lg px-2.5 py-1.5 text-white font-mono font-bold outline-hidden"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+                        <div>
+                          <label className="block text-[10px] text-neutral-400 font-bold">Cantidad</label>
+                          <input
+                            type="number"
+                            min="1"
+                            value={item.quantity}
+                            onChange={(e) => handleItemChange(idx, 'quantity', parseInt(e.target.value, 10) || 1)}
+                            className="w-full bg-neutral-950 border border-neutral-800 rounded-lg px-2.5 py-1.5 text-white outline-hidden"
+                          />
+                        </div>
+
+                        <div>
+                          <label className="block text-[10px] text-neutral-400 font-bold">Precio Venta (COP)</label>
+                          <input
+                            type="number"
+                            value={item.price}
+                            onChange={(e) => handleItemChange(idx, 'price', parseInt(e.target.value, 10) || 0)}
+                            className="w-full bg-neutral-950 border border-neutral-800 rounded-lg px-2.5 py-1.5 text-white font-mono outline-hidden"
+                          />
+                        </div>
+
+                        <div>
+                          <label className="block text-[10px] text-emerald-400 font-bold">Costo Proveedor</label>
+                          <input
+                            type="number"
+                            value={item.supplierPrice || 0}
+                            onChange={(e) => handleItemChange(idx, 'supplierPrice', parseInt(e.target.value, 10) || 0)}
+                            className="w-full bg-neutral-950 border border-neutral-800 rounded-lg px-2.5 py-1.5 text-emerald-300 font-mono outline-hidden"
+                          />
+                        </div>
+                      </div>
+
+                      <div>
+                        <label className="block text-[10px] text-purple-300 font-bold">Proveedor Asignado</label>
+                        <select
+                          value={item.supplierName}
+                          onChange={(e) => handleItemChange(idx, 'supplierName', e.target.value)}
+                          className="w-full bg-neutral-950 border border-neutral-800 rounded-lg px-2.5 py-1.5 text-white outline-hidden text-xs"
+                        >
+                          {suppliers.map((s) => (
+                            <option key={s.id} value={s.name}>
+                              {s.name} {s.isActive === false ? '(⚪ Inactivo)' : ''}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Financial calculations */}
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 bg-neutral-950/60 p-3.5 rounded-2xl border border-neutral-800">
+                <div>
+                  <label className="block text-neutral-400 font-bold mb-1">Total Venta ($ COP)</label>
+                  <input
+                    type="number"
+                    value={editTotalAmount}
+                    onChange={(e) => setEditTotalAmount(parseInt(e.target.value, 10) || 0)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-white font-mono font-bold outline-hidden focus:border-purple-400"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-purple-400 font-bold mb-1">Anticipo Pagado ($ COP)</label>
+                  <input
+                    type="number"
+                    value={editDepositAmount}
+                    onChange={(e) => setEditDepositAmount(parseInt(e.target.value, 10) || 0)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-purple-300 font-mono font-bold outline-hidden focus:border-purple-400"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-emerald-400 font-bold mb-1">Saldo Contraentrega</label>
+                  <div className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3 py-2 text-emerald-400 font-mono font-bold text-sm">
+                    {formatCOP(editTotalAmount - editDepositAmount)}
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-neutral-400 font-bold mb-1">Notas Internas del Pedido</label>
+                <textarea
+                  rows={2}
+                  placeholder="Ej. Dejar en portería con el celador Juan..."
+                  value={editNotes}
+                  onChange={(e) => setEditNotes(e.target.value)}
+                  className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3.5 py-2 text-white outline-hidden focus:border-purple-400"
+                />
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-2 border-t border-neutral-800">
+                <button
+                  type="button"
+                  onClick={() => setIsEditModalOpen(false)}
+                  className="bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-bold py-2.5 px-4 rounded-xl cursor-pointer"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSavingOrder}
+                  className="bg-gradient-to-r from-purple-600 to-fuchsia-600 hover:from-purple-500 hover:to-fuchsia-500 text-white font-bold py-2.5 px-5 rounded-xl shadow-lg cursor-pointer transition-all disabled:opacity-50"
+                >
+                  {isSavingOrder ? 'Guardando Cambios...' : 'Guardar Modificaciones'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* MODAL: CONFIRMACIÓN DE ELIMINACIÓN DE PEDIDO */}
+      {isDeleteModalOpen && orderToDelete && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
+          <div className="bg-neutral-900 border border-red-500/30 rounded-3xl max-w-md w-full p-6 space-y-4 shadow-2xl">
+            <div className="flex items-center space-x-3 text-red-400">
+              <div className="w-10 h-10 rounded-2xl bg-red-500/20 border border-red-500/30 flex items-center justify-center">
+                <Trash2 className="w-5 h-5" />
+              </div>
+              <h3 className="font-black text-white text-base">¿Eliminar Pedido #{orderToDelete.id}?</h3>
+            </div>
+
+            <p className="text-xs text-neutral-300 leading-relaxed">
+              Estás a punto de eliminar permanentemente la orden del cliente <strong>{orderToDelete.customerName}</strong> ({orderToDelete.cityName}) por valor de <strong>{formatCOP(orderToDelete.totalAmount)}</strong>.
+            </p>
+
+            <div className="flex justify-end space-x-2 pt-2 border-t border-neutral-800">
+              <button
+                type="button"
+                onClick={() => setIsDeleteModalOpen(false)}
+                className="bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-bold text-xs py-2.5 px-4 rounded-xl cursor-pointer"
+              >
+                Cancelar
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmDeleteOrder}
+                className="bg-red-600 hover:bg-red-500 text-white font-bold text-xs py-2.5 px-5 rounded-xl shadow-lg cursor-pointer transition-all active:scale-95"
+              >
+                Sí, Eliminar Pedido
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

dripzone-app/src/app/admin/productos/page.tsx

@@ -50,6 +50,11 @@ export default function AdminProductsPage() {
       .then((r) => r.json())
       .then((d) => d.success && setProducts(d.products))
       .catch(() => {});
+
+    fetch('/api/suppliers?all=true')
+      .then((r) => r.json())
+      .then((d) => d.success && d.suppliers && setSuppliers(d.suppliers))
+      .catch(() => {});
   }, []);
 
   const handleToggleProductStatus = async (product: Product) => {

dripzone-app/src/app/admin/proveedores/page.tsx

@@ -0,0 +1,593 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Building2,
+  Plus,
+  Search,
+  CheckCircle2,
+  XCircle,
+  Phone,
+  MapPin,
+  MessageCircle,
+  Edit2,
+  Power,
+  Package,
+  ShieldCheck,
+  FileText,
+  User,
+  Info,
+  Layers,
+  Sparkles,
+} from 'lucide-react';
+import { Supplier, Product } from '@/types';
+import { INITIAL_SUPPLIERS } from '@/lib/data-service';
+
+export default function AdminSuppliersPage() {
+  const [suppliers, setSuppliers] = useState<Supplier[]>(INITIAL_SUPPLIERS);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [toast, setToast] = useState<string | null>(null);
+
+  // Modal State
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingSupplier, setEditingSupplier] = useState<Supplier | null>(null);
+
+  // Form fields
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [contactPerson, setContactPerson] = useState('');
+  const [address, setAddress] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSuppliers();
+    fetchProducts();
+  }, []);
+
+  const fetchSuppliers = async () => {
+    try {
+      const res = await fetch('/api/suppliers?all=true');
+      const data = await res.json();
+      if (data.success && data.suppliers) {
+        setSuppliers(data.suppliers);
+      }
+    } catch (e) {
+      console.error('Error fetching suppliers:', e);
+    }
+  };
+
+  const fetchProducts = async () => {
+    try {
+      const res = await fetch('/api/products?all=true');
+      const data = await res.json();
+      if (data.success && data.products) {
+        setProducts(data.products);
+      }
+    } catch (e) {
+      console.error('Error fetching products:', e);
+    }
+  };
+
+  const handleOpenCreateModal = () => {
+    setEditingSupplier(null);
+    setName('');
+    setPhone('57');
+    setContactPerson('');
+    setAddress('');
+    setNotes('');
+    setIsActive(true);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEditModal = (supplier: Supplier) => {
+    setEditingSupplier(supplier);
+    setName(supplier.name);
+    setPhone(supplier.phone);
+    setContactPerson(supplier.contactPerson || '');
+    setAddress(supplier.address || '');
+    setNotes(supplier.notes || '');
+    setIsActive(supplier.isActive !== false);
+    setIsModalOpen(true);
+  };
+
+  const handleToggleActive = async (supplier: Supplier) => {
+    const nextStatus = !supplier.isActive;
+    
+    // Optimistic update
+    setSuppliers((prev) =>
+      prev.map((s) => (s.id === supplier.id ? { ...s, isActive: nextStatus } : s))
+    );
+
+    try {
+      const res = await fetch('/api/suppliers', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: supplier.id,
+          updates: { isActive: nextStatus },
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setToast(
+          nextStatus
+            ? `🟢 Proveedor "${supplier.name}" ACTIVADO exitosamente.`
+            : `⚪ Proveedor "${supplier.name}" DESACTIVADO. Su información histórica y pedidos continúan 100% seguros.`
+        );
+        setTimeout(() => setToast(null), 4500);
+      }
+    } catch (e) {
+      console.error('Error toggling supplier active status:', e);
+      fetchSuppliers();
+    }
+  };
+
+  const handleSaveSupplier = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+
+    const cleanPhone = phone.replace(/\D/g, '');
+    const finalPhone = cleanPhone.startsWith('57') ? cleanPhone : `57${cleanPhone}`;
+
+    try {
+      if (editingSupplier) {
+        // Edit existing
+        const res = await fetch('/api/suppliers', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: editingSupplier.id,
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✅ Proveedor "${name}" actualizado con éxito.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      } else {
+        // Create new
+        const res = await fetch('/api/suppliers', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✨ Proveedor "${name}" registrado correctamente.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleOpenWhatsApp = (supplier: Supplier) => {
+    const cleanPhone = supplier.phone.startsWith('57') ? supplier.phone : `57${supplier.phone}`;
+    const text = encodeURIComponent(
+      `👋 Hola ${supplier.contactPerson || supplier.name}! Te escribo desde el panel de control de DripZone.`
+    );
+    window.open(`https://wa.me/${cleanPhone}?text=${text}`, '_blank');
+  };
+
+  // Metrics
+  const activeSuppliers = suppliers.filter((s) => s.isActive !== false);
+  const inactiveSuppliers = suppliers.filter((s) => s.isActive === false);
+
+  const filteredSuppliers = suppliers.filter((s) => {
+    const matchesSearch =
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.phone.includes(search) ||
+      (s.contactPerson && s.contactPerson.toLowerCase().includes(search.toLowerCase())) ||
+      (s.address && s.address.toLowerCase().includes(search.toLowerCase())) ||
+      (s.notes && s.notes.toLowerCase().includes(search.toLowerCase()));
+
+    if (!matchesSearch) return false;
+    if (statusFilter === 'active' && s.isActive === false) return false;
+    if (statusFilter === 'inactive' && s.isActive !== false) return false;
+    return true;
+  });
+
+  const getProductCountForSupplier = (supplierId: string, supplierName: string) => {
+    return products.filter(
+      (p) => p.supplierId === supplierId || (p.supplierName && p.supplierName.toLowerCase() === supplierName.toLowerCase())
+    ).length;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-black text-white flex items-center gap-2">
+            <Building2 className="w-6 h-6 text-purple-400" />
+            <span>Proveedores & Bodegas Aliadas ({suppliers.length})</span>
+          </h1>
+          <p className="text-xs text-neutral-400 mt-1">
+            Activa o desactiva proveedores en 1 clic <strong>sin perder el histórico de pedidos, productos ni trazabilidad logística</strong>.
+          </p>
+        </div>
+
+        <button
+          onClick={handleOpenCreateModal}
+          className="bg-gradient-to-r from-purple-600 to-fuchsia-600 hover:from-purple-500 hover:to-fuchsia-500 text-white font-bold text-xs px-4 py-2.5 rounded-2xl flex items-center space-x-2 shadow-lg cursor-pointer transition-all active:scale-95 self-start sm:self-auto"
+        >
+          <Plus className="w-4 h-4" />
+          <span>Nuevo Proveedor</span>
+        </button>
+      </div>
+
+      {toast && (
+        <div className="bg-purple-950/90 border border-purple-500 text-purple-200 px-4 py-3 rounded-2xl text-xs flex items-center justify-between shadow-xl animate-in fade-in">
+          <span>{toast}</span>
+          <button onClick={() => setToast(null)} className="font-bold text-white cursor-pointer ml-3">
+            ✕
+          </button>
+        </div>
+      )}
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3.5">
+        <div className="bg-neutral-900 border border-neutral-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-neutral-400 text-xs font-bold uppercase tracking-wider">
+            <span>Total Proveedores</span>
+            <Building2 className="w-4 h-4 text-purple-400" />
+          </div>
+          <p className="text-2xl font-black text-white">{suppliers.length}</p>
+          <p className="text-[10px] text-neutral-400">Bodegas y mayoristas registrados</p>
+        </div>
+
+        <div className="bg-neutral-900 border border-emerald-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-emerald-400 text-xs font-bold uppercase tracking-wider">
+            <span>Proveedores Activos</span>
+            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+          </div>
+          <p className="text-2xl font-black text-emerald-300">{activeSuppliers.length}</p>
+          <p className="text-[10px] text-emerald-400/80">Disponibles para nuevas zapatillas y pedidos</p>
+        </div>
+
+        <div className="bg-neutral-900 border border-amber-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-amber-400 text-xs font-bold uppercase tracking-wider">
+            <span>Desactivados / Históricos</span>
+            <XCircle className="w-4 h-4 text-amber-400" />
+          </div>
+          <p className="text-2xl font-black text-amber-300">{inactiveSuppliers.length}</p>
+          <p className="text-[10px] text-neutral-400">Historial preservado 100% intacto</p>
+        </div>
+
+        <div className="bg-neutral-900 border border-neutral-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-neutral-400 text-xs font-bold uppercase tracking-wider">
+            <span>Zapatillas Vinculadas</span>
+            <Package className="w-4 h-4 text-fuchsia-400" />
+          </div>
+          <p className="text-2xl font-black text-fuchsia-300">{products.length}</p>
+          <p className="text-[10px] text-neutral-400">Modelos en catálogo</p>
+        </div>
+      </div>
+
+      {/* Info Banner About Historical Safety */}
+      <div className="bg-gradient-to-r from-neutral-900 via-neutral-900 to-purple-950/40 border border-purple-500/20 rounded-3xl p-4 flex items-start space-x-3 text-xs text-neutral-300 shadow-md">
+        <Info className="w-5 h-5 text-purple-400 shrink-0 mt-0.5" />
+        <div className="space-y-1">
+          <p className="font-bold text-white">
+            🛡️ Trazabilidad & Protección Histórica Garantizada
+          </p>
+          <p className="text-[11px] text-neutral-400">
+            Al desactivar un proveedor, <strong>ningún pedido pasado se altera ni se pierde</strong>. Los manifiestos de despacho, reportes financieros y costos mayoristas de pedidos anteriores conservan su información original. El proveedor simplemente se oculta para nuevas asignaciones de zapatillas.
+          </p>
+        </div>
+      </div>
+
+      {/* Filter and Search Bar */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+        <div className="flex items-center space-x-1.5 bg-neutral-900 border border-neutral-800 p-1 rounded-2xl overflow-x-auto">
+          <button
+            onClick={() => setStatusFilter('all')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all ${
+              statusFilter === 'all' ? 'bg-white text-neutral-950 shadow' : 'text-neutral-400 hover:text-white'
+            }`}
+          >
+            Todos ({suppliers.length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('active')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'active'
+                ? 'bg-emerald-500/30 border border-emerald-500/50 text-emerald-300 shadow'
+                : 'text-neutral-400 hover:text-emerald-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-emerald-400" />
+            <span>Activos ({activeSuppliers.length})</span>
+          </button>
+          <button
+            onClick={() => setStatusFilter('inactive')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'inactive'
+                ? 'bg-amber-500/30 border border-amber-500/50 text-amber-300 shadow'
+                : 'text-neutral-400 hover:text-amber-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-amber-400" />
+            <span>Inactivos ({inactiveSuppliers.length})</span>
+          </button>
+        </div>
+
+        <div className="max-w-xs w-full">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Buscar proveedor, teléfono o bodega..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-neutral-900 border border-neutral-800 rounded-xl pl-9 pr-3.5 py-2 text-xs text-white outline-hidden focus:border-purple-400"
+            />
+            <Search className="w-4 h-4 text-neutral-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          </div>
+        </div>
+      </div>
+
+      {/* Supplier Cards Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filteredSuppliers.length === 0 ? (
+          <div className="col-span-full bg-neutral-900 border border-neutral-800 rounded-3xl p-12 text-center text-neutral-500 space-y-2">
+            <Building2 className="w-12 h-12 text-neutral-600 mx-auto" />
+            <p className="font-bold text-white text-sm">No se encontraron proveedores</p>
+            <p className="text-xs">Prueba con otro término de búsqueda o cambia los filtros.</p>
+          </div>
+        ) : (
+          filteredSuppliers.map((supplier) => {
+            const isSupActive = supplier.isActive !== false;
+            const linkedProductsCount = getProductCountForSupplier(supplier.id, supplier.name);
+
+            return (
+              <div
+                key={supplier.id}
+                className={`bg-neutral-900 border rounded-3xl p-5 shadow-xl transition-all flex flex-col justify-between space-y-4 ${
+                  isSupActive
+                    ? 'border-neutral-800 hover:border-purple-500/40'
+                    : 'border-neutral-800/80 opacity-75 bg-neutral-950/60'
+                }`}
+              >
+                {/* Card Top: Status & Name */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span
+                      className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border flex items-center gap-1 ${
+                        isSupActive
+                          ? 'bg-emerald-500/20 border-emerald-500/40 text-emerald-300'
+                          : 'bg-amber-500/20 border-amber-500/40 text-amber-300'
+                      }`}
+                    >
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${
+                          isSupActive ? 'bg-emerald-400 animate-pulse' : 'bg-amber-400'
+                        }`}
+                      />
+                      <span>{isSupActive ? 'Activo para Pedidos' : 'Inactivo (Histórico Seguro)'}</span>
+                    </span>
+
+                    <button
+                      onClick={() => handleToggleActive(supplier)}
+                      className={`text-[11px] font-bold px-2.5 py-1 rounded-xl border flex items-center gap-1 cursor-pointer transition-all ${
+                        isSupActive
+                          ? 'bg-red-500/10 border-red-500/30 text-red-400 hover:bg-red-500/20'
+                          : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20'
+                      }`}
+                      title={isSupActive ? 'Desactivar proveedor (conserva historial)' : 'Reactivar proveedor'}
+                    >
+                      <Power className="w-3 h-3" />
+                      <span>{isSupActive ? 'Desactivar' : 'Activar'}</span>
+                    </button>
+                  </div>
+
+                  <h3 className="font-black text-white text-base leading-snug">{supplier.name}</h3>
+
+                  {/* Details List */}
+                  <div className="space-y-1.5 text-xs pt-1">
+                    {supplier.contactPerson && (
+                      <p className="text-neutral-300 flex items-center gap-1.5">
+                        <User className="w-3.5 h-3.5 text-purple-400 shrink-0" />
+                        <span>Contacto: <strong className="text-white">{supplier.contactPerson}</strong></span>
+                      </p>
+                    )}
+
+                    <p className="text-neutral-300 flex items-center gap-1.5">
+                      <Phone className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                      <span className="font-mono text-emerald-300 font-semibold">{supplier.phone}</span>
+                    </p>
+
+                    {supplier.address && (
+                      <p className="text-neutral-400 flex items-center gap-1.5 text-[11px]">
+                        <MapPin className="w-3.5 h-3.5 text-pink-400 shrink-0" />
+                        <span>{supplier.address}</span>
+                      </p>
+                    )}
+
+                    {supplier.notes && (
+                      <p className="text-neutral-400 italic text-[11px] bg-neutral-950 p-2 rounded-xl border border-neutral-800 mt-1">
+                        "{supplier.notes}"
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Card Bottom: Metrics & Actions */}
+                <div className="pt-3 border-t border-neutral-800 space-y-3">
+                  <div className="flex items-center justify-between text-xs text-neutral-400">
+                    <span className="flex items-center gap-1">
+                      <Package className="w-3.5 h-3.5 text-fuchsia-400" />
+                      <span>Modelos asignados:</span>
+                    </span>
+                    <strong className="text-white bg-neutral-950 px-2 py-0.5 rounded-lg border border-neutral-800">
+                      {linkedProductsCount} pares
+                    </strong>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <button
+                      onClick={() => handleOpenWhatsApp(supplier)}
+                      className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer shadow transition-all active:scale-95"
+                    >
+                      <MessageCircle className="w-3.5 h-3.5" />
+                      <span>WhatsApp</span>
+                    </button>
+
+                    <button
+                      onClick={() => handleOpenEditModal(supplier)}
+                      className="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer transition-all active:scale-95"
+                    >
+                      <Edit2 className="w-3.5 h-3.5 text-purple-400" />
+                      <span>Modificar</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Modal Crear / Editar Proveedor */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
+          <div className="bg-neutral-900 border border-neutral-800 rounded-3xl max-w-lg w-full p-6 space-y-4 shadow-2xl">
+            <div className="flex items-center justify-between border-b border-neutral-800 pb-3">
+              <h3 className="font-black text-white text-base flex items-center gap-2">
+                <Building2 className="w-5 h-5 text-purple-400" />
+                <span>{editingSupplier ? 'Modificar Proveedor' : 'Registrar Nuevo Proveedor'}</span>
+              </h3>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-neutral-400 hover:text-white cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            <form onSubmit={handleSaveSupplier} className="space-y-4 text-xs">
+              <div>
+                <label className="block text-neutral-400 font-bold mb-1">Nombre Comercial / Bodega *</label>
+                <input
+                  type="text"
+                  required
+                  placeholder="Ej. 💎 DIFUSIÓN JOVIC STORE COLOMBIA"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-purple-400 font-semibold"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-emerald-400 font-bold mb-1">Celular / WhatsApp *</label>
+                  <input
+                    type="tel"
+                    required
+                    placeholder="ej: 573167455877"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3.5 py-2.5 text-emerald-300 outline-hidden focus:border-emerald-400 font-mono font-bold"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-neutral-400 font-bold mb-1">Persona de Contacto</label>
+                  <input
+                    type="text"
+                    placeholder="Ej. Asesor Despachos"
+                    value={contactPerson}
+                    onChange={(e) => setContactPerson(e.target.value)}
+                    className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-purple-400"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-neutral-400 font-bold mb-1">Ubicación / Dirección de la Bodega</label>
+                <input
+                  type="text"
+                  placeholder="Ej. CC MÍO Local 3B / San Andresito Cali"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-purple-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-neutral-400 font-bold mb-1">Notas / Políticas de Garantía & Horarios</label>
+                <textarea
+                  rows={3}
+                  placeholder="Ej. Especialista en Nike/Jordan Top Quality. Recogida de 9:00 AM a 6:00 PM."
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  className="w-full bg-neutral-950 border border-neutral-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-purple-400"
+                />
+              </div>
+
+              <div className="bg-neutral-950 p-3 rounded-2xl border border-neutral-800 flex items-center justify-between">
+                <div>
+                  <p className="font-bold text-white text-xs">Estado del Proveedor</p>
+                  <p className="text-[10px] text-neutral-400">
+                    {isActive
+                      ? '🟢 Activo: disponible para asignar nuevas zapatillas y recibir pedidos'
+                      : '⚪ Desactivado: no aparecerá en nuevas publicaciones (el historial se mantiene)'}
+                  </p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isActive}
+                    onChange={(e) => setIsActive(e.target.checked)}
+                    className="sr-only peer"
+                  />
+                  <div className="w-11 h-6 bg-neutral-800 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
+                </label>
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-2 border-t border-neutral-800">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-bold py-2.5 px-4 rounded-xl cursor-pointer"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="bg-gradient-to-r from-purple-600 to-fuchsia-600 hover:from-purple-500 hover:to-fuchsia-500 text-white font-bold py-2.5 px-5 rounded-xl shadow-lg cursor-pointer transition-all disabled:opacity-50"
+                >
+                  {isSaving ? 'Guardando...' : editingSupplier ? 'Actualizar Proveedor' : 'Guardar Proveedor'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

dripzone-app/src/app/api/orders/route.ts

@@ -28,3 +28,49 @@ export async function POST(request: Request) {
     return NextResponse.json({ success: false, error: error.message }, { status: 400 });
   }
 }
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateOrder(targetId, payload);
+
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Orden no encontrada' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, order: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const deleted = dataService.deleteOrder(id);
+    return NextResponse.json({ success: deleted, message: deleted ? 'Orden eliminada correctamente' : 'No se encontró la orden' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

dripzone-app/src/app/api/suppliers/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server';
+import { dataService } from '@/lib/data-service';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const includeInactive = searchParams.get('all') === 'true' || searchParams.get('includeInactive') === 'true';
+    const suppliers = dataService.getSuppliers(includeInactive);
+    return NextResponse.json({ success: true, suppliers });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    if (!body.name || !body.phone) {
+      return NextResponse.json({ success: false, error: 'El nombre y el teléfono son requeridos' }, { status: 400 });
+    }
+    const newSupplier = dataService.addSupplier(body);
+    return NextResponse.json({ success: true, supplier: newSupplier });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateSupplier(targetId, payload);
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Proveedor no encontrado' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, supplier: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    // Soft-deactivate to ensure 100% preservation of historical orders & catalog references
+    const success = dataService.deleteSupplier(id);
+    return NextResponse.json({ success, message: 'Proveedor desactivado correctamente sin perder historial' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

dripzone-app/src/components/mobile/MobileBottomDock.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { Home, Search, ShoppingBag, MessageCircle, Download, Check } from 'lucide-react';
+import { Home, Search, ShoppingBag, MessageCircle, Download, User } from 'lucide-react';
 import { useBrand } from '@/context/BrandContext';
 
 interface MobileBottomDockProps {
@@ -20,6 +20,18 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
 }) => {
   const { currentBrand } = useBrand();
   const [activeTab, setActiveTab] = useState('home');
+  const [isInsideApp, setIsInsideApp] = useState(false);
+
+  useEffect(() => {
+    const isNativeApp =
+      typeof window !== 'undefined' &&
+      (!!(window as any).Capacitor?.isNativePlatform?.() ||
+        (window as any).Capacitor?.getPlatform?.() === 'android' ||
+        (window as any).Capacitor?.getPlatform?.() === 'ios' ||
+        window.matchMedia?.('(display-mode: standalone)')?.matches ||
+        (window.navigator as any)?.standalone === true);
+    setIsInsideApp(isNativeApp);
+  }, []);
 
   const handleWhatsApp = () => {
     const text = encodeURIComponent(
@@ -84,6 +96,7 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold">WhatsApp</span>
         </button>
 
+        {!isInsideApp ? (
           <button
             onClick={onOpenInstallModal}
             className="flex flex-col items-center gap-0.5 cursor-pointer text-purple-400 hover:text-purple-300"
@@ -93,6 +106,15 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
             </div>
             <span className="text-[10px] font-bold">App Móvil</span>
           </button>
+        ) : (
+          <Link
+            href="/admin"
+            className="flex flex-col items-center gap-0.5 cursor-pointer text-neutral-400 hover:text-white"
+          >
+            <User className="w-5 h-5" />
+            <span className="text-[10px] font-bold">Admin</span>
+          </Link>
+        )}
       </div>
     </div>
   );

dripzone-app/src/components/mobile/MobileSplashScreen.tsx

@@ -4,26 +4,43 @@ import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 
 export const MobileSplashScreen: React.FC = () => {
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const [isFading, setIsFading] = useState(false);
 
   useEffect(() => {
-    // Verificar si ya se mostró en esta sesión
+    // Solo mostrar el splashscreen dentro de la App Móvil nativa (Capacitor / PWA instalada)
+    // En la página web / navegador regular NO debe mostrarse
+    const isNativeApp =
+      typeof window !== 'undefined' &&
+      (!!(window as any).Capacitor?.isNativePlatform?.() ||
+        (window as any).Capacitor?.getPlatform?.() === 'android' ||
+        (window as any).Capacitor?.getPlatform?.() === 'ios' ||
+        window.matchMedia?.('(display-mode: standalone)')?.matches ||
+        (window.navigator as any)?.standalone === true);
+
+    if (!isNativeApp) {
+      setIsVisible(false);
+      return;
+    }
+
+    // Verificar si ya se mostró en esta sesión de la app móvil
     const hasShown = sessionStorage.getItem('dripzone_splash_shown');
     if (hasShown) {
       setIsVisible(false);
       return;
     }
 
-    // Duración de 4.2 segundos para apreciar la imagen completa y eslogan
+    setIsVisible(true);
+
+    // Duración para la app móvil
     const fadeTimer = setTimeout(() => {
       setIsFading(true);
-    }, 3800);
+    }, 2800);
 
     const removeTimer = setTimeout(() => {
       setIsVisible(false);
       sessionStorage.setItem('dripzone_splash_shown', 'true');
-    }, 4600);
+    }, 3400);
 
     return () => {
       clearTimeout(fadeTimer);

dripzone-app/src/lib/data-service.ts

@@ -2334,17 +2334,42 @@ class DataService {
     return this.products.length < initialLen;
   }
 
-  getSuppliers(): Supplier[] {
+  getSuppliers(includeInactive: boolean = true): Supplier[] {
-    return this.suppliers;
+    if (includeInactive) return this.suppliers;
+    return this.suppliers.filter((s) => s.isActive !== false);
   }
 
   getSupplierById(id: string): Supplier | undefined {
     return this.suppliers.find((s) => s.id === id);
   }
 
-  addSupplier(supplier: Supplier): Supplier {
+  addSupplier(supplier: Partial<Supplier>): Supplier {
-    this.suppliers.push(supplier);
+    const newSupplier: Supplier = {
-    return supplier;
+      id: supplier.id || `sup-${Date.now()}`,
+      name: supplier.name || 'Nuevo Proveedor',
+      phone: supplier.phone || '573167455877',
+      contactPerson: supplier.contactPerson || '',
+      address: supplier.address || '',
+      notes: supplier.notes || '',
+      isActive: supplier.isActive !== undefined ? supplier.isActive : true,
+    };
+    this.suppliers.push(newSupplier);
+    return newSupplier;
+  }
+
+  updateSupplier(id: string, updates: Partial<Supplier>): Supplier | null {
+    const idx = this.suppliers.findIndex((s) => s.id === id);
+    if (idx === -1) return null;
+    this.suppliers[idx] = { ...this.suppliers[idx], ...updates };
+    return this.suppliers[idx];
+  }
+
+  deleteSupplier(id: string): boolean {
+    // Soft delete (desactivación segura para preservar 100% el historial de pedidos y productos)
+    const supplier = this.suppliers.find((s) => s.id === id);
+    if (!supplier) return false;
+    supplier.isActive = false;
+    return true;
   }
 
   getCities(): City[] {
@@ -2382,6 +2407,10 @@ class DataService {
     return this.orders;
   }
 
+  getOrderById(id: string): Order | undefined {
+    return this.orders.find((o) => o.id === id);
+  }
+
   addOrder(order: Order): Order {
     this.orders.unshift(order);
     return order;
@@ -2389,7 +2418,7 @@ class DataService {
 
   createOrder(orderData: Partial<Order>): Order {
     const newOrder: Order = {
-      id: `ord-${Date.now()}`,
+      id: orderData.id || `ord-${Date.now()}`,
       customerName: orderData.customerName || 'Cliente',
       customerPhone: orderData.customerPhone || '',
       address: orderData.address || '',
@@ -2399,18 +2428,43 @@ class DataService {
       subtotal: orderData.subtotal || 0,
       shippingCost: orderData.shippingCost || 0,
       totalAmount: orderData.totalAmount || 0,
-      depositAmount: orderData.depositAmount || 10000,
+      depositAmount: orderData.depositAmount !== undefined ? orderData.depositAmount : 10000,
-      balanceDue: (orderData.totalAmount || 0) - (orderData.depositAmount || 10000),
+      balanceDue: orderData.balanceDue !== undefined ? orderData.balanceDue : ((orderData.totalAmount || 0) - (orderData.depositAmount !== undefined ? orderData.depositAmount : 10000)),
       paymentMethodId: orderData.paymentMethodId || 'pay-contraentrega',
       paymentMethodName: orderData.paymentMethodName || 'Contraentrega',
-      status: 'pending',
+      status: orderData.status || 'pending',
       notes: orderData.notes,
-      createdAt: new Date().toISOString(),
+      createdAt: orderData.createdAt || new Date().toISOString(),
     };
     this.orders.unshift(newOrder);
     return newOrder;
   }
 
+  updateOrder(id: string, updates: Partial<Order>): Order | null {
+    const idx = this.orders.findIndex((o) => o.id === id);
+    if (idx === -1) return null;
+
+    const current = this.orders[idx];
+    const total = updates.totalAmount !== undefined ? updates.totalAmount : current.totalAmount;
+    const deposit = updates.depositAmount !== undefined ? updates.depositAmount : current.depositAmount;
+    const balanceDue = updates.balanceDue !== undefined ? updates.balanceDue : (total - deposit);
+
+    this.orders[idx] = {
+      ...current,
+      ...updates,
+      totalAmount: total,
+      depositAmount: deposit,
+      balanceDue,
+    };
+    return this.orders[idx];
+  }
+
+  deleteOrder(id: string): boolean {
+    const initialLen = this.orders.length;
+    this.orders = this.orders.filter((o) => o.id !== id);
+    return this.orders.length < initialLen;
+  }
+
   updateOrderStatus(orderId: string, status: Order['status']): Order | null {
     const order = this.orders.find((o) => o.id === orderId);
     if (!order) return null;

dripzone-app/src/lib/evolution-api.ts

@@ -6,30 +6,28 @@ const EVOLUTION_API_KEY = process.env.EVOLUTION_API_KEY || 'EE49029EEB85-4568-8F
 const EVOLUTION_INSTANCE_NAME = process.env.EVOLUTION_INSTANCE_NAME || 'AutomataAlmeira';
 
 /**
- * Enviar mensaje de texto por WhatsApp a través de Evolution API
+ * Enviar mensaje de texto por WhatsApp a través de Evolution API v2
  */
 export async function sendWhatsAppMessage(toPhone: string, message: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendText/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1200,
-          presence: 'composing',
-        },
-        textMessage: {
         text: message,
-        },
+        delay: 1200,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 20000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -40,32 +38,31 @@ export async function sendWhatsAppMessage(toPhone: string, message: string): Pro
 }
 
 /**
- * Enviar mensaje con foto/catálogo a través de Evolution API
+ * Enviar mensaje con foto/catálogo a través de Evolution API v2
  */
 export async function sendWhatsAppMedia(toPhone: string, imageUrl: string, caption: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendMedia/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1500,
-          presence: 'composing',
-        },
-        mediaMessage: {
         mediatype: 'image',
-          caption,
+        mimetype: 'image/jpeg',
+        caption: caption,
         media: imageUrl,
-        },
+        delay: 1500,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 25000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -83,7 +80,7 @@ export function buildOrderConfirmationMessage(order: any): string {
     .map((item: any) => `👟 *${item.productName}*\n   📏 Talla: *${item.size}* | Cantidad: ${item.quantity} | Valor: ${formatCOP(item.price)}`)
     .join('\n\n');
 
-  return `🎉 *¡GRACIAS POR TU PEDIDO EN SNEAKERS CALI!* 🎉
+  return `🎉 *¡GRACIAS POR TU PEDIDO EN DRIPZONE LUXURY!* 🎉
 📌 *No. de Orden:* #${order.id}
 
 👤 *Cliente:* ${order.customerName}

scripts/send_apk_to_whatsapp.js

@@ -22,7 +22,7 @@ async function sendApkToCarlos() {
   const apkBuffer = fs.readFileSync(apkPath);
   const base64Data = apkBuffer.toString('base64');
 
-  const caption = `🚀 *DripZone Sneakers - APK Actualizado*\n\n📅 *Generado:* ${new Date().toLocaleString('es-CO', { timeZone: 'America/Bogota' })}\n📦 *Tamaño:* ${sizeMB} MB\n\n🔐 *Novedades de la versión:*\n✅ Cambio de contraseña en perfil\n✅ Autenticación de Dos Factores (2FA) por WhatsApp OTP\n✅ Acceso con Huella / Passkey biométrico\n✅ Despacho logístico con integración a Waze\n✅ SplashScreen vertical limpio en alta definición\n\n📲 *Instalación:* Toca este archivo para actualizar tu app.`;
+  const caption = `🚀 *DripZone Sneakers - APK Oficial Actualizado*\n\n📅 *Generado:* ${new Date().toLocaleString('es-CO', { timeZone: 'America/Bogota' })}\n📦 *Tamaño:* ${sizeMB} MB\n\n✨ *Novedades de esta versión:*\n✅ Gestión y módulo completo de Proveedores\n✅ Edición, actualización y eliminación de pedidos en tiempo real\n✅ Notificaciones automáticas de pedidos por WhatsApp (Evolution API v2)\n✅ Autenticación biométrica con Huella / Passkey y 2FA OTP\n✅ Splash Screen vertical en alta definición y Dock interactivo optimizado\n\n📲 *Instalación:* Toca este archivo para instalar/actualizar la app en tu teléfono Android.`;
 
   console.log(`📤 Enviando APK vía Evolution API a WhatsApp (+${TARGET_PHONE})...`);
 

sneaky-app/src/app/admin/layout.tsx

@@ -15,6 +15,7 @@ import {
   Store,
   Users,
   MessageSquare,
+  Building2,
 } from 'lucide-react';
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -22,6 +23,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   const NAV_ITEMS = [
     { href: '/admin', label: 'Resumen & KPIs', icon: LayoutDashboard },
+    { href: '/admin/proveedores', label: 'Proveedores & Bodegas', icon: Building2, badge: 'Activos/Inactivos' },
     { href: '/admin/grupos-whatsapp', label: 'Grupos WhatsApp', icon: MessageSquare, badge: 'Monitoreo 24/7' },
     { href: '/admin/usuarios', label: 'Control de Usuarios', icon: Users, badge: 'Roles & Accesos' },
     { href: '/admin/configuracion', label: 'Datos de la Tienda', icon: Store },

sneaky-app/src/app/admin/productos/page.tsx

@@ -33,6 +33,11 @@ export default function AdminProductsPage() {
       .then((r) => r.json())
       .then((d) => d.success && setProducts(d.products))
       .catch(() => {});
+
+    fetch('/api/suppliers?all=true')
+      .then((r) => r.json())
+      .then((d) => d.success && d.suppliers && setSuppliers(d.suppliers))
+      .catch(() => {});
   }, []);
 
   const handleToggleProductStatus = async (product: Product) => {

sneaky-app/src/app/admin/proveedores/page.tsx

@@ -0,0 +1,593 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Building2,
+  Plus,
+  Search,
+  CheckCircle2,
+  XCircle,
+  Phone,
+  MapPin,
+  MessageCircle,
+  Edit2,
+  Power,
+  Package,
+  ShieldCheck,
+  FileText,
+  User,
+  Info,
+  Layers,
+  Sparkles,
+} from 'lucide-react';
+import { Supplier, Product } from '@/types';
+import { INITIAL_SUPPLIERS } from '@/lib/data-service';
+
+export default function AdminSuppliersPage() {
+  const [suppliers, setSuppliers] = useState<Supplier[]>(INITIAL_SUPPLIERS);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [toast, setToast] = useState<string | null>(null);
+
+  // Modal State
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingSupplier, setEditingSupplier] = useState<Supplier | null>(null);
+
+  // Form fields
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [contactPerson, setContactPerson] = useState('');
+  const [address, setAddress] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSuppliers();
+    fetchProducts();
+  }, []);
+
+  const fetchSuppliers = async () => {
+    try {
+      const res = await fetch('/api/suppliers?all=true');
+      const data = await res.json();
+      if (data.success && data.suppliers) {
+        setSuppliers(data.suppliers);
+      }
+    } catch (e) {
+      console.error('Error fetching suppliers:', e);
+    }
+  };
+
+  const fetchProducts = async () => {
+    try {
+      const res = await fetch('/api/products?all=true');
+      const data = await res.json();
+      if (data.success && data.products) {
+        setProducts(data.products);
+      }
+    } catch (e) {
+      console.error('Error fetching products:', e);
+    }
+  };
+
+  const handleOpenCreateModal = () => {
+    setEditingSupplier(null);
+    setName('');
+    setPhone('57');
+    setContactPerson('');
+    setAddress('');
+    setNotes('');
+    setIsActive(true);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEditModal = (supplier: Supplier) => {
+    setEditingSupplier(supplier);
+    setName(supplier.name);
+    setPhone(supplier.phone);
+    setContactPerson(supplier.contactPerson || '');
+    setAddress(supplier.address || '');
+    setNotes(supplier.notes || '');
+    setIsActive(supplier.isActive !== false);
+    setIsModalOpen(true);
+  };
+
+  const handleToggleActive = async (supplier: Supplier) => {
+    const nextStatus = !supplier.isActive;
+    
+    // Optimistic update
+    setSuppliers((prev) =>
+      prev.map((s) => (s.id === supplier.id ? { ...s, isActive: nextStatus } : s))
+    );
+
+    try {
+      const res = await fetch('/api/suppliers', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: supplier.id,
+          updates: { isActive: nextStatus },
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setToast(
+          nextStatus
+            ? `🟢 Proveedor "${supplier.name}" ACTIVADO exitosamente.`
+            : `⚪ Proveedor "${supplier.name}" DESACTIVADO. Su información histórica y pedidos continúan 100% seguros.`
+        );
+        setTimeout(() => setToast(null), 4500);
+      }
+    } catch (e) {
+      console.error('Error toggling supplier active status:', e);
+      fetchSuppliers();
+    }
+  };
+
+  const handleSaveSupplier = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+
+    const cleanPhone = phone.replace(/\D/g, '');
+    const finalPhone = cleanPhone.startsWith('57') ? cleanPhone : `57${cleanPhone}`;
+
+    try {
+      if (editingSupplier) {
+        // Edit existing
+        const res = await fetch('/api/suppliers', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: editingSupplier.id,
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✅ Proveedor "${name}" actualizado con éxito.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      } else {
+        // Create new
+        const res = await fetch('/api/suppliers', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✨ Proveedor "${name}" registrado correctamente.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleOpenWhatsApp = (supplier: Supplier) => {
+    const cleanPhone = supplier.phone.startsWith('57') ? supplier.phone : `57${supplier.phone}`;
+    const text = encodeURIComponent(
+      `👋 Hola ${supplier.contactPerson || supplier.name}! Te escribo desde el panel de control de Sneaky Drops.`
+    );
+    window.open(`https://wa.me/${cleanPhone}?text=${text}`, '_blank');
+  };
+
+  // Metrics
+  const activeSuppliers = suppliers.filter((s) => s.isActive !== false);
+  const inactiveSuppliers = suppliers.filter((s) => s.isActive === false);
+
+  const filteredSuppliers = suppliers.filter((s) => {
+    const matchesSearch =
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.phone.includes(search) ||
+      (s.contactPerson && s.contactPerson.toLowerCase().includes(search.toLowerCase())) ||
+      (s.address && s.address.toLowerCase().includes(search.toLowerCase())) ||
+      (s.notes && s.notes.toLowerCase().includes(search.toLowerCase()));
+
+    if (!matchesSearch) return false;
+    if (statusFilter === 'active' && s.isActive === false) return false;
+    if (statusFilter === 'inactive' && s.isActive !== false) return false;
+    return true;
+  });
+
+  const getProductCountForSupplier = (supplierId: string, supplierName: string) => {
+    return products.filter(
+      (p) => p.supplierId === supplierId || (p.supplierName && p.supplierName.toLowerCase() === supplierName.toLowerCase())
+    ).length;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-black text-white flex items-center gap-2">
+            <Building2 className="w-6 h-6 text-orange-400" />
+            <span>Proveedores & Bodegas Aliadas ({suppliers.length})</span>
+          </h1>
+          <p className="text-xs text-zinc-400 mt-1">
+            Activa o desactiva proveedores en 1 clic <strong>sin perder el histórico de pedidos, productos ni trazabilidad logística</strong>.
+          </p>
+        </div>
+
+        <button
+          onClick={handleOpenCreateModal}
+          className="bg-gradient-to-r from-red-600 to-orange-500 hover:from-red-500 hover:to-orange-400 text-white font-bold text-xs px-4 py-2.5 rounded-2xl flex items-center space-x-2 shadow-lg cursor-pointer transition-all active:scale-95 self-start sm:self-auto"
+        >
+          <Plus className="w-4 h-4" />
+          <span>Nuevo Proveedor</span>
+        </button>
+      </div>
+
+      {toast && (
+        <div className="bg-orange-950/90 border border-orange-500 text-orange-200 px-4 py-3 rounded-2xl text-xs flex items-center justify-between shadow-xl animate-in fade-in">
+          <span>{toast}</span>
+          <button onClick={() => setToast(null)} className="font-bold text-white cursor-pointer ml-3">
+            ✕
+          </button>
+        </div>
+      )}
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3.5">
+        <div className="bg-zinc-900 border border-zinc-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-zinc-400 text-xs font-bold uppercase tracking-wider">
+            <span>Total Proveedores</span>
+            <Building2 className="w-4 h-4 text-orange-400" />
+          </div>
+          <p className="text-2xl font-black text-white">{suppliers.length}</p>
+          <p className="text-[10px] text-zinc-400">Bodegas y mayoristas registrados</p>
+        </div>
+
+        <div className="bg-zinc-900 border border-emerald-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-emerald-400 text-xs font-bold uppercase tracking-wider">
+            <span>Proveedores Activos</span>
+            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+          </div>
+          <p className="text-2xl font-black text-emerald-300">{activeSuppliers.length}</p>
+          <p className="text-[10px] text-emerald-400/80">Disponibles para nuevas zapatillas y pedidos</p>
+        </div>
+
+        <div className="bg-zinc-900 border border-amber-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-amber-400 text-xs font-bold uppercase tracking-wider">
+            <span>Desactivados / Históricos</span>
+            <XCircle className="w-4 h-4 text-amber-400" />
+          </div>
+          <p className="text-2xl font-black text-amber-300">{inactiveSuppliers.length}</p>
+          <p className="text-[10px] text-zinc-400">Historial preservado 100% intacto</p>
+        </div>
+
+        <div className="bg-zinc-900 border border-zinc-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-zinc-400 text-xs font-bold uppercase tracking-wider">
+            <span>Zapatillas Vinculadas</span>
+            <Package className="w-4 h-4 text-red-400" />
+          </div>
+          <p className="text-2xl font-black text-red-300">{products.length}</p>
+          <p className="text-[10px] text-zinc-400">Modelos en catálogo</p>
+        </div>
+      </div>
+
+      {/* Info Banner About Historical Safety */}
+      <div className="bg-gradient-to-r from-zinc-900 via-zinc-900 to-orange-950/40 border border-orange-500/20 rounded-3xl p-4 flex items-start space-x-3 text-xs text-zinc-300 shadow-md">
+        <Info className="w-5 h-5 text-orange-400 shrink-0 mt-0.5" />
+        <div className="space-y-1">
+          <p className="font-bold text-white">
+            🛡️ Trazabilidad & Protección Histórica Garantizada
+          </p>
+          <p className="text-[11px] text-zinc-400">
+            Al desactivar un proveedor, <strong>ningún pedido pasado se altera ni se pierde</strong>. Los manifiestos de despacho, reportes financieros y costos mayoristas de pedidos anteriores conservan su información original. El proveedor simplemente se oculta para nuevas asignaciones de zapatillas.
+          </p>
+        </div>
+      </div>
+
+      {/* Filter and Search Bar */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+        <div className="flex items-center space-x-1.5 bg-zinc-900 border border-zinc-800 p-1 rounded-2xl overflow-x-auto">
+          <button
+            onClick={() => setStatusFilter('all')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all ${
+              statusFilter === 'all' ? 'bg-white text-zinc-950 shadow' : 'text-zinc-400 hover:text-white'
+            }`}
+          >
+            Todos ({suppliers.length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('active')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'active'
+                ? 'bg-emerald-500/30 border border-emerald-500/50 text-emerald-300 shadow'
+                : 'text-zinc-400 hover:text-emerald-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-emerald-400" />
+            <span>Activos ({activeSuppliers.length})</span>
+          </button>
+          <button
+            onClick={() => setStatusFilter('inactive')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'inactive'
+                ? 'bg-amber-500/30 border border-amber-500/50 text-amber-300 shadow'
+                : 'text-zinc-400 hover:text-amber-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-amber-400" />
+            <span>Inactivos ({inactiveSuppliers.length})</span>
+          </button>
+        </div>
+
+        <div className="max-w-xs w-full">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Buscar proveedor, teléfono o bodega..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-zinc-900 border border-zinc-800 rounded-xl pl-9 pr-3.5 py-2 text-xs text-white outline-hidden focus:border-orange-400"
+            />
+            <Search className="w-4 h-4 text-zinc-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          </div>
+        </div>
+      </div>
+
+      {/* Supplier Cards Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filteredSuppliers.length === 0 ? (
+          <div className="col-span-full bg-zinc-900 border border-zinc-800 rounded-3xl p-12 text-center text-zinc-500 space-y-2">
+            <Building2 className="w-12 h-12 text-zinc-600 mx-auto" />
+            <p className="font-bold text-white text-sm">No se encontraron proveedores</p>
+            <p className="text-xs">Prueba con otro término de búsqueda o cambia los filtros.</p>
+          </div>
+        ) : (
+          filteredSuppliers.map((supplier) => {
+            const isSupActive = supplier.isActive !== false;
+            const linkedProductsCount = getProductCountForSupplier(supplier.id, supplier.name);
+
+            return (
+              <div
+                key={supplier.id}
+                className={`bg-zinc-900 border rounded-3xl p-5 shadow-xl transition-all flex flex-col justify-between space-y-4 ${
+                  isSupActive
+                    ? 'border-zinc-800 hover:border-orange-500/40'
+                    : 'border-zinc-800/80 opacity-75 bg-zinc-950/60'
+                }`}
+              >
+                {/* Card Top: Status & Name */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span
+                      className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border flex items-center gap-1 ${
+                        isSupActive
+                          ? 'bg-emerald-500/20 border-emerald-500/40 text-emerald-300'
+                          : 'bg-amber-500/20 border-amber-500/40 text-amber-300'
+                      }`}
+                    >
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${
+                          isSupActive ? 'bg-emerald-400 animate-pulse' : 'bg-amber-400'
+                        }`}
+                      />
+                      <span>{isSupActive ? 'Activo para Pedidos' : 'Inactivo (Histórico Seguro)'}</span>
+                    </span>
+
+                    <button
+                      onClick={() => handleToggleActive(supplier)}
+                      className={`text-[11px] font-bold px-2.5 py-1 rounded-xl border flex items-center gap-1 cursor-pointer transition-all ${
+                        isSupActive
+                          ? 'bg-red-500/10 border-red-500/30 text-red-400 hover:bg-red-500/20'
+                          : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20'
+                      }`}
+                      title={isSupActive ? 'Desactivar proveedor (conserva historial)' : 'Reactivar proveedor'}
+                    >
+                      <Power className="w-3 h-3" />
+                      <span>{isSupActive ? 'Desactivar' : 'Activar'}</span>
+                    </button>
+                  </div>
+
+                  <h3 className="font-black text-white text-base leading-snug">{supplier.name}</h3>
+
+                  {/* Details List */}
+                  <div className="space-y-1.5 text-xs pt-1">
+                    {supplier.contactPerson && (
+                      <p className="text-zinc-300 flex items-center gap-1.5">
+                        <User className="w-3.5 h-3.5 text-orange-400 shrink-0" />
+                        <span>Contacto: <strong className="text-white">{supplier.contactPerson}</strong></span>
+                      </p>
+                    )}
+
+                    <p className="text-zinc-300 flex items-center gap-1.5">
+                      <Phone className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                      <span className="font-mono text-emerald-300 font-semibold">{supplier.phone}</span>
+                    </p>
+
+                    {supplier.address && (
+                      <p className="text-zinc-400 flex items-center gap-1.5 text-[11px]">
+                        <MapPin className="w-3.5 h-3.5 text-red-400 shrink-0" />
+                        <span>{supplier.address}</span>
+                      </p>
+                    )}
+
+                    {supplier.notes && (
+                      <p className="text-zinc-400 italic text-[11px] bg-zinc-950 p-2 rounded-xl border border-zinc-800 mt-1">
+                        "{supplier.notes}"
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Card Bottom: Metrics & Actions */}
+                <div className="pt-3 border-t border-zinc-800 space-y-3">
+                  <div className="flex items-center justify-between text-xs text-zinc-400">
+                    <span className="flex items-center gap-1">
+                      <Package className="w-3.5 h-3.5 text-red-400" />
+                      <span>Modelos asignados:</span>
+                    </span>
+                    <strong className="text-white bg-zinc-950 px-2 py-0.5 rounded-lg border border-zinc-800">
+                      {linkedProductsCount} pares
+                    </strong>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <button
+                      onClick={() => handleOpenWhatsApp(supplier)}
+                      className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer shadow transition-all active:scale-95"
+                    >
+                      <MessageCircle className="w-3.5 h-3.5" />
+                      <span>WhatsApp</span>
+                    </button>
+
+                    <button
+                      onClick={() => handleOpenEditModal(supplier)}
+                      className="bg-zinc-800 hover:bg-zinc-700 text-zinc-200 font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer transition-all active:scale-95"
+                    >
+                      <Edit2 className="w-3.5 h-3.5 text-orange-400" />
+                      <span>Modificar</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Modal Crear / Editar Proveedor */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
+          <div className="bg-zinc-900 border border-zinc-800 rounded-3xl max-w-lg w-full p-6 space-y-4 shadow-2xl">
+            <div className="flex items-center justify-between border-b border-zinc-800 pb-3">
+              <h3 className="font-black text-white text-base flex items-center gap-2">
+                <Building2 className="w-5 h-5 text-orange-400" />
+                <span>{editingSupplier ? 'Modificar Proveedor' : 'Registrar Nuevo Proveedor'}</span>
+              </h3>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-zinc-400 hover:text-white cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            <form onSubmit={handleSaveSupplier} className="space-y-4 text-xs">
+              <div>
+                <label className="block text-zinc-400 font-bold mb-1">Nombre Comercial / Bodega *</label>
+                <input
+                  type="text"
+                  required
+                  placeholder="Ej. 💎 DIFUSIÓN JOVIC STORE COLOMBIA"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-orange-400 font-semibold"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-emerald-400 font-bold mb-1">Celular / WhatsApp *</label>
+                  <input
+                    type="tel"
+                    required
+                    placeholder="ej: 573167455877"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-3.5 py-2.5 text-emerald-300 outline-hidden focus:border-emerald-400 font-mono font-bold"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-zinc-400 font-bold mb-1">Persona de Contacto</label>
+                  <input
+                    type="text"
+                    placeholder="Ej. Asesor Despachos"
+                    value={contactPerson}
+                    onChange={(e) => setContactPerson(e.target.value)}
+                    className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-orange-400"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-zinc-400 font-bold mb-1">Ubicación / Dirección de la Bodega</label>
+                <input
+                  type="text"
+                  placeholder="Ej. CC MÍO Local 3B / San Andresito Cali"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-orange-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-zinc-400 font-bold mb-1">Notas / Políticas de Garantía & Horarios</label>
+                <textarea
+                  rows={3}
+                  placeholder="Ej. Especialista en Nike/Jordan Top Quality. Recogida de 9:00 AM a 6:00 PM."
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-orange-400"
+                />
+              </div>
+
+              <div className="bg-zinc-950 p-3 rounded-2xl border border-zinc-800 flex items-center justify-between">
+                <div>
+                  <p className="font-bold text-white text-xs">Estado del Proveedor</p>
+                  <p className="text-[10px] text-zinc-400">
+                    {isActive
+                      ? '🟢 Activo: disponible para asignar nuevas zapatillas y recibir pedidos'
+                      : '⚪ Desactivado: no aparecerá en nuevas publicaciones (el historial se mantiene)'}
+                  </p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isActive}
+                    onChange={(e) => setIsActive(e.target.checked)}
+                    className="sr-only peer"
+                  />
+                  <div className="w-11 h-6 bg-zinc-800 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
+                </label>
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-2 border-t border-zinc-800">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="bg-zinc-800 hover:bg-zinc-700 text-zinc-300 font-bold py-2.5 px-4 rounded-xl cursor-pointer"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="bg-gradient-to-r from-red-600 to-orange-500 hover:from-red-500 hover:to-orange-400 text-white font-bold py-2.5 px-5 rounded-xl shadow-lg cursor-pointer transition-all disabled:opacity-50"
+                >
+                  {isSaving ? 'Guardando...' : editingSupplier ? 'Actualizar Proveedor' : 'Guardar Proveedor'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

sneaky-app/src/app/api/orders/route.ts

@@ -28,3 +28,49 @@ export async function POST(request: Request) {
     return NextResponse.json({ success: false, error: error.message }, { status: 400 });
   }
 }
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateOrder(targetId, payload);
+
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Orden no encontrada' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, order: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const deleted = dataService.deleteOrder(id);
+    return NextResponse.json({ success: deleted, message: deleted ? 'Orden eliminada correctamente' : 'No se encontró la orden' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

sneaky-app/src/app/api/suppliers/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server';
+import { dataService } from '@/lib/data-service';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const includeInactive = searchParams.get('all') === 'true' || searchParams.get('includeInactive') === 'true';
+    const suppliers = dataService.getSuppliers(includeInactive);
+    return NextResponse.json({ success: true, suppliers });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    if (!body.name || !body.phone) {
+      return NextResponse.json({ success: false, error: 'El nombre y el teléfono son requeridos' }, { status: 400 });
+    }
+    const newSupplier = dataService.addSupplier(body);
+    return NextResponse.json({ success: true, supplier: newSupplier });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateSupplier(targetId, payload);
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Proveedor no encontrado' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, supplier: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    // Soft-deactivate to ensure 100% preservation of historical orders & catalog references
+    const success = dataService.deleteSupplier(id);
+    return NextResponse.json({ success, message: 'Proveedor desactivado correctamente sin perder historial' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

sneaky-app/src/components/mobile/MobileBottomDock.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { Home, Search, ShoppingBag, MessageCircle, Download, Check } from 'lucide-react';
+import { Home, Search, ShoppingBag, MessageCircle, Download, User } from 'lucide-react';
 import { useBrand } from '@/context/BrandContext';
 
 interface MobileBottomDockProps {
@@ -20,6 +20,18 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
 }) => {
   const { currentBrand } = useBrand();
   const [activeTab, setActiveTab] = useState('home');
+  const [isInsideApp, setIsInsideApp] = useState(false);
+
+  useEffect(() => {
+    const isNativeApp =
+      typeof window !== 'undefined' &&
+      (!!(window as any).Capacitor?.isNativePlatform?.() ||
+        (window as any).Capacitor?.getPlatform?.() === 'android' ||
+        (window as any).Capacitor?.getPlatform?.() === 'ios' ||
+        window.matchMedia?.('(display-mode: standalone)')?.matches ||
+        (window.navigator as any)?.standalone === true);
+    setIsInsideApp(isNativeApp);
+  }, []);
 
   const handleWhatsApp = () => {
     const text = encodeURIComponent(
@@ -31,6 +43,7 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
   return (
     <div className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-zinc-950/90 backdrop-blur-xl border-t border-zinc-800/80 px-3 py-2">
       <div className="flex items-center justify-around">
+        {/* 1. Inicio */}
         <Link
           href="/"
           onClick={() => setActiveTab('home')}
@@ -42,6 +55,7 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold">Inicio</span>
         </Link>
 
+        {/* 2. Buscar */}
         <button
           onClick={() => {
             setActiveTab('search');
@@ -58,6 +72,7 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold">Buscar</span>
         </button>
 
+        {/* 3. Carrito con Badge */}
         <button
           onClick={() => {
             setActiveTab('cart');
@@ -76,6 +91,7 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold text-white">Carrito</span>
         </button>
 
+        {/* 4. WhatsApp Asesoría */}
         <button
           onClick={handleWhatsApp}
           className="flex flex-col items-center gap-0.5 cursor-pointer text-emerald-400 hover:text-emerald-300"
@@ -84,6 +100,8 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold">WhatsApp</span>
         </button>
 
+        {/* 5. App Móvil (solo en Web) vs Perfil/Admin (si ya está en la App) */}
+        {!isInsideApp ? (
           <button
             onClick={onOpenInstallModal}
             className="flex flex-col items-center gap-0.5 cursor-pointer text-orange-400 hover:text-orange-300"
@@ -93,6 +111,15 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
             </div>
             <span className="text-[10px] font-bold">App Móvil</span>
           </button>
+        ) : (
+          <Link
+            href="/admin"
+            className="flex flex-col items-center gap-0.5 cursor-pointer text-zinc-400 hover:text-white"
+          >
+            <User className="w-5 h-5" />
+            <span className="text-[10px] font-bold">Admin</span>
+          </Link>
+        )}
       </div>
     </div>
   );

sneaky-app/src/lib/data-service.ts

@@ -2334,17 +2334,42 @@ class DataService {
     return this.products.length < initialLen;
   }
 
-  getSuppliers(): Supplier[] {
+  getSuppliers(includeInactive: boolean = true): Supplier[] {
-    return this.suppliers;
+    if (includeInactive) return this.suppliers;
+    return this.suppliers.filter((s) => s.isActive !== false);
   }
 
   getSupplierById(id: string): Supplier | undefined {
     return this.suppliers.find((s) => s.id === id);
   }
 
-  addSupplier(supplier: Supplier): Supplier {
+  addSupplier(supplier: Partial<Supplier>): Supplier {
-    this.suppliers.push(supplier);
+    const newSupplier: Supplier = {
-    return supplier;
+      id: supplier.id || `sup-${Date.now()}`,
+      name: supplier.name || 'Nuevo Proveedor',
+      phone: supplier.phone || '573167455877',
+      contactPerson: supplier.contactPerson || '',
+      address: supplier.address || '',
+      notes: supplier.notes || '',
+      isActive: supplier.isActive !== undefined ? supplier.isActive : true,
+    };
+    this.suppliers.push(newSupplier);
+    return newSupplier;
+  }
+
+  updateSupplier(id: string, updates: Partial<Supplier>): Supplier | null {
+    const idx = this.suppliers.findIndex((s) => s.id === id);
+    if (idx === -1) return null;
+    this.suppliers[idx] = { ...this.suppliers[idx], ...updates };
+    return this.suppliers[idx];
+  }
+
+  deleteSupplier(id: string): boolean {
+    // Soft delete (desactivación segura para preservar 100% el historial de pedidos y productos)
+    const supplier = this.suppliers.find((s) => s.id === id);
+    if (!supplier) return false;
+    supplier.isActive = false;
+    return true;
   }
 
   getCities(): City[] {
@@ -2382,6 +2407,10 @@ class DataService {
     return this.orders;
   }
 
+  getOrderById(id: string): Order | undefined {
+    return this.orders.find((o) => o.id === id);
+  }
+
   addOrder(order: Order): Order {
     this.orders.unshift(order);
     return order;
@@ -2389,7 +2418,7 @@ class DataService {
 
   createOrder(orderData: Partial<Order>): Order {
     const newOrder: Order = {
-      id: `ord-${Date.now()}`,
+      id: orderData.id || `ord-${Date.now()}`,
       customerName: orderData.customerName || 'Cliente',
       customerPhone: orderData.customerPhone || '',
       address: orderData.address || '',
@@ -2399,18 +2428,43 @@ class DataService {
       subtotal: orderData.subtotal || 0,
       shippingCost: orderData.shippingCost || 0,
       totalAmount: orderData.totalAmount || 0,
-      depositAmount: orderData.depositAmount || 10000,
+      depositAmount: orderData.depositAmount !== undefined ? orderData.depositAmount : 10000,
-      balanceDue: (orderData.totalAmount || 0) - (orderData.depositAmount || 10000),
+      balanceDue: orderData.balanceDue !== undefined ? orderData.balanceDue : ((orderData.totalAmount || 0) - (orderData.depositAmount !== undefined ? orderData.depositAmount : 10000)),
       paymentMethodId: orderData.paymentMethodId || 'pay-contraentrega',
       paymentMethodName: orderData.paymentMethodName || 'Contraentrega',
-      status: 'pending',
+      status: orderData.status || 'pending',
       notes: orderData.notes,
-      createdAt: new Date().toISOString(),
+      createdAt: orderData.createdAt || new Date().toISOString(),
     };
     this.orders.unshift(newOrder);
     return newOrder;
   }
 
+  updateOrder(id: string, updates: Partial<Order>): Order | null {
+    const idx = this.orders.findIndex((o) => o.id === id);
+    if (idx === -1) return null;
+
+    const current = this.orders[idx];
+    const total = updates.totalAmount !== undefined ? updates.totalAmount : current.totalAmount;
+    const deposit = updates.depositAmount !== undefined ? updates.depositAmount : current.depositAmount;
+    const balanceDue = updates.balanceDue !== undefined ? updates.balanceDue : (total - deposit);
+
+    this.orders[idx] = {
+      ...current,
+      ...updates,
+      totalAmount: total,
+      depositAmount: deposit,
+      balanceDue,
+    };
+    return this.orders[idx];
+  }
+
+  deleteOrder(id: string): boolean {
+    const initialLen = this.orders.length;
+    this.orders = this.orders.filter((o) => o.id !== id);
+    return this.orders.length < initialLen;
+  }
+
   updateOrderStatus(orderId: string, status: Order['status']): Order | null {
     const order = this.orders.find((o) => o.id === orderId);
     if (!order) return null;

sneaky-app/src/lib/evolution-api.ts

@@ -6,30 +6,28 @@ const EVOLUTION_API_KEY = process.env.EVOLUTION_API_KEY || 'EE49029EEB85-4568-8F
 const EVOLUTION_INSTANCE_NAME = process.env.EVOLUTION_INSTANCE_NAME || 'AutomataAlmeira';
 
 /**
- * Enviar mensaje de texto por WhatsApp a través de Evolution API
+ * Enviar mensaje de texto por WhatsApp a través de Evolution API v2
  */
 export async function sendWhatsAppMessage(toPhone: string, message: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendText/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1200,
-          presence: 'composing',
-        },
-        textMessage: {
         text: message,
-        },
+        delay: 1200,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 20000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -40,32 +38,31 @@ export async function sendWhatsAppMessage(toPhone: string, message: string): Pro
 }
 
 /**
- * Enviar mensaje con foto/catálogo a través de Evolution API
+ * Enviar mensaje con foto/catálogo a través de Evolution API v2
  */
 export async function sendWhatsAppMedia(toPhone: string, imageUrl: string, caption: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendMedia/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1500,
-          presence: 'composing',
-        },
-        mediaMessage: {
         mediatype: 'image',
-          caption,
+        mimetype: 'image/jpeg',
+        caption: caption,
         media: imageUrl,
-        },
+        delay: 1500,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 25000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -83,7 +80,7 @@ export function buildOrderConfirmationMessage(order: any): string {
     .map((item: any) => `👟 *${item.productName}*\n   📏 Talla: *${item.size}* | Cantidad: ${item.quantity} | Valor: ${formatCOP(item.price)}`)
     .join('\n\n');
 
-  return `🎉 *¡GRACIAS POR TU PEDIDO EN SNEAKERS CALI!* 🎉
+  return `🎉 *¡GRACIAS POR TU PEDIDO EN SNEAKY DROPS!* 🎉
 📌 *No. de Orden:* #${order.id}
 
 👤 *Cliente:* ${order.customerName}

zapply-app/src/app/admin/layout.tsx

@@ -15,6 +15,7 @@ import {
   Store,
   Users,
   MessageSquare,
+  Building2,
 } from 'lucide-react';
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -22,6 +23,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   const NAV_ITEMS = [
     { href: '/admin', label: 'Resumen & KPIs', icon: LayoutDashboard },
+    { href: '/admin/proveedores', label: 'Proveedores & Bodegas', icon: Building2, badge: 'Activos/Inactivos' },
     { href: '/admin/grupos-whatsapp', label: 'Grupos WhatsApp', icon: MessageSquare, badge: 'Monitoreo 24/7' },
     { href: '/admin/usuarios', label: 'Control de Usuarios', icon: Users, badge: 'Roles & Accesos' },
     { href: '/admin/configuracion', label: 'Datos de la Tienda', icon: Store },

zapply-app/src/app/admin/productos/page.tsx

@@ -33,6 +33,11 @@ export default function AdminProductsPage() {
       .then((r) => r.json())
       .then((d) => d.success && setProducts(d.products))
       .catch(() => {});
+
+    fetch('/api/suppliers?all=true')
+      .then((r) => r.json())
+      .then((d) => d.success && d.suppliers && setSuppliers(d.suppliers))
+      .catch(() => {});
   }, []);
 
   const handleToggleProductStatus = async (product: Product) => {

zapply-app/src/app/admin/proveedores/page.tsx

@@ -0,0 +1,593 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Building2,
+  Plus,
+  Search,
+  CheckCircle2,
+  XCircle,
+  Phone,
+  MapPin,
+  MessageCircle,
+  Edit2,
+  Power,
+  Package,
+  ShieldCheck,
+  FileText,
+  User,
+  Info,
+  Layers,
+  Sparkles,
+} from 'lucide-react';
+import { Supplier, Product } from '@/types';
+import { INITIAL_SUPPLIERS } from '@/lib/data-service';
+
+export default function AdminSuppliersPage() {
+  const [suppliers, setSuppliers] = useState<Supplier[]>(INITIAL_SUPPLIERS);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [toast, setToast] = useState<string | null>(null);
+
+  // Modal State
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingSupplier, setEditingSupplier] = useState<Supplier | null>(null);
+
+  // Form fields
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [contactPerson, setContactPerson] = useState('');
+  const [address, setAddress] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSuppliers();
+    fetchProducts();
+  }, []);
+
+  const fetchSuppliers = async () => {
+    try {
+      const res = await fetch('/api/suppliers?all=true');
+      const data = await res.json();
+      if (data.success && data.suppliers) {
+        setSuppliers(data.suppliers);
+      }
+    } catch (e) {
+      console.error('Error fetching suppliers:', e);
+    }
+  };
+
+  const fetchProducts = async () => {
+    try {
+      const res = await fetch('/api/products?all=true');
+      const data = await res.json();
+      if (data.success && data.products) {
+        setProducts(data.products);
+      }
+    } catch (e) {
+      console.error('Error fetching products:', e);
+    }
+  };
+
+  const handleOpenCreateModal = () => {
+    setEditingSupplier(null);
+    setName('');
+    setPhone('57');
+    setContactPerson('');
+    setAddress('');
+    setNotes('');
+    setIsActive(true);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEditModal = (supplier: Supplier) => {
+    setEditingSupplier(supplier);
+    setName(supplier.name);
+    setPhone(supplier.phone);
+    setContactPerson(supplier.contactPerson || '');
+    setAddress(supplier.address || '');
+    setNotes(supplier.notes || '');
+    setIsActive(supplier.isActive !== false);
+    setIsModalOpen(true);
+  };
+
+  const handleToggleActive = async (supplier: Supplier) => {
+    const nextStatus = !supplier.isActive;
+    
+    // Optimistic update
+    setSuppliers((prev) =>
+      prev.map((s) => (s.id === supplier.id ? { ...s, isActive: nextStatus } : s))
+    );
+
+    try {
+      const res = await fetch('/api/suppliers', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: supplier.id,
+          updates: { isActive: nextStatus },
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setToast(
+          nextStatus
+            ? `🟢 Proveedor "${supplier.name}" ACTIVADO exitosamente.`
+            : `⚪ Proveedor "${supplier.name}" DESACTIVADO. Su información histórica y pedidos continúan 100% seguros.`
+        );
+        setTimeout(() => setToast(null), 4500);
+      }
+    } catch (e) {
+      console.error('Error toggling supplier active status:', e);
+      fetchSuppliers();
+    }
+  };
+
+  const handleSaveSupplier = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+
+    const cleanPhone = phone.replace(/\D/g, '');
+    const finalPhone = cleanPhone.startsWith('57') ? cleanPhone : `57${cleanPhone}`;
+
+    try {
+      if (editingSupplier) {
+        // Edit existing
+        const res = await fetch('/api/suppliers', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: editingSupplier.id,
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✅ Proveedor "${name}" actualizado con éxito.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      } else {
+        // Create new
+        const res = await fetch('/api/suppliers', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name,
+            phone: finalPhone,
+            contactPerson,
+            address,
+            notes,
+            isActive,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setToast(`✨ Proveedor "${name}" registrado correctamente.`);
+          setTimeout(() => setToast(null), 4000);
+          setIsModalOpen(false);
+          fetchSuppliers();
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleOpenWhatsApp = (supplier: Supplier) => {
+    const cleanPhone = supplier.phone.startsWith('57') ? supplier.phone : `57${supplier.phone}`;
+    const text = encodeURIComponent(
+      `👋 Hola ${supplier.contactPerson || supplier.name}! Te escribo desde el panel de control de Zapply Cali.`
+    );
+    window.open(`https://wa.me/${cleanPhone}?text=${text}`, '_blank');
+  };
+
+  // Metrics
+  const activeSuppliers = suppliers.filter((s) => s.isActive !== false);
+  const inactiveSuppliers = suppliers.filter((s) => s.isActive === false);
+
+  const filteredSuppliers = suppliers.filter((s) => {
+    const matchesSearch =
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.phone.includes(search) ||
+      (s.contactPerson && s.contactPerson.toLowerCase().includes(search.toLowerCase())) ||
+      (s.address && s.address.toLowerCase().includes(search.toLowerCase())) ||
+      (s.notes && s.notes.toLowerCase().includes(search.toLowerCase()));
+
+    if (!matchesSearch) return false;
+    if (statusFilter === 'active' && s.isActive === false) return false;
+    if (statusFilter === 'inactive' && s.isActive !== false) return false;
+    return true;
+  });
+
+  const getProductCountForSupplier = (supplierId: string, supplierName: string) => {
+    return products.filter(
+      (p) => p.supplierId === supplierId || (p.supplierName && p.supplierName.toLowerCase() === supplierName.toLowerCase())
+    ).length;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-black text-white flex items-center gap-2">
+            <Building2 className="w-6 h-6 text-emerald-400" />
+            <span>Proveedores & Bodegas Aliadas ({suppliers.length})</span>
+          </h1>
+          <p className="text-xs text-slate-400 mt-1">
+            Activa o desactiva proveedores en 1 clic <strong>sin perder el histórico de pedidos, productos ni trazabilidad logística</strong>.
+          </p>
+        </div>
+
+        <button
+          onClick={handleOpenCreateModal}
+          className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white font-bold text-xs px-4 py-2.5 rounded-2xl flex items-center space-x-2 shadow-lg cursor-pointer transition-all active:scale-95 self-start sm:self-auto"
+        >
+          <Plus className="w-4 h-4" />
+          <span>Nuevo Proveedor</span>
+        </button>
+      </div>
+
+      {toast && (
+        <div className="bg-emerald-950/90 border border-emerald-500 text-emerald-200 px-4 py-3 rounded-2xl text-xs flex items-center justify-between shadow-xl animate-in fade-in">
+          <span>{toast}</span>
+          <button onClick={() => setToast(null)} className="font-bold text-white cursor-pointer ml-3">
+            ✕
+          </button>
+        </div>
+      )}
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3.5">
+        <div className="bg-slate-900 border border-slate-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-slate-400 text-xs font-bold uppercase tracking-wider">
+            <span>Total Proveedores</span>
+            <Building2 className="w-4 h-4 text-emerald-400" />
+          </div>
+          <p className="text-2xl font-black text-white">{suppliers.length}</p>
+          <p className="text-[10px] text-slate-400">Bodegas y mayoristas registrados</p>
+        </div>
+
+        <div className="bg-slate-900 border border-emerald-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-emerald-400 text-xs font-bold uppercase tracking-wider">
+            <span>Proveedores Activos</span>
+            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+          </div>
+          <p className="text-2xl font-black text-emerald-300">{activeSuppliers.length}</p>
+          <p className="text-[10px] text-emerald-400/80">Disponibles para nuevas zapatillas y pedidos</p>
+        </div>
+
+        <div className="bg-slate-900 border border-amber-500/30 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-amber-400 text-xs font-bold uppercase tracking-wider">
+            <span>Desactivados / Históricos</span>
+            <XCircle className="w-4 h-4 text-amber-400" />
+          </div>
+          <p className="text-2xl font-black text-amber-300">{inactiveSuppliers.length}</p>
+          <p className="text-[10px] text-slate-400">Historial preservado 100% intacto</p>
+        </div>
+
+        <div className="bg-slate-900 border border-slate-800 p-4 rounded-3xl space-y-1 shadow-lg">
+          <div className="flex items-center justify-between text-slate-400 text-xs font-bold uppercase tracking-wider">
+            <span>Zapatillas Vinculadas</span>
+            <Package className="w-4 h-4 text-cyan-400" />
+          </div>
+          <p className="text-2xl font-black text-cyan-300">{products.length}</p>
+          <p className="text-[10px] text-slate-400">Modelos en catálogo</p>
+        </div>
+      </div>
+
+      {/* Info Banner About Historical Safety */}
+      <div className="bg-gradient-to-r from-slate-900 via-slate-900 to-emerald-950/40 border border-emerald-500/20 rounded-3xl p-4 flex items-start space-x-3 text-xs text-slate-300 shadow-md">
+        <Info className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
+        <div className="space-y-1">
+          <p className="font-bold text-white">
+            🛡️ Trazabilidad & Protección Histórica Garantizada
+          </p>
+          <p className="text-[11px] text-slate-400">
+            Al desactivar un proveedor, <strong>ningún pedido pasado se altera ni se pierde</strong>. Los manifiestos de despacho, reportes financieros y costos mayoristas de pedidos anteriores conservan su información original. El proveedor simplemente se oculta para nuevas asignaciones de zapatillas.
+          </p>
+        </div>
+      </div>
+
+      {/* Filter and Search Bar */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+        <div className="flex items-center space-x-1.5 bg-slate-900 border border-slate-800 p-1 rounded-2xl overflow-x-auto">
+          <button
+            onClick={() => setStatusFilter('all')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all ${
+              statusFilter === 'all' ? 'bg-white text-slate-950 shadow' : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            Todos ({suppliers.length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('active')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'active'
+                ? 'bg-emerald-500/30 border border-emerald-500/50 text-emerald-300 shadow'
+                : 'text-slate-400 hover:text-emerald-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-emerald-400" />
+            <span>Activos ({activeSuppliers.length})</span>
+          </button>
+          <button
+            onClick={() => setStatusFilter('inactive')}
+            className={`text-xs font-bold px-3.5 py-1.5 rounded-xl cursor-pointer transition-all flex items-center gap-1.5 ${
+              statusFilter === 'inactive'
+                ? 'bg-amber-500/30 border border-amber-500/50 text-amber-300 shadow'
+                : 'text-slate-400 hover:text-amber-400'
+            }`}
+          >
+            <span className="w-2 h-2 rounded-full bg-amber-400" />
+            <span>Inactivos ({inactiveSuppliers.length})</span>
+          </button>
+        </div>
+
+        <div className="max-w-xs w-full">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Buscar proveedor, teléfono o bodega..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-9 pr-3.5 py-2 text-xs text-white outline-hidden focus:border-emerald-400"
+            />
+            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          </div>
+        </div>
+      </div>
+
+      {/* Supplier Cards Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filteredSuppliers.length === 0 ? (
+          <div className="col-span-full bg-slate-900 border border-slate-800 rounded-3xl p-12 text-center text-slate-500 space-y-2">
+            <Building2 className="w-12 h-12 text-slate-600 mx-auto" />
+            <p className="font-bold text-white text-sm">No se encontraron proveedores</p>
+            <p className="text-xs">Prueba con otro término de búsqueda o cambia los filtros.</p>
+          </div>
+        ) : (
+          filteredSuppliers.map((supplier) => {
+            const isSupActive = supplier.isActive !== false;
+            const linkedProductsCount = getProductCountForSupplier(supplier.id, supplier.name);
+
+            return (
+              <div
+                key={supplier.id}
+                className={`bg-slate-900 border rounded-3xl p-5 shadow-xl transition-all flex flex-col justify-between space-y-4 ${
+                  isSupActive
+                    ? 'border-slate-800 hover:border-emerald-500/40'
+                    : 'border-slate-800/80 opacity-75 bg-slate-950/60'
+                }`}
+              >
+                {/* Card Top: Status & Name */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span
+                      className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border flex items-center gap-1 ${
+                        isSupActive
+                          ? 'bg-emerald-500/20 border-emerald-500/40 text-emerald-300'
+                          : 'bg-amber-500/20 border-amber-500/40 text-amber-300'
+                      }`}
+                    >
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${
+                          isSupActive ? 'bg-emerald-400 animate-pulse' : 'bg-amber-400'
+                        }`}
+                      />
+                      <span>{isSupActive ? 'Activo para Pedidos' : 'Inactivo (Histórico Seguro)'}</span>
+                    </span>
+
+                    <button
+                      onClick={() => handleToggleActive(supplier)}
+                      className={`text-[11px] font-bold px-2.5 py-1 rounded-xl border flex items-center gap-1 cursor-pointer transition-all ${
+                        isSupActive
+                          ? 'bg-red-500/10 border-red-500/30 text-red-400 hover:bg-red-500/20'
+                          : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20'
+                      }`}
+                      title={isSupActive ? 'Desactivar proveedor (conserva historial)' : 'Reactivar proveedor'}
+                    >
+                      <Power className="w-3 h-3" />
+                      <span>{isSupActive ? 'Desactivar' : 'Activar'}</span>
+                    </button>
+                  </div>
+
+                  <h3 className="font-black text-white text-base leading-snug">{supplier.name}</h3>
+
+                  {/* Details List */}
+                  <div className="space-y-1.5 text-xs pt-1">
+                    {supplier.contactPerson && (
+                      <p className="text-slate-300 flex items-center gap-1.5">
+                        <User className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                        <span>Contacto: <strong className="text-white">{supplier.contactPerson}</strong></span>
+                      </p>
+                    )}
+
+                    <p className="text-slate-300 flex items-center gap-1.5">
+                      <Phone className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                      <span className="font-mono text-emerald-300 font-semibold">{supplier.phone}</span>
+                    </p>
+
+                    {supplier.address && (
+                      <p className="text-slate-400 flex items-center gap-1.5 text-[11px]">
+                        <MapPin className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+                        <span>{supplier.address}</span>
+                      </p>
+                    )}
+
+                    {supplier.notes && (
+                      <p className="text-slate-400 italic text-[11px] bg-slate-950 p-2 rounded-xl border border-slate-800 mt-1">
+                        "{supplier.notes}"
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Card Bottom: Metrics & Actions */}
+                <div className="pt-3 border-t border-slate-800 space-y-3">
+                  <div className="flex items-center justify-between text-xs text-slate-400">
+                    <span className="flex items-center gap-1">
+                      <Package className="w-3.5 h-3.5 text-cyan-400" />
+                      <span>Modelos asignados:</span>
+                    </span>
+                    <strong className="text-white bg-slate-950 px-2 py-0.5 rounded-lg border border-slate-800">
+                      {linkedProductsCount} pares
+                    </strong>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <button
+                      onClick={() => handleOpenWhatsApp(supplier)}
+                      className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer shadow transition-all active:scale-95"
+                    >
+                      <MessageCircle className="w-3.5 h-3.5" />
+                      <span>WhatsApp</span>
+                    </button>
+
+                    <button
+                      onClick={() => handleOpenEditModal(supplier)}
+                      className="bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-xs py-2 px-3 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer transition-all active:scale-95"
+                    >
+                      <Edit2 className="w-3.5 h-3.5 text-emerald-400" />
+                      <span>Modificar</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Modal Crear / Editar Proveedor */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
+          <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 space-y-4 shadow-2xl">
+            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
+              <h3 className="font-black text-white text-base flex items-center gap-2">
+                <Building2 className="w-5 h-5 text-emerald-400" />
+                <span>{editingSupplier ? 'Modificar Proveedor' : 'Registrar Nuevo Proveedor'}</span>
+              </h3>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-slate-400 hover:text-white cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            <form onSubmit={handleSaveSupplier} className="space-y-4 text-xs">
+              <div>
+                <label className="block text-slate-400 font-bold mb-1">Nombre Comercial / Bodega *</label>
+                <input
+                  type="text"
+                  required
+                  placeholder="Ej. 💎 DIFUSIÓN JOVIC STORE COLOMBIA"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-emerald-400 font-semibold"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-emerald-400 font-bold mb-1">Celular / WhatsApp *</label>
+                  <input
+                    type="tel"
+                    required
+                    placeholder="ej: 573167455877"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-emerald-300 outline-hidden focus:border-emerald-400 font-mono font-bold"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-slate-400 font-bold mb-1">Persona de Contacto</label>
+                  <input
+                    type="text"
+                    placeholder="Ej. Asesor Despachos"
+                    value={contactPerson}
+                    onChange={(e) => setContactPerson(e.target.value)}
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-emerald-400"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-slate-400 font-bold mb-1">Ubicación / Dirección de la Bodega</label>
+                <input
+                  type="text"
+                  placeholder="Ej. CC MÍO Local 3B / San Andresito Cali"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-emerald-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-slate-400 font-bold mb-1">Notas / Políticas de Garantía & Horarios</label>
+                <textarea
+                  rows={3}
+                  placeholder="Ej. Especialista en Nike/Jordan Top Quality. Recogida de 9:00 AM a 6:00 PM."
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-white outline-hidden focus:border-emerald-400"
+                />
+              </div>
+
+              <div className="bg-slate-950 p-3 rounded-2xl border border-slate-800 flex items-center justify-between">
+                <div>
+                  <p className="font-bold text-white text-xs">Estado del Proveedor</p>
+                  <p className="text-[10px] text-slate-400">
+                    {isActive
+                      ? '🟢 Activo: disponible para asignar nuevas zapatillas y recibir pedidos'
+                      : '⚪ Desactivado: no aparecerá en nuevas publicaciones (el historial se mantiene)'}
+                  </p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isActive}
+                    onChange={(e) => setIsActive(e.target.checked)}
+                    className="sr-only peer"
+                  />
+                  <div className="w-11 h-6 bg-slate-800 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
+                </label>
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-2 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold py-2.5 px-4 rounded-xl cursor-pointer"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white font-bold py-2.5 px-5 rounded-xl shadow-lg cursor-pointer transition-all disabled:opacity-50"
+                >
+                  {isSaving ? 'Guardando...' : editingSupplier ? 'Actualizar Proveedor' : 'Guardar Proveedor'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

zapply-app/src/app/api/orders/route.ts

@@ -28,3 +28,49 @@ export async function POST(request: Request) {
     return NextResponse.json({ success: false, error: error.message }, { status: 400 });
   }
 }
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateOrder(targetId, payload);
+
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Orden no encontrada' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, order: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de la orden requerido' }, { status: 400 });
+    }
+
+    const deleted = dataService.deleteOrder(id);
+    return NextResponse.json({ success: deleted, message: deleted ? 'Orden eliminada correctamente' : 'No se encontró la orden' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

zapply-app/src/app/api/suppliers/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server';
+import { dataService } from '@/lib/data-service';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const includeInactive = searchParams.get('all') === 'true' || searchParams.get('includeInactive') === 'true';
+    const suppliers = dataService.getSuppliers(includeInactive);
+    return NextResponse.json({ success: true, suppliers });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    if (!body.name || !body.phone) {
+      return NextResponse.json({ success: false, error: 'El nombre y el teléfono son requeridos' }, { status: 400 });
+    }
+    const newSupplier = dataService.addSupplier(body);
+    return NextResponse.json({ success: true, supplier: newSupplier });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function PUT(request: Request) {
+  try {
+    const body = await request.json();
+    const { id, updates, ...rest } = body;
+    const targetId = id || rest.id;
+    if (!targetId) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    const payload = updates || rest;
+    const updated = dataService.updateSupplier(targetId, payload);
+    if (!updated) {
+      return NextResponse.json({ success: false, error: 'Proveedor no encontrado' }, { status: 404 });
+    }
+
+    return NextResponse.json({ success: true, supplier: updated });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 400 });
+  }
+}
+
+export async function DELETE(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    let id = searchParams.get('id');
+
+    if (!id) {
+      try {
+        const body = await request.json();
+        id = body?.id;
+      } catch (_) {}
+    }
+
+    if (!id) {
+      return NextResponse.json({ success: false, error: 'ID de proveedor requerido' }, { status: 400 });
+    }
+
+    // Soft-deactivate to ensure 100% preservation of historical orders & catalog references
+    const success = dataService.deleteSupplier(id);
+    return NextResponse.json({ success, message: 'Proveedor desactivado correctamente sin perder historial' });
+  } catch (error: any) {
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

zapply-app/src/components/mobile/MobileBottomDock.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { Home, Search, ShoppingBag, MessageCircle, Download, Check } from 'lucide-react';
+import { Home, Search, ShoppingBag, MessageCircle, Download, User } from 'lucide-react';
 import { useBrand } from '@/context/BrandContext';
 
 interface MobileBottomDockProps {
@@ -20,6 +20,18 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
 }) => {
   const { currentBrand } = useBrand();
   const [activeTab, setActiveTab] = useState('home');
+  const [isInsideApp, setIsInsideApp] = useState(false);
+
+  useEffect(() => {
+    const isNativeApp =
+      typeof window !== 'undefined' &&
+      (!!(window as any).Capacitor?.isNativePlatform?.() ||
+        (window as any).Capacitor?.getPlatform?.() === 'android' ||
+        (window as any).Capacitor?.getPlatform?.() === 'ios' ||
+        window.matchMedia?.('(display-mode: standalone)')?.matches ||
+        (window.navigator as any)?.standalone === true);
+    setIsInsideApp(isNativeApp);
+  }, []);
 
   const handleWhatsApp = () => {
     const text = encodeURIComponent(
@@ -84,6 +96,7 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
           <span className="text-[10px] font-bold">WhatsApp</span>
         </button>
 
+        {!isInsideApp ? (
           <button
             onClick={onOpenInstallModal}
             className="flex flex-col items-center gap-0.5 cursor-pointer text-emerald-400 hover:text-emerald-300"
@@ -93,6 +106,15 @@ export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
             </div>
             <span className="text-[10px] font-bold">App Móvil</span>
           </button>
+        ) : (
+          <Link
+            href="/admin"
+            className="flex flex-col items-center gap-0.5 cursor-pointer text-slate-400 hover:text-white"
+          >
+            <User className="w-5 h-5" />
+            <span className="text-[10px] font-bold">Admin</span>
+          </Link>
+        )}
       </div>
     </div>
   );

zapply-app/src/context/AuthContext.tsx

@@ -5,6 +5,8 @@ import { User } from '@/types';
 
 interface AuthContextType {
   user: User | null;
+  sendOtp: (identifier: string) => Promise<{ success: boolean; error?: string; message?: string; phone?: string }>;
+  verifyOtp: (identifier: string, code: string) => Promise<{ success: boolean; error?: string }>;
   login: (identifier: string) => Promise<{ success: boolean; error?: string }>;
   register: (data: { name: string; email: string; phone: string; city?: string; address?: string }) => Promise<{ success: boolean; error?: string }>;
   logout: () => void;
@@ -28,26 +30,47 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   }, []);
 
-  const login = async (identifier: string) => {
+  const sendOtp = async (identifier: string) => {
     try {
-      const res = await fetch('/api/auth/login', {
+      const res = await fetch('/api/auth/send-otp', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ identifier }),
       });
       const data = await res.json();
+      if (data.success) {
+        return { success: true, message: data.message, phone: data.phone };
+      }
+      return { success: false, error: data.error || 'Error al enviar código' };
+    } catch (e: any) {
+      return { success: false, error: e.message };
+    }
+  };
+
+  const verifyOtp = async (identifier: string, code: string) => {
+    try {
+      const res = await fetch('/api/auth/verify-otp', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ identifier, code }),
+      });
+      const data = await res.json();
       if (data.success && data.user) {
         setUser(data.user);
         localStorage.setItem('zapply_user', JSON.stringify(data.user));
         setIsAuthModalOpen(false);
         return { success: true };
       }
-      return { success: false, error: data.error || 'Error al iniciar sesión' };
+      return { success: false, error: data.error || 'Código incorrecto' };
     } catch (e: any) {
       return { success: false, error: e.message };
     }
   };
 
+  const login = async (identifier: string) => {
+    return sendOtp(identifier);
+  };
+
   const register = async (data: { name: string; email: string; phone: string; city?: string; address?: string }) => {
     try {
       const res = await fetch('/api/auth/register', {
@@ -73,19 +96,18 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     localStorage.removeItem('zapply_user');
   };
 
-  const openAuthModal = () => setIsAuthModalOpen(true);
-  const closeAuthModal = () => setIsAuthModalOpen(false);
-
   return (
     <AuthContext.Provider
       value={{
         user,
+        sendOtp,
+        verifyOtp,
         login,
         register,
         logout,
         isAuthModalOpen,
-        openAuthModal,
+        openAuthModal: () => setIsAuthModalOpen(true),
-        closeAuthModal,
+        closeAuthModal: () => setIsAuthModalOpen(false),
       }}
     >
       {children}

zapply-app/src/lib/data-service.ts

@@ -2334,17 +2334,42 @@ class DataService {
     return this.products.length < initialLen;
   }
 
-  getSuppliers(): Supplier[] {
+  getSuppliers(includeInactive: boolean = true): Supplier[] {
-    return this.suppliers;
+    if (includeInactive) return this.suppliers;
+    return this.suppliers.filter((s) => s.isActive !== false);
   }
 
   getSupplierById(id: string): Supplier | undefined {
     return this.suppliers.find((s) => s.id === id);
   }
 
-  addSupplier(supplier: Supplier): Supplier {
+  addSupplier(supplier: Partial<Supplier>): Supplier {
-    this.suppliers.push(supplier);
+    const newSupplier: Supplier = {
-    return supplier;
+      id: supplier.id || `sup-${Date.now()}`,
+      name: supplier.name || 'Nuevo Proveedor',
+      phone: supplier.phone || '573167455877',
+      contactPerson: supplier.contactPerson || '',
+      address: supplier.address || '',
+      notes: supplier.notes || '',
+      isActive: supplier.isActive !== undefined ? supplier.isActive : true,
+    };
+    this.suppliers.push(newSupplier);
+    return newSupplier;
+  }
+
+  updateSupplier(id: string, updates: Partial<Supplier>): Supplier | null {
+    const idx = this.suppliers.findIndex((s) => s.id === id);
+    if (idx === -1) return null;
+    this.suppliers[idx] = { ...this.suppliers[idx], ...updates };
+    return this.suppliers[idx];
+  }
+
+  deleteSupplier(id: string): boolean {
+    // Soft delete (desactivación segura para preservar 100% el historial de pedidos y productos)
+    const supplier = this.suppliers.find((s) => s.id === id);
+    if (!supplier) return false;
+    supplier.isActive = false;
+    return true;
   }
 
   getCities(): City[] {
@@ -2382,6 +2407,10 @@ class DataService {
     return this.orders;
   }
 
+  getOrderById(id: string): Order | undefined {
+    return this.orders.find((o) => o.id === id);
+  }
+
   addOrder(order: Order): Order {
     this.orders.unshift(order);
     return order;
@@ -2389,7 +2418,7 @@ class DataService {
 
   createOrder(orderData: Partial<Order>): Order {
     const newOrder: Order = {
-      id: `ord-${Date.now()}`,
+      id: orderData.id || `ord-${Date.now()}`,
       customerName: orderData.customerName || 'Cliente',
       customerPhone: orderData.customerPhone || '',
       address: orderData.address || '',
@@ -2399,18 +2428,43 @@ class DataService {
       subtotal: orderData.subtotal || 0,
       shippingCost: orderData.shippingCost || 0,
       totalAmount: orderData.totalAmount || 0,
-      depositAmount: orderData.depositAmount || 10000,
+      depositAmount: orderData.depositAmount !== undefined ? orderData.depositAmount : 10000,
-      balanceDue: (orderData.totalAmount || 0) - (orderData.depositAmount || 10000),
+      balanceDue: orderData.balanceDue !== undefined ? orderData.balanceDue : ((orderData.totalAmount || 0) - (orderData.depositAmount !== undefined ? orderData.depositAmount : 10000)),
       paymentMethodId: orderData.paymentMethodId || 'pay-contraentrega',
       paymentMethodName: orderData.paymentMethodName || 'Contraentrega',
-      status: 'pending',
+      status: orderData.status || 'pending',
       notes: orderData.notes,
-      createdAt: new Date().toISOString(),
+      createdAt: orderData.createdAt || new Date().toISOString(),
     };
     this.orders.unshift(newOrder);
     return newOrder;
   }
 
+  updateOrder(id: string, updates: Partial<Order>): Order | null {
+    const idx = this.orders.findIndex((o) => o.id === id);
+    if (idx === -1) return null;
+
+    const current = this.orders[idx];
+    const total = updates.totalAmount !== undefined ? updates.totalAmount : current.totalAmount;
+    const deposit = updates.depositAmount !== undefined ? updates.depositAmount : current.depositAmount;
+    const balanceDue = updates.balanceDue !== undefined ? updates.balanceDue : (total - deposit);
+
+    this.orders[idx] = {
+      ...current,
+      ...updates,
+      totalAmount: total,
+      depositAmount: deposit,
+      balanceDue,
+    };
+    return this.orders[idx];
+  }
+
+  deleteOrder(id: string): boolean {
+    const initialLen = this.orders.length;
+    this.orders = this.orders.filter((o) => o.id !== id);
+    return this.orders.length < initialLen;
+  }
+
   updateOrderStatus(orderId: string, status: Order['status']): Order | null {
     const order = this.orders.find((o) => o.id === orderId);
     if (!order) return null;

zapply-app/src/lib/evolution-api.ts

@@ -6,30 +6,29 @@ const EVOLUTION_API_KEY = process.env.EVOLUTION_API_KEY || 'EE49029EEB85-4568-8F
 const EVOLUTION_INSTANCE_NAME = process.env.EVOLUTION_INSTANCE_NAME || 'AutomataAlmeira';
 
 /**
- * Enviar mensaje de texto por WhatsApp a través de Evolution API
+ * Enviar mensaje de texto por WhatsApp a través de Evolution API v2
  */
 export async function sendWhatsAppMessage(toPhone: string, message: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  // Evolution API v2 acepta el número directamente con código de país (ej. 573167455877)
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendText/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1200,
-          presence: 'composing',
-        },
-        textMessage: {
         text: message,
-        },
+        delay: 1200,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 20000,
       }
     );
     return response.status === 200 || response.status === 201;
@@ -40,32 +39,31 @@ export async function sendWhatsAppMessage(toPhone: string, message: string): Pro
 }
 
 /**
- * Enviar mensaje con foto/catálogo a través de Evolution API
+ * Enviar mensaje con foto/catálogo a través de Evolution API v2
  */
 export async function sendWhatsAppMedia(toPhone: string, imageUrl: string, caption: string): Promise<boolean> {
-  const cleanPhone = toPhone.replace(/\D/g, '');
+  const cleanDigits = toPhone.replace(/\D/g, '');
-  const recipient = cleanPhone.startsWith('57') ? `${cleanPhone}@s.whatsapp.net` : `57${cleanPhone}@s.whatsapp.net`;
+  if (!cleanDigits) return false;
+
+  const recipient = cleanDigits.startsWith('57') ? cleanDigits : `57${cleanDigits}`;
 
   try {
     const response = await axios.post(
       `${EVOLUTION_API_URL}/message/sendMedia/${EVOLUTION_INSTANCE_NAME}`,
       {
         number: recipient,
-        options: {
-          delay: 1500,
-          presence: 'composing',
-        },
-        mediaMessage: {
         mediatype: 'image',
-          caption,
+        mimetype: 'image/jpeg',
+        caption: caption,
         media: imageUrl,
-        },
+        delay: 1500,
       },
       {
         headers: {
           apikey: EVOLUTION_API_KEY,
           'Content-Type': 'application/json',
         },
+        timeout: 25000,
       }
     );
     return response.status === 200 || response.status === 201;