Werk hoofdapplicatie bij

Legt de bestaande wijzigingen in de hoofdworktree vast voordat de laatste worktree wordt gemerged.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-08-07 20:45:36 +02:00
parent 26a820b41a
commit c07d503d83
41 changed files with 1837 additions and 313 deletions
@@ -0,0 +1,7 @@
+PORT=3000
+
+NODE_ENV=development
+
+SESSION_SECRET=change_this_secret
+
+DATABASE=database.sqlite
@@ -0,0 +1,14 @@
+node_modules/
+
+.env
+
+database.sqlite
+
+storage/logs/*
+storage/backups/*
+
+public/uploads/*
+
+.vscode
+
+.idea
@@ -1,13 +1,30 @@
 require("dotenv").config();

 const http = require("http");
+const { Server } = require("socket.io");

 const createApp = require("./config/express");
+const session = require("./config/session");
+const socketHandlers = require("./sockets/handlers");

 const app = createApp();

 const server = http.createServer(app);

+const io = new Server(server, {
+    cors: {
+        origin: "*",
+        methods: ["GET", "POST"]
+    }
+});
+
+io.use((socket, next) => session(socket.request, {}, next));
+
+socketHandlers(io);
+
+// Make io available in routes
+app.locals.io = io;
+
 const PORT = process.env.PORT || 3000;

 server.listen(PORT, () => {
@@ -22,4 +39,6 @@ server.listen(PORT, () => {

    console.log("===================================");

+    console.log("");
+
 });
@@ -1,11 +1,10 @@
 const Database = require("better-sqlite3");
 const path = require("path");

-const databaseFile = path.join(
-    __dirname,
-    "..",
-    process.env.DATABASE || "database.sqlite"
-);
+const configuredDatabase = process.env.DATABASE || "database.sqlite";
+const databaseFile = path.isAbsolute(configuredDatabase)
+    ? configuredDatabase
+    : path.join(__dirname, "..", configuredDatabase);

 const db = new Database(databaseFile);

@@ -57,9 +57,24 @@ module.exports = () => {

    app.use(session);

+    app.use(flash());
+
    app.use(userMiddleware);

-app.use(flash());
+    app.use((req, res, next) => {
+
+        res.locals.user = req.user || null;
+
+        res.locals.success = req.flash("success");
+        res.locals.error = req.flash("error");
+        res.locals.info = req.flash("info");
+        res.locals.warning = req.flash("warning");
+        
+        res.locals.title = res.locals.title || "PantryHub";
+
+        next();
+
+    });


    app.use(
@@ -69,6 +84,13 @@ app.use(flash());
    );


+    // API Routes
+    app.use(
+        "/api",
+        require("../routes/api")
+    );
+
+    // Web Routes
    app.use(
        "/",
        require("../routes/auth")
@@ -14,14 +14,17 @@ module.exports = session({
        }
    }),

-    secret: process.env.SESSION_SECRET,
+    secret: process.env.SESSION_SECRET || "change-this-development-secret",

    resave: false,

    saveUninitialized: false,

    cookie: {
-        maxAge: 1000 * 60 * 60 * 24 * 30
+        maxAge: 1000 * 60 * 60 * 24 * 30,
+        httpOnly: true,
+        sameSite: "lax",
+        secure: process.env.NODE_ENV === "production"
    }

 });
@@ -10,20 +10,23 @@ class AuthController {

    registerForm(req, res) {

-        res.render("auth/register", {
-            title: "Registreren"
-        });
+        res.locals.title = "Registreren";
+
+        res.render("auth/register");

    }


    async register(req, res) {

-        const {
-            name,
-            email,
-            password
-        } = req.body;
+        const name = (req.body.name || "").trim();
+        const email = (req.body.email || "").trim().toLowerCase();
+        const password = req.body.password || "";
+
+        if (name.length < 2 || !/^\S+@\S+\.\S+$/.test(email) || password.length < 8) {
+            req.flash("error", "Vul een naam, geldig e-mailadres en een wachtwoord van minimaal 8 tekens in.");
+            return res.redirect("/register");
+        }


        const existingUser = db.prepare(
@@ -78,6 +81,10 @@ class AuthController {

        req.session.userId = userId;

+        req.flash(
+            "success",
+            "Welkom bij PantryHub!"
+        );

        res.redirect("/");

@@ -87,9 +94,18 @@ class AuthController {

    loginForm(req, res) {

-        res.render("auth/login", {
-            title: "Inloggen"
-        });
+        res.locals.title = "Inloggen";
+
+        if (req.query.logout) {
+
+            req.flash(
+                "info",
+                "Je bent uitgelogd."
+            );
+
+        }
+
+        res.render("auth/login");

    }

@@ -97,10 +113,8 @@ class AuthController {

    async login(req, res) {

-        const {
-            email,
-            password
-        } = req.body;
+        const email = (req.body.email || "").trim().toLowerCase();
+        const password = req.body.password || "";


        const user = db.prepare(
@@ -141,6 +155,10 @@ class AuthController {

        req.session.userId = user.id;

+        req.flash(
+            "success",
+            `Welkom terug ${user.name}!`
+        );

        res.redirect("/");

@@ -152,7 +170,9 @@ class AuthController {

        req.session.destroy(() => {

-            res.redirect("/login");
+            res.clearCookie("connect.sid");
+
+            res.redirect("/login?logout=1");

        });

@@ -1,25 +1,28 @@
-class DashboardController {
+const ShoppingListRepository = require("../repositories/ShoppingListRepository");

+class DashboardController {

    index(req, res) {

+        const lists = ShoppingListRepository.getByHousehold(
+            req.user.household_id
+        );
+
+        const recentLists = lists.slice(0, 5);
+
+        res.locals.title = "Dashboard";

        res.render(
            "dashboard/index",
            {
-
-                title: "Dashboard",
-
-                user: req.user
-
+                user: req.user,
+                lists: recentLists,
+                totalLists: lists.length
            }
        );

-
    }

-
 }

-
 module.exports = new DashboardController();
@@ -2,11 +2,9 @@ class HomeController {

    index(req, res) {

-        res.render("home/index", {
+        res.locals.title = "PantryHub";

-            title: "PantryHub"
-
-        });
+        res.render("home/index");

    }

@@ -1,21 +1,21 @@
+const UserRepository = require("../repositories/UserRepository");
+
 class HouseholdController {

-
    index(req, res) {

+        res.locals.title = "Huishouden";
+
        res.render(
            "household/index",
            {
-                title:"Huishouden",
-                user:req.user
+                user: req.user,
+                members: UserRepository.getHouseholdMembers(req.user.household_id)
            }
        );

    }

-
 }

-
-module.exports =
-new HouseholdController();
+module.exports = new HouseholdController();
@@ -1,35 +1,53 @@
 const ProductService =
 require("../services/ProductService");

+const db = require("../config/database");
+

 class ProductController {

-
    index(req, res) {

-
        const products =
        ProductService.getProducts();

+        const categories = db.prepare(`
+            SELECT * FROM categories ORDER BY name
+        `).all();
+
+        res.locals.title = "Producten";

        res.render(
            "products/index",
            {
-
-                title:"Producten",
-
-                products
-
+                products,
+                categories,
+                user: req.user
            }
        );

+    }
+
+    create(req, res) {
+
+        const { name, category_id } = req.body;
+
+        if (!name || name.trim().length === 0) {
+            req.flash("error", "Geef een productnaam op");
+            return res.redirect("/products");
+        }
+
+        ProductService.createProduct({
+            name: name.trim(),
+            category_id: category_id || null
+        });
+
+        req.flash("success", "Product toegevoegd");
+        res.redirect("/products");

    }

-
-
 }

-
 module.exports =
 new ProductController();
@@ -0,0 +1,179 @@
+const ShoppingListRepository = require("../repositories/ShoppingListRepository");
+const ProductRepository = require("../repositories/ProductRepository");
+
+class ShoppingListController {
+
+    index(req, res) {
+        
+        const lists = ShoppingListRepository.getByHousehold(
+            req.user.household_id
+        );
+
+        res.locals.title = "Boodschappenlijsten";
+
+        res.render("lists/index", {
+            lists,
+            user: req.user
+        });
+
+    }
+
+    create(req, res) {
+        
+        const { name } = req.body;
+
+        if (!name || name.trim().length === 0) {
+            req.flash("error", "Geef een naam op");
+            return res.redirect("/lists");
+        }
+
+        // Check if user has a household
+        if (!req.user || !req.user.household_id) {
+            req.flash("error", "Je bent niet aan een huishouden gekoppeld");
+            return res.redirect("/lists");
+        }
+
+        ShoppingListRepository.create({
+            household_id: req.user.household_id,
+            name: name.trim()
+        });
+
+        req.flash("success", "Boodschappenlijst aangemaakt");
+        res.redirect("/lists");
+
+    }
+
+    show(req, res) {
+        
+        const { id } = req.params;
+
+        const list = ShoppingListRepository.getById(id);
+
+        if (!list) {
+            return res.status(404).render("errors/404");
+        }
+
+        if (list.household_id !== req.user.household_id) {
+            return res.status(403).render("errors/404");
+        }
+
+        const items = ShoppingListRepository.getItems(id);
+
+        res.locals.title = list.name;
+
+        res.render("lists/show", {
+            list,
+            items,
+            user: req.user
+        });
+
+    }
+
+    addItem(req, res) {
+        
+        const { id } = req.params;
+        const { product_id, amount } = req.body;
+
+        const list = ShoppingListRepository.getById(id);
+
+        if (!list) {
+            return res.status(404).json({ error: "Lijst niet gevonden" });
+        }
+
+        if (list.household_id !== req.user.household_id) {
+            return res.status(403).json({ error: "Niet gemachtigd" });
+        }
+
+        const product = ProductRepository.findById(product_id);
+
+        if (!product) {
+            return res.status(404).json({ error: "Product niet gevonden" });
+        }
+
+        const quantity = Number(amount);
+        if (!Number.isFinite(quantity) || quantity <= 0 || quantity > 999) {
+            req.flash("error", "Vul een geldige hoeveelheid in");
+            return res.redirect(`/lists/${id}`);
+        }
+
+        const item = ShoppingListRepository.addItem({
+            list_id: id,
+            product_id,
+            amount: quantity
+        });
+
+        req.app.locals.io.to(`household:${req.user.household_id}`).emit("item:added", {
+            listId: Number(id)
+        });
+
+        req.flash("success", "Product toegevoegd");
+
+        if (req.xhr || req.headers.accept?.includes("application/json")) {
+            return res.json({ success: true, item });
+        }
+
+        res.redirect(`/lists/${id}`);
+
+    }
+
+    toggleItem(req, res) {
+        
+        const { id, itemId } = req.params;
+
+        const list = ShoppingListRepository.getById(id);
+
+        if (!list || list.household_id !== req.user.household_id) {
+            return res.status(403).json({ error: "Niet gemachtigd" });
+        }
+
+        if (!ShoppingListRepository.findItem(id, itemId)) {
+            return res.status(404).json({ error: "Item niet gevonden" });
+        }
+
+        ShoppingListRepository.toggleItem(itemId);
+
+        req.app.locals.io.to(`household:${req.user.household_id}`).emit("item:toggled", {
+            listId: Number(id), itemId: Number(itemId)
+        });
+
+        if (req.xhr || req.headers.accept?.includes("application/json")) {
+            return res.json({ success: true });
+        }
+
+        res.redirect(`/lists/${id}`);
+
+    }
+
+    deleteItem(req, res) {
+        
+        const { id, itemId } = req.params;
+
+        const list = ShoppingListRepository.getById(id);
+
+        if (!list || list.household_id !== req.user.household_id) {
+            return res.status(403).json({ error: "Niet gemachtigd" });
+        }
+
+        if (!ShoppingListRepository.findItem(id, itemId)) {
+            return res.status(404).json({ error: "Item niet gevonden" });
+        }
+
+        ShoppingListRepository.deleteItem(itemId);
+
+        req.app.locals.io.to(`household:${req.user.household_id}`).emit("item:removed", {
+            listId: Number(id), itemId: Number(itemId)
+        });
+
+        req.flash("success", "Product verwijderd");
+
+        if (req.method === "DELETE" || req.xhr || req.headers.accept?.includes("application/json")) {
+            return res.json({ success: true });
+        }
+
+        res.redirect(`/lists/${id}`);
+
+    }
+
+}
+
+module.exports = new ShoppingListController();
@@ -49,16 +49,29 @@ const products = [
 ];


+const insertCategory = db.prepare(`
+
+INSERT INTO categories (name, icon)
+SELECT ?, ?
+WHERE NOT EXISTS (SELECT 1 FROM categories WHERE name = ?)
+
+`);
+
+const seedCategories = db.transaction(() => {
+
+    for (const category of categories) {
+        insertCategory.run(category[0], category[1], category[0]);
+    }
+
+});
+
+seedCategories();
+
 const insertProduct = db.prepare(`

-INSERT OR IGNORE INTO products
-
-(
-    name,
-    category_id
-)
-
-VALUES (?,?)
+INSERT INTO products (name, category_id)
+SELECT ?, ?
+WHERE NOT EXISTS (SELECT 1 FROM products WHERE name = ?)

 `);

@@ -70,7 +83,7 @@ const seedProducts = db.transaction(() => {

    for(const product of products){

-        insertProduct.run(product);
+        insertProduct.run(product[0], product[1], product[0]);

    }

@@ -80,28 +93,5 @@ const seedProducts = db.transaction(() => {

 seedProducts();

-const insert = db.prepare(`
-
-INSERT OR IGNORE INTO categories
-(name, icon)
-
-VALUES (?,?)
-
-`);
-
-
-const seed = db.transaction(() => {
-
-    for (const category of categories) {
-
-        insert.run(category);
-
-    }
-
-});
-
-
-seed();
-

 console.log("Seed voltooid.");
@@ -3,6 +3,10 @@ module.exports = function(req, res, next) {

    if (!req.session.userId) {

+        if (req.originalUrl.startsWith("/api/")) {
+            return res.status(401).json({ error: "Je bent niet ingelogd" });
+        }
+
        return res.redirect("/login");

    }
@@ -1,12 +1,43 @@
 body {
-
-    background-color: #f6f8fb;
-
+    background: #f5f7fb;
 }

+.navbar {
+    margin-bottom: 25px;
+}

-.navbar-brand {
+.card {
+    border: 0;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,.06);
+}

+.page-title {
    font-weight: 700;
+}
+
+.alert {
+
+    animation: fadeIn .3s ease;
+
+}
+
+@keyframes fadeIn {
+
+    from{
+
+        opacity:0;
+
+        transform:translateY(-10px);
+
+    }
+
+    to{
+
+        opacity:1;
+
+        transform:translateY(0);
+
+    }

 }
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title">
+  <title id="title">PantryHub</title>
+  <rect width="256" height="256" rx="48" fill="#206bc4"/>
+  <path fill="#fff" d="M59 69h18l13 72h106l17-53H94l-5-26H59zm39 88a17 17 0 1 0 0 34 17 17 0 0 0 0-34zm87 0a17 17 0 1 0 0 34 17 17 0 0 0 0-34z"/>
+</svg>
@@ -0,0 +1,48 @@
+// Socket.IO Client
+const socket = typeof io === 'function' ? io() : null;
+
+// Join household room if available
+const householdId = document.querySelector('[data-household-id]')?.dataset.householdId;
+if (socket && householdId) {
+    socket.emit('join:household', householdId);
+}
+
+// Real-time list updates
+socket?.on('list:updated', (data) => {
+    console.log('📝 Lijst bijgewerkt:', data);
+    window.location.reload();
+});
+
+socket?.on('item:added', (data) => {
+    console.log('➕ Item toegevoegd:', data);
+    window.location.reload();
+});
+
+socket?.on('item:toggled', (data) => {
+    console.log('✓ Item afgevinkt:', data);
+    window.location.reload();
+});
+
+socket?.on('item:removed', (data) => {
+    console.log('✕ Item verwijderd:', data);
+    window.location.reload();
+});
+
+// Auto-remove alerts
+document.addEventListener("DOMContentLoaded", () => {
+
+    setTimeout(() => {
+
+        document
+            .querySelectorAll(".alert")
+            .forEach(alert => {
+
+                alert.remove();
+
+            });
+
+    }, 4000);
+
+});
+
+console.log('✅ PantryHub app geladen');
@@ -0,0 +1,43 @@
+{
+    "name": "PantryHub",
+    "short_name": "PantryHub",
+    "description": "Realtime boodschappenapp",
+    "start_url": "/",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#0066cc",
+    "icons": [
+        {
+            "src": "/icons/icon.svg",
+            "sizes": "any",
+            "type": "image/svg+xml",
+            "purpose": "any"
+        },
+        {
+            "src": "/icons/icon.svg",
+            "sizes": "any",
+            "type": "image/svg+xml",
+            "purpose": "any"
+        }
+    ],
+    "shortcuts": [
+        {
+            "name": "Lijsten",
+            "short_name": "Lijsten",
+            "description": "Bekijk je boodschappenlijsten",
+            "url": "/lists",
+            "icons": [
+                {
+                    "src": "/icons/icon.svg",
+                    "sizes": "any",
+                    "type": "image/svg+xml"
+                }
+            ]
+        }
+    ],
+    "categories": [
+        "shopping",
+        "lifestyle"
+    ]
+}
@@ -0,0 +1,98 @@
+const CACHE_NAME = 'pantryhub-v2';
+const urlsToCache = [
+    '/',
+    '/css/style.css',
+    '/js/app.js',
+    '/manifest.json',
+    '/icons/icon.svg'
+];
+
+// Install event
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(urlsToCache).catch(err => {
+                console.log('Cache addAll error:', err);
+            });
+        })
+    );
+});
+
+// Activate event
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+});
+
+// Fetch event
+self.addEventListener('fetch', (event) => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
+    // Browser extensions and third-party resources cannot be stored by Cache API.
+    // Only handle same-origin HTTP(S) requests belonging to PantryHub.
+    const url = new URL(event.request.url);
+    if (!['http:', 'https:'].includes(url.protocol) || url.origin !== self.location.origin) {
+        return;
+    }
+
+    // For API calls, use network-first strategy
+    if (event.request.url.includes('/api/')) {
+        event.respondWith(
+            fetch(event.request)
+                .then(response => {
+                    const responseClone = response.clone();
+                    caches.open(CACHE_NAME).then(cache => {
+                        cache.put(event.request, responseClone);
+                    });
+                    return response;
+                })
+                .catch(() => {
+                    return caches.match(event.request);
+                })
+        );
+        return;
+    }
+
+    // For other requests, use cache-first strategy
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => {
+                if (response) {
+                    return response;
+                }
+                return fetch(event.request).then(response => {
+                    if (!response || response.status !== 200 || response.type !== 'basic') {
+                        return response;
+                    }
+                    const responseClone = response.clone();
+                    caches.open(CACHE_NAME)
+                        .then(cache => {
+                            cache.put(event.request, responseClone);
+                        });
+                    return response;
+                });
+            })
+            .catch(() => {
+                // Return offline page or empty response
+                return new Response('Offline - pagina niet beschikbaar', {
+                    status: 503,
+                    statusText: 'Service Unavailable',
+                    headers: new Headers({
+                        'Content-Type': 'text/plain'
+                    })
+                });
+            })
+    );
+});
@@ -0,0 +1,108 @@
+const db = require("../config/database");
+
+class ShoppingListRepository {
+
+    getByHousehold(householdId) {
+        
+        return db.prepare(`
+            SELECT 
+                shopping_lists.*,
+                COUNT(shopping_list_items.id) as item_count,
+                SUM(CASE WHEN shopping_list_items.checked = 1 THEN 1 ELSE 0 END) as checked_count
+            FROM shopping_lists
+            LEFT JOIN shopping_list_items 
+                ON shopping_lists.id = shopping_list_items.list_id
+            WHERE shopping_lists.household_id = ?
+            AND shopping_lists.archived = 0
+            GROUP BY shopping_lists.id
+            ORDER BY shopping_lists.created_at DESC
+        `).all(householdId);
+
+    }
+
+    getById(id) {
+        
+        return db.prepare(`
+            SELECT * FROM shopping_lists WHERE id = ?
+        `).get(id);
+
+    }
+
+    create(data) {
+        
+        return db.prepare(`
+            INSERT INTO shopping_lists
+            (household_id, name)
+            VALUES (?, ?)
+        `).run(data.household_id, data.name);
+
+    }
+
+    getItems(listId) {
+        
+        return db.prepare(`
+            SELECT 
+                shopping_list_items.*,
+                products.name as product_name,
+                categories.name as category_name,
+                categories.icon as category_icon
+            FROM shopping_list_items
+            JOIN products ON products.id = shopping_list_items.product_id
+            LEFT JOIN categories ON categories.id = products.category_id
+            WHERE shopping_list_items.list_id = ?
+            ORDER BY shopping_list_items.checked ASC, shopping_list_items.sort_order ASC
+        `).all(listId);
+
+    }
+
+    addItem(data) {
+        
+        return db.prepare(`
+            INSERT INTO shopping_list_items
+            (list_id, product_id, amount)
+            VALUES (?, ?, ?)
+        `).run(data.list_id, data.product_id, data.amount);
+
+    }
+
+    findItem(listId, itemId) {
+
+        return db.prepare(`
+            SELECT id FROM shopping_list_items
+            WHERE id = ? AND list_id = ?
+        `).get(itemId, listId);
+
+    }
+
+    toggleItem(itemId) {
+        
+        return db.prepare(`
+            UPDATE shopping_list_items
+            SET checked = CASE WHEN checked = 1 THEN 0 ELSE 1 END
+            WHERE id = ?
+        `).run(itemId);
+
+    }
+
+    deleteItem(itemId) {
+        
+        return db.prepare(`
+            DELETE FROM shopping_list_items
+            WHERE id = ?
+        `).run(itemId);
+
+    }
+
+    archiveList(listId) {
+        
+        return db.prepare(`
+            UPDATE shopping_lists
+            SET archived = 1
+            WHERE id = ?
+        `).run(listId);
+
+    }
+
+}
+
+module.exports = new ShoppingListRepository();
@@ -28,6 +28,18 @@ class UserRepository {

    }

+    getHouseholdMembers(householdId) {
+
+        return db.prepare(`
+            SELECT users.id, users.name, users.email, household_members.role
+            FROM household_members
+            JOIN users ON users.id = household_members.user_id
+            WHERE household_members.household_id = ?
+            ORDER BY CASE household_members.role WHEN 'OWNER' THEN 0 ELSE 1 END, users.name
+        `).all(householdId);
+
+    }
+

 }

@@ -0,0 +1,43 @@
+const router = require("express").Router();
+
+const auth = require("../middleware/auth");
+
+const ProductRepository = require("../repositories/ProductRepository");
+const ShoppingListRepository = require("../repositories/ShoppingListRepository");
+
+// Get all products
+router.get("/products", auth, (req, res) => {
+
+    const products = ProductRepository.getAll();
+
+    res.json(products);
+
+});
+
+// Get shopping lists for household
+router.get("/lists", auth, (req, res) => {
+
+    const lists = ShoppingListRepository.getByHousehold(
+        req.user.household_id
+    );
+
+    res.json(lists);
+
+});
+
+// Get shopping list items
+router.get("/lists/:id/items", auth, (req, res) => {
+
+    const list = ShoppingListRepository.getById(req.params.id);
+
+    if (!list || list.household_id !== req.user.household_id) {
+        return res.status(403).json({ error: "Not authorized" });
+    }
+
+    const items = ShoppingListRepository.getItems(req.params.id);
+
+    res.json(items);
+
+});
+
+module.exports = router;
@@ -4,9 +4,25 @@ const router = require("express").Router();
 const AuthController =
 require("../controllers/AuthController");

+const HomeController =
+require("../controllers/HomeController");

+
+// Home page
+router.get(
+    "/home",
+    HomeController.index
+);
+
+// Register
 router.get(
    "/register",
+    (req, res, next) => {
+        if (req.user) {
+            return res.redirect("/");
+        }
+        next();
+    },
    AuthController.registerForm
 );

@@ -17,9 +33,15 @@ router.post(
 );


-
+// Login
 router.get(
    "/login",
+    (req, res, next) => {
+        if (req.user) {
+            return res.redirect("/");
+        }
+        next();
+    },
    AuthController.loginForm
 );

@@ -30,7 +52,7 @@ router.post(
 );


-
+// Logout
 router.get(
    "/logout",
    AuthController.logout
@@ -11,8 +11,8 @@ require("../controllers/HouseholdController");
 const ProductController =
 require("../controllers/ProductController");

-console.log("AUTH:", auth);
-console.log("DASHBOARD INDEX:", DashboardController.index);
+const ShoppingListController =
+require("../controllers/ShoppingListController");

 router.get(
    "/",
@@ -20,6 +20,42 @@ router.get(
    DashboardController.index
 );

+router.get(
+    "/lists",
+    auth,
+    ShoppingListController.index.bind(ShoppingListController)
+);
+
+router.post(
+    "/lists",
+    auth,
+    ShoppingListController.create.bind(ShoppingListController)
+);
+
+router.get(
+    "/lists/:id",
+    auth,
+    ShoppingListController.show.bind(ShoppingListController)
+);
+
+router.post(
+    "/lists/:id/items",
+    auth,
+    ShoppingListController.addItem.bind(ShoppingListController)
+);
+
+router.post(
+    "/lists/:id/items/:itemId/toggle",
+    auth,
+    ShoppingListController.toggleItem.bind(ShoppingListController)
+);
+
+router.delete(
+    "/lists/:id/items/:itemId",
+    auth,
+    ShoppingListController.deleteItem.bind(ShoppingListController)
+);
+
 router.get(
    "/household",
    auth,
@@ -27,12 +63,15 @@ router.get(
 );

 router.get(
-
    "/products",
-
    auth,
-
    ProductController.index.bind(ProductController)
-
 );
+
+router.post(
+    "/products",
+    auth,
+    ProductController.create.bind(ProductController)
+);
+
 module.exports = router;
@@ -0,0 +1,55 @@
+const UserRepository = require("../repositories/UserRepository");
+
+module.exports = function(io) {
+
+    io.on("connection", (socket) => {
+
+        const userId = socket.request.session?.userId;
+        const user = userId && UserRepository.findById(userId);
+
+        if (!user || !user.household_id) {
+            socket.disconnect(true);
+            return;
+        }
+
+        socket.join(`household:${user.household_id}`);
+
+        console.log("🔌 Gebruiker verbonden:", socket.id);
+
+        socket.on("join:household", () => {
+            // The room is derived from the authenticated session above.
+        });
+
+        socket.on("list:updated", (data) => {
+
+            io.to(`household:${data.householdId}`).emit("list:updated", data);
+
+        });
+
+        socket.on("item:added", (data) => {
+
+            io.to(`household:${data.householdId}`).emit("item:added", data);
+
+        });
+
+        socket.on("item:toggled", (data) => {
+
+            io.to(`household:${data.householdId}`).emit("item:toggled", data);
+
+        });
+
+        socket.on("item:removed", (data) => {
+
+            io.to(`household:${data.householdId}`).emit("item:removed", data);
+
+        });
+
+        socket.on("disconnect", () => {
+
+            console.log("❌ Gebruiker verbroken:", socket.id);
+
+        });
+
+    });
+
+};
@@ -1,54 +1,80 @@
-<div class="card">
+<div class="row justify-content-center">
+
+    <div class="col-md-5">
+
+        <div class="card card-md">

            <div class="card-body">

+                <div class="text-center mb-4">

-<h2>
-Inloggen
-</h2>
+                    <h2>🛒 PantryHub</h2>

+                    <p class="text-secondary">Inloggen op je account</p>
+
+                </div>

                <form method="post">

-
                    <div class="mb-3">

-<label class="form-label">
-Email
-</label>
+                        <label class="form-label">E-mailadres</label>

                        <input 
-class="form-control"
                            type="email" 
+                            class="form-control" 
                            name="email" 
+                            placeholder="jouw@email.com"
                            required>

                    </div>

+                    <div class="mb-2">

-
-<div class="mb-3">
-
-<label class="form-label">
-Wachtwoord
-</label>
+                        <label class="form-label">Wachtwoord</label>

                        <input 
-class="form-control"
                            type="password" 
+                            class="form-control" 
                            name="password" 
+                            placeholder="Wachtwoord"
                            required>

                    </div>

+                    <div class="form-footer">

-
-<button class="btn btn-primary">
+                        <button class="btn btn-primary w-100">

                            Inloggen

                        </button>

+                    </div>
+
+                </form>
+
+                <div class="text-center">
+
+                    <p class="text-secondary">
+
+                        Nog geen account?
+
+                        <a href="/register">Registreren</a>
+
+                    </p>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+

 </form>

@@ -1,72 +1,87 @@
-<div class="card">
+<div class="row justify-content-center">
+
+    <div class="col-md-5">
+
+        <div class="card card-md">

            <div class="card-body">

+                <div class="text-center mb-4">

-<h2>
-Account maken
-</h2>
+                    <h2>🛒 PantryHub</h2>

+                    <p class="text-secondary">Account aanmaken</p>
+
+                </div>

                <form method="post">

-
                    <div class="mb-3">

-<label class="form-label">
-Naam
-</label>
+                        <label class="form-label">Volledige naam</label>

                        <input 
+                            type="text" 
                            class="form-control" 
                            name="name" 
+                            placeholder="Jouw naam"
                            required>

                    </div>

-
-
                    <div class="mb-3">

-<label class="form-label">
-Email
-</label>
+                        <label class="form-label">E-mailadres</label>

                        <input 
-class="form-control"
                            type="email" 
+                            class="form-control" 
                            name="email" 
+                            placeholder="jouw@email.com"
                            required>

                    </div>

+                    <div class="mb-2">

-
-<div class="mb-3">
-
-<label class="form-label">
-Wachtwoord
-</label>
+                        <label class="form-label">Wachtwoord</label>

                        <input 
-class="form-control"
                            type="password" 
+                            class="form-control" 
                            name="password" 
+                            placeholder="Wachtwoord"
                            required>

                    </div>

+                    <div class="form-footer">

+                        <button class="btn btn-primary w-100">

-<button class="btn btn-primary">
-
-Registreren
+                            Account aanmaken

                        </button>

+                    </div>

                </form>

+                <div class="text-center">
+
+                    <p class="text-secondary">
+
+                        Al een account? 
+
+                        <a href="/login">Inloggen</a>
+
+                    </p>
+
+                </div>
+
+            </div>
+
+        </div>

    </div>

@@ -1,17 +1,116 @@
 <div class="mb-4">

-<h1>
-Welkom <%= user.name %> 👋
-</h1>
-
+    <h1>Welkom <%= user.name %> 👋</h1>

    <p class="text-secondary">
-
-Huishouden:
-<strong>
-<%= user.household_name || "Geen huishouden" %>
-</strong>
-
+        Huishouden: <strong><%= user.household_name || "Geen huishouden" %></strong>
    </p>

 </div>
+
+<div class="row">
+
+    <div class="col-md-6">
+
+        <div class="card">
+
+            <div class="card-body">
+
+                <h3 class="card-title">📊 Statistieken</h3>
+
+                <div class="mb-3">
+
+                    <div class="mb-2">Boodschappenlijsten: <strong><%= totalLists %></strong></div>
+
+                    <% if(lists.length > 0) { %>
+
+                        <div>Gemiddeld progress: 
+                            <% 
+                                const avg = lists.length > 0 
+                                    ? Math.round(lists.reduce((sum, l) => sum + (l.checked_count || 0) / (l.item_count || 1), 0) / lists.length * 100)
+                                    : 0;
+                            %>
+                            <strong><%= avg %>%</strong>
+                        </div>
+
+                    <% } %>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="col-md-6">
+
+        <div class="card">
+
+            <div class="card-body">
+
+                <h3 class="card-title">🔗 Snelle links</h3>
+
+                <a href="/lists" class="btn btn-primary btn-block mb-2">
+
+                    🛒 Naar boodschappenlijsten
+
+                </a>
+
+                <a href="/household" class="btn btn-secondary btn-block">
+
+                    👨‍👩‍👧 Huishouden beheren
+
+                </a>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<% if(lists.length > 0) { %>
+
+    <div class="row mt-4">
+
+        <div class="col-md-12">
+
+            <div class="card">
+
+                <div class="card-header">
+
+                    <h3 class="card-title">📝 Recente lijsten</h3>
+
+                </div>
+
+                <div class="list-group">
+
+                    <% lists.forEach(list => { %>
+
+                        <a href="/lists/<%= list.id %>" class="list-group-item list-group-item-action">
+
+                            <div class="d-flex justify-content-between">
+
+                                <strong><%= list.name %></strong>
+
+                                <small class="text-secondary">
+                                    <%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan
+                                </small>
+
+                            </div>
+
+                        </a>
+
+                    <% }) %>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+<% } %>
@@ -1,30 +1,87 @@
+<div class="page-header mb-4">
+
+    <h1>👨‍👩‍👧 <%= user.household_name %></h1>
+
+    <p class="text-secondary">Rol: <strong><%= user.role %></strong></p>
+
+</div>
+
+<div class="row">
+
+    <div class="col-md-8">
+
        <div class="card">

+            <div class="card-header">
+
+                <h3 class="card-title">Leden</h3>
+
+            </div>
+
+            <div class="list-group">
+
+                <% members.forEach(member => { %>
+                <div class="list-group-item">
+
+                    <div class="d-flex justify-content-between">
+
+                        <div>
+                            <strong><%= member.name %></strong>
+                            <div class="text-secondary small"><%= member.email %></div>
+                        </div>
+
+                        <span class="badge bg-primary"><%= member.role %></span>
+
+                    </div>
+
+                </div>
+                <% }) %>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="col-md-4">
+
+        <div class="card">
+
+            <div class="card-header">
+
+                <h3 class="card-title">Instellingen</h3>
+
+            </div>
+
            <div class="card-body">

+                <% if(user.role === 'OWNER') { %>

-<h2>
-<%= user.household_name %>
-</h2>
+                    <div class="mb-3">

+                        <label class="form-label">Lid uitnodigen</label>

-<p>
+                        <p class="text-secondary small">Delen van deze code met anderen:</p>

-Rol:
+                        <div class="input-group">

-<strong>
-<%= user.role %>
-</strong>
+                            <input type="text" class="form-control" value="HOUSEHOLD_<%= user.household_id %>" readonly>

-</p>
+                            <button class="btn btn-outline-primary" onclick="navigator.clipboard.writeText('HOUSEHOLD_<%= user.household_id %>')">

-
-<button class="btn btn-primary">
-
-Lid uitnodigen
+                                Kopieren

                            </button>

+                        </div>
+
+                    </div>
+
+                <% } %>
+
+            </div>
+
+        </div>

    </div>

@@ -1,5 +1,5 @@
-<!doctype html>
-<html lang="nl">
+<!DOCTYPE html>
+<html lang="nl" data-household-id="<%= user?.household_id || '' %>">

 <head>

@@ -7,36 +7,25 @@

 </head>

-
 <body>

-
-<div class="page">
-
    <%- include("../partials/navbar") %>

+    <main class="container-xl mt-4">

-    <div class="page-wrapper">
-
-
-        <div class="container-xl">
+        <%- include("../partials/flash") %>

        <%- body %>

-        </div>
-
+    </main>

    <%- include("../partials/footer") %>

+    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.bundle.min.js"></script>
    
-    </div>
-
-
-</div>
-
-
-<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
+    <script src="/socket.io/socket.io.js"></script>
    
+    <script src="/js/app.js"></script>

 </body>

@@ -0,0 +1,96 @@
+<div class="page-header mb-4">
+
+    <h1>🛒 Boodschappenlijsten</h1>
+
+</div>
+
+<div class="row">
+
+    <div class="col-md-8">
+
+        <div class="card">
+
+            <div class="card-body">
+
+                <% if(lists.length === 0) { %>
+
+                    <p class="text-secondary">Je hebt nog geen boodschappenlijsten. Maak er een aan!</p>
+
+                <% } else { %>
+
+                    <div class="list-group">
+
+                        <% lists.forEach(list => { %>
+
+                            <a href="/lists/<%= list.id %>" class="list-group-item list-group-item-action">
+
+                                <div class="d-flex justify-content-between">
+
+                                    <strong><%= list.name %></strong>
+
+                                    <small class="text-secondary">
+                                        <%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan
+                                    </small>
+
+                                </div>
+
+                                <small class="text-muted">
+                                    Aangemaakt <%= new Date(list.created_at).toLocaleDateString('nl-NL') %>
+                                </small>
+
+                            </a>
+
+                        <% }) %>
+
+                    </div>
+
+                <% } %>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="col-md-4">
+
+        <div class="card">
+
+            <div class="card-header">
+
+                <h3 class="card-title">Nieuwe lijst</h3>
+
+            </div>
+
+            <div class="card-body">
+
+                <form method="post" action="/lists">
+
+                    <div class="mb-3">
+
+                        <label class="form-label">Lijstnaam</label>
+
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            name="name" 
+                            placeholder="bijv. Weekboodschappen"
+                            required>
+
+                    </div>
+
+                    <button class="btn btn-primary w-100">
+
+                        Lijst aanmaken
+
+                    </button>
+
+                </form>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
@@ -0,0 +1,221 @@
+<div class="page-header mb-4">
+
+    <a href="/lists" class="btn btn-link btn-icon">&larr;</a>
+
+    <h1><%= list.name %></h1>
+
+</div>
+
+<div class="row">
+
+    <div class="col-md-8">
+
+        <div class="card">
+
+            <div class="card-body">
+
+                <% if(items.length === 0) { %>
+
+                    <p class="text-secondary">Nog geen producten op de lijst.</p>
+
+                <% } else { %>
+
+                    <div class="list-group">
+
+                        <% items.forEach(item => { %>
+
+                            <div class="list-group-item">
+
+                                <div class="d-flex align-items-center">
+
+                                    <form method="post" action="/lists/<%= list.id %>/items/<%= item.id %>/toggle" style="display: inline;">
+
+                                        <input type="hidden" name="_method" value="POST">
+
+                                        <button class="btn btn-sm" style="border: none; background: none; padding: 0; margin-right: 10px;" 
+                                                onclick="this.closest('form').submit(); return false;">
+
+                                            <i class="icon icon-check" style="font-size: 20px; <% if(item.checked) { %>color: #00a651;<% } else { %>color: #ccc;<% } %>"></i>
+
+                                        </button>
+
+                                    </form>
+
+                                    <div class="flex-grow-1">
+
+                                        <strong <% if(item.checked) { %>style="text-decoration: line-through; color: #999;"<% } %>>
+
+                                            <%= item.product_name %>
+
+                                        </strong>
+
+                                        <% if(item.amount && item.amount !== 1) { %>
+
+                                            <span class="badge bg-info"><%= item.amount %></span>
+
+                                        <% } %>
+
+                                        <br>
+
+                                        <small class="text-secondary">
+
+                                            <%= item.category_icon || "" %> <%= item.category_name || "Geen categorie" %>
+
+                                        </small>
+
+                                    </div>
+
+                                    <form class="delete-item-form" action="/lists/<%= list.id %>/items/<%= item.id %>" style="display: inline;">
+
+                                        <button class="btn btn-sm btn-link text-danger" style="border: none;">✕</button>
+
+                                    </form>
+
+                                </div>
+
+                            </div>
+
+                        <% }) %>
+
+                    </div>
+
+                <% } %>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="col-md-4">
+
+        <div class="card">
+
+            <div class="card-header">
+
+                <h3 class="card-title">Product toevoegen</h3>
+
+            </div>
+
+            <div class="card-body">
+
+                <form method="post" action="/lists/<%= list.id %>/items" id="addItemForm">
+
+                    <div class="mb-3">
+
+                        <label class="form-label">Product</label>
+
+                        <input type="text" id="productSearch" class="form-control" placeholder="Zoek product..." autocomplete="off">
+
+                        <div id="productList" class="list-group mt-2" style="display: none; max-height: 300px; overflow-y: auto;"></div>
+
+                        <input type="hidden" id="productId" name="product_id" required>
+
+                        <small id="selectedProduct" class="text-secondary"></small>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label class="form-label">Hoeveelheid</label>
+
+                        <input 
+                            type="number" 
+                            class="form-control" 
+                            name="amount" 
+                            value="1" 
+                            step="0.5"
+                            min="0.5">
+
+                    </div>
+
+                    <button class="btn btn-primary w-100" type="submit" id="submitBtn" disabled>
+
+                        Toevoegen
+
+                    </button>
+
+                </form>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<script>
+let allProducts = [];
+
+// Load products from API
+fetch('/api/products')
+    .then(r => r.json())
+    .then(products => {
+        allProducts = products;
+    });
+
+// Product search
+document.getElementById('productSearch').addEventListener('input', function() {
+    const search = this.value.toLowerCase();
+    const listEl = document.getElementById('productList');
+    
+    if (!search) {
+        listEl.style.display = 'none';
+        return;
+    }
+    
+    const filtered = allProducts.filter(p => 
+        p.name.toLowerCase().includes(search) || 
+        (p.category_name && p.category_name.toLowerCase().includes(search))
+    );
+    
+    listEl.replaceChildren();
+
+    filtered.forEach(product => {
+        const category = `${product.category_icon || ''} ${product.category_name || 'Geen categorie'}`.trim();
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'list-group-item list-group-item-action text-start';
+
+        const name = document.createElement('strong');
+        name.textContent = product.name;
+        const categoryLabel = document.createElement('small');
+        categoryLabel.className = 'text-secondary';
+        categoryLabel.textContent = category;
+
+        button.append(name, document.createElement('br'), categoryLabel);
+        button.addEventListener('click', () => selectProduct(product.id, product.name, category));
+        listEl.append(button);
+    });
+    
+    listEl.style.display = 'block';
+});
+
+function selectProduct(id, name, category) {
+    document.getElementById('productId').value = id;
+    document.getElementById('productSearch').value = '';
+    document.getElementById('selectedProduct').textContent = name + ' - ' + category;
+    document.getElementById('productList').style.display = 'none';
+    document.getElementById('submitBtn').disabled = false;
+}
+
+// Handle form deletion
+document.querySelectorAll('.delete-item-form').forEach(form => {
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if(confirm('Zeker weten?')) {
+            fetch(form.action, { method: 'DELETE' })
+                .then(r => r.json())
+                .then(() => window.location.reload());
+        }
+    });
+});
+
+// Close product list when clicking outside
+document.addEventListener('click', function(e) {
+    if (!e.target.closest('#productSearch') && !e.target.closest('#productList')) {
+        document.getElementById('productList').style.display = 'none';
+    }
+});
+</script>
@@ -0,0 +1,66 @@
+<% if(success.length) { %>
+
+<div class="alert alert-success alert-dismissible" role="alert">
+
+    <%= success[0] %>
+
+    <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert">
+    </button>
+
+</div>
+
+<% } %>
+
+
+<% if(error.length) { %>
+
+<div class="alert alert-danger alert-dismissible" role="alert">
+
+    <%= error[0] %>
+
+    <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert">
+    </button>
+
+</div>
+
+<% } %>
+
+
+<% if(info.length) { %>
+
+<div class="alert alert-info alert-dismissible" role="alert">
+
+    <%= info[0] %>
+
+    <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert">
+    </button>
+
+</div>
+
+<% } %>
+
+
+<% if(warning.length) { %>
+
+<div class="alert alert-warning alert-dismissible" role="alert">
+
+    <%= warning[0] %>
+
+    <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert">
+    </button>
+
+</div>
+
+<% } %>
@@ -2,17 +2,29 @@

 <meta name="viewport" content="width=device-width, initial-scale=1">

+<meta name="theme-color" content="#0066cc">
+
+<meta name="description" content="PantryHub - Realtime boodschappenapp">

 <title>
    <%= title || "PantryHub" %>
 </title>

+<link rel="manifest" href="/manifest.json">

-<link
-href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css"
-rel="stylesheet">
+<link rel="icon" href="/icons/icon.svg" type="image/svg+xml">

+<link href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet">

-<link
-href="/css/style.css"
-rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/tabler-icons.css" rel="stylesheet">
+
+<link href="/css/style.css" rel="stylesheet">
+
+<script>
+// Register service worker
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js')
+        .then(reg => console.log('✅ Service Worker registered'))
+        .catch(err => console.log('❌ Service Worker registration failed:', err));
+}
+</script>
@@ -1,13 +1,98 @@
-<header class="navbar navbar-expand-md navbar-light d-print-none">
+<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">

    <div class="container-xl">

-<a class="navbar-brand" href="/">
-
+        <a class="navbar-brand fw-bold" href="/">
            🛒 PantryHub
+        </a>
+
+        <button class="navbar-toggler"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#navbarMenu">
+
+            <span class="navbar-toggler-icon"></span>
+
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarMenu">
+
+            <% if (user) { %>
+
+            <ul class="navbar-nav me-auto">
+
+                <li class="nav-item">
+                    <a class="nav-link" href="/">Dashboard</a>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link" href="/lists">🛒 Lijsten</a>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link" href="/products">📦 Producten</a>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link" href="/household">👨‍👩‍👧 Huishouden</a>
+                </li>
+
+            </ul>
+
+            <ul class="navbar-nav">
+
+                <li class="nav-item dropdown">
+
+                    <a class="nav-link dropdown-toggle"
+                       href="#"
+                       data-bs-toggle="dropdown">
+
+                        👤 <%= user.name %>

                    </a>

+                    <div class="dropdown-menu dropdown-menu-end">
+
+                        <span class="dropdown-item-text text-muted">
+                            <%= user.household_name %>
+                        </span>
+
+                        <div class="dropdown-divider"></div>
+
+                        <a class="dropdown-item" href="/profile">
+                            Profiel
+                        </a>
+
+                        <a class="dropdown-item" href="/settings">
+                            Instellingen
+                        </a>
+
+                        <div class="dropdown-divider"></div>
+
+                        <a class="dropdown-item text-danger"
+                           href="/logout">
+                            Uitloggen
+                        </a>
+
+                    </div>
+
+                </li>
+
+            </ul>
+
+            <% } else { %>
+
+            <div class="ms-auto">
+
+                <a href="/login" class="btn btn-primary">
+                    Inloggen
+                </a>
+
+            </div>
+
+            <% } %>
+
+        </div>

    </div>

@@ -1,70 +1,148 @@
 <div class="page-header mb-4">

-<h1>
-
-📦 Producten
-
-</h1>
+    <h1>📦 Producten</h1>

 </div>

+<div class="row">

+    <div class="col-md-8">

        <div class="card">

            <div class="card-body">

-
                <% if(products.length === 0) { %>

+                    <p class="text-secondary">Nog geen producten.</p>

-<p>
-
-Nog geen producten.
-
-</p>
-
-
-<% } %>
-
-
+                <% } else { %>

                    <div class="list-group">

+                        <% 
+                            const grouped = {};
+                            products.forEach(p => {
+                                const cat = p.category_name || 'Overig';
+                                if (!grouped[cat]) grouped[cat] = [];
+                                grouped[cat].push(p);
+                            });
+                        %>

-<% products.forEach(product => { %>
+                        <% Object.keys(grouped).sort().forEach(cat => { %>

+                            <div class="list-group-item list-group-item-info">
+
+                                <strong><%= cat %></strong>
+
+                            </div>
+
+                            <% grouped[cat].forEach(product => { %>

                                <div class="list-group-item">

+                                    <div class="d-flex justify-content-between">

                                        <strong>

+                                            <%= product.category_icon || "" %>
+
                                            <%= product.name %>

                                        </strong>

+                                        <small class="text-secondary">

-<br>
+                                            <% if(product.barcode) { %>

+                                                📊 <%= product.barcode %>

-<span class="text-secondary">
-
-<%= product.category_icon || "" %>
-
-<%= product.category_name || "Geen categorie" %>
-
-</span>
+                                            <% } %>

+                                        </small>

                                    </div>

+                                </div>

                            <% }) %>

+                        <% }) %>

                    </div>

+                <% } %>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="col-md-4">
+
+        <div class="card">
+
+            <div class="card-header">
+
+                <h3 class="card-title">Nieuw product</h3>
+
+            </div>
+
+            <div class="card-body">
+
+                <form method="post" action="/products">
+
+                    <div class="mb-3">
+
+                        <label class="form-label">Productnaam</label>
+
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            name="name" 
+                            placeholder="bijv. Melk"
+                            required>
+
+                    </div>
+
+                    <div class="mb-3">
+
+                        <label class="form-label">Categorie</label>
+
+                        <select class="form-select" name="category_id">
+
+                            <option value="">-- Geen categorie --</option>
+
+                            <% if(categories) { %>
+
+                                <% categories.forEach(cat => { %>
+
+                                    <option value="<%= cat.id %>">
+
+                                        <%= cat.icon || "" %> <%= cat.name %>
+
+                                    </option>
+
+                                <% }) %>
+
+                            <% } %>
+
+                        </select>
+
+                    </div>
+
+                    <button class="btn btn-primary w-100">
+
+                        Product toevoegen
+
+                    </button>
+
+                </form>
+
+            </div>
+
+        </div>

    </div>