feat: add weekly schedule shifts and bulk departures

admin_ui/README.md

@@ -1,3 +1,18 @@
+## Weekly schedules and shifts
+
+The schedule manager uses the weekly template model. Administrators create a
+departure for a bus line in one of three categories: weekdays, Saturday, or
+Sunday. The UI creates the corresponding `day_of_week` rows and assigns drivers
+through `transit.shifts`, rather than storing a driver on `transit.schedules`.
+
+The active UI uses these transit API endpoints:
+
+- `GET /admin/weekly-schedules`
+- `GET /admin/shift-drivers`
+- `POST /admin/weekly-schedules`
+- `PUT /admin/weekly-schedules/:scheduleId/shift`
+- `DELETE /admin/weekly-schedules/:scheduleId`
+
 # Transit Admin Control Center
 
 Modern React + Vite web application for comprehensive transit system administration.
@@ -15,6 +30,7 @@ Modern React + Vite web application for comprehensive transit system administrat
 ## Local Development
 
 ### Prerequisites
+
 - Node.js 18+
 - npm or yarn
 
@@ -86,9 +102,9 @@ http://localhost:5174
 
 ### Environment Variables
 
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `VITE_AUTH_API` | Auth API URL (same-origin path recommended in Docker) | http://localhost:5000 |
+| Variable           | Description                                              | Default               |
+| ------------------ | -------------------------------------------------------- | --------------------- |
+| `VITE_AUTH_API`    | Auth API URL (same-origin path recommended in Docker)    | http://localhost:5000 |
 | `VITE_TRANSIT_API` | Transit API URL (same-origin path recommended in Docker) | http://localhost:5001 |
 
 ### Runtime Configuration
@@ -98,6 +114,7 @@ When running in Docker, environment variables are injected at runtime via `docke
 ## Architecture
 
 ### Technology Stack
+
 - **Frontend**: React 18.2 + Vite 5.0
 - **HTTP Client**: Axios 1.4
 - **Server**: Nginx (Alpine Linux)
@@ -116,6 +133,7 @@ When running in Docker, environment variables are injected at runtime via `docke
 ### API Integration
 
 The app communicates with:
+
 - **Auth API** (/login, /me)
 - **Transit API** (/admin/stops, /admin/bus-lines, /admin/fleet/buses)
 - **Error Log API** (/error_log)
@@ -148,16 +166,19 @@ Users must have a `userCode` in their JWT and, for admin access, the `isAdmin` f
 ## Troubleshooting
 
 ### Issue: "Admin UI not loading"
+
 - Verify container is running: `docker ps`
 - Check logs: `docker-compose logs admin_ui`
 - Clear browser cache (Ctrl+Shift+R)
 
 ### Issue: "API connection refused"
+
 - Ensure auth_api and transit_api are running
 - Check environment variables are set correctly
 - Verify network connectivity between containers
 
 ### Issue: "Permission denied" on admin operations
+
 - Verify JWT token includes valid `userCode`
 - Check `ADMIN_USER_CODES` environment variable
 - Ensure database user has appropriate permissions
@@ -180,6 +201,7 @@ See [DEPLOYMENT.md](../DEPLOYMENT.md) for comprehensive deployment guide.
 ## Support
 
 For issues or questions:
+
 1. Check service logs: `docker-compose logs admin_ui`
 2. Verify API connectivity: Visit API URLs directly
 3. Check browser console for client-side errors
@@ -188,4 +210,3 @@ For issues or questions:
 ## License
 
 Part of the XTransit project
-

admin_ui/SCHEDULE_API.md

@@ -4,66 +4,149 @@
 
 The Transit API now includes a comprehensive schedule management system with both admin and public endpoints.
 
-### Admin Endpoints (requires authentication + admin privileges)
+### Weekly Admin Endpoints (requires authentication + admin privileges)
+
+The active admin UI uses weekly schedule templates. `dayOfWeek` follows the
+JavaScript/PostgreSQL convention: `0` Sunday, `1` through `5` weekdays, and `6`
+Saturday. Driver assignment is stored in `transit.shifts` and references
+`workers.users(id)`.
+
+#### Get weekly schedules
 
-#### Get all schedules
 ```
-GET /admin/schedules
+GET /admin/weekly-schedules
 Response: { schedules: [...] }
 ```
 
-#### Create a schedule
+#### Get shift drivers
+
 ```
+GET /admin/shift-drivers
+Response: { drivers: [{ id, name }] }
+```
+
+#### Create a weekly schedule
+
+````
+
+#### Create multiple departures
+
+```text
+POST /admin/weekly-schedules/bulk
+Body: {
+  busLineId: 1,
+  dayOfWeeks: [1, 2, 3, 4, 5],
+  startTimes: ["06:00", "06:30", "07:00"],
+  driverId: 12
+}
+````
+
+The API creates one schedule row for every day/time combination and derives the
+end time from the bus line's configured duration.
+POST /admin/weekly-schedules
+Body: {
+busLineId: 1,
+dayOfWeek: 1,
+startTime: "08:00",
+endTime: "09:00",
+driverId: 12
+}
+
+```
+
+#### Replace a schedule's driver
+
+```
+
+PUT /admin/weekly-schedules/:scheduleId/shift
+Body: { driverId: 12 }
+
+```
+
+Use `{ "driverId": null }` to unassign the driver. The current `shifts` table
+does not contain a week/date column, so this is an active assignment rather than
+historical per-week assignment. Add `week_start` to support that later.
+
+### Legacy Admin Endpoints
+
+#### Get all schedules
+
+```
+
+GET /admin/schedules
+Response: { schedules: [...] }
+
+```
+
+#### Create a schedule
+
+```
+
 POST /admin/schedules
 Body: {
-  busLineId: number,
-  busId: number,
-  driverId: number (optional),
-  startTime: "2026-05-06T08:00:00",
-  endTime: "2026-05-06T17:00:00"
+busLineId: number,
+busId: number,
+driverId: number (optional),
+startTime: "2026-05-06T08:00:00",
+endTime: "2026-05-06T17:00:00"
 }
 Response: { schedule: {...} }
+
 ```
 
 #### Delete a schedule
+
 ```
+
 DELETE /admin/schedules/:scheduleId
 Response: { success: true, schedule: {...} }
+
 ```
 
 ### Public Endpoints (no authentication required)
 
 #### Get schedules (with optional filters)
+
 ```
+
 GET /schedules?date=2026-05-06&lineId=1
 Query params:
-  - date: YYYY-MM-DD (optional)
-  - lineId: number (optional)
-Response: { schedules: [...] }
+
+- date: YYYY-MM-DD (optional)
+- lineId: number (optional)
+  Response: { schedules: [...] }
+
 ```
 
 #### Get schedule detail
+
 ```
+
 GET /schedules/:scheduleId
 Response: { schedule: {...} }
+
 ```
 
 #### Get stops for a schedule's line
+
 ```
+
 GET /schedules/:scheduleId/stops
 Response: { stops: [...] }
 Shows all stops on the bus line with order, location, and ETA.
-```
+
+````
 
 ## Admin UI Features
 
 The ScheduleMaker component provides:
 
-1. **Service Creation Form**
-   - Select bus line, vehicle, date, and time
-   - Optional driver ID assignment
-   - Submit to create schedule
-   - Admin-only access
+1. **Weekly schedule editor**
+
+- Select a bus line and one of weekdays, Saturday, or Sunday
+- Define start and end times
+- Assign drivers through shifts
+- Admin-only access
 
 2. **Timetable View**
    - 24-hour time slots (hourly grouping)
@@ -86,12 +169,13 @@ The ScheduleMaker component provides:
 The TimetableViewer component provides a public-facing schedule display:
 
 ```jsx
-import TimetableViewer from './components/TimetableViewer'
+import TimetableViewer from "./components/TimetableViewer";
 
-<TimetableViewer apiBaseUrl="http://api.transit.local:5001" />
-```
+<TimetableViewer apiBaseUrl="http://api.transit.local:5001" />;
+````
 
 Features:
+
 - Filter by date and bus line
 - Real-time loading state
 - Error handling
@@ -104,6 +188,7 @@ Features:
 With `DEV_MOCK=1`, all schedule operations work in-memory without a database.
 
 Example:
+
 ```bash
 ADMIN_USER_CODES=42 DEV_MOCK=1 JWT_SECRET=devsecret npm --prefix ./transit_api start
 ```
@@ -114,14 +199,19 @@ ADMIN_USER_CODES=42 DEV_MOCK=1 JWT_SECRET=devsecret npm --prefix ./transit_api s
 CREATE TABLE transit.schedules (
   id BIGINT PRIMARY KEY,
   bus_line_id BIGINT REFERENCES transit.bus_lines(id),
-  bus_id BIGINT REFERENCES fleet.bus(id),
-  driver_id INTEGER,
-  start_time TIMESTAMP,
-  end_time TIMESTAMP,
+  start_time TIME,
+  end_time TIME,
   status VARCHAR(20) DEFAULT 'planned',
+  day_of_week SMALLINT NOT NULL CHECK (day_of_week BETWEEN 0 AND 6),
   created_at TIMESTAMP DEFAULT NOW(),
   updated_at TIMESTAMP DEFAULT NOW()
 );
+
+CREATE TABLE transit.shifts (
+  id BIGINT PRIMARY KEY,
+  schedule_id BIGINT REFERENCES transit.schedules(id) ON DELETE CASCADE,
+  driver_id BIGINT REFERENCES workers.users(id)
+);
 ```
 
 ## Styling & UX
@@ -129,6 +219,7 @@ CREATE TABLE transit.schedules (
 The schedule manager uses:
 
 ### Admin Timetable Styling
+
 - Responsive table with hourly time slots
 - Gradient schedule cards (blue/indigo theme)
 - Hover effects and smooth transitions
@@ -137,6 +228,7 @@ The schedule manager uses:
 - Confirmation modals with semi-transparent overlay
 
 ### Public Timetable Styling
+
 - Clean, simple table layout
 - Status badges (green for active, gray for planned)
 - Mobile-responsive with scrolling
@@ -152,6 +244,7 @@ The schedule manager uses:
 ## Example Usage
 
 ### Create a schedule (Admin)
+
 ```bash
 curl -X POST http://localhost:5001/admin/schedules \
   -H "Authorization: Bearer YOUR_TOKEN" \
@@ -166,11 +259,13 @@ curl -X POST http://localhost:5001/admin/schedules \
 ```
 
 ### Get today's schedules (Public)
+
 ```bash
 curl http://localhost:5001/schedules?date=$(date +%Y-%m-%d)
 ```
 
 ### Get schedules for specific line (Public)
+
 ```bash
 curl http://localhost:5001/schedules?lineId=3
 ```
@@ -184,4 +279,3 @@ curl http://localhost:5001/schedules?lineId=3
 - Schedule conflict detection
 - Integration with GPS tracking for actual vs scheduled times
 - Historical schedule analytics
-

admin_ui/src/components/ScheduleMaker.jsx

@@ -1,93 +1,61 @@
-import React, { useEffect, useState } from 'react'
-import { transitClient } from '../api'
-import TimetableDisplay from './TimetableDisplay'
-import FixedScheduleEditor from './FixedScheduleEditor'
+import React, { useEffect, useState } from "react";
+import { transitClient } from "../api";
+import WeeklyScheduleEditor from "./WeeklyScheduleEditor";
 
-export default function ScheduleMaker({ token, user }) {
-  const client = transitClient(token)
-  const [scheduleTemplates, setScheduleTemplates] = useState([])
-  const [busLines, setBusLines] = useState([])
-  const [buses, setBuses] = useState([])
-  const [drivers, setDrivers] = useState([])
-  const [selectedDriverFilter, setSelectedDriverFilter] = useState('')
-  const [message, setMessage] = useState(null)
-  const [isAdmin] = useState(Boolean(user?.isAdmin))
-  const [overviewDate, setOverviewDate] = useState(new Date().toISOString().split('T')[0])
+export default function ScheduleMaker({ token }) {
+  const client = transitClient(token);
+  const [schedules, setSchedules] = useState([]);
+  const [busLines, setBusLines] = useState([]);
+  const [drivers, setDrivers] = useState([]);
+  const [message, setMessage] = useState(null);
 
-  const loadScheduleTemplates = async () => {
+  const loadSchedules = async () => {
     try {
-      const res = await client.get('/admin/schedules?templates=1')
-      setScheduleTemplates((res.data.schedules || []).filter(schedule => Array.isArray(schedule.weekdays) && schedule.weekdays.length > 0))
+      const res = await client.get("/admin/weekly-schedules");
+      setSchedules(res.data.schedules || []);
     } catch (err) {
-      setMessage('Error loading fixed schedules: ' + (err.response?.data?.error || err.message))
+      setMessage("Could not load weekly schedules.");
     }
-  }
+  };
 
   const loadBusLines = async () => {
     try {
-      const res = await client.get('/admin/bus-lines')
-      setBusLines(res.data.busLines || [])
+      const res = await client.get("/admin/bus-lines");
+      setBusLines(res.data.busLines || []);
     } catch (err) {
-      setMessage('Error loading bus lines: ' + (err.response?.data?.error || err.message))
+      setMessage("Could not load bus lines.");
     }
-  }
-
-  const loadBuses = async () => {
-    try {
-      const res = await client.get('/admin/fleet/buses')
-      setBuses(res.data.buses || [])
-    } catch (err) {
-      setMessage('Error loading buses: ' + (err.response?.data?.error || err.message))
-    }
-  }
+  };
 
   const loadDrivers = async () => {
     try {
-      const res = await client.get('/admin/drivers')
-      setDrivers(res.data.drivers || [])
+      const res = await client.get("/admin/shift-drivers");
+      setDrivers(res.data.drivers || []);
     } catch (err) {
-      setMessage('Error loading drivers: ' + (err.response?.data?.error || err.message))
+      setMessage("Could not load drivers.");
     }
-  }
+  };
 
   useEffect(() => {
-    loadScheduleTemplates()
-    loadBusLines()
-    loadBuses()
-    loadDrivers()
-  }, [])
+    loadSchedules();
+    loadBusLines();
+    loadDrivers();
+  }, []);
 
   const handleScheduleChange = async () => {
-    await loadScheduleTemplates()
-  }
+    await loadSchedules();
+  };
 
   return (
     <div>
-      {/* Timetable widget - compact daily view */}
-      <TimetableDisplay
+      <WeeklyScheduleEditor
         client={client}
-        overviewDate={overviewDate}
-        setOverviewDate={setOverviewDate}
-        selectedDriverFilter={selectedDriverFilter}
-        setSelectedDriverFilter={setSelectedDriverFilter}
+        busLines={busLines}
         drivers={drivers}
+        schedules={schedules}
+        onChange={handleScheduleChange}
       />
-
-      {/* Fixed service editor - separate widget */}
-      {isAdmin && (
-        <FixedScheduleEditor
-          client={client}
-          token={token}
-          user={user}
-          scheduleTemplates={scheduleTemplates}
-          busLines={busLines}
-          buses={buses}
-          drivers={drivers}
-          message={message}
-          setMessage={setMessage}
-          onScheduleChange={handleScheduleChange}
-        />
-      )}
+      {message && <div className="message">{message}</div>}
     </div>
-  )
+  );
 }

admin_ui/src/components/WeeklyScheduleEditor.jsx

@@ -0,0 +1,268 @@
+import React, { useMemo, useState } from "react";
+
+const DAY_GROUPS = [
+  { value: "weekdays", label: "Weekdays", days: [1, 2, 3, 4, 5] },
+  { value: "saturday", label: "Saturday", days: [6] },
+  { value: "sunday", label: "Sunday", days: [0] },
+];
+
+const dayLabel = (day) =>
+  [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ][day];
+
+export default function WeeklyScheduleEditor({
+  client,
+  busLines,
+  drivers,
+  schedules,
+  onChange,
+}) {
+  const [lineId, setLineId] = useState("");
+  const [category, setCategory] = useState("weekdays");
+  const [startTimes, setStartTimes] = useState(["08:00"]);
+  const [newStartTime, setNewStartTime] = useState("");
+  const [driverId, setDriverId] = useState("");
+  const [message, setMessage] = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  const groupedSchedules = useMemo(() => {
+    return schedules.reduce((groups, schedule) => {
+      const key =
+        schedule.dayOfWeek >= 1 && schedule.dayOfWeek <= 5
+          ? "weekdays"
+          : schedule.dayOfWeek === 6
+            ? "saturday"
+            : "sunday";
+      groups[key] = [...(groups[key] || []), schedule];
+      return groups;
+    }, {});
+  }, [schedules]);
+
+  const createSchedules = async (event) => {
+    event.preventDefault();
+    setMessage(null);
+    if (!lineId || startTimes.length === 0) {
+      setMessage("Choose a line and add at least one departure time.");
+      return;
+    }
+
+    const group = DAY_GROUPS.find((item) => item.value === category);
+    setSaving(true);
+    try {
+      const response = await client.post("/admin/weekly-schedules/bulk", {
+        busLineId: Number(lineId),
+        dayOfWeeks: group.days,
+        startTimes,
+        driverId: driverId ? Number(driverId) : null,
+      });
+      setMessage(
+        `${response.data.createdCount} departures created for ${group.label}.`,
+      );
+      setStartTimes(["08:00"]);
+      setNewStartTime("");
+      onChange();
+    } catch (error) {
+      setMessage(error.response?.data?.error || "Could not save the schedule.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addStartTime = () => {
+    if (!newStartTime || startTimes.includes(newStartTime)) return;
+    setStartTimes([...startTimes, newStartTime].sort());
+    setNewStartTime("");
+  };
+
+  const removeStartTime = (time) => {
+    setStartTimes(startTimes.filter((item) => item !== time));
+  };
+
+  const assignDriver = async (scheduleId, value) => {
+    try {
+      await client.put(`/admin/weekly-schedules/${scheduleId}/shift`, {
+        driverId: value ? Number(value) : null,
+      });
+      setMessage("Driver assignment updated.");
+      onChange();
+    } catch (error) {
+      setMessage(
+        error.response?.data?.error ||
+          "Could not update the driver assignment.",
+      );
+    }
+  };
+
+  const removeSchedule = async (scheduleId) => {
+    if (!window.confirm("Delete this weekly schedule?")) return;
+    try {
+      await client.delete(`/admin/weekly-schedules/${scheduleId}`);
+      setMessage("Weekly schedule deleted.");
+      onChange();
+    } catch (error) {
+      setMessage(
+        error.response?.data?.error || "Could not delete the schedule.",
+      );
+    }
+  };
+
+  return (
+    <section className="card">
+      <div className="section-header">
+        <div>
+          <h3>Weekly schedules</h3>
+          <p>
+            Add multiple daily departures for weekdays, Saturday, or Sunday,
+            then assign a driver to the generated templates.
+          </p>
+        </div>
+      </div>
+
+      <form onSubmit={createSchedules} className="stack-form">
+        <div className="form-row">
+          <select
+            value={lineId}
+            onChange={(event) => setLineId(event.target.value)}
+          >
+            <option value="">Choose bus line</option>
+            {busLines.map((line) => (
+              <option key={line.id} value={line.id}>
+                Line {line.lineNumber} ({line.startStop} to {line.endStop})
+              </option>
+            ))}
+          </select>
+          <select
+            value={category}
+            onChange={(event) => setCategory(event.target.value)}
+          >
+            {DAY_GROUPS.map((group) => (
+              <option key={group.value} value={group.value}>
+                {group.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="form-row" style={{ alignItems: "center" }}>
+          <input
+            type="time"
+            value={newStartTime}
+            onChange={(event) => setNewStartTime(event.target.value)}
+            aria-label="New departure time"
+          />
+          <button type="button" className="secondary" onClick={addStartTime}>
+            Add departure
+          </button>
+          <div
+            style={{
+              display: "flex",
+              gap: "0.5rem",
+              flexWrap: "wrap",
+              flex: 1,
+            }}
+          >
+            {startTimes.map((time) => (
+              <span
+                key={time}
+                style={{
+                  display: "inline-flex",
+                  gap: "0.4rem",
+                  alignItems: "center",
+                  padding: "0.4rem 0.6rem",
+                  border: "1px solid #c7dcff",
+                  borderRadius: "999px",
+                  background: "#eaf2ff",
+                }}
+              >
+                {time}
+                <button
+                  type="button"
+                  onClick={() => removeStartTime(time)}
+                  aria-label={`Remove departure ${time}`}
+                  style={{
+                    border: "none",
+                    background: "transparent",
+                    cursor: "pointer",
+                  }}
+                >
+                  x
+                </button>
+              </span>
+            ))}
+          </div>
+          <select
+            value={driverId}
+            onChange={(event) => setDriverId(event.target.value)}
+          >
+            <option value="">Unassigned</option>
+            {drivers.map((driver) => (
+              <option key={driver.id} value={driver.id}>
+                {driver.name}
+              </option>
+            ))}
+          </select>
+          <button type="submit" disabled={saving}>
+            {saving ? "Saving..." : `Create ${startTimes.length} departures`}
+          </button>
+        </div>
+      </form>
+
+      {message && <div className="message">{message}</div>}
+
+      {DAY_GROUPS.map((group) => (
+        <div key={group.value} style={{ marginTop: "1.5rem" }}>
+          <h4>{group.label}</h4>
+          {(groupedSchedules[group.value] || []).length === 0 ? (
+            <p>No schedules configured.</p>
+          ) : (
+            <div style={{ display: "grid", gap: "0.75rem" }}>
+              {groupedSchedules[group.value].map((schedule) => (
+                <article key={schedule.id} className="schedule-card">
+                  <div className="schedule-header">
+                    <strong>Line {schedule.lineNumber}</strong>
+                    <span className="schedule-time">
+                      {String(schedule.startTime).slice(0, 5)} -{" "}
+                      {String(schedule.endTime).slice(0, 5)}
+                    </span>
+                  </div>
+                  <div className="schedule-details">
+                    {dayLabel(schedule.dayOfWeek)}: {schedule.startStop} to{" "}
+                    {schedule.endStop}
+                  </div>
+                  <div className="form-row" style={{ marginTop: "0.75rem" }}>
+                    <select
+                      value={schedule.driverId || ""}
+                      onChange={(event) =>
+                        assignDriver(schedule.id, event.target.value)
+                      }
+                    >
+                      <option value="">Unassigned</option>
+                      {drivers.map((driver) => (
+                        <option key={driver.id} value={driver.id}>
+                          {driver.name}
+                        </option>
+                      ))}
+                    </select>
+                    <button
+                      type="button"
+                      className="danger"
+                      onClick={() => removeSchedule(schedule.id)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </section>
+  );
+}