feat: iCal calendar feed (GRO-107)

feat: iCal calendar feed (GRO-107)

Closes GRO-107

apps/api/src/__tests__/calendar.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { generateIcalToken } from "../routes/calendar.js";
+
+describe("generateIcalToken", () => {
+  it("generates a 64-character hex token", () => {
+    const token = generateIcalToken();
+    expect(token).toHaveLength(64);
+    expect(token).toMatch(/^[a-f0-9]+$/);
+  });
+
+  it("generates unique tokens", () => {
+    const token1 = generateIcalToken();
+    const token2 = generateIcalToken();
+    expect(token1).not.toBe(token2);
+  });
+});

apps/api/src/__tests__/petPhotos.test.ts

@@ -11,6 +11,7 @@ const MANAGER: StaffRow = {
   name: "Manager McManager",
   email: "manager@example.com",
   active: true,
+  icalToken: null,
   createdAt: new Date(),
   updatedAt: new Date(),
 };

apps/api/src/__tests__/rbac.test.ts

@@ -12,6 +12,7 @@ const MANAGER: StaffRow = {
   name: "Manager McManager",
   email: "manager@example.com",
   active: true,
+  icalToken: null,
   createdAt: new Date(),
   updatedAt: new Date(),
 };

apps/api/src/index.ts

@@ -17,6 +17,7 @@ import { groomingLogsRouter } from "./routes/groomingLogs.js";
 import { impersonationRouter } from "./routes/impersonation.js";
 import { settingsRouter } from "./routes/settings.js";
 import { searchRouter } from "./routes/search.js";
+import { calendarRouter } from "./routes/calendar.js";
 import { getDb, businessSettings } from "@groombook/db";
 import { authMiddleware } from "./middleware/auth.js";
 import { resolveStaffMiddleware, requireRole } from "./middleware/rbac.js";
@@ -62,6 +63,8 @@ app.get("/api/branding", async (c) => {
   });
 });
 
+// Public iCal calendar feed — token auth in URL, no auth middleware required
+app.route("/api/calendar", calendarRouter);
 // Protected API routes
 const api = app.basePath("/api");
 api.use("*", authMiddleware);

apps/api/src/routes/calendar.ts

@@ -0,0 +1,126 @@
+import { Hono } from "hono";
+import { randomBytes } from "node:crypto";
+import {
+  and,
+  eq,
+  gte,
+  getDb,
+  appointments,
+  clients,
+  pets,
+  services,
+  staff,
+} from "@groombook/db";
+
+export const calendarRouter = new Hono();
+
+function formatIcalDate(date: Date): string {
+  return date.toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");
+}
+
+function escapeIcalText(text: string | null): string {
+  if (!text) return "";
+  return text.replace(/\\/g, "\\\\").replace(/;/g, "\\;").replace(/,/g, "\\,").replace(/\n/g, "\\n");
+}
+
+function buildIcalFeed(
+  appointments: Array<{
+    id: string;
+    startTime: Date;
+    endTime: Date;
+    status: string;
+    clientName: string | null;
+    petName: string | null;
+    serviceName: string | null;
+  }>,
+  staffName: string,
+  dtstamp: string
+): string {
+  const lines: string[] = [
+    "BEGIN:VCALENDAR",
+    "VERSION:2.0",
+    "PRODID:-//GroomBook//EN",
+    "CALSCALE:GREGORIAN",
+    "METHOD:PUBLISH",
+    `X-WR-CALNAME:${escapeIcalText(staffName)} - GroomBook`,
+  ];
+
+  for (const appt of appointments) {
+    const status = appt.status === "cancelled" ? "CANCELLED" : "CONFIRMED";
+    const sequence = appt.status === "cancelled" ? "1" : "0";
+    const summary = `${appt.petName ?? "Pet"} - ${appt.serviceName ?? "Appointment"}`;
+    const description = `Client: ${appt.clientName ?? "Unknown"}\nPet: ${appt.petName ?? "Unknown"}\nService: ${appt.serviceName ?? "Unknown"}`;
+
+    lines.push(
+      "BEGIN:VEVENT",
+      `UID:${appt.id}@groombook`,
+      `DTSTAMP:${dtstamp}`,
+      `DTSTART:${formatIcalDate(new Date(appt.startTime))}`,
+      `DTEND:${formatIcalDate(new Date(appt.endTime))}`,
+      `SUMMARY:${escapeIcalText(summary)}`,
+      `DESCRIPTION:${escapeIcalText(description)}`,
+      `STATUS:${status}`,
+      `SEQUENCE:${sequence}`,
+      "END:VEVENT"
+    );
+  }
+
+  lines.push("END:VCALENDAR");
+  return lines.join("\r\n");
+}
+
+calendarRouter.get("/:staffId.ics", async (c) => {
+  const db = getDb();
+  const staffId = c.req.param("staffId") as string;
+  const token = c.req.query("token") as string;
+
+  if (!token) {
+    return c.text("Unauthorized", 401);
+  }
+
+  const [staffMember] = await db
+    .select()
+    .from(staff)
+    .where(eq(staff.id, staffId))
+    .limit(1);
+
+  if (!staffMember || staffMember.icalToken !== token) {
+    return c.text("Unauthorized", 401);
+  }
+
+  const now = new Date();
+  const rows = await db
+    .select({
+      id: appointments.id,
+      startTime: appointments.startTime,
+      endTime: appointments.endTime,
+      status: appointments.status,
+      clientId: appointments.clientId,
+      petId: appointments.petId,
+      serviceId: appointments.serviceId,
+      clientName: clients.name,
+      petName: pets.name,
+      serviceName: services.name,
+    })
+    .from(appointments)
+    .innerJoin(clients, eq(appointments.clientId, clients.id))
+    .innerJoin(pets, eq(appointments.petId, pets.id))
+    .innerJoin(services, eq(appointments.serviceId, services.id))
+    .where(
+      and(
+        eq(appointments.staffId, staffId),
+        gte(appointments.startTime, now)
+      )
+    )
+    .orderBy(appointments.startTime);
+
+  const ical = buildIcalFeed(rows, staffMember.name, formatIcalDate(new Date()));
+  return c.text(ical, 200, {
+    "Content-Type": "text/calendar; charset=utf-8",
+    "Content-Disposition": `inline; filename="${encodeURIComponent(staffMember.name)}_calendar.ics"`,
+  });
+});
+
+export function generateIcalToken(): string {
+  return randomBytes(32).toString("hex");
+}

apps/api/src/routes/portal.ts

@@ -7,7 +7,8 @@ import type { AppEnv } from "../middleware/rbac.js";
 export const portalRouter = new Hono<AppEnv>();
 
 const customerNotesSchema = z.object({
-  customerNotes: z.string().max(500),
+  // .min(1) prevents empty strings — clearing notes is not a supported use case
+  customerNotes: z.string().min(1).max(500),
 });
 
 portalRouter.patch(

apps/api/src/routes/staff.ts

@@ -1,9 +1,11 @@
 import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod";
+import { randomBytes } from "node:crypto";
 import { and, eq, getDb, ne, staff, appointments } from "@groombook/db";
+import type { AppEnv } from "../middleware/rbac.js";
 
-export const staffRouter = new Hono();
+export const staffRouter = new Hono<AppEnv>();
 
 const createStaffSchema = z.object({
   name: z.string().min(1).max(200),
@@ -86,3 +88,56 @@ staffRouter.delete("/:id", async (c) => {
   if (!row) return c.json({ error: "Not found" }, 404);
   return c.json({ ok: true });
 });
+
+staffRouter.post("/:id/ical-token", async (c) => {
+  const db = getDb();
+  const id = c.req.param("id");
+  const staffRow = c.get("staff");
+
+  if (staffRow.role !== "manager" && staffRow.id !== id) {
+    return c.json({ error: "Forbidden" }, 403);
+  }
+
+  const [member] = await db
+    .select()
+    .from(staff)
+    .where(eq(staff.id, id))
+    .limit(1);
+
+  if (!member) return c.json({ error: "Not found" }, 404);
+
+  const token = randomBytes(32).toString("hex");
+  const [updated] = await db
+    .update(staff)
+    .set({ icalToken: token, updatedAt: new Date() })
+    .where(eq(staff.id, id))
+    .returning();
+
+  if (!updated) return c.json({ error: "Not found" }, 404);
+  return c.json({ icalToken: updated.icalToken });
+});
+
+staffRouter.delete("/:id/ical-token", async (c) => {
+  const db = getDb();
+  const id = c.req.param("id");
+  const staffRow = c.get("staff");
+
+  if (staffRow.role !== "manager" && staffRow.id !== id) {
+    return c.json({ error: "Forbidden" }, 403);
+  }
+
+  const [member] = await db
+    .select()
+    .from(staff)
+    .where(eq(staff.id, id))
+    .limit(1);
+
+  if (!member) return c.json({ error: "Not found" }, 404);
+
+  await db
+    .update(staff)
+    .set({ icalToken: null, updatedAt: new Date() })
+    .where(eq(staff.id, id));
+
+  return c.json({ ok: true });
+});

apps/web/src/components/CalendarSyncSection.tsx

@@ -0,0 +1,203 @@
+import { useState, useEffect } from "react";
+import { Calendar, RefreshCw, Trash2, Copy, Check } from "lucide-react";
+
+interface Props {
+  staffId: string;
+  staffName: string;
+}
+
+export function CalendarSyncSection({ staffId }: Props) {
+  const [token, setToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [actionLoading, setActionLoading] = useState<"generate" | "revoke" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [showRevokeConfirm, setShowRevokeConfirm] = useState(false);
+
+  useEffect(() => {
+    fetchToken();
+  }, [staffId]);
+
+  async function fetchToken() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/staff/${staffId}`);
+      if (!res.ok) throw new Error("Failed to fetch staff data");
+      const data = await res.json();
+      setToken(data.icalToken || null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function generateToken() {
+    setActionLoading("generate");
+    setError(null);
+    try {
+      const res = await fetch(`/api/staff/${staffId}/ical-token`, { method: "POST" });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to generate token");
+      }
+      const data = await res.json();
+      setToken(data.icalToken);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to generate token");
+    } finally {
+      setActionLoading(null);
+    }
+  }
+
+  async function revokeToken() {
+    if (!showRevokeConfirm) {
+      setShowRevokeConfirm(true);
+      return;
+    }
+    setActionLoading("revoke");
+    setError(null);
+    try {
+      const res = await fetch(`/api/staff/${staffId}/ical-token`, { method: "DELETE" });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to revoke token");
+      }
+      setToken(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to revoke token");
+    } finally {
+      setActionLoading(null);
+      setShowRevokeConfirm(false);
+    }
+  }
+
+  async function copyFeedUrl() {
+    if (!token) return;
+    const url = `${window.location.origin}/api/calendar/${staffId}.ics?token=${token}`;
+    await navigator.clipboard.writeText(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const feedUrl = token ? `/api/calendar/${staffId}.ics?token=${token}` : null;
+
+  return (
+    <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
+      <div className="flex items-center gap-2 mb-4">
+        <Calendar size={18} className="text-(--color-accent)" />
+        <h3 className="font-medium text-stone-800">Calendar Sync</h3>
+      </div>
+
+      <p className="text-sm text-stone-500 mb-4">
+        Generate a calendar feed link to share your upcoming appointments with any calendar app that supports iCal (Apple Calendar, Google Calendar, Outlook).
+      </p>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-sm text-stone-400">Loading...</div>
+      ) : token ? (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-stone-500 mb-1">Your Calendar Feed URL</label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                readOnly
+                value={feedUrl ?? ""}
+                className="flex-1 text-sm border border-stone-200 rounded-lg px-3 py-2 bg-stone-50 text-stone-600 font-mono"
+              />
+              <button
+                onClick={copyFeedUrl}
+                className="flex items-center gap-1.5 px-3 py-2 border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50"
+                title="Copy link"
+              >
+                {copied ? <Check size={14} className="text-green-600" /> : <Copy size={14} />}
+              </button>
+            </div>
+          </div>
+
+          {showRevokeConfirm ? (
+            <div className="flex items-center gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
+              <p className="flex-1 text-sm text-red-700">
+                Revoke your calendar feed link? Anyone with the current link will lose access.
+              </p>
+              <button
+                onClick={revokeToken}
+                disabled={actionLoading !== null}
+                className="flex items-center gap-1.5 px-3 py-1.5 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
+              >
+                {actionLoading === "revoke" ? (
+                  <RefreshCw size={14} className="animate-spin" />
+                ) : (
+                  <Trash2 size={14} />
+                )}
+                Revoke
+              </button>
+              <button
+                onClick={() => setShowRevokeConfirm(false)}
+                disabled={actionLoading !== null}
+                className="px-3 py-1.5 border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <div className="flex gap-2">
+              <button
+                onClick={generateToken}
+                disabled={actionLoading !== null}
+                className="flex items-center gap-1.5 px-3 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50"
+              >
+                {actionLoading === "generate" ? (
+                  <RefreshCw size={14} className="animate-spin" />
+                ) : (
+                  <RefreshCw size={14} />
+                )}
+                Regenerate
+              </button>
+              <button
+                onClick={revokeToken}
+                disabled={actionLoading !== null}
+                className="flex items-center gap-1.5 px-3 py-2 border border-red-200 rounded-lg text-sm text-red-600 hover:bg-red-50 disabled:opacity-50"
+              >
+                {actionLoading === "revoke" ? (
+                  <RefreshCw size={14} className="animate-spin" />
+                ) : (
+                  <Trash2 size={14} />
+                )}
+                Revoke
+              </button>
+            </div>
+          )}
+
+          <p className="text-xs text-stone-400">
+            Regenerating will create a new URL and invalidate the old one.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <p className="text-sm text-stone-600">You don&apos;t have a calendar feed set up yet.</p>
+          <button
+            onClick={generateToken}
+            disabled={actionLoading !== null}
+            className="flex items-center gap-1.5 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50"
+          >
+            {actionLoading === "generate" ? (
+              <RefreshCw size={14} className="animate-spin" />
+            ) : (
+              <Calendar size={14} />
+            )}
+            {actionLoading === "generate" ? "Generating..." : "Generate Calendar Feed"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

opencode.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "permission": "allow",
+  "experimental": {
+    "snapshots": false
+  }
+}

packages/db/migrations/0016_ical_token.sql

@@ -0,0 +1 @@
+ALTER TABLE staff ADD COLUMN ical_token TEXT UNIQUE;

packages/db/src/factories.ts

@@ -52,6 +52,7 @@ export function buildStaff(overrides: Partial<StaffRow> = {}): StaffRow {
     oidcSub: `oidc-${id}`,
     role: "groomer",
     active: true,
+    icalToken: null,
     createdAt: new Date("2025-01-01T00:00:00Z"),
     updatedAt: new Date("2025-01-01T00:00:00Z"),
     ...overrides,

packages/db/src/schema.ts

@@ -106,6 +106,8 @@ export const staff = pgTable("staff", {
   oidcSub: text("oidc_sub").unique(),
   role: staffRoleEnum("role").notNull().default("groomer"),
   active: boolean("active").notNull().default(true),
+  // Token for iCal calendar feed subscription (no auth required)
+  icalToken: text("ical_token").unique(),
   createdAt: timestamp("created_at").notNull().defaultNow(),
   updatedAt: timestamp("updated_at").notNull().defaultNow(),
 });