51 lines
7.6 KiB
HTML
51 lines
7.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Bayline Service Desk</title>
|
||
<link rel="stylesheet" href="/styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<aside class="sidebar">
|
||
<div class="brand"><span class="brand-mark">B</span><span>Bayline<br /><strong>Service Desk</strong></span></div>
|
||
<nav aria-label="Main navigation">
|
||
<button class="nav-item active" data-view="overview"><span>Overview</span><small>01</small></button>
|
||
<button class="nav-item" data-view="customers"><span>Customers</span><small>02</small></button>
|
||
<button class="nav-item" data-view="orders"><span>Service records</span><small>03</small></button>
|
||
<button class="nav-item" data-view="users"><span>Accounts</span><small>04</small></button>
|
||
</nav>
|
||
<div class="sidebar-footer"><span class="status-dot"></span><span>Database online</span><small>PostgreSQL 16</small></div>
|
||
</aside>
|
||
|
||
<main class="main-content">
|
||
<header class="topbar"><div><p class="eyebrow">Wednesday, August 26, 2026</p><h1 id="page-title">Good morning, workshop.</h1></div><button class="primary-button" id="new-customer-button">+ New customer</button></header>
|
||
<div id="notice" class="notice" role="status"></div>
|
||
|
||
<section id="overview-view" class="view active-view">
|
||
<div class="metric-grid">
|
||
<article class="metric-card"><span class="metric-label">Today’s appointments</span><strong id="today-appointments">—</strong><span class="metric-note">Scheduled for today</span></article>
|
||
<article class="metric-card accent"><span class="metric-label">Active service orders</span><strong id="active-orders">—</strong><span class="metric-note">Work currently in motion</span></article>
|
||
<article class="metric-card"><span class="metric-label">Customers</span><strong id="customer-count">—</strong><span class="metric-note">In the workshop database</span></article>
|
||
<article class="metric-card"><span class="metric-label">Vehicles</span><strong id="vehicle-count">—</strong><span class="metric-note">Registered vehicles</span></article>
|
||
</div>
|
||
<div class="content-grid">
|
||
<section class="panel"><div class="panel-heading"><div><p class="eyebrow">Today</p><h2>Appointments</h2></div><button class="text-button" data-view="customers">View customers →</button></div><div id="appointments-list" class="list-container"><div class="empty-state">Loading appointments...</div></div></section>
|
||
<section class="panel dark-panel"><div class="panel-heading"><div><p class="eyebrow">Workshop floor</p><h2>Active work</h2></div><button class="text-button light" data-view="orders">All orders →</button></div><div id="orders-list" class="list-container"><div class="empty-state">Loading service orders...</div></div></section>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="customers-view" class="view"><div class="section-heading"><div><p class="eyebrow">Directory</p><h2>Customers</h2><p class="subheading">People and vehicles connected to your workshop.</p></div><button class="primary-button" id="new-customer-button-secondary">+ New customer</button></div><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>Customer</th><th>Contact</th><th>Vehicles</th><th>Added</th></tr></thead><tbody id="customers-table"></tbody></table></div></div></section>
|
||
|
||
<section id="orders-view" class="view"><div class="section-heading"><div><p class="eyebrow">Workshop floor</p><h2>Service records</h2><p class="subheading">VIN, plate, mileage, date, customer, and technician in one view.</p></div><button class="primary-button" id="new-record-button">+ Add service record</button></div><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>Service date</th><th>VIN</th><th>License plate</th><th>Mileage</th><th>Customer</th><th>Technician</th><th>Complaint</th><th>Status</th></tr></thead><tbody id="orders-table"></tbody></table></div></div></section>
|
||
<section id="users-view" class="view"><div class="section-heading"><div><p class="eyebrow">Access control</p><h2>User accounts</h2><p class="subheading">Manage workshop staff and their database rights.</p></div><button class="primary-button" id="new-user-button">+ Add user</button></div><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>User</th><th>Role</th><th>Read</th><th>Add</th><th>Delete</th><th>Actions</th></tr></thead><tbody id="users-table"></tbody></table></div></div></section>
|
||
</main>
|
||
</div>
|
||
|
||
<dialog id="customer-dialog"><form method="dialog" id="customer-form"><div class="dialog-heading"><div><p class="eyebrow">Directory</p><h2>Add customer</h2></div><button class="close-button" value="cancel" aria-label="Close">×</button></div><label>First name<input name="firstName" required /></label><label>Last name<input name="lastName" required /></label><label>Email<input name="email" type="email" /></label><label>Phone<input name="phone" type="tel" /></label><button class="primary-button" value="default">Save customer</button></form></dialog>
|
||
<dialog id="user-dialog"><form method="dialog" id="user-form"><div class="dialog-heading"><div><p class="eyebrow">Access control</p><h2 id="user-dialog-title">Add user</h2></div><button class="close-button" type="button" id="close-user-button" aria-label="Close">×</button></div><label>Username<input name="username" required /></label><label>Display name<input name="displayName" required /></label><label>Email<input name="email" type="email" /></label><label>Role<select name="role"><option value="viewer">Viewer</option><option value="technician">Technician</option><option value="service_advisor">Service advisor</option><option value="admin">Administrator</option></select></label><fieldset><legend>Rights</legend><label class="check-label"><input name="canRead" type="checkbox" checked /> Read records</label><label class="check-label"><input name="canAdd" type="checkbox" /> Add records</label><label class="check-label"><input name="canDelete" type="checkbox" /> Delete records</label></fieldset><div class="dialog-actions"><button class="secondary-button" type="button" id="cancel-user-button">Cancel</button><button class="primary-button" id="user-submit-button" value="default">Create user</button></div></form></dialog>
|
||
<dialog id="record-dialog"><form method="dialog" id="record-form"><div class="dialog-heading"><div><p class="eyebrow">Workshop floor</p><h2 id="record-dialog-title">Add service record</h2></div><button class="close-button" type="button" id="close-record-button" aria-label="Close">×</button></div><label>Service date<input name="serviceDate" type="date" required /></label><label>Customer name<input name="customerName" placeholder="First and last name" required /></label><label>Customer email<input name="customerEmail" type="email" /></label><label>VIN<input name="vin" minlength="17" maxlength="17" required /></label><label>License plate number<input name="licensePlate" required /></label><label>Car mileage<input name="mileage" type="number" min="0" step="1" required /></label><label>Technician<input name="technicianName" required /></label><label>Complaint or service requested<textarea name="complaint" rows="3" required></textarea></label><div class="dialog-actions"><button class="secondary-button" type="button" id="cancel-record-button">Cancel</button><button class="primary-button" id="record-submit-button" value="default">Create service record</button></div></form></dialog>
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html> |