Adopt @lavamoat/allow-scripts to gate npm install scripts

Disables dependency lifecycle scripts by default via .npmrc
(ignore-scripts=true) so arbitrary packages cannot execute code at
install time. An explicit allowlist in web/package.json opts specific
packages back in, and CI/Docker/Taskfile now run allow-scripts after
npm install to apply it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

.claude/settings.json

@@ -9,7 +9,8 @@
       "Bash(go tool cover -func=coverage.out)",
       "Bash(tea issue:*)",
       "Bash(go test:*)",
-      "Bash(npm test:*)"
+      "Bash(npm test:*)",
+      "Bash(go vet:*)"
     ]
   }
 }

.env.example

@@ -1,4 +1,8 @@
 PORT=8080
-DATABASE_DSN=walkies.db
+DB_HOST=localhost
+DB_PORT=3306
+DB_USER=root
+DB_PASSWORD=
+DB_NAME=walkies
 JWT_SECRET=change-me-in-production
-STATIC_DIR=./web/build
+STATIC_DIR=./web/dist

.gitea/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
 
       - name: Install dependencies
         working-directory: web
-        run: npm install
+        run: npm install && npm exec -- allow-scripts
 
       - name: Type check
         working-directory: web
@@ -44,4 +44,4 @@ jobs:
 
       - name: Run tests
         working-directory: web
-        run: CI=true npm test -- --watchAll=false
+        run: npm test

CLAUDE.md

@@ -45,7 +45,7 @@ All API routes are prefixed `/api/v1`. The Go binary serves the compiled React a
 
 ### React Frontend
 
-Standard CRA layout in `web/src/`:
+Vite + React + TypeScript in `web/src/`. Tests use Vitest with jsdom.
 
 - `api.ts` — typed fetch wrapper; reads JWT from `localStorage`, prefixes `BASE = '/api/v1'`
 - `auth.tsx` — `AuthProvider` context; decodes the JWT payload to expose `role` and `volunteerID`

Dockerfile

@@ -1,8 +1,8 @@
 # Stage 1: Build React frontend
 FROM node:22-alpine AS frontend
 WORKDIR /app/web
-COPY web/package*.json ./
+COPY web/package*.json web/.npmrc ./
-RUN npm install
+RUN npm install && npm exec -- allow-scripts
 COPY web/ ./
 RUN npm run build
 
@@ -19,7 +19,7 @@ FROM alpine:3.21
 RUN apk add --no-cache ca-certificates tzdata
 WORKDIR /app
 COPY --from=backend /walkies ./walkies
-COPY --from=frontend /app/web/build ./web/dist
+COPY --from=frontend /app/web/dist ./web/dist
 EXPOSE 8080
 ENV STATIC_DIR=/app/web/dist
 CMD ["./walkies"]

README.md

@@ -4,8 +4,9 @@ A web-based application for an animal shelter to manage volunteer scheduling, ti
 
 ## Requirements
 
-- [Go](https://golang.org/) 1.21+
+- [Go](https://golang.org/) 1.25+
-- [Node.js](https://nodejs.org/) 18+
+- [Node.js](https://nodejs.org/) 22+
+- [MySQL](https://www.mysql.com/) 8.0
 - [Task](https://taskfile.dev/) (`brew install go-task` or see [install docs](https://taskfile.dev/installation/))
 - [Docker](https://www.docker.com/) (optional, for containerised deployment)
 
@@ -64,8 +65,12 @@ The server is configured via environment variables:
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `PORT` | `8080` | HTTP listen port |
-| `DATABASE_DSN` | `walkies.db` | SQLite file path |
+| `DB_HOST` | `localhost` | MySQL host |
+| `DB_PORT` | `3306` | MySQL port |
+| `DB_USER` | `root` | MySQL username |
+| `DB_PASSWORD` | *(empty)* | MySQL password |
+| `DB_NAME` | `walkies` | MySQL database name |
 | `JWT_SECRET` | `change-me-in-production` | HMAC signing key — **change this** |
-| `STATIC_DIR` | `./web/build` | Path to compiled React app |
+| `STATIC_DIR` | `./web/dist` | Path to compiled React app |
 
 Copy `.env.example` to `.env` to set these locally (the server reads environment variables directly; use a process manager or Docker to inject them).

Taskfile.yml

@@ -3,7 +3,7 @@ version: '3'
 vars:
   BINARY: walkies
   WEB_DIR: web
-  STATIC_DIR: "{{.WEB_DIR}}/build"
+  STATIC_DIR: "{{.WEB_DIR}}/dist"
 
 tasks:
   default:
@@ -15,7 +15,9 @@ tasks:
   web:install:
     desc: Install frontend dependencies
     dir: "{{.WEB_DIR}}"
-    cmd: npm install
+    cmds:
+      - npm install
+      - npm exec -- allow-scripts
     sources:
       - package.json
     generates:
@@ -31,20 +33,22 @@ tasks:
       - public/**/*
       - package.json
       - tsconfig.json
+      - vite.config.ts
+      - index.html
     generates:
-      - build/**/*
+      - dist/**/*
 
   web:dev:
     desc: Start frontend dev server (hot reload on :3000)
     dir: "{{.WEB_DIR}}"
     deps: [web:install]
-    cmd: npm start
+    cmd: npm run dev
 
   web:test:
     desc: Run frontend tests
     dir: "{{.WEB_DIR}}"
     deps: [web:install]
-    cmd: npm test -- --watchAll=false
+    cmd: npm test
 
   # ── Backend ─────────────────────────────────────────────────────────────────
 
@@ -121,7 +125,7 @@ tasks:
     desc: Remove build artifacts
     cmds:
       - rm -f {{.BINARY}}
-      - rm -rf {{.WEB_DIR}}/build
+      - rm -rf {{.WEB_DIR}}/dist
 
   tidy:
     desc: Tidy Go modules

internal/db/schema.go

@@ -134,5 +134,15 @@ var statements = []string{
     FOREIGN KEY (volunteer_id) REFERENCES volunteers(id) ON DELETE CASCADE,
     INDEX idx_instance_id (instance_id),
     INDEX idx_volunteer_id (volunteer_id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci`,
+	`CREATE TABLE IF NOT EXISTS time_off_removed_shifts (
+    id            INT AUTO_INCREMENT PRIMARY KEY,
+    time_off_id   INT NOT NULL,
+    instance_id   INT NOT NULL,
+    volunteer_id  INT NOT NULL,
+    FOREIGN KEY (time_off_id) REFERENCES time_off_requests(id) ON DELETE CASCADE,
+    FOREIGN KEY (instance_id) REFERENCES shift_instances(id) ON DELETE CASCADE,
+    FOREIGN KEY (volunteer_id) REFERENCES volunteers(id) ON DELETE CASCADE,
+    INDEX idx_time_off_id (time_off_id)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci`,
 }

internal/schedule/handler.go

@@ -19,9 +19,15 @@ type Notifier interface {
 	CreateNotification(ctx context.Context, volunteerID int64, message string) error
 }
 
+// TimeOffChecker checks whether a volunteer has approved time off on a date (FR-T06).
+type TimeOffChecker interface {
+	HasApprovedTimeOff(ctx context.Context, volunteerID int64, date string) (bool, error)
+}
+
 type Handler struct {
 	store          Storer
 	notifier       Notifier
+	timeOffChecker TimeOffChecker
 }
 
 // Storer is the interface the Handler depends on.
@@ -41,13 +47,13 @@ type Storer interface {
 	ConfirmShift(ctx context.Context, instanceID, volunteerID int64) error
 }
 
-func NewHandler(store *Store, notifier Notifier) *Handler {
+func NewHandler(store *Store, notifier Notifier, timeOffChecker TimeOffChecker) *Handler {
-	return &Handler{store: store, notifier: notifier}
+	return &Handler{store: store, notifier: notifier, timeOffChecker: timeOffChecker}
 }
 
 // NewHandlerFromInterfaces constructs a Handler from interface values, intended for testing.
-func NewHandlerFromInterfaces(store Storer, notifier Notifier) *Handler {
+func NewHandlerFromInterfaces(store Storer, notifier Notifier, timeOffChecker TimeOffChecker) *Handler {
-	return &Handler{store: store, notifier: notifier}
+	return &Handler{store: store, notifier: notifier, timeOffChecker: timeOffChecker}
 }
 
 // ---------------------------------------------------------------------------
@@ -263,6 +269,29 @@ func (h *Handler) UpdateInstance(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// FR-T06: Block assigning volunteers with approved time off on the shift date
+	if in.VolunteerIDs != nil && h.timeOffChecker != nil {
+		existing, getErr := h.store.GetInstance(r.Context(), id)
+		if getErr != nil && !errors.Is(getErr, ErrNotFound) {
+			respond.Error(w, http.StatusInternalServerError, "could not get shift")
+			return
+		}
+		if existing != nil {
+			for _, vid := range *in.VolunteerIDs {
+				hasTimeOff, checkErr := h.timeOffChecker.HasApprovedTimeOff(r.Context(), vid, existing.Date)
+				if checkErr != nil {
+					respond.Error(w, http.StatusInternalServerError, "could not check time off")
+					return
+				}
+				if hasTimeOff {
+					respond.Error(w, http.StatusConflict,
+						fmt.Sprintf("Volunteer %d has approved time off on %s. Remove the time off first.", vid, existing.Date))
+					return
+				}
+			}
+		}
+	}
+
 	inst, added, err := h.store.UpdateInstance(r.Context(), id, in)
 	if errors.Is(err, ErrNotFound) {
 		respond.Error(w, http.StatusNotFound, "shift not found")

internal/schedule/handler_test.go

@@ -200,7 +200,7 @@ func do(t *testing.T, router http.Handler, method, path, body, token string) *ht
 func TestListTemplates_ReturnsEmpty(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -219,7 +219,7 @@ func TestListTemplates_ReturnsEmpty(t *testing.T) {
 func TestCreateTemplate_AdminOnly(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 2, "volunteer")
@@ -235,7 +235,7 @@ func TestCreateTemplate_AdminOnly(t *testing.T) {
 func TestCreateTemplate_Success(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -256,7 +256,7 @@ func TestCreateTemplate_Success(t *testing.T) {
 func TestCreateTemplate_MissingFields(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -271,7 +271,7 @@ func TestCreateTemplate_MissingFields(t *testing.T) {
 func TestDeleteTemplate_AdminOnly(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 2, "volunteer")
@@ -285,7 +285,7 @@ func TestDeleteTemplate_AdminOnly(t *testing.T) {
 func TestDeleteTemplate_Success(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -303,7 +303,7 @@ func TestDeleteTemplate_Success(t *testing.T) {
 func TestGenerateInstances_AdminOnly(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 2, "volunteer")
@@ -318,7 +318,7 @@ func TestGenerateInstances_AdminOnly(t *testing.T) {
 func TestGenerateInstances_AlreadyExists(t *testing.T) {
 	store := &fakeStore{genErr: schedule.ErrAlreadyExists}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -337,7 +337,7 @@ func TestGenerateInstances_Success(t *testing.T) {
 		},
 	}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -362,7 +362,7 @@ func TestPublishMonth_SendsNotifications(t *testing.T) {
 		},
 	}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -380,7 +380,7 @@ func TestPublishMonth_SendsNotifications(t *testing.T) {
 func TestUnpublishMonth_SendsNotifications(t *testing.T) {
 	store := &fakeStore{unpubResult: []int64{10, 20}}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -398,7 +398,7 @@ func TestUnpublishMonth_SendsNotifications(t *testing.T) {
 func TestUpdateInstance_AdminOnly(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 2, "volunteer")
@@ -424,7 +424,7 @@ func TestUpdateInstance_PublishedResetsAndNotifies(t *testing.T) {
 		addedVols: []int64{6}, // Bob is newly added
 	}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 1, "admin")
@@ -446,7 +446,7 @@ func TestUpdateInstance_PublishedResetsAndNotifies(t *testing.T) {
 func TestConfirmShift_NotAssigned(t *testing.T) {
 	store := &fakeStore{confirmErr: schedule.ErrNotFound}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 5, "volunteer")
@@ -460,7 +460,7 @@ func TestConfirmShift_NotAssigned(t *testing.T) {
 func TestConfirmShift_Success(t *testing.T) {
 	store := &fakeStore{}
 	notifier := &fakeNotifier{}
-	h := schedule.NewHandlerFromInterfaces(store, notifier)
+	h := schedule.NewHandlerFromInterfaces(store, notifier, nil)
 	router := newRouter(h)
 
 	token := jwtForRole(t, 5, "volunteer")

internal/schedule/schedule.go

@@ -590,7 +590,7 @@ func (s *Store) templateRoles(ctx context.Context, templateID int64) ([]Template
 		return nil, fmt.Errorf("get template roles: %w", err)
 	}
 	defer rows.Close()
-	var roles []TemplateRole
+	roles := make([]TemplateRole, 0)
 	for rows.Next() {
 		var r TemplateRole
 		if err := rows.Scan(&r.ID, &r.TemplateID, &r.RoleName, &r.Count); err != nil {
@@ -608,7 +608,7 @@ func (s *Store) templateVolunteerIDs(ctx context.Context, templateID int64) ([]i
 		return nil, fmt.Errorf("get template volunteers: %w", err)
 	}
 	defer rows.Close()
-	var ids []int64
+	ids := make([]int64, 0)
 	for rows.Next() {
 		var id int64
 		if err := rows.Scan(&id); err != nil {
@@ -631,7 +631,7 @@ func (s *Store) instanceVolunteers(ctx context.Context, instanceID int64) ([]Ins
 		return nil, fmt.Errorf("get instance volunteers: %w", err)
 	}
 	defer rows.Close()
-	var vols []InstanceVolunteer
+	vols := make([]InstanceVolunteer, 0)
 	for rows.Next() {
 		var iv InstanceVolunteer
 		var confirmedAt sql.NullString

internal/server/server.go

@@ -12,6 +12,7 @@ import (
 	"git.unsupervised.ca/walkies/internal/notification"
 	"git.unsupervised.ca/walkies/internal/schedule"
 	"git.unsupervised.ca/walkies/internal/server/middleware"
+	"git.unsupervised.ca/walkies/internal/setup"
 	"git.unsupervised.ca/walkies/internal/timeoff"
 	"git.unsupervised.ca/walkies/internal/volunteer"
 )
@@ -25,15 +26,19 @@ func New(db *sql.DB, jwtSecret string, staticDir string) http.Handler {
 	notificationStore := notification.NewStore(db)
 	notificationHandler := notification.NewHandler(notificationStore)
 
-	scheduleStore := schedule.NewStore(db)
-	scheduleHandler := schedule.NewHandler(scheduleStore, notificationStore)
-
 	timeoffStore := timeoff.NewStore(db)
-	timeoffHandler := timeoff.NewHandler(timeoffStore)
+
+	scheduleStore := schedule.NewStore(db)
+	scheduleHandler := schedule.NewHandler(scheduleStore, notificationStore, timeoffStore)
+
+	timeoffHandler := timeoff.NewHandler(timeoffStore, notificationStore, volunteerStore)
 
 	checkinStore := checkin.NewStore(db)
 	checkinHandler := checkin.NewHandler(checkinStore)
 
+	setupStore := setup.NewStore(db)
+	setupHandler := setup.NewHandler(setupStore, authSvc)
+
 	r := chi.NewRouter()
 	r.Use(chimiddleware.Logger)
 	r.Use(chimiddleware.Recoverer)
@@ -45,6 +50,10 @@ func New(db *sql.DB, jwtSecret string, staticDir string) http.Handler {
 		r.Post("/auth/login", volunteerHandler.Login)
 		r.Post("/auth/activate", volunteerHandler.Activate)
 
+		// Public setup endpoints (self-disabling once first user exists)
+		r.Get("/setup/status", setupHandler.Status)
+		r.Post("/setup/admin", setupHandler.CreateAdmin)
+
 		// Protected routes
 		r.Group(func(r chi.Router) {
 			r.Use(middleware.Authenticate(authSvc))
@@ -73,7 +82,10 @@ func New(db *sql.DB, jwtSecret string, staticDir string) http.Handler {
 			// Time off
 			r.Get("/timeoff", timeoffHandler.List)
 			r.Post("/timeoff", timeoffHandler.Create)
+			r.Put("/timeoff/{id}", timeoffHandler.Update)
+			r.Delete("/timeoff/{id}", timeoffHandler.Delete)
 			r.With(middleware.RequireAdmin).Put("/timeoff/{id}/review", timeoffHandler.Review)
+			r.With(middleware.RequireAdmin).Get("/timeoff/{id}/shifts", timeoffHandler.RemovedShifts)
 
 			// Check-in / check-out
 			r.Post("/checkin", checkinHandler.CheckIn)
@@ -86,8 +98,25 @@ func New(db *sql.DB, jwtSecret string, staticDir string) http.Handler {
 		})
 	})
 
-	// Serve static React app for all other routes
+	// Serve static React app for all other routes, with SPA fallback
-	r.Handle("/*", http.FileServer(http.Dir(staticDir)))
+	r.Handle("/*", spaHandler(staticDir))
 
 	return r
 }
+
+// spaHandler serves static files from dir, falling back to index.html for
+// paths that don't match a file on disk (so client-side routing works).
+func spaHandler(dir string) http.HandlerFunc {
+	fs := http.Dir(dir)
+	fileServer := http.FileServer(fs)
+	return func(w http.ResponseWriter, r *http.Request) {
+		// Try to open the requested path as a static file.
+		if f, err := fs.Open(r.URL.Path); err == nil {
+			f.Close()
+			fileServer.ServeHTTP(w, r)
+			return
+		}
+		// Not a real file — serve index.html and let React Router handle it.
+		http.ServeFile(w, r, dir+"/index.html")
+	}
+}

internal/setup/handler.go

@@ -0,0 +1,84 @@
+package setup
+
+import (
+	"encoding/json"
+	"errors"
+	"net/http"
+
+	"git.unsupervised.ca/walkies/internal/auth"
+	"git.unsupervised.ca/walkies/internal/respond"
+)
+
+// TokenIssuer is the subset of auth.Service the setup handler needs.
+type TokenIssuer interface {
+	IssueToken(volunteerID int64, role string) (string, error)
+}
+
+type Handler struct {
+	store   Storer
+	authSvc TokenIssuer
+}
+
+func NewHandler(store *Store, authSvc *auth.Service) *Handler {
+	return &Handler{store: store, authSvc: authSvc}
+}
+
+// NewHandlerFromInterfaces constructs a Handler from interface values, intended for testing.
+func NewHandlerFromInterfaces(store Storer, authSvc TokenIssuer) *Handler {
+	return &Handler{store: store, authSvc: authSvc}
+}
+
+// Status handles GET /api/v1/setup/status.
+func (h *Handler) Status(w http.ResponseWriter, r *http.Request) {
+	needs, err := h.store.NeedsSetup(r.Context())
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not check setup status")
+		return
+	}
+	respond.JSON(w, http.StatusOK, map[string]bool{"needs_setup": needs})
+}
+
+// CreateAdmin handles POST /api/v1/setup/admin.
+func (h *Handler) CreateAdmin(w http.ResponseWriter, r *http.Request) {
+	var body struct {
+		Name     string `json:"name"`
+		Email    string `json:"email"`
+		Password string `json:"password"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		respond.Error(w, http.StatusBadRequest, "invalid request body")
+		return
+	}
+	if body.Name == "" || body.Email == "" || body.Password == "" {
+		respond.Error(w, http.StatusBadRequest, "name, email, and password are required")
+		return
+	}
+	if len(body.Password) < 8 {
+		respond.Error(w, http.StatusBadRequest, "password must be at least 8 characters")
+		return
+	}
+
+	hashed, err := auth.HashPassword(body.Password)
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not hash password")
+		return
+	}
+
+	id, err := h.store.CreateAdmin(r.Context(), body.Name, body.Email, hashed)
+	if errors.Is(err, ErrSetupAlreadyDone) {
+		respond.Error(w, http.StatusForbidden, "setup already completed")
+		return
+	}
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not create admin account")
+		return
+	}
+
+	token, err := h.authSvc.IssueToken(id, "admin")
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not issue token")
+		return
+	}
+
+	respond.JSON(w, http.StatusCreated, map[string]string{"token": token})
+}

internal/setup/handler_test.go

@@ -0,0 +1,168 @@
+package setup_test
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"git.unsupervised.ca/walkies/internal/setup"
+)
+
+// ---- fakes ---------------------------------------------------------------
+
+type fakeStore struct {
+	needsSetup     bool
+	needsSetupErr  error
+	createAdminID  int64
+	createAdminErr error
+}
+
+func (f *fakeStore) NeedsSetup(_ context.Context) (bool, error) {
+	return f.needsSetup, f.needsSetupErr
+}
+
+func (f *fakeStore) CreateAdmin(_ context.Context, _, _, _ string) (int64, error) {
+	return f.createAdminID, f.createAdminErr
+}
+
+type fakeTokenIssuer struct {
+	token string
+	err   error
+}
+
+func (f *fakeTokenIssuer) IssueToken(_ int64, _ string) (string, error) {
+	return f.token, f.err
+}
+
+// Compile-time interface checks.
+var _ setup.Storer = (*fakeStore)(nil)
+var _ setup.TokenIssuer = (*fakeTokenIssuer)(nil)
+
+// ---- helpers -------------------------------------------------------------
+
+func do(t *testing.T, handler http.HandlerFunc, method, path, body string) *httptest.ResponseRecorder {
+	t.Helper()
+	var b *bytes.Reader
+	if body != "" {
+		b = bytes.NewReader([]byte(body))
+	} else {
+		b = bytes.NewReader(nil)
+	}
+	req := httptest.NewRequest(method, path, b)
+	if body != "" {
+		req.Header.Set("Content-Type", "application/json")
+	}
+	w := httptest.NewRecorder()
+	handler.ServeHTTP(w, req)
+	return w
+}
+
+// ---- Status tests --------------------------------------------------------
+
+func TestStatus_NeedsSetup(t *testing.T) {
+	h := setup.NewHandlerFromInterfaces(
+		&fakeStore{needsSetup: true},
+		&fakeTokenIssuer{},
+	)
+	w := do(t, h.Status, "GET", "/api/v1/setup/status", "")
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body)
+	}
+	var resp map[string]bool
+	json.NewDecoder(w.Body).Decode(&resp)
+	if !resp["needs_setup"] {
+		t.Error("expected needs_setup=true")
+	}
+}
+
+func TestStatus_SetupDone(t *testing.T) {
+	h := setup.NewHandlerFromInterfaces(
+		&fakeStore{needsSetup: false},
+		&fakeTokenIssuer{},
+	)
+	w := do(t, h.Status, "GET", "/api/v1/setup/status", "")
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body)
+	}
+	var resp map[string]bool
+	json.NewDecoder(w.Body).Decode(&resp)
+	if resp["needs_setup"] {
+		t.Error("expected needs_setup=false")
+	}
+}
+
+// ---- CreateAdmin tests ---------------------------------------------------
+
+func TestCreateAdmin_Success(t *testing.T) {
+	h := setup.NewHandlerFromInterfaces(
+		&fakeStore{createAdminID: 1},
+		&fakeTokenIssuer{token: "jwt-token"},
+	)
+	w := do(t, h.CreateAdmin, "POST", "/api/v1/setup/admin",
+		`{"name":"Admin","email":"admin@example.com","password":"supersecret"}`)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf("expected 201, got %d: %s", w.Code, w.Body)
+	}
+	var resp map[string]string
+	json.NewDecoder(w.Body).Decode(&resp)
+	if resp["token"] != "jwt-token" {
+		t.Errorf("expected token jwt-token, got %q", resp["token"])
+	}
+}
+
+func TestCreateAdmin_AlreadyDone(t *testing.T) {
+	h := setup.NewHandlerFromInterfaces(
+		&fakeStore{createAdminErr: setup.ErrSetupAlreadyDone},
+		&fakeTokenIssuer{},
+	)
+	w := do(t, h.CreateAdmin, "POST", "/api/v1/setup/admin",
+		`{"name":"Admin","email":"admin@example.com","password":"supersecret"}`)
+
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestCreateAdmin_MissingFields(t *testing.T) {
+	h := setup.NewHandlerFromInterfaces(
+		&fakeStore{},
+		&fakeTokenIssuer{},
+	)
+
+	tests := []struct {
+		name string
+		body string
+	}{
+		{"missing name", `{"email":"a@b.com","password":"supersecret"}`},
+		{"missing email", `{"name":"Admin","password":"supersecret"}`},
+		{"missing password", `{"name":"Admin","email":"a@b.com"}`},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			w := do(t, h.CreateAdmin, "POST", "/api/v1/setup/admin", tc.body)
+			if w.Code != http.StatusBadRequest {
+				t.Fatalf("expected 400, got %d: %s", w.Code, w.Body)
+			}
+		})
+	}
+}
+
+func TestCreateAdmin_PasswordTooShort(t *testing.T) {
+	h := setup.NewHandlerFromInterfaces(
+		&fakeStore{},
+		&fakeTokenIssuer{},
+	)
+	w := do(t, h.CreateAdmin, "POST", "/api/v1/setup/admin",
+		`{"name":"Admin","email":"admin@example.com","password":"short"}`)
+
+	if w.Code != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d: %s", w.Code, w.Body)
+	}
+}

internal/setup/setup.go

@@ -0,0 +1,68 @@
+package setup
+
+import (
+	"context"
+	"database/sql"
+	"errors"
+)
+
+var ErrSetupAlreadyDone = errors.New("setup already completed")
+
+// Storer is the interface for setup-related DB operations.
+type Storer interface {
+	NeedsSetup(ctx context.Context) (bool, error)
+	CreateAdmin(ctx context.Context, name, email, hashedPassword string) (int64, error)
+}
+
+type Store struct {
+	db *sql.DB
+}
+
+func NewStore(db *sql.DB) *Store {
+	return &Store{db: db}
+}
+
+// NeedsSetup returns true when the volunteers table has zero rows.
+func (s *Store) NeedsSetup(ctx context.Context) (bool, error) {
+	var count int
+	err := s.db.QueryRowContext(ctx, `SELECT COUNT(*) FROM volunteers`).Scan(&count)
+	if err != nil {
+		return false, err
+	}
+	return count == 0, nil
+}
+
+// CreateAdmin atomically checks that no users exist and inserts the first admin.
+func (s *Store) CreateAdmin(ctx context.Context, name, email, hashedPassword string) (int64, error) {
+	tx, err := s.db.BeginTx(ctx, nil)
+	if err != nil {
+		return 0, err
+	}
+	defer tx.Rollback()
+
+	var count int
+	if err := tx.QueryRowContext(ctx, `SELECT COUNT(*) FROM volunteers`).Scan(&count); err != nil {
+		return 0, err
+	}
+	if count > 0 {
+		return 0, ErrSetupAlreadyDone
+	}
+
+	res, err := tx.ExecContext(ctx,
+		`INSERT INTO volunteers (name, email, password, role, active, operational_roles) VALUES (?, ?, ?, 'admin', 1, '')`,
+		name, email, hashedPassword,
+	)
+	if err != nil {
+		return 0, err
+	}
+
+	id, err := res.LastInsertId()
+	if err != nil {
+		return 0, err
+	}
+
+	if err := tx.Commit(); err != nil {
+		return 0, err
+	}
+	return id, nil
+}

internal/timeoff/handler.go

@@ -1,22 +1,56 @@
 package timeoff
 
 import (
+	"context"
 	"encoding/json"
 	"errors"
+	"fmt"
 	"net/http"
 	"strconv"
+	"time"
 
 	"git.unsupervised.ca/walkies/internal/respond"
 	"git.unsupervised.ca/walkies/internal/server/middleware"
 	"github.com/go-chi/chi/v5"
 )
 
-type Handler struct {
+// Notifier is the subset of notification.Store the handler needs.
-	store *Store
+type Notifier interface {
+	CreateNotification(ctx context.Context, volunteerID int64, message string) error
 }
 
-func NewHandler(store *Store) *Handler {
+// AdminLister returns admin volunteer IDs so the handler can notify them.
-	return &Handler{store: store}
+type AdminLister interface {
+	ListAdminIDs(ctx context.Context) ([]int64, error)
+}
+
+// Storer is the interface the Handler depends on.
+type Storer interface {
+	Create(ctx context.Context, volunteerID int64, in CreateInput) (*Request, error)
+	GetByID(ctx context.Context, id int64) (*Request, error)
+	List(ctx context.Context, volunteerID int64) ([]Request, error)
+	Review(ctx context.Context, id, reviewerID int64, status string) (*Request, error)
+	Update(ctx context.Context, id int64, in UpdateInput) (*Request, error)
+	Delete(ctx context.Context, id int64) error
+	ConflictingShifts(ctx context.Context, volunteerID int64, startsAt, endsAt string) ([]ConflictingShift, error)
+	RemoveFromConflictingShifts(ctx context.Context, timeOffID, volunteerID int64, startsAt, endsAt string) ([]ConflictingShift, error)
+	RemovedShiftsForTimeOff(ctx context.Context, timeOffID int64) ([]ConflictingShift, error)
+	RestoreRemovedShifts(ctx context.Context, timeOffID int64) ([]ConflictingShift, error)
+}
+
+type Handler struct {
+	store       Storer
+	notifier    Notifier
+	adminLister AdminLister
+}
+
+func NewHandler(store *Store, notifier Notifier, adminLister AdminLister) *Handler {
+	return &Handler{store: store, notifier: notifier, adminLister: adminLister}
+}
+
+// NewHandlerFromInterfaces constructs a Handler from interface values, intended for testing.
+func NewHandlerFromInterfaces(store Storer, notifier Notifier, adminLister AdminLister) *Handler {
+	return &Handler{store: store, notifier: notifier, adminLister: adminLister}
 }
 
 // GET /api/v1/timeoff
@@ -38,6 +72,9 @@ func (h *Handler) List(w http.ResponseWriter, r *http.Request) {
 }
 
 // POST /api/v1/timeoff
+// Creates time off with status "approved". If confirm_conflicts is true and the
+// volunteer is assigned to shifts in the date range, they are auto-removed and
+// admins are notified (FR-T03).
 func (h *Handler) Create(w http.ResponseWriter, r *http.Request) {
 	claims := middleware.ClaimsFromContext(r.Context())
 	var in CreateInput
@@ -49,14 +86,181 @@ func (h *Handler) Create(w http.ResponseWriter, r *http.Request) {
 		respond.Error(w, http.StatusBadRequest, "starts_at and ends_at are required")
 		return
 	}
-	req, err := h.store.Create(r.Context(), claims.VolunteerID, in)
+
+	// Determine target volunteer (admin can create for others, FR-T05)
+	targetVolunteerID := claims.VolunteerID
+	if in.VolunteerID > 0 && claims.Role == "admin" {
+		targetVolunteerID = in.VolunteerID
+	}
+
+	// Check for conflicting shifts
+	conflicts, err := h.store.ConflictingShifts(r.Context(), targetVolunteerID, in.StartsAt, in.EndsAt)
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not check conflicts")
+		return
+	}
+
+	// If there are conflicts and the user hasn't confirmed, return them
+	if len(conflicts) > 0 && !in.ConfirmConflicts {
+		respond.JSON(w, http.StatusConflict, map[string]any{
+			"message":    "Time off conflicts with assigned shifts. Confirm to proceed.",
+			"conflicts":  conflicts,
+		})
+		return
+	}
+
+	// Create with auto-approved status
+	req, err := h.store.Create(r.Context(), targetVolunteerID, in)
 	if err != nil {
 		respond.Error(w, http.StatusInternalServerError, "could not create time off request")
 		return
 	}
+
+	// Auto-approve
+	req, err = h.store.Review(r.Context(), req.ID, claims.VolunteerID, "approved")
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not approve time off request")
+		return
+	}
+
+	// Remove from conflicting shifts (FR-T03)
+	if len(conflicts) > 0 {
+		removed, err := h.store.RemoveFromConflictingShifts(r.Context(), req.ID, targetVolunteerID, in.StartsAt, in.EndsAt)
+		if err != nil {
+			respond.Error(w, http.StatusInternalServerError, "could not remove from conflicting shifts")
+			return
+		}
+		// Notify admins
+		h.notifyAdmins(r.Context(), targetVolunteerID, removed)
+	}
+
 	respond.JSON(w, http.StatusCreated, req)
 }
 
+// PUT /api/v1/timeoff/{id}
+// Volunteers can edit their own future time off (FR-T02). Admins can edit any (FR-T05).
+func (h *Handler) Update(w http.ResponseWriter, r *http.Request) {
+	claims := middleware.ClaimsFromContext(r.Context())
+	id, err := strconv.ParseInt(chi.URLParam(r, "id"), 10, 64)
+	if err != nil {
+		respond.Error(w, http.StatusBadRequest, "invalid id")
+		return
+	}
+
+	existing, err := h.store.GetByID(r.Context(), id)
+	if errors.Is(err, ErrNotFound) {
+		respond.Error(w, http.StatusNotFound, "time off request not found")
+		return
+	}
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not get time off request")
+		return
+	}
+
+	// Permission: volunteers can only edit their own future time off
+	if claims.Role != "admin" {
+		if existing.VolunteerID != claims.VolunteerID {
+			respond.Error(w, http.StatusForbidden, "cannot edit another volunteer's time off")
+			return
+		}
+		if !existing.StartsAt.After(time.Now()) {
+			respond.Error(w, http.StatusForbidden, "cannot edit past time off")
+			return
+		}
+	}
+
+	var in UpdateInput
+	if err := json.NewDecoder(r.Body).Decode(&in); err != nil {
+		respond.Error(w, http.StatusBadRequest, "invalid request body")
+		return
+	}
+	if in.StartsAt == "" || in.EndsAt == "" {
+		respond.Error(w, http.StatusBadRequest, "starts_at and ends_at are required")
+		return
+	}
+
+	req, err := h.store.Update(r.Context(), id, in)
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not update time off request")
+		return
+	}
+	respond.JSON(w, http.StatusOK, req)
+}
+
+// DELETE /api/v1/timeoff/{id}
+// Volunteers can delete their own future time off (FR-T02).
+// Admin delete restores the volunteer to previously removed shifts (FR-T04).
+func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
+	claims := middleware.ClaimsFromContext(r.Context())
+	id, err := strconv.ParseInt(chi.URLParam(r, "id"), 10, 64)
+	if err != nil {
+		respond.Error(w, http.StatusBadRequest, "invalid id")
+		return
+	}
+
+	existing, err := h.store.GetByID(r.Context(), id)
+	if errors.Is(err, ErrNotFound) {
+		respond.Error(w, http.StatusNotFound, "time off request not found")
+		return
+	}
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not get time off request")
+		return
+	}
+
+	// Permission: volunteers can only delete their own future time off
+	if claims.Role != "admin" {
+		if existing.VolunteerID != claims.VolunteerID {
+			respond.Error(w, http.StatusForbidden, "cannot delete another volunteer's time off")
+			return
+		}
+		if !existing.StartsAt.After(time.Now()) {
+			respond.Error(w, http.StatusForbidden, "cannot delete past time off")
+			return
+		}
+	}
+
+	// If admin is deleting, restore volunteer to removed shifts (FR-T04)
+	var restored []ConflictingShift
+	if claims.Role == "admin" {
+		restored, err = h.store.RestoreRemovedShifts(r.Context(), id)
+		if err != nil {
+			respond.Error(w, http.StatusInternalServerError, "could not restore shifts")
+			return
+		}
+	}
+
+	if err := h.store.Delete(r.Context(), id); err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not delete time off request")
+		return
+	}
+
+	respond.JSON(w, http.StatusOK, map[string]any{
+		"deleted":         true,
+		"restored_shifts": restored,
+	})
+}
+
+// GET /api/v1/timeoff/{id}/shifts
+// Returns shifts that were removed due to this time-off request (preview for FR-T04).
+func (h *Handler) RemovedShifts(w http.ResponseWriter, r *http.Request) {
+	id, err := strconv.ParseInt(chi.URLParam(r, "id"), 10, 64)
+	if err != nil {
+		respond.Error(w, http.StatusBadRequest, "invalid id")
+		return
+	}
+
+	shifts, err := h.store.RemovedShiftsForTimeOff(r.Context(), id)
+	if err != nil {
+		respond.Error(w, http.StatusInternalServerError, "could not get removed shifts")
+		return
+	}
+	if shifts == nil {
+		shifts = []ConflictingShift{}
+	}
+	respond.JSON(w, http.StatusOK, shifts)
+}
+
 // PUT /api/v1/timeoff/{id}/review
 func (h *Handler) Review(w http.ResponseWriter, r *http.Request) {
 	claims := middleware.ClaimsFromContext(r.Context())
@@ -85,3 +289,19 @@ func (h *Handler) Review(w http.ResponseWriter, r *http.Request) {
 	}
 	respond.JSON(w, http.StatusOK, req)
 }
+
+// notifyAdmins sends a notification to all admin users about a volunteer's
+// shift removals due to time off (FR-T03).
+func (h *Handler) notifyAdmins(ctx context.Context, volunteerID int64, removed []ConflictingShift) {
+	if len(removed) == 0 {
+		return
+	}
+	adminIDs, err := h.adminLister.ListAdminIDs(ctx)
+	if err != nil {
+		return
+	}
+	msg := fmt.Sprintf("Volunteer %d has been removed from %d shift(s) due to time off.", volunteerID, len(removed))
+	for _, aid := range adminIDs {
+		h.notifier.CreateNotification(ctx, aid, msg) //nolint:errcheck
+	}
+}

internal/timeoff/handler_test.go

@@ -0,0 +1,521 @@
+package timeoff_test
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+	"time"
+
+	"git.unsupervised.ca/walkies/internal/auth"
+	"git.unsupervised.ca/walkies/internal/server/middleware"
+	"git.unsupervised.ca/walkies/internal/timeoff"
+	"github.com/go-chi/chi/v5"
+)
+
+// ---------------------------------------------------------------------------
+// Fakes
+// ---------------------------------------------------------------------------
+
+type fakeStore struct {
+	requests           []timeoff.Request
+	createResult       *timeoff.Request
+	createErr          error
+	getResult          *timeoff.Request
+	getErr             error
+	updateResult       *timeoff.Request
+	updateErr          error
+	deleteErr          error
+	reviewResult       *timeoff.Request
+	reviewErr          error
+	conflicts          []timeoff.ConflictingShift
+	conflictsErr       error
+	removedShifts      []timeoff.ConflictingShift
+	removeErr          error
+	removedForTimeOff  []timeoff.ConflictingShift
+	removedForErr      error
+	restoredShifts     []timeoff.ConflictingShift
+	restoreErr         error
+
+	removeCalled  bool
+	restoreCalled bool
+}
+
+func (f *fakeStore) Create(_ context.Context, volunteerID int64, in timeoff.CreateInput) (*timeoff.Request, error) {
+	if f.createErr != nil {
+		return nil, f.createErr
+	}
+	if f.createResult != nil {
+		return f.createResult, nil
+	}
+	return &timeoff.Request{
+		ID: 1, VolunteerID: volunteerID,
+		StartsAt: time.Date(2026, 5, 1, 0, 0, 0, 0, time.UTC),
+		EndsAt:   time.Date(2026, 5, 3, 0, 0, 0, 0, time.UTC),
+		Status:   "pending",
+	}, nil
+}
+
+func (f *fakeStore) GetByID(_ context.Context, id int64) (*timeoff.Request, error) {
+	if f.getErr != nil {
+		return nil, f.getErr
+	}
+	if f.getResult != nil {
+		return f.getResult, nil
+	}
+	return nil, timeoff.ErrNotFound
+}
+
+func (f *fakeStore) List(_ context.Context, volunteerID int64) ([]timeoff.Request, error) {
+	if volunteerID > 0 {
+		var filtered []timeoff.Request
+		for _, r := range f.requests {
+			if r.VolunteerID == volunteerID {
+				filtered = append(filtered, r)
+			}
+		}
+		return filtered, nil
+	}
+	return f.requests, nil
+}
+
+func (f *fakeStore) Review(_ context.Context, id, reviewerID int64, status string) (*timeoff.Request, error) {
+	if f.reviewErr != nil {
+		return nil, f.reviewErr
+	}
+	if f.reviewResult != nil {
+		return f.reviewResult, nil
+	}
+	return &timeoff.Request{ID: id, Status: status}, nil
+}
+
+func (f *fakeStore) Update(_ context.Context, id int64, in timeoff.UpdateInput) (*timeoff.Request, error) {
+	if f.updateErr != nil {
+		return nil, f.updateErr
+	}
+	if f.updateResult != nil {
+		return f.updateResult, nil
+	}
+	return &timeoff.Request{ID: id, Status: "approved"}, nil
+}
+
+func (f *fakeStore) Delete(_ context.Context, id int64) error {
+	return f.deleteErr
+}
+
+func (f *fakeStore) ConflictingShifts(_ context.Context, _ int64, _, _ string) ([]timeoff.ConflictingShift, error) {
+	if f.conflictsErr != nil {
+		return nil, f.conflictsErr
+	}
+	return f.conflicts, nil
+}
+
+func (f *fakeStore) RemoveFromConflictingShifts(_ context.Context, _, _ int64, _, _ string) ([]timeoff.ConflictingShift, error) {
+	f.removeCalled = true
+	if f.removeErr != nil {
+		return nil, f.removeErr
+	}
+	return f.removedShifts, nil
+}
+
+func (f *fakeStore) RemovedShiftsForTimeOff(_ context.Context, _ int64) ([]timeoff.ConflictingShift, error) {
+	if f.removedForErr != nil {
+		return nil, f.removedForErr
+	}
+	return f.removedForTimeOff, nil
+}
+
+func (f *fakeStore) RestoreRemovedShifts(_ context.Context, _ int64) ([]timeoff.ConflictingShift, error) {
+	f.restoreCalled = true
+	if f.restoreErr != nil {
+		return nil, f.restoreErr
+	}
+	return f.restoredShifts, nil
+}
+
+type fakeNotifier struct {
+	notifications []struct {
+		VolunteerID int64
+		Message     string
+	}
+}
+
+func (f *fakeNotifier) CreateNotification(_ context.Context, volunteerID int64, message string) error {
+	f.notifications = append(f.notifications, struct {
+		VolunteerID int64
+		Message     string
+	}{volunteerID, message})
+	return nil
+}
+
+type fakeAdminLister struct {
+	adminIDs []int64
+}
+
+func (f *fakeAdminLister) ListAdminIDs(_ context.Context) ([]int64, error) {
+	return f.adminIDs, nil
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+func jwtForRole(t *testing.T, id int64, role string) string {
+	t.Helper()
+	svc := auth.NewService(nil, "test-secret")
+	token, err := svc.IssueToken(id, role)
+	if err != nil {
+		t.Fatalf("issue token: %v", err)
+	}
+	return token
+}
+
+func newRouter(h *timeoff.Handler) http.Handler {
+	realAuthSvc := auth.NewService(nil, "test-secret")
+	r := chi.NewRouter()
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.Authenticate(realAuthSvc))
+		r.Get("/api/v1/timeoff", h.List)
+		r.Post("/api/v1/timeoff", h.Create)
+		r.Put("/api/v1/timeoff/{id}", h.Update)
+		r.Delete("/api/v1/timeoff/{id}", h.Delete)
+		r.Put("/api/v1/timeoff/{id}/review",
+			middleware.RequireAdmin(http.HandlerFunc(h.Review)).ServeHTTP)
+		r.Get("/api/v1/timeoff/{id}/shifts",
+			middleware.RequireAdmin(http.HandlerFunc(h.RemovedShifts)).ServeHTTP)
+	})
+	return r
+}
+
+func do(t *testing.T, router http.Handler, method, path, body, token string) *httptest.ResponseRecorder {
+	t.Helper()
+	var b *bytes.Reader
+	if body != "" {
+		b = bytes.NewReader([]byte(body))
+	} else {
+		b = bytes.NewReader(nil)
+	}
+	req := httptest.NewRequest(method, path, b)
+	if body != "" {
+		req.Header.Set("Content-Type", "application/json")
+	}
+	if token != "" {
+		req.Header.Set("Authorization", "Bearer "+token)
+	}
+	w := httptest.NewRecorder()
+	router.ServeHTTP(w, req)
+	return w
+}
+
+func setup(store *fakeStore) (*timeoff.Handler, http.Handler) {
+	notifier := &fakeNotifier{}
+	adminLister := &fakeAdminLister{adminIDs: []int64{1}}
+	h := timeoff.NewHandlerFromInterfaces(store, notifier, adminLister)
+	return h, newRouter(h)
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+func TestList_VolunteerSeesOwn(t *testing.T) {
+	store := &fakeStore{
+		requests: []timeoff.Request{
+			{ID: 1, VolunteerID: 10, Status: "approved"},
+			{ID: 2, VolunteerID: 20, Status: "pending"},
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+	w := do(t, router, "GET", "/api/v1/timeoff", "", token)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body)
+	}
+	var result []timeoff.Request
+	json.NewDecoder(w.Body).Decode(&result)
+	if len(result) != 1 {
+		t.Fatalf("expected 1 request, got %d", len(result))
+	}
+	if result[0].VolunteerID != 10 {
+		t.Errorf("expected volunteer_id=10, got %d", result[0].VolunteerID)
+	}
+}
+
+func TestList_AdminSeesAll(t *testing.T) {
+	store := &fakeStore{
+		requests: []timeoff.Request{
+			{ID: 1, VolunteerID: 10, Status: "approved"},
+			{ID: 2, VolunteerID: 20, Status: "pending"},
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 1, "admin")
+	w := do(t, router, "GET", "/api/v1/timeoff", "", token)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+	var result []timeoff.Request
+	json.NewDecoder(w.Body).Decode(&result)
+	if len(result) != 2 {
+		t.Errorf("expected 2 requests, got %d", len(result))
+	}
+}
+
+func TestCreate_NoConflicts(t *testing.T) {
+	store := &fakeStore{}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"starts_at":"2026-05-01","ends_at":"2026-05-03","reason":"vacation"}`
+	w := do(t, router, "POST", "/api/v1/timeoff", body, token)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf("expected 201, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestCreate_ConflictReturns409(t *testing.T) {
+	store := &fakeStore{
+		conflicts: []timeoff.ConflictingShift{
+			{InstanceID: 100, Name: "Morning Walk", Date: "2026-05-01", StartTime: "08:00:00", EndTime: "12:00:00"},
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"starts_at":"2026-05-01","ends_at":"2026-05-03"}`
+	w := do(t, router, "POST", "/api/v1/timeoff", body, token)
+
+	if w.Code != http.StatusConflict {
+		t.Fatalf("expected 409, got %d: %s", w.Code, w.Body)
+	}
+	var result map[string]any
+	json.NewDecoder(w.Body).Decode(&result)
+	conflicts := result["conflicts"].([]any)
+	if len(conflicts) != 1 {
+		t.Errorf("expected 1 conflict, got %d", len(conflicts))
+	}
+}
+
+func TestCreate_ConfirmConflictsProceeds(t *testing.T) {
+	store := &fakeStore{
+		conflicts: []timeoff.ConflictingShift{
+			{InstanceID: 100, Name: "Morning Walk", Date: "2026-05-01"},
+		},
+		removedShifts: []timeoff.ConflictingShift{
+			{InstanceID: 100, Name: "Morning Walk", Date: "2026-05-01"},
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"starts_at":"2026-05-01","ends_at":"2026-05-03","confirm_conflicts":true}`
+	w := do(t, router, "POST", "/api/v1/timeoff", body, token)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf("expected 201, got %d: %s", w.Code, w.Body)
+	}
+	if !store.removeCalled {
+		t.Error("expected RemoveFromConflictingShifts to be called")
+	}
+}
+
+func TestCreate_AdminForOtherVolunteer(t *testing.T) {
+	store := &fakeStore{}
+	_, router := setup(store)
+	token := jwtForRole(t, 1, "admin")
+
+	body := `{"starts_at":"2026-05-01","ends_at":"2026-05-03","volunteer_id":20}`
+	w := do(t, router, "POST", "/api/v1/timeoff", body, token)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf("expected 201, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestUpdate_VolunteerOwnFuture(t *testing.T) {
+	store := &fakeStore{
+		getResult: &timeoff.Request{
+			ID: 1, VolunteerID: 10, Status: "approved",
+			StartsAt: time.Date(2026, 5, 1, 0, 0, 0, 0, time.UTC),
+			EndsAt:   time.Date(2026, 5, 3, 0, 0, 0, 0, time.UTC),
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"starts_at":"2026-05-02","ends_at":"2026-05-04","reason":"extended"}`
+	w := do(t, router, "PUT", "/api/v1/timeoff/1", body, token)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestUpdate_VolunteerCannotEditOthers(t *testing.T) {
+	store := &fakeStore{
+		getResult: &timeoff.Request{
+			ID: 1, VolunteerID: 20, Status: "approved",
+			StartsAt: time.Date(2026, 5, 1, 0, 0, 0, 0, time.UTC),
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"starts_at":"2026-05-02","ends_at":"2026-05-04"}`
+	w := do(t, router, "PUT", "/api/v1/timeoff/1", body, token)
+
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestUpdate_VolunteerCannotEditPast(t *testing.T) {
+	store := &fakeStore{
+		getResult: &timeoff.Request{
+			ID: 1, VolunteerID: 10, Status: "approved",
+			StartsAt: time.Date(2020, 1, 1, 0, 0, 0, 0, time.UTC),
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"starts_at":"2026-05-02","ends_at":"2026-05-04"}`
+	w := do(t, router, "PUT", "/api/v1/timeoff/1", body, token)
+
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestDelete_VolunteerOwnFuture(t *testing.T) {
+	store := &fakeStore{
+		getResult: &timeoff.Request{
+			ID: 1, VolunteerID: 10, Status: "approved",
+			StartsAt: time.Date(2026, 5, 1, 0, 0, 0, 0, time.UTC),
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	w := do(t, router, "DELETE", "/api/v1/timeoff/1", "", token)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestDelete_VolunteerCannotDeleteOthers(t *testing.T) {
+	store := &fakeStore{
+		getResult: &timeoff.Request{
+			ID: 1, VolunteerID: 20, Status: "approved",
+			StartsAt: time.Date(2026, 5, 1, 0, 0, 0, 0, time.UTC),
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	w := do(t, router, "DELETE", "/api/v1/timeoff/1", "", token)
+
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestDelete_AdminRestoresShifts(t *testing.T) {
+	store := &fakeStore{
+		getResult: &timeoff.Request{
+			ID: 1, VolunteerID: 10, Status: "approved",
+			StartsAt: time.Date(2026, 5, 1, 0, 0, 0, 0, time.UTC),
+		},
+		restoredShifts: []timeoff.ConflictingShift{
+			{InstanceID: 100, Name: "Morning Walk", Date: "2026-05-01"},
+		},
+	}
+	_, router := setup(store)
+	token := jwtForRole(t, 1, "admin")
+
+	w := do(t, router, "DELETE", "/api/v1/timeoff/1", "", token)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body)
+	}
+	if !store.restoreCalled {
+		t.Error("expected RestoreRemovedShifts to be called")
+	}
+	var result map[string]any
+	json.NewDecoder(w.Body).Decode(&result)
+	restored := result["restored_shifts"].([]any)
+	if len(restored) != 1 {
+		t.Errorf("expected 1 restored shift, got %d", len(restored))
+	}
+}
+
+func TestRemovedShifts_AdminOnly(t *testing.T) {
+	store := &fakeStore{
+		removedForTimeOff: []timeoff.ConflictingShift{
+			{InstanceID: 100, Name: "Morning Walk", Date: "2026-05-01"},
+		},
+	}
+	_, router := setup(store)
+
+	// Volunteer should get 403
+	volToken := jwtForRole(t, 10, "volunteer")
+	w := do(t, router, "GET", "/api/v1/timeoff/1/shifts", "", volToken)
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403 for volunteer, got %d", w.Code)
+	}
+
+	// Admin should get 200
+	adminToken := jwtForRole(t, 1, "admin")
+	w = do(t, router, "GET", "/api/v1/timeoff/1/shifts", "", adminToken)
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200 for admin, got %d: %s", w.Code, w.Body)
+	}
+	var shifts []timeoff.ConflictingShift
+	json.NewDecoder(w.Body).Decode(&shifts)
+	if len(shifts) != 1 {
+		t.Errorf("expected 1 shift, got %d", len(shifts))
+	}
+}
+
+func TestReview_AdminOnly(t *testing.T) {
+	store := &fakeStore{}
+	_, router := setup(store)
+
+	volToken := jwtForRole(t, 10, "volunteer")
+	body := `{"status":"approved"}`
+	w := do(t, router, "PUT", "/api/v1/timeoff/1/review", body, volToken)
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403 for volunteer, got %d", w.Code)
+	}
+}
+
+func TestReview_InvalidStatus(t *testing.T) {
+	store := &fakeStore{}
+	_, router := setup(store)
+
+	adminToken := jwtForRole(t, 1, "admin")
+	body := `{"status":"maybe"}`
+	w := do(t, router, "PUT", "/api/v1/timeoff/1/review", body, adminToken)
+	if w.Code != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d: %s", w.Code, w.Body)
+	}
+}
+
+func TestCreate_MissingDates(t *testing.T) {
+	store := &fakeStore{}
+	_, router := setup(store)
+	token := jwtForRole(t, 10, "volunteer")
+
+	body := `{"reason":"vacation"}`
+	w := do(t, router, "POST", "/api/v1/timeoff", body, token)
+
+	if w.Code != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", w.Code)
+	}
+}

internal/timeoff/timeoff.go

@@ -27,12 +27,37 @@ type CreateInput struct {
 	StartsAt         string `json:"starts_at"`
 	EndsAt           string `json:"ends_at"`
 	Reason           string `json:"reason"`
+	VolunteerID      int64  `json:"volunteer_id,omitempty"`       // admin creating for another volunteer
+	ConfirmConflicts bool   `json:"confirm_conflicts,omitempty"`  // acknowledge shift conflicts
+}
+
+type UpdateInput struct {
+	StartsAt string `json:"starts_at"`
+	EndsAt   string `json:"ends_at"`
+	Reason   string `json:"reason"`
 }
 
 type ReviewInput struct {
 	Status string `json:"status"` // "approved" | "rejected"
 }
 
+// ConflictingShift is a shift instance that overlaps with a time-off period.
+type ConflictingShift struct {
+	InstanceID int64  `json:"instance_id"`
+	Name       string `json:"name"`
+	Date       string `json:"date"`
+	StartTime  string `json:"start_time"`
+	EndTime    string `json:"end_time"`
+}
+
+// RemovedShift records that a volunteer was removed from a shift due to time off.
+type RemovedShift struct {
+	ID          int64 `json:"id"`
+	TimeOffID   int64 `json:"time_off_id"`
+	InstanceID  int64 `json:"instance_id"`
+	VolunteerID int64 `json:"volunteer_id"`
+}
+
 type Store struct {
 	db *sql.DB
 }
@@ -55,25 +80,20 @@ func (s *Store) Create(ctx context.Context, volunteerID int64, in CreateInput) (
 
 func (s *Store) GetByID(ctx context.Context, id int64) (*Request, error) {
 	req := &Request{}
-	var startsAt, endsAt, createdAt, updatedAt string
 	var reason sql.NullString
 	var reviewedBy sql.NullInt64
-	var reviewedAt sql.NullString
+	var reviewedAt sql.NullTime
 
 	err := s.db.QueryRowContext(ctx,
 		`SELECT id, volunteer_id, starts_at, ends_at, reason, status, reviewed_by, reviewed_at, created_at, updated_at
 		 FROM time_off_requests WHERE id = ?`, id,
-	).Scan(&req.ID, &req.VolunteerID, &startsAt, &endsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &createdAt, &updatedAt)
+	).Scan(&req.ID, &req.VolunteerID, &req.StartsAt, &req.EndsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &req.CreatedAt, &req.UpdatedAt)
 	if errors.Is(err, sql.ErrNoRows) {
 		return nil, ErrNotFound
 	}
 	if err != nil {
 		return nil, fmt.Errorf("get time off request: %w", err)
 	}
-	req.StartsAt, _ = time.Parse("2006-01-02 15:04:05", startsAt)
-	req.EndsAt, _ = time.Parse("2006-01-02 15:04:05", endsAt)
-	req.CreatedAt, _ = time.Parse("2006-01-02 15:04:05", createdAt)
-	req.UpdatedAt, _ = time.Parse("2006-01-02 15:04:05", updatedAt)
 	if reason.Valid {
 		req.Reason = reason.String
 	}
@@ -81,8 +101,7 @@ func (s *Store) GetByID(ctx context.Context, id int64) (*Request, error) {
 		req.ReviewedBy = &reviewedBy.Int64
 	}
 	if reviewedAt.Valid {
-		t, _ := time.Parse("2006-01-02 15:04:05", reviewedAt.String)
+		req.ReviewedAt = &reviewedAt.Time
-		req.ReviewedAt = &t
 	}
 	return req, nil
 }
@@ -105,17 +124,12 @@ func (s *Store) List(ctx context.Context, volunteerID int64) ([]Request, error)
 	var requests []Request
 	for rows.Next() {
 		var req Request
-		var startsAt, endsAt, createdAt, updatedAt string
 		var reason sql.NullString
 		var reviewedBy sql.NullInt64
-		var reviewedAt sql.NullString
+		var reviewedAt sql.NullTime
-		if err := rows.Scan(&req.ID, &req.VolunteerID, &startsAt, &endsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &createdAt, &updatedAt); err != nil {
+		if err := rows.Scan(&req.ID, &req.VolunteerID, &req.StartsAt, &req.EndsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &req.CreatedAt, &req.UpdatedAt); err != nil {
 			return nil, err
 		}
-		req.StartsAt, _ = time.Parse("2006-01-02 15:04:05", startsAt)
-		req.EndsAt, _ = time.Parse("2006-01-02 15:04:05", endsAt)
-		req.CreatedAt, _ = time.Parse("2006-01-02 15:04:05", createdAt)
-		req.UpdatedAt, _ = time.Parse("2006-01-02 15:04:05", updatedAt)
 		if reason.Valid {
 			req.Reason = reason.String
 		}
@@ -123,8 +137,7 @@ func (s *Store) List(ctx context.Context, volunteerID int64) ([]Request, error)
 			req.ReviewedBy = &reviewedBy.Int64
 		}
 		if reviewedAt.Valid {
-			t, _ := time.Parse("2006-01-02 15:04:05", reviewedAt.String)
+			req.ReviewedAt = &reviewedAt.Time
-			req.ReviewedAt = &t
 		}
 		requests = append(requests, req)
 	}
@@ -141,3 +154,207 @@ func (s *Store) Review(ctx context.Context, id, reviewerID int64, status string)
 	}
 	return s.GetByID(ctx, id)
 }
+
+// Update edits a time-off request's dates and reason.
+func (s *Store) Update(ctx context.Context, id int64, in UpdateInput) (*Request, error) {
+	_, err := s.db.ExecContext(ctx,
+		`UPDATE time_off_requests SET starts_at=?, ends_at=?, reason=?, updated_at=NOW() WHERE id=?`,
+		in.StartsAt, in.EndsAt, in.Reason, id,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("update time off request: %w", err)
+	}
+	return s.GetByID(ctx, id)
+}
+
+// Delete removes a time-off request.
+func (s *Store) Delete(ctx context.Context, id int64) error {
+	result, err := s.db.ExecContext(ctx, `DELETE FROM time_off_requests WHERE id = ?`, id)
+	if err != nil {
+		return fmt.Errorf("delete time off request: %w", err)
+	}
+	affected, _ := result.RowsAffected()
+	if affected == 0 {
+		return ErrNotFound
+	}
+	return nil
+}
+
+// ConflictingShifts returns published shift instances where the volunteer is assigned
+// and the shift date falls within the given date range (inclusive).
+func (s *Store) ConflictingShifts(ctx context.Context, volunteerID int64, startsAt, endsAt string) ([]ConflictingShift, error) {
+	rows, err := s.db.QueryContext(ctx,
+		`SELECT si.id, si.name, si.date, si.start_time, si.end_time
+		 FROM shift_instances si
+		 JOIN shift_instance_volunteers siv ON siv.instance_id = si.id
+		 WHERE siv.volunteer_id = ?
+		   AND si.date >= ?
+		   AND si.date <= ?
+		 ORDER BY si.date`, volunteerID, startsAt, endsAt,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("query conflicting shifts: %w", err)
+	}
+	defer rows.Close()
+
+	var shifts []ConflictingShift
+	for rows.Next() {
+		var cs ConflictingShift
+		if err := rows.Scan(&cs.InstanceID, &cs.Name, &cs.Date, &cs.StartTime, &cs.EndTime); err != nil {
+			return nil, err
+		}
+		shifts = append(shifts, cs)
+	}
+	return shifts, rows.Err()
+}
+
+// RemoveFromConflictingShifts removes the volunteer from shifts that overlap with
+// the time-off period and records the removals for later restoration.
+func (s *Store) RemoveFromConflictingShifts(ctx context.Context, timeOffID, volunteerID int64, startsAt, endsAt string) ([]ConflictingShift, error) {
+	conflicts, err := s.ConflictingShifts(ctx, volunteerID, startsAt, endsAt)
+	if err != nil {
+		return nil, err
+	}
+	if len(conflicts) == 0 {
+		return nil, nil
+	}
+
+	tx, err := s.db.BeginTx(ctx, nil)
+	if err != nil {
+		return nil, fmt.Errorf("begin tx: %w", err)
+	}
+	defer tx.Rollback()
+
+	for _, c := range conflicts {
+		// Record the removal
+		if _, err := tx.ExecContext(ctx,
+			`INSERT INTO time_off_removed_shifts (time_off_id, instance_id, volunteer_id) VALUES (?, ?, ?)`,
+			timeOffID, c.InstanceID, volunteerID,
+		); err != nil {
+			return nil, fmt.Errorf("record removal: %w", err)
+		}
+		// Remove volunteer from shift
+		if _, err := tx.ExecContext(ctx,
+			`DELETE FROM shift_instance_volunteers WHERE instance_id = ? AND volunteer_id = ?`,
+			c.InstanceID, volunteerID,
+		); err != nil {
+			return nil, fmt.Errorf("remove from shift: %w", err)
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return nil, fmt.Errorf("commit: %w", err)
+	}
+	return conflicts, nil
+}
+
+// RemovedShiftsForTimeOff returns shifts from which the volunteer was removed
+// due to the given time-off request (for preview before admin deletes time off).
+func (s *Store) RemovedShiftsForTimeOff(ctx context.Context, timeOffID int64) ([]ConflictingShift, error) {
+	rows, err := s.db.QueryContext(ctx,
+		`SELECT si.id, si.name, si.date, si.start_time, si.end_time
+		 FROM time_off_removed_shifts tors
+		 JOIN shift_instances si ON si.id = tors.instance_id
+		 WHERE tors.time_off_id = ?
+		 ORDER BY si.date`, timeOffID,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("query removed shifts: %w", err)
+	}
+	defer rows.Close()
+
+	var shifts []ConflictingShift
+	for rows.Next() {
+		var cs ConflictingShift
+		if err := rows.Scan(&cs.InstanceID, &cs.Name, &cs.Date, &cs.StartTime, &cs.EndTime); err != nil {
+			return nil, err
+		}
+		shifts = append(shifts, cs)
+	}
+	return shifts, rows.Err()
+}
+
+// RestoreRemovedShifts re-adds the volunteer to shifts they were removed from
+// when the given time-off request is deleted (FR-T04).
+func (s *Store) RestoreRemovedShifts(ctx context.Context, timeOffID int64) ([]ConflictingShift, error) {
+	// Get the removals first
+	rows, err := s.db.QueryContext(ctx,
+		`SELECT tors.instance_id, tors.volunteer_id, si.name, si.date, si.start_time, si.end_time
+		 FROM time_off_removed_shifts tors
+		 JOIN shift_instances si ON si.id = tors.instance_id
+		 WHERE tors.time_off_id = ?`, timeOffID,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("query removals: %w", err)
+	}
+	defer rows.Close()
+
+	type removal struct {
+		instanceID  int64
+		volunteerID int64
+		shift       ConflictingShift
+	}
+	var removals []removal
+	for rows.Next() {
+		var r removal
+		if err := rows.Scan(&r.instanceID, &r.volunteerID, &r.shift.Name, &r.shift.Date, &r.shift.StartTime, &r.shift.EndTime); err != nil {
+			return nil, err
+		}
+		r.shift.InstanceID = r.instanceID
+		removals = append(removals, r)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+
+	if len(removals) == 0 {
+		return nil, nil
+	}
+
+	tx, err := s.db.BeginTx(ctx, nil)
+	if err != nil {
+		return nil, fmt.Errorf("begin tx: %w", err)
+	}
+	defer tx.Rollback()
+
+	var restored []ConflictingShift
+	for _, r := range removals {
+		// Re-add to shift (ignore duplicate if they were re-added manually)
+		_, err := tx.ExecContext(ctx,
+			`INSERT IGNORE INTO shift_instance_volunteers (instance_id, volunteer_id) VALUES (?, ?)`,
+			r.instanceID, r.volunteerID,
+		)
+		if err != nil {
+			return nil, fmt.Errorf("restore to shift: %w", err)
+		}
+		restored = append(restored, r.shift)
+	}
+
+	// Clean up removal records (CASCADE will handle this on time-off delete,
+	// but we clean up explicitly since we're restoring)
+	if _, err := tx.ExecContext(ctx,
+		`DELETE FROM time_off_removed_shifts WHERE time_off_id = ?`, timeOffID,
+	); err != nil {
+		return nil, fmt.Errorf("clean removals: %w", err)
+	}
+
+	if err := tx.Commit(); err != nil {
+		return nil, fmt.Errorf("commit: %w", err)
+	}
+	return restored, nil
+}
+
+// HasApprovedTimeOff checks if a volunteer has approved time off covering the given date.
+func (s *Store) HasApprovedTimeOff(ctx context.Context, volunteerID int64, date string) (bool, error) {
+	var count int
+	err := s.db.QueryRowContext(ctx,
+		`SELECT COUNT(*) FROM time_off_requests
+		 WHERE volunteer_id = ? AND status = 'approved'
+		   AND ? >= DATE(starts_at) AND ? <= DATE(ends_at)`,
+		volunteerID, date, date,
+	).Scan(&count)
+	if err != nil {
+		return false, fmt.Errorf("check time off: %w", err)
+	}
+	return count > 0, nil
+}

internal/volunteer/volunteer.go

@@ -397,6 +397,25 @@ func (s *Store) RecordLogin(ctx context.Context, id int64) error {
 	return err
 }
 
+// ListAdminIDs returns the IDs of all active admin users.
+func (s *Store) ListAdminIDs(ctx context.Context) ([]int64, error) {
+	rows, err := s.db.QueryContext(ctx,
+		`SELECT id FROM volunteers WHERE role = 'admin' AND active = 1`)
+	if err != nil {
+		return nil, fmt.Errorf("list admin IDs: %w", err)
+	}
+	defer rows.Close()
+	var ids []int64
+	for rows.Next() {
+		var id int64
+		if err := rows.Scan(&id); err != nil {
+			return nil, err
+		}
+		ids = append(ids, id)
+	}
+	return ids, rows.Err()
+}
+
 func generateToken() (string, error) {
 	b := make([]byte, 32)
 	if _, err := rand.Read(b); err != nil {

web/.gitignore

@@ -1,15 +1,11 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
 # testing
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -19,5 +15,3 @@
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

web/.npmrc

@@ -0,0 +1 @@
+ignore-scripts=true

web/README.md

@@ -1,46 +1,21 @@
-# Getting Started with Create React App
+# Walkies Frontend
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+React + TypeScript frontend built with [Vite](https://vite.dev/). Tests run with [Vitest](https://vitest.dev/).
 
 ## Available Scripts
 
-In the project directory, you can run:
+### `npm run dev`
 
-### `npm start`
+Starts the development server on [http://localhost:3000](http://localhost:3000) with hot module replacement. API requests to `/api` are proxied to `http://localhost:8080`.
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
 
 ### `npm test`
 
-Launches the test runner in the interactive watch mode.\
+Runs all tests once using Vitest with jsdom.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `npm run build`
 
-Builds the app for production to the `build` folder.\
+Type-checks with `tsc` then builds the app for production into the `dist` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
+### `npm run preview`
-Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+Serves the production build locally for previewing.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).

web/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Walkies - Volunteer scheduling" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Walkies</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

web/package.json

@@ -2,52 +2,38 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
+    "@lavamoat/preinstall-always-fail": "^3.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b tsconfig.app.json && vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@lavamoat/allow-scripts": "^5.0.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^27.5.2",
+    "@types/node": "^25.5.2",
-    "@types/node": "^16.18.126",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^6.0.1",
-    "react": "^19.2.4",
+    "@vitest/coverage-v8": "^4.1.4",
-    "react-dom": "^19.2.4",
+    "jsdom": "^29.0.2",
-    "react-router-dom": "^7.13.1",
+    "typescript": "^6.0.2",
-    "react-scripts": "5.0.1",
+    "vite": "^8.0.8",
-    "typescript": "^4.9.5",
+    "vitest": "^4.1.4"
-    "web-vitals": "^2.1.4"
   },
-  "scripts": {
+  "lavamoat": {
-    "start": "react-scripts start",
+    "allowScripts": {
-    "build": "react-scripts build",
+      "@lavamoat/preinstall-always-fail": false
-    "test": "react-scripts test",
+    }
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "^react-router-dom$": "<rootDir>/node_modules/react-router-dom/dist/index.js",
-      "^react-router$": "<rootDir>/node_modules/react-router/dist/development/index.js",
-      "^react-router/dom$": "<rootDir>/node_modules/react-router/dist/development/dom-export.js"
-    }
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

web/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

web/src/App.test.tsx

@@ -1,29 +1,43 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
 import App from './App';
+import { api } from './api';
 
-// Mock all API calls so the app renders without a backend
+vi.mock('./api', () => ({
-jest.mock('./api', () => ({
   api: {
-    listVolunteers: jest.fn().mockResolvedValue([]),
+    getSetupStatus: vi.fn(),
-    listSchedules: jest.fn().mockResolvedValue([]),
+    createSetupAdmin: vi.fn(),
-    listTimeOff: jest.fn().mockResolvedValue([]),
+    listVolunteers: vi.fn().mockResolvedValue([]),
-    listNotifications: jest.fn().mockResolvedValue([]),
+    listSchedules: vi.fn().mockResolvedValue([]),
-    getVolunteer: jest.fn().mockResolvedValue(null),
+    listTimeOff: vi.fn().mockResolvedValue([]),
+    listNotifications: vi.fn().mockResolvedValue([]),
+    getVolunteer: vi.fn().mockResolvedValue(null),
   },
   OPERATIONAL_ROLES: [],
 }));
 
-test('renders login page when unauthenticated', () => {
+const mockGetSetupStatus = api.getSetupStatus as Mock;
+
+beforeEach(() => {
   localStorage.clear();
-  render(<App />);
+  mockGetSetupStatus.mockResolvedValue({ needs_setup: false });
-  expect(screen.getByRole('heading', { name: /sign in/i })).toBeInTheDocument();
 });
 
-test('login page has email and password fields', () => {
+test('renders login page when unauthenticated and setup done', async () => {
-  localStorage.clear();
   render(<App />);
-  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+  expect(await screen.findByRole('heading', { name: /sign in/i })).toBeInTheDocument();
+});
+
+test('login page has email and password fields', async () => {
+  render(<App />);
+  expect(await screen.findByLabelText(/email/i)).toBeInTheDocument();
   expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
   expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
 });
+
+test('redirects to setup when needs_setup is true', async () => {
+  mockGetSetupStatus.mockResolvedValue({ needs_setup: true });
+  render(<App />);
+  expect(await screen.findByRole('heading', { name: /initial setup/i })).toBeInTheDocument();
+});

web/src/App.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './auth';
+import { api } from './api';
 import Login from './pages/Login';
 import Activate from './pages/Activate';
+import Setup from './pages/Setup';
 import Dashboard from './pages/Dashboard';
 import Schedules from './pages/Schedules';
 import TimeOff from './pages/TimeOff';
@@ -34,6 +36,7 @@ function ProtectedLayout() {
       <main>
         <Routes>
           <Route path="/" element={<Dashboard />} />
+          <Route path="/schedules/templates" element={<Schedules />} />
           <Route path="/schedules" element={<Schedules />} />
           <Route path="/timeoff" element={<TimeOff />} />
           <Route path="/profile" element={<Profile />} />
@@ -50,15 +53,57 @@ function LoginRoute() {
   return <Login />;
 }
 
+// Setup context lets the Setup page flip needsSetup after creating the admin.
+const SetupContext = createContext<{ setNeedsSetup: (v: boolean) => void }>({
+  setNeedsSetup: () => {},
+});
+export const useSetup = () => useContext(SetupContext);
+
+function SetupGate({ children }: { children: ReactNode }) {
+  const [needsSetup, setNeedsSetup] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    api.getSetupStatus()
+      .then(r => setNeedsSetup(r.needs_setup))
+      .catch(() => setNeedsSetup(false));
+  }, []);
+
+  if (needsSetup === null) return null;
+
+  if (needsSetup) {
+    return (
+      <SetupContext.Provider value={{ setNeedsSetup }}>
+        <Routes>
+          <Route path="/setup" element={<Setup />} />
+          <Route path="*" element={<Navigate to="/setup" replace />} />
+        </Routes>
+      </SetupContext.Provider>
+    );
+  }
+
+  return (
+    <SetupContext.Provider value={{ setNeedsSetup }}>
+      <Routes>
+        <Route path="/setup" element={<Navigate to="/login" replace />} />
+        <Route path="/login" element={<LoginRoute />} />
+        <Route path="/activate" element={<Activate />} />
+        <Route path="/*" element={<ProtectedLayout />} />
+      </Routes>
+    </SetupContext.Provider>
+  );
+}
+
 export default function App() {
   return (
     <AuthProvider>
       <BrowserRouter>
+        <SetupGate>
           <Routes>
             <Route path="/login" element={<LoginRoute />} />
             <Route path="/activate" element={<Activate />} />
             <Route path="/*" element={<ProtectedLayout />} />
           </Routes>
+        </SetupGate>
       </BrowserRouter>
     </AuthProvider>
   );

web/src/api.ts

@@ -4,6 +4,16 @@ function getToken(): string | null {
   return localStorage.getItem('token');
 }
 
+class ApiError extends Error {
+  status: number;
+  data: any;
+  constructor(message: string, status: number, data: any) {
+    super(message);
+    this.status = status;
+    this.data = data;
+  }
+}
+
 async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
   const headers: Record<string, string> = { 'Content-Type': 'application/json' };
   const token = getToken();
@@ -17,11 +27,19 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
 
   if (res.status === 204) return undefined as T;
   const data = await res.json();
-  if (!res.ok) throw new Error(data.error || 'Request failed');
+  if (!res.ok) throw new ApiError(data.error || data.message || 'Request failed', res.status, data);
   return data as T;
 }
 
+export { ApiError };
+
 export const api = {
+  // Setup
+  getSetupStatus: () =>
+    request<{ needs_setup: boolean }>('GET', '/setup/status'),
+  createSetupAdmin: (data: { name: string; email: string; password: string }) =>
+    request<{ token: string }>('POST', '/setup/admin', data),
+
   // Auth
   login: (email: string, password: string) =>
     request<{ token: string }>('POST', '/auth/login', { email, password }),
@@ -61,9 +79,16 @@ export const api = {
 
   // Time off
   listTimeOff: () => request<TimeOffRequest[]>('GET', '/timeoff'),
-  createTimeOff: (data: CreateTimeOffInput) => request<TimeOffRequest>('POST', '/timeoff', data),
+  createTimeOff: (data: CreateTimeOffInput & { volunteer_id?: number; confirm_conflicts?: boolean }) =>
+    request<TimeOffRequest | TimeOffConflictResponse>('POST', '/timeoff', data),
+  updateTimeOff: (id: number, data: { starts_at: string; ends_at: string; reason?: string }) =>
+    request<TimeOffRequest>('PUT', `/timeoff/${id}`, data),
+  deleteTimeOff: (id: number) =>
+    request<{ deleted: boolean; restored_shifts: ConflictingShift[] }>('DELETE', `/timeoff/${id}`),
   reviewTimeOff: (id: number, status: 'approved' | 'rejected') =>
     request<TimeOffRequest>('PUT', `/timeoff/${id}/review`, { status }),
+  getRemovedShifts: (id: number) =>
+    request<ConflictingShift[]>('GET', `/timeoff/${id}/shifts`),
 
   // Check-in / out
   checkIn: (schedule_id?: number, notes?: string) =>
@@ -200,6 +225,19 @@ export interface CreateTimeOffInput {
   reason?: string;
 }
 
+export interface ConflictingShift {
+  instance_id: number;
+  name: string;
+  date: string;
+  start_time: string;
+  end_time: string;
+}
+
+export interface TimeOffConflictResponse {
+  message: string;
+  conflicts: ConflictingShift[];
+}
+
 export interface CheckIn {
   id: number;
   volunteer_id: number;

web/src/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

web/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

web/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

web/src/pages/Activate.test.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import Activate from './Activate';
 import { api } from '../api';
 import { AuthProvider } from '../auth';
 
-jest.mock('../api', () => ({
+vi.mock('../api', () => ({
   api: {
-    activate: jest.fn(),
+    activate: vi.fn(),
   },
 }));
 
-const mockActivate = api.activate as jest.Mock;
+const mockActivate = api.activate as Mock;
 
 function renderActivate(token = 'valid-token') {
   return render(

web/src/pages/Profile.test.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
 import { MemoryRouter } from 'react-router-dom';
 import Profile from './Profile';
 import { api, Volunteer } from '../api';
 import { AuthProvider } from '../auth';
 
-jest.mock('../api', () => ({
+vi.mock('../api', () => ({
   api: {
-    getVolunteer: jest.fn(),
+    getVolunteer: vi.fn(),
-    updateVolunteer: jest.fn(),
+    updateVolunteer: vi.fn(),
   },
 }));
 
@@ -21,8 +22,8 @@ function buildFakeJWT(payload: object): string {
   return `${header}.${body}.fakesig`;
 }
 
-const mockGetVolunteer = api.getVolunteer as jest.Mock;
+const mockGetVolunteer = api.getVolunteer as Mock;
-const mockUpdateVolunteer = api.updateVolunteer as jest.Mock;
+const mockUpdateVolunteer = api.updateVolunteer as Mock;
 
 const baseVolunteer: Volunteer = {
   id: 5,

web/src/pages/Schedules.test.tsx

@@ -1,29 +1,36 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
 import Schedules from './Schedules';
 import { api, ShiftInstance, ShiftTemplate } from '../api';
 
-jest.mock('../api', () => ({
+vi.mock('../api', async () => {
-  ...jest.requireActual('../api'),
+  const actual = await vi.importActual<typeof import('../api')>('../api');
+  return {
+    ...actual,
     api: {
-    listShifts: jest.fn(),
+      listShifts: vi.fn(),
-    listShiftTemplates: jest.fn(),
+      listShiftTemplates: vi.fn(),
-    generateShifts: jest.fn(),
+      listVolunteers: vi.fn(),
-    publishShifts: jest.fn(),
+      listTimeOff: vi.fn(),
-    unpublishShifts: jest.fn(),
+      generateShifts: vi.fn(),
-    updateShift: jest.fn(),
+      publishShifts: vi.fn(),
-    confirmShift: jest.fn(),
+      unpublishShifts: vi.fn(),
-    createShiftTemplate: jest.fn(),
+      updateShift: vi.fn(),
-    updateShiftTemplate: jest.fn(),
+      confirmShift: vi.fn(),
-    deleteShiftTemplate: jest.fn(),
+      createShiftTemplate: vi.fn(),
+      updateShiftTemplate: vi.fn(),
+      deleteShiftTemplate: vi.fn(),
     },
+  };
+});
+
+vi.mock('../auth', () => ({
+  useAuth: vi.fn(),
 }));
 
-jest.mock('../auth', () => ({
+const { useAuth } = await import('../auth');
-  useAuth: jest.fn(),
-}));
-
-const { useAuth } = require('../auth');
 
 const mockDraftInstance: ShiftInstance = {
   id: 1,
@@ -62,14 +69,22 @@ const mockTemplate: ShiftTemplate = {
   updated_at: '2026-04-01T00:00:00Z',
 };
 
+function renderAt(path: string) {
+  return render(
+    <MemoryRouter initialEntries={[path]}>
+      <Schedules />
+    </MemoryRouter>
+  );
+}
+
 describe('Schedules (volunteer view)', () => {
   beforeEach(() => {
-    useAuth.mockReturnValue({ role: 'volunteer', volunteerID: 10 });
+    (useAuth as Mock).mockReturnValue({ role: 'volunteer', volunteerID: 10 });
-    (api.listShifts as jest.Mock).mockResolvedValue([mockPublishedInstance]);
+    (api.listShifts as Mock).mockResolvedValue([mockPublishedInstance]);
   });
 
   it('renders published shifts for a volunteer', async () => {
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => {
       expect(screen.getByText('Morning Shift')).toBeInTheDocument();
     });
@@ -77,7 +92,7 @@ describe('Schedules (volunteer view)', () => {
   });
 
   it('does not show admin controls', async () => {
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Morning Shift')).toBeInTheDocument());
     expect(screen.queryByText('Generate')).not.toBeInTheDocument();
     expect(screen.queryByText('Publish')).not.toBeInTheDocument();
@@ -85,82 +100,114 @@ describe('Schedules (volunteer view)', () => {
   });
 });
 
-describe('Schedules (admin view)', () => {
+describe('Schedules (admin shifts view)', () => {
   beforeEach(() => {
-    useAuth.mockReturnValue({ role: 'admin', volunteerID: 1 });
+    (useAuth as Mock).mockReturnValue({ role: 'admin', volunteerID: 1 });
-    (api.listShifts as jest.Mock).mockResolvedValue([mockDraftInstance]);
+    (api.listShifts as Mock).mockResolvedValue([mockDraftInstance]);
-    (api.listShiftTemplates as jest.Mock).mockResolvedValue([mockTemplate]);
+    (api.listShiftTemplates as Mock).mockResolvedValue([mockTemplate]);
   });
 
   it('shows Generate and Publish buttons when drafts exist', async () => {
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Morning Shift')).toBeInTheDocument());
     expect(screen.getByText('Generate')).toBeInTheDocument();
     expect(screen.getByText('Publish')).toBeInTheDocument();
   });
 
   it('calls generateShifts on Generate click', async () => {
-    (api.generateShifts as jest.Mock).mockResolvedValue([mockDraftInstance]);
+    (api.generateShifts as Mock).mockResolvedValue([mockDraftInstance]);
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Generate')).toBeInTheDocument());
     fireEvent.click(screen.getByText('Generate'));
     expect(api.generateShifts).toHaveBeenCalled();
   });
 
   it('calls publishShifts on Publish click', async () => {
-    (api.publishShifts as jest.Mock).mockResolvedValue({ year: 2026, month: 4 });
+    (api.publishShifts as Mock).mockResolvedValue({ year: 2026, month: 4 });
-    (api.listShifts as jest.Mock)
+    (api.listShifts as Mock)
       .mockResolvedValueOnce([mockDraftInstance])
       .mockResolvedValue([{ ...mockDraftInstance, status: 'published' }]);
 
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Publish')).toBeInTheDocument());
     fireEvent.click(screen.getByText('Publish'));
     expect(api.publishShifts).toHaveBeenCalled();
   });
 
   it('shows Unpublish button when all shifts are published', async () => {
-    (api.listShifts as jest.Mock).mockResolvedValue([mockPublishedInstance]);
+    (api.listShifts as Mock).mockResolvedValue([mockPublishedInstance]);
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Unpublish')).toBeInTheDocument());
   });
 
   it('shows Edit button on each shift row', async () => {
-    render(<Schedules />);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Morning Shift')).toBeInTheDocument());
     expect(screen.getByText('Edit')).toBeInTheDocument();
   });
 
-  it('opens edit form when Edit is clicked', async () => {
+  it('opens edit form with volunteer checkboxes when Edit is clicked', async () => {
-    render(<Schedules />);
+    (api.listVolunteers as Mock).mockResolvedValue([
+      { id: 5, name: 'Alice', active: true, operational_roles: 'Dog Shelter Volunteer', is_trainee: false },
+      { id: 6, name: 'Bob', active: true, operational_roles: 'Behaviour Team', is_trainee: false },
+    ]);
+    (api.listTimeOff as Mock).mockResolvedValue([]);
+    renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
     fireEvent.click(screen.getByText('Edit'));
+    await waitFor(() => expect(screen.getByText('Alice')).toBeInTheDocument());
+    expect(screen.getByText('Bob')).toBeInTheDocument();
     expect(screen.getByText(/Edit Shift/)).toBeInTheDocument();
   });
 
-  it('switches to templates view', async () => {
+  it('hides volunteers with approved time off on the shift date', async () => {
-    render(<Schedules />);
+    (api.listVolunteers as Mock).mockResolvedValue([
-    await waitFor(() => expect(screen.getByText('Manage Templates')).toBeInTheDocument());
+      { id: 5, name: 'Alice', active: true, operational_roles: 'Dog Shelter Volunteer', is_trainee: false },
-    fireEvent.click(screen.getByText('Manage Templates'));
+      { id: 6, name: 'Bob', active: true, operational_roles: 'Behaviour Team', is_trainee: false },
+    ]);
+    (api.listTimeOff as Mock).mockResolvedValue([
+      { id: 1, volunteer_id: 6, starts_at: '2026-04-06T00:00:00Z', ends_at: '2026-04-07T00:00:00Z', status: 'approved' },
+    ]);
+    renderAt('/schedules');
+    await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Edit'));
+    await waitFor(() => expect(screen.getByText('Alice')).toBeInTheDocument());
+    // Bob should not appear as a selectable volunteer
+    expect(screen.queryByLabelText('Bob')).not.toBeInTheDocument();
+    // But should be listed as on time off
+    expect(screen.getByText(/On approved time off/)).toBeInTheDocument();
+    expect(screen.getByText(/Bob/)).toBeInTheDocument();
+  });
+
+  it('reads year and month from search params', async () => {
+    renderAt('/schedules?year=2025&month=12');
+    await waitFor(() => expect(api.listShifts).toHaveBeenCalledWith(2025, 12));
+  });
+});
+
+describe('Schedules (admin templates view)', () => {
+  beforeEach(() => {
+    (useAuth as Mock).mockReturnValue({ role: 'admin', volunteerID: 1 });
+    (api.listShiftTemplates as Mock).mockResolvedValue([mockTemplate]);
+  });
+
+  it('renders templates at /schedules/templates', async () => {
+    renderAt('/schedules/templates');
     await waitFor(() => expect(screen.getByText('Shift Templates')).toBeInTheDocument());
     expect(screen.getByText('Morning Shift')).toBeInTheDocument();
   });
 
   it('shows template form when New Template is clicked', async () => {
-    render(<Schedules />);
+    renderAt('/schedules/templates');
-    await waitFor(() => expect(screen.getByText('Manage Templates')).toBeInTheDocument());
-    fireEvent.click(screen.getByText('Manage Templates'));
     await waitFor(() => expect(screen.getByText('+ New Template')).toBeInTheDocument());
     fireEvent.click(screen.getByText('+ New Template'));
     expect(screen.getByText('New Template')).toBeInTheDocument();
   });
 
   it('deletes a template', async () => {
-    (api.deleteShiftTemplate as jest.Mock).mockResolvedValue(undefined);
+    (api.deleteShiftTemplate as Mock).mockResolvedValue(undefined);
-    window.confirm = jest.fn().mockReturnValue(true);
+    window.confirm = vi.fn().mockReturnValue(true);
-    render(<Schedules />);
+    renderAt('/schedules/templates');
-    await waitFor(() => expect(screen.getByText('Manage Templates')).toBeInTheDocument());
-    fireEvent.click(screen.getByText('Manage Templates'));
     await waitFor(() => expect(screen.getAllByText('Delete')[0]).toBeInTheDocument());
     fireEvent.click(screen.getAllByText('Delete')[0]);
     expect(api.deleteShiftTemplate).toHaveBeenCalledWith(1);

web/src/pages/Schedules.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect, useState, FormEvent } from 'react';
+import React, { useEffect, useState, FormEvent, useCallback } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import {
   api,
   ShiftTemplate,
   ShiftInstance,
+  Volunteer,
+  TimeOffRequest,
   CreateShiftTemplateInput,
   TemplateRole,
   OPERATIONAL_ROLES,
@@ -141,20 +144,211 @@ function TemplateForm({ initial, onSave, onCancel, title }: TemplateFormProps) {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Shift instance edit form
+// ---------------------------------------------------------------------------
+
+interface ShiftEditFormProps {
+  instance: ShiftInstance;
+  templateId: number | undefined;
+  onSave: (inst: ShiftInstance) => void;
+  onCancel: () => void;
+}
+
+function ShiftEditForm({ instance, templateId, onSave, onCancel }: ShiftEditFormProps) {
+  const [volunteers, setVolunteers] = useState<Volunteer[]>([]);
+  const [templateRoles, setTemplateRoles] = useState<TemplateRole[]>([]);
+  const [unavailableIds, setUnavailableIds] = useState<Set<number>>(new Set());
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(
+    new Set(instance.volunteers.map(v => v.volunteer_id))
+  );
+  const [minCap, setMinCap] = useState(instance.min_capacity);
+  const [maxCap, setMaxCap] = useState(instance.max_capacity);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loads: Promise<void>[] = [
+      api.listVolunteers().then((vols) => setVolunteers(vols as Volunteer[])),
+      api.listTimeOff().then((requests: TimeOffRequest[]) => {
+        const shiftDate = new Date(instance.date + 'T00:00:00');
+        const off = new Set<number>();
+        for (const r of requests) {
+          if (r.status !== 'approved') continue;
+          const start = new Date(r.starts_at);
+          const end = new Date(r.ends_at);
+          // Shift date falls within the approved time-off range
+          if (shiftDate >= new Date(start.toDateString()) && shiftDate <= new Date(end.toDateString())) {
+            off.add(r.volunteer_id);
+          }
+        }
+        setUnavailableIds(off);
+      }),
+    ];
+    if (templateId) {
+      loads.push(
+        api.listShiftTemplates().then((tmpls) => {
+          const tmpl = tmpls.find(t => t.id === templateId);
+          if (tmpl) setTemplateRoles(tmpl.roles ?? []);
+        })
+      );
+    }
+    Promise.all(loads).finally(() => setLoading(false));
+  }, [templateId, instance.date]);
+
+  function toggleVolunteer(id: number) {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setSaving(true);
+    try {
+      const updated = await api.updateShift(instance.id, {
+        volunteer_ids: Array.from(selectedIds),
+        min_capacity: minCap,
+        max_capacity: maxCap,
+      });
+      onSave(updated);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // Group active, available volunteers by their operational roles for display
+  const activeVolunteers = volunteers.filter(v => v.active && !unavailableIds.has(v.id));
+  const onTimeOff = volunteers.filter(v => v.active && unavailableIds.has(v.id));
+
+  // Build a map of role → volunteers who hold that role
+  const byRole = new Map<string, Volunteer[]>();
+  for (const v of activeVolunteers) {
+    const roles = v.operational_roles
+      ? v.operational_roles.split(',').map(r => r.trim()).filter(Boolean)
+      : [];
+    if (roles.length === 0) {
+      const list = byRole.get('Unassigned') ?? [];
+      list.push(v);
+      byRole.set('Unassigned', list);
+    } else {
+      for (const r of roles) {
+        const list = byRole.get(r) ?? [];
+        list.push(v);
+        byRole.set(r, list);
+      }
+    }
+  }
+
+  // Order sections: template roles first, then any remaining
+  const roleOrder: string[] = [];
+  for (const tr of templateRoles) {
+    if (!roleOrder.includes(tr.role_name)) roleOrder.push(tr.role_name);
+  }
+  byRole.forEach((_, key) => {
+    if (!roleOrder.includes(key)) roleOrder.push(key);
+  });
+
+  if (loading) return <div className="card"><p>Loading volunteers…</p></div>;
+
+  return (
+    <form className="card" onSubmit={handleSubmit}>
+      <h3>Edit Shift: {instance.name} — {instance.date}</h3>
+      {error && <p className="error">{error}</p>}
+
+      {templateRoles.length > 0 && (
+        <p style={{ marginBottom: '0.5rem', color: '#666' }}>
+          <strong>Required:</strong>{' '}
+          {templateRoles.map(r => `${r.count}× ${r.role_name}`).join(', ')}
+        </p>
+      )}
+
+      <fieldset>
+        <legend>Volunteers ({selectedIds.size} selected)</legend>
+        {roleOrder.map(roleName => {
+          const vols = byRole.get(roleName);
+          if (!vols || vols.length === 0) return null;
+          const required = templateRoles.find(r => r.role_name === roleName);
+          const selectedInRole = vols.filter(v => selectedIds.has(v.id)).length;
+          return (
+            <div key={roleName} style={{ marginBottom: '0.75rem' }}>
+              <strong>
+                {roleName}
+                {required && (
+                  <span style={{ fontWeight: 'normal', color: selectedInRole >= required.count ? '#2a7' : '#c55' }}>
+                    {' '}({selectedInRole}/{required.count})
+                  </span>
+                )}
+              </strong>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '0.25rem', marginTop: '0.25rem' }}>
+                {vols.map(v => (
+                  <label key={v.id} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={selectedIds.has(v.id)}
+                      onChange={() => toggleVolunteer(v.id)}
+                    />
+                    <span>{v.name}{v.is_trainee ? ' (trainee)' : ''}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </fieldset>
+
+      {onTimeOff.length > 0 && (
+        <p style={{ marginTop: '0.5rem', color: '#999', fontSize: '0.9em' }}>
+          <strong>On approved time off:</strong>{' '}
+          {onTimeOff.map(v => v.name).join(', ')}
+        </p>
+      )}
+
+      <div style={{ display: 'flex', gap: '1rem', marginTop: '0.5rem' }}>
+        <label>
+          Min Capacity
+          <input type="number" min={1} value={minCap} style={{ width: '5rem' }}
+            onChange={e => setMinCap(Number(e.target.value))} />
+        </label>
+        <label>
+          Max Capacity
+          <input type="number" min={1} value={maxCap} style={{ width: '5rem' }}
+            onChange={e => setMaxCap(Number(e.target.value))} />
+        </label>
+      </div>
+
+      <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
+        <button type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
+        <button type="button" onClick={onCancel}>Cancel</button>
+      </div>
+    </form>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Main page
 // ---------------------------------------------------------------------------
 
-type View = 'shifts' | 'templates';
-
 export default function Schedules() {
   const { role } = useAuth();
-  const [view, setView] = useState<View>('shifts');
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
 
-  // Month navigation
+  // Derive view from URL path
+  const isTemplatesView = location.pathname === '/schedules/templates';
+
+  // Derive year/month from search params (shifts view only)
   const init = currentYearMonth();
-  const [year, setYear] = useState(init.year);
+  const year = Number(searchParams.get('year')) || init.year;
-  const [month, setMonth] = useState(init.month);
+  const month = Number(searchParams.get('month')) || init.month;
 
   // Data
   const [instances, setInstances] = useState<ShiftInstance[]>([]);
@@ -165,30 +359,38 @@ export default function Schedules() {
   const [showTemplateForm, setShowTemplateForm] = useState(false);
   const [editingTemplate, setEditingTemplate] = useState<ShiftTemplate | null>(null);
   const [editingInstance, setEditingInstance] = useState<ShiftInstance | null>(null);
-  const [editVolIds, setEditVolIds] = useState('');
+
-  const [editMinCap, setEditMinCap] = useState('');
+  // Navigation helpers
-  const [editMaxCap, setEditMaxCap] = useState('');
+  const goToShifts = useCallback((y: number, m: number) => {
+    navigate(`/schedules?year=${y}&month=${m}`);
+  }, [navigate]);
+
+  const goToTemplates = useCallback(() => {
+    navigate('/schedules/templates');
+  }, [navigate]);
 
   useEffect(() => {
-    if (view === 'shifts') {
+    if (isTemplatesView) {
-      api.listShifts(year, month)
-        .then(setInstances)
-        .catch(() => setError('Could not load shifts.'));
-    } else {
       api.listShiftTemplates()
         .then(setTemplates)
         .catch(() => setError('Could not load templates.'));
+    } else {
+      api.listShifts(year, month)
+        .then(setInstances)
+        .catch(() => setError('Could not load shifts.'));
     }
-  }, [view, year, month]);
+  }, [isTemplatesView, year, month]);
 
   function prevMonth() {
-    if (month === 1) { setYear(y => y - 1); setMonth(12); }
+    const m = month === 1 ? 12 : month - 1;
-    else setMonth(m => m - 1);
+    const y = month === 1 ? year - 1 : year;
+    goToShifts(y, m);
   }
 
   function nextMonth() {
-    if (month === 12) { setYear(y => y + 1); setMonth(1); }
+    const m = month === 12 ? 1 : month + 1;
-    else setMonth(m => m + 1);
+    const y = month === 12 ? year + 1 : year;
+    goToShifts(y, m);
   }
 
   async function handleGenerate() {
@@ -259,31 +461,9 @@ export default function Schedules() {
     }
   }
 
-  function openEditInstance(inst: ShiftInstance) {
+  function handleInstanceSaved(updated: ShiftInstance) {
-    setEditingInstance(inst);
-    setEditVolIds(inst.volunteers.map(v => v.volunteer_id).join(','));
-    setEditMinCap(String(inst.min_capacity));
-    setEditMaxCap(String(inst.max_capacity));
-  }
-
-  async function handleUpdateInstance(e: FormEvent) {
-    e.preventDefault();
-    if (!editingInstance) return;
-    setError('');
-    try {
-      const volIds = editVolIds.trim()
-        ? editVolIds.split(',').map(s => Number(s.trim())).filter(Boolean)
-        : [];
-      const updated = await api.updateShift(editingInstance.id, {
-        volunteer_ids: volIds,
-        min_capacity: Number(editMinCap),
-        max_capacity: Number(editMaxCap),
-      });
     setInstances(prev => prev.map(i => (i.id === updated.id ? updated : i)));
     setEditingInstance(null);
-    } catch (err: any) {
-      setError(err.message);
-    }
   }
 
   const allPublished = instances.length > 0 && instances.every(i => i.status === 'published');
@@ -295,8 +475,8 @@ export default function Schedules() {
         <h2>Schedules</h2>
         {role === 'admin' && (
           <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <button onClick={() => setView(v => v === 'shifts' ? 'templates' : 'shifts')}>
+            <button onClick={() => isTemplatesView ? goToShifts(year, month) : goToTemplates()}>
-              {view === 'shifts' ? 'Manage Templates' : 'View Shifts'}
+              {isTemplatesView ? 'View Shifts' : 'Manage Templates'}
             </button>
           </div>
         )}
@@ -305,7 +485,7 @@ export default function Schedules() {
       {error && <p className="error">{error}</p>}
 
       {/* ---- Templates view ---- */}
-      {view === 'templates' && role === 'admin' && (
+      {isTemplatesView && role === 'admin' && (
         <>
           <div className="page-header" style={{ marginBottom: '1rem' }}>
             <h3>Shift Templates</h3>
@@ -367,7 +547,7 @@ export default function Schedules() {
       )}
 
       {/* ---- Shifts view ---- */}
-      {view === 'shifts' && (
+      {!isTemplatesView && (
         <>
           {/* Month navigation */}
           <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
@@ -388,27 +568,12 @@ export default function Schedules() {
 
           {/* Instance edit form */}
           {editingInstance && (
-            <form className="card" onSubmit={handleUpdateInstance}>
+            <ShiftEditForm
-              <h3>Edit Shift: {editingInstance.name} — {editingInstance.date}</h3>
+              instance={editingInstance}
-              <label>
+              templateId={editingInstance.template_id}
-                Volunteer IDs (comma-separated)
+              onSave={handleInstanceSaved}
-                <input value={editVolIds} onChange={e => setEditVolIds(e.target.value)} />
+              onCancel={() => setEditingInstance(null)}
-              </label>
+            />
-              <label>
-                Min Capacity
-                <input type="number" min={1} value={editMinCap}
-                  onChange={e => setEditMinCap(e.target.value)} />
-              </label>
-              <label>
-                Max Capacity
-                <input type="number" min={1} value={editMaxCap}
-                  onChange={e => setEditMaxCap(e.target.value)} />
-              </label>
-              <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
-                <button type="submit">Save</button>
-                <button type="button" onClick={() => setEditingInstance(null)}>Cancel</button>
-              </div>
-            </form>
           )}
 
           {instances.length === 0 ? (
@@ -428,7 +593,6 @@ export default function Schedules() {
               </thead>
               <tbody>
                 {instances.map(inst => {
-                  const myAssignment = inst.volunteers.find(() => true); // for volunteers, API already filters
                   const confirmed = inst.volunteers.some(v => v.confirmed);
                   return (
                     <tr key={inst.id}>
@@ -451,10 +615,10 @@ export default function Schedules() {
                       <td>{inst.volunteers.length}/{inst.max_capacity}</td>
                       {role === 'admin' && (
                         <td>
-                          <button className="btn-small" onClick={() => openEditInstance(inst)}>Edit</button>
+                          <button className="btn-small" onClick={() => setEditingInstance(inst)}>Edit</button>
                         </td>
                       )}
-                      {role !== 'admin' && inst.status === 'published' && !confirmed && myAssignment && (
+                      {role !== 'admin' && inst.status === 'published' && !confirmed && (
                         <td>
                           <button className="btn-small" onClick={() => handleConfirm(inst.id)}>Confirm</button>
                         </td>

web/src/pages/Setup.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import Setup from './Setup';
+import { api } from '../api';
+import { AuthProvider } from '../auth';
+
+vi.mock('../api', () => ({
+  api: {
+    getSetupStatus: vi.fn(),
+    createSetupAdmin: vi.fn(),
+  },
+}));
+
+// Mock useSetup from App to provide setNeedsSetup
+const mockSetNeedsSetup = vi.fn();
+vi.mock('../App', () => ({
+  useSetup: () => ({ setNeedsSetup: mockSetNeedsSetup }),
+}));
+
+const mockCreateSetupAdmin = api.createSetupAdmin as Mock;
+
+function renderSetup() {
+  return render(
+    <AuthProvider>
+      <MemoryRouter initialEntries={['/setup']}>
+        <Routes>
+          <Route path="/setup" element={<Setup />} />
+          <Route path="/" element={<div>Dashboard</div>} />
+        </Routes>
+      </MemoryRouter>
+    </AuthProvider>,
+  );
+}
+
+beforeEach(() => {
+  mockCreateSetupAdmin.mockReset();
+  mockSetNeedsSetup.mockReset();
+});
+
+test('renders all form fields', () => {
+  renderSetup();
+  expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
+  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+  expect(screen.getByLabelText(/^password$/i)).toBeInTheDocument();
+  expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /create admin account/i })).toBeInTheDocument();
+});
+
+test('shows error when passwords do not match', async () => {
+  renderSetup();
+  fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'Admin' } });
+  fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'admin@example.com' } });
+  fireEvent.change(screen.getByLabelText(/^password$/i), { target: { value: 'password1' } });
+  fireEvent.change(screen.getByLabelText(/confirm password/i), { target: { value: 'password2' } });
+  fireEvent.click(screen.getByRole('button', { name: /create admin account/i }));
+  expect(await screen.findByText(/passwords do not match/i)).toBeInTheDocument();
+});
+
+test('shows error when password too short', async () => {
+  renderSetup();
+  fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'Admin' } });
+  fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'admin@example.com' } });
+  fireEvent.change(screen.getByLabelText(/^password$/i), { target: { value: 'short' } });
+  fireEvent.change(screen.getByLabelText(/confirm password/i), { target: { value: 'short' } });
+  fireEvent.click(screen.getByRole('button', { name: /create admin account/i }));
+  expect(await screen.findByText(/at least 8 characters/i)).toBeInTheDocument();
+});
+
+test('calls api.createSetupAdmin and navigates on success', async () => {
+  mockCreateSetupAdmin.mockResolvedValueOnce({ token: 'jwt-token' });
+  renderSetup();
+
+  fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'Admin' } });
+  fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'admin@example.com' } });
+  fireEvent.change(screen.getByLabelText(/^password$/i), { target: { value: 'goodpassword' } });
+  fireEvent.change(screen.getByLabelText(/confirm password/i), { target: { value: 'goodpassword' } });
+  fireEvent.click(screen.getByRole('button', { name: /create admin account/i }));
+
+  await waitFor(() => {
+    expect(mockCreateSetupAdmin).toHaveBeenCalledWith({
+      name: 'Admin',
+      email: 'admin@example.com',
+      password: 'goodpassword',
+    });
+  });
+  await waitFor(() => {
+    expect(mockSetNeedsSetup).toHaveBeenCalledWith(false);
+  });
+  expect(await screen.findByText(/dashboard/i)).toBeInTheDocument();
+});
+
+test('shows error when API returns failure', async () => {
+  mockCreateSetupAdmin.mockRejectedValueOnce(new Error('setup already completed'));
+  renderSetup();
+
+  fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'Admin' } });
+  fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'admin@example.com' } });
+  fireEvent.change(screen.getByLabelText(/^password$/i), { target: { value: 'goodpassword' } });
+  fireEvent.change(screen.getByLabelText(/confirm password/i), { target: { value: 'goodpassword' } });
+  fireEvent.click(screen.getByRole('button', { name: /create admin account/i }));
+
+  expect(await screen.findByText(/setup already completed/i)).toBeInTheDocument();
+});

web/src/pages/Setup.tsx

@@ -0,0 +1,77 @@
+import React, { useState, FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+import { useAuth } from '../auth';
+import { useSetup } from '../App';
+
+export default function Setup() {
+  const { login } = useAuth();
+  const { setNeedsSetup } = useSetup();
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+
+    if (!name || !email || !password) {
+      setError('All fields are required');
+      return;
+    }
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+    if (password !== confirm) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const { token } = await api.createSetupAdmin({ name, email, password });
+      login(token);
+      setNeedsSetup(false);
+      navigate('/');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="auth-page">
+      <h1>Walkies</h1>
+      <h2>Initial Setup</h2>
+      <p>Create the first admin account to get started.</p>
+      <form onSubmit={handleSubmit}>
+        {error && <p className="error">{error}</p>}
+        <label>
+          Name
+          <input type="text" value={name} onChange={e => setName(e.target.value)} required />
+        </label>
+        <label>
+          Email
+          <input type="email" value={email} onChange={e => setEmail(e.target.value)} required />
+        </label>
+        <label>
+          Password
+          <input type="password" value={password} onChange={e => setPassword(e.target.value)} required />
+        </label>
+        <label>
+          Confirm Password
+          <input type="password" value={confirm} onChange={e => setConfirm(e.target.value)} required />
+        </label>
+        <button type="submit" disabled={submitting}>
+          {submitting ? 'Creating...' : 'Create Admin Account'}
+        </button>
+      </form>
+    </div>
+  );
+}

web/src/pages/TimeOff.test.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
+import TimeOff from './TimeOff';
+import { api, TimeOffRequest, ApiError } from '../api';
+import { AuthProvider } from '../auth';
+
+vi.mock('../api', () => {
+  class MockApiError extends Error {
+    status: number;
+    data: any;
+    constructor(message: string, status: number, data: any) {
+      super(message);
+      this.status = status;
+      this.data = data;
+    }
+  }
+  return {
+    api: {
+      listTimeOff: vi.fn(),
+      createTimeOff: vi.fn(),
+      updateTimeOff: vi.fn(),
+      deleteTimeOff: vi.fn(),
+      reviewTimeOff: vi.fn(),
+      getRemovedShifts: vi.fn(),
+      listVolunteers: vi.fn(),
+    },
+    ApiError: MockApiError,
+  };
+});
+
+const mockListTimeOff = api.listTimeOff as Mock;
+const mockCreateTimeOff = api.createTimeOff as Mock;
+const mockDeleteTimeOff = api.deleteTimeOff as Mock;
+const mockReviewTimeOff = api.reviewTimeOff as Mock;
+const mockGetRemovedShifts = api.getRemovedShifts as Mock;
+const mockListVolunteers = api.listVolunteers as Mock;
+
+function buildFakeJWT(payload: object): string {
+  const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+  const body = btoa(JSON.stringify(payload));
+  return `${header}.${body}.fakesig`;
+}
+
+const ADMIN_TOKEN = buildFakeJWT({ volunteer_id: 1, role: 'admin', exp: 9999999999 });
+const VOL_TOKEN = buildFakeJWT({ volunteer_id: 10, role: 'volunteer', exp: 9999999999 });
+
+const futureRequest: TimeOffRequest = {
+  id: 1,
+  volunteer_id: 10,
+  starts_at: '2026-06-01T00:00:00Z',
+  ends_at: '2026-06-03T00:00:00Z',
+  reason: 'vacation',
+  status: 'approved',
+  created_at: '2026-04-01T00:00:00Z',
+  updated_at: '2026-04-01T00:00:00Z',
+};
+
+const pastRequest: TimeOffRequest = {
+  id: 2,
+  volunteer_id: 10,
+  starts_at: '2020-01-01T00:00:00Z',
+  ends_at: '2020-01-03T00:00:00Z',
+  reason: 'sick',
+  status: 'approved',
+  created_at: '2020-01-01T00:00:00Z',
+  updated_at: '2020-01-01T00:00:00Z',
+};
+
+function renderAsVolunteer() {
+  localStorage.setItem('token', VOL_TOKEN);
+  return render(
+    <AuthProvider>
+      <MemoryRouter>
+        <TimeOff />
+      </MemoryRouter>
+    </AuthProvider>,
+  );
+}
+
+function renderAsAdmin() {
+  localStorage.setItem('token', ADMIN_TOKEN);
+  return render(
+    <AuthProvider>
+      <MemoryRouter>
+        <TimeOff />
+      </MemoryRouter>
+    </AuthProvider>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  localStorage.clear();
+  mockListVolunteers.mockResolvedValue([]);
+});
+
+describe('TimeOff page', () => {
+  it('renders empty state', async () => {
+    mockListTimeOff.mockResolvedValue([]);
+    renderAsVolunteer();
+    await waitFor(() => expect(screen.getByText('No time off requests.')).toBeInTheDocument());
+  });
+
+  it('renders request list for volunteer', async () => {
+    mockListTimeOff.mockResolvedValue([futureRequest]);
+    renderAsVolunteer();
+    await waitFor(() => expect(screen.getByText('vacation')).toBeInTheDocument());
+    expect(screen.getByText('approved')).toBeInTheDocument();
+  });
+
+  it('shows edit and delete buttons for own future time off', async () => {
+    mockListTimeOff.mockResolvedValue([futureRequest]);
+    renderAsVolunteer();
+    await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  it('does not show edit/delete for past time off as volunteer', async () => {
+    mockListTimeOff.mockResolvedValue([pastRequest]);
+    renderAsVolunteer();
+    await waitFor(() => expect(screen.getByText('sick')).toBeInTheDocument());
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+  });
+
+  it('shows create form when button clicked', async () => {
+    mockListTimeOff.mockResolvedValue([]);
+    renderAsVolunteer();
+    await waitFor(() => expect(screen.getByText('Request Time Off')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Request Time Off'));
+    expect(screen.getByText('New Request')).toBeInTheDocument();
+  });
+
+  it('creates time off request successfully', async () => {
+    mockListTimeOff.mockResolvedValue([]);
+    mockCreateTimeOff.mockResolvedValue(futureRequest);
+    renderAsVolunteer();
+
+    fireEvent.click(screen.getByText('Request Time Off'));
+    fireEvent.change(screen.getByLabelText('From'), { target: { value: '2026-06-01' } });
+    fireEvent.change(screen.getByLabelText('To'), { target: { value: '2026-06-03' } });
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(mockCreateTimeOff).toHaveBeenCalled());
+  });
+
+  it('shows conflict warning on 409 and allows confirmation', async () => {
+    mockListTimeOff.mockResolvedValue([]);
+    const { ApiError: MockApiError } = await vi.importMock<typeof import('../api')>('../api');
+    mockCreateTimeOff
+      .mockRejectedValueOnce(
+        new (MockApiError as any)('conflict', 409, {
+          message: 'Time off conflicts with assigned shifts.',
+          conflicts: [
+            { instance_id: 100, name: 'Morning Walk', date: '2026-06-01', start_time: '08:00', end_time: '12:00' },
+          ],
+        }),
+      )
+      .mockResolvedValueOnce(futureRequest);
+
+    renderAsVolunteer();
+    fireEvent.click(screen.getByText('Request Time Off'));
+    fireEvent.change(screen.getByLabelText('From'), { target: { value: '2026-06-01' } });
+    fireEvent.change(screen.getByLabelText('To'), { target: { value: '2026-06-03' } });
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(screen.getByText(/conflicts with 1 assigned shift/)).toBeInTheDocument());
+    expect(screen.getByText(/Morning Walk/)).toBeInTheDocument();
+    expect(screen.getByText('Confirm & Submit')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Confirm & Submit'));
+    await waitFor(() =>
+      expect(mockCreateTimeOff).toHaveBeenLastCalledWith(
+        expect.objectContaining({ confirm_conflicts: true }),
+      ),
+    );
+  });
+
+  it('admin sees volunteer column and approve/reject buttons', async () => {
+    const pendingReq: TimeOffRequest = { ...futureRequest, status: 'pending', volunteer_id: 10 };
+    mockListTimeOff.mockResolvedValue([pendingReq]);
+    mockListVolunteers.mockResolvedValue([{ id: 10, name: 'Alice' }]);
+    renderAsAdmin();
+
+    await waitFor(() => expect(screen.getByText('Volunteer')).toBeInTheDocument());
+    expect(screen.getByText('Approve')).toBeInTheDocument();
+    expect(screen.getByText('Reject')).toBeInTheDocument();
+  });
+
+  it('admin can approve a request', async () => {
+    const pendingReq: TimeOffRequest = { ...futureRequest, status: 'pending' };
+    mockListTimeOff.mockResolvedValue([pendingReq]);
+    mockReviewTimeOff.mockResolvedValue({ ...pendingReq, status: 'approved' });
+    mockListVolunteers.mockResolvedValue([]);
+    renderAsAdmin();
+
+    await waitFor(() => expect(screen.getByText('Approve')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Approve'));
+    await waitFor(() => expect(mockReviewTimeOff).toHaveBeenCalledWith(1, 'approved'));
+  });
+
+  it('admin sees shift restoration preview when deleting', async () => {
+    mockListTimeOff.mockResolvedValue([futureRequest]);
+    mockGetRemovedShifts.mockResolvedValue([
+      { instance_id: 100, name: 'Morning Walk', date: '2026-06-01', start_time: '08:00', end_time: '12:00' },
+    ]);
+    mockDeleteTimeOff.mockResolvedValue({ deleted: true, restored_shifts: [] });
+    mockListVolunteers.mockResolvedValue([{ id: 10, name: 'Alice' }]);
+    renderAsAdmin();
+
+    await waitFor(() => expect(screen.getByText('Delete')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Delete'));
+
+    await waitFor(() =>
+      expect(screen.getByText('Delete Time Off — Shift Restoration Preview')).toBeInTheDocument(),
+    );
+    expect(screen.getByText(/Morning Walk/)).toBeInTheDocument();
+  });
+
+  it('admin sees volunteer picker in create form', async () => {
+    mockListTimeOff.mockResolvedValue([]);
+    mockListVolunteers.mockResolvedValue([
+      { id: 10, name: 'Alice' },
+      { id: 20, name: 'Bob' },
+    ]);
+    renderAsAdmin();
+
+    await waitFor(() => expect(screen.getByText('Request Time Off')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Request Time Off'));
+    expect(screen.getByText('Volunteer')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+});

web/src/pages/TimeOff.tsx

@@ -1,31 +1,96 @@
 import React, { useEffect, useState, FormEvent } from 'react';
-import { api, TimeOffRequest } from '../api';
+import { api, ApiError, TimeOffRequest, ConflictingShift, Volunteer } from '../api';
 import { useAuth } from '../auth';
 
 export default function TimeOff() {
-  const { role } = useAuth();
+  const { role, volunteerID } = useAuth();
   const [requests, setRequests] = useState<TimeOffRequest[]>([]);
+  const [volunteers, setVolunteers] = useState<Volunteer[]>([]);
   const [error, setError] = useState('');
   const [showForm, setShowForm] = useState(false);
-  const [form, setForm] = useState({ starts_at: '', ends_at: '', reason: '' });
+  const [form, setForm] = useState({ starts_at: '', ends_at: '', reason: '', volunteer_id: 0 });
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [conflicts, setConflicts] = useState<ConflictingShift[] | null>(null);
+  const [deletePreview, setDeletePreview] = useState<{ id: number; shifts: ConflictingShift[] } | null>(null);
 
   useEffect(() => {
     api.listTimeOff().then(setRequests).catch(() => setError('Could not load requests.'));
-  }, []);
+    if (role === 'admin') {
+      api.listVolunteers().then(vols => setVolunteers(vols as Volunteer[]));
+    }
+  }, [role]);
 
   async function handleCreate(e: FormEvent) {
     e.preventDefault();
     setError('');
     try {
-      const req = await api.createTimeOff(form);
+      const payload: any = { starts_at: form.starts_at, ends_at: form.ends_at, reason: form.reason };
-      setRequests(prev => [req, ...prev]);
+      if (role === 'admin' && form.volunteer_id > 0) {
-      setForm({ starts_at: '', ends_at: '', reason: '' });
+        payload.volunteer_id = form.volunteer_id;
-      setShowForm(false);
+      }
+      if (conflicts) {
+        payload.confirm_conflicts = true;
+      }
+      const result = await api.createTimeOff(payload);
+      setRequests(prev => [result as TimeOffRequest, ...prev]);
+      resetForm();
+    } catch (err: any) {
+      if (err instanceof ApiError && err.status === 409 && err.data?.conflicts) {
+        setConflicts(err.data.conflicts);
+        return;
+      }
+      setError(err.message);
+    }
+  }
+
+  async function handleUpdate(e: FormEvent) {
+    e.preventDefault();
+    if (!editingId) return;
+    setError('');
+    try {
+      const req = await api.updateTimeOff(editingId, {
+        starts_at: form.starts_at,
+        ends_at: form.ends_at,
+        reason: form.reason,
+      });
+      setRequests(prev => prev.map(r => r.id === editingId ? req : r));
+      resetForm();
     } catch (err: any) {
       setError(err.message);
     }
   }
 
+  async function handleDelete(id: number) {
+    setError('');
+    try {
+      const result = await api.deleteTimeOff(id);
+      setRequests(prev => prev.filter(r => r.id !== id));
+      setDeletePreview(null);
+      if (result.restored_shifts?.length > 0) {
+        setError(`Restored volunteer to ${result.restored_shifts.length} shift(s).`);
+      }
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleDeleteClick(id: number) {
+    if (role === 'admin') {
+      try {
+        const shifts = await api.getRemovedShifts(id);
+        if (shifts.length > 0) {
+          setDeletePreview({ id, shifts });
+          return;
+        }
+      } catch {
+        // If we can't fetch preview, proceed with confirm
+      }
+    }
+    if (window.confirm('Delete this time off request?')) {
+      handleDelete(id);
+    }
+  }
+
   async function handleReview(id: number, status: 'approved' | 'rejected') {
     try {
       const req = await api.reviewTimeOff(id, status);
@@ -35,71 +100,150 @@ export default function TimeOff() {
     }
   }
 
+  function startEdit(r: TimeOffRequest) {
+    setEditingId(r.id);
+    setForm({
+      starts_at: r.starts_at.split('T')[0],
+      ends_at: r.ends_at.split('T')[0],
+      reason: r.reason ?? '',
+      volunteer_id: 0,
+    });
+    setShowForm(true);
+    setConflicts(null);
+  }
+
+  function resetForm() {
+    setForm({ starts_at: '', ends_at: '', reason: '', volunteer_id: 0 });
+    setShowForm(false);
+    setEditingId(null);
+    setConflicts(null);
+  }
+
+  function canEditOrDelete(r: TimeOffRequest): boolean {
+    if (role === 'admin') return true;
+    if (r.volunteer_id !== volunteerID) return false;
+    return new Date(r.starts_at) > new Date();
+  }
+
   const statusClass = (status: string) => {
     if (status === 'approved') return 'status-approved';
     if (status === 'rejected') return 'status-rejected';
     return 'status-pending';
   };
 
+  const volunteerName = (vid: number) => {
+    const v = volunteers.find(v => v.id === vid);
+    return v ? v.name : `#${vid}`;
+  };
+
   return (
     <div className="page">
       <div className="page-header">
         <h2>Time Off Requests</h2>
-        <button onClick={() => setShowForm(v => !v)}>
+        <button onClick={() => { if (showForm) resetForm(); else setShowForm(true); }}>
           {showForm ? 'Cancel' : 'Request Time Off'}
         </button>
       </div>
       {error && <p className="error">{error}</p>}
 
       {showForm && (
-        <form className="card" onSubmit={handleCreate}>
+        <form className="card" onSubmit={editingId ? handleUpdate : handleCreate}>
-          <h3>New Request</h3>
+          <h3>{editingId ? 'Edit Request' : 'New Request'}</h3>
+          {role === 'admin' && !editingId && (
+            <label>
+              Volunteer
+              <select
+                value={form.volunteer_id}
+                onChange={e => setForm(f => ({ ...f, volunteer_id: Number(e.target.value) }))}
+              >
+                <option value={0}>Myself</option>
+                {volunteers.filter(v => v.id !== volunteerID).map(v => (
+                  <option key={v.id} value={v.id}>{v.name}</option>
+                ))}
+              </select>
+            </label>
+          )}
           <label>
             From
-            <input type="date" value={form.starts_at} onChange={e => setForm(f => ({ ...f, starts_at: e.target.value }))} required />
+            <input type="date" value={form.starts_at} onChange={e => { setForm(f => ({ ...f, starts_at: e.target.value })); setConflicts(null); }} required />
           </label>
           <label>
             To
-            <input type="date" value={form.ends_at} onChange={e => setForm(f => ({ ...f, ends_at: e.target.value }))} required />
+            <input type="date" value={form.ends_at} onChange={e => { setForm(f => ({ ...f, ends_at: e.target.value })); setConflicts(null); }} required />
           </label>
           <label>
             Reason
             <textarea value={form.reason} onChange={e => setForm(f => ({ ...f, reason: e.target.value }))} />
           </label>
-          <button type="submit">Submit</button>
+
+          {conflicts && (
+            <div className="card" style={{ background: '#fff3cd', border: '1px solid #ffc107', marginBottom: '1rem' }}>
+              <p><strong>Warning:</strong> This time off conflicts with {conflicts.length} assigned shift(s):</p>
+              <ul>
+                {conflicts.map(c => (
+                  <li key={c.instance_id}>{c.name} on {c.date} ({c.start_time}–{c.end_time})</li>
+                ))}
+              </ul>
+              <p>You will be removed from these shifts. Continue?</p>
+            </div>
+          )}
+
+          <button type="submit">
+            {conflicts ? 'Confirm & Submit' : editingId ? 'Save Changes' : 'Submit'}
+          </button>
         </form>
       )}
 
+      {deletePreview && (
+        <div className="card" style={{ background: '#d4edda', border: '1px solid #28a745', marginBottom: '1rem' }}>
+          <h3>Delete Time Off — Shift Restoration Preview</h3>
+          <p>Deleting this time off will restore the volunteer to {deletePreview.shifts.length} shift(s):</p>
+          <ul>
+            {deletePreview.shifts.map(s => (
+              <li key={s.instance_id}>{s.name} on {s.date} ({s.start_time}–{s.end_time})</li>
+            ))}
+          </ul>
+          <button onClick={() => handleDelete(deletePreview.id)}>Confirm Delete &amp; Restore</button>
+          <button onClick={() => setDeletePreview(null)} style={{ marginLeft: '0.5rem' }}>Cancel</button>
+        </div>
+      )}
+
       {requests.length === 0 ? (
         <p>No time off requests.</p>
       ) : (
         <table>
           <thead>
             <tr>
+              {role === 'admin' && <th>Volunteer</th>}
               <th>From</th>
               <th>To</th>
               <th>Reason</th>
               <th>Status</th>
-              {role === 'admin' && <th>Actions</th>}
+              <th>Actions</th>
             </tr>
           </thead>
           <tbody>
             {requests.map(r => (
               <tr key={r.id}>
-                <td>{new Date(r.starts_at).toLocaleDateString()}</td>
+                {role === 'admin' && <td>{volunteerName(r.volunteer_id)}</td>}
-                <td>{new Date(r.ends_at).toLocaleDateString()}</td>
+                <td>{new Date(r.starts_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</td>
+                <td>{new Date(r.ends_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</td>
                 <td>{r.reason ?? '—'}</td>
                 <td><span className={statusClass(r.status)}>{r.status}</span></td>
-                {role === 'admin' && (
                 <td>
-                    {r.status === 'pending' && (
+                  {role === 'admin' && r.status === 'pending' && (
                     <>
                       <button className="btn-small" onClick={() => handleReview(r.id, 'approved')}>Approve</button>
                       <button className="btn-small btn-danger" onClick={() => handleReview(r.id, 'rejected')}>Reject</button>
                     </>
                   )}
-                  </td>
+                  {canEditOrDelete(r) && (
+                    <>
+                      <button className="btn-small" onClick={() => startEdit(r)}>Edit</button>
+                      <button className="btn-small btn-danger" onClick={() => handleDeleteClick(r.id)}>Delete</button>
+                    </>
                   )}
+                </td>
               </tr>
             ))}
           </tbody>

web/src/pages/Volunteers.test.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, type Mock } from 'vitest';
 import { MemoryRouter } from 'react-router-dom';
 import Volunteers from './Volunteers';
 import { api, AdminVolunteer } from '../api';
 import { AuthProvider } from '../auth';
 
-jest.mock('../api', () => ({
+vi.mock('../api', () => ({
   api: {
-    listVolunteers: jest.fn(),
+    listVolunteers: vi.fn(),
-    createVolunteer: jest.fn(),
+    createVolunteer: vi.fn(),
-    updateVolunteer: jest.fn(),
+    updateVolunteer: vi.fn(),
-    resendInvite: jest.fn(),
+    resendInvite: vi.fn(),
   },
   OPERATIONAL_ROLES: ['Behaviour Team', 'Dog Log Monitor', 'Dog Shelter Volunteer', 'Trainee', 'Floater'],
 }));
 
-const mockListVolunteers = api.listVolunteers as jest.Mock;
+const mockListVolunteers = api.listVolunteers as Mock;
-const mockCreateVolunteer = api.createVolunteer as jest.Mock;
+const mockCreateVolunteer = api.createVolunteer as Mock;
-const mockUpdateVolunteer = api.updateVolunteer as jest.Mock;
+const mockUpdateVolunteer = api.updateVolunteer as Mock;
-const mockResendInvite = api.resendInvite as jest.Mock;
+const mockResendInvite = api.resendInvite as Mock;
 
 function buildFakeJWT(payload: object): string {
   const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));

web/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

web/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

web/src/setupTests.ts

@@ -1,9 +1,22 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 
-// React Router v7 requires TextEncoder/TextDecoder which jsdom (CRA 5) does not provide.
+// Node 22+ ships a native localStorage (getter on globalThis) that lacks
-import { TextEncoder, TextDecoder } from 'util';
+// .clear()/.getItem()/etc. jsdom doesn't override it. Delete the native
-Object.assign(global, { TextEncoder, TextDecoder });
+// property and replace it with a spec-compliant Storage implementation.
+const store = new Map<string, string>();
+const storage: Storage = {
+  getItem: (key: string) => store.get(key) ?? null,
+  setItem: (key: string, value: string) => { store.set(key, String(value)); },
+  removeItem: (key: string) => { store.delete(key); },
+  clear: () => { store.clear(); },
+  key: (index: number) => [...store.keys()][index] ?? null,
+  get length() { return store.size; },
+};
+
+delete (globalThis as any).localStorage;
+Object.defineProperty(globalThis, 'localStorage', {
+  value: storage,
+  writable: true,
+  configurable: true,
+  enumerable: true,
+});

web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

web/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.tsx", "src/**/*.test.ts", "src/setupTests.ts"]
+}

web/tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/api.ts","./src/auth.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/pages/activate.tsx","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/profile.tsx","./src/pages/schedules.tsx","./src/pages/setup.tsx","./src/pages/timeoff.tsx","./src/pages/volunteers.tsx"],"version":"6.0.2"}

web/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2020",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,14 +9,13 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vitest/globals"]
   },
-  "include": [
+  "include": ["src", "vite.config.ts"]
-    "src"
-  ]
 }

web/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.test.tsx","./src/app.tsx","./src/api.ts","./src/auth.tsx","./src/main.tsx","./src/setuptests.ts","./src/vite-env.d.ts","./src/pages/activate.test.tsx","./src/pages/activate.tsx","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/profile.test.tsx","./src/pages/profile.tsx","./src/pages/schedules.test.tsx","./src/pages/schedules.tsx","./src/pages/setup.test.tsx","./src/pages/setup.tsx","./src/pages/timeoff.tsx","./src/pages/volunteers.test.tsx","./src/pages/volunteers.tsx","./vite.config.ts"],"errors":true,"version":"6.0.2"}

web/vite.config.ts

@@ -0,0 +1,23 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': 'http://localhost:8080',
+    },
+  },
+  build: {
+    outDir: 'dist',
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+    css: true,
+    unstubGlobals: true,
+  },
+});