Add auto-schedule: fill planner from a course automatically

New "Auto-schedule a course" section in the Weekly Planner lets you pick
a course, start date, and items-per-day, then fills the planner in order
skipping weekends. POST /api/schedule/auto handles the logic server-side.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/admin.html

@@ -197,6 +197,18 @@
           <button id="planner-copy" class="secondary">Copy last week here</button>
           <button id="planner-print">🖨 Print week report</button>
         </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 id="planner-grid" class="planner-grid"></div>
       </section>
 

public/admin.js

@@ -539,7 +539,7 @@ let plannerStudentId = null;
 let plannerCoursesCache = [];
 
 async function loadPlannerPanel() {
-  const students = await api('/api/students');
+  const [students, courses] = await Promise.all([api('/api/students'), api('/api/admin/courses')]);
   if (students.length === 0) {
     $('#planner-grid').innerHTML = `<p class="hint">Add a kid first.</p>`;
     return;
@@ -547,9 +547,25 @@ async function loadPlannerPanel() {
   $('#planner-student').innerHTML = students.map((s) => `<option value="${s.id}">${esc(s.emoji)} ${esc(s.name)}</option>`).join('');
   if (!plannerStudentId || !students.some((s) => s.id === plannerStudentId)) plannerStudentId = students[0].id;
   $('#planner-student').value = plannerStudentId;
+  $('#auto-course').innerHTML = courses.map((c) => `<option value="${c.id}">${esc(c.name)}</option>`).join('');
+  if (!$('#auto-start-date').value) $('#auto-start-date').value = plannerWeekStart;
   await renderPlanner();
 }
 
+$('#auto-schedule-btn').addEventListener('click', async () => {
+  const courseId = Number($('#auto-course').value);
+  const startDate = $('#auto-start-date').value;
+  const itemsPerDay = Number($('#auto-items-per-day').value) || 1;
+  if (!courseId || !startDate) { $('#auto-schedule-msg').textContent = 'Pick a course and start date.'; return; }
+  const { scheduled } = await api('/api/schedule/auto', {
+    method: 'POST',
+    body: { studentId: plannerStudentId, courseId, startDate, itemsPerDay },
+  });
+  $('#auto-schedule-msg').textContent = `Scheduled ${scheduled} item${scheduled === 1 ? '' : 's'} starting ${startDate}.`;
+  plannerWeekStart = mondayOf(startDate + 'T12:00:00');
+  renderPlanner();
+});
+
 $('#planner-student').addEventListener('change', () => {
   plannerStudentId = Number($('#planner-student').value);
   renderPlanner();