Merge origin/main to sync with iCal schema and test fixes

This commit is contained in:
Flea Flicker
2026-03-27 12:49:41 +00:00
14 changed files with 585 additions and 3 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,141 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router-dom";
import { GlobalSearch } from "../components/GlobalSearch.js";
const mockNavigate = vi.fn();
vi.mock("react-router-dom", async (importOriginal) => {
const actual = await importOriginal<typeof import("react-router-dom")>();
return { ...actual, useNavigate: () => mockNavigate };
});
function renderSearch() {
return render(
<MemoryRouter>
<GlobalSearch />
</MemoryRouter>
);
}
beforeEach(() => {
mockNavigate.mockReset();
global.fetch = vi.fn();
});
describe("GlobalSearch", () => {
it("renders the search input with correct aria attributes", () => {
renderSearch();
const input = screen.getByRole("combobox");
expect(input).toBeInTheDocument();
expect(input).toHaveAttribute("aria-label", "Search clients and pets");
expect(input).toHaveAttribute("placeholder", "Search clients & pets…");
});
it("does not fetch when query is empty or whitespace", async () => {
renderSearch();
const user = userEvent.setup({ delay: null });
const input = screen.getByRole("combobox");
await user.type(input, " ");
// No debounce fires for blank input — verify fetch was never called
await new Promise((r) => setTimeout(r, 350));
expect(global.fetch).not.toHaveBeenCalled();
});
it("fetches after debounce and renders client results", async () => {
(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
ok: true,
json: async () => ({
clients: [{ id: "c1", name: "Alice Johnson", email: "alice@example.com", phone: "555-1234" }],
pets: [],
}),
} as Response);
renderSearch();
const user = userEvent.setup({ delay: null });
await user.type(screen.getByRole("combobox"), "Alice");
await waitFor(() => expect(screen.getByText("Alice Johnson")).toBeInTheDocument(), {
timeout: 1500,
});
expect(global.fetch).toHaveBeenCalledWith(expect.stringContaining("/api/search?q=Alice"));
// Section header should appear
expect(screen.getByText("Clients")).toBeInTheDocument();
});
it("fetches after debounce and renders pet results with owner name", async () => {
(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
ok: true,
json: async () => ({
clients: [],
pets: [
{ id: "p1", name: "Bella", breed: "Golden Retriever", clientId: "c1", ownerName: "Alice Johnson" },
],
}),
} as Response);
renderSearch();
const user = userEvent.setup({ delay: null });
await user.type(screen.getByRole("combobox"), "Bella");
await waitFor(() => expect(screen.getByText("Bella")).toBeInTheDocument(), { timeout: 1500 });
expect(screen.getByText("Owner: Alice Johnson")).toBeInTheDocument();
});
it("shows 'No results found' for a query that matches nothing", async () => {
(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
ok: true,
json: async () => ({ clients: [], pets: [] }),
} as Response);
renderSearch();
const user = userEvent.setup({ delay: null });
await user.type(screen.getByRole("combobox"), "xyzzy");
await waitFor(() => expect(screen.getByText("No results found")).toBeInTheDocument(), {
timeout: 1500,
});
});
it("navigates to ?highlight=<id> and clears input when a client result is clicked", async () => {
(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
ok: true,
json: async () => ({
clients: [{ id: "c1", name: "Alice Johnson", email: null, phone: null }],
pets: [],
}),
} as Response);
renderSearch();
const user = userEvent.setup({ delay: null });
const input = screen.getByRole("combobox");
await user.type(input, "Alice");
await waitFor(() => screen.getByText("Alice Johnson"), { timeout: 1500 });
await user.click(screen.getByText("Alice Johnson"));
expect(mockNavigate).toHaveBeenCalledWith("/admin/clients?highlight=c1");
expect(input).toHaveValue("");
});
it("navigates to owner client ?highlight=<clientId> when a pet result is clicked", async () => {
(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
ok: true,
json: async () => ({
clients: [],
pets: [{ id: "p1", name: "Bella", breed: null, clientId: "c1", ownerName: "Alice" }],
}),
} as Response);
renderSearch();
const user = userEvent.setup({ delay: null });
const input = screen.getByRole("combobox");
await user.type(input, "Bella");
await waitFor(() => screen.getByText("Bella"), { timeout: 1500 });
await user.click(screen.getByText("Bella"));
expect(mockNavigate).toHaveBeenCalledWith("/admin/clients?highlight=c1");
expect(input).toHaveValue("");
});
});
@@ -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>
);
}
+25 -1
View File
@@ -1,4 +1,5 @@
import { useEffect, useState, useCallback } from "react";
import { useEffect, useState, useCallback, useRef } from "react";
import { useSearchParams } from "react-router-dom";
import type { Client, GroomingVisitLog, Pet } from "@groombook/types";
import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js";
import { PetPhotoUpload } from "../components/PetPhotoUpload.js";
@@ -43,6 +44,7 @@ const EMPTY_VISIT_LOG: VisitLogForm = { cutStyle: "", productsUsed: "", notes: "
// ─── Component ───────────────────────────────────────────────────────────────
export function ClientsPage() {
const [searchParams, setSearchParams] = useSearchParams();
const [clients, setClients] = useState<Client[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -50,6 +52,7 @@ export function ClientsPage() {
const [selectedClient, setSelectedClient] = useState<Client | null>(null);
const [pets, setPets] = useState<Pet[]>([]);
const [petsLoading, setPetsLoading] = useState(false);
const clientRowRefs = useRef<Map<string, HTMLDivElement>>(new Map());
// Client form
const [showClientForm, setShowClientForm] = useState(false);
@@ -100,6 +103,23 @@ export function ClientsPage() {
.finally(() => setLoading(false));
}, [showDisabled]);
// Auto-select a client when navigated here via GlobalSearch (?highlight=<clientId>)
useEffect(() => {
const highlightId = searchParams.get("highlight");
if (!highlightId || loading || clients.length === 0) return;
const match = clients.find((c) => c.id === highlightId);
if (!match) return;
selectClient(match);
const el = clientRowRefs.current.get(highlightId);
if (el) el.scrollIntoView({ block: "nearest", behavior: "smooth" });
// Remove the param so back/refresh does not re-trigger
setSearchParams((prev) => {
const next = new URLSearchParams(prev);
next.delete("highlight");
return next;
}, { replace: true });
}, [searchParams, clients, loading]); // selectClient is stable (defined in render scope)
async function loadPets(clientId: string) {
setPetsLoading(true);
const r = await fetch(`/api/pets?clientId=${encodeURIComponent(clientId)}`);
@@ -398,6 +418,10 @@ export function ClientsPage() {
{filtered.map((c) => (
<div
key={c.id}
ref={(el) => {
if (el) clientRowRefs.current.set(c.id, el);
else clientRowRefs.current.delete(c.id);
}}
onClick={() => selectClient(c)}
style={{
padding: "0.5rem 0.6rem", borderRadius: 6, cursor: "pointer", marginBottom: "0.2rem",
+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(),
});