+ {/* Cart items */}
+
+ {items.map((item) => (
+ updateQuantity(item.product.id, qty)}
+ onRemove={() => removeItem(item.product.id)}
+ />
+ ))}
+
+
+ {/* Cart summary */}
+
+
+ Total ({itemCount} productos)
+ ${total.toFixed(2)}
+
+
+
+
+
+
Cantidad recibida
+
+ {/* Input */}
+
onAmountChange(Number(e.target.value))}
+ placeholder="0.00"
+ autoFocus
+ />
+
+ {/* Quick amounts */}
+
+ {QUICK_AMOUNTS.map((amount) => (
+
+ ))}
+
+
+ {/* Exact amount button */}
+
+
+ {/* Change preview */}
+ {amountReceived >= total && (
+
+
Cambio
+
+ ${(amountReceived - total).toFixed(2)}
+
+
+ )}
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ Metodo de pago
+ {paymentMethod.name}
+
+
+ Total
+ ${total.toFixed(2)}
+
+ {paymentMethod.type === 'cash' && (
+ <>
+
+ Recibido
+ ${amountReceived.toFixed(2)}
+
+
+ Cambio
+ ${change.toFixed(2)}
+
+
+ )}
+
+
+
+
+
+
+
+
setIsMenuOpen(false)}
+ />
+
+
+ )}
+
+ );
+}
+
+interface NavLinkProps {
+ to: string;
+ icon: React.ReactNode;
+ label: string;
+ onClick: () => void;
+}
+
+function NavLink({ to, icon, label, onClick }: NavLinkProps) {
+ return (
+
+ {icon}
+ {label}
+
+ );
+}
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/components/ProductCard.tsx b/projects/erp-suite/apps/products/pos-micro/frontend/src/components/ProductCard.tsx
new file mode 100644
index 0000000..08dbac4
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/components/ProductCard.tsx
@@ -0,0 +1,77 @@
+import { Star } from 'lucide-react';
+import clsx from 'clsx';
+import type { Product } from '@/types';
+
+interface ProductCardProps {
+ product: Product;
+ onSelect: (product: Product) => void;
+ onToggleFavorite?: (productId: string) => void;
+}
+
+export function ProductCard({ product, onSelect, onToggleFavorite }: ProductCardProps) {
+ const isLowStock = product.trackStock && product.currentStock <= product.minStock;
+ const isOutOfStock = product.trackStock && product.currentStock <= 0;
+
+ return (
+
!isOutOfStock && onSelect(product)}
+ >
+ {/* Favorite button */}
+ {onToggleFavorite && (
+
+ )}
+
+ {/* Product image or placeholder */}
+ {product.imageUrl ? (
+
+ ) : (
+
+
+ {product.name.charAt(0).toUpperCase()}
+
+
+ )}
+
+ {/* Product info */}
+
+ {product.name}
+
+
+ ${product.price.toFixed(2)}
+
+
+ {/* Stock indicator */}
+ {product.trackStock && (
+
+ {isOutOfStock ? 'Agotado' : `${product.currentStock} disponibles`}
+
+ )}
+
+ );
+}
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/components/SuccessModal.tsx b/projects/erp-suite/apps/products/pos-micro/frontend/src/components/SuccessModal.tsx
new file mode 100644
index 0000000..710dc94
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/components/SuccessModal.tsx
@@ -0,0 +1,114 @@
+import { CheckCircle, Printer, Share2, X } from 'lucide-react';
+import type { Sale } from '@/types';
+
+interface SuccessModalProps {
+ isOpen: boolean;
+ sale: Sale | null;
+ onClose: () => void;
+}
+
+export function SuccessModal({ isOpen, sale, onClose }: SuccessModalProps) {
+ if (!isOpen || !sale) return null;
+
+ const handlePrint = () => {
+ // In a real app, this would trigger receipt printing
+ window.print();
+ };
+
+ const handleShare = async () => {
+ const text = `Venta #${sale.ticketNumber}\nTotal: $${sale.total.toFixed(2)}\nGracias por su compra!`;
+
+ if (navigator.share) {
+ try {
+ await navigator.share({ text });
+ } catch {
+ // User cancelled or error
+ }
+ } else {
+ // Fallback: copy to clipboard
+ await navigator.clipboard.writeText(text);
+ }
+ };
+
+ return (
+
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ {/* Close button */}
+
+
+ {/* Success icon */}
+
+
+ {/* Content */}
+
+
Venta completada!
+
Ticket #{sale.ticketNumber}
+
+
+
+ Subtotal
+ ${sale.subtotal.toFixed(2)}
+
+ {sale.discount > 0 && (
+
+ Descuento
+ -${sale.discount.toFixed(2)}
+
+ )}
+
+ Total
+ ${sale.total.toFixed(2)}
+
+ {sale.change && sale.change > 0 && (
+
+ Cambio
+ ${sale.change.toFixed(2)}
+
+ )}
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/usePayments.ts b/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/usePayments.ts
new file mode 100644
index 0000000..d829855
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/usePayments.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import api from '@/services/api';
+import type { PaymentMethod } from '@/types';
+
+export function usePaymentMethods() {
+ return useQuery({
+ queryKey: ['payment-methods'],
+ queryFn: async () => {
+ const { data } = await api.get
('/payments/methods');
+ return data;
+ },
+ staleTime: 1000 * 60 * 30, // 30 minutes - payment methods don't change often
+ });
+}
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/useProducts.ts b/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/useProducts.ts
new file mode 100644
index 0000000..e80201f
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/useProducts.ts
@@ -0,0 +1,67 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import api from '@/services/api';
+import type { Product, Category } from '@/types';
+
+// Products
+export function useProducts(categoryId?: string) {
+ return useQuery({
+ queryKey: ['products', categoryId],
+ queryFn: async () => {
+ const params = new URLSearchParams();
+ if (categoryId) params.append('categoryId', categoryId);
+ params.append('isActive', 'true');
+
+ const { data } = await api.get(`/products?${params}`);
+ return data;
+ },
+ });
+}
+
+export function useFavoriteProducts() {
+ return useQuery({
+ queryKey: ['products', 'favorites'],
+ queryFn: async () => {
+ const { data } = await api.get('/products/favorites');
+ return data;
+ },
+ });
+}
+
+export function useSearchProduct() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (barcode: string) => {
+ const { data } = await api.get(`/products/barcode/${barcode}`);
+ return data;
+ },
+ onSuccess: (product) => {
+ queryClient.setQueryData(['product', product.id], product);
+ },
+ });
+}
+
+export function useToggleFavorite() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (productId: string) => {
+ const { data } = await api.patch(`/products/${productId}/favorite`);
+ return data;
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['products'] });
+ },
+ });
+}
+
+// Categories
+export function useCategories() {
+ return useQuery({
+ queryKey: ['categories'],
+ queryFn: async () => {
+ const { data } = await api.get('/categories');
+ return data;
+ },
+ });
+}
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/useSales.ts b/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/useSales.ts
new file mode 100644
index 0000000..0f830b3
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/hooks/useSales.ts
@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import api from '@/services/api';
+import { useCartStore } from '@/store/cart';
+import type { Sale, DailySummary } from '@/types';
+
+interface CreateSaleDto {
+ items: {
+ productId: string;
+ quantity: number;
+ unitPrice: number;
+ discount: number;
+ }[];
+ paymentMethodId: string;
+ amountReceived?: number;
+ notes?: string;
+}
+
+export function useCreateSale() {
+ const queryClient = useQueryClient();
+ const clearCart = useCartStore((state) => state.clear);
+
+ return useMutation({
+ mutationFn: async (sale: CreateSaleDto) => {
+ const { data } = await api.post('/sales', sale);
+ return data;
+ },
+ onSuccess: () => {
+ clearCart();
+ queryClient.invalidateQueries({ queryKey: ['sales'] });
+ queryClient.invalidateQueries({ queryKey: ['daily-summary'] });
+ queryClient.invalidateQueries({ queryKey: ['products'] }); // Stock updated
+ },
+ });
+}
+
+export function useTodaySales() {
+ return useQuery({
+ queryKey: ['sales', 'today'],
+ queryFn: async () => {
+ const today = new Date().toISOString().split('T')[0];
+ const { data } = await api.get(`/sales?date=${today}`);
+ return data;
+ },
+ });
+}
+
+export function useDailySummary(date?: string) {
+ const queryDate = date || new Date().toISOString().split('T')[0];
+
+ return useQuery({
+ queryKey: ['daily-summary', queryDate],
+ queryFn: async () => {
+ const { data } = await api.get(`/sales/summary/${queryDate}`);
+ return data;
+ },
+ });
+}
+
+export function useCancelSale() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (saleId: string) => {
+ const { data } = await api.patch(`/sales/${saleId}/cancel`);
+ return data;
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['sales'] });
+ queryClient.invalidateQueries({ queryKey: ['daily-summary'] });
+ queryClient.invalidateQueries({ queryKey: ['products'] }); // Stock restored
+ },
+ });
+}
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/main.tsx b/projects/erp-suite/apps/products/pos-micro/frontend/src/main.tsx
new file mode 100644
index 0000000..321d557
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/main.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/index.css';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 1000 * 60 * 5, // 5 minutes
+ retry: 1,
+ },
+ },
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+
+);
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/pages/LoginPage.tsx b/projects/erp-suite/apps/products/pos-micro/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..86406fb
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ShoppingBag, Eye, EyeOff } from 'lucide-react';
+import api from '@/services/api';
+import { useAuthStore } from '@/store/auth';
+import type { AuthResponse } from '@/types';
+
+export function LoginPage() {
+ const [businessName, setBusinessName] = useState('');
+ const [pin, setPin] = useState('');
+ const [showPin, setShowPin] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState('');
+ const [isRegister, setIsRegister] = useState(false);
+
+ const login = useAuthStore((state) => state.login);
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+ setIsLoading(true);
+
+ try {
+ const endpoint = isRegister ? '/auth/register' : '/auth/login';
+ const payload = isRegister
+ ? { businessName, pin }
+ : { businessName, pin };
+
+ const { data } = await api.post(endpoint, payload);
+
+ login(data.accessToken, data.refreshToken, data.user, data.tenant);
+ navigate('/');
+ } catch (err: unknown) {
+ const errorMessage =
+ err instanceof Error
+ ? err.message
+ : (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+ (isRegister ? 'Error al registrar negocio' : 'PIN o negocio incorrecto');
+ setError(errorMessage);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+ {/* Logo */}
+
+
+
+
+
POS Micro
+
Punto de venta simple
+
+
+ {/* Login Card */}
+
+
+ {isRegister ? 'Registrar negocio' : 'Iniciar sesion'}
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+ $100 MXN/mes - Cancela cuando quieras
+
+
+
+
+
+ {/* Products Panel */}
+
+ {/* Search bar */}
+
+
+ {/* Category tabs */}
+
+
+ {/* Products grid */}
+
+ {productsLoading ? (
+
+ ) : filteredProducts?.length === 0 ? (
+
+
+
No se encontraron productos
+
+ ) : (
+
+ {filteredProducts?.map((product) => (
+
toggleFavorite.mutate(product.id)}
+ />
+ ))}
+
+ )}
+
+
+
+ {/* Cart Panel - Hidden on mobile, shown on larger screens */}
+
+ setIsCheckoutOpen(true)} />
+
+
+
+ {/* Mobile Cart Button */}
+
setIsCheckoutOpen(true)} />
+
+ {/* Checkout Modal */}
+ setIsCheckoutOpen(false)}
+ onSuccess={handleCheckoutSuccess}
+ />
+
+ {/* Success Modal */}
+ setCompletedSale(null)}
+ />
+
+
+
+ );
+}
+
+// Import for the empty state
+import { Package } from 'lucide-react';
diff --git a/projects/erp-suite/apps/products/pos-micro/frontend/src/pages/ReportsPage.tsx b/projects/erp-suite/apps/products/pos-micro/frontend/src/pages/ReportsPage.tsx
new file mode 100644
index 0000000..9ae09c3
--- /dev/null
+++ b/projects/erp-suite/apps/products/pos-micro/frontend/src/pages/ReportsPage.tsx
@@ -0,0 +1,157 @@
+import { ArrowLeft, TrendingUp, ShoppingCart, XCircle, Banknote, CreditCard, Smartphone } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { useDailySummary, useTodaySales } from '@/hooks/useSales';
+
+export function ReportsPage() {
+ const { data: summary, isLoading: summaryLoading } = useDailySummary();
+ const { data: sales, isLoading: salesLoading } = useTodaySales();
+
+ const isLoading = summaryLoading || salesLoading;
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ Reporte del dia
+
+
+ {isLoading ? (
+
+ ) : (
+
+ {/* Summary Cards */}
+
+ }
+ label="Ventas totales"
+ value={`$${summary?.totalSales.toFixed(2) || '0.00'}`}
+ bgColor="bg-green-50"
+ />
+ }
+ label="Transacciones"
+ value={summary?.salesCount.toString() || '0'}
+ bgColor="bg-blue-50"
+ />
+ }
+ label="Canceladas"
+ value={summary?.cancelledCount.toString() || '0'}
+ bgColor="bg-red-50"
+ />
+ }
+ label="Promedio"
+ value={`$${summary?.salesCount ? (summary.totalSales / summary.salesCount).toFixed(2) : '0.00'}`}
+ bgColor="bg-purple-50"
+ />
+
+
+ {/* Payment breakdown */}
+
+
Por forma de pago
+
+
}
+ label="Efectivo"
+ amount={summary?.cashSales || 0}
+ />
+
}
+ label="Tarjeta"
+ amount={summary?.cardSales || 0}
+ />
+
}
+ label="Transferencia"
+ amount={summary?.transferSales || 0}
+ />
+
+
+
+ {/* Recent sales */}
+
+
+
Ventas de hoy
+
+
+ {sales?.length === 0 ? (
+
+ No hay ventas registradas hoy
+
+ ) : (
+ sales?.slice(0, 10).map((sale) => (
+
+
+
#{sale.ticketNumber}
+
+ {new Date(sale.createdAt).toLocaleTimeString('es-MX', {
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+ {' - '}
+ {sale.items.length} productos
+
+
+
+
+ ${sale.total.toFixed(2)}
+
+ {sale.status === 'cancelled' && (
+
Cancelada
+ )}
+
+
+ ))
+ )}
+
+
+
+ )}
+
+
+ {icon}
+
+
{label}
+
{value}
+
+
+
${amount.toFixed(2)}
+