Merge origin/main to sync with iCal schema and test fixes
This commit is contained in:
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -11,6 +11,7 @@ const MANAGER: StaffRow = {
|
|||||||
name: "Manager McManager",
|
name: "Manager McManager",
|
||||||
email: "manager@example.com",
|
email: "manager@example.com",
|
||||||
active: true,
|
active: true,
|
||||||
|
icalToken: null,
|
||||||
createdAt: new Date(),
|
createdAt: new Date(),
|
||||||
updatedAt: new Date(),
|
updatedAt: new Date(),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ const MANAGER: StaffRow = {
|
|||||||
name: "Manager McManager",
|
name: "Manager McManager",
|
||||||
email: "manager@example.com",
|
email: "manager@example.com",
|
||||||
active: true,
|
active: true,
|
||||||
|
icalToken: null,
|
||||||
createdAt: new Date(),
|
createdAt: new Date(),
|
||||||
updatedAt: new Date(),
|
updatedAt: new Date(),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ import { groomingLogsRouter } from "./routes/groomingLogs.js";
|
|||||||
import { impersonationRouter } from "./routes/impersonation.js";
|
import { impersonationRouter } from "./routes/impersonation.js";
|
||||||
import { settingsRouter } from "./routes/settings.js";
|
import { settingsRouter } from "./routes/settings.js";
|
||||||
import { searchRouter } from "./routes/search.js";
|
import { searchRouter } from "./routes/search.js";
|
||||||
|
import { calendarRouter } from "./routes/calendar.js";
|
||||||
import { getDb, businessSettings } from "@groombook/db";
|
import { getDb, businessSettings } from "@groombook/db";
|
||||||
import { authMiddleware } from "./middleware/auth.js";
|
import { authMiddleware } from "./middleware/auth.js";
|
||||||
import { resolveStaffMiddleware, requireRole } from "./middleware/rbac.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
|
// Protected API routes
|
||||||
const api = app.basePath("/api");
|
const api = app.basePath("/api");
|
||||||
api.use("*", authMiddleware);
|
api.use("*", authMiddleware);
|
||||||
|
|||||||
@@ -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");
|
||||||
|
}
|
||||||
@@ -7,7 +7,8 @@ import type { AppEnv } from "../middleware/rbac.js";
|
|||||||
export const portalRouter = new Hono<AppEnv>();
|
export const portalRouter = new Hono<AppEnv>();
|
||||||
|
|
||||||
const customerNotesSchema = z.object({
|
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(
|
portalRouter.patch(
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
import { Hono } from "hono";
|
import { Hono } from "hono";
|
||||||
import { zValidator } from "@hono/zod-validator";
|
import { zValidator } from "@hono/zod-validator";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
import { randomBytes } from "node:crypto";
|
||||||
import { and, eq, getDb, ne, staff, appointments } from "@groombook/db";
|
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({
|
const createStaffSchema = z.object({
|
||||||
name: z.string().min(1).max(200),
|
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);
|
if (!row) return c.json({ error: "Not found" }, 404);
|
||||||
return c.json({ ok: true });
|
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'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 type { Client, GroomingVisitLog, Pet } from "@groombook/types";
|
||||||
import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js";
|
import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js";
|
||||||
import { PetPhotoUpload } from "../components/PetPhotoUpload.js";
|
import { PetPhotoUpload } from "../components/PetPhotoUpload.js";
|
||||||
@@ -43,6 +44,7 @@ const EMPTY_VISIT_LOG: VisitLogForm = { cutStyle: "", productsUsed: "", notes: "
|
|||||||
// ─── Component ───────────────────────────────────────────────────────────────
|
// ─── Component ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
export function ClientsPage() {
|
export function ClientsPage() {
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const [clients, setClients] = useState<Client[]>([]);
|
const [clients, setClients] = useState<Client[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
@@ -50,6 +52,7 @@ export function ClientsPage() {
|
|||||||
const [selectedClient, setSelectedClient] = useState<Client | null>(null);
|
const [selectedClient, setSelectedClient] = useState<Client | null>(null);
|
||||||
const [pets, setPets] = useState<Pet[]>([]);
|
const [pets, setPets] = useState<Pet[]>([]);
|
||||||
const [petsLoading, setPetsLoading] = useState(false);
|
const [petsLoading, setPetsLoading] = useState(false);
|
||||||
|
const clientRowRefs = useRef<Map<string, HTMLDivElement>>(new Map());
|
||||||
|
|
||||||
// Client form
|
// Client form
|
||||||
const [showClientForm, setShowClientForm] = useState(false);
|
const [showClientForm, setShowClientForm] = useState(false);
|
||||||
@@ -100,6 +103,23 @@ export function ClientsPage() {
|
|||||||
.finally(() => setLoading(false));
|
.finally(() => setLoading(false));
|
||||||
}, [showDisabled]);
|
}, [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) {
|
async function loadPets(clientId: string) {
|
||||||
setPetsLoading(true);
|
setPetsLoading(true);
|
||||||
const r = await fetch(`/api/pets?clientId=${encodeURIComponent(clientId)}`);
|
const r = await fetch(`/api/pets?clientId=${encodeURIComponent(clientId)}`);
|
||||||
@@ -398,6 +418,10 @@ export function ClientsPage() {
|
|||||||
{filtered.map((c) => (
|
{filtered.map((c) => (
|
||||||
<div
|
<div
|
||||||
key={c.id}
|
key={c.id}
|
||||||
|
ref={(el) => {
|
||||||
|
if (el) clientRowRefs.current.set(c.id, el);
|
||||||
|
else clientRowRefs.current.delete(c.id);
|
||||||
|
}}
|
||||||
onClick={() => selectClient(c)}
|
onClick={() => selectClient(c)}
|
||||||
style={{
|
style={{
|
||||||
padding: "0.5rem 0.6rem", borderRadius: 6, cursor: "pointer", marginBottom: "0.2rem",
|
padding: "0.5rem 0.6rem", borderRadius: 6, cursor: "pointer", marginBottom: "0.2rem",
|
||||||
|
|||||||
@@ -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;
|
||||||
@@ -52,6 +52,7 @@ export function buildStaff(overrides: Partial<StaffRow> = {}): StaffRow {
|
|||||||
oidcSub: `oidc-${id}`,
|
oidcSub: `oidc-${id}`,
|
||||||
role: "groomer",
|
role: "groomer",
|
||||||
active: true,
|
active: true,
|
||||||
|
icalToken: null,
|
||||||
createdAt: new Date("2025-01-01T00:00:00Z"),
|
createdAt: new Date("2025-01-01T00:00:00Z"),
|
||||||
updatedAt: new Date("2025-01-01T00:00:00Z"),
|
updatedAt: new Date("2025-01-01T00:00:00Z"),
|
||||||
...overrides,
|
...overrides,
|
||||||
|
|||||||
@@ -106,6 +106,8 @@ export const staff = pgTable("staff", {
|
|||||||
oidcSub: text("oidc_sub").unique(),
|
oidcSub: text("oidc_sub").unique(),
|
||||||
role: staffRoleEnum("role").notNull().default("groomer"),
|
role: staffRoleEnum("role").notNull().default("groomer"),
|
||||||
active: boolean("active").notNull().default(true),
|
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(),
|
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||||
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user