Added functionality to all pages

frontend/assets/css/dashboard.css

@@ -1,3 +1,9 @@
+.dashboard-layout {
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 0;
+}
+
 main {
     max-width: 1400px;
     width: 100%;
@@ -6,17 +12,18 @@ main {
     flex: 1;
 }
 
-h1 {
+.page-header h1 {
-    font-size: 2rem;
+    font-size: 2.2rem;
     font-weight: 700;
     letter-spacing: -0.03em;
     margin-bottom: 2rem;
+    color: var(--text);
 }
 
 header {
     width: 100%;
     border-bottom: 1px solid var(--border);
-    background: rgba(31, 41, 55, 0.6);
+    background: rgba(31, 41, 55, 0.8);
     backdrop-filter: blur(12px);
     position: sticky;
     top: 0;
@@ -27,7 +34,7 @@ header {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 2rem;
-    height: 4rem;
+    height: 4.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -42,7 +49,7 @@ header {
 
 .brand {
     font-weight: 800;
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     letter-spacing: -0.03em;
 }
 
@@ -65,7 +72,7 @@ nav a {
     align-items: center;
     border-bottom: 2px solid transparent;
     padding: 0 0.25rem;
-    transition: color 0.15s ease, border-color 0.15s ease;
+    transition: color 0.2s ease, border-color 0.2s ease;
 }
 
 nav a:hover, nav a.active {
@@ -75,10 +82,9 @@ nav a:hover, nav a.active {
 
 .profile-dropdown {
     position: relative;
-    display: inline-block;
-    height: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
 }
 
 .profile-trigger {
@@ -99,8 +105,8 @@ nav a:hover, nav a.active {
 }
 
 .avatar {
-    width: 2rem;
+    width: 2.2rem;
-    height: 2rem;
+    height: 2.2rem;
     background-color: var(--accent);
     color: #ffffff;
     border-radius: 50%;
@@ -114,17 +120,24 @@ nav a:hover, nav a.active {
 .username {
     font-size: 0.95rem;
     font-weight: 500;
+    display: none;
+}
+
+@media (min-width: 640px) {
+    .username {
+        display: block;
+    }
 }
 
 .dropdown-menu {
     position: absolute;
     top: calc(100% - 0.5rem);
     right: 0;
-    width: 200px;
+    width: 220px;
     background: #1f2937;
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: 12px;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
     display: none;
     flex-direction: column;
     padding: 0.5rem 0;
@@ -138,8 +151,8 @@ nav a:hover, nav a.active {
 
 .dropdown-menu a, .logout-btn {
     width: 100%;
-    padding: 0.6rem 1.2rem;
+    padding: 0.75rem 1.25rem;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     color: var(--text-muted);
     text-decoration: none;
     text-align: left;
@@ -148,6 +161,9 @@ nav a:hover, nav a.active {
     cursor: pointer;
     transition: background-color 0.15s ease, color 0.15s ease;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .dropdown-menu a:hover {
@@ -158,7 +174,7 @@ nav a:hover, nav a.active {
 .dropdown-divider {
     border: 0;
     border-top: 1px solid var(--border);
-    margin: 0.4rem 0;
+    margin: 0.5rem 0;
 }
 
 .logout-btn {
@@ -173,7 +189,7 @@ nav a:hover, nav a.active {
 
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-bottom: 2rem;
 }
@@ -181,26 +197,45 @@ nav a:hover, nav a.active {
 .stat-card {
     background: var(--card);
     border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: 16px;
-    padding: 1.5rem;
+    padding: 1.75rem;
-    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.stat-card h2 {
+.stat-card:hover {
-    font-size: 2.25rem;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+}
+
+.stat-icon {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stat-info h2 {
+    font-size: 2rem;
     font-weight: 700;
     letter-spacing: -0.03em;
-    margin-bottom: 0.25rem;
+    margin: 0;
     color: var(--text);
+    line-height: 1.2;
 }
 
-.stat-card p {
+.stat-info p {
     color: var(--text-muted);
     font-size: 0.9rem;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    margin: 0 0 0.25rem 0;
 }
 
 .action-bar {
@@ -219,7 +254,7 @@ nav a:hover, nav a.active {
     width: 100%;
     background: var(--card);
     border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
@@ -235,7 +270,7 @@ th {
     background: #111827;
     color: var(--text-muted);
     font-weight: 600;
-    padding: 1rem 1.5rem;
+    padding: 1.25rem 1.5rem;
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -243,7 +278,7 @@ th {
 }
 
 td {
-    padding: 1rem 1.5rem;
+    padding: 1.25rem 1.5rem;
     border-bottom: 1px solid var(--border);
     color: var(--text);
 }
@@ -253,7 +288,7 @@ tr:last-child td {
 }
 
 tr:hover td {
-    background: rgba(255, 255, 255, 0.01);
+    background: rgba(255, 255, 255, 0.02);
 }
 
 #modal {
@@ -261,47 +296,49 @@ tr:hover td {
     z-index: 100;
 }
 
-.dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    width: 200px;
-    background: #1f2937;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
-    display: none;
-    flex-direction: column;
-    z-index: 1000;
-}
-
-.dropdown-menu.show {
-    display: flex !important;
-}
-
-#main-nav {
-    z-index: 900;
-}
-
 @media (max-width: 768px) {
-    .menu-trigger { display: block; background: none; border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.8rem; border-radius: 6px; }
+    .menu-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.5rem;
+        border-radius: 8px;
+        cursor: pointer;
+    }
 
     #main-nav {
         display: none;
         flex-direction: column;
         position: absolute;
-        top: 4rem;
+        top: 4.5rem;
         left: 0;
         width: 100%;
-        background: #111827;
+        background: rgba(17, 24, 39, 0.95);
+        backdrop-filter: blur(12px);
         padding: 1rem;
-        z-index: 100;
+        z-index: 1000;
         border-bottom: 1px solid var(--border);
     }
 
-    #main-nav.show { display: flex; }
+    #main-nav.show {
+        display: flex;
+    }
+
+    #main-nav a {
+        padding: 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    #main-nav a:last-child {
+        border-bottom: none;
+    }
 }
 
 @media (min-width: 769px) {
-    .menu-trigger { display: none; }
+    .menu-trigger {
+        display: none;
+    }
 }

frontend/assets/css/theme.css

@@ -1,4 +1,3 @@
-/* theme.css */
 :root {
     --bg: #111827;
     --card: #1f2937;
@@ -18,19 +17,20 @@
 }
 
 body {
-    margin: 0;
     min-height: 100vh;
     background: var(--bg);
     color: var(--text);
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     display: flex;
     flex-direction: column;
+}
+
+body:not(.dashboard-layout) {
     justify-content: center;
     align-items: center;
     padding: 1rem;
 }
 
-/* Gemeinsames Card-Layout für Home, Login, Register und 404 */
 .card {
     width: 100%;
     max-width: 400px;
@@ -55,7 +55,6 @@ body {
     margin-bottom: 2rem;
 }
 
-/* Button & Link Standard-Skins */
 .btn {
     display: inline-flex;
     justify-content: center;
@@ -95,7 +94,6 @@ body {
     border-color: var(--accent);
 }
 
-/* Formular-Elemente */
 .form-group {
     margin-bottom: 1.25rem;
 }
@@ -147,7 +145,6 @@ input::placeholder {
     text-decoration: underline;
 }
 
-/* Feedback-Boxen */
 .message {
     display: none;
     margin-top: 1.25rem;
@@ -168,4 +165,72 @@ input::placeholder {
     background: rgba(16, 185, 129, 0.1);
     border: 1px solid rgba(16, 185, 129, 0.2);
     color: var(--success);
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(17, 24, 39, 0.7);
+    backdrop-filter: blur(4px);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 2rem;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+    position: relative;
+    transform: translateY(20px);
+    opacity: 0;
+    animation: modalSlideIn 0.3s forwards ease-out;
+}
+
+@keyframes modalSlideIn {
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.modal-content h2 {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    font-size: 1.5rem;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.danger-btn {
+    background: rgba(239, 68, 68, 0.1) !important;
+    color: var(--error) !important;
+    border: 1px solid rgba(239, 68, 68, 0.2) !important;
+}
+
+.danger-btn:hover {
+    background: var(--error) !important;
+    color: white !important;
+}
+
+.table-loader {
+    padding: 3rem;
+    text-align: center;
+    color: var(--text-muted);
 }

frontend/assets/js/api.js

@@ -0,0 +1,247 @@
+// api.js
+document.addEventListener("DOMContentLoaded", () => {
+    const profileBtn = document.getElementById('profile-btn');
+    const dropdownMenu = document.getElementById('dropdown-menu');
+    const menuBtn = document.getElementById('menu-btn');
+    const mainNav = document.getElementById('main-nav');
+
+    if (profileBtn && dropdownMenu) {
+        profileBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            dropdownMenu.classList.toggle('show');
+            if (mainNav) mainNav.classList.remove('show');
+        });
+    }
+
+    if (menuBtn && mainNav) {
+        menuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            mainNav.classList.toggle('show');
+            if (dropdownMenu) dropdownMenu.classList.remove('show');
+        });
+    }
+
+    window.addEventListener('click', () => {
+        if (dropdownMenu) dropdownMenu.classList.remove('show');
+        if (mainNav) mainNav.classList.remove('show');
+    });
+
+    if (document.getElementById('items-table-body')) loadItems();
+    if (document.getElementById('locations-table-body')) loadLocations();
+    if (document.getElementById('projects-table-body')) loadProjects();
+});
+
+function closeModal(id) {
+    document.getElementById(id).classList.remove('show');
+}
+
+async function apiRequest(endpoint, method = 'GET', body = null) {
+    const options = {
+        method,
+        headers: { 'Content-Type': 'application/json' }
+    };
+    if (body) options.body = JSON.stringify(body);
+
+    try {
+        const response = await fetch(endpoint, options);
+        if (!response.ok && response.status !== 204) {
+            const errText = await response.text();
+            throw new Error(errText || `HTTP Error ${response.status}`);
+        }
+        if (response.status === 204) return null;
+        return await response.json();
+    } catch (err) {
+        alert("Action failed: " + err.message);
+        throw err;
+    }
+}
+
+// ---- ITEMS ----
+async function loadItems() {
+    const data = await apiRequest('/api/item');
+    const tbody = document.getElementById('items-table-body');
+    tbody.innerHTML = '';
+
+    if (!data.items || data.items.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="4" style="text-align: center;">No items found.</td></tr>';
+        return;
+    }
+
+    data.items.forEach(item => {
+        tbody.innerHTML += `
+            <tr>
+                <td style="font-weight: 600;">${item.name}</td>
+                <td><span style="background: rgba(255,255,255,0.05); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--border);">${item.category}</span></td>
+                <td style="font-family: monospace; font-size: 1.05rem;">${item.total_quantity}</td>
+                <td style="text-align: right;">
+                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editItem(${JSON.stringify(item).replace(/'/g, "&#39;")})'>Edit</button>
+                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteItem(${item.id})">Delete</button>
+                </td>
+            </tr>
+        `;
+    });
+}
+
+function openItemModal() {
+    document.getElementById('item-form').reset();
+    document.getElementById('item-id').value = '';
+    document.getElementById('item-modal-title').innerText = 'New Item';
+    document.getElementById('item-modal').classList.add('show');
+}
+
+function editItem(item) {
+    document.getElementById('item-id').value = item.id;
+    document.getElementById('item-name').value = item.name;
+    document.getElementById('item-category').value = item.category;
+    document.getElementById('item-desc').value = item.description;
+    document.getElementById('item-qty').value = item.total_quantity;
+    document.getElementById('item-modal-title').innerText = 'Edit Item';
+    document.getElementById('item-modal').classList.add('show');
+}
+
+async function saveItem(event) {
+    event.preventDefault();
+    const id = document.getElementById('item-id').value;
+    const payload = {
+        name: document.getElementById('item-name').value,
+        category: document.getElementById('item-category').value,
+        description: document.getElementById('item-desc').value,
+        total_quantity: parseInt(document.getElementById('item-qty').value, 10)
+    };
+
+    const method = id ? 'PUT' : 'POST';
+    const endpoint = id ? `/api/item?id=${id}` : '/api/item';
+
+    await apiRequest(endpoint, method, payload);
+    closeModal('item-modal');
+    loadItems();
+}
+
+async function deleteItem(id) {
+    if (confirm("Are you sure you want to delete this item?")) {
+        await apiRequest(`/api/item?id=${id}`, 'DELETE');
+        loadItems();
+    }
+}
+
+// ---- LOCATIONS ----
+async function loadLocations() {
+    const data = await apiRequest('/api/location');
+    const tbody = document.getElementById('locations-table-body');
+    tbody.innerHTML = '';
+
+    if (!data.locations || data.locations.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="2" style="text-align: center;">No locations found.</td></tr>';
+        return;
+    }
+
+    data.locations.forEach(loc => {
+        tbody.innerHTML += `
+            <tr>
+                <td style="font-weight: 600;">${loc.name}</td>
+                <td style="text-align: right;">
+                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="editLocation(${loc.id}, '${loc.name}')">Edit</button>
+                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteLocation(${loc.id})">Delete</button>
+                </td>
+            </tr>
+        `;
+    });
+}
+
+function openLocationModal() {
+    document.getElementById('location-form').reset();
+    document.getElementById('location-id').value = '';
+    document.getElementById('location-modal-title').innerText = 'New Location';
+    document.getElementById('location-modal').classList.add('show');
+}
+
+function editLocation(id, name) {
+    document.getElementById('location-id').value = id;
+    document.getElementById('location-name').value = name;
+    document.getElementById('location-modal-title').innerText = 'Edit Location';
+    document.getElementById('location-modal').classList.add('show');
+}
+
+async function saveLocation(event) {
+    event.preventDefault();
+    const id = document.getElementById('location-id').value;
+    const payload = { name: document.getElementById('location-name').value };
+
+    const method = id ? 'PUT' : 'POST';
+    const endpoint = id ? `/api/location?id=${id}` : '/api/location';
+
+    await apiRequest(endpoint, method, payload);
+    closeModal('location-modal');
+    loadLocations();
+}
+
+async function deleteLocation(id) {
+    if (confirm("Are you sure you want to delete this location?")) {
+        await apiRequest(`/api/location?id=${id}`, 'DELETE');
+        loadLocations();
+    }
+}
+
+// ---- PROJECTS ----
+async function loadProjects() {
+    const data = await apiRequest('/api/project');
+    const tbody = document.getElementById('projects-table-body');
+    tbody.innerHTML = '';
+
+    if (!data.projects || data.projects.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No projects found.</td></tr>';
+        return;
+    }
+
+    data.projects.forEach(proj => {
+        tbody.innerHTML += `
+            <tr>
+                <td style="font-weight: 600;">${proj.name}</td>
+                <td style="color: var(--text-muted);">${proj.description}</td>
+                <td style="text-align: right;">
+                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editProject(${JSON.stringify(proj).replace(/'/g, "&#39;")})'>Edit</button>
+                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteProject(${proj.id})">Delete</button>
+                </td>
+            </tr>
+        `;
+    });
+}
+
+function openProjectModal() {
+    document.getElementById('project-form').reset();
+    document.getElementById('project-id').value = '';
+    document.getElementById('project-modal-title').innerText = 'New Project';
+    document.getElementById('project-modal').classList.add('show');
+}
+
+function editProject(proj) {
+    document.getElementById('project-id').value = proj.id;
+    document.getElementById('project-name').value = proj.name;
+    document.getElementById('project-desc').value = proj.description;
+    document.getElementById('project-modal-title').innerText = 'Edit Project';
+    document.getElementById('project-modal').classList.add('show');
+}
+
+async function saveProject(event) {
+    event.preventDefault();
+    const id = document.getElementById('project-id').value;
+    const payload = {
+        name: document.getElementById('project-name').value,
+        description: document.getElementById('project-desc').value
+    };
+
+    const method = id ? 'PUT' : 'POST';
+    const endpoint = id ? `/api/project?id=${id}` : '/api/project';
+
+    await apiRequest(endpoint, method, payload);
+    closeModal('project-modal');
+    loadProjects();
+}
+
+async function deleteProject(id) {
+    if (confirm("Are you sure you want to delete this project?")) {
+        await apiRequest(`/api/project?id=${id}`, 'DELETE');
+        loadProjects();
+    }
+}

frontend/htmx/contents/dash/base.html

@@ -1,4 +1,5 @@
 {{ define "base.html" }}
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -8,14 +9,16 @@
     <link rel="stylesheet" href="/assets/css/theme.css">
     <link rel="stylesheet" href="/assets/css/dashboard.css">
 </head>
-<body>
+<body class="dashboard-layout">
 
 <header>
     <div class="nav-container">
         <div class="nav-left">
             <div class="brand">Miau<span>Inv</span></div>
 
-            <button class="menu-trigger" id="menu-btn" aria-label="Menu">Menu</button>
+            <button class="menu-trigger" id="menu-btn" aria-label="Menu">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+            </button>
 
             <nav id="main-nav">
                 <a href="/dashboard">Dashboard</a>
@@ -28,6 +31,8 @@
         <div class="profile-dropdown">
             <button class="profile-trigger" id="profile-btn">
                 <div class="avatar">M</div>
+                <span class="username">Admin</span>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
             </button>
             <div class="dropdown-menu" id="dropdown-menu">
                 <a href="/profile/settings">Account Settings</a>
@@ -47,34 +52,7 @@
     {{ template "content" . }}
 </main>
 
-<script>
+<script src="/assets/js/api.js"></script>
-    const profileBtn = document.getElementById('profile-btn');
-    const dropdownMenu = document.getElementById('dropdown-menu');
-    const menuBtn = document.getElementById('menu-btn');
-    const mainNav = document.getElementById('main-nav');
-
-    // Profil-Menü Toggle
-    profileBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        dropdownMenu.classList.toggle('show');
-        mainNav.classList.remove('show'); // Mobile Nav schließen
-    });
-
-    // Mobile Nav Toggle
-    menuBtn.addEventListener('click', (e) => {
-        console.log("Button wurde geklickt!"); // Wird das im Browser angezeigt?
-        e.stopPropagation();
-        e.preventDefault(); // Verhindert Standard-Browser-Aktionen
-        mainNav.classList.toggle('show');
-        dropdownMenu.classList.remove('show');
-    });
-
-    // Alles schließen bei Klick in den Body
-    window.addEventListener('click', () => {
-        dropdownMenu.classList.remove('show');
-        mainNav.classList.remove('show');
-    });
-</script>
 </body>
 </html>
 {{ end }}

frontend/htmx/contents/dash/dashboard.html

@@ -1,20 +1,37 @@
 {{ define "content" }}
-<h1>Dashboard</h1>
+<div class="page-header">
+    <h1>Dashboard Overview</h1>
+</div>
 
 <div class="stats-grid">
     <div class="stat-card">
-        <h2>{{ .Stats.Items }}</h2>
+        <div class="stat-icon" style="background: rgba(59, 130, 246, 0.1); color: var(--accent);">
-        <p>Items</p>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+        </div>
+        <div class="stat-info">
+            <p>Total Items</p>
+            <h2>{{ .Stats.Items }}</h2>
+        </div>
     </div>
 
     <div class="stat-card">
-        <h2>{{ .Stats.Projects }}</h2>
+        <div class="stat-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success);">
-        <p>Projects</p>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+        </div>
+        <div class="stat-info">
+            <p>Active Projects</p>
+            <h2>{{ .Stats.Projects }}</h2>
+        </div>
     </div>
 
     <div class="stat-card">
-        <h2>{{ .Stats.Locations }}</h2>
+        <div class="stat-icon" style="background: rgba(245, 158, 11, 0.1); color: #f59e0b;">
-        <p>Locations</p>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+        </div>
+        <div class="stat-info">
+            <p>Locations</p>
+            <h2>{{ .Stats.Locations }}</h2>
+        </div>
     </div>
 </div>
 {{ end }}

frontend/htmx/contents/dash/inventory.html

@@ -1,24 +1,49 @@
 {{ define "content" }}
-<h1>Inventory</h1>
+<div class="page-header action-bar">
-
+    <h1>Inventory</h1>
-<div class="action-bar">
+    <button class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem; font-size: 0.95rem;" onclick="openItemModal()">
-    <input
+        Add Item
-            type="search"
+    </button>
-            name="q"
-            class="search-input"
-            placeholder="Search..."
-            hx-get="/api/item/search"
-            hx-trigger="keyup changed delay:300ms"
-            hx-target="#items"
-    >
 </div>
 
 <div class="table-container">
-    <div
+    <table>
-            id="items"
+        <thead>
-            hx-get="/api/item"
+        <tr>
-            hx-trigger="load"
+            <th>Name</th>
-    >
+            <th>Category</th>
+            <th>Total Quantity</th>
+            <th style="text-align: right;">Actions</th>
+        </tr>
+        </thead>
+        <tbody id="items-table-body">
+        <tr><td colspan="4" class="table-loader">Loading inventory...</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<div id="item-modal" class="modal">
+    <div class="modal-content">
+        <h2 id="item-modal-title">New Item</h2>
+        <form id="item-form" onsubmit="saveItem(event)">
+            <input type="hidden" id="item-id">
+            <div class="form-group">
+                <input type="text" id="item-name" placeholder="Item Name" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="item-category" placeholder="Category" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="item-desc" placeholder="Description">
+            </div>
+            <div class="form-group">
+                <input type="number" id="item-qty" placeholder="Total Quantity" required>
+            </div>
+            <div class="button-group">
+                <button type="submit" class="btn btn-primary">Save Item</button>
+                <button type="button" class="btn btn-secondary" onclick="closeModal('item-modal')">Cancel</button>
+            </div>
+        </form>
     </div>
 </div>
 {{ end }}

frontend/htmx/contents/dash/itemlist.html

@@ -5,15 +5,23 @@
         <th>Category</th>
         <th>Total</th>
         <th>Free</th>
+        <th style="text-align: right;">Actions</th>
     </tr>
     </thead>
     <tbody>
     {{ range . }}
     <tr>
         <td style="font-weight: 600;">{{ .Name }}</td>
-        <td><span style="color: var(--text-muted);">{{ .Category }}</span></td>
+        <td>
-        <td style="font-family: monospace;">{{ .TotalQuantity }}</td>
+            <span style="background: rgba(255,255,255,0.05); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; color: var(--text-muted); border: 1px solid var(--border);">
-        <td style="font-family: monospace; color: var(--success);">{{ .FreeQuantity }}</td>
+                {{ .Category }}
+            </span>
+        </td>
+        <td style="font-family: monospace; font-size: 1.05rem;">{{ .TotalQuantity }}</td>
+        <td style="font-family: monospace; font-size: 1.05rem; color: var(--success);">{{ .FreeQuantity }}</td>
+        <td style="text-align: right;">
+            <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;">Edit</button>
+        </td>
     </tr>
     {{ end }}
     </tbody>

frontend/htmx/contents/dash/locations.html

@@ -1,11 +1,38 @@
 {{ define "content" }}
-<h1>Locations</h1>
+<div class="page-header action-bar">
+    <h1>Locations</h1>
+    <button class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem; font-size: 0.95rem;" onclick="openLocationModal()">
+        Add Location
+    </button>
+</div>
 
 <div class="table-container">
-    <div
+    <table>
-            hx-get="/api/locations"
+        <thead>
-            hx-trigger="load"
+        <tr>
-    >
+            <th>Name</th>
+            <th style="text-align: right;">Actions</th>
+        </tr>
+        </thead>
+        <tbody id="locations-table-body">
+        <tr><td colspan="2" class="table-loader">Loading locations...</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<div id="location-modal" class="modal">
+    <div class="modal-content">
+        <h2 id="location-modal-title">New Location</h2>
+        <form id="location-form" onsubmit="saveLocation(event)">
+            <input type="hidden" id="location-id">
+            <div class="form-group">
+                <input type="text" id="location-name" placeholder="Location Name" required>
+            </div>
+            <div class="button-group">
+                <button type="submit" class="btn btn-primary">Save Location</button>
+                <button type="button" class="btn btn-secondary" onclick="closeModal('location-modal')">Cancel</button>
+            </div>
+        </form>
     </div>
 </div>
 {{ end }}

frontend/htmx/contents/dash/projects.html

@@ -1,22 +1,42 @@
 {{ define "content" }}
-<div class="action-bar">
+<div class="page-header action-bar">
     <h1>Projects</h1>
-    <button
+    <button class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem; font-size: 0.95rem;" onclick="openProjectModal()">
-            class="btn btn-primary"
-            style="width: auto; padding: 0.6rem 1.2rem; font-size: 0.95rem;"
-            hx-get="/project/new"
-            hx-target="#modal"
-    >
         New Project
     </button>
 </div>
 
-<div
+<div class="table-container">
-        hx-get="/api/project"
+    <table>
-        hx-trigger="load"
+        <thead>
-        hx-target="this"
+        <tr>
->
+            <th>Name</th>
+            <th>Description</th>
+            <th style="text-align: right;">Actions</th>
+        </tr>
+        </thead>
+        <tbody id="projects-table-body">
+        <tr><td colspan="3" class="table-loader">Loading projects...</td></tr>
+        </tbody>
+    </table>
 </div>
 
-<div id="modal"></div>
+<div id="project-modal" class="modal">
+    <div class="modal-content">
+        <h2 id="project-modal-title">New Project</h2>
+        <form id="project-form" onsubmit="saveProject(event)">
+            <input type="hidden" id="project-id">
+            <div class="form-group">
+                <input type="text" id="project-name" placeholder="Project Name" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="project-desc" placeholder="Description">
+            </div>
+            <div class="button-group">
+                <button type="submit" class="btn btn-primary">Save Project</button>
+                <button type="button" class="btn btn-secondary" onclick="closeModal('project-modal')">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
 {{ end }}