payfrit/payfrit-biz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sidebar navigation to station-assignment page

Browse source 
Station assignment was a standalone page with no sidebar. Added the
same portal sidebar so users can navigate between pages. Also added
Stations link to menu-builder sidebar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-03-03 20:57:18 -08:00
parent 2d3634693b
commit 9c09e18833
2 changed files with 121 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
portal/menu-builder.html
View file

@ -870,6 +870,13 @@
</svg>
<span>Menu</span>
</a>
<a href="station-assignment.html" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="18" rx="2"/>
<path d="M2 9h20M9 21V9"/>
</svg>
<span>Stations</span>
</a>
<a href="index.html#reports" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 20V10M12 20V4M6 20v-6"/>

135
portal/station-assignment.html
View file

@ -8,10 +8,11 @@
<style>
.assignment-container {
display: flex;
height: calc(100vh - 80px);
flex: 1;
gap: 24px;
padding: 24px;
background: var(--bg-primary);
overflow: hidden;
}
.panel {
@ -346,26 +347,111 @@
</style>
</head>
<body>
<div class="app" style="flex-direction: column;">
<!-- Toolbar -->
<div class="toolbar">
<div class="toolbar-title">
<a id="backLink" href="#" style="color: var(--text-muted); text-decoration: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5M12 19l-7-7 7-7"/>
<div class="app">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="business-info" style="padding: 12px 16px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px;">
<div class="business-avatar" id="businessAvatar">B</div>
<div class="business-details" style="flex: 1;">
<div class="business-name" id="businessName">Loading...</div>
<div class="business-status online">Online</div>
</div>
<button class="sidebar-toggle" id="sidebarToggle" style="background: none; border: none; cursor: pointer; padding: 4px;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</a>
<h1>Station Assignment</h1>
<span class="business-name" id="businessName"></span>
</button>
</div>
<nav class="sidebar-nav">
<a href="index.html#dashboard" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
<rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
</svg>
<span>Dashboard</span>
</a>
<a href="index.html#orders" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
<rect x="9" y="3" width="6" height="4" rx="1"/>
<path d="M9 12h6M9 16h6"/>
</svg>
<span>Orders</span>
</a>
<a href="menu-builder.html" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18M3 12h18M3 18h18"/>
</svg>
<span>Menu</span>
</a>
<a href="#" class="nav-item active">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="18" rx="2"/>
<path d="M2 9h20M9 21V9"/>
</svg>
<span>Stations</span>
</a>
<a href="index.html#reports" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 20V10M12 20V4M6 20v-6"/>
</svg>
<span>Reports</span>
</a>
<a href="index.html#team" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
</svg>
<span>Team</span>
</a>
<a href="index.html#services" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<path d="M13.73 21a2 2 0 01-3.46 0"/>
</svg>
<span>Services</span>
</a>
<a href="index.html#service-points" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"/>
<path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
<path d="M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
</svg>
<span>Service Points</span>
</a>
<a href="index.html#admin-tasks" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>Task Admin</span>
</a>
<a href="index.html#settings" class="nav-item">
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
</svg>
<span>Settings</span>
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content" style="flex-direction: column;">
<!-- Toolbar -->
<div class="toolbar">
<div class="toolbar-title">
<h1>Station Assignment</h1>
</div>
<button class="btn btn-primary" onclick="StationAssignment.save()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
<path d="M17 21v-8H7v8M7 3v5h8"/>
</svg>
Save Changes
</button>
</div>
<button class="btn btn-primary" onclick="StationAssignment.save()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
<path d="M17 21v-8H7v8M7 3v5h8"/>
</svg>
Save Changes
</button>
</div>
<div class="assignment-container">
<!-- Left Panel: Menu Items -->
@ -400,6 +486,7 @@
</div>
</div>
</div>
</main>
</div>
<!-- Toast Container -->
@ -460,7 +547,9 @@
});
const data = await response.json();
if (data.OK && data.BUSINESS) {
document.getElementById('businessName').textContent = `- ${data.BUSINESS.BusinessName}`;
document.getElementById('businessName').textContent = data.BUSINESS.BusinessName;
const avatar = document.getElementById('businessAvatar');
if (avatar) avatar.textContent = (data.BUSINESS.BusinessName || 'B').charAt(0).toUpperCase();
}
} catch (err) {
console.error('[StationAssignment] Error:', err);
@ -935,7 +1024,11 @@
}
};
document.addEventListener('DOMContentLoaded', () => StationAssignment.init());
document.addEventListener('DOMContentLoaded', () => {
StationAssignment.init();
const toggle = document.getElementById('sidebarToggle');
if (toggle) toggle.addEventListener('click', () => document.getElementById('sidebar').classList.toggle('collapsed'));
});
</script>
</body>
</html>