Add data import export functions

public/index.html

@@ -16,6 +16,7 @@
           <button class="nav-item" data-view="vehicles"><span>Vehicles</span><small>03</small></button>
           <button class="nav-item" data-view="orders"><span>Service records</span><small>04</small></button>
           <button class="nav-item" data-view="users"><span>Accounts</span><small>05</small></button>
+          <button class="nav-item" data-view="settings"><span>Settings</span><small>06</small></button>
         </nav>
         <div class="sidebar-footer"><span class="status-dot"></span><span>Database online</span><small>PostgreSQL 16</small></div>
       </aside>
@@ -43,6 +44,7 @@
 
         <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, vehicle, mileage, date, customer, and technician in one view.</p></div><button class="primary-button" id="new-record-button">+ Add service record</button></div><form class="filter-bar" id="order-filters"><label>Vehicle<input name="vehicle" placeholder="VIN, plate, make, or model" /></label><label>Customer<input name="customer" placeholder="Customer name or email" /></label><label>Technician<input name="technician" placeholder="Technician name" /></label><label>From<input name="dateFrom" type="date" /></label><label>To<input name="dateTo" type="date" /></label><label>Status<select name="status"><option value="">All statuses</option><option value="open">Open</option><option value="in_progress">In progress</option><option value="waiting_for_parts">Waiting for parts</option><option value="ready">Ready</option><option value="closed">Closed</option><option value="cancelled">Cancelled</option></select></label><button class="secondary-button filter-clear" type="reset">Clear filters</button></form><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>Service date</th><th>VIN</th><th>License plate</th><th>Vehicle</th><th>Mileage</th><th>Customer</th><th>Technician</th><th>Complaint</th><th>Total</th><th>Status</th><th>Actions</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>
+        <section id="settings-view" class="view"><div class="section-heading"><div><p class="eyebrow">Workspace</p><h2>Settings</h2><p class="subheading">Manage the workshop database and move a complete backup between environments.</p></div></div><div class="settings-grid"><section class="panel settings-card"><p class="eyebrow">Backup</p><h3>Export all data</h3><p>Download customers, vehicles, employees, appointments, service records, parts, invoices, and accounts as one JSON file.</p><button class="primary-button" id="export-data-button">Download backup</button></section><section class="panel settings-card"><p class="eyebrow">Restore</p><h3>Import all data</h3><p>Restore a JSON backup. This replaces the current database contents after the file passes validation.</p><label class="file-button">Choose backup file<input id="import-data-input" type="file" accept="application/json,.json" /></label><p id="import-file-name" class="form-hint">No file selected.</p></section></div></section>
       </main>
     </div>