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:*)"
     ]
   }
 }

.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"]

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
+	store          Storer
-	notifier Notifier
+	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/server/server.go

@@ -26,11 +26,12 @@ 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)
@@ -81,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)

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

@@ -24,6 +24,14 @@ type Request struct {
 }
 
 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"`
@@ -33,6 +41,23 @@ 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,23 +1,23 @@
 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: {
-    getSetupStatus: jest.fn(),
+    getSetupStatus: vi.fn(),
-    createSetupAdmin: jest.fn(),
+    createSetupAdmin: vi.fn(),
-    listVolunteers: jest.fn().mockResolvedValue([]),
+    listVolunteers: vi.fn().mockResolvedValue([]),
-    listSchedules: jest.fn().mockResolvedValue([]),
+    listSchedules: vi.fn().mockResolvedValue([]),
-    listTimeOff: jest.fn().mockResolvedValue([]),
+    listTimeOff: vi.fn().mockResolvedValue([]),
-    listNotifications: jest.fn().mockResolvedValue([]),
+    listNotifications: vi.fn().mockResolvedValue([]),
-    getVolunteer: jest.fn().mockResolvedValue(null),
+    getVolunteer: vi.fn().mockResolvedValue(null),
   },
   OPERATIONAL_ROLES: [],
 }));
 
-const mockGetSetupStatus = api.getSetupStatus as jest.Mock;
+const mockGetSetupStatus = api.getSetupStatus as Mock;
 
 beforeEach(() => {
   localStorage.clear();

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,10 +27,12 @@ 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: () =>
@@ -67,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) =>
@@ -206,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,32 +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');
-  api: {
+  return {
-    listShifts: jest.fn(),
+    ...actual,
-    listShiftTemplates: jest.fn(),
+    api: {
-    listVolunteers: jest.fn(),
+      listShifts: vi.fn(),
-    listTimeOff: 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,
@@ -75,8 +79,8 @@ function renderAt(path: string) {
 
 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 () => {
@@ -98,9 +102,9 @@ describe('Schedules (volunteer 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 () => {
@@ -111,7 +115,7 @@ describe('Schedules (admin shifts view)', () => {
   });
 
   it('calls generateShifts on Generate click', async () => {
-    (api.generateShifts as jest.Mock).mockResolvedValue([mockDraftInstance]);
+    (api.generateShifts as Mock).mockResolvedValue([mockDraftInstance]);
     renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Generate')).toBeInTheDocument());
     fireEvent.click(screen.getByText('Generate'));
@@ -119,8 +123,8 @@ describe('Schedules (admin shifts view)', () => {
   });
 
   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' }]);
 
@@ -131,7 +135,7 @@ describe('Schedules (admin shifts view)', () => {
   });
 
   it('shows Unpublish button when all shifts are published', async () => {
-    (api.listShifts as jest.Mock).mockResolvedValue([mockPublishedInstance]);
+    (api.listShifts as Mock).mockResolvedValue([mockPublishedInstance]);
     renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Unpublish')).toBeInTheDocument());
   });
@@ -143,11 +147,11 @@ describe('Schedules (admin shifts view)', () => {
   });
 
   it('opens edit form with volunteer checkboxes when Edit is clicked', async () => {
-    (api.listVolunteers as jest.Mock).mockResolvedValue([
+    (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 jest.Mock).mockResolvedValue([]);
+    (api.listTimeOff as Mock).mockResolvedValue([]);
     renderAt('/schedules');
     await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
     fireEvent.click(screen.getByText('Edit'));
@@ -157,11 +161,11 @@ describe('Schedules (admin shifts view)', () => {
   });
 
   it('hides volunteers with approved time off on the shift date', async () => {
-    (api.listVolunteers as jest.Mock).mockResolvedValue([
+    (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 jest.Mock).mockResolvedValue([
+    (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');
@@ -183,8 +187,8 @@ describe('Schedules (admin shifts view)', () => {
 
 describe('Schedules (admin templates view)', () => {
   beforeEach(() => {
-    useAuth.mockReturnValue({ role: 'admin', volunteerID: 1 });
+    (useAuth as Mock).mockReturnValue({ role: 'admin', volunteerID: 1 });
-    (api.listShiftTemplates as jest.Mock).mockResolvedValue([mockTemplate]);
+    (api.listShiftTemplates as Mock).mockResolvedValue([mockTemplate]);
   });
 
   it('renders templates at /schedules/templates', async () => {
@@ -201,8 +205,8 @@ describe('Schedules (admin templates view)', () => {
   });
 
   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);
     renderAt('/schedules/templates');
     await waitFor(() => expect(screen.getAllByText('Delete')[0]).toBeInTheDocument());
     fireEvent.click(screen.getAllByText('Delete')[0]);

web/src/pages/Setup.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, Route, Routes } from 'react-router-dom';
 import Setup from './Setup';
 import { api } from '../api';
 import { AuthProvider } from '../auth';
 
-jest.mock('../api', () => ({
+vi.mock('../api', () => ({
   api: {
-    getSetupStatus: jest.fn(),
+    getSetupStatus: vi.fn(),
-    createSetupAdmin: jest.fn(),
+    createSetupAdmin: vi.fn(),
   },
 }));
 
 // Mock useSetup from App to provide setNeedsSetup
-const mockSetNeedsSetup = jest.fn();
+const mockSetNeedsSetup = vi.fn();
-jest.mock('../App', () => ({
+vi.mock('../App', () => ({
   useSetup: () => ({ setNeedsSetup: mockSetNeedsSetup }),
 }));
 
-const mockCreateSetupAdmin = api.createSetupAdmin as jest.Mock;
+const mockCreateSetupAdmin = api.createSetupAdmin as Mock;
 
 function renderSetup() {
   return render(

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>
-                  <td>
+                  {role === 'admin' && r.status === 'pending' && (
-                    {r.status === 'pending' && (
+                    <>
-                      <>
+                      <button className="btn-small" onClick={() => handleReview(r.id, 'approved')}>Approve</button>
-                        <button className="btn-small" onClick={() => handleReview(r.id, 'approved')}>Approve</button>
+                      <button className="btn-small btn-danger" onClick={() => handleReview(r.id, 'rejected')}>Reject</button>
-                        <button className="btn-small btn-danger" onClick={() => handleReview(r.id, 'rejected')}>Reject</button>
+                    </>
-                      </>
+                  )}
-                    )}
+                  {canEditOrDelete(r) && (
-                  </td>
+                    <>
-                )}
+                      <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,
+  },
+});