+
+
{getPageTitle('Bienvenido')}
+
- const imageBlock = (image) => (
-
-
+
+
+
+
+
+ Sistema POS Profesional
+
+
+
+ Control total de tu negocio con El dolarcito
+
+
+
+ Gestiona ventas, inventario, compras y caja en una sola plataforma rápida, segura y responsive.
+
+
+
+
+
+ Ver demostración
+
+
+
+
+
+
+ {/* Decorative elements */}
+
+
+
+
+
+
);
-
- const videoBlock = (video) => {
- if (video?.video_files?.length > 0) {
- return (
-
-
-
-
)
- }
- };
-
- return (
-
-
-
{getPageTitle('Starter Page')}
-
-
-
-
- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
© 2026 {title}. All rights reserved
-
- Privacy Policy
-
-
-
-
- );
}
Starter.getLayout = function getLayout(page: ReactElement) {
- return
{page};
+ return
{page};
};
-
diff --git a/frontend/src/pages/pos.tsx b/frontend/src/pages/pos.tsx
new file mode 100644
index 0000000..eb3cd51
--- /dev/null
+++ b/frontend/src/pages/pos.tsx
@@ -0,0 +1,247 @@
+import * as icon from '@mdi/js';
+import Head from 'next/head';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import type { ReactElement } from 'react';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import BaseIcon from "../components/BaseIcon";
+import CardBox from '../components/CardBox';
+import BaseButton from '../components/BaseButton';
+import FormField from '../components/FormField';
+import { getPageTitle } from '../config';
+import { useAppSelector } from '../stores/hooks';
+import { toast } from 'react-toastify';
+
+const POSPage = () => {
+ const [products, setProducts] = useState([]);
+ const [search, setSearch] = useState('');
+ const [cart, setCart] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [submitting, setSubmitting] = useState(false);
+ const { currentUser } = useAppSelector((state) => state.auth);
+
+ useEffect(() => {
+ fetchProducts();
+ }, []);
+
+ const fetchProducts = async () => {
+ try {
+ setLoading(true);
+ const response = await axios.get('/products');
+ setProducts(response.data.rows || []);
+ } catch (error) {
+ console.error('Error fetching products:', error);
+ toast.error('Error al cargar productos');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const addToCart = (product) => {
+ const existing = cart.find(item => item.id === product.id);
+ if (existing) {
+ setCart(cart.map(item =>
+ item.id === product.id
+ ? { ...item, quantity: item.quantity + 1, subtotal: (item.quantity + 1) * item.sale_price }
+ : item
+ ));
+ } else {
+ setCart([...cart, {
+ ...product,
+ quantity: 1,
+ unit_price: product.sale_price,
+ subtotal: product.sale_price,
+ productId: product.id
+ }]);
+ }
+ };
+
+ const removeFromCart = (productId) => {
+ setCart(cart.filter(item => item.id !== productId));
+ };
+
+ const updateQuantity = (productId, delta) => {
+ setCart(cart.map(item => {
+ if (item.id === productId) {
+ const newQty = Math.max(1, item.quantity + delta);
+ return { ...item, quantity: newQty, subtotal: newQty * item.sale_price };
+ }
+ return item;
+ }));
+ };
+
+ const total = cart.reduce((acc, item) => acc + Number(item.subtotal), 0);
+
+ const handleCheckout = async () => {
+ if (cart.length === 0) return;
+ try {
+ setSubmitting(true);
+ const saleData = {
+ document_number: `POS-${Date.now()}`,
+ sale_date: new Date().toISOString(),
+ total: total,
+ status: 'PAGADA',
+ customer_name: 'Cliente General',
+ sale_items: cart.map(item => ({
+ productId: item.productId,
+ product_name: item.name,
+ quantity: item.quantity,
+ unit_price: item.unit_price,
+ subtotal: item.subtotal
+ }))
+ };
+
+ await axios.post('/sales', { data: saleData });
+ toast.success('Venta completada con éxito');
+ setCart([]);
+ } catch (error) {
+ console.error('Error in checkout:', error);
+ toast.error('Error al procesar la venta');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const filteredProducts = products.filter(p =>
+ p.name.toLowerCase().includes(search.toLowerCase()) ||
+ (p.sku && p.sku.toLowerCase().includes(search.toLowerCase()))
+ );
+
+ return (
+ <>
+
+
{getPageTitle('Punto de Venta')}
+
+
+
+
+
+
+
+ {/* Product Selection */}
+
+
+
+
+ setSearch(e.target.value)}
+ />
+
+
+
+
+
+
+ {loading ? (
+
Cargando productos...
+ ) : filteredProducts.length > 0 ? (
+ filteredProducts.map((p) => (
+
+ ))
+ ) : (
+
No se encontraron productos
+ )}
+
+
+
+ {/* Cart Summary */}
+
+
+
+
+
+ Carrito
+
+
+ {cart.length} items
+
+
+
+
+ {cart.length > 0 ? (
+ cart.map((item) => (
+
+
+ {item.name}
+
+
+
+
+
+ {item.quantity}
+
+
+
${Number(item.subtotal).toFixed(2)}
+
+
+ ))
+ ) : (
+
+
+
El carrito está vacío
+
+ )}
+
+
+ Subtotal:
+ ${total.toFixed(2)}
+
+
+ Total:
+ ${total.toFixed(2)}
+
+
+
+
+
+
+ );
+};
+
+POSPage.getLayout = function getLayout(page: ReactElement) {
+ return
{page};
+};
+
+export default POSPage;