SoftDolarcito_v1
This commit is contained in:
Flatlogic Bot
parent
0dab2eafde
commit
3e28e0d52e
@ -1,4 +1,3 @@
|
||||
|
||||
const db = require('../models');
|
||||
const FileDBApi = require('./file');
|
||||
const crypto = require('crypto');
|
||||
@ -68,11 +67,16 @@ module.exports = class SalesDBApi {
|
||||
{ transaction },
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (data.sale_items && data.sale_items.length > 0) {
|
||||
for (const item of data.sale_items) {
|
||||
await db.sale_items.create({
|
||||
...item,
|
||||
saleId: sales.id,
|
||||
createdById: currentUser.id,
|
||||
updatedById: currentUser.id,
|
||||
}, { transaction });
|
||||
}
|
||||
}
|
||||
|
||||
return sales;
|
||||
}
|
||||
@ -573,5 +577,4 @@ module.exports = class SalesDBApi {
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
@ -8,8 +8,8 @@ export const localStorageStyleKey = 'style'
|
||||
|
||||
export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'
|
||||
|
||||
export const appTitle = 'created by Flatlogic generator!'
|
||||
export const appTitle = 'El dolarcito POS'
|
||||
|
||||
export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`
|
||||
|
||||
export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
|
||||
export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
|
||||
@ -7,6 +7,12 @@ const menuAside: MenuAsideItem[] = [
|
||||
icon: icon.mdiViewDashboardOutline,
|
||||
label: 'Dashboard',
|
||||
},
|
||||
{
|
||||
href: '/pos',
|
||||
icon: icon.mdiCashRegister,
|
||||
label: 'Punto de Venta',
|
||||
permissions: 'CREATE_SALES'
|
||||
},
|
||||
|
||||
{
|
||||
href: '/users/users-list',
|
||||
@ -128,4 +134,4 @@ const menuAside: MenuAsideItem[] = [
|
||||
},
|
||||
]
|
||||
|
||||
export default menuAside
|
||||
export default menuAside
|
||||
@ -9,6 +9,8 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
|
||||
import BaseIcon from "../components/BaseIcon";
|
||||
import { getPageTitle } from '../config'
|
||||
import Link from "next/link";
|
||||
import CardBox from '../components/CardBox';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
|
||||
import { hasPermission } from "../helpers/userPermissions";
|
||||
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
||||
@ -16,52 +18,36 @@ import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
||||
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
||||
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
|
||||
const Dashboard = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
||||
const corners = useAppSelector((state) => state.style.corners);
|
||||
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
||||
|
||||
const loadingMessage = 'Loading...';
|
||||
const loadingMessage = 'Cargando...';
|
||||
|
||||
|
||||
const [users, setUsers] = React.useState(loadingMessage);
|
||||
const [roles, setRoles] = React.useState(loadingMessage);
|
||||
const [permissions, setPermissions] = React.useState(loadingMessage);
|
||||
const [products, setProducts] = React.useState(loadingMessage);
|
||||
const [categories, setCategories] = React.useState(loadingMessage);
|
||||
const [suppliers, setSuppliers] = React.useState(loadingMessage);
|
||||
const [purchases, setPurchases] = React.useState(loadingMessage);
|
||||
const [purchase_items, setPurchase_items] = React.useState(loadingMessage);
|
||||
const [sales, setSales] = React.useState(loadingMessage);
|
||||
const [sale_items, setSale_items] = React.useState(loadingMessage);
|
||||
const [cash_movements, setCash_movements] = React.useState(loadingMessage);
|
||||
const [inventory_movements, setInventory_movements] = React.useState(loadingMessage);
|
||||
const [settings, setSettings] = React.useState(loadingMessage);
|
||||
const [lowStockProducts, setLowStockProducts] = React.useState([]);
|
||||
const [loadingLowStock, setLoadingLowStock] = React.useState(true);
|
||||
|
||||
|
||||
const [widgetsRole, setWidgetsRole] = React.useState({
|
||||
role: { value: '', label: '' },
|
||||
});
|
||||
const { currentUser } = useAppSelector((state) => state.auth);
|
||||
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
||||
|
||||
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
||||
|
||||
|
||||
async function loadData() {
|
||||
const entities = ['users','roles','permissions','products','categories','suppliers','purchases','purchase_items','sales','sale_items','cash_movements','inventory_movements','settings',];
|
||||
const fns = [setUsers,setRoles,setPermissions,setProducts,setCategories,setSuppliers,setPurchases,setPurchase_items,setSales,setSale_items,setCash_movements,setInventory_movements,setSettings,];
|
||||
const entities = ['users','products','sales'];
|
||||
const fns = [setUsers,setProducts,setSales];
|
||||
|
||||
const requests = entities.map((entity, index) => {
|
||||
|
||||
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
|
||||
return axios.get(`/${entity.toLowerCase()}/count`);
|
||||
} else {
|
||||
fns[index](null);
|
||||
return Promise.resolve({data: {count: null}});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Promise.allSettled(requests).then((results) => {
|
||||
@ -74,49 +60,155 @@ const Dashboard = () => {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function loadLowStock() {
|
||||
if (!hasPermission(currentUser, 'READ_PRODUCTS')) return;
|
||||
try {
|
||||
setLoadingLowStock(true);
|
||||
const response = await axios.get('/products');
|
||||
const productsData = response.data.rows || [];
|
||||
const lowStock = productsData.filter(p => p.stock <= (p.min_stock || 0));
|
||||
setLowStockProducts(lowStock);
|
||||
} catch (error) {
|
||||
console.error('Error loading low stock products:', error);
|
||||
} finally {
|
||||
setLoadingLowStock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function getWidgets(roleId) {
|
||||
await dispatch(fetchWidgets(roleId));
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!currentUser) return;
|
||||
loadData().then();
|
||||
setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
|
||||
loadLowStock().then();
|
||||
}, [currentUser]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!currentUser || !widgetsRole?.role?.value) return;
|
||||
getWidgets(widgetsRole?.role?.value || '').then();
|
||||
}, [widgetsRole?.role?.value]);
|
||||
if (!currentUser || !currentUser?.app_role?.id) return;
|
||||
getWidgets(currentUser.app_role.id).then();
|
||||
}, [currentUser]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
{getPageTitle('Overview')}
|
||||
</title>
|
||||
<title>{getPageTitle('Panel de Control')}</title>
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
icon={icon.mdiChartTimelineVariant}
|
||||
title='Overview'
|
||||
title='Resumen de Negocio'
|
||||
main>
|
||||
{''}
|
||||
<BaseButton
|
||||
href="/pos"
|
||||
label="Nueva Venta (POS)"
|
||||
icon={icon.mdiCashRegister}
|
||||
color="success"
|
||||
roundedFull
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
|
||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
||||
{hasPermission(currentUser, 'READ_SALES') && (
|
||||
<CardBox className="border-l-4 border-emerald-500">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-gray-500 text-sm font-medium uppercase tracking-wider">Ventas Totales</p>
|
||||
<h3 className="text-3xl font-bold">{sales}</h3>
|
||||
</div>
|
||||
<BaseIcon path={icon.mdiCart} size={48} className="text-emerald-500 opacity-20" />
|
||||
</div>
|
||||
</CardBox>
|
||||
)}
|
||||
{hasPermission(currentUser, 'READ_PRODUCTS') && (
|
||||
<CardBox className="border-l-4 border-blue-500">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-gray-500 text-sm font-medium uppercase tracking-wider">Productos</p>
|
||||
<h3 className="text-3xl font-bold">{products}</h3>
|
||||
</div>
|
||||
<BaseIcon path={icon.mdiCube} size={48} className="text-blue-500 opacity-20" />
|
||||
</div>
|
||||
</CardBox>
|
||||
)}
|
||||
{hasPermission(currentUser, 'READ_USERS') && (
|
||||
<CardBox className="border-l-4 border-purple-500">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-gray-500 text-sm font-medium uppercase tracking-wider">Usuarios</p>
|
||||
<h3 className="text-3xl font-bold">{users}</h3>
|
||||
</div>
|
||||
<BaseIcon path={icon.mdiAccountGroup} size={48} className="text-purple-500 opacity-20" />
|
||||
</div>
|
||||
</CardBox>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<CardBox className="h-full">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-bold flex items-center">
|
||||
<BaseIcon path={icon.mdiAlertCircle} className="text-red-500 mr-2" />
|
||||
Alertas de Stock Bajo
|
||||
</h3>
|
||||
<Link href="/products/products-list" className="text-sm text-blue-500 hover:underline">Ver todos</Link>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
{loadingLowStock ? (
|
||||
<p className="text-gray-500 text-center py-4">Cargando alertas...</p>
|
||||
) : lowStockProducts.length > 0 ? (
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-xs uppercase bg-gray-50 dark:bg-slate-800 text-gray-500">
|
||||
<tr>
|
||||
<th className="px-4 py-2">Producto</th>
|
||||
<th className="px-4 py-2">Stock Actual</th>
|
||||
<th className="px-4 py-2 text-red-500">Mínimo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{lowStockProducts.slice(0, 5).map((p) => (
|
||||
<tr key={p.id} className="border-b dark:border-slate-700">
|
||||
<td className="px-4 py-2 font-medium">{p.name}</td>
|
||||
<td className="px-4 py-2 font-bold text-red-500">{p.stock}</td>
|
||||
<td className="px-4 py-2">{p.min_stock}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p className="text-gray-500 text-center py-4 italic">No hay productos con stock bajo 🎉</p>
|
||||
)}
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<CardBox className="h-full bg-emerald-600 text-white">
|
||||
<div className="flex flex-col justify-between h-full space-y-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-2">Acceso Rápido al POS</h3>
|
||||
<p className="opacity-90">Comienza a vender ahora mismo con la interfaz optimizada de El dolarcito.</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<BaseButton
|
||||
href="/pos"
|
||||
label="Ir a la Caja"
|
||||
icon={icon.mdiCashRegister}
|
||||
color="white"
|
||||
className="text-emerald-600 font-bold px-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
</div>
|
||||
|
||||
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
||||
currentUser={currentUser}
|
||||
isFetchingQuery={isFetchingQuery}
|
||||
setWidgetsRole={setWidgetsRole}
|
||||
widgetsRole={widgetsRole}
|
||||
setWidgetsRole={() => { return; }}
|
||||
widgetsRole={{ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } }}
|
||||
/>}
|
||||
{!!rolesWidgets.length &&
|
||||
hasPermission(currentUser, 'CREATE_ROLES') && (
|
||||
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
||||
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
||||
{(isFetchingQuery || loading) && (
|
||||
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
||||
@ -127,7 +219,7 @@ const Dashboard = () => {
|
||||
size={48}
|
||||
path={icon.mdiLoading}
|
||||
/>{' '}
|
||||
Loading widgets...
|
||||
Cargando widgets...
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -137,383 +229,11 @@ const Dashboard = () => {
|
||||
key={widget.id}
|
||||
userId={currentUser?.id}
|
||||
widget={widget}
|
||||
roleId={widgetsRole?.role?.value || ''}
|
||||
roleId={currentUser?.app_role?.id || ''}
|
||||
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!!rolesWidgets.length && <hr className='my-6 ' />}
|
||||
|
||||
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
||||
|
||||
|
||||
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Users
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{users}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={icon.mdiAccountGroup || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Roles
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{roles}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Permissions
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{permissions}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={icon.mdiShieldAccountOutline || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PRODUCTS') && <Link href={'/products/products-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Products
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{products}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCube' in icon ? icon['mdiCube' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_CATEGORIES') && <Link href={'/categories/categories-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Categories
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{categories}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiShape' in icon ? icon['mdiShape' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_SUPPLIERS') && <Link href={'/suppliers/suppliers-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Suppliers
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{suppliers}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiTruck' in icon ? icon['mdiTruck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PURCHASES') && <Link href={'/purchases/purchases-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Purchases
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{purchases}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCartArrowDown' in icon ? icon['mdiCartArrowDown' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PURCHASE_ITEMS') && <Link href={'/purchase_items/purchase_items-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Purchase items
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{purchase_items}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiFileDocument' in icon ? icon['mdiFileDocument' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_SALES') && <Link href={'/sales/sales-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Sales
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{sales}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCart' in icon ? icon['mdiCart' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_SALE_ITEMS') && <Link href={'/sale_items/sale_items-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Sale items
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{sale_items}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiReceipt' in icon ? icon['mdiReceipt' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_CASH_MOVEMENTS') && <Link href={'/cash_movements/cash_movements-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Cash movements
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{cash_movements}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCash' in icon ? icon['mdiCash' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_INVENTORY_MOVEMENTS') && <Link href={'/inventory_movements/inventory_movements-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Inventory movements
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{inventory_movements}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiSwapHorizontal' in icon ? icon['mdiSwapHorizontal' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_SETTINGS') && <Link href={'/settings/settings-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Settings
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{settings}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCog' in icon ? icon['mdiCog' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
|
||||
</div>
|
||||
</SectionMain>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,166 +1,89 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
import { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
|
||||
import { mdiCashRegister, mdiChevronRight } from '@mdi/js';
|
||||
import BaseIcon from '../components/BaseIcon';
|
||||
|
||||
export default function Starter() {
|
||||
const [illustrationImage, setIllustrationImage] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('image');
|
||||
const [contentPosition, setContentPosition] = useState('right');
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
|
||||
const title = 'El dolarcito'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
return (
|
||||
<div className="bg-slate-50 dark:bg-slate-900 min-h-screen font-sans">
|
||||
<Head>
|
||||
<title>{getPageTitle('Bienvenido')}</title>
|
||||
</Head>
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div
|
||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
||||
style={{
|
||||
backgroundImage: `${
|
||||
image
|
||||
? `url(${image?.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={image?.photographer_url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Photo by {image?.photographer} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div className="container mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between">
|
||||
<div className="md:w-1/2 space-y-8">
|
||||
<div className="inline-flex items-center space-x-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 px-4 py-2 rounded-full text-sm font-medium">
|
||||
<BaseIcon path={mdiCashRegister} size={18} />
|
||||
<span>Sistema POS Profesional</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 dark:text-white leading-tight">
|
||||
Control total de tu negocio con <span className="text-emerald-600">El dolarcito</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-slate-600 dark:text-slate-400 max-w-lg">
|
||||
Gestiona ventas, inventario, compras y caja en una sola plataforma rápida, segura y responsive.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<BaseButton
|
||||
href='/login'
|
||||
label='Comenzar ahora'
|
||||
color='success'
|
||||
className='px-8 py-4 text-lg rounded-xl shadow-lg shadow-emerald-200 dark:shadow-none'
|
||||
/>
|
||||
<Link href="/login" className="flex items-center text-slate-600 dark:text-slate-300 font-semibold hover:text-emerald-600 transition-colors">
|
||||
Ver demostración <BaseIcon path={mdiChevronRight} size={24} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2 mt-12 md:mt-0 relative">
|
||||
<div className="w-full h-[400px] md:h-[500px] bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-3xl shadow-2xl relative overflow-hidden transform md:rotate-3">
|
||||
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80')] mix-blend-overlay opacity-40 bg-cover bg-center"></div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<BaseIcon path={mdiCashRegister} size={120} className="text-white drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -bottom-6 -left-6 w-32 h-32 bg-yellow-400 rounded-full blur-3xl opacity-30 animate-pulse"></div>
|
||||
<div className="absolute -top-6 -right-6 w-32 h-32 bg-emerald-400 rounded-full blur-3xl opacity-30 animate-pulse delay-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
|
||||
<footer className="bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 py-12">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="flex items-center space-x-2 mb-4 md:mb-0">
|
||||
<BaseIcon path={mdiCashRegister} size={32} className="text-emerald-600" />
|
||||
<span className="text-2xl font-bold text-slate-900 dark:text-white">{title}</span>
|
||||
</div>
|
||||
<div className="flex space-x-8 text-slate-500 dark:text-slate-400 text-sm">
|
||||
<Link href="/privacy-policy" className="hover:text-emerald-600">Política de Privacidad</Link>
|
||||
<Link href="/terms" className="hover:text-emerald-600">Términos de Servicio</Link>
|
||||
<Link href="/login" className="hover:text-emerald-600">Contacto</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-slate-100 dark:border-slate-700 text-center text-slate-400 text-sm">
|
||||
© {new Date().getFullYear()} {title} POS. Todos los derechos reservados.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
|
||||
const videoBlock = (video) => {
|
||||
if (video?.video_files?.length > 0) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||
<video
|
||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
>
|
||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={video?.user?.url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
contentPosition === 'background'
|
||||
? {
|
||||
backgroundImage: `${
|
||||
illustrationImage
|
||||
? `url(${illustrationImage.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<Head>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{contentType === 'image' && contentPosition !== 'background'
|
||||
? imageBlock(illustrationImage)
|
||||
: null}
|
||||
{contentType === 'video' && contentPosition !== 'background'
|
||||
? videoBlock(illustrationVideo)
|
||||
: null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||
<CardBoxComponentTitle title="Welcome to your El dolarcito app!"/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
||||
</div>
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
href='/login'
|
||||
label='Login'
|
||||
color='info'
|
||||
className='w-full'
|
||||
/>
|
||||
|
||||
</BaseButtons>
|
||||
</CardBox>
|
||||
</div>
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
|
||||
247
frontend/src/pages/pos.tsx
Normal file
247
frontend/src/pages/pos.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle('Punto de Venta')}</title>
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton icon={icon.mdiCashRegister} title="Terminal de Venta - El dolarcito" main>
|
||||
<BaseButton
|
||||
label="Actualizar Stock"
|
||||
icon={icon.mdiRefresh}
|
||||
onClick={fetchProducts}
|
||||
color="info"
|
||||
roundedFull
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Product Selection */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<CardBox>
|
||||
<FormField label="Buscar Producto (Nombre o SKU)" labelFor="search">
|
||||
<div className="relative">
|
||||
<input
|
||||
id="search"
|
||||
type="text"
|
||||
placeholder="Ej: Camisa, SKU001..."
|
||||
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-emerald-500 dark:bg-slate-800 dark:border-slate-700"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<BaseIcon path={icon.mdiMagnify} className="absolute left-3 top-2.5 text-gray-400" size={20} />
|
||||
</div>
|
||||
</FormField>
|
||||
</CardBox>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{loading ? (
|
||||
<p className="col-span-full text-center py-12 text-gray-500">Cargando productos...</p>
|
||||
) : filteredProducts.length > 0 ? (
|
||||
filteredProducts.map((p) => (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => addToCart(p)}
|
||||
className="text-left bg-white dark:bg-slate-900 p-4 rounded-xl border border-transparent hover:border-emerald-500 shadow-sm transition-all group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-1 bg-emerald-500 text-white transform translate-x-full group-hover:translate-x-0 transition-transform">
|
||||
<BaseIcon path={icon.mdiPlus} size={16} />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mb-1">{p.sku || 'Sin SKU'}</p>
|
||||
<h4 className="font-bold text-slate-800 dark:text-slate-100 mb-2 truncate">{p.name}</h4>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-emerald-600 font-bold">${Number(p.sale_price).toFixed(2)}</span>
|
||||
<span className={`text-[10px] px-2 py-0.5 rounded-full ${p.stock > 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||||
Stock: {p.stock}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<p className="col-span-full text-center py-12 text-gray-500 italic text-sm">No se encontraron productos</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cart Summary */}
|
||||
<div className="lg:col-span-1">
|
||||
<CardBox className="sticky top-20 flex flex-col h-[calc(100vh-140px)]">
|
||||
<div className="flex items-center justify-between mb-4 border-b pb-4 dark:border-slate-700">
|
||||
<h3 className="text-xl font-extrabold flex items-center">
|
||||
<BaseIcon path={icon.mdiCart} className="mr-2 text-emerald-500" />
|
||||
Carrito
|
||||
</h3>
|
||||
<span className="bg-emerald-100 text-emerald-700 px-2 py-1 rounded-lg text-sm font-bold">
|
||||
{cart.length} items
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow overflow-y-auto space-y-4 mb-4 pr-2">
|
||||
{cart.length > 0 ? (
|
||||
cart.map((item) => (
|
||||
<div key={item.id} className="flex flex-col p-3 bg-gray-50 dark:bg-slate-800 rounded-lg">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="font-bold truncate max-w-[150px]">{item.name}</span>
|
||||
<button onClick={() => removeFromCart(item.id)} className="text-red-400 hover:text-red-600">
|
||||
<BaseIcon path={icon.mdiClose} size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<button onClick={() => updateQuantity(item.id, -1)} className="w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-slate-700 rounded-full text-xs">-</button>
|
||||
<span className="font-bold w-4 text-center">{item.quantity}</span>
|
||||
<button onClick={() => updateQuantity(item.id, 1)} className="w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-slate-700 rounded-full text-xs">+</button>
|
||||
</div>
|
||||
<span className="font-bold text-emerald-600">${Number(item.subtotal).toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-400">
|
||||
<BaseIcon path={icon.mdiCartOutline} size={64} className="mb-4 opacity-20" />
|
||||
<p className="text-sm">El carrito está vacío</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4 space-y-4 dark:border-slate-700">
|
||||
<div className="flex justify-between text-lg">
|
||||
<span>Subtotal:</span>
|
||||
<span className="font-medium">${total.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-2xl font-extrabold text-emerald-600">
|
||||
<span>Total:</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
<BaseButton
|
||||
label={submitting ? "Procesando..." : "Completar Venta"}
|
||||
color="success"
|
||||
className="w-full py-4 text-xl rounded-xl"
|
||||
onClick={handleCheckout}
|
||||
disabled={cart.length === 0 || submitting}
|
||||
/>
|
||||
</div>
|
||||
</CardBox>
|
||||
</div>
|
||||
</div>
|
||||
</SectionMain>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
POSPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
||||
};
|
||||
|
||||
export default POSPage;
|
||||
Loading…
x
Reference in New Issue
Block a user