Add calendar app — shared events calendar with departments, staff tagging, bank holidays and two-way phone sync

Fastify/Postgres backend + React frontend matching the stack's app conventions, plus
a hand-rolled RFC 4791 CalDAV server (caldav-adapter turned out Koa-only in practice)
so calendars subscribe as genuine two-way sync in Apple/Google/Outlook. v1 scope:
multiple colour-coded calendars, department/staff event tagging via live Workforce
lookups, month/week/day/list views, dashboard, file attachments, activity log, and
an auto-synced UK bank holidays calendar. Verified end-to-end locally against real
Postgres: REST CRUD, CalDAV discovery/PROPFIND/REPORT/PUT/sync-collection, all-day
date handling, system-calendar write protection, and activity logging across both
the web and CalDAV write paths.

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

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.env
+uploads/
+*.log

backend/Dockerfile

@@ -0,0 +1,8 @@
+FROM node:22-alpine
+WORKDIR /app
+COPY package.json .
+RUN npm install --omit=dev
+COPY src ./src
+RUN mkdir -p /app/uploads
+EXPOSE 3001
+CMD ["node", "src/index.js"]

backend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "hnf-calendar-backend",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js"
+  },
+  "dependencies": {
+    "@fastify/cookie": "^9.4.0",
+    "@fastify/cors": "^9.0.1",
+    "@fastify/multipart": "^8.3.0",
+    "@fastify/static": "^7.0.4",
+    "@xmldom/xmldom": "^0.8.10",
+    "bcryptjs": "^2.4.3",
+    "fastify": "^4.28.1",
+    "ical.js": "^2.1.0",
+    "ics": "^3.8.1",
+    "jose": "^5.9.6",
+    "pg": "^8.13.1"
+  }
+}

backend/src/auth.js

@@ -0,0 +1,57 @@
+import { jwtVerify } from 'jose'
+import { isOnsite } from './ip-check.js'
+
+const APP_SLUG = process.env.APP_SLUG || 'calendar'
+const secret = new TextEncoder().encode(process.env.CENTRAL_AUTH_SECRET || '')
+
+export async function requireAuth(request, reply) {
+  const token = request.cookies?.hnf_session
+  if (!token) return reply.status(401).send({ error: 'Not authenticated' })
+
+  let payload
+  try {
+    const { payload: p } = await jwtVerify(token, secret)
+    payload = p
+  } catch {
+    return reply.status(401).send({ error: 'Invalid session' })
+  }
+
+  if (!payload.apps?.includes(APP_SLUG)) {
+    return reply.status(403).send({ error: 'No permission for this app' })
+  }
+
+  if (!payload.offsite_allowed) {
+    const clientIP = request.headers['x-real-ip'] || request.ip
+    if (!(await isOnsite(clientIP))) {
+      return reply.status(403).send({ error: 'Access restricted to site network' })
+    }
+  }
+
+  const prefix = `${APP_SLUG}:`
+  let caps
+  if (Array.isArray(payload.caps)) {
+    caps = payload.caps.filter(c => c.startsWith(prefix)).map(c => c.slice(prefix.length))
+  } else {
+    // Legacy token — grant all non-settings caps until re-login
+    caps = ['view', 'guest_details', 'rate_details', 'view_all_notes', 'complete_tasks', 'update_status']
+  }
+
+  request.user = {
+    email: payload.sub,
+    name: payload.name,
+    is_admin: payload.is_admin ?? false,
+    caps,
+  }
+}
+
+export function hasCap(request, cap) {
+  return request.user?.is_admin === true || request.user?.caps?.includes(cap) === true
+}
+
+export function requireCap(cap) {
+  return async (request, reply) => {
+    if (!hasCap(request, cap)) {
+      return reply.status(403).send({ error: `Missing capability: ${cap}` })
+    }
+  }
+}

backend/src/db.js

@@ -0,0 +1,106 @@
+import pg from 'pg'
+
+const { Pool } = pg
+export const pool = new Pool({ connectionString: process.env.DATABASE_URL })
+
+export async function initDb() {
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS calendars (
+      id           SERIAL PRIMARY KEY,
+      slug         TEXT NOT NULL UNIQUE,
+      name         TEXT NOT NULL,
+      color        TEXT NOT NULL,
+      is_system    BOOLEAN NOT NULL DEFAULT FALSE,
+      deleted_at   TIMESTAMPTZ,
+      created_by   TEXT,
+      created_at   TIMESTAMPTZ NOT NULL DEFAULT NOW()
+    );
+
+    CREATE TABLE IF NOT EXISTS events (
+      id              SERIAL PRIMARY KEY,
+      calendar_id     INT NOT NULL REFERENCES calendars(id),
+      uid             TEXT NOT NULL UNIQUE,   -- iCalendar UID, e.g. '<uuid>@calendar.hotelnumberfour.com'
+      title           TEXT NOT NULL,
+      description     TEXT,
+      location        TEXT,
+      start_at        TIMESTAMPTZ NOT NULL,
+      end_at          TIMESTAMPTZ NOT NULL,
+      all_day         BOOLEAN NOT NULL DEFAULT FALSE,
+      sequence        INT NOT NULL DEFAULT 0,
+      created_by      TEXT,        -- email
+      created_by_name TEXT,
+      updated_at      TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+      created_at      TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+      deleted_at      TIMESTAMPTZ
+    );
+    CREATE INDEX IF NOT EXISTS events_calendar_idx ON events (calendar_id);
+    CREATE INDEX IF NOT EXISTS events_start_idx ON events (start_at);
+    CREATE INDEX IF NOT EXISTS events_deleted_idx ON events (deleted_at);
+
+    CREATE TABLE IF NOT EXISTS event_departments (
+      event_id        INT NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+      department_id   TEXT NOT NULL,
+      department_name TEXT NOT NULL,
+      PRIMARY KEY (event_id, department_id)
+    );
+
+    CREATE TABLE IF NOT EXISTS event_assignees (
+      event_id   INT NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+      user_email TEXT NOT NULL,
+      user_name  TEXT,
+      PRIMARY KEY (event_id, user_email)
+    );
+
+    CREATE TABLE IF NOT EXISTS event_attachments (
+      id           SERIAL PRIMARY KEY,
+      event_id     INT NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+      filename     TEXT NOT NULL,
+      stored_path  TEXT NOT NULL,     -- relative path under uploads dir
+      mime_type    TEXT,
+      size_bytes   INT,
+      uploaded_by  TEXT,              -- email
+      created_at   TIMESTAMPTZ NOT NULL DEFAULT NOW()
+    );
+
+    CREATE TABLE IF NOT EXISTS caldav_credentials (
+      id            SERIAL PRIMARY KEY,
+      user_email    TEXT NOT NULL,
+      username      TEXT NOT NULL UNIQUE,   -- generated, e.g. '<localpart>-<random6>'
+      password_hash TEXT NOT NULL,          -- bcrypt
+      label         TEXT,
+      created_at    TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+      last_used_at  TIMESTAMPTZ
+    );
+
+    CREATE TABLE IF NOT EXISTS activity_log (
+      id           SERIAL PRIMARY KEY,
+      actor_email  TEXT,
+      actor_name   TEXT,
+      action       TEXT NOT NULL,     -- created | updated | deleted
+      entity_type  TEXT NOT NULL,     -- event | calendar | attachment | caldav_credential
+      entity_id    INT,
+      calendar_id  INT,
+      summary      TEXT NOT NULL,
+      details      JSONB,
+      source       TEXT NOT NULL DEFAULT 'web',  -- web | caldav
+      created_at   TIMESTAMPTZ NOT NULL DEFAULT NOW()
+    );
+    CREATE INDEX IF NOT EXISTS activity_log_calendar_idx ON activity_log (calendar_id, created_at DESC);
+    CREATE INDEX IF NOT EXISTS activity_log_entity_idx ON activity_log (entity_type, entity_id);
+  `)
+
+  await seedDefaults()
+}
+
+async function seedDefaults() {
+  await pool.query(
+    `INSERT INTO calendars (slug, name, color, is_system)
+     VALUES ('bank-holidays', 'Bank Holidays', '#64748b', TRUE)
+     ON CONFLICT (slug) DO NOTHING`
+  )
+  await pool.query(
+    `INSERT INTO calendars (slug, name, color, is_system)
+     VALUES ('general', 'All Staff', '#c9a84c', FALSE)
+     ON CONFLICT (slug) DO NOTHING`
+  )
+}

backend/src/index.js

@@ -0,0 +1,56 @@
+import Fastify from 'fastify'
+import cookie from '@fastify/cookie'
+import cors from '@fastify/cors'
+import multipart from '@fastify/multipart'
+import staticFiles from '@fastify/static'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { initDb } from './db.js'
+import { startBankHolidaySync } from './lib/bank-holidays.js'
+import { calendarRoutes } from './routes/calendars.js'
+import { eventRoutes } from './routes/events.js'
+import { attachmentRoutes } from './routes/attachments.js'
+import { activityRoutes } from './routes/activity.js'
+import { departmentRoutes } from './routes/departments.js'
+import { caldavCredentialRoutes } from './routes/caldav-credentials.js'
+import { caldavRoutes } from './routes/caldav.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const UPLOADS_DIR = join(__dirname, '..', 'uploads')
+
+// ignoreTrailingSlash matters for the hand-rolled CalDAV routes — clients
+// vary on whether they request collection URLs with or without a trailing
+// slash, and RFC 4918 treats them as the same resource.
+const app = Fastify({ logger: true, trustProxy: true, ignoreTrailingSlash: true })
+const startedAt = Date.now()
+
+await app.register(cookie)
+await app.register(cors, {
+  origin: process.env.CORS_ORIGIN || false,
+  credentials: true,
+})
+await app.register(multipart, { limits: { fileSize: 10 * 1024 * 1024 } })
+await app.register(staticFiles, {
+  root: UPLOADS_DIR,
+  prefix: '/api/uploads/',
+  decorateReply: false,
+})
+
+app.get('/health', async () => ({ status: 'healthy', version: process.env.BUILD_VERSION || String(startedAt) }))
+
+await app.register(calendarRoutes)
+await app.register(eventRoutes)
+await app.register(attachmentRoutes, { uploadsDir: UPLOADS_DIR })
+await app.register(activityRoutes)
+await app.register(departmentRoutes)
+await app.register(caldavCredentialRoutes)
+await app.register(caldavRoutes)
+
+try {
+  await initDb()
+  startBankHolidaySync(app)
+  await app.listen({ port: 3001, host: '0.0.0.0' })
+} catch (err) {
+  app.log.error(err)
+  process.exit(1)
+}

backend/src/ip-check.js

@@ -0,0 +1,80 @@
+import dns from 'dns/promises'
+
+const raw = (process.env.OFFICE_IP_CHECK || 'disabled').trim()
+const matchers = raw.split(',').map(s => s.trim()).filter(Boolean)
+
+const TTL = 5 * 60 * 1000
+const cache = new Map()
+
+const PUBLIC_IP_URLS = [
+  'https://api.ipify.org',
+  'https://ifconfig.co/ip',
+  'https://icanhazip.com',
+]
+
+function normalizeIP(ip) {
+  return ip?.startsWith('::ffff:') ? ip.slice(7) : ip
+}
+
+function isIPv4(s) {
+  return /^\d{1,3}(\.\d{1,3}){3}$/.test(s)
+}
+
+function ipInCidr(ip, cidr) {
+  const [range, bits] = cidr.split('/')
+  if (!isIPv4(ip) || !isIPv4(range)) return false
+  const mask = ~(2 ** (32 - parseInt(bits)) - 1) >>> 0
+  const toInt = s => s.split('.').reduce((a, o) => (a << 8) + parseInt(o), 0) >>> 0
+  return (toInt(ip) & mask) === (toInt(range) & mask)
+}
+
+async function fetchPublicIP() {
+  for (const url of PUBLIC_IP_URLS) {
+    try {
+      const ctrl = new AbortController()
+      const timer = setTimeout(() => ctrl.abort(), 4000)
+      const res = await fetch(url, { signal: ctrl.signal })
+      clearTimeout(timer)
+      if (!res.ok) continue
+      const ip = (await res.text()).trim()
+      if (isIPv4(ip)) return ip
+    } catch {
+      // try next
+    }
+  }
+  return null
+}
+
+async function resolveDynamic(key, resolver) {
+  const hit = cache.get(key)
+  if (hit && Date.now() < hit.expiry) return hit.ip
+  const ip = await resolver()
+  if (ip) {
+    cache.set(key, { ip, expiry: Date.now() + TTL })
+    return ip
+  }
+  return hit ? hit.ip : null
+}
+
+export async function isOnsite(requestIP) {
+  if (matchers.length === 0 || matchers.includes('disabled')) return true
+  const ip = normalizeIP(requestIP)
+  if (!ip) return false
+
+  for (const m of matchers) {
+    if (m === 'auto') {
+      const pub = await resolveDynamic('auto', fetchPublicIP)
+      if (pub && ip === pub) return true
+    } else if (m.includes('/')) {
+      if (ipInCidr(ip, m)) return true
+    } else if (/[a-zA-Z]/.test(m)) {
+      const resolved = await resolveDynamic(m, async () => {
+        try { return (await dns.resolve4(m))[0] } catch { return null }
+      })
+      if (resolved && ip === resolved) return true
+    } else {
+      if (ip === m) return true
+    }
+  }
+  return false
+}

backend/src/lib/activity.js

@@ -0,0 +1,31 @@
+// Single write path for the activity_log audit trail. Called from every
+// mutation in routes/calendars.js, routes/events.js, routes/attachments.js,
+// routes/caldav-credentials.js, and from lib/caldav-store.js (source: 'caldav').
+export async function logActivity(pool, {
+  actorEmail = null,
+  actorName = null,
+  action,
+  entityType,
+  entityId = null,
+  calendarId = null,
+  summary,
+  details = null,
+  source = 'web',
+}) {
+  await pool.query(
+    `INSERT INTO activity_log
+       (actor_email, actor_name, action, entity_type, entity_id, calendar_id, summary, details, source)
+     VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9)`,
+    [
+      actorEmail,
+      actorName,
+      action,
+      entityType,
+      entityId,
+      calendarId,
+      summary,
+      details != null ? JSON.stringify(details) : null,
+      source,
+    ]
+  )
+}

backend/src/lib/bank-holidays.js

@@ -0,0 +1,57 @@
+// Syncs England & Wales bank holidays from gov.uk into the system
+// "Bank Holidays" calendar. Idempotent (uid is stable per date) and
+// tolerant of the upstream API being unreachable — never crashes the app.
+import { pool } from '../db.js'
+
+const SOURCE_URL = 'https://www.gov.uk/bank-holidays.json'
+const DIVISION = 'england-and-wales'
+
+export async function syncBankHolidays(pool) {
+  let data
+  try {
+    const res = await fetch(SOURCE_URL, { signal: AbortSignal.timeout(10000) })
+    if (!res.ok) throw new Error(`gov.uk bank holidays fetch failed: ${res.status}`)
+    data = await res.json()
+  } catch (err) {
+    console.error('[bank-holidays] sync failed, skipping:', err.message)
+    return
+  }
+
+  const events = data?.[DIVISION]?.events
+  if (!Array.isArray(events)) {
+    console.error('[bank-holidays] unexpected response shape, skipping')
+    return
+  }
+
+  const { rows: cal } = await pool.query(`SELECT id FROM calendars WHERE slug = 'bank-holidays'`)
+  if (!cal.length) {
+    console.error('[bank-holidays] system calendar not found (seedDefaults should have created it), skipping')
+    return
+  }
+  const calendarId = cal[0].id
+
+  for (const holiday of events) {
+    const uid = `bank-holiday-${holiday.date}`
+    const startAt = `${holiday.date}T00:00:00Z`
+    const endAt = `${holiday.date}T00:00:00Z`
+    await pool.query(
+      `INSERT INTO events
+         (calendar_id, uid, title, description, all_day, start_at, end_at, created_by_name, updated_at)
+       VALUES ($1, $2, $3, $4, TRUE, $5, $6, 'GOV.UK Bank Holidays', NOW())
+       ON CONFLICT (uid) DO UPDATE SET
+         title       = EXCLUDED.title,
+         description = EXCLUDED.description,
+         start_at    = EXCLUDED.start_at,
+         end_at      = EXCLUDED.end_at,
+         updated_at  = NOW()`,
+      [calendarId, uid, holiday.title, holiday.notes || null, startAt, endAt]
+    )
+  }
+
+  console.log(`[bank-holidays] synced ${events.length} events`)
+}
+
+export function startBankHolidaySync(app) {
+  syncBankHolidays(pool).catch(err => app.log.error(err))
+  setInterval(() => syncBankHolidays(pool).catch(err => app.log.error(err)), 24 * 60 * 60 * 1000)
+}

backend/src/lib/caldav-store.js

@@ -0,0 +1,200 @@
+// Data-access + iCalendar translation layer for the hand-rolled CalDAV
+// server in routes/caldav.js. All event mutations funnel through
+// routes/events.js's createEvent/updateEvent/deleteEvent/getEventDetail so
+// web and CalDAV writes share one source of truth (source: 'caldav' here).
+import bcrypt from 'bcryptjs'
+import ICAL from 'ical.js'
+import { createEvent as buildIcsEvent } from 'ics'
+import { createEvent, updateEvent, deleteEvent } from '../routes/events.js'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+// ---- auth -------------------------------------------------------------
+
+export async function authenticateBasic(pool, username, password) {
+  if (!username || !password) return null
+  const { rows } = await pool.query('SELECT * FROM caldav_credentials WHERE username = $1', [username])
+  if (!rows.length) return null
+  const cred = rows[0]
+  const ok = await bcrypt.compare(password, cred.password_hash)
+  if (!ok) return null
+  pool.query('UPDATE caldav_credentials SET last_used_at = NOW() WHERE id = $1', [cred.id]).catch(() => {})
+  return { email: cred.user_email }
+}
+
+// ---- calendar collections ----------------------------------------------
+
+export async function listCalendars(pool) {
+  const { rows } = await pool.query(
+    `SELECT * FROM calendars WHERE deleted_at IS NULL ORDER BY is_system ASC, name ASC`
+  )
+  return rows
+}
+
+export async function getCalendarBySlug(pool, slug) {
+  const { rows } = await pool.query(
+    `SELECT * FROM calendars WHERE slug = $1 AND deleted_at IS NULL`, [slug]
+  )
+  return rows[0] || null
+}
+
+// Highest-water-mark timestamp for a calendar's contents — used as the
+// CalendarServer getctag so clients know when to re-list without diffing
+// every resource's etag.
+export async function getCalendarCtag(pool, calendarId) {
+  const { rows } = await pool.query(
+    `SELECT GREATEST(
+        COALESCE((SELECT MAX(updated_at) FROM events WHERE calendar_id = $1 AND deleted_at IS NULL), 'epoch'),
+        COALESCE((SELECT MAX(deleted_at) FROM events WHERE calendar_id = $1 AND deleted_at IS NOT NULL), 'epoch')
+      ) AS ts`,
+    [calendarId]
+  )
+  const ts = rows[0]?.ts
+  return ts ? new Date(ts).getTime().toString() : '0'
+}
+
+export async function listEventsInCalendar(pool, calendarId) {
+  const { rows } = await pool.query(
+    `SELECT id, uid, sequence, updated_at FROM events WHERE calendar_id = $1 AND deleted_at IS NULL ORDER BY uid`,
+    [calendarId]
+  )
+  return rows
+}
+
+export async function getFullEvent(pool, calendarId, uid) {
+  const { rows } = await pool.query(
+    `SELECT * FROM events WHERE calendar_id = $1 AND uid = $2 AND deleted_at IS NULL`,
+    [calendarId, uid]
+  )
+  return rows[0] || null
+}
+
+// Events changed (created/updated) or removed (soft-deleted) since `since`
+// (a Date, or null for a full initial sync). Minimal RFC 6578 support.
+export async function getChangesSince(pool, calendarId, since) {
+  const params = [calendarId]
+  let sinceClause = 'TRUE'
+  if (since) {
+    params.push(since)
+    sinceClause = `updated_at > $2`
+  }
+  const { rows: changed } = await pool.query(
+    `SELECT id, uid, sequence, updated_at FROM events WHERE calendar_id = $1 AND deleted_at IS NULL AND ${sinceClause} ORDER BY updated_at`,
+    params
+  )
+  let removed = []
+  if (since) {
+    const { rows } = await pool.query(
+      `SELECT uid FROM events WHERE calendar_id = $1 AND deleted_at IS NOT NULL AND deleted_at > $2`,
+      [calendarId, since]
+    )
+    removed = rows
+  }
+  return { changed, removed }
+}
+
+// ---- etags --------------------------------------------------------------
+
+export function etagFor(event) {
+  return `"${event.sequence}-${new Date(event.updated_at).getTime()}"`
+}
+
+// ---- iCalendar <-> our event shape ---------------------------------------
+
+function toDateArray(d) {
+  const dt = new Date(d)
+  return [dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate()]
+}
+
+function toDateTimeArray(d) {
+  const dt = new Date(d)
+  return [dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate(), dt.getUTCHours(), dt.getUTCMinutes()]
+}
+
+// Generates a full VCALENDAR document containing one VEVENT. Calendar name
+// is mapped one-way into CATEGORIES for context; it does not round-trip.
+export function eventToIcsString(event, calendarName) {
+  const attrs = {
+    uid: event.uid,
+    title: event.title,
+    description: event.description || undefined,
+    location: event.location || undefined,
+    sequence: event.sequence,
+    categories: calendarName ? [calendarName] : undefined,
+    calName: calendarName || undefined,
+    startInputType: 'utc',
+    startOutputType: 'utc',
+    endInputType: 'utc',
+    endOutputType: 'utc',
+  }
+
+  if (event.all_day) {
+    // Our end_at is the inclusive last day; RFC 5545 requires DTEND for a
+    // DATE value to be the day *after* the last day (exclusive).
+    attrs.start = toDateArray(event.start_at)
+    attrs.end = toDateArray(new Date(new Date(event.end_at).getTime() + DAY_MS))
+  } else {
+    attrs.start = toDateTimeArray(event.start_at)
+    attrs.end = toDateTimeArray(event.end_at)
+  }
+
+  const { error, value } = buildIcsEvent(attrs)
+  if (error) throw error
+  return value
+}
+
+// Parses an incoming PUT body (a VCALENDAR with one VEVENT) into our event
+// field shape. RRULE, if present, is ignored — v1 has no recurring events;
+// every VEVENT is stored as a single one-off occurrence.
+export function parseIcsEvent(icsBody) {
+  const jcal = ICAL.parse(icsBody)
+  const comp = new ICAL.Component(jcal)
+  const vevent = comp.getFirstSubcomponent('vevent')
+  if (!vevent) throw new Error('No VEVENT found in submitted iCalendar data')
+  const event = new ICAL.Event(vevent)
+
+  if (!event.uid) throw new Error('VEVENT missing UID')
+  if (!event.startDate) throw new Error('VEVENT missing DTSTART')
+
+  const allDay = event.startDate.isDate === true
+  const start = event.startDate.toJSDate()
+  let end
+  if (event.endDate) {
+    end = event.endDate.toJSDate()
+  } else if (event.duration) {
+    end = new Date(start.getTime() + event.duration.toSeconds() * 1000)
+  } else {
+    end = start
+  }
+  if (allDay) {
+    // Convert the RFC-mandated exclusive DTEND back to our inclusive
+    // last-day storage convention.
+    end = new Date(end.getTime() - DAY_MS)
+    if (end.getTime() < start.getTime()) end = start
+  }
+
+  return {
+    uid: event.uid,
+    title: event.summary || '(untitled)',
+    description: event.description || null,
+    location: event.location || null,
+    all_day: allDay,
+    start_at: start.toISOString(),
+    end_at: end.toISOString(),
+    sequence: Number.isFinite(event.sequence) ? event.sequence : 0,
+  }
+}
+
+// ---- mutation pass-through (source: 'caldav') ----------------------------
+
+export async function createEventFromCaldav(pool, calendarId, parsed, actorEmail) {
+  return createEvent(pool, { calendar_id: calendarId, ...parsed }, { email: actorEmail, name: actorEmail }, 'caldav')
+}
+
+export async function updateEventFromCaldav(pool, eventId, parsed, actorEmail) {
+  return updateEvent(pool, eventId, parsed, { email: actorEmail, name: actorEmail }, 'caldav')
+}
+
+export async function deleteEventFromCaldav(pool, eventId, actorEmail) {
+  return deleteEvent(pool, eventId, { email: actorEmail, name: actorEmail }, 'caldav')
+}

backend/src/lib/workforce.js

@@ -0,0 +1,92 @@
+// Workforce integration — department lookups for event tagging and the
+// "mine" event filter. Ported from auth/src/workforce.js (not wages' version,
+// which is wage-sync-specific). Never let a Workforce API hiccup break the
+// calendar app: callers that can degrade gracefully should catch and fall
+// back to an empty list.
+const SETTINGS_URL = process.env.SETTINGS_URL || 'http://10.10.10.106:3080'
+const SETTINGS_SECRET = process.env.SETTINGS_SECRET || ''
+
+let _credsCache = null       // { creds, expires_at }
+let _deptsCache = null       // { depts, expires_at } — separate 5-min cache, hit on every tagging picker load
+
+export async function getWorkforceCreds() {
+  if (_credsCache && Date.now() < _credsCache.expires_at) return _credsCache.creds
+  const res = await fetch(`${SETTINGS_URL}/settings/api/internal/integration/workforce`, {
+    headers: { Authorization: `Bearer ${SETTINGS_SECRET}` },
+    signal: AbortSignal.timeout(5000),
+  })
+  if (!res.ok) throw new Error(`Failed to fetch Workforce credentials from settings: ${res.status}`)
+  const creds = await res.json()
+  if (!creds.bearer_token) throw new Error('Workforce bearer token not configured in settings')
+  _credsCache = { creds, expires_at: Date.now() + 5 * 60_000 }
+  return creds
+}
+
+async function wfFetch(path) {
+  const creds = await getWorkforceCreds()
+  const baseUrl = creds.base_url || 'https://my.workforce.com'
+  const res = await fetch(`${baseUrl}${path}`, {
+    headers: { Authorization: `Bearer ${creds.bearer_token}` },
+    signal: AbortSignal.timeout(10000),
+  })
+  if (!res.ok) {
+    const body = await res.text().catch(() => '')
+    throw new Error(`Workforce API error ${res.status} at ${path}${body ? ': ' + body.slice(0, 200) : ''}`)
+  }
+  return res.json()
+}
+
+async function wfFetchPaged(path) {
+  const results = []
+  let page = 1
+  while (true) {
+    const sep = path.includes('?') ? '&' : '?'
+    const data = await wfFetch(`${path}${sep}page=${page}&page_size=100`)
+    const items = Array.isArray(data) ? data : (data.users ?? data.departments ?? data.teams ?? data.locations ?? [])
+    results.push(...items)
+    if (items.length < 100) break
+    page++
+  }
+  return results
+}
+
+export async function findEmployeeByEmail(email) {
+  const data = await wfFetch(`/api/v2/users?email=${encodeURIComponent(email)}`)
+  const users = Array.isArray(data) ? data : (data.users ?? [])
+  return users.length > 0 ? users[0] : null
+}
+
+export async function getAllDepartments() {
+  if (_deptsCache && Date.now() < _deptsCache.expires_at) return _deptsCache.depts
+  const depts = await wfFetchPaged('/api/v2/departments')
+  _deptsCache = { depts, expires_at: Date.now() + 5 * 60_000 }
+  return depts
+}
+
+export async function getEmployeeDepartments(wfUserId) {
+  const depts = await getAllDepartments()
+  const id = String(wfUserId)
+  return depts.filter(d => {
+    const staff    = (d.staff    ?? []).map(String)
+    const managers = (d.managers ?? []).map(String)
+    return staff.includes(id) || managers.includes(id)
+  })
+}
+
+// Convenience: email -> Workforce departments, [] on any failure (unknown
+// employee, Workforce not configured, network error) so callers never need
+// their own try/catch.
+export async function getDepartmentsForEmail(email) {
+  try {
+    const employee = await findEmployeeByEmail(email)
+    if (!employee?.id) return []
+    return await getEmployeeDepartments(employee.id)
+  } catch {
+    return []
+  }
+}
+
+export function invalidateCache() {
+  _credsCache = null
+  _deptsCache = null
+}

backend/src/routes/activity.js

@@ -0,0 +1,38 @@
+import { requireAuth, hasCap } from '../auth.js'
+import { pool } from '../db.js'
+
+// Viewing the history of one specific event (the EventForm's inline "History"
+// panel) only needs `view` — it's no more sensitive than the event itself.
+// The unscoped/cross-calendar activity log is the admin-only surface.
+async function requireActivityAccess(req, reply) {
+  const cap = req.query?.event_id ? 'view' : 'admin'
+  if (!hasCap(req, cap)) {
+    return reply.status(403).send({ error: `Missing capability: ${cap}` })
+  }
+}
+
+export async function activityRoutes(app) {
+  app.addHook('preHandler', requireAuth)
+
+  // GET /api/activity?calendar_id=&event_id=&actor_email=&from=&to=&limit=50&offset=0
+  app.get('/api/activity', { preHandler: requireActivityAccess }, async (req) => {
+    const q = req.query || {}
+    const clauses = []
+    const vals = []
+    const push = v => { vals.push(v); return `$${vals.length}` }
+
+    if (q.calendar_id) clauses.push(`calendar_id = ${push(parseInt(q.calendar_id))}`)
+    if (q.event_id) clauses.push(`entity_type = 'event' AND entity_id = ${push(parseInt(q.event_id))}`)
+    if (q.actor_email) clauses.push(`actor_email = ${push(q.actor_email)}`)
+    if (q.from) clauses.push(`created_at >= ${push(`${q.from}T00:00:00Z`)}`)
+    if (q.to) clauses.push(`created_at <= ${push(`${q.to}T23:59:59Z`)}`)
+
+    const limit = Math.min(parseInt(q.limit) || 50, 200)
+    const offset = parseInt(q.offset) || 0
+
+    const where = clauses.length ? `WHERE ${clauses.join(' AND ')}` : ''
+    const sql = `SELECT * FROM activity_log ${where} ORDER BY created_at DESC LIMIT ${push(limit)} OFFSET ${push(offset)}`
+    const { rows } = await pool.query(sql, vals)
+    return rows
+  })
+}

backend/src/routes/attachments.js

@@ -0,0 +1,67 @@
+import { requireAuth, requireCap } from '../auth.js'
+import { pool } from '../db.js'
+import { logActivity } from '../lib/activity.js'
+import { mkdir, unlink, writeFile } from 'fs/promises'
+import { randomUUID } from 'crypto'
+import { join, extname } from 'path'
+
+export async function attachmentRoutes(app, opts) {
+  const UPLOADS_DIR = opts.uploadsDir
+  app.addHook('preHandler', requireAuth)
+
+  // POST /api/events/:id/attachments — multipart, field "file"
+  app.post('/api/events/:id/attachments', { preHandler: requireCap('edit') }, async (req, reply) => {
+    const eventId = parseInt(req.params.id)
+    const { rows } = await pool.query('SELECT id, calendar_id FROM events WHERE id = $1 AND deleted_at IS NULL', [eventId])
+    if (!rows.length) return reply.status(404).send({ error: 'Event not found' })
+    const event = rows[0]
+
+    const part = await req.file()
+    if (!part) return reply.status(400).send({ error: 'No file uploaded' })
+
+    const chunks = []
+    for await (const chunk of part.file) chunks.push(chunk)
+    const buffer = Buffer.concat(chunks)
+
+    const ext = extname(part.filename || '') || ''
+    const storedName = `${randomUUID()}${ext}`
+    const storedPath = `events/${eventId}/${storedName}`
+    const dir = join(UPLOADS_DIR, 'events', String(eventId))
+    await mkdir(dir, { recursive: true })
+    await writeFile(join(dir, storedName), buffer)
+
+    const { rows: ins } = await pool.query(
+      `INSERT INTO event_attachments (event_id, filename, stored_path, mime_type, size_bytes, uploaded_by)
+       VALUES ($1,$2,$3,$4,$5,$6) RETURNING *`,
+      [eventId, part.filename || storedName, storedPath, part.mimetype || null, buffer.length, req.user.email]
+    )
+    const attachment = ins[0]
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'created', entityType: 'attachment',
+      entityId: attachment.id, calendarId: event.calendar_id, summary: `Added attachment "${attachment.filename}"`,
+    })
+
+    return reply.status(201).send({ ...attachment, url: `/api/uploads/${attachment.stored_path}` })
+  })
+
+  // DELETE /api/attachments/:id
+  app.delete('/api/attachments/:id', { preHandler: requireCap('edit') }, async (req, reply) => {
+    const { rows } = await pool.query(
+      `SELECT a.*, e.calendar_id FROM event_attachments a JOIN events e ON e.id = a.event_id WHERE a.id = $1`,
+      [req.params.id]
+    )
+    if (!rows.length) return reply.status(404).send({ error: 'Attachment not found' })
+    const attachment = rows[0]
+
+    await unlink(join(UPLOADS_DIR, attachment.stored_path)).catch(() => {})
+    await pool.query('DELETE FROM event_attachments WHERE id = $1', [attachment.id])
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'deleted', entityType: 'attachment',
+      entityId: attachment.id, calendarId: attachment.calendar_id, summary: `Deleted attachment "${attachment.filename}"`,
+    })
+
+    return { ok: true }
+  })
+}

backend/src/routes/caldav-credentials.js

@@ -0,0 +1,70 @@
+import { randomBytes } from 'crypto'
+import bcrypt from 'bcryptjs'
+import { requireAuth, requireCap } from '../auth.js'
+import { pool } from '../db.js'
+import { logActivity } from '../lib/activity.js'
+
+// CalDAV requests authenticate via HTTP Basic against caldav_credentials, NOT
+// the session cookie/JWT — there is no live capability check available to a
+// Basic-Auth CalDAV request today (no service-to-service capability endpoint
+// exists in `auth` yet), so generating a credential is gated on
+// calendar:edit at creation time (via this normal cookie-authenticated
+// route) and, once issued, a valid credential grants full CalDAV read/write
+// consistent with v1's flat, app-wide permission model. Revisit when/if a
+// cross-service capability check exists.
+export async function caldavCredentialRoutes(app) {
+  app.addHook('preHandler', requireAuth)
+  app.addHook('preHandler', requireCap('edit'))
+
+  // GET /api/caldav-credentials — the current user's own credentials
+  app.get('/api/caldav-credentials', async (req) => {
+    const { rows } = await pool.query(
+      `SELECT id, username, label, created_at, last_used_at
+       FROM caldav_credentials WHERE user_email = $1 ORDER BY created_at DESC`,
+      [req.user.email]
+    )
+    return rows
+  })
+
+  // POST /api/caldav-credentials — body { label? }; password shown once
+  app.post('/api/caldav-credentials', async (req, reply) => {
+    const { label } = req.body || {}
+    const localpart = req.user.email.split('@')[0].replace(/[^a-z0-9]/gi, '').toLowerCase() || 'user'
+    const username = `${localpart}-${randomBytes(3).toString('hex')}`
+    const password = randomBytes(18).toString('base64url')
+    const passwordHash = await bcrypt.hash(password, 10)
+
+    const { rows } = await pool.query(
+      `INSERT INTO caldav_credentials (user_email, username, password_hash, label)
+       VALUES ($1,$2,$3,$4) RETURNING id, username, label, created_at`,
+      [req.user.email, username, passwordHash, label || null]
+    )
+    const credential = rows[0]
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'created', entityType: 'caldav_credential',
+      entityId: credential.id, summary: `Created CalDAV credential "${username}"`,
+      details: { username, label: label || null },
+    })
+
+    return reply.status(201).send({ id: credential.id, username: credential.username, password, label: credential.label })
+  })
+
+  // DELETE /api/caldav-credentials/:id — only if it belongs to the requesting user
+  app.delete('/api/caldav-credentials/:id', async (req, reply) => {
+    const { rows } = await pool.query(
+      `SELECT * FROM caldav_credentials WHERE id = $1 AND user_email = $2`,
+      [req.params.id, req.user.email]
+    )
+    if (!rows.length) return reply.status(404).send({ error: 'Credential not found' })
+
+    await pool.query('DELETE FROM caldav_credentials WHERE id = $1', [rows[0].id])
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'deleted', entityType: 'caldav_credential',
+      entityId: rows[0].id, summary: `Deleted CalDAV credential "${rows[0].username}"`,
+    })
+
+    return { ok: true }
+  })
+}

backend/src/routes/caldav.js

@@ -0,0 +1,454 @@
+// CalDAV server — hand-rolled RFC 4791 subset, NOT the `caldav-adapter` npm
+// package. `caldav-adapter` (evaluated first, per spec) turned out to be a
+// Koa-only middleware in practice: every route handler in its source
+// (routes/calendar/*.js, routes/principal/*.js) is written directly against
+// a Koa `ctx` (ctx.state, ctx.body, ctx.status, ctx.redirect, ctx.response.set)
+// with no framework-agnostic entry point, despite "fastify" appearing in its
+// package.json keywords. Wrapping that would mean building a full Koa-context
+// shim around Fastify's request/reply for dozens of call sites — more risk
+// than value versus a minimal, purpose-built implementation. Fastify natively
+// supports the WebDAV verbs we need (PROPFIND, REPORT, MKCALENDAR are all in
+// fastify/lib/httpMethods.js and in Node's http.METHODS), so routing them as
+// plain Fastify routes is clean.
+//
+// Scope (deliberately minimal — only what Apple Calendar / Thunderbird need
+// to sync, not the full RFC 4791 surface):
+//   - PROPFIND: root discovery, principal, calendar-home-set, calendar
+//     collections (depth 0/1), and per-resource props during depth-1 listing.
+//   - REPORT: calendar-query (with optional VEVENT time-range filter),
+//     calendar-multiget, sync-collection (RFC 6578, token = an ISO timestamp
+//     watermark — good enough for incremental sync, not a full change log).
+//   - GET/HEAD/PUT/DELETE on individual .ics resources, with If-Match /
+//     If-None-Match handled via a sequence+updated_at ETag.
+//   - MKCALENDAR always rejected (405) — v1 has no CalDAV calendar creation.
+//   - No RRULE support: incoming RRULEs are silently ignored (event is
+//     stored as a single one-off); v1 has no recurring events at all.
+//   - All-day events use DATE values only (never DATE-TIME), converting
+//     between our inclusive-last-day storage and RFC 5545's exclusive DTEND.
+//
+// Auth is HTTP Basic against caldav_credentials (see lib/caldav-store.js),
+// completely separate from the cookie/JWT session used by /api/*.
+import { DOMParser } from '@xmldom/xmldom'
+import { pool } from '../db.js'
+import {
+  authenticateBasic,
+  listCalendars,
+  getCalendarBySlug,
+  getCalendarCtag,
+  listEventsInCalendar,
+  getFullEvent,
+  getChangesSince,
+  etagFor,
+  eventToIcsString,
+  parseIcsEvent,
+  createEventFromCaldav,
+  updateEventFromCaldav,
+  deleteEventFromCaldav,
+} from '../lib/caldav-store.js'
+
+// Must match frontend/nginx.conf's `location /calendar/caldav/` -> backend
+// `/caldav/` mapping. Hrefs in XML responses are client-facing paths, so
+// they need the external `/calendar` prefix nginx strips on the way in.
+const CALDAV_BASE = '/calendar/caldav'
+
+// ---- small XML helpers (hand-written; no XML builder dependency needed for output) ----
+
+function xmlEscape(s) {
+  return String(s ?? '').replace(/[&<>"']/g, c => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;',
+  }[c]))
+}
+
+function propText(tag, value) {
+  return `        <${tag}>${xmlEscape(value)}</${tag}>`
+}
+
+function propRaw(tag, innerXml) {
+  return `        <${tag}>${innerXml}</${tag}>`
+}
+
+function propHref(tag, href) {
+  return `        <${tag}><D:href>${xmlEscape(href)}</D:href></${tag}>`
+}
+
+function davResponse(href, propsXml, status = 'HTTP/1.1 200 OK') {
+  return `  <D:response>\n    <D:href>${xmlEscape(href)}</D:href>\n    <D:propstat>\n      <D:prop>\n${propsXml}\n      </D:prop>\n      <D:status>${status}</D:status>\n    </D:propstat>\n  </D:response>`
+}
+
+function davResponseNotFound(href) {
+  return `  <D:response>\n    <D:href>${xmlEscape(href)}</D:href>\n    <D:status>HTTP/1.1 404 Not Found</D:status>\n  </D:response>`
+}
+
+function multistatus(responsesXml, extraTail = '') {
+  return `<?xml version="1.0" encoding="utf-8"?>\n<D:multistatus xmlns:D="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">\n${responsesXml}${extraTail}\n</D:multistatus>`
+}
+
+function parseXml(str) {
+  if (!str) return null
+  try {
+    return new DOMParser({
+      errorHandler: { warning: () => {}, error: () => {}, fatalError: (msg) => { throw new Error(msg) } },
+    }).parseFromString(str, 'text/xml')
+  } catch {
+    return null
+  }
+}
+
+function icsDateTimeToDate(s) {
+  const m = /^(\d{4})(\d{2})(\d{2})(T(\d{2})(\d{2})(\d{2})Z?)?$/.exec(String(s || ''))
+  if (!m) return null
+  const [, y, mo, d, , h = '00', mi = '00', se = '00'] = m
+  return new Date(Date.UTC(+y, +mo - 1, +d, +h, +mi, +se))
+}
+
+function hrefToUid(href) {
+  if (!href) return null
+  const clean = href.split('?')[0].replace(/\/$/, '')
+  const segments = clean.split('/').filter(Boolean)
+  const last = segments[segments.length - 1]
+  if (!last) return null
+  return decodeURIComponent(last.replace(/\.ics$/i, ''))
+}
+
+function syncTokenFor(date) {
+  return `sync-${date.toISOString()}`
+}
+
+function tokenFromSyncToken(token) {
+  const m = /^sync-(.+)$/.exec(String(token || ''))
+  if (!m) return null
+  const d = new Date(m[1])
+  return isNaN(d.getTime()) ? null : d
+}
+
+// ---- href builders (all client-facing, i.e. prefixed with CALDAV_BASE) ----
+
+function encId(s) {
+  return encodeURIComponent(s)
+}
+function principalHref(email) {
+  return `${CALDAV_BASE}/principals/${encId(email)}/`
+}
+function calendarHomeHref(email) {
+  return `${CALDAV_BASE}/calendars/${encId(email)}/`
+}
+function calendarHref(email, slug) {
+  return `${CALDAV_BASE}/calendars/${encId(email)}/${encId(slug)}/`
+}
+function eventHref(email, slug, uid) {
+  return `${CALDAV_BASE}/calendars/${encId(email)}/${encId(slug)}/${encId(uid)}.ics`
+}
+
+function eventPropsXml(href, event, calendarName, includeData) {
+  const parts = [propText('D:getetag', etagFor(event))]
+  if (includeData) {
+    parts.push(`        <C:calendar-data>${xmlEscape(eventToIcsString(event, calendarName))}</C:calendar-data>`)
+  }
+  return davResponse(href, parts.join('\n'))
+}
+
+// ---- auth ----------------------------------------------------------------
+
+async function caldavAuth(req, reply) {
+  if (req.method === 'OPTIONS') return
+
+  const authHeader = req.headers.authorization
+  if (!authHeader?.startsWith('Basic ')) {
+    reply.header('WWW-Authenticate', 'Basic realm="calendar"')
+    return reply.code(401).send()
+  }
+
+  const decoded = Buffer.from(authHeader.slice(6), 'base64').toString('utf8')
+  const idx = decoded.indexOf(':')
+  const username = idx === -1 ? decoded : decoded.slice(0, idx)
+  const password = idx === -1 ? '' : decoded.slice(idx + 1)
+
+  const user = await authenticateBasic(pool, username, password)
+  if (!user) {
+    reply.header('WWW-Authenticate', 'Basic realm="calendar"')
+    return reply.code(401).send()
+  }
+  req.caldavUser = user
+}
+
+// ---- REPORT sub-handlers ---------------------------------------------------
+
+async function handleCalendarQuery(reply, email, cal, doc) {
+  const { rows: events } = await pool.query(
+    'SELECT * FROM events WHERE calendar_id = $1 AND deleted_at IS NULL ORDER BY uid', [cal.id]
+  )
+  let filtered = events
+  const timeRangeEl = doc?.getElementsByTagNameNS?.('urn:ietf:params:xml:ns:caldav', 'time-range')?.[0]
+  if (timeRangeEl) {
+    const start = icsDateTimeToDate(timeRangeEl.getAttribute('start'))
+    const end = icsDateTimeToDate(timeRangeEl.getAttribute('end'))
+    filtered = events.filter(e =>
+      (!end || new Date(e.start_at) <= end) && (!start || new Date(e.end_at) >= start)
+    )
+  }
+
+  const responses = filtered.map(e => eventPropsXml(eventHref(email, cal.slug, e.uid), e, cal.name, true))
+  reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(multistatus(responses.join('\n')))
+}
+
+async function handleMultiget(reply, email, cal, doc) {
+  const hrefEls = doc?.getElementsByTagNameNS?.('DAV:', 'href') || []
+  const responses = []
+  for (let i = 0; i < hrefEls.length; i++) {
+    const uid = hrefToUid(hrefEls[i].textContent)
+    if (!uid) continue
+    const ev = await getFullEvent(pool, cal.id, uid)
+    if (!ev) continue
+    responses.push(eventPropsXml(eventHref(email, cal.slug, ev.uid), ev, cal.name, true))
+  }
+  reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(multistatus(responses.join('\n')))
+}
+
+async function handleSyncCollection(reply, email, cal, doc) {
+  const tokenEl = doc?.getElementsByTagNameNS?.('DAV:', 'sync-token')?.[0]
+  const since = tokenEl?.textContent ? tokenFromSyncToken(tokenEl.textContent.trim()) : null
+
+  // Capture the new watermark BEFORE querying, not after: if a write commits
+  // in the gap between the query and the token, we want the next sync to
+  // re-see it (harmless — just re-delivers an already-known event) rather
+  // than silently drop it (the token would then be newer than the write's
+  // updated_at, so a `since`-filtered query would never surface it again).
+  const newToken = syncTokenFor(new Date())
+  const { changed, removed } = await getChangesSince(pool, cal.id, since)
+  const responses = []
+  for (const partial of changed) {
+    const full = await getFullEvent(pool, cal.id, partial.uid)
+    if (!full) continue
+    responses.push(eventPropsXml(eventHref(email, cal.slug, full.uid), full, cal.name, true))
+  }
+  for (const r of removed) {
+    responses.push(davResponseNotFound(eventHref(email, cal.slug, r.uid)))
+  }
+
+  const tail = `\n  <D:sync-token>${xmlEscape(newToken)}</D:sync-token>`
+  reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(multistatus(responses.join('\n'), tail))
+}
+
+// ----------------------------------------------------------------------------
+
+export async function caldavRoutes(app) {
+  // Raw string body for XML (PROPFIND/REPORT) and text/calendar (PUT) —
+  // none of these match Fastify's default JSON parser.
+  app.addContentTypeParser('*', { parseAs: 'string' }, (req, body, done) => done(null, body))
+
+  app.addHook('preHandler', caldavAuth)
+
+  // ---- discovery ----
+
+  app.route({
+    method: ['OPTIONS'],
+    url: '/caldav',
+    handler: optionsHandler,
+  })
+  app.route({
+    method: ['OPTIONS'],
+    url: '/caldav/*',
+    handler: optionsHandler,
+  })
+  function optionsHandler(req, reply) {
+    reply
+      .header('Allow', 'OPTIONS, GET, HEAD, PUT, DELETE, PROPFIND, REPORT')
+      .header('DAV', '1, 2, 3, calendar-access')
+      .code(200).send()
+  }
+
+  app.route({
+    method: ['PROPFIND'],
+    url: '/caldav/',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const body = multistatus(davResponse(`${CALDAV_BASE}/`, [
+        propHref('D:current-user-principal', principalHref(email)),
+        propRaw('D:resourcetype', '<D:collection/>'),
+      ].join('\n')))
+      reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(body)
+    },
+  })
+
+  // ---- principal ----
+
+  app.route({
+    method: ['PROPFIND'],
+    url: '/caldav/principals/:principal/',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const body = multistatus(davResponse(principalHref(email), [
+        propRaw('D:resourcetype', '<D:collection/><D:principal/>'),
+        propText('D:displayname', email),
+        propHref('C:calendar-home-set', calendarHomeHref(email)),
+        propHref('D:current-user-principal', principalHref(email)),
+        propHref('D:principal-URL', principalHref(email)),
+      ].join('\n')))
+      reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(body)
+    },
+  })
+
+  // ---- calendar-home-set (list all calendars) ----
+
+  app.route({
+    method: ['PROPFIND'],
+    url: '/caldav/calendars/:principal/',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const depth = req.headers.depth ?? '0'
+      const responses = [davResponse(calendarHomeHref(email), [
+        propRaw('D:resourcetype', '<D:collection/>'),
+        propText('D:displayname', 'Calendars'),
+      ].join('\n'))]
+
+      if (depth !== '0') {
+        const calendars = await listCalendars(pool)
+        for (const cal of calendars) {
+          const ctag = await getCalendarCtag(pool, cal.id)
+          responses.push(davResponse(calendarHref(email, cal.slug), [
+            propRaw('D:resourcetype', '<D:collection/><C:calendar/>'),
+            propText('D:displayname', cal.name),
+            propRaw('C:supported-calendar-component-set', '<C:comp name="VEVENT"/>'),
+            propText('CS:getctag', ctag),
+            propText('ICAL:calendar-color', cal.color),
+          ].join('\n')))
+        }
+      }
+      reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(multistatus(responses.join('\n')))
+    },
+  })
+
+  // ---- a specific calendar collection: PROPFIND + REPORT ----
+
+  app.route({
+    method: ['PROPFIND'],
+    url: '/caldav/calendars/:principal/:slug/',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const cal = await getCalendarBySlug(pool, req.params.slug)
+      if (!cal) return reply.code(404).send()
+      const depth = req.headers.depth ?? '0'
+
+      const ctag = await getCalendarCtag(pool, cal.id)
+      const responses = [davResponse(calendarHref(email, cal.slug), [
+        propRaw('D:resourcetype', '<D:collection/><C:calendar/>'),
+        propText('D:displayname', cal.name),
+        propRaw('C:supported-calendar-component-set', '<C:comp name="VEVENT"/>'),
+        propText('CS:getctag', ctag),
+        propText('ICAL:calendar-color', cal.color),
+      ].join('\n'))]
+
+      if (depth !== '0') {
+        const events = await listEventsInCalendar(pool, cal.id)
+        for (const ev of events) {
+          responses.push(davResponse(eventHref(email, cal.slug, ev.uid), propText('D:getetag', etagFor(ev))))
+        }
+      }
+      reply.code(207).header('Content-Type', 'application/xml; charset=utf-8').send(multistatus(responses.join('\n')))
+    },
+  })
+
+  app.route({
+    method: ['REPORT'],
+    url: '/caldav/calendars/:principal/:slug/',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const cal = await getCalendarBySlug(pool, req.params.slug)
+      if (!cal) return reply.code(404).send()
+
+      const doc = parseXml(req.body)
+      const root = doc?.documentElement
+      const rootName = root?.localName || root?.tagName || ''
+
+      if (rootName === 'sync-collection') return handleSyncCollection(reply, email, cal, doc)
+      if (rootName === 'calendar-multiget') return handleMultiget(reply, email, cal, doc)
+      return handleCalendarQuery(reply, email, cal, doc)
+    },
+  })
+
+  // MKCALENDAR — no CalDAV-side calendar creation in v1.
+  app.route({
+    method: ['MKCALENDAR'],
+    url: '/caldav/calendars/:principal/:slug',
+    handler: async (req, reply) => {
+      reply.code(405).header('Allow', 'PROPFIND, REPORT, OPTIONS').send()
+    },
+  })
+
+  // ---- individual event resources: GET/HEAD/PUT/DELETE ----
+
+  app.route({
+    method: ['GET', 'HEAD'],
+    url: '/caldav/calendars/:principal/:slug/:filename',
+    handler: async (req, reply) => {
+      const cal = await getCalendarBySlug(pool, req.params.slug)
+      if (!cal) return reply.code(404).send()
+      const uid = decodeURIComponent(req.params.filename).replace(/\.ics$/i, '')
+      const ev = await getFullEvent(pool, cal.id, uid)
+      if (!ev) return reply.code(404).send()
+
+      reply.header('Content-Type', 'text/calendar; charset=utf-8').header('ETag', etagFor(ev))
+      if (req.method === 'HEAD') return reply.code(200).send()
+      return reply.send(eventToIcsString(ev, cal.name))
+    },
+  })
+
+  app.route({
+    method: ['PUT'],
+    url: '/caldav/calendars/:principal/:slug/:filename',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const cal = await getCalendarBySlug(pool, req.params.slug)
+      if (!cal) return reply.code(404).send()
+      if (cal.is_system) return reply.code(403).send('Cannot write to a system calendar')
+
+      let parsed
+      try {
+        parsed = parseIcsEvent(req.body || '')
+      } catch (err) {
+        return reply.code(400).send(err.message)
+      }
+
+      // The resource URL is the identity; fall back to the body's own UID
+      // only if the client didn't send one in the URL (shouldn't happen).
+      const uid = decodeURIComponent(req.params.filename).replace(/\.ics$/i, '') || parsed.uid
+
+      const existing = await getFullEvent(pool, cal.id, uid)
+      const ifMatch = req.headers['if-match']
+      const ifNoneMatch = req.headers['if-none-match']
+
+      if (existing) {
+        if (ifNoneMatch === '*') return reply.code(412).send()
+        if (ifMatch && ifMatch !== etagFor(existing)) return reply.code(412).send()
+        await updateEventFromCaldav(pool, existing.id, { ...parsed, uid }, email)
+      } else {
+        if (ifMatch) return reply.code(412).send()
+        await createEventFromCaldav(pool, cal.id, { ...parsed, uid }, email)
+      }
+
+      const full = await getFullEvent(pool, cal.id, uid)
+      reply.code(existing ? 204 : 201).header('ETag', etagFor(full)).send()
+    },
+  })
+
+  app.route({
+    method: ['DELETE'],
+    url: '/caldav/calendars/:principal/:slug/:filename',
+    handler: async (req, reply) => {
+      const email = req.caldavUser.email
+      const cal = await getCalendarBySlug(pool, req.params.slug)
+      if (!cal) return reply.code(404).send()
+      if (cal.is_system) return reply.code(403).send('Cannot write to a system calendar')
+
+      const uid = decodeURIComponent(req.params.filename).replace(/\.ics$/i, '')
+      const existing = await getFullEvent(pool, cal.id, uid)
+      if (!existing) return reply.code(404).send()
+
+      const ifMatch = req.headers['if-match']
+      if (ifMatch && ifMatch !== etagFor(existing)) return reply.code(412).send()
+
+      await deleteEventFromCaldav(pool, existing.id, email)
+      reply.code(204).send()
+    },
+  })
+}

backend/src/routes/calendars.js

@@ -0,0 +1,96 @@
+import { requireAuth, requireCap } from '../auth.js'
+import { pool } from '../db.js'
+import { logActivity } from '../lib/activity.js'
+
+function slugify(name) {
+  return String(name)
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '') || 'calendar'
+}
+
+async function uniqueSlug(base) {
+  let slug = base
+  let n = 2
+  while (true) {
+    const { rows } = await pool.query('SELECT 1 FROM calendars WHERE slug = $1', [slug])
+    if (!rows.length) return slug
+    slug = `${base}-${n}`
+    n++
+  }
+}
+
+export async function calendarRoutes(app) {
+  app.addHook('preHandler', requireAuth)
+
+  // GET /api/calendars
+  app.get('/api/calendars', { preHandler: requireCap('view') }, async () => {
+    const { rows } = await pool.query(
+      `SELECT * FROM calendars WHERE deleted_at IS NULL ORDER BY is_system ASC, name ASC`
+    )
+    return rows
+  })
+
+  // POST /api/calendars
+  app.post('/api/calendars', { preHandler: requireCap('manage_calendars') }, async (req, reply) => {
+    const { name, color } = req.body || {}
+    if (!name || !color) return reply.status(400).send({ error: 'name and color required' })
+
+    const slug = await uniqueSlug(slugify(name))
+    const { rows } = await pool.query(
+      `INSERT INTO calendars (slug, name, color, is_system, created_by)
+       VALUES ($1, $2, $3, FALSE, $4) RETURNING *`,
+      [slug, name, color, req.user.email]
+    )
+    const calendar = rows[0]
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'created', entityType: 'calendar',
+      entityId: calendar.id, calendarId: calendar.id, summary: `Created calendar "${calendar.name}"`,
+    })
+
+    return reply.status(201).send(calendar)
+  })
+
+  // PATCH /api/calendars/:id
+  app.patch('/api/calendars/:id', { preHandler: requireCap('manage_calendars') }, async (req, reply) => {
+    const id = parseInt(req.params.id)
+    const { rows: existing } = await pool.query('SELECT * FROM calendars WHERE id = $1 AND deleted_at IS NULL', [id])
+    if (!existing.length) return reply.status(404).send({ error: 'Calendar not found' })
+    if (existing[0].is_system) return reply.status(400).send({ error: 'Cannot edit a system calendar' })
+
+    const b = req.body || {}
+    const name = b.name ?? existing[0].name
+    const color = b.color ?? existing[0].color
+
+    const { rows } = await pool.query(
+      `UPDATE calendars SET name = $1, color = $2 WHERE id = $3 RETURNING *`,
+      [name, color, id]
+    )
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'updated', entityType: 'calendar',
+      entityId: id, calendarId: id, summary: `Updated calendar "${rows[0].name}"`,
+    })
+
+    return rows[0]
+  })
+
+  // DELETE /api/calendars/:id — soft delete
+  app.delete('/api/calendars/:id', { preHandler: requireCap('manage_calendars') }, async (req, reply) => {
+    const id = parseInt(req.params.id)
+    const { rows: existing } = await pool.query('SELECT * FROM calendars WHERE id = $1 AND deleted_at IS NULL', [id])
+    if (!existing.length) return reply.status(404).send({ error: 'Calendar not found' })
+    if (existing[0].is_system) return reply.status(400).send({ error: 'Cannot delete a system calendar' })
+
+    await pool.query('UPDATE calendars SET deleted_at = NOW() WHERE id = $1', [id])
+
+    await logActivity(pool, {
+      actorEmail: req.user.email, actorName: req.user.name, action: 'deleted', entityType: 'calendar',
+      entityId: id, calendarId: id, summary: `Deleted calendar "${existing[0].name}"`,
+    })
+
+    return { ok: true }
+  })
+}

backend/src/routes/departments.js

@@ -0,0 +1,41 @@
+import { requireAuth, requireCap } from '../auth.js'
+import { pool } from '../db.js'
+import { getAllDepartments, getDepartmentsForEmail } from '../lib/workforce.js'
+import { queryEventSummaries } from './events.js'
+
+export async function departmentRoutes(app) {
+  app.addHook('preHandler', requireAuth)
+  app.addHook('preHandler', requireCap('view'))
+
+  // GET /api/departments — all Workforce departments, for the event tagging picker
+  app.get('/api/departments', async () => {
+    try {
+      const depts = await getAllDepartments()
+      return depts.map(d => ({ id: String(d.id), name: d.name }))
+    } catch {
+      return []
+    }
+  })
+
+  // GET /api/me/departments
+  app.get('/api/me/departments', async (req) => {
+    const depts = await getDepartmentsForEmail(req.user.email)
+    return depts.map(d => ({ id: String(d.id), name: d.name }))
+  })
+
+  // GET /api/me/upcoming?days=7
+  app.get('/api/me/upcoming', async (req) => {
+    const days = Math.max(1, Math.min(parseInt(req.query?.days) || 7, 90))
+    const today = new Date()
+    const from = today.toISOString().slice(0, 10) + 'T00:00:00Z'
+    const end = new Date(today.getTime() + days * 24 * 60 * 60 * 1000)
+    const to = end.toISOString().slice(0, 10) + 'T23:59:59Z'
+
+    const depts = await getDepartmentsForEmail(req.user.email)
+    const mineDeptIds = depts.map(d => String(d.id))
+
+    return queryEventSummaries(pool, {
+      from, to, mineEmail: req.user.email, mineDeptIds,
+    })
+  })
+}

backend/src/routes/events.js

@@ -0,0 +1,328 @@
+import { randomUUID } from 'crypto'
+import { requireAuth, requireCap } from '../auth.js'
+import { pool } from '../db.js'
+import { logActivity } from '../lib/activity.js'
+import { getDepartmentsForEmail } from '../lib/workforce.js'
+
+// Single source of truth for event mutation logic — both the Fastify route
+// handlers below AND lib/caldav-store.js import and call these so a change
+// made via CalDAV and a change made via the web UI go through identical
+// validation, join-table handling and activity logging (source differs).
+
+// Column aliases here (department_names/assignee_names) match the frontend's
+// EventSummary type exactly — it flattens tags down to name arrays for list/
+// agenda views. EventDetail (see getEventDetail) extends EventSummary, so it
+// carries these same flat arrays *and* the richer {id,name}/{email,name}
+// object arrays for the edit form.
+const EVENT_SUMMARY_SELECT = `
+  SELECT e.id, e.calendar_id, c.name AS calendar_name, c.color AS calendar_color,
+         e.uid, e.title, e.location, e.start_at, e.end_at, e.all_day,
+         COALESCE(d.department_names, '[]'::json) AS department_names,
+         COALESCE(a.assignee_names, '[]'::json) AS assignee_names,
+         COALESCE(att.attachment_count, 0)::int AS attachment_count
+  FROM events e
+  JOIN calendars c ON c.id = e.calendar_id
+  LEFT JOIN LATERAL (
+    SELECT json_agg(ed.department_name ORDER BY ed.department_name) AS department_names
+    FROM event_departments ed WHERE ed.event_id = e.id
+  ) d ON TRUE
+  LEFT JOIN LATERAL (
+    SELECT json_agg(COALESCE(ea.user_name, ea.user_email) ORDER BY COALESCE(ea.user_name, ea.user_email)) AS assignee_names
+    FROM event_assignees ea WHERE ea.event_id = e.id
+  ) a ON TRUE
+  LEFT JOIN LATERAL (
+    SELECT COUNT(*) AS attachment_count FROM event_attachments att2 WHERE att2.event_id = e.id
+  ) att ON TRUE
+`
+
+const DIFF_FIELDS = ['title', 'description', 'location', 'start_at', 'end_at', 'all_day']
+
+function normalizeForDiff(v) {
+  if (v == null) return v
+  if (v instanceof Date) return v.toISOString()
+  return v
+}
+
+async function replaceDepartments(pool, eventId, departments) {
+  await pool.query('DELETE FROM event_departments WHERE event_id = $1', [eventId])
+  for (const d of departments) {
+    if (!d?.id) continue
+    await pool.query(
+      `INSERT INTO event_departments (event_id, department_id, department_name)
+       VALUES ($1,$2,$3) ON CONFLICT DO NOTHING`,
+      [eventId, String(d.id), d.name || String(d.id)]
+    )
+  }
+}
+
+async function replaceAssignees(pool, eventId, assignees) {
+  await pool.query('DELETE FROM event_assignees WHERE event_id = $1', [eventId])
+  for (const a of assignees) {
+    if (!a?.email) continue
+    await pool.query(
+      `INSERT INTO event_assignees (event_id, user_email, user_name)
+       VALUES ($1,$2,$3) ON CONFLICT DO NOTHING`,
+      [eventId, a.email, a.name || a.email]
+    )
+  }
+}
+
+// GET /api/events list query, also reused by GET /api/me/upcoming.
+export async function queryEventSummaries(pool, { from, to, calendarId, departmentId, mineEmail, mineDeptIds } = {}) {
+  const clauses = ['e.deleted_at IS NULL']
+  const vals = []
+  const push = v => { vals.push(v); return `$${vals.length}` }
+
+  if (from) clauses.push(`e.end_at >= ${push(from)}`)
+  if (to) clauses.push(`e.start_at <= ${push(to)}`)
+  if (calendarId) clauses.push(`e.calendar_id = ${push(calendarId)}`)
+  if (departmentId) {
+    clauses.push(`EXISTS (SELECT 1 FROM event_departments ed WHERE ed.event_id = e.id AND ed.department_id = ${push(String(departmentId))})`)
+  }
+  if (mineEmail) {
+    const deptIds = mineDeptIds || []
+    if (deptIds.length) {
+      clauses.push(`(
+        EXISTS (SELECT 1 FROM event_assignees ea WHERE ea.event_id = e.id AND ea.user_email = ${push(mineEmail)})
+        OR EXISTS (SELECT 1 FROM event_departments ed WHERE ed.event_id = e.id AND ed.department_id = ANY(${push(deptIds)}))
+      )`)
+    } else {
+      clauses.push(`EXISTS (SELECT 1 FROM event_assignees ea WHERE ea.event_id = e.id AND ea.user_email = ${push(mineEmail)})`)
+    }
+  }
+
+  const sql = `${EVENT_SUMMARY_SELECT} WHERE ${clauses.join(' AND ')} ORDER BY e.start_at ASC`
+  const { rows } = await pool.query(sql, vals)
+  return rows
+}
+
+export async function getEventDetail(pool, id) {
+  const { rows } = await pool.query(
+    `SELECT e.*, c.id AS cal_id, c.name AS cal_name, c.color AS cal_color, c.is_system AS cal_is_system
+     FROM events e JOIN calendars c ON c.id = e.calendar_id
+     WHERE e.id = $1 AND e.deleted_at IS NULL`,
+    [id]
+  )
+  if (!rows.length) return null
+  const row = rows[0]
+
+  const [{ rows: departments }, { rows: assignees }, { rows: attachments }] = await Promise.all([
+    pool.query('SELECT department_id AS id, department_name AS name FROM event_departments WHERE event_id = $1 ORDER BY department_name', [id]),
+    pool.query('SELECT user_email AS email, user_name AS name FROM event_assignees WHERE event_id = $1 ORDER BY user_name', [id]),
+    pool.query('SELECT id, filename, mime_type, size_bytes, stored_path FROM event_attachments WHERE event_id = $1 ORDER BY created_at', [id]),
+  ])
+
+  return {
+    // EventSummary fields (EventDetail extends EventSummary on the frontend)
+    id: row.id,
+    calendar_id: row.calendar_id,
+    calendar_name: row.cal_name,
+    calendar_color: row.cal_color,
+    uid: row.uid,
+    title: row.title,
+    location: row.location,
+    start_at: row.start_at,
+    end_at: row.end_at,
+    all_day: row.all_day,
+    department_names: departments.map(d => d.name),
+    assignee_names: assignees.map(a => a.name),
+    attachment_count: attachments.length,
+    // EventDetail-only fields
+    description: row.description,
+    sequence: row.sequence,
+    created_by: row.created_by,
+    created_by_name: row.created_by_name,
+    updated_at: row.updated_at,
+    created_at: row.created_at,
+    departments,
+    assignees,
+    attachments: attachments.map(a => ({
+      id: a.id, filename: a.filename, mime_type: a.mime_type, size_bytes: a.size_bytes,
+      url: `/api/uploads/${a.stored_path}`,
+    })),
+    calendar: { id: row.cal_id, name: row.cal_name, color: row.cal_color, is_system: row.cal_is_system },
+  }
+}
+
+// data: { calendar_id, title, description?, location?, start_at, end_at, all_day,
+//         departments?: [{id,name}], assignees?: [{email,name}], uid? }
+// actor: { email, name }
+export async function createEvent(pool, data, actor, source = 'web') {
+  const uid = data.uid || `${randomUUID()}@calendar.hotelnumberfour.com`
+  const { rows } = await pool.query(
+    `INSERT INTO events (calendar_id, uid, title, description, location, start_at, end_at, all_day, created_by, created_by_name)
+     VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10) RETURNING id`,
+    [
+      data.calendar_id,
+      uid,
+      data.title,
+      data.description || null,
+      data.location || null,
+      data.start_at,
+      data.end_at,
+      !!data.all_day,
+      actor.email || null,
+      actor.name || null,
+    ]
+  )
+  const eventId = rows[0].id
+
+  if (data.departments !== undefined) await replaceDepartments(pool, eventId, data.departments)
+  if (data.assignees !== undefined) await replaceAssignees(pool, eventId, data.assignees)
+
+  await logActivity(pool, {
+    actorEmail: actor.email, actorName: actor.name, action: 'created', entityType: 'event',
+    entityId: eventId, calendarId: data.calendar_id, summary: `Created event "${data.title}"`, source,
+  })
+
+  return getEventDetail(pool, eventId)
+}
+
+// data: partial — same shape as createEvent. Fields omitted entirely are left
+// unchanged (this matters for CalDAV updates, which never send departments/
+// assignees and must not wipe them).
+export async function updateEvent(pool, id, data, actor, source = 'web') {
+  const { rows: existingRows } = await pool.query('SELECT * FROM events WHERE id = $1 AND deleted_at IS NULL', [id])
+  if (!existingRows.length) return null
+  const existing = existingRows[0]
+
+  const merged = {
+    title: data.title ?? existing.title,
+    description: data.description !== undefined ? data.description : existing.description,
+    location: data.location !== undefined ? data.location : existing.location,
+    start_at: data.start_at ?? existing.start_at,
+    end_at: data.end_at ?? existing.end_at,
+    all_day: data.all_day !== undefined ? !!data.all_day : existing.all_day,
+    calendar_id: data.calendar_id ?? existing.calendar_id,
+  }
+
+  await pool.query(
+    `UPDATE events SET
+       title = $1, description = $2, location = $3, start_at = $4, end_at = $5, all_day = $6,
+       calendar_id = $7, sequence = sequence + 1, updated_at = NOW()
+     WHERE id = $8`,
+    [merged.title, merged.description, merged.location, merged.start_at, merged.end_at, merged.all_day, merged.calendar_id, id]
+  )
+
+  if (data.departments !== undefined) await replaceDepartments(pool, id, data.departments)
+  if (data.assignees !== undefined) await replaceAssignees(pool, id, data.assignees)
+
+  const changes = {}
+  for (const f of DIFF_FIELDS) {
+    if (data[f] === undefined) continue
+    const before = normalizeForDiff(existing[f])
+    const after = normalizeForDiff(data[f])
+    if (String(before) !== String(after)) changes[f] = { from: before, to: after }
+  }
+
+  await logActivity(pool, {
+    actorEmail: actor.email, actorName: actor.name, action: 'updated', entityType: 'event',
+    entityId: id, calendarId: merged.calendar_id, summary: `Updated event "${merged.title}"`,
+    details: Object.keys(changes).length ? changes : null, source,
+  })
+
+  return getEventDetail(pool, id)
+}
+
+export async function deleteEvent(pool, id, actor, source = 'web') {
+  const { rows } = await pool.query('SELECT id, title, calendar_id FROM events WHERE id = $1 AND deleted_at IS NULL', [id])
+  if (!rows.length) return false
+  const event = rows[0]
+
+  await pool.query('UPDATE events SET deleted_at = NOW() WHERE id = $1', [id])
+
+  await logActivity(pool, {
+    actorEmail: actor.email, actorName: actor.name, action: 'deleted', entityType: 'event',
+    entityId: id, calendarId: event.calendar_id, summary: `Deleted event "${event.title}"`, source,
+  })
+
+  return true
+}
+
+export async function eventRoutes(app) {
+  app.addHook('preHandler', requireAuth)
+
+  // GET /api/events?from=&to=&calendar_id=&department_id=&mine=true
+  app.get('/api/events', { preHandler: requireCap('view') }, async (req) => {
+    const q = req.query || {}
+    const from = q.from ? `${q.from}T00:00:00Z` : null
+    const to = q.to ? `${q.to}T23:59:59Z` : null
+
+    let mineDeptIds = []
+    if (q.mine === 'true') {
+      const depts = await getDepartmentsForEmail(req.user.email)
+      mineDeptIds = depts.map(d => String(d.id))
+    }
+
+    return queryEventSummaries(pool, {
+      from,
+      to,
+      calendarId: q.calendar_id ? parseInt(q.calendar_id) : null,
+      departmentId: q.department_id || null,
+      mineEmail: q.mine === 'true' ? req.user.email : null,
+      mineDeptIds,
+    })
+  })
+
+  // GET /api/events/:id — full detail
+  app.get('/api/events/:id', { preHandler: requireCap('view') }, async (req, reply) => {
+    const detail = await getEventDetail(pool, parseInt(req.params.id))
+    if (!detail) return reply.status(404).send({ error: 'Event not found' })
+    return detail
+  })
+
+  // POST /api/events
+  app.post('/api/events', { preHandler: requireCap('create') }, async (req, reply) => {
+    const b = req.body || {}
+    if (!b.calendar_id || !b.title || !b.start_at || !b.end_at) {
+      return reply.status(400).send({ error: 'calendar_id, title, start_at and end_at are required' })
+    }
+    const { rows: cal } = await pool.query('SELECT id, is_system FROM calendars WHERE id = $1 AND deleted_at IS NULL', [b.calendar_id])
+    if (!cal.length) return reply.status(400).send({ error: 'Unknown calendar' })
+    if (cal[0].is_system) return reply.status(400).send({ error: 'Cannot create events directly on a system calendar' })
+
+    const detail = await createEvent(pool, b, { email: req.user.email, name: req.user.name })
+    return reply.status(201).send(detail)
+  })
+
+  // PATCH /api/events/:id
+  app.patch('/api/events/:id', { preHandler: requireCap('edit') }, async (req, reply) => {
+    const id = parseInt(req.params.id)
+    const b = req.body || {}
+
+    // A system-calendar event (e.g. a bank holiday) isn't user-editable —
+    // enforced here too, not just in the UI, and matching what the CalDAV
+    // PUT handler already does. Check both the event's current calendar and
+    // (if the request tries to move it) the target calendar.
+    const { rows: current } = await pool.query(
+      `SELECT c.is_system FROM events e JOIN calendars c ON c.id = e.calendar_id WHERE e.id = $1 AND e.deleted_at IS NULL`,
+      [id]
+    )
+    if (!current.length) return reply.status(404).send({ error: 'Event not found' })
+    if (current[0].is_system) return reply.status(400).send({ error: 'Cannot edit an event on a system calendar' })
+
+    if (b.calendar_id) {
+      const { rows: cal } = await pool.query('SELECT id, is_system FROM calendars WHERE id = $1 AND deleted_at IS NULL', [b.calendar_id])
+      if (!cal.length) return reply.status(400).send({ error: 'Unknown calendar' })
+      if (cal[0].is_system) return reply.status(400).send({ error: 'Cannot move an event onto a system calendar' })
+    }
+    const detail = await updateEvent(pool, id, b, { email: req.user.email, name: req.user.name })
+    if (!detail) return reply.status(404).send({ error: 'Event not found' })
+    return detail
+  })
+
+  // DELETE /api/events/:id — soft delete
+  app.delete('/api/events/:id', { preHandler: requireCap('edit') }, async (req, reply) => {
+    const id = parseInt(req.params.id)
+    const { rows: current } = await pool.query(
+      `SELECT c.is_system FROM events e JOIN calendars c ON c.id = e.calendar_id WHERE e.id = $1 AND e.deleted_at IS NULL`,
+      [id]
+    )
+    if (!current.length) return reply.status(404).send({ error: 'Event not found' })
+    if (current[0].is_system) return reply.status(400).send({ error: 'Cannot delete an event on a system calendar' })
+
+    const ok = await deleteEvent(pool, id, { email: req.user.email, name: req.user.name })
+    if (!ok) return reply.status(404).send({ error: 'Event not found' })
+    return { ok: true }
+  })
+}

docker-compose.yml

@@ -0,0 +1,41 @@
+services:
+  backend:
+    build: ./backend
+    security_opt:
+      - apparmor=unconfined
+    environment:
+      - DATABASE_URL=${DATABASE_URL}
+      - CENTRAL_AUTH_SECRET=${CENTRAL_AUTH_SECRET}
+      - SETTINGS_URL=${SETTINGS_URL}
+      - SETTINGS_SECRET=${SETTINGS_SECRET}
+      - APP_SLUG=calendar
+      - OFFICE_IP_CHECK=${OFFICE_IP_CHECK:-disabled}
+    volumes:
+      - uploads_data:/app/uploads
+    healthcheck:
+      test: ["CMD-SHELL", "wget -qO- http://127.0.0.1:3001/health || exit 1"]
+      interval: 10s
+      retries: 5
+      start_period: 20s
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      args:
+        VITE_HOTEL_NAME: ${VITE_HOTEL_NAME}
+    security_opt:
+      - apparmor=unconfined
+    ports:
+      - "${FRONTEND_PORT:-3080}:80"
+    depends_on:
+      backend:
+        condition: service_healthy
+    restart: unless-stopped
+
+networks:
+  default:
+    driver: bridge
+
+volumes:
+  uploads_data:

frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+ARG VITE_HOTEL_NAME
+ENV VITE_HOTEL_NAME=$VITE_HOTEL_NAME
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html/calendar
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80

frontend/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="theme-color" content="#c9a84c" />
+    <title>Calendar</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/nginx.conf

@@ -0,0 +1,56 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    client_max_body_size 12m;
+
+    location /calendar/api/auth/ {
+        proxy_pass http://10.10.10.101:3001/api/auth/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    location /calendar/api/ {
+        proxy_pass http://backend:3001/api/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        add_header Cache-Control "no-store";
+    }
+
+    # CalDAV — WebDAV verbs (PROPFIND/REPORT/MKCALENDAR/PUT/DELETE/GET) proxied straight
+    # through to the backend, same upstream as /calendar/api/ but its own prefix so native
+    # calendar clients (Apple/Google/Outlook) get a clean, stable subscription URL.
+    location /calendar/caldav/ {
+        proxy_pass http://backend:3001/caldav/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Authorization $http_authorization;
+        proxy_pass_header Authorization;
+    }
+
+    location /.well-known/caldav {
+        return 301 /calendar/caldav/;
+    }
+
+    location /calendar/health {
+        proxy_pass http://backend:3001/health;
+    }
+
+    location ~* /calendar/.*\.(js|css|png|ico|svg|woff2?)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    location /calendar/ {
+        add_header Cache-Control "no-cache" always;
+        try_files $uri /calendar/index.html;
+    }
+
+    location = / {
+        return 301 /calendar/;
+    }
+}

frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "hnf-calendar-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-pwa": "^1.3.0"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,33 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import AuthGate from './components/AuthGate'
+import { UpdateBanner } from './components/UpdateBanner'
+import { useVersionCheck } from './hooks/useVersionCheck'
+import Layout from './components/Layout'
+import CalendarView from './pages/CalendarView'
+import Dashboard from './pages/Dashboard'
+import CalendarSettings from './pages/CalendarSettings'
+import ActivityLog from './pages/ActivityLog'
+import CalDavSetup from './pages/CalDavSetup'
+
+export default function App() {
+  const updateAvailable = useVersionCheck('/calendar/health')
+  return (
+    <>
+      <BrowserRouter basename="/calendar">
+        <AuthGate>
+          <Layout>
+            <Routes>
+              <Route path="/" element={<CalendarView />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/settings" element={<CalendarSettings />} />
+              <Route path="/activity" element={<ActivityLog />} />
+              <Route path="/caldav-setup" element={<CalDavSetup />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </Layout>
+        </AuthGate>
+      </BrowserRouter>
+      <UpdateBanner visible={updateAvailable} />
+    </>
+  )
+}

frontend/src/api.ts

@@ -0,0 +1,143 @@
+import type {
+  Calendar, EventSummary, EventDetail, EventAttachment,
+  ActivityLogEntry, Department, AuthUser, CaldavCredential, CaldavCredentialCreated,
+} from './types'
+
+const BASE = '/calendar/api'
+
+async function request<T>(path: string, opts: RequestInit = {}): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json', ...opts.headers },
+    ...opts,
+  })
+  if (res.status === 401) {
+    ;(window.top ?? window).location.href = '/login'
+    throw new Error('Unauthenticated')
+  }
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }))
+    throw new Error(err.error || `Request failed: ${res.status}`)
+  }
+  return res.json()
+}
+
+// Calendars
+export function fetchCalendars(): Promise<Calendar[]> {
+  return request('/calendars')
+}
+export function createCalendar(body: { name: string; color: string }): Promise<Calendar> {
+  return request('/calendars', { method: 'POST', body: JSON.stringify(body) })
+}
+export function updateCalendar(id: number, body: { name?: string; color?: string }): Promise<Calendar> {
+  return request(`/calendars/${id}`, { method: 'PATCH', body: JSON.stringify(body) })
+}
+export function deleteCalendar(id: number): Promise<{ ok: boolean }> {
+  return request(`/calendars/${id}`, { method: 'DELETE' })
+}
+
+// Events
+export interface EventFilters {
+  from?: string
+  to?: string
+  calendar_id?: number
+  department_id?: string
+  mine?: boolean
+}
+
+export function fetchEvents(filters: EventFilters = {}): Promise<EventSummary[]> {
+  const params = new URLSearchParams()
+  for (const [k, v] of Object.entries(filters)) {
+    if (v !== undefined && v !== null && v !== '' && v !== false) params.set(k, String(v))
+  }
+  const qs = params.toString()
+  return request(`/events${qs ? `?${qs}` : ''}`)
+}
+export function fetchEvent(id: number): Promise<EventDetail> {
+  return request(`/events/${id}`)
+}
+export interface EventBody {
+  calendar_id: number
+  title: string
+  description?: string | null
+  location?: string | null
+  start_at: string
+  end_at: string
+  all_day: boolean
+  departments?: { id: string; name: string }[]
+  assignees?: { email: string; name: string }[]
+}
+export function createEvent(body: EventBody): Promise<EventDetail> {
+  return request('/events', { method: 'POST', body: JSON.stringify(body) })
+}
+export function updateEvent(id: number, body: Partial<EventBody>): Promise<EventDetail> {
+  return request(`/events/${id}`, { method: 'PATCH', body: JSON.stringify(body) })
+}
+export function deleteEvent(id: number): Promise<{ ok: boolean }> {
+  return request(`/events/${id}`, { method: 'DELETE' })
+}
+
+// Attachments — multipart, so no JSON content-type header
+export async function uploadAttachment(eventId: number, file: File): Promise<EventAttachment> {
+  const form = new FormData()
+  form.append('file', file)
+  const res = await fetch(`${BASE}/events/${eventId}/attachments`, { method: 'POST', credentials: 'include', body: form })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }))
+    throw new Error(err.error || `Upload failed: ${res.status}`)
+  }
+  return res.json()
+}
+export function deleteAttachment(id: number): Promise<{ ok: boolean }> {
+  return request(`/attachments/${id}`, { method: 'DELETE' })
+}
+
+// Activity log
+export interface ActivityFilters {
+  calendar_id?: number
+  event_id?: number
+  actor_email?: string
+  from?: string
+  to?: string
+  limit?: number
+  offset?: number
+}
+export function fetchActivity(filters: ActivityFilters = {}): Promise<ActivityLogEntry[]> {
+  const params = new URLSearchParams()
+  for (const [k, v] of Object.entries(filters)) {
+    if (v !== undefined && v !== null && v !== '' && v !== false) params.set(k, String(v))
+  }
+  const qs = params.toString()
+  return request(`/activity${qs ? `?${qs}` : ''}`)
+}
+
+// Departments
+export function fetchDepartments(): Promise<Department[]> {
+  return request('/departments')
+}
+export function fetchMyDepartments(): Promise<Department[]> {
+  return request('/me/departments')
+}
+
+// Dashboard
+export function fetchMyUpcoming(days = 7): Promise<EventSummary[]> {
+  return request(`/me/upcoming?days=${days}`)
+}
+
+// CalDAV credentials
+export function fetchCaldavCredentials(): Promise<CaldavCredential[]> {
+  return request('/caldav-credentials')
+}
+export function createCaldavCredential(label?: string): Promise<CaldavCredentialCreated> {
+  return request('/caldav-credentials', { method: 'POST', body: JSON.stringify({ label }) })
+}
+export function deleteCaldavCredential(id: number): Promise<{ ok: boolean }> {
+  return request(`/caldav-credentials/${id}`, { method: 'DELETE' })
+}
+
+// Assignable staff users — served by the central auth service through the nginx auth proxy
+export async function fetchAssignableUsers(): Promise<AuthUser[]> {
+  const res = await fetch('/calendar/api/auth/users?app=calendar', { credentials: 'include' })
+  if (!res.ok) throw new Error(`Failed to load users: ${res.status}`)
+  return res.json()
+}

frontend/src/components/AttachmentList.tsx

@@ -0,0 +1,76 @@
+import { useRef, useState } from 'react'
+import { Paperclip, Trash2, Upload, Loader2 } from 'lucide-react'
+import type { EventAttachment } from '../types'
+import { uploadAttachment, deleteAttachment } from '../api'
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export default function AttachmentList({ eventId, attachments, canEdit, onChange }: {
+  eventId: number
+  attachments: EventAttachment[]
+  canEdit: boolean
+  onChange: (attachments: EventAttachment[]) => void
+}) {
+  const fileRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setUploading(true)
+    setError(null)
+    try {
+      const att = await uploadAttachment(eventId, file)
+      onChange([...attachments, att])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed')
+    } finally {
+      setUploading(false)
+      if (fileRef.current) fileRef.current.value = ''
+    }
+  }
+
+  async function handleDelete(id: number) {
+    if (!confirm('Remove this attachment?')) return
+    await deleteAttachment(id)
+    onChange(attachments.filter(a => a.id !== id))
+  }
+
+  return (
+    <div className="field">
+      <label>Attachments</label>
+      {attachments.length === 0 && <div className="field-hint">No attachments yet.</div>}
+      <div className="timeline">
+        {attachments.map(att => (
+          <div key={att.id} className="timeline-item">
+            <Paperclip size={14} strokeWidth={1.75} className="timeline-icon" />
+            <div className="timeline-body">
+              <a href={att.url} target="_blank" rel="noreferrer" className="timeline-photo-link">{att.filename}</a>
+              <div className="timeline-meta">{formatSize(att.size_bytes)}</div>
+            </div>
+            {canEdit && (
+              <button type="button" className="btn-ghost-sm btn-ghost-danger" onClick={() => handleDelete(att.id)}>
+                <Trash2 size={13} strokeWidth={1.75} />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+      {canEdit && (
+        <>
+          <input ref={fileRef} type="file" style={{ display: 'none' }} onChange={handleFile} />
+          <button type="button" className="btn btn-sm" onClick={() => fileRef.current?.click()} disabled={uploading}>
+            {uploading ? <Loader2 size={14} strokeWidth={1.75} className="spin" /> : <Upload size={14} strokeWidth={1.75} />}
+            {uploading ? 'Uploading…' : 'Add attachment'}
+          </button>
+          {error && <div className="field-hint" style={{ color: 'var(--danger)' }}>{error}</div>}
+        </>
+      )}
+    </div>
+  )
+}

frontend/src/components/AuthGate.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState, createContext, useContext } from 'react'
+import type { User } from '../types'
+
+interface AuthCtx { user: User }
+const Ctx = createContext<AuthCtx | null>(null)
+
+export function useAuth() {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error('useAuth must be used inside AuthGate')
+  return ctx
+}
+
+export default function AuthGate({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+
+  useEffect(() => {
+    fetch('/api/auth/verify?app=calendar', { credentials: 'include' })
+      .then(r => {
+        if (!r.ok) {
+          ;(window.top ?? window).location.href = '/login'
+          return null
+        }
+        return r.json()
+      })
+      .then(data => { if (data) setUser(data) })
+      .catch(() => { ;(window.top ?? window).location.href = '/login' })
+  }, [])
+
+  if (!user) {
+    return (
+      <div style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        height: '100vh', fontFamily: 'var(--font)', color: 'var(--text-mid)'
+      }}>
+        Loading…
+      </div>
+    )
+  }
+
+  return (
+    <Ctx.Provider value={{ user }}>
+      {children}
+    </Ctx.Provider>
+  )
+}

frontend/src/components/CalendarToggleList.tsx

@@ -0,0 +1,28 @@
+import type { Calendar } from '../types'
+
+// Sidebar/panel widget: checkbox + colour dot + name per calendar. Controls a
+// Set<number> of visible calendar ids lifted from the parent (CalendarView).
+export default function CalendarToggleList({ calendars, visibleIds, onToggle }: {
+  calendars: Calendar[]
+  visibleIds: Set<number>
+  onToggle: (id: number) => void
+}) {
+  if (calendars.length === 0) {
+    return <div className="field-hint">No calendars yet.</div>
+  }
+  return (
+    <div className="cal-sidebar-calendars">
+      {calendars.map(cal => (
+        <label key={cal.id} className="cal-toggle-row">
+          <input
+            type="checkbox"
+            checked={visibleIds.has(cal.id)}
+            onChange={() => onToggle(cal.id)}
+          />
+          <span className="cal-dot" style={{ background: cal.color }} />
+          <span className="cal-toggle-name">{cal.name}</span>
+        </label>
+      ))}
+    </div>
+  )
+}

frontend/src/components/EventForm.tsx

@@ -0,0 +1,344 @@
+import { useEffect, useState } from 'react'
+import { X, Trash2, ChevronDown, ChevronRight, Lock } from 'lucide-react'
+import type { Calendar, Department, EventAttachment, AuthUser, ActivityLogEntry } from '../types'
+import { can } from '../types'
+import { useAuth } from './AuthGate'
+import {
+  fetchCalendars, fetchDepartments, fetchAssignableUsers, fetchEvent, fetchActivity,
+  createEvent, updateEvent, deleteEvent,
+} from '../api'
+import type { EventBody } from '../api'
+import AttachmentList from './AttachmentList'
+import { toISODate, toTimeInput } from '../dateUtils'
+
+interface Assignee { email: string; name: string }
+
+interface EventFormProps {
+  eventId?: number
+  initialDate?: Date
+  onClose: () => void
+  onSaved: () => void
+}
+
+export default function EventForm({ eventId, initialDate, onClose, onSaved }: EventFormProps) {
+  const { user } = useAuth()
+  const editing = eventId != null
+  const permitted = editing ? can(user, 'edit') : can(user, 'create')
+
+  const [loading, setLoading] = useState(editing)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const [calendars, setCalendars] = useState<Calendar[]>([])
+  const [departments, setDepartments] = useState<Department[]>([])
+  const [users, setUsers] = useState<AuthUser[]>([])
+
+  const baseStart = initialDate ?? new Date()
+  const baseEnd = new Date(baseStart.getTime() + 60 * 60 * 1000)
+
+  const [calendarId, setCalendarId] = useState<number | null>(null)
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [location, setLocation] = useState('')
+  const [allDay, setAllDay] = useState(false)
+  const [startDate, setStartDate] = useState(toISODate(baseStart))
+  const [startTime, setStartTime] = useState(toTimeInput(baseStart))
+  const [endDate, setEndDate] = useState(toISODate(baseEnd))
+  const [endTime, setEndTime] = useState(toTimeInput(baseEnd))
+  const [selectedDepts, setSelectedDepts] = useState<Department[]>([])
+  const [selectedAssignees, setSelectedAssignees] = useState<Assignee[]>([])
+  const [attachments, setAttachments] = useState<EventAttachment[]>([])
+  const [isSystem, setIsSystem] = useState(false)
+
+  const [historyOpen, setHistoryOpen] = useState(false)
+  const [history, setHistory] = useState<ActivityLogEntry[] | null>(null)
+
+  useEffect(() => {
+    fetchCalendars().then(setCalendars).catch(() => {})
+    fetchDepartments().then(setDepartments).catch(() => {})
+    fetchAssignableUsers().then(setUsers).catch(() => {})
+  }, [])
+
+  // Default the calendar select to the first user-editable calendar once loaded (create mode only).
+  useEffect(() => {
+    if (!editing && calendarId === null && calendars.length > 0) {
+      const first = calendars.find(c => !c.is_system)
+      if (first) setCalendarId(first.id)
+    }
+  }, [calendars, editing, calendarId])
+
+  useEffect(() => {
+    if (!editing || !eventId) return
+    setLoading(true)
+    fetchEvent(eventId)
+      .then(ev => {
+        setCalendarId(ev.calendar_id)
+        setTitle(ev.title)
+        setDescription(ev.description ?? '')
+        setLocation(ev.location ?? '')
+        setAllDay(ev.all_day)
+        const s = new Date(ev.start_at)
+        const e = new Date(ev.end_at)
+        setStartDate(toISODate(s))
+        setStartTime(toTimeInput(s))
+        setEndDate(toISODate(e))
+        setEndTime(toTimeInput(e))
+        setSelectedDepts(ev.departments)
+        setSelectedAssignees(ev.assignees)
+        setAttachments(ev.attachments)
+        setIsSystem(ev.calendar.is_system)
+      })
+      .catch(err => setError(err instanceof Error ? err.message : 'Failed to load event'))
+      .finally(() => setLoading(false))
+  }, [eventId, editing])
+
+  function toggleDept(dept: Department) {
+    setSelectedDepts(prev =>
+      prev.some(d => d.id === dept.id) ? prev.filter(d => d.id !== dept.id) : [...prev, dept]
+    )
+  }
+
+  function toggleAssignee(u: AuthUser) {
+    setSelectedAssignees(prev =>
+      prev.some(a => a.email === u.email) ? prev.filter(a => a.email !== u.email) : [...prev, { email: u.email, name: u.name }]
+    )
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!calendarId) { setError('Choose a calendar'); return }
+    if (!title.trim()) { setError('Title is required'); return }
+
+    const start = allDay ? new Date(`${startDate}T00:00:00`) : new Date(`${startDate}T${startTime}:00`)
+    const end = allDay ? new Date(`${endDate}T23:59:00`) : new Date(`${endDate}T${endTime}:00`)
+    if (end.getTime() < start.getTime()) { setError('End must be after start'); return }
+
+    const body: EventBody = {
+      calendar_id: calendarId,
+      title: title.trim(),
+      description: description.trim() || null,
+      location: location.trim() || null,
+      start_at: start.toISOString(),
+      end_at: end.toISOString(),
+      all_day: allDay,
+      departments: selectedDepts,
+      assignees: selectedAssignees,
+    }
+
+    setSaving(true)
+    setError(null)
+    try {
+      if (editing && eventId) await updateEvent(eventId, body)
+      else await createEvent(body)
+      onSaved()
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!eventId) return
+    if (!confirm('Delete this event? This cannot be undone.')) return
+    setSaving(true)
+    setError(null)
+    try {
+      await deleteEvent(eventId)
+      onSaved()
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Delete failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function toggleHistory() {
+    const next = !historyOpen
+    setHistoryOpen(next)
+    if (next && history === null && eventId) {
+      fetchActivity({ event_id: eventId }).then(setHistory).catch(() => setHistory([]))
+    }
+  }
+
+  const editableCalendars = calendars.filter(c => !c.is_system)
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>{editing ? 'Edit event' : 'New event'}</h2>
+          <button className="modal-close" onClick={onClose}><X size={18} strokeWidth={1.75} /></button>
+        </div>
+
+        {error && <div className="error-banner">{error}</div>}
+
+        {loading ? (
+          <div className="empty-state">Loading…</div>
+        ) : isSystem ? (
+          <div>
+            <div className="field-hint" style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
+              <Lock size={13} strokeWidth={1.75} />
+              This event belongs to a read-only system calendar and cannot be edited.
+            </div>
+            <div className="field"><label>Title</label><div>{title}</div></div>
+            {location && <div className="field"><label>Location</label><div>{location}</div></div>}
+            {description && <div className="field"><label>Description</label><div style={{ whiteSpace: 'pre-wrap' }}>{description}</div></div>}
+            <div className="modal-actions">
+              <button className="btn" onClick={onClose}>Close</button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="field">
+              <label>Title</label>
+              <input type="text" value={title} onChange={e => setTitle(e.target.value)} disabled={!permitted} required />
+            </div>
+
+            <div className="field">
+              <label>Calendar</label>
+              <select value={calendarId ?? ''} onChange={e => setCalendarId(Number(e.target.value))} disabled={!permitted}>
+                <option value="" disabled>Choose a calendar…</option>
+                {editableCalendars.map(c => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="field">
+              <label>Description</label>
+              <textarea value={description} onChange={e => setDescription(e.target.value)} disabled={!permitted} />
+            </div>
+
+            <div className="field">
+              <label>Location</label>
+              <input type="text" value={location} onChange={e => setLocation(e.target.value)} disabled={!permitted} />
+            </div>
+
+            <label className="field-check" style={{ marginBottom: 12 }}>
+              <input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} disabled={!permitted} />
+              All day
+            </label>
+
+            <div className="field-row">
+              <div className="field">
+                <label>Start date</label>
+                <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} disabled={!permitted} required />
+              </div>
+              {!allDay && (
+                <div className="field">
+                  <label>Start time</label>
+                  <input type="time" value={startTime} onChange={e => setStartTime(e.target.value)} disabled={!permitted} required />
+                </div>
+              )}
+            </div>
+            <div className="field-row">
+              <div className="field">
+                <label>End date</label>
+                <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} disabled={!permitted} required />
+              </div>
+              {!allDay && (
+                <div className="field">
+                  <label>End time</label>
+                  <input type="time" value={endTime} onChange={e => setEndTime(e.target.value)} disabled={!permitted} required />
+                </div>
+              )}
+            </div>
+
+            <div className="field">
+              <label>Departments</label>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                {departments.map(dept => (
+                  <label key={dept.id} className="field-check">
+                    <input
+                      type="checkbox"
+                      checked={selectedDepts.some(d => d.id === dept.id)}
+                      onChange={() => toggleDept(dept)}
+                      disabled={!permitted}
+                    />
+                    {dept.name}
+                  </label>
+                ))}
+                {departments.length === 0 && <span className="field-hint">No departments configured.</span>}
+              </div>
+            </div>
+
+            <div className="field">
+              <label>Assignees</label>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                {users.map(u => (
+                  <label key={u.email} className="field-check">
+                    <input
+                      type="checkbox"
+                      checked={selectedAssignees.some(a => a.email === u.email)}
+                      onChange={() => toggleAssignee(u)}
+                      disabled={!permitted}
+                    />
+                    {u.name}
+                  </label>
+                ))}
+                {users.length === 0 && <span className="field-hint">No staff available.</span>}
+              </div>
+            </div>
+
+            {editing && eventId && (
+              <AttachmentList
+                eventId={eventId}
+                attachments={attachments}
+                canEdit={permitted}
+                onChange={setAttachments}
+              />
+            )}
+            {!editing && (
+              <div className="field-hint" style={{ marginBottom: 12 }}>Save the event first to add attachments.</div>
+            )}
+
+            {editing && (
+              <div>
+                <div
+                  className="filter-section-header"
+                  onClick={toggleHistory}
+                  style={{ marginBottom: historyOpen ? 8 : 0 }}
+                >
+                  {historyOpen ? <ChevronDown size={14} strokeWidth={1.75} /> : <ChevronRight size={14} strokeWidth={1.75} />}
+                  <span className="filter-section-label">History</span>
+                </div>
+                {historyOpen && (
+                  <div className="timeline">
+                    {history === null && <div className="field-hint">Loading…</div>}
+                    {history && history.length === 0 && <div className="field-hint">No activity recorded.</div>}
+                    {history && history.map(h => (
+                      <div key={h.id} className="timeline-item">
+                        <div className="timeline-body">
+                          <div className="timeline-note">{h.summary}</div>
+                          <div className="timeline-meta">{h.actor_name} · {new Date(h.created_at).toLocaleString()}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="modal-footer-actions">
+              {editing && permitted && (
+                <button type="button" className="btn btn-danger" onClick={handleDelete} disabled={saving} style={{ marginRight: 'auto' }}>
+                  <Trash2 size={14} strokeWidth={1.75} />
+                  Delete
+                </button>
+              )}
+              <button type="button" className="btn" onClick={onClose}>Cancel</button>
+              {permitted && (
+                <button type="submit" className="btn btn-primary" disabled={saving}>
+                  {saving ? 'Saving…' : 'Save'}
+                </button>
+              )}
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/Layout.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
+import { CalendarDays, LayoutDashboard, Settings, History, Smartphone, Menu, LogOut } from 'lucide-react'
+import { useAuth } from './AuthGate'
+import { can } from '../types'
+
+const ICON_PROPS = { size: 16, strokeWidth: 1.75 }
+
+const NAV = [
+  { to: '/',              label: 'Calendar',    icon: CalendarDays,     cap: 'view' },
+  { to: '/dashboard',     label: 'Dashboard',   icon: LayoutDashboard,  cap: 'view' },
+  { to: '/settings',      label: 'Settings',    icon: Settings,         cap: 'manage_calendars' },
+  { to: '/activity',      label: 'Activity Log', icon: History,          cap: 'admin' },
+  { to: '/caldav-setup',  label: 'Phone Sync',  icon: Smartphone,       cap: 'view' },
+]
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const { user } = useAuth()
+  const items = NAV.filter(n => can(user, n.cap))
+  const location = useLocation()
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  async function logout() {
+    await fetch('/calendar/api/auth/logout', { method: 'POST', credentials: 'include' })
+    window.location.reload()
+  }
+
+  useEffect(() => { setMenuOpen(false) }, [location.pathname])
+
+  return (
+    <div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
+      <aside className="sidebar">
+        <div className="sidebar-logo">
+          <CalendarDays size={18} strokeWidth={1.75} />
+          Calendar
+        </div>
+        <nav className="sidebar-nav">
+          {items.map(({ to, label, icon: Icon }) => (
+            <NavLink key={to} to={to} end={to === '/'} className={({ isActive }) => isActive ? 'active' : ''}>
+              <Icon {...ICON_PROPS} />
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="sidebar-user" style={{ whiteSpace: 'normal' }}>
+          <div style={{ fontWeight: 600, color: 'var(--text)', fontSize: '12px', marginBottom: '2px' }}>{user.name}</div>
+          <div style={{ fontSize: '11px', marginBottom: '8px' }}>{user.email}</div>
+          <button onClick={logout} style={{
+            display: 'flex', alignItems: 'center', gap: '6px',
+            background: 'none', border: 'none', color: 'inherit',
+            fontSize: '12px', padding: 0, cursor: 'pointer',
+          }}>
+            <LogOut size={13} strokeWidth={1.75} />
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      {menuOpen && <div className="menu-backdrop" onClick={() => setMenuOpen(false)} />}
+
+      <header className="top-bar">
+        <button className="top-bar-burger" onClick={() => setMenuOpen(o => !o)}>
+          <Menu size={20} strokeWidth={1.75} />
+        </button>
+        <CalendarDays size={18} strokeWidth={1.75} color="var(--gold)" />
+        <span className="top-bar-title">Calendar</span>
+      </header>
+
+      <main className="page-content">
+        {children}
+      </main>
+    </div>
+  )
+}

frontend/src/components/UpdateBanner.tsx

@@ -0,0 +1,44 @@
+import { RefreshCw } from 'lucide-react'
+
+export function UpdateBanner({ visible }: { visible: boolean }) {
+  if (!visible) return null
+  return (
+    <div style={{
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 9999,
+      background: 'var(--sidebar)',
+      color: 'var(--text-light)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '12px',
+      padding: '10px 16px',
+      fontSize: '14px',
+      boxShadow: '0 -2px 8px rgba(0,0,0,0.3)',
+    }}>
+      <span>A new version is available.</span>
+      <button
+        onClick={() => window.location.reload()}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          background: 'var(--accent)',
+          color: 'var(--sidebar)',
+          border: 'none',
+          borderRadius: '4px',
+          padding: '6px 14px',
+          fontWeight: 600,
+          cursor: 'pointer',
+          fontSize: '13px',
+        }}
+      >
+        <RefreshCw size={14} strokeWidth={1.75} />
+        Reload
+      </button>
+    </div>
+  )
+}

frontend/src/components/ViewSwitcher.tsx

@@ -0,0 +1,28 @@
+export type CalendarViewKey = 'month' | 'week' | 'day' | 'list'
+
+const VIEWS: { key: CalendarViewKey; label: string }[] = [
+  { key: 'month', label: 'Month' },
+  { key: 'week', label: 'Week' },
+  { key: 'day', label: 'Day' },
+  { key: 'list', label: 'List' },
+]
+
+export default function ViewSwitcher({ view, onChange }: {
+  view: CalendarViewKey
+  onChange: (v: CalendarViewKey) => void
+}) {
+  return (
+    <div className="cal-view-switcher chip-bar">
+      {VIEWS.map(v => (
+        <button
+          key={v.key}
+          type="button"
+          className={`chip ${view === v.key ? 'active' : ''}`}
+          onClick={() => onChange(v.key)}
+        >
+          {v.label}
+        </button>
+      ))}
+    </div>
+  )
+}

frontend/src/components/views/AgendaList.tsx

@@ -0,0 +1,75 @@
+import { useMemo, useState } from 'react'
+import { Search } from 'lucide-react'
+import type { EventSummary } from '../../types'
+import { toISODate, formatDayHeader, formatTime } from '../../dateUtils'
+
+// Doubles as a simple client-side search box (filters by title/location —
+// EventSummary carries no description field, only EventDetail does).
+export default function AgendaList({ events, onSelectEvent }: {
+  events: EventSummary[]
+  date: Date
+  onSelectDate?: (d: Date) => void
+  onSelectEvent: (id: number) => void
+}) {
+  const [q, setQ] = useState('')
+
+  const filtered = useMemo(() => {
+    const needle = q.trim().toLowerCase()
+    const list = needle
+      ? events.filter(ev => ev.title.toLowerCase().includes(needle) || (ev.location ?? '').toLowerCase().includes(needle))
+      : events
+    return [...list].sort((a, b) => a.start_at.localeCompare(b.start_at))
+  }, [events, q])
+
+  const groups = useMemo(() => {
+    const map = new Map<string, EventSummary[]>()
+    for (const ev of filtered) {
+      const key = toISODate(new Date(ev.start_at))
+      if (!map.has(key)) map.set(key, [])
+      map.get(key)!.push(ev)
+    }
+    return [...map.entries()]
+  }, [filtered])
+
+  return (
+    <div>
+      <div className="field" style={{ maxWidth: 320 }}>
+        <label>Search</label>
+        <div style={{ position: 'relative' }}>
+          <Search size={14} strokeWidth={1.75} style={{ position: 'absolute', left: 10, top: 10, color: 'var(--text-mid)' }} />
+          <input
+            type="text"
+            value={q}
+            onChange={e => setQ(e.target.value)}
+            placeholder="Filter by title or location…"
+            style={{ paddingLeft: 30 }}
+          />
+        </div>
+      </div>
+
+      {groups.length === 0 && <div className="empty-state">No events found.</div>}
+
+      {groups.map(([dayKey, dayEvents]) => (
+        <div key={dayKey}>
+          <div className="section-title">{formatDayHeader(new Date(dayKey))}</div>
+          {dayEvents.map(ev => (
+            <div key={ev.id} className="cal-agenda-item" onClick={() => onSelectEvent(ev.id)}>
+              <div className="cal-agenda-date">{ev.all_day ? 'All day' : formatTime(ev.start_at)}</div>
+              <div className="cal-agenda-main">
+                <div className="cal-agenda-title">
+                  <span className="cal-dot" style={{ background: ev.calendar_color }} />
+                  {ev.title}
+                </div>
+                <div className="cal-agenda-meta">
+                  {ev.location && <span>{ev.location}</span>}
+                  {ev.department_names.length > 0 && <span>{ev.department_names.join(', ')}</span>}
+                  {ev.assignee_names.length > 0 && <span>{ev.assignee_names.join(', ')}</span>}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/components/views/DayGrid.tsx

@@ -0,0 +1,66 @@
+import type { EventSummary } from '../../types'
+import { eventOccursOnDay, formatTime, formatDateLabel, HOURS, HOUR_PX, timedLayout } from '../../dateUtils'
+
+export default function DayGrid({ events, date, onSelectDate, onSelectEvent }: {
+  events: EventSummary[]
+  date: Date
+  onSelectDate?: (d: Date) => void
+  onSelectEvent: (id: number) => void
+}) {
+  const allDayEvents = events.filter(ev => ev.all_day && eventOccursOnDay(ev, date))
+  const timedEvents = events.filter(ev => !ev.all_day && eventOccursOnDay(ev, date))
+
+  return (
+    <div className="cal-week-grid cal-day-view">
+      <div className="cal-week-head-cell" />
+      <div
+        className="cal-week-head-cell today"
+        onClick={() => onSelectDate?.(date)}
+        style={{ cursor: 'pointer' }}
+      >
+        {formatDateLabel(date)}
+      </div>
+
+      <div />
+      <div style={{ borderLeft: '1px solid var(--card-border)', padding: '3px' }}>
+        {allDayEvents.map(ev => (
+          <span
+            key={ev.id}
+            className="cal-event-chip"
+            style={{ background: ev.calendar_color, color: '#fff', marginBottom: 2 }}
+            onClick={() => onSelectEvent(ev.id)}
+          >
+            {ev.title}
+          </span>
+        ))}
+      </div>
+
+      <div className="cal-time-gutter">
+        {HOURS.map(h => (
+          <div key={h} className="cal-time-row">{h === 0 ? '' : `${h}:00`}</div>
+        ))}
+      </div>
+      <div
+        className="cal-day-col"
+        style={{ height: HOURS.length * HOUR_PX }}
+        onClick={() => onSelectDate?.(date)}
+      >
+        {HOURS.map(h => <div key={h} className="cal-day-col-slot" />)}
+        {timedEvents.map(ev => {
+          const { top, height } = timedLayout(ev, date)
+          return (
+            <div
+              key={ev.id}
+              className="cal-week-event"
+              style={{ top, height, background: ev.calendar_color, color: '#fff' }}
+              onClick={e => { e.stopPropagation(); onSelectEvent(ev.id) }}
+              title={ev.title}
+            >
+              {formatTime(ev.start_at)} {ev.title}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

frontend/src/components/views/MonthGrid.tsx

@@ -0,0 +1,51 @@
+import type { EventSummary } from '../../types'
+import { monthGridDays, isSameDay, eventOccursOnDay, formatTime, WEEKDAY_LABELS } from '../../dateUtils'
+
+const MAX_VISIBLE = 3
+
+export default function MonthGrid({ events, date, onSelectDate, onSelectEvent }: {
+  events: EventSummary[]
+  date: Date
+  onSelectDate?: (d: Date) => void
+  onSelectEvent: (id: number) => void
+}) {
+  const days = monthGridDays(date)
+  const today = new Date()
+
+  return (
+    <div className="cal-grid">
+      {WEEKDAY_LABELS.map(d => (
+        <div key={d} className="cal-day-header">{d}</div>
+      ))}
+      {days.map(day => {
+        const dayEvents = events
+          .filter(ev => eventOccursOnDay(ev, day))
+          .sort((a, b) => a.start_at.localeCompare(b.start_at))
+        const cls = [
+          'cal-day',
+          day.getMonth() !== date.getMonth() ? 'other-month' : '',
+          isSameDay(day, today) ? 'today' : '',
+        ].filter(Boolean).join(' ')
+        return (
+          <div key={day.toISOString()} className={cls} onClick={() => onSelectDate?.(day)}>
+            <div className="cal-day-num">{day.getDate()}</div>
+            {dayEvents.slice(0, MAX_VISIBLE).map(ev => (
+              <span
+                key={ev.id}
+                className="cal-event-chip"
+                style={{ background: ev.calendar_color, color: '#fff' }}
+                title={ev.title}
+                onClick={e => { e.stopPropagation(); onSelectEvent(ev.id) }}
+              >
+                {!ev.all_day && `${formatTime(ev.start_at)} `}{ev.title}
+              </span>
+            ))}
+            {dayEvents.length > MAX_VISIBLE && (
+              <span className="cal-event-more">+{dayEvents.length - MAX_VISIBLE} more</span>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

frontend/src/components/views/WeekGrid.tsx

@@ -0,0 +1,81 @@
+import type { EventSummary } from '../../types'
+import {
+  startOfWeek, addDays, isSameDay, eventOccursOnDay,
+  formatDayHeader, formatTime, HOURS, HOUR_PX, timedLayout,
+} from '../../dateUtils'
+
+export default function WeekGrid({ events, date, onSelectDate, onSelectEvent }: {
+  events: EventSummary[]
+  date: Date
+  onSelectDate?: (d: Date) => void
+  onSelectEvent: (id: number) => void
+}) {
+  const weekStart = startOfWeek(date)
+  const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
+  const today = new Date()
+
+  const allDayByDay = days.map(day => events.filter(ev => ev.all_day && eventOccursOnDay(ev, day)))
+  const timedByDay = days.map(day => events.filter(ev => !ev.all_day && eventOccursOnDay(ev, day)))
+
+  return (
+    <div className="cal-week-grid">
+      <div className="cal-week-head-cell" />
+      {days.map(day => (
+        <div
+          key={day.toISOString()}
+          className={`cal-week-head-cell${isSameDay(day, today) ? ' today' : ''}`}
+          onClick={() => onSelectDate?.(day)}
+          style={{ cursor: 'pointer' }}
+        >
+          {formatDayHeader(day)}
+        </div>
+      ))}
+
+      <div />
+      {days.map((day, i) => (
+        <div key={`allday-${day.toISOString()}`} style={{ borderLeft: '1px solid var(--card-border)', padding: '3px' }}>
+          {allDayByDay[i].map(ev => (
+            <span
+              key={ev.id}
+              className="cal-event-chip"
+              style={{ background: ev.calendar_color, color: '#fff', marginBottom: 2 }}
+              onClick={() => onSelectEvent(ev.id)}
+            >
+              {ev.title}
+            </span>
+          ))}
+        </div>
+      ))}
+
+      <div className="cal-time-gutter">
+        {HOURS.map(h => (
+          <div key={h} className="cal-time-row">{h === 0 ? '' : `${h}:00`}</div>
+        ))}
+      </div>
+      {days.map((day, i) => (
+        <div
+          key={`col-${day.toISOString()}`}
+          className="cal-day-col"
+          style={{ height: HOURS.length * HOUR_PX }}
+          onClick={() => onSelectDate?.(day)}
+        >
+          {HOURS.map(h => <div key={h} className="cal-day-col-slot" />)}
+          {timedByDay[i].map(ev => {
+            const { top, height } = timedLayout(ev, day)
+            return (
+              <div
+                key={ev.id}
+                className="cal-week-event"
+                style={{ top, height, background: ev.calendar_color, color: '#fff' }}
+                onClick={e => { e.stopPropagation(); onSelectEvent(ev.id) }}
+                title={ev.title}
+              >
+                {formatTime(ev.start_at)} {ev.title}
+              </div>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/dateUtils.ts

@@ -0,0 +1,114 @@
+// Plain-JS date arithmetic shared by the calendar grid views — no external
+// calendar library. Weeks start Monday to match UK hotel-ops convention.
+
+export const WEEKDAY_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+export const HOURS = Array.from({ length: 24 }, (_, i) => i)
+export const HOUR_PX = 48
+
+export function startOfDay(d: Date): Date {
+  const r = new Date(d)
+  r.setHours(0, 0, 0, 0)
+  return r
+}
+
+export function endOfDay(d: Date): Date {
+  const r = new Date(d)
+  r.setHours(23, 59, 59, 999)
+  return r
+}
+
+export function addDays(d: Date, n: number): Date {
+  const r = new Date(d)
+  r.setDate(r.getDate() + n)
+  return r
+}
+
+export function addMonths(d: Date, n: number): Date {
+  const r = new Date(d)
+  r.setMonth(r.getMonth() + n)
+  return r
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+export function startOfWeek(d: Date): Date {
+  const r = startOfDay(d)
+  const day = r.getDay() // 0=Sun..6=Sat
+  const diff = day === 0 ? -6 : 1 - day
+  r.setDate(r.getDate() + diff)
+  return r
+}
+
+export function toISODate(d: Date): string {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+export function toTimeInput(d: Date): string {
+  const h = String(d.getHours()).padStart(2, '0')
+  const m = String(d.getMinutes()).padStart(2, '0')
+  return `${h}:${m}`
+}
+
+export function monthGridDays(date: Date): Date[] {
+  const firstOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
+  const gridStart = startOfWeek(firstOfMonth)
+  return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i))
+}
+
+interface Span { start_at: string; end_at: string }
+
+export function eventSpan(ev: Span): { start: Date; end: Date } {
+  return { start: new Date(ev.start_at), end: new Date(ev.end_at) }
+}
+
+export function eventOccursOnDay(ev: Span, day: Date): boolean {
+  const { start, end } = eventSpan(ev)
+  const dayStart = startOfDay(day).getTime()
+  const dayEnd = endOfDay(day).getTime()
+  return start.getTime() <= dayEnd && end.getTime() >= dayStart
+}
+
+export function minutesSinceMidnight(d: Date): number {
+  return d.getHours() * 60 + d.getMinutes()
+}
+
+// Vertical position/height (in px) for a timed event rendered within a single
+// day column, clamped to that day's bounds (handles events that span midnight).
+export function timedLayout(ev: Span, day: Date): { top: number; height: number } {
+  const dayStart = startOfDay(day)
+  const dayEnd = endOfDay(day)
+  const { start, end } = eventSpan(ev)
+  const clampedStart = start < dayStart ? dayStart : start
+  const clampedEnd = end > dayEnd ? dayEnd : end
+  const top = (minutesSinceMidnight(clampedStart) / 60) * HOUR_PX
+  const durationMin = Math.max(20, (clampedEnd.getTime() - clampedStart.getTime()) / 60000)
+  const height = (durationMin / 60) * HOUR_PX
+  return { top, height }
+}
+
+export function formatTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+export function formatDayHeader(d: Date): string {
+  return d.toLocaleDateString([], { weekday: 'short', day: 'numeric', month: 'short' })
+}
+
+export function formatMonthLabel(d: Date): string {
+  return d.toLocaleDateString([], { month: 'long', year: 'numeric' })
+}
+
+export function formatWeekLabel(d: Date): string {
+  const start = startOfWeek(d)
+  const end = addDays(start, 6)
+  return `${start.toLocaleDateString([], { day: 'numeric', month: 'short' })} – ${end.toLocaleDateString([], { day: 'numeric', month: 'short', year: 'numeric' })}`
+}
+
+export function formatDateLabel(d: Date): string {
+  return d.toLocaleDateString([], { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
+}

frontend/src/hooks/useVersionCheck.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+const POLL_MS = 2 * 60 * 1000
+
+export function useVersionCheck(healthUrl: string) {
+  const [updateAvailable, setUpdateAvailable] = useState(false)
+
+  useEffect(() => {
+    let seenVersion: string | null = null
+
+    async function check() {
+      try {
+        const res = await fetch(healthUrl, { cache: 'no-store' })
+        if (!res.ok) return
+        const data = await res.json()
+        const v: string | undefined = data.version
+        if (!v) return
+        if (seenVersion === null) {
+          seenVersion = v
+        } else if (v !== seenVersion) {
+          setUpdateAvailable(true)
+        }
+      } catch {
+        // network error — skip silently
+      }
+    }
+
+    check()
+    const interval = setInterval(check, POLL_MS)
+
+    function onVisible() {
+      if (document.visibilityState === 'visible') check()
+    }
+    document.addEventListener('visibilitychange', onVisible)
+
+    return () => {
+      clearInterval(interval)
+      document.removeEventListener('visibilitychange', onVisible)
+    }
+  }, [healthUrl])
+
+  return updateAvailable
+}

frontend/src/index.css

@@ -0,0 +1,601 @@
+/* Stack design system tokens — include verbatim in every app */
+:root {
+  --navy:        #1a1a2e;
+  --navy-dark:   #0f0f20;
+  --gold:        #c9a84c;
+  --gold-light:  #e8c96d;
+  --surface:     rgba(255,255,255,0.07);
+  --surface-2:   rgba(255,255,255,0.08);
+  --text:        rgba(255,255,255,0.88);
+  --text-muted:  rgba(255,255,255,0.48);
+  --body-bg:     #f4f5f7;
+  --card-bg:     #ffffff;
+  --card-border: #e4e8ee;
+  --text-dark:   #1e293b;
+  --text-mid:    #64748b;
+  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
+  --danger:      #dc2626;
+  --radius:      10px;
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+body { background: var(--body-bg); color: var(--text-dark); font-family: var(--font); }
+
+/* Layout tokens — calendar has no app-specific accent, it uses --gold/--gold-light directly */
+:root {
+  --danger-bg:  #fef2f2;
+  --warn-bg:    #fffbeb;
+  --ok-bg:      #f0fdf4;
+
+  --sidebar-w: 240px;
+  --topbar-h:  56px;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; font-size: 14px; }
+
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }
+
+/* ── App shell ─────────────────────────────────────────────── */
+.app-shell { display: flex; height: 100vh; overflow: hidden; }
+
+.sidebar {
+  width: var(--sidebar-w);
+  background: var(--navy);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+.sidebar-logo {
+  padding: 20px 16px 12px;
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sidebar-logo svg { opacity: .8; }
+.sidebar-nav { flex: 1; padding: 8px 0; }
+.sidebar-nav a {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 13.5px;
+  transition: background .15s, color .15s;
+}
+.sidebar-nav a:hover { background: var(--surface); color: var(--text); }
+.sidebar-nav a.active { background: rgba(201,168,76,.1); color: var(--gold); }
+.sidebar-user {
+  padding: 12px 16px;
+  border-top: 1px solid var(--surface-2);
+  color: var(--text-muted);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top-bar {
+  display: none;
+  height: var(--topbar-h);
+  background: var(--navy);
+  color: var(--text);
+  align-items: center;
+  padding: 0 12px;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.top-bar-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--gold); }
+.top-bar-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
+.top-bar-nav::-webkit-scrollbar { display: none; }
+.top-bar-nav a {
+  color: var(--text-muted);
+  padding: 6px 8px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.top-bar-nav a.active { color: var(--gold); }
+
+.page-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0; left: 0; bottom: 0;
+    z-index: 200;
+    transform: translateX(calc(-1 * var(--sidebar-w)));
+    transition: transform 0.25s ease;
+  }
+  .app-shell.menu-open .sidebar { transform: translateX(0); }
+  .top-bar { display: flex; }
+  .app-shell { flex-direction: column; }
+  .field-row { flex-direction: column; }
+}
+
+.menu-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 199;
+}
+
+.top-bar-burger {
+  background: none;
+  border: none;
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  flex-shrink: 0;
+}
+
+/* ── Page chrome ───────────────────────────────────────────── */
+.page { padding: 20px; max-width: 1100px; width: 100%; margin: 0 auto; }
+.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+.page-header h1 { font-size: 18px; margin: 0; flex: 1; }
+
+/* ── Buttons ───────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--card-border);
+  background: var(--card-bg);
+  color: var(--text-dark);
+  border-radius: var(--radius);
+  padding: 7px 14px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: var(--font);
+  transition: background .12s, border-color .12s;
+}
+.btn:hover { border-color: var(--text-mid); }
+.btn:disabled { opacity: .5; cursor: default; }
+.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
+.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }
+.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
+.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
+
+/* ── Forms ─────────────────────────────────────────────────── */
+.field { margin-bottom: 12px; }
+.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-mid); margin-bottom: 4px; }
+.field input[type="text"], .field input[type="email"], .field input[type="date"],
+.field input[type="time"], .field input[type="datetime-local"],
+.field input[type="number"], .field select, .field textarea {
+  width: 100%;
+  border: 1px solid var(--card-border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13.5px;
+  font-family: var(--font);
+  color: var(--text-dark);
+  background: var(--card-bg);
+}
+.field textarea { min-height: 72px; resize: vertical; }
+.field-row { display: flex; gap: 12px; }
+.field-row > .field { flex: 1; }
+.field-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
+.field-check input { width: 16px; height: 16px; accent-color: var(--gold); }
+.field-hint { font-size: 11.5px; color: var(--text-mid); margin-top: 3px; }
+
+/* ── Cards & lists ─────────────────────────────────────────── */
+.card {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  padding: 14px 16px;
+  margin-bottom: 10px;
+}
+
+.task-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  cursor: pointer;
+  transition: box-shadow .12s;
+}
+.task-card:hover { box-shadow: var(--shadow-md); }
+.task-card-main { flex: 1; min-width: 0; }
+.task-card-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.task-card-meta { font-size: 12px; color: var(--text-mid); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.task-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
+
+/* ── Badges ────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 20px;
+  padding: 2px 9px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+}
+.badge-outline {
+  background: transparent;
+  border: 1px solid var(--card-border);
+  color: var(--text-mid);
+  font-weight: 500;
+}
+
+/* ── Filter chips ──────────────────────────────────────────── */
+.filter-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
+.filter-row .filter-section { flex: 1; min-width: 0; margin-bottom: 0; }
+.filter-row .sort-chip { flex-shrink: 0; align-self: center; white-space: nowrap; }
+.filter-section { margin-bottom: 10px; }
+.filter-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  color: var(--text-mid);
+  transition: border-color .12s;
+}
+.filter-section-header:hover { border-color: var(--gold); }
+.filter-section-label { font-weight: 600; color: var(--text-dark); white-space: nowrap; }
+.filter-section-summary { flex: 1; color: var(--gold); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.filter-section-summary.muted { color: var(--text-mid); font-weight: 400; }
+.filter-section-chevron { flex-shrink: 0; transition: transform .18s; }
+.filter-section-chevron.open { transform: rotate(180deg); }
+.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; align-items: center; }
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border-radius: 20px;
+  border: 1px solid var(--card-border);
+  background: var(--card-bg);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-mid);
+  user-select: none;
+  font-family: var(--font);
+  transition: all .12s;
+}
+.chip:hover { border-color: var(--gold); color: var(--text-dark); }
+.chip.active { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
+
+/* ── Modal ─────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15,15,32,.55);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 24px 12px;
+  z-index: 100;
+  overflow-y: auto;
+}
+.modal {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  width: 100%;
+  max-width: 680px;
+  padding: 20px;
+  margin: auto 0;
+}
+.modal-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
+.modal-header h2 { font-size: 16px; margin: 0; flex: 1; }
+.modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-mid);
+  padding: 2px;
+  display: flex;
+}
+.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
+.modal-footer-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--card-border); }
+.btn-ghost-sm {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 4px 8px; border-radius: 6px; border: none; background: none;
+  font-size: 12px; color: var(--text-mid); cursor: pointer; font-family: var(--font);
+  transition: color .12s, background .12s;
+}
+.btn-ghost-sm:hover { color: var(--text-dark); background: var(--card-border); }
+.btn-ghost-danger { color: var(--danger); }
+.btn-ghost-danger:hover { color: var(--danger); background: var(--danger-bg); }
+
+/* ── Timeline / thread ─────────────────────────────────────── */
+.timeline { margin: 8px 0; }
+.timeline-item {
+  display: flex;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--card-border);
+  font-size: 13px;
+}
+.timeline-item:last-child { border-bottom: none; }
+.timeline-icon { color: var(--text-mid); flex-shrink: 0; margin-top: 1px; }
+.timeline-body { flex: 1; min-width: 0; }
+.timeline-note { white-space: pre-wrap; }
+.timeline-meta { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
+.timeline-photo-link { color: var(--gold); cursor: pointer; font-size: 12px; font-weight: 500; }
+.timeline-photo-link:hover { text-decoration: underline; }
+
+/* ── Tables ────────────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
+table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
+table.data th {
+  text-align: left;
+  padding: 9px 12px;
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--text-mid);
+  border-bottom: 1px solid var(--card-border);
+  white-space: nowrap;
+}
+table.data td { padding: 9px 12px; border-bottom: 1px solid var(--card-border); vertical-align: top; }
+table.data tr:last-child td { border-bottom: none; }
+table.data tr.clickable { cursor: pointer; }
+table.data tr.clickable:hover td { background: var(--body-bg); }
+
+/* ── Stats strip ───────────────────────────────────────────── */
+.stats-strip { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
+.stat-box {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  padding: 10px 16px;
+  min-width: 110px;
+}
+.stat-box .stat-value { font-size: 18px; font-weight: 700; }
+.stat-box .stat-label { font-size: 11px; color: var(--text-mid); text-transform: uppercase; letter-spacing: .04em; }
+
+/* ── Misc ──────────────────────────────────────────────────── */
+.empty-state { text-align: center; color: var(--text-mid); padding: 40px 16px; font-size: 13.5px; }
+.error-banner {
+  background: var(--danger-bg);
+  border: 1px solid var(--danger);
+  color: var(--danger);
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mid); margin: 18px 0 8px; }
+.muted { color: var(--text-mid); }
+.overdue { color: var(--danger); font-weight: 600; }
+
+/* Sidebar scrollbar */
+.nav-scroll::-webkit-scrollbar,
+.sidebar::-webkit-scrollbar,
+.sidebar-nav::-webkit-scrollbar { width: 4px; }
+.nav-scroll::-webkit-scrollbar-track,
+.sidebar::-webkit-scrollbar-track,
+.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
+.nav-scroll::-webkit-scrollbar-thumb,
+.sidebar::-webkit-scrollbar-thumb,
+.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
+.nav-scroll::-webkit-scrollbar-thumb:hover,
+.sidebar::-webkit-scrollbar-thumb:hover,
+.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
+.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }
+
+/* ══════════════════════════════════════════════════════════════
+   Calendar-specific components
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── View switcher (reuses .chip/.chip.active) ────────────────── */
+.cal-view-switcher { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+
+/* ── Sidebar calendar toggle list ─────────────────────────────── */
+.cal-sidebar-calendars { display: flex; flex-direction: column; gap: 2px; }
+.cal-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-dark);
+  user-select: none;
+}
+.cal-toggle-row:hover { background: var(--body-bg); }
+.cal-toggle-row input { width: 14px; height: 14px; accent-color: var(--gold); flex-shrink: 0; }
+.cal-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.cal-toggle-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ── Month grid ────────────────────────────────────────────────── */
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background: var(--card-border);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.cal-day-header {
+  background: var(--card-bg);
+  padding: 8px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--text-mid);
+  text-align: center;
+}
+.cal-day {
+  background: var(--card-bg);
+  min-height: 96px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  cursor: pointer;
+  transition: background .12s;
+}
+.cal-day:hover { background: var(--body-bg); }
+.cal-day-num { font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
+.cal-day.other-month { background: #fafafb; }
+.cal-day.other-month .cal-day-num { color: var(--text-mid); opacity: .6; }
+.cal-day.today { background: rgba(201,168,76,.08); }
+.cal-day.today .cal-day-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--gold);
+  color: var(--navy);
+}
+
+.cal-event-chip {
+  display: block;
+  border-radius: 5px;
+  padding: 1px 6px;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.cal-event-more { font-size: 11px; color: var(--text-mid); padding: 1px 6px; cursor: pointer; }
+
+/* ── Week / day grid ───────────────────────────────────────────── */
+.cal-week-grid {
+  display: grid;
+  grid-template-columns: 56px repeat(7, 1fr);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--card-bg);
+}
+.cal-week-grid.cal-day-view { grid-template-columns: 56px 1fr; }
+.cal-week-head { display: contents; }
+.cal-week-head-cell {
+  padding: 8px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+  color: var(--text-mid);
+  border-bottom: 1px solid var(--card-border);
+  border-left: 1px solid var(--card-border);
+  background: var(--card-bg);
+}
+.cal-week-head-cell.today { color: var(--gold); }
+.cal-time-gutter { grid-column: 1; }
+.cal-time-row {
+  height: 48px;
+  font-size: 10.5px;
+  color: var(--text-mid);
+  text-align: right;
+  padding: 2px 6px;
+  border-top: 1px solid var(--card-border);
+  box-sizing: border-box;
+}
+.cal-day-col {
+  position: relative;
+  border-left: 1px solid var(--card-border);
+  border-top: 1px solid var(--card-border);
+  min-height: 48px;
+}
+.cal-day-col-slot {
+  height: 48px;
+  border-top: 1px solid var(--card-border);
+  box-sizing: border-box;
+}
+.cal-day-col-slot:first-child { border-top: none; }
+.cal-week-event {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  border-radius: 5px;
+  padding: 2px 5px;
+  font-size: 11px;
+  font-weight: 500;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+.cal-allday-row {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 4px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--card-border);
+  flex-wrap: wrap;
+}
+
+/* ── Agenda / list view ───────────────────────────────────────── */
+.cal-agenda-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--card-border);
+  cursor: pointer;
+}
+.cal-agenda-item:hover { background: var(--body-bg); }
+.cal-agenda-item:last-child { border-bottom: none; }
+.cal-agenda-date {
+  width: 64px;
+  flex-shrink: 0;
+  font-size: 11.5px;
+  color: var(--text-mid);
+  font-weight: 600;
+  padding-top: 1px;
+}
+.cal-agenda-main { flex: 1; min-width: 0; }
+.cal-agenda-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.cal-agenda-meta { font-size: 12px; color: var(--text-mid); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
+
+/* ── Colour swatch picker ─────────────────────────────────────── */
+.cal-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
+.cal-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: transform .1s, border-color .1s;
+}
+.cal-swatch:hover { transform: scale(1.08); }
+.cal-swatch.active { border-color: var(--navy); }
+
+/* ── Credential reveal box ────────────────────────────────────── */
+.cal-credential-box {
+  background: var(--navy);
+  color: var(--text);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  font-family: monospace;
+  font-size: 13px;
+  margin: 10px 0;
+}
+.cal-credential-box .field-hint { color: var(--gold-light); }

frontend/src/main.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+
+if (new URLSearchParams(window.location.search).has('install')) {
+  window.addEventListener('beforeinstallprompt', e => {
+    e.preventDefault()
+    ;(e as Event & { prompt: () => Promise<void> }).prompt()
+  }, { once: true })
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

frontend/src/pages/ActivityLog.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState, useCallback } from 'react'
+import type { ActivityLogEntry, Calendar } from '../types'
+import { fetchActivity, fetchCalendars } from '../api'
+
+const PAGE_SIZE = 50
+
+export default function ActivityLog() {
+  const [calendars, setCalendars] = useState<Calendar[]>([])
+  const [entries, setEntries] = useState<ActivityLogEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [offset, setOffset] = useState(0)
+  const [hasMore, setHasMore] = useState(true)
+
+  const [calendarId, setCalendarId] = useState('')
+  const [actorEmail, setActorEmail] = useState('')
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+
+  useEffect(() => {
+    fetchCalendars().then(setCalendars).catch(() => {})
+  }, [])
+
+  const load = useCallback((nextOffset: number, append: boolean) => {
+    setLoading(true)
+    setError(null)
+    fetchActivity({
+      calendar_id: calendarId ? Number(calendarId) : undefined,
+      actor_email: actorEmail || undefined,
+      from: from || undefined,
+      to: to || undefined,
+      limit: PAGE_SIZE,
+      offset: nextOffset,
+    })
+      .then(rows => {
+        setEntries(prev => append ? [...prev, ...rows] : rows)
+        setHasMore(rows.length === PAGE_SIZE)
+        setOffset(nextOffset)
+      })
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [calendarId, actorEmail, from, to])
+
+  useEffect(() => { load(0, false) }, [load])
+
+  return (
+    <div className="page" style={{ maxWidth: 1100 }}>
+      <div className="page-header">
+        <h1>Activity Log</h1>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      <div className="filter-row" style={{ flexWrap: 'wrap', marginBottom: 14 }}>
+        <div className="field" style={{ marginBottom: 0, minWidth: 160 }}>
+          <label>Calendar</label>
+          <select value={calendarId} onChange={e => setCalendarId(e.target.value)}>
+            <option value="">All calendars</option>
+            {calendars.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+          </select>
+        </div>
+        <div className="field" style={{ marginBottom: 0, minWidth: 160 }}>
+          <label>Actor email</label>
+          <input type="text" value={actorEmail} onChange={e => setActorEmail(e.target.value)} placeholder="name@hotel..." />
+        </div>
+        <div className="field" style={{ marginBottom: 0 }}>
+          <label>From</label>
+          <input type="date" value={from} onChange={e => setFrom(e.target.value)} />
+        </div>
+        <div className="field" style={{ marginBottom: 0 }}>
+          <label>To</label>
+          <input type="date" value={to} onChange={e => setTo(e.target.value)} />
+        </div>
+      </div>
+
+      <div className="table-wrap">
+        <table className="data">
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Actor</th>
+              <th>Action</th>
+              <th>Entity</th>
+              <th>Summary</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map(e => (
+              <tr key={e.id}>
+                <td style={{ whiteSpace: 'nowrap' }}>{new Date(e.created_at).toLocaleString()}</td>
+                <td>{e.actor_name || e.actor_email}</td>
+                <td>{e.action}</td>
+                <td>{e.entity_type} #{e.entity_id}</td>
+                <td>{e.summary}</td>
+              </tr>
+            ))}
+            {entries.length === 0 && !loading && (
+              <tr><td colSpan={5} className="empty-state">No activity found.</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {loading && <div className="empty-state">Loading…</div>}
+
+      {hasMore && !loading && entries.length > 0 && (
+        <div style={{ textAlign: 'center', marginTop: 12 }}>
+          <button className="btn" onClick={() => load(offset + PAGE_SIZE, true)}>Load more</button>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/CalDavSetup.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState, useCallback } from 'react'
+import { Copy, Plus, Smartphone, Trash2, TriangleAlert } from 'lucide-react'
+import type { CaldavCredential, CaldavCredentialCreated } from '../types'
+import { fetchCaldavCredentials, createCaldavCredential, deleteCaldavCredential } from '../api'
+
+export default function CalDavSetup() {
+  const [credentials, setCredentials] = useState<CaldavCredential[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [label, setLabel] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [revealed, setRevealed] = useState<CaldavCredentialCreated | null>(null)
+
+  const caldavUrl = `${window.location.origin}/calendar/caldav/`
+
+  const reload = useCallback(() => {
+    setLoading(true)
+    setError(null)
+    fetchCaldavCredentials().then(setCredentials).catch(err => setError(err.message)).finally(() => setLoading(false))
+  }, [])
+
+  useEffect(() => { reload() }, [reload])
+
+  async function handleCreate() {
+    setCreating(true)
+    setError(null)
+    try {
+      const created = await createCaldavCredential(label.trim() || undefined)
+      setRevealed(created)
+      setLabel('')
+      reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create credential')
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function handleRevoke(id: number) {
+    if (!confirm('Revoke this device? It will stop syncing immediately.')) return
+    try {
+      await deleteCaldavCredential(id)
+      if (revealed?.id === id) setRevealed(null)
+      reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke credential')
+    }
+  }
+
+  function copy(text: string) {
+    navigator.clipboard?.writeText(text).catch(() => {})
+  }
+
+  return (
+    <div className="page" style={{ maxWidth: 760 }}>
+      <div className="page-header">
+        <h1>Phone Sync</h1>
+      </div>
+
+      <div className="card">
+        <p style={{ marginTop: 0 }}>
+          Subscribe to this calendar from your phone or computer's own calendar app (Apple Calendar,
+          Google Calendar, Outlook, …) using <strong>CalDAV</strong>. Once set up, events created here
+          show up on your device automatically, and new device-created events sync back — no separate app
+          needed.
+        </p>
+        <p style={{ marginBottom: 0 }}>
+          Each device needs its own generated username and password below — never share your normal
+          hotel login for this.
+        </p>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      <div className="section-title">Your CalDAV devices</div>
+      {loading ? (
+        <div className="empty-state">Loading…</div>
+      ) : credentials.length === 0 ? (
+        <div className="empty-state">No devices set up yet.</div>
+      ) : (
+        <div className="table-wrap">
+          <table className="data">
+            <thead>
+              <tr>
+                <th>Label</th>
+                <th>Username</th>
+                <th>Created</th>
+                <th>Last used</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {credentials.map(c => (
+                <tr key={c.id}>
+                  <td>{c.label || '—'}</td>
+                  <td>{c.username}</td>
+                  <td>{new Date(c.created_at).toLocaleDateString()}</td>
+                  <td>{c.last_used_at ? new Date(c.last_used_at).toLocaleString() : 'Never'}</td>
+                  <td style={{ textAlign: 'right' }}>
+                    <button className="btn-ghost-sm btn-ghost-danger" onClick={() => handleRevoke(c.id)}>
+                      <Trash2 size={13} strokeWidth={1.75} /> Revoke
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="field-row" style={{ alignItems: 'flex-end', marginTop: 12 }}>
+        <div className="field" style={{ flex: 1 }}>
+          <label>Device label (optional)</label>
+          <input type="text" value={label} onChange={e => setLabel(e.target.value)} placeholder="e.g. Sarah's iPhone" />
+        </div>
+        <button className="btn btn-primary" onClick={handleCreate} disabled={creating} style={{ marginBottom: 12 }}>
+          <Plus size={14} strokeWidth={1.75} />
+          {creating ? 'Generating…' : 'Generate new'}
+        </button>
+      </div>
+
+      {revealed && (
+        <div className="card" style={{ borderColor: 'var(--gold)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--danger)', fontWeight: 600, marginBottom: 8 }}>
+            <TriangleAlert size={16} strokeWidth={1.75} />
+            Save this now — the password won't be shown again.
+          </div>
+          <div className="cal-credential-box">
+            <div>Username: {revealed.username} <Copy size={13} strokeWidth={1.75} style={{ cursor: 'pointer', verticalAlign: 'middle' }} onClick={() => copy(revealed.username)} /></div>
+            <div>Password: {revealed.password} <Copy size={13} strokeWidth={1.75} style={{ cursor: 'pointer', verticalAlign: 'middle' }} onClick={() => copy(revealed.password)} /></div>
+            <div>Server URL: {caldavUrl} <Copy size={13} strokeWidth={1.75} style={{ cursor: 'pointer', verticalAlign: 'middle' }} onClick={() => copy(caldavUrl)} /></div>
+          </div>
+          <button className="btn btn-sm" onClick={() => setRevealed(null)}>I've saved it, hide this</button>
+        </div>
+      )}
+
+      <div className="section-title">Set-up instructions</div>
+
+      <div className="card">
+        <div style={{ fontWeight: 600, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <Smartphone size={15} strokeWidth={1.75} /> Apple Calendar (iPhone / Mac)
+        </div>
+        <ol style={{ marginTop: 0, paddingLeft: 20 }}>
+          <li>Settings → Calendar → Accounts → Add Account → Other → Add CalDAV Account.</li>
+          <li>Server: <code>{caldavUrl}</code></li>
+          <li>User Name / Password: the credentials generated above.</li>
+          <li>Tap Next, then Save.</li>
+        </ol>
+      </div>
+
+      <div className="card">
+        <div style={{ fontWeight: 600, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <Smartphone size={15} strokeWidth={1.75} /> Google Calendar
+        </div>
+        <ol style={{ marginTop: 0, paddingLeft: 20 }}>
+          <li>Google Calendar doesn't support direct CalDAV subscriptions on the free tier — easiest is to
+            use a CalDAV-sync app such as "CalDAV-Sync" (Android) with the server URL and credentials above.</li>
+          <li>Alternatively, on desktop, add it as a "secondary" calendar in a CalDAV-aware client and it
+            will appear alongside Google Calendar.</li>
+        </ol>
+      </div>
+
+      <div className="card">
+        <div style={{ fontWeight: 600, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <Smartphone size={15} strokeWidth={1.75} /> Outlook
+        </div>
+        <ol style={{ marginTop: 0, paddingLeft: 20 }}>
+          <li>Outlook (desktop): File → Account Settings → Internet Calendars → New, then paste <code>{caldavUrl}</code>.</li>
+          <li>When prompted, enter the username and password generated above.</li>
+        </ol>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/CalendarSettings.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useState, useCallback } from 'react'
+import { Lock, Pencil, Plus, Trash2, X } from 'lucide-react'
+import type { Calendar } from '../types'
+import { fetchCalendars, createCalendar, updateCalendar, deleteCalendar } from '../api'
+
+// Curated swatch — similarly saturated hues that read well against the navy/gold theme.
+const SWATCHES = [
+  '#c9a84c', '#2563eb', '#16a34a', '#dc2626', '#7c3aed',
+  '#0d9488', '#d97706', '#db2777', '#4f46e5', '#64748b',
+]
+
+export default function CalendarSettings() {
+  const [calendars, setCalendars] = useState<Calendar[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [editingId, setEditingId] = useState<number | null>(null)
+  const [editName, setEditName] = useState('')
+  const [editColor, setEditColor] = useState(SWATCHES[0])
+
+  const [newOpen, setNewOpen] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [newColor, setNewColor] = useState(SWATCHES[0])
+  const [saving, setSaving] = useState(false)
+
+  const reload = useCallback(() => {
+    setLoading(true)
+    setError(null)
+    fetchCalendars().then(setCalendars).catch(err => setError(err.message)).finally(() => setLoading(false))
+  }, [])
+
+  useEffect(() => { reload() }, [reload])
+
+  function startEdit(cal: Calendar) {
+    setEditingId(cal.id)
+    setEditName(cal.name)
+    setEditColor(cal.color)
+  }
+
+  async function saveEdit(id: number) {
+    setSaving(true)
+    setError(null)
+    try {
+      await updateCalendar(id, { name: editName.trim(), color: editColor })
+      setEditingId(null)
+      reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Update failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete(cal: Calendar) {
+    if (!confirm(`Delete calendar "${cal.name}"? Events on it will also be removed.`)) return
+    try {
+      await deleteCalendar(cal.id)
+      reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Delete failed')
+    }
+  }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault()
+    if (!newName.trim()) return
+    setSaving(true)
+    setError(null)
+    try {
+      await createCalendar({ name: newName.trim(), color: newColor })
+      setNewName('')
+      setNewColor(SWATCHES[0])
+      setNewOpen(false)
+      reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Create failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h1>Calendars</h1>
+        <button className="btn btn-primary" onClick={() => setNewOpen(o => !o)}>
+          {newOpen ? <X size={14} strokeWidth={1.75} /> : <Plus size={14} strokeWidth={1.75} />}
+          {newOpen ? 'Cancel' : 'New calendar'}
+        </button>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      {newOpen && (
+        <div className="card">
+          <form onSubmit={handleCreate}>
+            <div className="field">
+              <label>Name</label>
+              <input type="text" value={newName} onChange={e => setNewName(e.target.value)} required />
+            </div>
+            <div className="field">
+              <label>Colour</label>
+              <div className="cal-swatch-row">
+                {SWATCHES.map(sw => (
+                  <span
+                    key={sw}
+                    className={`cal-swatch ${newColor === sw ? 'active' : ''}`}
+                    style={{ background: sw }}
+                    onClick={() => setNewColor(sw)}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="modal-actions">
+              <button type="submit" className="btn btn-primary" disabled={saving}>{saving ? 'Saving…' : 'Create'}</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="empty-state">Loading…</div>
+      ) : (
+        <div className="table-wrap">
+          <table className="data">
+            <thead>
+              <tr>
+                <th></th>
+                <th>Name</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {calendars.map(cal => (
+                <tr key={cal.id}>
+                  {editingId === cal.id ? (
+                    <>
+                      <td style={{ width: 40 }}>
+                        <div className="cal-swatch-row" style={{ margin: 0 }}>
+                          {SWATCHES.map(sw => (
+                            <span
+                              key={sw}
+                              className={`cal-swatch ${editColor === sw ? 'active' : ''}`}
+                              style={{ background: sw, width: 18, height: 18 }}
+                              onClick={() => setEditColor(sw)}
+                            />
+                          ))}
+                        </div>
+                      </td>
+                      <td>
+                        <input type="text" value={editName} onChange={e => setEditName(e.target.value)} />
+                      </td>
+                      <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                        <button className="btn btn-sm btn-primary" onClick={() => saveEdit(cal.id)} disabled={saving}>Save</button>{' '}
+                        <button className="btn btn-sm" onClick={() => setEditingId(null)}>Cancel</button>
+                      </td>
+                    </>
+                  ) : (
+                    <>
+                      <td style={{ width: 40 }}>
+                        <span className="cal-dot" style={{ background: cal.color, width: 14, height: 14 }} />
+                      </td>
+                      <td>
+                        {cal.name}
+                        {cal.is_system && (
+                          <span className="badge badge-outline" style={{ marginLeft: 8 }}>
+                            <Lock size={11} strokeWidth={1.75} /> system
+                          </span>
+                        )}
+                      </td>
+                      <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                        <button
+                          className="btn-ghost-sm"
+                          onClick={() => startEdit(cal)}
+                          disabled={cal.is_system}
+                        >
+                          <Pencil size={13} strokeWidth={1.75} />
+                        </button>
+                        <button
+                          className="btn-ghost-sm btn-ghost-danger"
+                          onClick={() => handleDelete(cal)}
+                          disabled={cal.is_system}
+                        >
+                          <Trash2 size={13} strokeWidth={1.75} />
+                        </button>
+                      </td>
+                    </>
+                  )}
+                </tr>
+              ))}
+              {calendars.length === 0 && (
+                <tr><td colSpan={3} className="empty-state">No calendars yet.</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/CalendarView.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState, useCallback } from 'react'
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-react'
+import type { Calendar, EventSummary } from '../types'
+import { can } from '../types'
+import { useAuth } from '../components/AuthGate'
+import { fetchCalendars, fetchEvents } from '../api'
+import CalendarToggleList from '../components/CalendarToggleList'
+import ViewSwitcher, { type CalendarViewKey } from '../components/ViewSwitcher'
+import EventForm from '../components/EventForm'
+import MonthGrid from '../components/views/MonthGrid'
+import WeekGrid from '../components/views/WeekGrid'
+import DayGrid from '../components/views/DayGrid'
+import AgendaList from '../components/views/AgendaList'
+import {
+  addDays, addMonths, monthGridDays, startOfWeek, toISODate,
+  formatMonthLabel, formatWeekLabel, formatDateLabel,
+} from '../dateUtils'
+
+function rangeFor(view: CalendarViewKey, date: Date): { from: Date; to: Date } {
+  if (view === 'month') {
+    const days = monthGridDays(date)
+    return { from: days[0], to: days[days.length - 1] }
+  }
+  if (view === 'week') {
+    const start = startOfWeek(date)
+    return { from: start, to: addDays(start, 6) }
+  }
+  if (view === 'day') {
+    return { from: date, to: date }
+  }
+  // list/agenda — rolling 30-day window from the current date
+  return { from: date, to: addDays(date, 30) }
+}
+
+function labelFor(view: CalendarViewKey, date: Date): string {
+  if (view === 'month') return formatMonthLabel(date)
+  if (view === 'week') return formatWeekLabel(date)
+  if (view === 'day') return formatDateLabel(date)
+  return `Next 30 days from ${formatDateLabel(date)}`
+}
+
+function shiftDate(view: CalendarViewKey, date: Date, dir: 1 | -1): Date {
+  if (view === 'month') return addMonths(date, dir)
+  if (view === 'week') return addDays(date, 7 * dir)
+  return addDays(date, dir)
+}
+
+export default function CalendarView() {
+  const { user } = useAuth()
+  const [view, setView] = useState<CalendarViewKey>('month')
+  const [currentDate, setCurrentDate] = useState(new Date())
+  const [calendars, setCalendars] = useState<Calendar[]>([])
+  const [visibleIds, setVisibleIds] = useState<Set<number>>(new Set())
+  const [events, setEvents] = useState<EventSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [formState, setFormState] = useState<{ open: boolean; eventId?: number; initialDate?: Date }>({ open: false })
+
+  useEffect(() => {
+    fetchCalendars().then(cals => {
+      setCalendars(cals)
+      setVisibleIds(new Set(cals.map(c => c.id)))
+    }).catch(err => setError(err.message))
+  }, [])
+
+  const reload = useCallback(() => {
+    const { from, to } = rangeFor(view, currentDate)
+    setLoading(true)
+    setError(null)
+    fetchEvents({ from: toISODate(from), to: toISODate(to) })
+      .then(setEvents)
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [view, currentDate])
+
+  useEffect(() => { reload() }, [reload])
+
+  function toggleCalendar(id: number) {
+    setVisibleIds(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const visibleEvents = events.filter(ev => visibleIds.has(ev.calendar_id))
+
+  function openCreate(date: Date) {
+    if (!can(user, 'create')) return
+    setFormState({ open: true, initialDate: date })
+  }
+  function openEdit(id: number) {
+    setFormState({ open: true, eventId: id })
+  }
+  function closeForm() {
+    setFormState({ open: false })
+  }
+
+  const viewProps = {
+    events: visibleEvents,
+    date: currentDate,
+    onSelectDate: openCreate,
+    onSelectEvent: openEdit,
+  }
+
+  return (
+    <div className="page" style={{ maxWidth: 1300 }}>
+      <div className="page-header">
+        <h1>Calendar</h1>
+        {can(user, 'create') && (
+          <button className="btn btn-primary" onClick={() => openCreate(currentDate)}>
+            <Plus size={14} strokeWidth={1.75} />
+            New event
+          </button>
+        )}
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+        <div className="card" style={{ width: 220, flexShrink: 0 }}>
+          <div className="section-title" style={{ marginTop: 0 }}>Calendars</div>
+          <CalendarToggleList calendars={calendars} visibleIds={visibleIds} onToggle={toggleCalendar} />
+        </div>
+
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div className="filter-row" style={{ marginBottom: 12, alignItems: 'center' }}>
+            <button className="btn btn-sm" onClick={() => setCurrentDate(shiftDate(view, currentDate, -1))}>
+              <ChevronLeft size={14} strokeWidth={1.75} />
+            </button>
+            <button className="btn btn-sm" onClick={() => setCurrentDate(new Date())}>Today</button>
+            <button className="btn btn-sm" onClick={() => setCurrentDate(shiftDate(view, currentDate, 1))}>
+              <ChevronRight size={14} strokeWidth={1.75} />
+            </button>
+            <div style={{ fontWeight: 600, fontSize: 14, flex: 1 }}>{labelFor(view, currentDate)}</div>
+            <ViewSwitcher view={view} onChange={setView} />
+          </div>
+
+          {loading ? (
+            <div className="empty-state">Loading…</div>
+          ) : view === 'month' ? (
+            <MonthGrid {...viewProps} />
+          ) : view === 'week' ? (
+            <WeekGrid {...viewProps} />
+          ) : view === 'day' ? (
+            <DayGrid {...viewProps} />
+          ) : (
+            <AgendaList {...viewProps} />
+          )}
+        </div>
+      </div>
+
+      {formState.open && (
+        <EventForm
+          eventId={formState.eventId}
+          initialDate={formState.initialDate}
+          onClose={closeForm}
+          onSaved={reload}
+        />
+      )}
+    </div>
+  )
+}

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState, useCallback } from 'react'
+import { CalendarClock, Users2 } from 'lucide-react'
+import type { Department, EventSummary } from '../types'
+import { fetchMyUpcoming, fetchMyDepartments } from '../api'
+import EventForm from '../components/EventForm'
+import { formatDayHeader, formatTime } from '../dateUtils'
+
+export default function Dashboard() {
+  const [upcoming, setUpcoming] = useState<EventSummary[]>([])
+  const [departments, setDepartments] = useState<Department[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [openEventId, setOpenEventId] = useState<number | null>(null)
+
+  const reload = useCallback(() => {
+    setLoading(true)
+    setError(null)
+    Promise.all([fetchMyUpcoming(7), fetchMyDepartments()])
+      .then(([ev, depts]) => { setUpcoming(ev); setDepartments(depts) })
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  useEffect(() => { reload() }, [reload])
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h1>Dashboard</h1>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      <div className="stats-strip">
+        <div className="stat-box">
+          <div className="stat-value">{upcoming.length}</div>
+          <div className="stat-label">Upcoming (7 days)</div>
+        </div>
+        <div className="stat-box">
+          <div className="stat-value">{departments.length}</div>
+          <div className="stat-label">My departments</div>
+        </div>
+      </div>
+
+      <div className="section-title" style={{ marginTop: 0 }}>Your departments</div>
+      {departments.length === 0 ? (
+        <div className="empty-state">You're not assigned to any departments.</div>
+      ) : (
+        <div className="chip-bar" style={{ marginBottom: 8 }}>
+          {departments.map(d => (
+            <span key={d.id} className="badge badge-outline">
+              <Users2 size={12} strokeWidth={1.75} />
+              {d.name}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="section-title">Upcoming events</div>
+      {loading ? (
+        <div className="empty-state">Loading…</div>
+      ) : upcoming.length === 0 ? (
+        <div className="empty-state">Nothing on your calendar in the next 7 days.</div>
+      ) : (
+        upcoming.map(ev => (
+          <div key={ev.id} className="card task-card" onClick={() => setOpenEventId(ev.id)}>
+            <CalendarClock size={16} strokeWidth={1.75} color={ev.calendar_color} style={{ marginTop: 2 }} />
+            <div className="task-card-main">
+              <div className="task-card-title">{ev.title}</div>
+              <div className="task-card-meta">
+                <span>{formatDayHeader(new Date(ev.start_at))}{!ev.all_day && ` · ${formatTime(ev.start_at)}`}</span>
+                {ev.location && <span>{ev.location}</span>}
+                <span className="badge-outline badge">{ev.calendar_name}</span>
+              </div>
+            </div>
+          </div>
+        ))
+      )}
+
+      {openEventId !== null && (
+        <EventForm
+          eventId={openEventId}
+          onClose={() => setOpenEventId(null)}
+          onSaved={reload}
+        />
+      )}
+    </div>
+  )
+}

frontend/src/sw.js

@@ -0,0 +1,11 @@
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+
+precacheAndRoute(self.__WB_MANIFEST)
+
+// SPA fallback: navigate requests that don't match a cached asset serve index.html
+registerRoute(
+  new NavigationRoute(createHandlerBoundToURL('/calendar/index.html'), {
+    denylist: [/\/api\//],
+  })
+)

frontend/src/types.ts

@@ -0,0 +1,109 @@
+export interface Calendar {
+  id: number
+  slug: string
+  name: string
+  color: string
+  is_system: boolean
+  created_by: string | null
+  created_at: string
+}
+
+export interface EventSummary {
+  id: number
+  calendar_id: number
+  calendar_name: string
+  calendar_color: string
+  uid: string
+  title: string
+  location: string | null
+  start_at: string
+  end_at: string
+  all_day: boolean
+  department_names: string[]
+  assignee_names: string[]
+  attachment_count: number
+}
+
+export interface EventDepartment {
+  id: string
+  name: string
+}
+
+export interface EventAssignee {
+  email: string
+  name: string
+}
+
+export interface EventAttachment {
+  id: number
+  filename: string
+  mime_type: string
+  size_bytes: number
+  url: string
+}
+
+export interface EventDetail extends EventSummary {
+  description: string | null
+  departments: EventDepartment[]
+  assignees: EventAssignee[]
+  attachments: EventAttachment[]
+  calendar: {
+    id: number
+    name: string
+    color: string
+    is_system: boolean
+  }
+}
+
+export interface ActivityLogEntry {
+  id: number
+  actor_email: string
+  actor_name: string
+  action: string
+  entity_type: string
+  entity_id: number
+  calendar_id: number | null
+  summary: string
+  details: string | null
+  source: string
+  created_at: string
+}
+
+export interface Department {
+  id: string
+  name: string
+}
+
+export interface CaldavCredential {
+  id: number
+  username: string
+  label: string | null
+  created_at: string
+  last_used_at: string | null
+}
+
+// Returned once, immediately after creation — password is never retrievable again.
+export interface CaldavCredentialCreated {
+  id: number
+  username: string
+  password: string
+  label: string | null
+}
+
+export interface AuthUser {
+  id: number
+  email: string
+  name: string
+}
+
+export interface User {
+  user_id: number
+  name: string
+  email: string
+  is_admin: boolean
+  caps: string[]   // bare slugs — verify?app=calendar strips the prefix
+}
+
+export function can(user: User, cap: string): boolean {
+  return user.is_admin || user.caps.includes(cap)
+}

frontend/src/vite-env.d.ts

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

frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src"]
+}

frontend/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  base: '/calendar/',
+  plugins: [
+    react(),
+    VitePWA({
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.js',
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Calendar',
+        short_name: 'Calendar',
+        start_url: '/calendar/',
+        scope: '/',
+        display: 'standalone',
+        theme_color: '#c9a84c',
+        background_color: '#c9a84c',
+        icons: [
+          { src: '/calendar/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/calendar/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
+        ],
+      },
+      injectManifest: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+      },
+    }),
+  ],
+})

seed-app.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+// Run from calendar/ dir: DATABASE_URL=... node seed-app.js
+//
+// NOTE: this follows the *actual* auth schema (role_capabilities has a
+// capability_id column — see auth/src/db.js) rather than maintenance/ and
+// room-planner/'s seed-app.js, which both insert into a non-existent
+// `cap_id` column. Copied the 3-step pattern, fixed the column name.
+import pg from 'pg'
+
+const { Pool } = pg
+const pool = new Pool({ connectionString: process.env.DATABASE_URL })
+
+await pool.query(`
+  INSERT INTO apps (slug, name, description, base_path, icon, theme_color, category, internal_host, internal_port)
+  VALUES ('calendar', 'Calendar', 'Shared events calendar — departments, staff, bank holidays, phone sync', '/calendar', 'CalendarDays', '#c9a84c', 'Operations', '10.10.10.126', 3080)
+  ON CONFLICT (slug) DO UPDATE SET
+    name          = EXCLUDED.name,
+    description   = EXCLUDED.description,
+    base_path     = EXCLUDED.base_path,
+    icon          = EXCLUDED.icon,
+    theme_color   = EXCLUDED.theme_color,
+    category      = EXCLUDED.category,
+    internal_host = EXCLUDED.internal_host,
+    internal_port = EXCLUDED.internal_port
+`)
+
+// Seed capabilities
+await pool.query(`
+  INSERT INTO app_capabilities (app_id, slug, name, description, sort_order)
+  SELECT a.id, c.slug, c.name, c.description, c.sort_order
+  FROM apps a, (VALUES
+    ('view',              'View Calendar',              'View events, calendars and bank holidays',        1),
+    ('create',            'Create Events',              'Add new events to non-system calendars',          2),
+    ('edit',              'Edit Events',                'Edit, delete and attach files to events; manage own CalDAV credentials', 3),
+    ('manage_calendars',  'Manage Calendars',            'Create, rename, recolour and delete calendars',   4),
+    ('admin',             'View Activity Log & Admin',   'View the full activity/audit log',                5)
+  ) AS c(slug, name, description, sort_order)
+  WHERE a.slug = 'calendar'
+  ON CONFLICT (app_id, slug) DO UPDATE SET
+    name        = EXCLUDED.name,
+    description = EXCLUDED.description,
+    sort_order  = EXCLUDED.sort_order
+`)
+
+// Grant view + create to Staff role if they have no calendar caps yet
+await pool.query(`
+  INSERT INTO role_capabilities (role_id, capability_id)
+  SELECT r.id, ac.id
+  FROM roles r
+  JOIN app_capabilities ac ON ac.app_id = (SELECT id FROM apps WHERE slug = 'calendar')
+  JOIN apps a ON a.id = ac.app_id
+  WHERE r.slug = 'staff'
+    AND ac.slug IN ('view', 'create')
+    AND NOT EXISTS (
+      SELECT 1 FROM role_capabilities rc
+      JOIN app_capabilities ac2 ON ac2.id = rc.capability_id
+      WHERE rc.role_id = r.id AND ac2.app_id = a.id
+    )
+  ON CONFLICT DO NOTHING
+`)
+
+console.log('calendar app seeded.')
+await pool.end()