38 lines
6.4 KiB
HTML
38 lines
6.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Stockroom | Inventory</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||
</head>
|
||
<body data-role="{{ user.role }}" data-tools="{{ 1 if user.can_data_tools or user.role == 'admin' else 0 }}">
|
||
<div class="app-shell">
|
||
<aside class="sidebar">
|
||
<div class="brand"><div class="brand-mark">S</div><div><strong>Stockroom</strong><span>Asset intelligence</span></div></div>
|
||
<nav><button class="nav-item active"><span class="nav-icon">▦</span>Inventory</button>{% if user.role == 'admin' or user.can_data_tools %}<button class="nav-item" id="exportButton"><span class="nav-icon">↓</span>Export CSV</button><button class="nav-item" id="backupButton"><span class="nav-icon">⇩</span>Backup data</button><button class="nav-item" id="restoreButton"><span class="nav-icon">⇧</span>Restore data</button><input id="restoreInput" class="hidden" type="file" accept=".zip,application/zip">{% endif %}{% if user.role == 'admin' %}<a class="nav-item" href="{{ url_for('users_page') }}"><span class="nav-icon">♙</span>Manage users</a>{% endif %}</nav>
|
||
<div class="sidebar-footer"><span class="status-dot"></span><span>{{ user.username }} · {{ user.role|replace('_', ' ')|title }}</span><small>SQLite · Project data</small><form method="post" action="{{ url_for('logout') }}"><button class="logout-button" type="submit">Sign out</button></form></div>
|
||
</aside>
|
||
<main class="main-content">
|
||
<header class="topbar"><div><p class="eyebrow">Operations / Stockroom</p><h1>Inventory</h1></div>{% if user.role in ['admin', 'read_write'] %}<button class="primary-button" id="addButton"><span>+</span> Add item</button>{% endif %}</header>
|
||
<section class="stats-grid">
|
||
<article class="stat-card accent"><div class="stat-label">Total assets <span class="stat-symbol">◉</span></div><strong id="totalCount">0</strong><small>Across all categories</small></article>
|
||
<article class="stat-card"><div class="stat-label">Available <span class="stat-symbol green">●</span></div><strong id="availableCount">0</strong><small>Ready to use</small></article>
|
||
<article class="stat-card"><div class="stat-label">Checked out <span class="stat-symbol amber">●</span></div><strong id="checkedOutCount">0</strong><small>Currently assigned</small></article>
|
||
<article class="stat-card"><div class="stat-label">Maintenance <span class="stat-symbol red">●</span></div><strong id="maintenanceCount">0</strong><small>Needs attention</small></article>
|
||
</section>
|
||
<section class="inventory-panel">
|
||
<div class="panel-heading"><div><h2>All inventory</h2><p>Search, filter, and manage every item in your stockroom.</p></div><span class="item-count" id="resultCount">0 items</span></div>
|
||
<div class="toolbar"><label class="search-box"><span>⌕</span><input id="searchInput" type="search" placeholder="Search name, serial, model..." autocomplete="off"></label><select id="typeFilter"><option value="">All types</option><option>Computer</option><option>Audio</option><option>Graphics</option><option>Long play disk</option><option>CD</option><option>Display</option><option>Peripheral</option><option>Other</option></select><select id="statusFilter"><option value="">All status</option><option>Available</option><option>Checked out</option><option>Maintenance</option><option>Retired</option></select></div>
|
||
<div class="table-wrap"><table><thead><tr><th>Item</th><th>Type</th><th>Identifiers</th><th>Location</th><th>Status</th><th><span class="sr-only">Actions</span></th></tr></thead><tbody id="inventoryBody"></tbody></table><div class="empty-state" id="emptyState"><div class="empty-icon">⌁</div><h3>No items found</h3><p>Adjust your search or add the first item to your inventory.</p>{% if user.role in ['admin', 'read_write'] %}<button class="secondary-button" id="emptyAddButton">Add first item</button>{% endif %}</div></div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
<div class="modal-backdrop" id="modal"><section class="modal"><div class="modal-header"><div><p class="eyebrow">Inventory record</p><h2 id="modalTitle">Add item</h2></div><button class="icon-button" id="closeModal" aria-label="Close">×</button></div><form id="itemForm"><div class="form-grid"><label class="full">Item name *<input name="name" required placeholder="e.g. ThinkPad T14 Gen 3"></label><label>Type *<select name="item_type" required><option value="">Select type</option><option>Computer</option><option>Audio</option><option>Graphics</option><option>Long play disk</option><option>CD</option><option>Display</option><option>Peripheral</option><option>Other</option></select></label><label>Status<select name="status"><option>Available</option><option>Checked out</option><option>Maintenance</option><option>Retired</option></select></label><label>Brand<input name="brand" placeholder="e.g. Lenovo"></label><label>Model<input name="model" placeholder="e.g. T14 Gen 3"></label><label>Serial number<input name="serial_number" placeholder="Serial or barcode"></label><label>Asset tag<input name="asset_tag" placeholder="e.g. AST-00142"></label><label>Location<input name="location" placeholder="e.g. Shelf A3"></label><label>Purchase date<input name="purchase_date" type="date"></label><div class="form-section full"><span>Technical details <small>optional</small></span></div><label>CPU<input name="cpu" placeholder="e.g. Intel Core i7-1260P"></label><label>RAM<input name="ram" placeholder="e.g. 16 GB"></label><label>GPU<input name="gpu" placeholder="e.g. NVIDIA RTX 3060"></label><label>Disk / storage<input name="storage" placeholder="e.g. 512 GB SSD"></label><label>Media format<input name="media_format" placeholder="e.g. 12-inch, 33 RPM"></label><label class="full">Notes<textarea name="notes" rows="3" placeholder="Condition, accessories, history..."></textarea></label></div><div class="form-actions"><button type="button" class="secondary-button" id="cancelButton">Cancel</button><button type="submit" class="primary-button" id="saveButton">Save item</button></div></form></section></div>
|
||
<div class="toast" id="toast"></div>
|
||
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
||
</body>
|
||
</html>
|