nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign admin dashboard with sidebar layout, planner overhaul, and readability fixes
Build and Push Docker Image / build-and-push (push) Successful in 41s
Details

Browse Source 
- Replace horizontal top-nav with a dark sidebar (grouped: People / Academics / Tools)
- Add Dashboard landing page with kid stat cards, today's schedule, and recent scores
- Add /api/admin/schedule and /api/admin/recent-scores endpoints for dashboard data
- Add Lock button and mobile sidebar toggle in top bar
- Redesign planner toolbar: two-section layout (nav left, actions right)
- Elevate auto-schedule out of hidden accordion into always-visible inline bar
- Richer planner task cards: course color stripe, course name label, completion counter per day
- Dashed "＋ Add task" empty state instead of plain dash
- Fix nav-pill CSS conflict: student tabs (light bg) now use dark text; admin sidebar keeps white text
- Add seed.js demo data script for two students (Emma and Liam)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-10-19 13:31:12 -04:00
1 parent ab32ba8634
commit 7775c4fc3a
5 files changed
+1423 -126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/admin.html
+99 -36
View File
@@ -21,25 +21,80 @@
</section>
<div id="console" hidden>
<header class="admin-header">
<a href="index.html" class="admin-logo" id="admin-school-name">🎓 Homeschool</a>
<aside class="admin-sidebar">
<a href="index.html" class="admin-logo">
<span class="admin-logo-icon">🏫</span>
<span id="admin-school-name">Homeschool</span>
</a>
<nav class="admin-nav">
<button class="nav-pill active" data-panel="kids">🧒 Kids</button>
<button class="nav-pill" data-panel="courses">📚 Courses</button>
<button class="nav-pill" data-panel="planner">🗓️ Planner</button>
<button class="nav-pill" data-panel="grading">✅ Grading</button>
<button class="nav-pill" data-panel="messages">💬 Messages</button>
<button class="nav-pill" data-panel="gradebook">📊 Gradebook</button>
<button class="nav-pill" data-panel="spelling">✏️ Spelling</button>
<button class="nav-pill" data-panel="decks">🗂️ Flashcards</button>
<button class="nav-pill" data-panel="settings">⚙️ Settings</button>
<button class="nav-pill active" data-panel="dashboard">
<span class="nav-icon">⊞</span><span class="nav-label">Dashboard</span>
</button>
<div class="nav-section-label">People</div>
<button class="nav-pill" data-panel="kids">
<span class="nav-icon">🧒</span><span class="nav-label">Kids</span>
</button>
<button class="nav-pill" data-panel="messages">
<span class="nav-icon">💬</span><span class="nav-label">Messages</span>
</button>
<div class="nav-section-label">Academics</div>
<button class="nav-pill" data-panel="courses">
<span class="nav-icon">📚</span><span class="nav-label">Courses</span>
</button>
<button class="nav-pill" data-panel="planner">
<span class="nav-icon">🗓️</span><span class="nav-label">Planner</span>
</button>
<button class="nav-pill" data-panel="grading">
<span class="nav-icon">✅</span><span class="nav-label">Grading</span>
</button>
<button class="nav-pill" data-panel="gradebook">
<span class="nav-icon">📊</span><span class="nav-label">Gradebook</span>
</button>
<div class="nav-section-label">Tools</div>
<button class="nav-pill" data-panel="spelling">
<span class="nav-icon">✏️</span><span class="nav-label">Spelling</span>
</button>
<button class="nav-pill" data-panel="decks">
<span class="nav-icon">🗂️</span><span class="nav-label">Flashcards</span>
</button>
</nav>
</header>
<div class="admin-sidebar-footer">
<button class="nav-pill" data-panel="settings">
<span class="nav-icon">⚙️</span><span class="nav-label">Settings</span>
</button>
</div>
</aside>
<div class="admin-body">
<header class="admin-topbar">
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle menu">☰</button>
<h1 class="admin-page-title" id="admin-page-title">Dashboard</h1>
<div class="admin-topbar-right">
<a href="index.html" class="topbar-btn">← Student view</a>
<button class="topbar-btn topbar-lock" id="btn-lock">🔒 Lock</button>
</div>
</header>
<main class="admin-main">
<!-- Dashboard -->
<section id="panel-dashboard" class="panel">
<div id="dashboard-greeting" class="dash-greeting"></div>
<div id="dashboard-kid-cards" class="dash-kid-grid"></div>
<div class="dash-bottom-row">
<div class="dash-col">
<h3 class="dash-col-title">Today's Schedule</h3>
<div id="dashboard-schedule" class="dash-schedule-list"></div>
</div>
<div class="dash-col">
<h3 class="dash-col-title">Recent Scores</h3>
<div id="dashboard-scores" class="dash-score-list"></div>
</div>
</div>
</section>
<!-- Kids -->
<section id="panel-kids" class="panel">
<section id="panel-kids" class="panel" hidden>
<h1>Kids</h1>
<div class="panel-cols">
<div class="panel-col">
@@ -331,30 +386,37 @@
<!-- Planner -->
<section id="panel-planner" class="panel">
<h1>Planner</h1>
<div class="inline-form">
<label>Kid <select id="planner-student"></select></label>
<button id="planner-view-week" class="secondary active-view">Week</button>
<button id="planner-view-month" class="secondary">Month</button>
<button id="planner-prev" class="secondary">← Prev</button>
<span id="planner-week-label" class="week-label"></span>
<button id="planner-next" class="secondary">Next →</button>
<button id="planner-today" class="secondary">Today</button>
<button id="planner-copy" class="secondary">Copy last week</button>
<button id="planner-print">🖨 Print</button>
<button id="planner-add-btn">+ Add task</button>
<div class="planner-toolbar">
<div class="planner-toolbar-left">
<div class="planner-view-toggle">
<button id="planner-view-week" class="view-toggle-btn active">Week</button>
<button id="planner-view-month" class="view-toggle-btn">Month</button>
</div>
<div class="planner-nav-group">
<button id="planner-prev" class="planner-nav-btn">‹</button>
<span id="planner-week-label" class="week-label"></span>
<button id="planner-next" class="planner-nav-btn">›</button>
</div>
<button id="planner-today" class="secondary small">Today</button>
</div>
<div class="planner-toolbar-right">
<select id="planner-student" class="planner-kid-select"></select>
<button id="planner-copy" class="secondary small" title="Copy last week's tasks to this week">📋 Copy week</button>
<button id="planner-print" class="secondary small">🖨 Print</button>
<button id="planner-add-btn">+ Add task</button>
</div>
</div>
<details id="auto-schedule-details" class="admin-card" style="margin-bottom:1rem">
<summary style="cursor:pointer;font-weight:600">⚡ Auto-schedule a course</summary>
<div class="inline-form" style="margin-top:.75rem">
<label>Course <select id="auto-course"></select></label>
<label>Start date <input type="date" id="auto-start-date"></label>
<label>Items/day <input type="number" id="auto-items-per-day" value="1" min="1" max="10" style="width:5rem"></label>
<button id="auto-schedule-btn">Schedule</button>
</div>
<p id="auto-schedule-msg" class="hint" style="margin-top:.5rem"></p>
</details>
<div class="planner-auto-bar">
<span class="planner-auto-label">⚡ Auto-schedule</span>
<select id="auto-course"></select>
from <input type="date" id="auto-start-date" style="width:8rem">
<input type="number" id="auto-items-per-day" value="1" min="1" max="10" style="width:3.5rem" title="Items per day">
<span style="color:var(--muted);font-size:.8rem">items/day</span>
<button id="auto-schedule-btn" class="secondary small">Schedule</button>
<span id="auto-schedule-msg" class="hint"></span>
</div>
<div id="planner-grid" class="planner-grid"></div>
</section>
@@ -683,7 +745,8 @@
</section>
</main>
</div>
</div><!-- /.admin-body -->
</div><!-- /#console -->
<!-- Floating assign popup -->
<div id="assign-popup" hidden>