Auto commit: 2026-02-28T19:54:09.195Z

backend/src/db/migrations/1772306633138.js

@@ -0,0 +1,40 @@
+
+module.exports = {
+  async up(queryInterface) {
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    const [roles] = await queryInterface.sequelize.query(
+      `SELECT id FROM roles WHERE name = 'Public' LIMIT 1;`
+    );
+    const publicRoleId = roles[0]?.id;
+
+    if (!publicRoleId) return;
+
+    const [permissions] = await queryInterface.sequelize.query(
+      `SELECT id FROM permissions WHERE name IN ('READ_PRODUCTS', 'READ_PRODUCT_CATEGORIES');`
+    );
+
+    if (permissions.length === 0) return;
+
+    const rolePermissions = permissions.map(p => ({
+      roles_permissionsId: publicRoleId,
+      permissionId: p.id,
+      createdAt,
+      updatedAt
+    }));
+
+    // Use a try-catch to ignore duplicate key errors if already exists
+    for (const rp of rolePermissions) {
+        try {
+            await queryInterface.bulkInsert('rolesPermissionsPermissions', [rp]);
+        } catch (e) {
+            console.log(`Permission ${rp.permissionId} already exists for role ${rp.roles_permissionsId}`);
+        }
+    }
+  },
+
+  async down(queryInterface) {
+    // Optional: remove the permissions if needed
+  }
+};

backend/src/db/migrations/1772306633139.js

@@ -0,0 +1,38 @@
+
+module.exports = {
+  async up(queryInterface) {
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    const [roles] = await queryInterface.sequelize.query(
+      `SELECT id FROM roles WHERE name = 'Public' LIMIT 1;`
+    );
+    const publicRoleId = roles[0]?.id;
+
+    if (!publicRoleId) return;
+
+    const [permissions] = await queryInterface.sequelize.query(
+      `SELECT id FROM permissions WHERE name IN ('CREATE_ORDERS', 'READ_ORDERS', 'CREATE_ORDER_ITEMS', 'READ_ORDER_ITEMS');`
+    );
+
+    if (permissions.length === 0) return;
+
+    const rolePermissions = permissions.map(p => ({
+      roles_permissionsId: publicRoleId,
+      permissionId: p.id,
+      createdAt,
+      updatedAt
+    }));
+
+    for (const rp of rolePermissions) {
+        try {
+            await queryInterface.bulkInsert('rolesPermissionsPermissions', [rp]);
+        } catch (e) {
+            console.log(`Permission ${rp.permissionId} already exists for role ${rp.roles_permissionsId}`);
+        }
+    }
+  },
+
+  async down(queryInterface) {
+  }
+};

backend/src/index.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 const cors = require('cors');
 const app = express();
@@ -121,11 +120,11 @@ app.use('/api/permissions', passport.authenticate('jwt', {session: false}), perm
 
 app.use('/api/customer_addresses', passport.authenticate('jwt', {session: false}), customer_addressesRoutes);
 
-app.use('/api/product_categories', passport.authenticate('jwt', {session: false}), product_categoriesRoutes);
+app.use('/api/product_categories', product_categoriesRoutes);
 
 app.use('/api/product_tags', passport.authenticate('jwt', {session: false}), product_tagsRoutes);
 
-app.use('/api/products', passport.authenticate('jwt', {session: false}), productsRoutes);
+app.use('/api/products', productsRoutes);
 
 app.use('/api/inventory_movements', passport.authenticate('jwt', {session: false}), inventory_movementsRoutes);
 
@@ -133,9 +132,9 @@ app.use('/api/shopping_carts', passport.authenticate('jwt', {session: false}), s
 
 app.use('/api/cart_items', passport.authenticate('jwt', {session: false}), cart_itemsRoutes);
 
-app.use('/api/orders', passport.authenticate('jwt', {session: false}), ordersRoutes);
+app.use('/api/orders', ordersRoutes);
 
-app.use('/api/order_items', passport.authenticate('jwt', {session: false}), order_itemsRoutes);
+app.use('/api/order_items', order_itemsRoutes);
 
 app.use('/api/payments', passport.authenticate('jwt', {session: false}), paymentsRoutes);
 
@@ -191,4 +190,4 @@ db.sequelize.sync().then(function () {
   });
 });
 
-module.exports = app;
+module.exports = app;

backend/src/routes/order_items.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 
 const Order_itemsService = require('../services/order_items');
@@ -89,8 +88,7 @@ router.use(checkCrudPermissions('order_items'));
 router.post('/', wrapAsync(async (req, res) => {
     const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
     const link = new URL(referer);
-    await Order_itemsService.create(req.body.data, req.currentUser, true, link.host);
-    const payload = true;
+    const payload = await Order_itemsService.create(req.body.data, req.currentUser, true, link.host);
     res.status(200).send(payload);
 }));
 
@@ -438,4 +436,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-module.exports = router;
+module.exports = router;

backend/src/routes/orders.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 
 const OrdersService = require('../services/orders');
@@ -97,8 +96,7 @@ router.use(checkCrudPermissions('orders'));
 router.post('/', wrapAsync(async (req, res) => {
     const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
     const link = new URL(referer);
-    await OrdersService.create(req.body.data, req.currentUser, true, link.host);
-    const payload = true;
+    const payload = await OrdersService.create(req.body.data, req.currentUser, true, link.host);
     res.status(200).send(payload);
 }));
 
@@ -446,4 +444,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-module.exports = router;
+module.exports = router;

backend/src/services/order_items.js

@@ -15,7 +15,7 @@ module.exports = class Order_itemsService {
   static async create(data, currentUser) {
     const transaction = await db.sequelize.transaction();
     try {
-      await Order_itemsDBApi.create(
+      const order_items = await Order_itemsDBApi.create(
         data,
         {
           currentUser,
@@ -24,6 +24,7 @@ module.exports = class Order_itemsService {
       );
 
       await transaction.commit();
+      return order_items;
     } catch (error) {
       await transaction.rollback();
       throw error;
@@ -133,6 +134,4 @@ module.exports = class Order_itemsService {
   }
 
   
-};
-
-
+};

backend/src/services/orders.js

@@ -15,7 +15,7 @@ module.exports = class OrdersService {
   static async create(data, currentUser) {
     const transaction = await db.sequelize.transaction();
     try {
-      await OrdersDBApi.create(
+      const orders = await OrdersDBApi.create(
         data,
         {
           currentUser,
@@ -24,6 +24,7 @@ module.exports = class OrdersService {
       );
 
       await transaction.commit();
+      return orders;
     } catch (error) {
       await transaction.rollback();
       throw error;
@@ -121,7 +122,7 @@ module.exports = class OrdersService {
         id,
         {
           currentUser,
-          transaction,
+          transaction,           
         },
       );
 
@@ -133,6 +134,4 @@ module.exports = class OrdersService {
   }
 
   
-};
-
-
+};

frontend/src/components/CartDrawer.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { mdiClose, mdiPlus, mdiMinus, mdiTrashCan, mdiCartOutline } from '@mdi/js';
+import BaseButton from './BaseButton';
+import BaseIcon from './BaseIcon';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { removeFromCart, updateQuantity } from '../stores/localCartSlice';
+import { useRouter } from 'next/router';
+
+interface CartDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const CartDrawer: React.FC<CartDrawerProps> = ({ isOpen, onClose }) => {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  const cartItems = useAppSelector((state) => state.localCart.items);
+
+  const subtotal = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-hidden">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black bg-opacity-50 transition-opacity" 
+        onClick={onClose}
+      />
+      
+      {/* Drawer */}
+      <div className="absolute inset-y-0 right-0 max-w-full flex">
+        <div className="w-screen max-w-md">
+          <div className="h-full flex flex-col bg-white shadow-xl">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-6 border-b">
+              <h2 className="text-xl font-bold flex items-center gap-2">
+                <BaseIcon path={mdiCartOutline} size={24} />
+                Your Selection
+              </h2>
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-gray-500 transition-colors"
+              >
+                <BaseIcon path={mdiClose} size={32} />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto aside-scrollbars px-4 py-4">
+              {cartItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-full text-center py-20">
+                  <div className="bg-gray-100 p-6 rounded-full mb-4">
+                    <BaseIcon path={mdiCartOutline} size={64} className="text-gray-400" />
+                  </div>
+                  <p className="text-gray-500 text-lg">Your cart is empty.</p>
+                  <BaseButton 
+                    label="Explore Menu" 
+                    color="pavitra" 
+                    onClick={onClose} 
+                    className="mt-4"
+                  />
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  {cartItems.map((item) => (
+                    <div key={item.id} className="flex gap-4 border-b pb-4 last:border-0">
+                      <div className="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden flex-shrink-0">
+                        {item.image ? (
+                          <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
+                        ) : (
+                          <BaseIcon path={mdiCartOutline} size={24} className="text-gray-300" />
+                        )}
+                      </div>
+                      <div className="flex-1 flex flex-col">
+                        <div className="flex justify-between items-start">
+                          <h3 className="font-bold text-gray-800">{item.name}</h3>
+                          <p className="font-bold text-pavitra-600">${item.price.toFixed(2)}</p>
+                        </div>
+                        
+                        <div className="mt-auto flex justify-between items-center">
+                          {/* Quantity Controls */}
+                          <div className="flex items-center border rounded-lg">
+                            <button 
+                              className="p-1 hover:bg-gray-100 text-gray-500 transition-colors"
+                              onClick={() => {
+                                if (item.quantity > 1) {
+                                  dispatch(updateQuantity({ id: item.id, quantity: item.quantity - 1 }));
+                                } else {
+                                  dispatch(removeFromCart(item.id));
+                                }
+                              }}
+                            >
+                              <BaseIcon path={mdiMinus} size={18} />
+                            </button>
+                            <span className="px-3 font-semibold w-8 text-center">{item.quantity}</span>
+                            <button 
+                              className="p-1 hover:bg-gray-100 text-gray-500 transition-colors"
+                              onClick={() => dispatch(updateQuantity({ id: item.id, quantity: item.quantity + 1 }))}
+                            >
+                              <BaseIcon path={mdiPlus} size={18} />
+                            </button>
+                          </div>
+
+                          <button 
+                            className="text-red-500 hover:text-red-700 p-1 transition-colors"
+                            onClick={() => dispatch(removeFromCart(item.id))}
+                          >
+                            <BaseIcon path={mdiTrashCan} size={20} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            {cartItems.length > 0 && (
+              <div className="border-t px-4 py-6 bg-gray-50">
+                <div className="flex justify-between items-center text-lg font-bold mb-4">
+                  <span>Subtotal</span>
+                  <span className="text-pavitra-600">${subtotal.toFixed(2)}</span>
+                </div>
+                <p className="text-sm text-gray-500 mb-6">
+                  Shipping and taxes calculated at checkout.
+                </p>
+                <div className="flex flex-col gap-3">
+                  <BaseButton 
+                    label="Checkout" 
+                    color="pavitra" 
+                    className="w-full py-4 text-lg"
+                    onClick={() => {
+                      onClose();
+                      router.push('/checkout');
+                    }}
+                  />
+                  <BaseButton 
+                    label="Continue Browsing" 
+                    color="white" 
+                    className="w-full border"
+                    onClick={onClose}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CartDrawer;

frontend/src/components/ElCalentico/Footer.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from 'next/link';
+import { useAppSelector } from '../../stores/hooks';
+
+const ElCalenticoFooter = () => {
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+
+    return (
+        <footer className={`py-12 ${darkMode ? 'bg-dark-800 text-gray-400' : 'bg-gray-100 text-gray-600'}`}>
+            <div className="container mx-auto px-4">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12 border-b border-gray-200 dark:border-dark-700 pb-12">
+                    <div className="col-span-1 md:col-span-2">
+                        <h3 className="text-2xl font-bold text-orange-600 mb-6">El Calentico</h3>
+                        <p className="mb-6 max-w-md text-lg">
+                            Tu tienda virtual de confianza para alimentos, bebidas y productos del día a día. Llevamos la mejor calidad directamente a tu puerta.
+                        </p>
+                    </div>
+                    <div>
+                        <h4 className="text-lg font-bold mb-6 text-gray-900 dark:text-white">Enlaces Rápidos</h4>
+                        <ul className="space-y-4">
+                            <li><Link href="/search" className="hover:text-orange-600 transition-colors">Productos</Link></li>
+                            <li><Link href="/#categories" className="hover:text-orange-600 transition-colors">Categorías</Link></li>
+                            <li><Link href="/login" className="hover:text-orange-600 transition-colors">Mi Cuenta</Link></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 className="text-lg font-bold mb-6 text-gray-900 dark:text-white">Legal</h4>
+                        <ul className="space-y-4">
+                            <li><Link href="/privacy-policy" className="hover:text-orange-600 transition-colors">Privacidad</Link></li>
+                            <li><Link href="/terms-of-use" className="hover:text-orange-600 transition-colors">Términos</Link></li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm font-medium">
+                    <p>© 2026 El Calentico. Todos los derechos reservados.</p>
+                    <div className="flex gap-8">
+                        <Link href="/terms-of-use" className="hover:text-orange-600 transition-colors">Términos de Uso</Link>
+                        <Link href="/privacy-policy" className="hover:text-orange-600 transition-colors">Política de Privacidad</Link>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default ElCalenticoFooter;

frontend/src/components/ElCalentico/Header.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { mdiCartOutline } from '@mdi/js';
+import BaseIcon from '../BaseIcon';
+import { useAppSelector, useAppDispatch } from '../../stores/hooks';
+import { toggleCart } from '../../stores/localCartSlice';
+
+const ElCalenticoHeader = () => {
+    const dispatch = useAppDispatch();
+    const cartItems = useAppSelector((state) => state.localCart.items);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
+    const [isScrolled, setIsScrolled] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setIsScrolled(window.scrollY > 20);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const cartCount = cartItems.reduce((acc, item) => acc + item.quantity, 0);
+
+    return (
+        <nav className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${
+            isScrolled ? (darkMode ? 'bg-dark-900/95 backdrop-blur-md py-4' : 'bg-white/95 backdrop-blur-md py-4 shadow-md') : 'bg-transparent py-6'
+        }`}>
+            <div className="container mx-auto px-4 flex justify-between items-center">
+                <Link href="/" className="flex items-center gap-2 group">
+                    <div className="bg-orange-600 p-2 rounded-lg rotate-12 group-hover:rotate-0 transition-transform duration-300">
+                        <span className="text-white font-black text-2xl">C</span>
+                    </div>
+                    <span className="text-2xl font-black text-orange-600 tracking-tighter">EL CALENTICO</span>
+                </Link>
+
+                <div className="hidden md:flex items-center gap-10">
+                    <Link href="/" className={`font-bold hover:text-orange-600 transition-colors ${isScrolled ? 'text-gray-800 dark:text-gray-200' : 'text-gray-900'}`}>Menu</Link>
+                    <Link href="/search" className={`font-bold hover:text-orange-600 transition-colors ${isScrolled ? 'text-gray-800 dark:text-gray-200' : 'text-gray-900'}`}>Ofertas</Link>
+                    <Link href="/login" className={`font-bold hover:text-orange-600 transition-colors ${isScrolled ? 'text-gray-800 dark:text-gray-200' : 'text-gray-900'}`}>Mi Cuenta</Link>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    <button 
+                        onClick={() => dispatch(toggleCart())}
+                        className="relative p-2 text-orange-600 hover:bg-orange-600/10 rounded-full transition-all group"
+                        title="Ver carrito"
+                    >
+                        <BaseIcon path={mdiCartOutline} size={32} />
+                        {cartCount > 0 && (
+                            <span className="absolute -top-1 -right-1 bg-red-600 text-white text-xs font-black w-6 h-6 flex items-center justify-center rounded-full border-2 border-white animate-bounce">
+                                {cartCount}
+                            </span>
+                        )}
+                    </button>
+                    <Link 
+                        href="/login"
+                        className="hidden md:block bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 hover:scale-105"
+                    >
+                        Iniciar Sesión
+                    </Link>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default ElCalenticoHeader;

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/menuAside.ts

@@ -7,6 +7,14 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiViewDashboardOutline,
     label: 'Dashboard',
   },
+  {
+    href: '/orders/dashboard',
+    label: 'Order Dashboard',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiMonitorDashboard ?? icon.mdiTable,
+    permissions: 'READ_ORDERS'
+  },
   
   {
     href: '/users/users-list',
@@ -160,4 +168,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/checkout.tsx

@@ -0,0 +1,272 @@
+import { mdiCartCheck, mdiChevronLeft, mdiTruckDelivery } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../components/CardBox';
+import LayoutGuest from '../layouts/Guest';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import BaseButton from '../components/BaseButton';
+import FormField from '../components/FormField';
+import { clearCart } from '../stores/localCartSlice';
+import axios from 'axios';
+import { useRouter } from 'next/router';
+import ElCalenticoHeader from '../components/ElCalentico/Header';
+import ElCalenticoFooter from '../components/ElCalentico/Footer';
+import BaseIcon from '../components/BaseIcon';
+
+const CheckoutPage = () => {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  const cartItems = useAppSelector((state) => state.localCart.items);
+
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    address: '',
+    notes: '',
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [orderSuccess, setOrderSuccess] = useState(false);
+
+  const subtotal = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (cartItems.length === 0) return;
+
+    setIsSubmitting(true);
+    try {
+      // 1. Create Order
+      const orderData = {
+        data: {
+          order_number: `ORD-${Date.now()}`,
+          status: 'pending',
+          payment_status: 'unpaid',
+          subtotal_amount: subtotal,
+          total_amount: subtotal,
+          customer_note: `Guest: ${formData.firstName} ${formData.lastName}\nEmail: ${formData.email}\nPhone: ${formData.phone}\nAddress: ${formData.address}\nNotes: ${formData.notes}`,
+          placed_at: new Date().toISOString(),
+        },
+      };
+
+      const orderResponse = await axios.post('/orders', orderData);
+      const orderId = orderResponse.data.id;
+
+      // 2. Create Order Items
+      for (const item of cartItems) {
+        await axios.post('/order_items', {
+          data: {
+            orderId: orderId,
+            productId: item.id,
+            product_name_snapshot: item.name,
+            quantity: item.quantity,
+            unit_price_snapshot: item.price,
+            line_total_amount: item.price * item.quantity,
+          },
+        });
+      }
+
+      // 3. Success
+      dispatch(clearCart());
+      setOrderSuccess(true);
+      window.scrollTo(0, 0);
+    } catch (error) {
+      console.error('Checkout error:', error);
+      alert('There was an error processing your order. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (orderSuccess) {
+    return (
+      <div className="pt-20">
+        <Head>
+          <title>{getPageTitle('Order Success')}</title>
+        </Head>
+        <ElCalenticoHeader />
+        <SectionMain>
+          <div className="max-w-2xl mx-auto text-center py-20 bg-white rounded-3xl shadow-sm border mt-10">
+            <div className="flex justify-center mb-8">
+              <div className="bg-green-100 text-green-600 p-6 rounded-full">
+                <BaseIcon path={mdiCartCheck} size={64} />
+              </div>
+            </div>
+            <h1 className="text-4xl font-black mb-6 text-gray-900">¡Pedido Realizado con Éxito!</h1>
+            <p className="text-gray-600 mb-10 text-xl max-w-lg mx-auto leading-relaxed">
+              Gracias por tu pedido. Lo hemos recibido y empezaremos a preparar tus favoritos de El Calentico de inmediato.
+            </p>
+            <BaseButton
+              label="Volver al Menú"
+              color="pavitra"
+              roundedFull
+              className="px-12 py-4 text-lg font-bold"
+              onClick={() => router.push('/')}
+            />
+          </div>
+        </SectionMain>
+        <ElCalenticoFooter />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-20 bg-gray-50 min-h-screen">
+      <Head>
+        <title>{getPageTitle('Checkout')}</title>
+      </Head>
+      <ElCalenticoHeader />
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiTruckDelivery} title="Finalizar Pedido" main>
+          <BaseButton
+            icon={mdiChevronLeft}
+            label="Volver a la Tienda"
+            color="white"
+            roundedFull
+            onClick={() => router.push('/')}
+            small
+          />
+        </SectionTitleLineWithButton>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Form */}
+          <div className="lg:col-span-2">
+            <CardBox isForm onSubmit={handleSubmit} className="shadow-sm border-0 rounded-3xl">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <FormField label="Nombre" help="Requerido">
+                  <input
+                    type="text"
+                    name="firstName"
+                    value={formData.firstName}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full rounded-xl border-gray-200 focus:border-orange-500 focus:ring-orange-500 transition-all"
+                  />
+                </FormField>
+                <FormField label="Apellidos" help="Requerido">
+                  <input
+                    type="text"
+                    name="lastName"
+                    value={formData.lastName}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full rounded-xl border-gray-200 focus:border-orange-500 focus:ring-orange-500 transition-all"
+                  />
+                </FormField>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+                <FormField label="Email" help="Requerido">
+                  <input
+                    type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full rounded-xl border-gray-200 focus:border-orange-500 focus:ring-orange-500 transition-all"
+                  />
+                </FormField>
+                <FormField label="Teléfono" help="Requerido">
+                  <input
+                    type="tel"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full rounded-xl border-gray-200 focus:border-orange-500 focus:ring-orange-500 transition-all"
+                  />
+                </FormField>
+              </div>
+
+              <div className="mt-6">
+                <FormField label="Dirección de Entrega" help="Requerido">
+                  <textarea
+                    name="address"
+                    value={formData.address}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full min-h-[120px] rounded-xl border-gray-200 focus:border-orange-500 focus:ring-orange-500 transition-all"
+                    placeholder="Calle, número, piso, código postal..."
+                  />
+                </FormField>
+              </div>
+
+              <div className="mt-6">
+                <FormField label="Notas del Pedido" help="Opcional">
+                  <textarea
+                    name="notes"
+                    value={formData.notes}
+                    onChange={handleInputChange}
+                    className="w-full min-h-[80px] rounded-xl border-gray-200 focus:border-orange-500 focus:ring-orange-500 transition-all"
+                    placeholder="Instrucciones especiales para el repartidor..."
+                  />
+                </FormField>
+              </div>
+
+              <div className="mt-10 flex justify-end">
+                <BaseButton
+                  type="submit"
+                  color="pavitra"
+                  roundedFull
+                  label={isSubmitting ? 'Procesando...' : `Confirmar Pedido ($${subtotal.toFixed(2)})`}
+                  disabled={isSubmitting || cartItems.length === 0}
+                  className="w-full md:w-auto px-12 py-4 text-xl font-bold transition-transform hover:scale-105"
+                />
+              </div>
+            </CardBox>
+          </div>
+
+          {/* Summary */}
+          <div className="lg:col-span-1">
+            <CardBox className="shadow-sm border-0 rounded-3xl sticky top-28">
+              <h2 className="text-2xl font-black mb-6 border-b pb-4 text-gray-800">Resumen del Pedido</h2>
+              <div className="space-y-6 max-h-[50vh] overflow-y-auto aside-scrollbars pr-2">
+                {cartItems.map((item) => (
+                  <div key={item.id} className="flex justify-between items-start gap-4 group">
+                    <div className="flex-grow">
+                      <p className="font-bold text-gray-800 group-hover:text-orange-600 transition-colors">{item.name}</p>
+                      <p className="text-sm text-gray-500 font-medium">Cant: {item.quantity} x ${item.price.toFixed(2)}</p>
+                    </div>
+                    <p className="font-black text-gray-900">${(item.price * item.quantity).toFixed(2)}</p>
+                  </div>
+                ))}
+              </div>
+
+              {cartItems.length === 0 && (
+                <p className="text-center text-gray-500 py-10 italic">Tu carrito está vacío.</p>
+              )}
+
+              <div className="mt-8 pt-6 border-t border-dashed border-gray-300">
+                <div className="flex justify-between items-center text-xl font-black">
+                  <span className="text-gray-700">Total</span>
+                  <span className="text-orange-600 text-3xl">${subtotal.toFixed(2)}</span>
+                </div>
+              </div>
+
+              <div className="mt-8 text-xs text-gray-400 bg-gray-50 p-4 rounded-2xl">
+                <p>Al realizar tu pedido, aceptas los Términos de Servicio y la Política de Privacidad de El Calentico.</p>
+              </div>
+            </CardBox>
+          </div>
+        </div>
+      </SectionMain>
+      <ElCalenticoFooter />
+    </div>
+  );
+};
+
+CheckoutPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
+
+export default CheckoutPage;

frontend/src/pages/dashboard.tsx

@@ -148,6 +148,20 @@ const Dashboard = () => {
         </div>
 
         {!!rolesWidgets.length && <hr className='my-6 text-pastelBrownTheme-mainBG  ' />}
+
+        {hasPermission(currentUser, 'READ_ORDERS') && (
+            <Link href={'/orders/dashboard'}>
+                <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 mb-6 bg-orange-50 dark:bg-orange-900 border-orange-200 dark:border-orange-800 cursor-pointer hover:shadow-lg transition-shadow duration-200`}>
+                    <div className="flex justify-between items-center">
+                        <div>
+                            <h2 className="text-2xl font-bold text-orange-600 dark:text-orange-400">Order Management Dashboard</h2>
+                            <p className="text-gray-600 dark:text-gray-300">View analytics, process incoming orders, and manage inventory.</p>
+                        </div>
+                        <BaseIcon path={icon.mdiMonitorDashboard} size={64} className="text-orange-500" />
+                    </div>
+                </div>
+            </Link>
+        )}
         
         <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
         
@@ -639,4 +653,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
-export default Dashboard
+export default Dashboard

frontend/src/pages/index.tsx

@@ -1,166 +1,267 @@
-
 import React, { useEffect, useState } 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 { useAppSelector, useAppDispatch } from '../stores/hooks';
+import { fetch as fetchProducts } from '../stores/products/productsSlice';
+import { fetch as fetchCategories } from '../stores/product_categories/product_categoriesSlice';
+import { mdiCartOutline, mdiArrowRight, mdiFire, mdiTruckFast, mdiFoodApple } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import LoadingSpinner from '../components/LoadingSpinner';
+import CartDrawer from '../components/CartDrawer';
+import { addToCart, toggleCart } from '../stores/localCartSlice';
+import ElCalenticoHeader from '../components/ElCalentico/Header';
+import ElCalenticoFooter from '../components/ElCalentico/Footer';
 
+export default function Home() {
+    const dispatch = useAppDispatch();
+    const { products, loading: productsLoading } = useAppSelector((state) => state.products);
+    const { categories, loading: categoriesLoading } = useAppSelector((state) => state.product_categories);
+    const isCartOpen = useAppSelector((state) => state.localCart.isOpen);
+    const darkMode = useAppSelector((state) => state.style.darkMode);
 
-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('background');
-    const textColor = useAppSelector((state) => state.style.linkColor);
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
-    const title = 'El Calentico Store'
-
-    // Fetch Pexels image/video
     useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
+        dispatch(fetchProducts({}));
+        dispatch(fetchCategories({}));
+    }, [dispatch]);
 
-    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>
-        </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>)
-        }
+    const handleAddToCart = (product: any) => {
+        dispatch(addToCart({
+            id: product.id,
+            name: product.name,
+            price: Number(product.price),
+            quantity: 1,
+            image: product.image?.length > 0 ? product.image[0].publicUrl : null
+        }));
     };
 
-  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>
+    const filteredProducts = selectedCategory 
+        ? products.filter((p: any) => p.categoryId === selectedCategory)
+        : products;
 
-      <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 Calentico Store 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'
-                />
+    const featuredProducts = products.filter((p: any) => p.is_featured).slice(0, 4);
 
-            </BaseButtons>
-        </CardBox>
+    return (
+        <div className={`min-h-screen font-sans selection:bg-orange-600 selection:text-white ${darkMode ? 'bg-dark-900 text-gray-100' : 'bg-white text-gray-900'}`}>
+            <Head>
+                <title>{getPageTitle('El Calentico - Tu Tienda Virtual')}</title>
+            </Head>
+
+            <ElCalenticoHeader />
+            <CartDrawer isOpen={isCartOpen} onClose={() => dispatch(toggleCart())} />
+
+            {/* Hero Section */}
+            <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-10">
+                    <div className="absolute top-0 left-0 w-96 h-96 bg-orange-600 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
+                    <div className="absolute bottom-0 right-0 w-96 h-96 bg-yellow-400 rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>
+                </div>
+
+                <div className="container mx-auto px-4">
+                    <div className="flex flex-col lg:flex-row items-center gap-12">
+                        <div className="lg:w-1/2 text-center lg:text-left">
+                            <div className="inline-flex items-center gap-2 bg-orange-100 text-orange-600 px-4 py-2 rounded-full mb-6 animate-fade-in">
+                                <BaseIcon path={mdiFire} size={20} />
+                                <span className="font-bold text-sm uppercase tracking-wider">¡Nuevas Ofertas Cada Día!</span>
+                            </div>
+                            <h1 className="text-6xl lg:text-8xl font-black leading-tight mb-8 tracking-tighter">
+                                Frescura que <span className="text-orange-600">Alimenta</span> tu Vida.
+                            </h1>
+                            <p className="text-xl text-gray-600 dark:text-gray-400 mb-10 max-w-xl leading-relaxed">
+                                Descubre la mejor selección de productos locales, snacks, bebidas y mucho más. Calidad garantizada en la puerta de tu casa en menos de 60 minutos.
+                            </p>
+                            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
+                                <BaseButton
+                                    label="Explorar Menú"
+                                    color="pavitra"
+                                    roundedFull
+                                    className="px-10 py-4 text-lg font-bold shadow-lg shadow-orange-600/30 transition-transform hover:scale-105"
+                                    onClick={() => document.getElementById('products')?.scrollIntoView({ behavior: 'smooth' })}
+                                />
+                                <div className="flex items-center gap-4 text-gray-500 font-medium">
+                                    <div className="flex -space-x-3">
+                                        {[1,2,3,4].map(i => (
+                                            <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-xs font-bold overflow-hidden">
+                                                <img src={`https://i.pravatar.cc/100?u=${i}`} alt="user" className="w-full h-full object-cover" />
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <span>+2k clientes felices</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="lg:w-1/2 relative">
+                            <div className="relative z-10 animate-bounce-slow">
+                                <img 
+                                    src="https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg?auto=compress&cs=tinysrgb&w=800" 
+                                    alt="Fresh food basket" 
+                                    className="rounded-[3rem] shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-700"
+                                />
+                                <div className="absolute -bottom-10 -left-10 bg-white dark:bg-dark-800 p-6 rounded-3xl shadow-xl animate-fade-in-up">
+                                    <div className="flex items-center gap-4">
+                                        <div className="bg-green-100 p-3 rounded-2xl">
+                                            <BaseIcon path={mdiTruckFast} size={32} className="text-green-600" />
+                                        </div>
+                                        <div>
+                                            <p className="font-black text-2xl text-gray-800 dark:text-white">60 min</p>
+                                            <p className="text-sm text-gray-500">Entrega promedio</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Categories Section */}
+            <section id="categories" className={`py-24 ${darkMode ? 'bg-dark-800' : 'bg-gray-50'} rounded-[4rem]`}>
+                <div className="container mx-auto px-4">
+                    <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+                        <div>
+                            <h2 className="text-4xl lg:text-5xl font-black mb-4 tracking-tight">Busca por Categoría</h2>
+                            <p className="text-gray-500 text-lg max-w-md font-medium">Todo lo que necesitas, organizado para tu comodidad.</p>
+                        </div>
+                        <div className="flex gap-2">
+                            <button 
+                                onClick={() => setSelectedCategory(null)}
+                                className={`px-6 py-3 rounded-2xl font-bold transition-all ${!selectedCategory ? 'bg-orange-600 text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
+                            >
+                                Todos
+                            </button>
+                            {categoriesLoading ? (
+                                <LoadingSpinner />
+                            ) : (
+                                categories.slice(0, 5).map((cat: any) => (
+                                    <button 
+                                        key={cat.id}
+                                        onClick={() => setSelectedCategory(cat.id)}
+                                        className={`px-6 py-3 rounded-2xl font-bold transition-all ${selectedCategory === cat.id ? 'bg-orange-600 text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
+                                    >
+                                        {cat.name}
+                                    </button>
+                                ))
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+                        {categories.map((category: any) => (
+                            <button 
+                                key={category.id}
+                                onClick={() => setSelectedCategory(category.id)}
+                                className={`group p-8 rounded-[2.5rem] transition-all duration-500 text-center flex flex-col items-center gap-4 ${
+                                    selectedCategory === category.id 
+                                    ? 'bg-orange-600 text-white shadow-2xl scale-105' 
+                                    : 'bg-white dark:bg-dark-700 hover:shadow-xl hover:-translate-y-2'
+                                }`}
+                            >
+                                <div className={`w-16 h-16 rounded-2xl flex items-center justify-center transition-colors ${selectedCategory === category.id ? 'bg-white/20' : 'bg-orange-100 group-hover:bg-orange-600 group-hover:text-white'}`}>
+                                    <BaseIcon path={mdiFoodApple} size={32} />
+                                </div>
+                                <span className="font-black text-lg tracking-tight">{category.name}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* Products Grid */}
+            <section id="products" className="py-24">
+                <div className="container mx-auto px-4">
+                    <div className="flex items-center justify-between mb-16">
+                        <h2 className="text-4xl lg:text-5xl font-black tracking-tight">Nuestros Productos</h2>
+                        <Link href="/search" className="text-orange-600 font-bold flex items-center gap-2 hover:gap-4 transition-all group">
+                            Ver catálogo completo <BaseIcon path={mdiArrowRight} size={24} />
+                        </Link>
+                    </div>
+
+                    {productsLoading ? (
+                        <div className="py-20 flex justify-center"><LoadingSpinner /></div>
+                    ) : (
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
+                            {filteredProducts.map((product: any) => (
+                                <div 
+                                    key={product.id} 
+                                    className="group bg-white dark:bg-dark-800 rounded-[3rem] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-gray-100 dark:border-dark-700"
+                                >
+                                    <div className="h-64 overflow-hidden relative">
+                                        <img 
+                                            src={product.image?.length > 0 ? product.image[0].publicUrl : 'https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg?auto=compress&cs=tinysrgb&w=400'} 
+                                            alt={product.name} 
+                                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                                        />
+                                        {product.is_featured && (
+                                            <div className="absolute top-6 left-6 bg-orange-600 text-white text-xs font-black px-4 py-2 rounded-full uppercase tracking-widest shadow-lg">
+                                                Destacado
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className="p-8">
+                                        <div className="mb-2">
+                                            {categories.find((c: any) => c.id === product.categoryId) && (
+                                                <span className="text-xs font-bold text-orange-600 uppercase tracking-widest bg-orange-100 px-3 py-1 rounded-lg">
+                                                    {(categories.find((c: any) => c.id === product.categoryId) as any).name}
+                                                </span>
+                                            )}
+                                        </div>
+                                        <h3 className="text-2xl font-black mb-3 text-gray-800 dark:text-white group-hover:text-orange-600 transition-colors line-clamp-1">{product.name}</h3>
+                                        <p className="text-gray-500 dark:text-gray-400 text-sm mb-6 line-clamp-2 font-medium">{product.short_description}</p>
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex flex-col">
+                                                {product.compare_at_price > 0 && (
+                                                    <span className="text-sm text-gray-400 line-through font-bold">${product.compare_at_price}</span>
+                                                )}
+                                                <span className="text-3xl font-black text-gray-900 dark:text-white">${product.price}</span>
+                                            </div>
+                                            <button 
+                                                onClick={() => handleAddToCart(product)}
+                                                className="p-4 bg-gray-100 dark:bg-dark-700 hover:bg-orange-600 text-gray-900 dark:text-white hover:text-white rounded-full transition-all duration-300 group/cart shadow-sm hover:shadow-orange-600/30"
+                                                title="Añadir al carrito"
+                                            >
+                                                <BaseIcon path={mdiCartOutline} size={28} />
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </section>
+
+            {/* CTA Section */}
+            <section className="py-24">
+                <div className="container mx-auto px-4">
+                    <div className="bg-orange-600 rounded-[4rem] p-12 lg:p-24 text-center text-white relative overflow-hidden shadow-2xl shadow-orange-600/40">
+                        <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
+                        <div className="relative z-10">
+                            <h2 className="text-5xl lg:text-6xl font-black mb-8 tracking-tighter">¿Listo para hacer tu primer pedido?</h2>
+                            <p className="text-xl mb-12 max-w-2xl mx-auto opacity-90 leading-relaxed font-medium">
+                                Únete a miles de clientes satisfechos que ya disfrutan de la frescura de El Calentico en sus hogares.
+                            </p>
+                            <BaseButton
+                                label="Crear una Cuenta Gratis"
+                                color="white"
+                                roundedFull
+                                className="px-12 py-5 text-xl font-bold text-orange-600 shadow-xl transition-transform hover:scale-105"
+                                href="/register"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <ElCalenticoFooter />
         </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>;
+Home.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
 };
-

frontend/src/pages/orders/dashboard.tsx

@@ -0,0 +1,164 @@
+import * as icon from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import BaseIcon from "../../components/BaseIcon";
+import { getPageTitle } from '../../config';
+import CardBox from '../../components/CardBox';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import axios from 'axios';
+import KanbanBoard from '../../components/KanbanBoard/KanbanBoard';
+import { deleteItem, update } from '../../stores/orders/ordersSlice';
+import TableOrders from '../../components/Orders/TableOrders';
+
+const OrderDashboard = () => {
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+
+  const [stats, setStats] = useState({
+    totalRevenue: 0,
+    pendingOrders: 0,
+    totalOrders: 0,
+    processingOrders: 0
+  });
+  
+  // Use these to avoid lint error for empty functions
+  const [filterItems, setFilterItems] = useState([]);
+
+  const kanbanColumns = [
+    { id: 'pending', label: 'Pending' },
+    { id: 'confirmed', label: 'Confirmed' },
+    { id: 'processing', label: 'Processing' },
+    { id: 'shipped', label: 'Shipped' },
+    { id: 'delivered', label: 'Delivered' },
+  ];
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await axios.get('/orders?limit=1000'); // Fetch enough for stats
+        const orders = response.data.rows || [];
+        
+        const totalRevenue = orders
+          .filter(o => ['confirmed', 'processing', 'shipped', 'delivered'].includes(o.status))
+          .reduce((acc, o) => acc + (Number(o.total_amount) || 0), 0);
+        
+        const pendingOrders = orders.filter(o => o.status === 'pending').length;
+        const processingOrders = orders.filter(o => o.status === 'processing').length;
+
+        setStats({
+          totalRevenue,
+          pendingOrders,
+          totalOrders: response.data.count || orders.length,
+          processingOrders
+        });
+      } catch (error) {
+        console.error('Error fetching order stats:', error);
+      }
+    };
+
+    if (currentUser) {
+      fetchStats();
+    }
+  }, [currentUser]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Order Dashboard')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={icon.mdiReceiptTextCheck}
+          title="Order Dashboard"
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6">
+          <CardBox className={`${cardsStyle}`}>
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-gray-500 dark:text-gray-400">Total Revenue</p>
+                <h3 className="text-2xl font-bold">${stats.totalRevenue.toFixed(2)}</h3>
+              </div>
+              <BaseIcon path={icon.mdiCurrencyUsd} size={48} className="text-green-500" />
+            </div>
+          </CardBox>
+
+          <CardBox className={`${cardsStyle}`}>
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-gray-500 dark:text-gray-400">Pending Orders</p>
+                <h3 className="text-2xl font-bold">{stats.pendingOrders}</h3>
+              </div>
+              <BaseIcon path={icon.mdiClockOutline} size={48} className="text-yellow-500" />
+            </div>
+          </CardBox>
+
+          <CardBox className={`${cardsStyle}`}>
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-gray-500 dark:text-gray-400">Processing</p>
+                <h3 className="text-2xl font-bold">{stats.processingOrders}</h3>
+              </div>
+              <BaseIcon path={icon.mdiLoading} size={48} className="text-blue-500 animate-spin" />
+            </div>
+          </CardBox>
+
+          <CardBox className={`${cardsStyle}`}>
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-gray-500 dark:text-gray-400">Total Orders</p>
+                <h3 className="text-2xl font-bold">{stats.totalOrders}</h3>
+              </div>
+              <BaseIcon path={icon.mdiPackageVariant} size={48} className="text-purple-500" />
+            </div>
+          </CardBox>
+        </div>
+
+        <SectionTitleLineWithButton icon={icon.mdiViewColumn} title="Order Processing (Kanban)">
+          {''}
+        </SectionTitleLineWithButton>
+
+        <div className="mb-6">
+          <KanbanBoard
+            columns={kanbanColumns}
+            entityName="orders"
+            columnFieldName="status"
+            filtersQuery=""
+            showFieldName="order_number"
+            deleteThunk={deleteItem}
+            updateThunk={update}
+          />
+        </div>
+
+        <SectionTitleLineWithButton icon={icon.mdiHistory} title="Recent Orders">
+          {''}
+        </SectionTitleLineWithButton>
+
+        <TableOrders
+          filterItems={filterItems}
+          setFilterItems={setFilterItems}
+          filters={[]}
+          showGrid={true}
+        />
+      </SectionMain>
+    </>
+  );
+};
+
+OrderDashboard.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ORDERS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default OrderDashboard;

frontend/src/stores/localCartSlice.ts

@@ -0,0 +1,70 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface CartItem {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+  image?: string;
+}
+
+interface LocalCartState {
+  items: CartItem[];
+  isOpen: boolean;
+}
+
+const getInitialItems = () => {
+  if (typeof window !== 'undefined') {
+    return JSON.parse(localStorage.getItem('cart') || '[]');
+  }
+  return [];
+};
+
+const initialState: LocalCartState = {
+  items: getInitialItems(),
+  isOpen: false,
+};
+
+export const localCartSlice = createSlice({
+  name: 'localCart',
+  initialState,
+  reducers: {
+    addToCart: (state, action: PayloadAction<CartItem>) => {
+      const existingItem = state.items.find((item) => item.id === action.payload.id);
+      if (existingItem) {
+        existingItem.quantity += action.payload.quantity;
+      } else {
+        state.items.push(action.payload);
+      }
+      localStorage.setItem('cart', JSON.stringify(state.items));
+    },
+    removeFromCart: (state, action: PayloadAction<string>) => {
+      state.items = state.items.filter((item) => item.id !== action.payload);
+      localStorage.setItem('cart', JSON.stringify(state.items));
+    },
+    updateQuantity: (state, action: PayloadAction<{ id: string; quantity: number }>) => {
+      const item = state.items.find((item) => item.id === action.payload.id);
+      if (item) {
+        item.quantity = Math.max(0, action.payload.quantity);
+        if (item.quantity === 0) {
+          state.items = state.items.filter((i) => i.id !== action.payload.id);
+        }
+      }
+      localStorage.setItem('cart', JSON.stringify(state.items));
+    },
+    clearCart: (state) => {
+      state.items = [];
+      localStorage.removeItem('cart');
+    },
+    toggleCart: (state) => {
+      state.isOpen = !state.isOpen;
+    },
+    setCartOpen: (state, action: PayloadAction<boolean>) => {
+      state.isOpen = action.payload;
+    },
+  },
+});
+
+export const { addToCart, removeFromCart, updateQuantity, clearCart, toggleCart, setCartOpen } = localCartSlice.actions;
+
+export default localCartSlice.reducer;

frontend/src/stores/store.ts

@@ -3,6 +3,7 @@ import styleReducer from './styleSlice';
 import mainReducer from './mainSlice';
 import authSlice from './authSlice';
 import openAiSlice from './openAiSlice';
+import localCartReducer from './localCartSlice';
 
 import usersSlice from "./users/usersSlice";
 import rolesSlice from "./roles/rolesSlice";
@@ -28,6 +29,7 @@ export const store = configureStore({
     main: mainReducer,
     auth: authSlice,
     openAi: openAiSlice,
+    localCart: localCartReducer,
 
 users: usersSlice,
 roles: rolesSlice,
@@ -52,4 +54,4 @@ product_reviews: product_reviewsSlice,
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
+export type AppDispatch = typeof store.dispatch