+
+ );
+}
diff --git a/src/components/payments/ClabeDisplay.tsx b/src/components/payments/ClabeDisplay.tsx
new file mode 100644
index 0000000..49c6309
--- /dev/null
+++ b/src/components/payments/ClabeDisplay.tsx
@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Copy, Check, Building } from 'lucide-react';
+import { codiSpeiApi } from '../../lib/api';
+
+interface ClabeDisplayProps {
+ showCreateButton?: boolean;
+ beneficiaryName?: string;
+}
+
+export function ClabeDisplay({ showCreateButton = true, beneficiaryName }: ClabeDisplayProps) {
+ const [copied, setCopied] = useState(false);
+ const queryClient = useQueryClient();
+
+ const { data, isLoading } = useQuery({
+ queryKey: ['clabe'],
+ queryFn: async () => {
+ const res = await codiSpeiApi.getClabe();
+ return res.data;
+ },
+ });
+
+ const createMutation = useMutation({
+ mutationFn: (name: string) => codiSpeiApi.createClabe(name),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['clabe'] });
+ },
+ });
+
+ const copyClabe = async () => {
+ if (data?.clabe) {
+ await navigator.clipboard.writeText(data.clabe);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }
+ };
+
+ const formatClabe = (clabe: string) => {
+ // Format: XXX XXX XXXX XXXX XXXX
+ return clabe.replace(/(\d{3})(\d{3})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4 $5');
+ };
+
+ if (isLoading) {
+ return (
+ setSidebarOpen(false)}
+ />
+
+
+ {/* Desktop sidebar */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Main content */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {tenant ? getInitials(tenant.name) : 'MC'}
+
+
+
+
+ {tenant?.name || 'Mi Negocio'}
+{user?.name}
+
+ {/* Mobile header */}
+
+
+
+
+
+
+
+ {/* Page content */}
+
+
+
+
+
+ );
+ }
+
+ if (!data?.clabe && showCreateButton) {
+ return (
+
+
+ );
+ }
+
+ if (!data?.clabe) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ CLABE Virtual
+Recibe transferencias SPEI
+
+
+ );
+}
diff --git a/src/components/payments/CodiQR.tsx b/src/components/payments/CodiQR.tsx
new file mode 100644
index 0000000..7416066
--- /dev/null
+++ b/src/components/payments/CodiQR.tsx
@@ -0,0 +1,167 @@
+import { useState, useEffect } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { QrCode, Clock, Check, X, RefreshCw } from 'lucide-react';
+import { codiSpeiApi } from '../../lib/api';
+
+interface CodiQRProps {
+ amount: number;
+ description?: string;
+ saleId?: string;
+ onSuccess?: () => void;
+ onCancel?: () => void;
+}
+
+export function CodiQR({ amount, description, saleId, onSuccess, onCancel }: CodiQRProps) {
+ const [transactionId, setTransactionId] = useState
+
+
+
+
+
+
+
+
+ + {formatClabe(data.clabe)} +
+ {data.beneficiaryName && ( ++ {data.beneficiaryName} +
+ )} ++ Las transferencias se reflejan automaticamente +
+
+
+
+ );
+ }
+
+ if (status?.status === 'confirmed') {
+ return (
+ Generando QR de cobro...
+
+
+ );
+ }
+
+ if (status?.status === 'expired' || timeLeft <= 0) {
+ return (
+
+
+ Pago Confirmado
+El pago de ${amount.toFixed(2)} fue recibido
+
+
+ );
+ }
+
+ return (
+
+
+ QR Expirado
+El codigo QR ha expirado
+ +
+
+ );
+}
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..7de3735
--- /dev/null
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,118 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { authApi } from '../lib/api';
+
+interface User {
+ id: string;
+ name: string;
+ role: string;
+ phone: string;
+}
+
+interface Tenant {
+ id: string;
+ name: string;
+ slug: string;
+ businessType: string;
+ subscriptionStatus: string;
+}
+
+interface AuthContextType {
+ user: User | null;
+ tenant: Tenant | null;
+ isAuthenticated: boolean;
+ isLoading: boolean;
+ login: (phone: string, pin: string) => Promise
+
+
+ {/* QR Code Display */}
+ Pagar con CoDi
+${amount.toFixed(2)}
+ {description &&{description}
} +
+
+
+ {/* Timer */}
+
+ {/* In production, generate actual QR code from qrData */}
+
+
+
+ Escanea con tu app bancaria
+
+
+
+ {/* Instructions */}
+
+
+
+ {/* Actions */}
+ 1. Abre la app de tu banco
+2. Escanea el codigo QR
+3. Confirma el pago
+
+
+
+
+
+ {/* Reference */}
+ {status?.reference && (
+ Ref: {status.reference}
+ )} +
+
+ );
+}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..477d4e6
--- /dev/null
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,131 @@
+import {
+ TrendingUp,
+ ShoppingCart,
+ Users,
+ CreditCard,
+ Package,
+ AlertCircle,
+} from 'lucide-react';
+
+const stats = [
+ { name: 'Ventas Hoy', value: '$1,240', change: '+12%', icon: TrendingUp, color: 'green' },
+ { name: 'Pedidos', value: '23', change: '+5', icon: ShoppingCart, color: 'blue' },
+ { name: 'Clientes', value: '156', change: '+3', icon: Users, color: 'purple' },
+ { name: 'Fiados Pendientes', value: '$2,100', change: '-$450', icon: CreditCard, color: 'orange' },
+];
+
+const recentOrders = [
+ { id: 'MCH-001', customer: 'Maria Lopez', total: 156.00, status: 'ready', time: '10:30 AM' },
+ { id: 'MCH-002', customer: 'Juan Perez', total: 89.50, status: 'preparing', time: '10:45 AM' },
+ { id: 'MCH-003', customer: 'Ana Garcia', total: 234.00, status: 'pending', time: '11:00 AM' },
+];
+
+const lowStockProducts = [
+ { name: 'Coca-Cola 600ml', stock: 5, minStock: 10 },
+ { name: 'Pan Bimbo', stock: 2, minStock: 5 },
+ { name: 'Leche Lala 1L', stock: 3, minStock: 8 },
+];
+
+const statusColors: Record
+
+
+ {/* Search */}
+
+
+
+ Clientes
+{mockCustomers.length} clientes registrados
+
+
+
+ {/* Customers List */}
+
+ {filteredCustomers.map((customer) => (
+
+
+
+ ))}
+
+
+
+
+
+ {customer.name}
+
+
+ {customer.email && (
+
+
+ )}
+ {customer.address && (
+
+
+ )}
+
+
+ Ultima visita
+{customer.lastVisit}
+
+
+
+
+ Compras
+{customer.totalPurchases}
+
+
+ Total gastado
+${customer.totalSpent.toFixed(0)}
+
+
+ Fiado
+
+ 0 ? 'text-orange-500' : 'text-green-500'
+ }`} />
+
+ 0 ? 'text-orange-600' : 'text-green-600' + }`}> + ${customer.fiadoBalance.toFixed(0)} +
+
+
+ );
+}
diff --git a/src/pages/Fiado.tsx b/src/pages/Fiado.tsx
new file mode 100644
index 0000000..19a75c7
--- /dev/null
+++ b/src/pages/Fiado.tsx
@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import { CreditCard, AlertTriangle, CheckCircle, Clock, Plus } from 'lucide-react';
+import clsx from 'clsx';
+
+const mockFiados = [
+ {
+ id: '1',
+ customer: 'Maria Lopez',
+ phone: '5551234567',
+ amount: 150.00,
+ description: 'Compra del 15/01',
+ status: 'pending',
+ dueDate: '2024-01-30',
+ createdAt: '2024-01-15',
+ },
+ {
+ id: '2',
+ customer: 'Ana Garcia',
+ phone: '5555555555',
+ amount: 320.00,
+ description: 'Productos varios',
+ status: 'overdue',
+ dueDate: '2024-01-10',
+ createdAt: '2024-01-01',
+ },
+ {
+ id: '3',
+ customer: 'Pedro Martinez',
+ phone: '5553334444',
+ amount: 89.50,
+ description: 'Bebidas y botanas',
+ status: 'pending',
+ dueDate: '2024-02-01',
+ createdAt: '2024-01-14',
+ },
+];
+
+const recentPayments = [
+ { customer: 'Juan Perez', amount: 200.00, date: '2024-01-15' },
+ { customer: 'Laura Sanchez', amount: 150.00, date: '2024-01-14' },
+ { customer: 'Carlos Ruiz', amount: 75.00, date: '2024-01-13' },
+];
+
+export function Fiado() {
+ const [filter, setFilter] = useState<'all' | 'pending' | 'overdue'>('all');
+
+ const totalPending = mockFiados.reduce((sum, f) => sum + f.amount, 0);
+ const overdueCount = mockFiados.filter(f => f.status === 'overdue').length;
+
+ const filteredFiados = filter === 'all'
+ ? mockFiados
+ : mockFiados.filter(f => f.status === filter);
+
+ return (
+
+
+
+ {/* Stats Grid */}
+ Dashboard
+Bienvenido a MiChangarrito
+
+ {stats.map((stat) => (
+
+
+
+
+ ))}
+
+
+
+
+ {stat.name}
+{stat.value}
++ {stat.change} +
+
+
+
+ {/* Recent Orders */}
+
+
+
+
+ {/* Low Stock Alert */}
+
+
+
+
+ Ver todos
+
+
+
+
+
+ Ver todos
+
+
+ {recentOrders.map((order) => (
+
+
+
+ ))}
+
+
+ {order.id}
+{order.customer}
+
+
+ ${order.total.toFixed(2)}
+ + {order.status} + +
+
+
+
+
+
+ Ver inventario
+
+
+
+
+
+ Ver inventario
+
+
+ {lowStockProducts.map((product) => (
+
+
+
+ ))}
+
+
+ {product.name}
+
+
+ {product.stock} unidades
+Min: {product.minStock}
+
+
+ );
+}
diff --git a/src/pages/Inventory.tsx b/src/pages/Inventory.tsx
new file mode 100644
index 0000000..49bb256
--- /dev/null
+++ b/src/pages/Inventory.tsx
@@ -0,0 +1,175 @@
+import { useState } from 'react';
+import { Package, TrendingUp, TrendingDown, AlertTriangle, Plus, Minus } from 'lucide-react';
+import clsx from 'clsx';
+
+const mockInventory = [
+ { id: '1', name: 'Coca-Cola 600ml', category: 'bebidas', stock: 24, minStock: 10, maxStock: 50, cost: 12.00, price: 18.00 },
+ { id: '2', name: 'Sabritas Original', category: 'botanas', stock: 12, minStock: 5, maxStock: 30, cost: 10.00, price: 15.00 },
+ { id: '3', name: 'Leche Lala 1L', category: 'lacteos', stock: 3, minStock: 8, maxStock: 20, cost: 22.00, price: 28.00 },
+ { id: '4', name: 'Pan Bimbo Grande', category: 'panaderia', stock: 2, minStock: 5, maxStock: 15, cost: 35.00, price: 45.00 },
+ { id: '5', name: 'Fabuloso 1L', category: 'limpieza', stock: 6, minStock: 5, maxStock: 20, cost: 25.00, price: 32.00 },
+];
+
+const recentMovements = [
+ { product: 'Coca-Cola 600ml', type: 'sale', quantity: -2, date: '10:30 AM' },
+ { product: 'Sabritas', type: 'sale', quantity: -1, date: '10:15 AM' },
+ { product: 'Leche Lala 1L', type: 'purchase', quantity: +12, date: '09:00 AM' },
+ { product: 'Pan Bimbo', type: 'sale', quantity: -3, date: '08:45 AM' },
+];
+
+export function Inventory() {
+ const [showLowStock, setShowLowStock] = useState(false);
+
+ const lowStockItems = mockInventory.filter(item => item.stock <= item.minStock);
+ const totalValue = mockInventory.reduce((sum, item) => sum + (item.stock * item.cost), 0);
+ const totalItems = mockInventory.reduce((sum, item) => sum + item.stock, 0);
+
+ const displayItems = showLowStock
+ ? lowStockItems
+ : mockInventory;
+
+ return (
+
+
+
+ {/* Summary Cards */}
+
+
+
+ Fiado
+Gestiona las cuentas de credito de tus clientes
+
+
+
+
+
+
+
+
+
+ Total Pendiente
+${totalPending.toFixed(2)}
+
+
+
+
+
+
+ Vencidos
+{overdueCount} cuentas
+
+
+
+
+
+
+ Cobrado este mes
+$425.00
+
+ {/* Fiados List */}
+
+
+
+
+ {/* Recent Payments */}
+
+ {(['all', 'pending', 'overdue'] as const).map((status) => (
+
+ ))}
+
+
+ {filteredFiados.map((fiado) => (
+
+
+ ))}
+
+
+
+
+ {fiado.customer}
+{fiado.phone}
+{fiado.description}
+
+
+ + ${fiado.amount.toFixed(2)} +
+
+ {fiado.status === 'overdue' ? (
+
+
+
+
+ Creado: {fiado.createdAt}
+ |
+ Vence: {fiado.dueDate}
+
+
+
+
+
+
+
+ Pagos Recientes
+
+ {recentPayments.map((payment, i) => (
+
+
+
+ ))}
+
+
+ {payment.customer}
+{payment.date}
++${payment.amount.toFixed(2)}
+
+
+ );
+}
diff --git a/src/pages/Invoices.tsx b/src/pages/Invoices.tsx
new file mode 100644
index 0000000..a30e90b
--- /dev/null
+++ b/src/pages/Invoices.tsx
@@ -0,0 +1,668 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+ FileText,
+ Send,
+ XCircle,
+ CheckCircle,
+ Clock,
+ Download,
+ Search,
+ Plus,
+ Settings,
+ AlertCircle,
+} from 'lucide-react';
+import clsx from 'clsx';
+import { invoicesApi } from '../lib/api';
+
+const statusConfig = {
+ draft: { label: 'Borrador', color: 'gray', icon: Clock },
+ pending: { label: 'Pendiente', color: 'yellow', icon: Clock },
+ stamped: { label: 'Timbrada', color: 'green', icon: CheckCircle },
+ sent: { label: 'Enviada', color: 'blue', icon: Send },
+ cancelled: { label: 'Cancelada', color: 'red', icon: XCircle },
+};
+
+export function Invoices() {
+ const [filter, setFilter] = useState('all');
+ const [showConfig, setShowConfig] = useState(false);
+ const [showNewInvoice, setShowNewInvoice] = useState(false);
+ const queryClient = useQueryClient();
+
+ const { data: invoices = [], isLoading } = useQuery({
+ queryKey: ['invoices', filter],
+ queryFn: async () => {
+ const params = filter !== 'all' ? { status: filter } : {};
+ const response = await invoicesApi.getAll(params);
+ return response.data;
+ },
+ });
+
+ const { data: summary } = useQuery({
+ queryKey: ['invoices-summary'],
+ queryFn: async () => {
+ const response = await invoicesApi.getSummary();
+ return response.data;
+ },
+ });
+
+ const { data: taxConfig } = useQuery({
+ queryKey: ['tax-config'],
+ queryFn: async () => {
+ const response = await invoicesApi.getTaxConfig();
+ return response.data;
+ },
+ });
+
+ const stampMutation = useMutation({
+ mutationFn: (id: string) => invoicesApi.stamp(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['invoices'] });
+ },
+ });
+
+ const sendMutation = useMutation({
+ mutationFn: (id: string) => invoicesApi.send(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['invoices'] });
+ },
+ });
+
+ const hasActiveConfig = taxConfig?.status === 'active';
+
+ return (
+
+
+
+ {/* Summary */}
+
+
+ Inventario
+Control de existencias
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total Unidades
+{totalItems}
+
+
+
+
+
+
+ Valor del Inventario
+${totalValue.toFixed(2)}
+ setShowLowStock(!showLowStock)}
+ >
+
+
+
+
+
+ Stock Bajo
+{lowStockItems.length} productos
+
+ {/* Inventory Table */}
+
+
+
+
+ {/* Recent Movements */}
+
+
+
+
+
+ | Producto | +Stock | +Min/Max | +Valor | +
|---|---|---|---|
|
+ {item.name} +{item.category} + |
+
+
+
+ {item.stock}
+
+
+
+
+
+ |
+ + {item.minStock} / {item.maxStock} + | ++ ${(item.stock * item.cost).toFixed(2)} + | +
+
+ Movimientos Recientes
+
+ {recentMovements.map((mov, i) => (
+
+
+
+ ))}
+
+ {mov.type === 'sale' ? (
+
+ 0 ? 'text-green-600' : 'text-red-600'
+ )}>
+ {mov.quantity > 0 ? '+' : ''}{mov.quantity}
+
+
+
+ {mov.product}
+{mov.date}
+
+ setShowConfig(false)}
+ onSave={() => {
+ queryClient.invalidateQueries({ queryKey: ['tax-config'] });
+ setShowConfig(false);
+ }}
+ />
+ )}
+
+ {/* New Invoice Modal */}
+ {showNewInvoice && (
+ setShowNewInvoice(false)}
+ onSuccess={() => {
+ queryClient.invalidateQueries({ queryKey: ['invoices'] });
+ setShowNewInvoice(false);
+ }}
+ />
+ )}
+
+ );
+}
+
+function TaxConfigModal({
+ config,
+ onClose,
+ onSave,
+}: {
+ config: any;
+ onClose: () => void;
+ onSave: () => void;
+}) {
+ const [formData, setFormData] = useState({
+ rfc: config?.rfc || '',
+ razonSocial: config?.razonSocial || '',
+ regimenFiscal: config?.regimenFiscal || '601',
+ codigoPostal: config?.codigoPostal || '',
+ serie: config?.serie || 'A',
+ pacProvider: config?.pacProvider || 'facturapi',
+ pacSandbox: config?.pacSandbox ?? true,
+ });
+
+ const mutation = useMutation({
+ mutationFn: (data: any) => invoicesApi.saveTaxConfig(data),
+ onSuccess: onSave,
+ });
+
+ return (
+
+
+
+ {/* Alert if no config */}
+ {!hasActiveConfig && (
+
+
+ Facturacion
+Emite facturas electronicas (CFDI)
+
+
+
+
+
+
+ )}
+
+ {/* Summary Cards */}
+
+
+ Configuracion fiscal requerida
++ Para emitir facturas, primero configura tus datos fiscales y certificados. +
+
+
+
+ {/* Status Filter */}
+
+
+ Facturas del mes
+{summary?.total_invoices || 0}
+
+
+ Monto facturado
++ ${(summary?.total_amount || 0).toLocaleString('es-MX', { minimumFractionDigits: 2 })} +
+
+
+ Canceladas
+{summary?.total_cancelled || 0}
+
+
+ RFC Emisor
+{taxConfig?.rfc || 'No configurado'}
+
+
+ {Object.entries(statusConfig).map(([status, config]) => (
+
+ ))}
+
+
+ {/* Invoices List */}
+ {isLoading ? (
+
+
+
+ ) : invoices.length === 0 ? (
+ Cargando facturas...
+
+
+ ) : (
+ No hay facturas
+Las facturas emitidas apareceran aqui
+
+ {invoices.map((invoice: any) => {
+ const status = statusConfig[invoice.status as keyof typeof statusConfig] || statusConfig.draft;
+ const StatusIcon = status.icon;
+
+ return (
+
+ )}
+
+ {/* Tax Config Modal */}
+ {showConfig && (
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ + {invoice.serie}-{invoice.folio} +
+ + {status.label} + +{invoice.receptorNombre}
+{invoice.receptorRfc}
+ {invoice.uuid && ( ++ UUID: {invoice.uuid} +
+ )} +
+
+
+
+
+ + ${Number(invoice.total).toLocaleString('es-MX', { minimumFractionDigits: 2 })} +
++ {new Date(invoice.createdAt).toLocaleDateString('es-MX')} +
+
+ {invoice.status === 'draft' && (
+
+ )}
+ {invoice.status === 'stamped' && (
+
+ )}
+ {(invoice.status === 'stamped' || invoice.status === 'sent') && (
+
+ )}
+
+
+
+ );
+}
+
+function NewInvoiceModal({
+ onClose,
+ onSuccess,
+}: {
+ onClose: () => void;
+ onSuccess: () => void;
+}) {
+ const [formData, setFormData] = useState({
+ receptorRfc: '',
+ receptorNombre: '',
+ receptorRegimenFiscal: '601',
+ receptorCodigoPostal: '',
+ receptorUsoCfdi: 'G03',
+ receptorEmail: '',
+ formaPago: '01',
+ metodoPago: 'PUE',
+ items: [{ descripcion: '', cantidad: 1, valorUnitario: 0, claveProdServ: '01010101', claveUnidad: 'H87' }],
+ });
+
+ const mutation = useMutation({
+ mutationFn: (data: any) => invoicesApi.create(data),
+ onSuccess,
+ });
+
+ const addItem = () => {
+ setFormData({
+ ...formData,
+ items: [
+ ...formData.items,
+ { descripcion: '', cantidad: 1, valorUnitario: 0, claveProdServ: '01010101', claveUnidad: 'H87' },
+ ],
+ });
+ };
+
+ const updateItem = (index: number, field: string, value: any) => {
+ const newItems = [...formData.items];
+ newItems[index] = { ...newItems[index], [field]: value };
+ setFormData({ ...formData, items: newItems });
+ };
+
+ const removeItem = (index: number) => {
+ if (formData.items.length > 1) {
+ setFormData({
+ ...formData,
+ items: formData.items.filter((_, i) => i !== index),
+ });
+ }
+ };
+
+ const total = formData.items.reduce(
+ (sum, item) => sum + item.cantidad * item.valorUnitario * 1.16,
+ 0
+ );
+
+ return (
+
+
+
+
+
+
+ Configuracion Fiscal
+
+
+ );
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..cfe8dee
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function Login() {
+ const [phone, setPhone] = useState('');
+ const [pin, setPin] = useState('');
+ const [error, setError] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const { login } = useAuth();
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+ setIsLoading(true);
+
+ try {
+ await login(phone, pin);
+ navigate('/');
+ } catch (err: any) {
+ setError(err.response?.data?.message || 'Error al iniciar sesion');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ Nueva Factura
+
+
+ );
+}
diff --git a/src/pages/Marketplace.tsx b/src/pages/Marketplace.tsx
new file mode 100644
index 0000000..84d6c61
--- /dev/null
+++ b/src/pages/Marketplace.tsx
@@ -0,0 +1,731 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+ Store,
+ Search,
+ Star,
+ Heart,
+ ShoppingCart,
+ Package,
+ Truck,
+ Clock,
+ CheckCircle,
+ XCircle,
+ MapPin,
+ Phone,
+ ChevronRight,
+ Filter,
+} from 'lucide-react';
+import clsx from 'clsx';
+import { marketplaceApi } from '../lib/api';
+
+const categories = [
+ { id: 'bebidas', name: 'Bebidas', icon: '🥤' },
+ { id: 'botanas', name: 'Botanas', icon: '🍿' },
+ { id: 'lacteos', name: 'Lacteos', icon: '🥛' },
+ { id: 'pan', name: 'Pan', icon: '🍞' },
+ { id: 'abarrotes', name: 'Abarrotes', icon: '🛒' },
+ { id: 'limpieza', name: 'Limpieza', icon: '🧹' },
+];
+
+const orderStatusConfig = {
+ pending: { label: 'Pendiente', color: 'yellow', icon: Clock },
+ confirmed: { label: 'Confirmado', color: 'blue', icon: CheckCircle },
+ preparing: { label: 'Preparando', color: 'indigo', icon: Package },
+ shipped: { label: 'En camino', color: 'purple', icon: Truck },
+ delivered: { label: 'Entregado', color: 'green', icon: CheckCircle },
+ cancelled: { label: 'Cancelado', color: 'red', icon: XCircle },
+ rejected: { label: 'Rechazado', color: 'red', icon: XCircle },
+};
+
+export function Marketplace() {
+ const [view, setView] = useState<'suppliers' | 'orders' | 'favorites'>('suppliers');
+ const [selectedCategory, setSelectedCategory] = useState
+
+
+
+
+
+ + MiChangarrito +
++ Iniciar sesion +
++ O{' '} + + registra tu negocio + +
+
+ setSelectedSupplier(null)}
+ onAddToCart={addToCart}
+ cart={cart}
+ />
+ )}
+
+ {/* Cart Modal */}
+ {showCart && (
+ setShowCart(false)}
+ onUpdateQuantity={updateCartQuantity}
+ onRemove={removeFromCart}
+ onOrderSuccess={() => {
+ setCart([]);
+ setShowCart(false);
+ queryClient.invalidateQueries({ queryKey: ['marketplace-orders'] });
+ }}
+ />
+ )}
+
+ );
+}
+
+function SupplierCard({
+ supplier,
+ onClick,
+}: {
+ supplier: any;
+ onClick: () => void;
+}) {
+ return (
+
+
+
+ {/* Tabs */}
+
+
+
+ {cart.length > 0 && (
+
+ )}
+ Marketplace
+Encuentra proveedores para tu negocio
+
+
+
+
+
+
+ {view === 'suppliers' && (
+ <>
+ {/* Search & Filter */}
+
+
+
+ {/* Categories */}
+
+
+
+
+ {categories.map((category) => (
+
+ ))}
+
+
+ {/* Suppliers Grid */}
+ {loadingSuppliers ? (
+
+
+
+ ) : suppliers.length === 0 ? (
+ Buscando proveedores...
+
+
+ ) : (
+ No hay proveedores
+Pronto habra mas proveedores disponibles
+
+ {suppliers.map((supplier: any) => (
+ setSelectedSupplier(supplier)}
+ />
+ ))}
+
+ )}
+
+ )}
+
+ {view === 'orders' && (
+
+ {loadingOrders ? (
+
+ )}
+
+ {view === 'favorites' && (
+
+
+
+ ) : orders.length === 0 ? (
+
+
+ ) : (
+ orders.map((order: any) => (
+ No hay pedidos
+Tus pedidos a proveedores apareceran aqui
+
+ {favorites.length === 0 ? (
+ setSelectedSupplier(supplier)}
+ />
+ ))
+ )}
+
+ )}
+
+ {/* Supplier Detail Modal */}
+ {selectedSupplier && (
+
+
+ ) : (
+ favorites.map((supplier: any) => (
+ Sin favoritos
+Agrega proveedores a tus favoritos
+
+
+ );
+}
+
+function OrderCard({ order }: { order: any }) {
+ const status = orderStatusConfig[order.status as keyof typeof orderStatusConfig] || orderStatusConfig.pending;
+ const StatusIcon = status.icon;
+
+ return (
+
+
+
+ {supplier.logoUrl ? (
+ 
+ ) : (
+
+
+
+
+
+ {supplier.name}
+ {supplier.verified && ( +
+
+
+
+ ·
+ {supplier.totalReviews} resenas
+
+ {supplier.categories?.slice(0, 3).map((cat: string) => (
+
+ {cat}
+
+ ))}
+
+
+ Min: ${Number(supplier.minOrderAmount).toFixed(0)}
+ {Number(supplier.deliveryFee) > 0 ? (
+ Envio: ${Number(supplier.deliveryFee).toFixed(0)}
+ ) : (
+ Envio gratis
+ )}
+
+
+
+ );
+}
+
+function SupplierDetailModal({
+ supplier,
+ onClose,
+ onAddToCart,
+ cart,
+}: {
+ supplier: any;
+ onClose: () => void;
+ onAddToCart: (product: any) => void;
+ cart: { product: any; quantity: number }[];
+}) {
+ const [search, setSearch] = useState('');
+ const queryClient = useQueryClient();
+
+ const { data: products = [], isLoading } = useQuery({
+ queryKey: ['supplier-products', supplier.id, search],
+ queryFn: async () => {
+ const response = await marketplaceApi.getSupplierProducts(supplier.id, {
+ search: search || undefined,
+ });
+ return response.data;
+ },
+ });
+
+ const favoriteMutation = useMutation({
+ mutationFn: () => marketplaceApi.addFavorite(supplier.id),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['supplier-favorites'] });
+ },
+ });
+
+ const getCartQuantity = (productId: string) => {
+ const item = cart.find((i) => i.product.id === productId);
+ return item?.quantity || 0;
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Pedido #{order.orderNumber}
+ + {status.label} + +{order.supplier?.name}
++ {order.items?.length} productos +
+
+
+ + ${Number(order.total).toLocaleString('es-MX', { minimumFractionDigits: 2 })} +
++ {new Date(order.createdAt).toLocaleDateString('es-MX')} +
+
+
+ );
+}
+
+function CartModal({
+ cart,
+ supplier,
+ onClose,
+ onUpdateQuantity,
+ onRemove,
+ onOrderSuccess,
+}: {
+ cart: { product: any; quantity: number }[];
+ supplier: any;
+ onClose: () => void;
+ onUpdateQuantity: (productId: string, quantity: number) => void;
+ onRemove: (productId: string) => void;
+ onOrderSuccess: () => void;
+}) {
+ const [deliveryAddress, setDeliveryAddress] = useState('');
+ const [deliveryPhone, setDeliveryPhone] = useState('');
+ const [notes, setNotes] = useState('');
+
+ const subtotal = cart.reduce(
+ (sum, item) => sum + Number(item.product.unitPrice) * item.quantity,
+ 0
+ );
+
+ const orderMutation = useMutation({
+ mutationFn: (data: any) => marketplaceApi.createOrder(data),
+ onSuccess: onOrderSuccess,
+ });
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ const supplierId = cart[0]?.product?.supplierId;
+ if (!supplierId) return;
+
+ orderMutation.mutate({
+ supplierId,
+ items: cart.map((item) => ({
+ productId: item.product.id,
+ quantity: item.quantity,
+ })),
+ deliveryAddress,
+ deliveryPhone,
+ notes,
+ });
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ {/* Search */}
+
+
+
+
+ {supplier.logoUrl ? (
+
+ ) : (
+
+
+
+
+
+ {supplier.name}
+ +
+
+ {supplier.address && (
+
+
+
+ {supplier.contactPhone && (
+
+
+
+
+
+ {/* Products */}
+
+
+
+ {isLoading ? (
+
+
+
+
+ ) : products.length === 0 ? (
+
+ No hay productos disponibles
+
+ ) : (
+
+ {products.map((product: any) => {
+ const inCart = getCartQuantity(product.id);
+ return (
+
+ )}
+
+
+ );
+ })}
+
+ {product.imageUrl ? (
+ 
+ ) : (
+
+
+
+ {product.name}
++ Min: {product.minQuantity} {product.unitType} +
+
+
+ ${Number(product.unitPrice).toFixed(2)}
+
+ {inCart > 0 ? (
+
+ {inCart} en carrito
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+