feat: iCal calendar feed (GRO-107) #116

Merged
groombook-engineer[bot] merged 11 commits from feat/gro-107-ical-feed into main 2026-03-27 02:37:07 +00:00
12 changed files with 419 additions and 2 deletions
+16
View File
@@ -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);
});
});
+1
View File
@@ -11,6 +11,7 @@ const MANAGER: StaffRow = {
name: "Manager McManager",
email: "manager@example.com",
active: true,
icalToken: null,
createdAt: new Date(),
updatedAt: new Date(),
};
+1
View File
@@ -12,6 +12,7 @@ const MANAGER: StaffRow = {
name: "Manager McManager",
email: "manager@example.com",
active: true,
icalToken: null,
createdAt: new Date(),
updatedAt: new Date(),
};
+3
View File
@@ -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);
+126
View File
@@ -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");
}
+2 -1
View File
@@ -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(
+56 -1
View File
@@ -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 });
});
@@ -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>
);
}
+7
View File
@@ -0,0 +1,7 @@
{
"$schema": "https://opencode.ai/config.json",
"permission": "allow",
"experimental": {
"snapshots": false
}
}
@@ -0,0 +1 @@
ALTER TABLE staff ADD COLUMN ical_token TEXT UNIQUE;
+1
View File
@@ -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,
+2
View File
@@ -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(),
});