mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
feat: admin-provisioned staff, username login & role-based access
Replace the email-invitation flow with admin-provisioned staff accounts and
add role-based access that changes what each member sees.
Backend:
- Enable Better Auth `username` plugin (staff sign in by username); regenerate
auth schema (+ username/displayUsername on user) and migration 0007.
- Add `doctor` and `reception` roles to the access-control RBAC. `reception` is
scoped to scheduling + registration (no `prescription` statement).
- New `/api/staff` route: POST creates a user (auth.api.signUpEmail) and adds
them to the active clinic (auth.api.addMember); GET lists members + usernames.
Gated by requirePermission({ member: ["create"] }).
- Redact clinical PHI for the reception role in the patients service (read,
create and update) so demographics-only is enforced server-side.
Frontend:
- usernameClient + Email|Username tabs on the login form.
- lib/roles.ts: useActiveRole + Better-Auth-permission-driven nav visibility,
default landing, and a route guard (reception -> /appointments, blocked from
clinical routes). Applied to the sidebar, command palette and auth guard.
- Care team page now provisions staff via a two-step Add-team-member dialog
(details -> username/password) hitting /api/staff; removes the email-invite
and pending-invitation UI. New members are contactable from Messages
automatically (they become org members).
- Hide clinical sections of the patient form and the admin-only settings tabs
for non-clinical/non-admin roles.
All permission management stays in Better Auth (per the better-auth skills now
referenced in backend/CLAUDE.md).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
+15
-4
@@ -27,10 +27,21 @@ No test runner is configured. Verify by running the stack (`docker compose up`)
|
||||
|
||||
## Architecture
|
||||
|
||||
- **`src/auth.ts`** — the Better Auth config (the CLI auto-discovers it). Email/password,
|
||||
organization plugin (clinics) with custom RBAC from **`src/lib/access.ts`**
|
||||
(`owner`/`admin`/`member`/`viewer` + a `patient` resource). Mounted in `src/index.ts` via
|
||||
`toNodeHandler(auth)` at `/api/auth/*`.
|
||||
- **`src/auth.ts`** — the Better Auth config (the CLI auto-discovers it). Email/password +
|
||||
**username** plugin (staff sign in by username) and the organization plugin (clinics) with custom
|
||||
RBAC from **`src/lib/access.ts`** (`owner`/`admin`/`doctor`/`reception`/`member`/`viewer` over
|
||||
`patient`/`appointment`/`prescription`/`task` resources). `reception` has no `prescription`
|
||||
statement — it's scoped to scheduling + registration, and `src/services/patients.ts` redacts
|
||||
clinical fields for it. Mounted in `src/index.ts` via `toNodeHandler(auth)` at `/api/auth/*`.
|
||||
- **`src/routes/staff.ts`** — admin-provisioned staff: `POST /api/staff` creates a user
|
||||
(`auth.api.signUpEmail`) + attaches them to the clinic (`auth.api.addMember`); `GET /api/staff`
|
||||
lists members with usernames. Replaces the old email-invitation flow. Gated by
|
||||
`requirePermission({ member: ["create"] })`.
|
||||
- **Better Auth = the single source of RBAC.** Manage all permissions through Better Auth, not a
|
||||
custom layer. Authoritative references live as repo skills under
|
||||
`.claude/skills/{better-auth-best-practices,organization-best-practices,
|
||||
email-and-password-best-practices,better-auth-security-best-practices}` — consult them before
|
||||
changing `auth.ts`, `src/lib/access.ts`, or the auth schema.
|
||||
- **`src/db/`** — `index.ts` is the Drizzle client (no schema passed; we use the core query builder).
|
||||
`schema/auth.ts` is **generated** by the Better Auth CLI; `schema/patients.ts` is hand-written and
|
||||
references the generated `organization`/`user` tables.
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
ALTER TABLE "user" ADD COLUMN "username" text;--> statement-breakpoint
|
||||
ALTER TABLE "user" ADD COLUMN "display_username" text;--> statement-breakpoint
|
||||
ALTER TABLE "user" ADD CONSTRAINT "user_username_unique" UNIQUE("username");
|
||||
File diff suppressed because it is too large
Load Diff
@@ -50,6 +50,13 @@
|
||||
"when": 1780856647280,
|
||||
"tag": "0006_square_wither",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 7,
|
||||
"version": "7",
|
||||
"when": 1780933857005,
|
||||
"tag": "0007_skinny_bloodstrike",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { betterAuth } from "better-auth";
|
||||
import { drizzleAdapter } from "better-auth/adapters/drizzle";
|
||||
import { organization } from "better-auth/plugins";
|
||||
import { username } from "better-auth/plugins/username";
|
||||
import { eq } from "drizzle-orm";
|
||||
|
||||
import { db } from "./db/index.js";
|
||||
@@ -55,6 +56,13 @@ export const auth = betterAuth({
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// Lets staff sign in with a username (in addition to email). Admin-created
|
||||
// staff accounts (see src/routes/staff.ts) set a username + password the
|
||||
// employee uses to log in. Adds `username` + `displayUsername` to `user`.
|
||||
username({
|
||||
minUsernameLength: 3,
|
||||
maxUsernameLength: 32,
|
||||
}),
|
||||
organization({
|
||||
ac,
|
||||
roles,
|
||||
|
||||
@@ -21,6 +21,8 @@ export const user = pgTable("user", {
|
||||
.defaultNow()
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
username: text("username").unique(),
|
||||
displayUsername: text("display_username"),
|
||||
});
|
||||
|
||||
export const session = pgTable(
|
||||
|
||||
@@ -16,6 +16,7 @@ import { notesRouter } from "./routes/notes.js";
|
||||
import { notificationsRouter } from "./routes/notifications.js";
|
||||
import { patientsRouter } from "./routes/patients.js";
|
||||
import { prescriptionsRouter } from "./routes/prescriptions.js";
|
||||
import { staffRouter } from "./routes/staff.js";
|
||||
import { tasksRouter } from "./routes/tasks.js";
|
||||
|
||||
const app = express();
|
||||
@@ -58,6 +59,7 @@ app.use("/api/notes", notesRouter);
|
||||
app.use("/api/appointments", appointmentsRouter);
|
||||
app.use("/api/prescriptions", prescriptionsRouter);
|
||||
app.use("/api/tasks", tasksRouter);
|
||||
app.use("/api/staff", staffRouter);
|
||||
app.use("/api/activity", activityRouter);
|
||||
app.use("/api/analytics", analyticsRouter);
|
||||
app.use("/api/conversations", conversationsRouter);
|
||||
@@ -78,6 +80,7 @@ server.listen(env.PORT, () => {
|
||||
console.log(` • appts: /api/appointments`);
|
||||
console.log(` • rx: /api/prescriptions`);
|
||||
console.log(` • tasks: /api/tasks`);
|
||||
console.log(` • staff: /api/staff`);
|
||||
console.log(` • activity: /api/activity`);
|
||||
console.log(` • stats: /api/analytics`);
|
||||
console.log(` • messages: /api/conversations (+ Socket.io)`);
|
||||
|
||||
@@ -51,6 +51,29 @@ export const member = ac.newRole({
|
||||
task: ["read", "write", "delete"],
|
||||
});
|
||||
|
||||
// doctor (clinician): same clinical access as `member` — the role we provision
|
||||
// for physicians. Kept distinct from `member` so the UI can label/treat it as
|
||||
// "Doctor" and so reception can be a sibling role with narrower access.
|
||||
export const doctor = ac.newRole({
|
||||
...memberAc.statements,
|
||||
patient: ["read", "write"],
|
||||
appointment: ["read", "write", "delete"],
|
||||
prescription: ["read", "write", "delete"],
|
||||
task: ["read", "write", "delete"],
|
||||
});
|
||||
|
||||
// reception (front desk): scheduling + patient registration only. Can manage
|
||||
// appointments and register/edit patient demographics, but has NO access to
|
||||
// clinical records (no prescription statement at all) — least-privilege per
|
||||
// EHR RBAC guidance. The patients service additionally redacts clinical fields
|
||||
// for this role so demographics-only is enforced server-side, not just in UI.
|
||||
export const reception = ac.newRole({
|
||||
...memberAc.statements,
|
||||
patient: ["read", "write"],
|
||||
appointment: ["read", "write", "delete"],
|
||||
task: ["read", "write"],
|
||||
});
|
||||
|
||||
// viewer: read-only access to clinical records.
|
||||
export const viewer = ac.newRole({
|
||||
patient: ["read"],
|
||||
@@ -59,4 +82,4 @@ export const viewer = ac.newRole({
|
||||
task: ["read"],
|
||||
});
|
||||
|
||||
export const roles = { owner, admin, member, viewer };
|
||||
export const roles = { owner, admin, doctor, reception, member, viewer };
|
||||
|
||||
@@ -15,6 +15,18 @@ import * as service from "../services/patients.js";
|
||||
|
||||
export const patientsRouter = Router();
|
||||
|
||||
// The `reception` role is scoped to scheduling + registration: it sees and
|
||||
// writes patient demographics only, never clinical PHI. True only when the
|
||||
// caller's role set is reception without any clinical-capable role.
|
||||
function isReceptionOnly(memberRole?: string): boolean {
|
||||
const names = String(memberRole ?? "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
if (!names.includes("reception")) return false;
|
||||
return !names.some((r) => ["owner", "admin", "doctor", "member"].includes(r));
|
||||
}
|
||||
|
||||
// Notify the rest of the clinic about a patient record change (best-effort,
|
||||
// pushed live over the socket).
|
||||
async function notifyClinic(
|
||||
@@ -50,7 +62,12 @@ patientsRouter.get(
|
||||
requirePermission({ patient: ["read"] }),
|
||||
async (req, res, next) => {
|
||||
try {
|
||||
res.json(await service.listPatients(req.organizationId!));
|
||||
res.json(
|
||||
await service.listPatients(
|
||||
req.organizationId!,
|
||||
isReceptionOnly(req.memberRole),
|
||||
),
|
||||
);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
@@ -65,6 +82,7 @@ patientsRouter.get(
|
||||
const patient = await service.getPatient(
|
||||
req.organizationId!,
|
||||
req.params.fileNumber as string,
|
||||
isReceptionOnly(req.memberRole),
|
||||
);
|
||||
if (!patient) throw new HttpError(404, "Patient not found.");
|
||||
res.json(patient);
|
||||
@@ -84,6 +102,7 @@ patientsRouter.post(
|
||||
req.organizationId!,
|
||||
req.user!.id,
|
||||
input,
|
||||
isReceptionOnly(req.memberRole),
|
||||
);
|
||||
await recordActivity({
|
||||
orgId: req.organizationId!,
|
||||
@@ -117,6 +136,7 @@ patientsRouter.put(
|
||||
req.organizationId!,
|
||||
req.params.fileNumber as string,
|
||||
input,
|
||||
isReceptionOnly(req.memberRole),
|
||||
);
|
||||
if (!updated) throw new HttpError(404, "Patient not found.");
|
||||
await recordActivity({
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import { asc, eq } from "drizzle-orm";
|
||||
import { Router } from "express";
|
||||
import { z } from "zod";
|
||||
|
||||
import { auth } from "../auth.js";
|
||||
import { db } from "../db/index.js";
|
||||
import { member, organization, user } from "../db/schema/auth.js";
|
||||
import { HttpError } from "../lib/http-error.js";
|
||||
import { requireAuth, requireOrg, requirePermission } from "../middleware/auth.js";
|
||||
|
||||
export const staffRouter = Router();
|
||||
|
||||
// Admin-provisioned staff accounts. Instead of emailing an invitation link, an
|
||||
// owner/admin creates the employee's account directly — name, role and a
|
||||
// username + password the employee uses to sign in. Everything is gated by the
|
||||
// Better Auth `member` permission so RBAC stays in one place. The account is
|
||||
// created via `auth.api.signUpEmail` and attached to the active clinic via
|
||||
// `auth.api.addMember`; the new user then shows up everywhere org members do
|
||||
// (e.g. the Messages compose picker) with no extra wiring.
|
||||
|
||||
// Roles an admin may assign — `owner` is intentionally excluded (the clinic
|
||||
// creator is the sole owner; transfer ownership via member-role updates).
|
||||
const PROVISIONABLE_ROLES = ["admin", "doctor", "reception", "viewer"] as const;
|
||||
|
||||
const staffInputSchema = z.object({
|
||||
name: z.string().trim().min(1).max(120),
|
||||
username: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(3)
|
||||
.max(32)
|
||||
.regex(
|
||||
/^[a-zA-Z0-9_.]+$/,
|
||||
"Username may only contain letters, numbers, dots and underscores.",
|
||||
),
|
||||
password: z.string().min(12).max(256),
|
||||
role: z.enum(PROVISIONABLE_ROLES),
|
||||
// Optional real email; staff sign in by username, so when omitted we mint a
|
||||
// placeholder (the email column is required + unique).
|
||||
email: z.preprocess(
|
||||
(v) => (v === "" ? undefined : v),
|
||||
z.string().trim().email().optional(),
|
||||
),
|
||||
});
|
||||
|
||||
staffRouter.use(requireAuth, requireOrg);
|
||||
|
||||
// List the clinic's members with their usernames (the org client's
|
||||
// getFullOrganization doesn't expose username). Owner/admin only.
|
||||
staffRouter.get(
|
||||
"/",
|
||||
requirePermission({ member: ["create"] }),
|
||||
async (req, res, next) => {
|
||||
try {
|
||||
const rows = await db
|
||||
.select({
|
||||
id: member.id,
|
||||
userId: member.userId,
|
||||
role: member.role,
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
username: user.username,
|
||||
})
|
||||
.from(member)
|
||||
.innerJoin(user, eq(user.id, member.userId))
|
||||
.where(eq(member.organizationId, req.organizationId!))
|
||||
.orderBy(asc(user.name));
|
||||
res.json(rows);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Provision a new staff account and add them to the active clinic.
|
||||
staffRouter.post(
|
||||
"/",
|
||||
requirePermission({ member: ["create"] }),
|
||||
async (req, res, next) => {
|
||||
try {
|
||||
const input = staffInputSchema.parse(req.body);
|
||||
|
||||
const [org] = await db
|
||||
.select({ slug: organization.slug })
|
||||
.from(organization)
|
||||
.where(eq(organization.id, req.organizationId!));
|
||||
if (!org) throw new HttpError(404, "Clinic not found.");
|
||||
|
||||
const email =
|
||||
input.email ?? `${input.username.toLowerCase()}@${org.slug}.temetro.local`;
|
||||
|
||||
// Create the credential account (user + hashed password + username).
|
||||
let newUserId: string;
|
||||
try {
|
||||
const result = await auth.api.signUpEmail({
|
||||
body: {
|
||||
name: input.name,
|
||||
email,
|
||||
password: input.password,
|
||||
username: input.username,
|
||||
},
|
||||
});
|
||||
newUserId = result.user.id;
|
||||
} catch (err) {
|
||||
// Surface Better Auth's reason (e.g. username/email already taken).
|
||||
const message =
|
||||
(err as { body?: { message?: string } })?.body?.message ??
|
||||
(err as Error)?.message ??
|
||||
"Could not create the account.";
|
||||
throw new HttpError(400, message);
|
||||
}
|
||||
|
||||
// Attach the new user to the clinic with the chosen role (server-side,
|
||||
// no invitation step).
|
||||
await auth.api.addMember({
|
||||
body: {
|
||||
userId: newUserId,
|
||||
organizationId: req.organizationId!,
|
||||
role: input.role,
|
||||
},
|
||||
});
|
||||
|
||||
res.status(201).json({
|
||||
userId: newUserId,
|
||||
name: input.name,
|
||||
email,
|
||||
username: input.username.toLowerCase(),
|
||||
role: input.role,
|
||||
});
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
@@ -18,6 +18,7 @@ import type {
|
||||
Medication,
|
||||
Patient,
|
||||
Problem,
|
||||
Trend,
|
||||
} from "../types/patient.js";
|
||||
|
||||
type PatientRow = typeof patients.$inferSelect;
|
||||
@@ -65,6 +66,27 @@ function toPatient(row: PatientRow, children: Children): Patient {
|
||||
};
|
||||
}
|
||||
|
||||
const EMPTY_TREND: Trend = { label: "", unit: "", points: [] };
|
||||
|
||||
// Strip every clinical section, leaving only registration/demographic fields.
|
||||
// Used for the `reception` role, which is scoped to scheduling + registration
|
||||
// and must never receive PHI (labs, meds, problems, vitals, encounters). This
|
||||
// enforces least-privilege server-side rather than relying on the UI to hide it.
|
||||
function redactClinical(patient: Patient): Patient {
|
||||
return {
|
||||
...patient,
|
||||
allergies: [],
|
||||
alerts: [],
|
||||
medications: [],
|
||||
problems: [],
|
||||
vitals: { bp: "", hr: "", temp: "", spo2: "", takenAt: "" },
|
||||
vitalsTrend: EMPTY_TREND,
|
||||
labs: [],
|
||||
labTrend: EMPTY_TREND,
|
||||
encounters: [],
|
||||
};
|
||||
}
|
||||
|
||||
// Input children are already in the canonical Patient sub-shapes.
|
||||
function childrenFromInput(input: PatientInput): Children {
|
||||
return {
|
||||
@@ -98,6 +120,49 @@ function patientColumns(orgId: string, input: PatientInput, createdBy?: string)
|
||||
};
|
||||
}
|
||||
|
||||
// Registration columns only — clinical columns get empty values (they are
|
||||
// NOT NULL). Used when the `reception` role creates a patient so they can never
|
||||
// write PHI even if the request body contains clinical fields.
|
||||
function demographicColumns(
|
||||
orgId: string,
|
||||
input: PatientInput,
|
||||
createdBy?: string,
|
||||
) {
|
||||
return {
|
||||
organizationId: orgId,
|
||||
fileNumber: input.fileNumber,
|
||||
name: input.name,
|
||||
age: input.age,
|
||||
sex: input.sex,
|
||||
pcp: input.pcp,
|
||||
status: input.status,
|
||||
initials: input.initials,
|
||||
alerts: [] as string[],
|
||||
vitalsBp: "",
|
||||
vitalsHr: "",
|
||||
vitalsTemp: "",
|
||||
vitalsSpo2: "",
|
||||
vitalsTakenAt: "",
|
||||
vitalsTrend: EMPTY_TREND,
|
||||
labTrend: EMPTY_TREND,
|
||||
...(createdBy ? { createdBy } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
// The demographic subset for a `reception` update — never touches clinical
|
||||
// columns or child tables, so an existing record's PHI is preserved.
|
||||
function demographicUpdateColumns(input: PatientInput) {
|
||||
return {
|
||||
fileNumber: input.fileNumber,
|
||||
name: input.name,
|
||||
age: input.age,
|
||||
sex: input.sex,
|
||||
pcp: input.pcp,
|
||||
status: input.status,
|
||||
initials: input.initials,
|
||||
};
|
||||
}
|
||||
|
||||
// Loads and groups child rows for a set of patients in one round-trip each.
|
||||
async function loadChildren(
|
||||
patientIds: string[],
|
||||
@@ -212,19 +277,26 @@ function isUniqueViolation(err: unknown): boolean {
|
||||
);
|
||||
}
|
||||
|
||||
export async function listPatients(orgId: string): Promise<Patient[]> {
|
||||
export async function listPatients(
|
||||
orgId: string,
|
||||
demographicsOnly = false,
|
||||
): Promise<Patient[]> {
|
||||
const rows = await db
|
||||
.select()
|
||||
.from(patients)
|
||||
.where(eq(patients.organizationId, orgId))
|
||||
.orderBy(asc(patients.name));
|
||||
const children = await loadChildren(rows.map((r) => r.id));
|
||||
return rows.map((r) => toPatient(r, children.get(r.id) ?? emptyChildren()));
|
||||
return rows.map((r) => {
|
||||
const patient = toPatient(r, children.get(r.id) ?? emptyChildren());
|
||||
return demographicsOnly ? redactClinical(patient) : patient;
|
||||
});
|
||||
}
|
||||
|
||||
export async function getPatient(
|
||||
orgId: string,
|
||||
fileNumber: string,
|
||||
demographicsOnly = false,
|
||||
): Promise<Patient | null> {
|
||||
const [row] = await db
|
||||
.select()
|
||||
@@ -237,16 +309,27 @@ export async function getPatient(
|
||||
);
|
||||
if (!row) return null;
|
||||
const children = await loadChildren([row.id]);
|
||||
return toPatient(row, children.get(row.id) ?? emptyChildren());
|
||||
const patient = toPatient(row, children.get(row.id) ?? emptyChildren());
|
||||
return demographicsOnly ? redactClinical(patient) : patient;
|
||||
}
|
||||
|
||||
export async function createPatient(
|
||||
orgId: string,
|
||||
userId: string,
|
||||
input: PatientInput,
|
||||
demographicsOnly = false,
|
||||
): Promise<Patient> {
|
||||
try {
|
||||
return await db.transaction(async (tx) => {
|
||||
// Reception registers demographics only — clinical input is ignored and
|
||||
// no child (clinical) rows are written.
|
||||
if (demographicsOnly) {
|
||||
const [row] = await tx
|
||||
.insert(patients)
|
||||
.values(demographicColumns(orgId, input, userId))
|
||||
.returning();
|
||||
return toPatient(row!, emptyChildren());
|
||||
}
|
||||
const [row] = await tx
|
||||
.insert(patients)
|
||||
.values(patientColumns(orgId, input, userId))
|
||||
@@ -269,6 +352,7 @@ export async function updatePatient(
|
||||
orgId: string,
|
||||
fileNumber: string,
|
||||
input: PatientInput,
|
||||
demographicsOnly = false,
|
||||
): Promise<Patient | null> {
|
||||
try {
|
||||
return await db.transaction(async (tx) => {
|
||||
@@ -283,6 +367,21 @@ export async function updatePatient(
|
||||
);
|
||||
if (!existing) return null;
|
||||
|
||||
// Reception edits demographics only: update the registration columns and
|
||||
// leave clinical columns + child tables (existing PHI) untouched, then
|
||||
// return a redacted record.
|
||||
if (demographicsOnly) {
|
||||
const [row] = await tx
|
||||
.update(patients)
|
||||
.set(demographicUpdateColumns(input))
|
||||
.where(eq(patients.id, existing.id))
|
||||
.returning();
|
||||
const children = await loadChildren([existing.id]);
|
||||
return redactClinical(
|
||||
toPatient(row!, children.get(existing.id) ?? emptyChildren()),
|
||||
);
|
||||
}
|
||||
|
||||
const [row] = await tx
|
||||
.update(patients)
|
||||
.set(patientColumns(orgId, input))
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { type ReactNode, useEffect, useRef } from "react";
|
||||
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { canAccessRoute, defaultLandingFor, useActiveRole } from "@/lib/roles";
|
||||
|
||||
// Authoritative client-side gate for the app shell. Requires a session and an
|
||||
// active clinic. If the user is signed in without an active clinic but already
|
||||
@@ -11,6 +12,8 @@ import { authClient } from "@/lib/auth-client";
|
||||
// with no clinics at all. The API enforces the same access rules server-side.
|
||||
export function AppAuthGuard({ children }: { children: ReactNode }) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const role = useActiveRole();
|
||||
const { data: session, isPending } = authClient.useSession();
|
||||
const { data: orgs, isPending: orgsPending } =
|
||||
authClient.useListOrganizations();
|
||||
@@ -41,6 +44,17 @@ export function AppAuthGuard({ children }: { children: ReactNode }) {
|
||||
}, [isPending, hasUser, activeOrgId, orgsPending, orgs, router]);
|
||||
|
||||
const ready = hasUser && Boolean(activeOrgId);
|
||||
|
||||
// Role-based route guard: keep non-clinical roles (reception) out of clinical
|
||||
// pages — bounce them to their default landing. The backend enforces the same
|
||||
// via per-route RBAC (403); this just avoids showing an empty/erroring page.
|
||||
useEffect(() => {
|
||||
if (!ready || role == null) return;
|
||||
if (!canAccessRoute(pathname, role)) {
|
||||
router.replace(defaultLandingFor(role));
|
||||
}
|
||||
}, [ready, role, pathname, router]);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="flex h-dvh w-full items-center justify-center text-sm text-muted-foreground">
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
type Patient,
|
||||
updatePatient,
|
||||
} from "@/lib/patients";
|
||||
import { hasClinicalAccess, useActiveRole } from "@/lib/roles";
|
||||
import { notify } from "@/lib/toast";
|
||||
|
||||
type PatientFormDialogProps = {
|
||||
@@ -203,6 +204,11 @@ export function PatientFormDialog({
|
||||
}: PatientFormDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const isEdit = mode === "edit";
|
||||
// Reception registers demographics only — clinical sections are hidden (the
|
||||
// backend also redacts/ignores clinical data for this role). Show everything
|
||||
// while the role is still loading to avoid a flash for clinical users.
|
||||
const role = useActiveRole();
|
||||
const showClinical = role == null || hasClinicalAccess(role);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -416,6 +422,8 @@ export function PatientFormDialog({
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{showClinical && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
|
||||
{t("patientForm.currentVitals")}
|
||||
@@ -615,6 +623,8 @@ export function PatientFormDialog({
|
||||
)}
|
||||
rows={visits}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogPanel>
|
||||
|
||||
<DialogFooter className="flex-col items-stretch gap-2 sm:flex-row sm:items-center">
|
||||
|
||||
@@ -27,7 +27,7 @@ import {
|
||||
CommandPanel,
|
||||
} from "@/components/ui/command";
|
||||
import { Kbd, KbdGroup } from "@/components/ui/kbd";
|
||||
import { navItems } from "@/lib/nav";
|
||||
import { useActiveRole, visibleNavItems } from "@/lib/roles";
|
||||
|
||||
type CommandPaletteContextValue = { open: () => void };
|
||||
|
||||
@@ -50,6 +50,7 @@ export function useCommandPalette(): CommandPaletteContextValue {
|
||||
export function CommandPaletteProvider({ children }: { children: ReactNode }) {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const role = useActiveRole();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -70,7 +71,8 @@ export function CommandPaletteProvider({ children }: { children: ReactNode }) {
|
||||
value: "pages",
|
||||
label: t("nav.commandGroup"),
|
||||
// Flatten sub-pages so e.g. "Appointments & Schedule" is reachable.
|
||||
items: navItems.flatMap((item) =>
|
||||
// Filtered by role so reception can't jump to clinical pages.
|
||||
items: visibleNavItems(role).flatMap((item) =>
|
||||
item.subs?.length
|
||||
? item.subs.map((sub) => ({
|
||||
id: sub.id,
|
||||
@@ -89,7 +91,7 @@ export function CommandPaletteProvider({ children }: { children: ReactNode }) {
|
||||
),
|
||||
},
|
||||
],
|
||||
[t],
|
||||
[t, role],
|
||||
);
|
||||
|
||||
type Group = (typeof groups)[number];
|
||||
|
||||
@@ -15,17 +15,23 @@ import {
|
||||
} from "@/components/ui/card";
|
||||
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Tabs, TabsList, TabsTab } from "@/components/ui/tabs";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { notify } from "@/lib/toast";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Mode = "email" | "username";
|
||||
|
||||
export function LoginForm({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
// Staff provisioned by an admin sign in with a username; clinic owners sign in
|
||||
// with the email they signed up with. The tab picks which credential to use.
|
||||
const [mode, setMode] = useState<Mode>("email");
|
||||
const [identifier, setIdentifier] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
@@ -36,11 +42,19 @@ export function LoginForm({
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const { error: err } = await authClient.signIn.email({
|
||||
email: email.trim(),
|
||||
password,
|
||||
callbackURL: `${window.location.origin}/`,
|
||||
});
|
||||
const callbackURL = `${window.location.origin}/`;
|
||||
const { error: err } =
|
||||
mode === "email"
|
||||
? await authClient.signIn.email({
|
||||
email: identifier.trim(),
|
||||
password,
|
||||
callbackURL,
|
||||
})
|
||||
: await authClient.signIn.username({
|
||||
username: identifier.trim(),
|
||||
password,
|
||||
callbackURL,
|
||||
});
|
||||
|
||||
if (err) {
|
||||
const message = err.message ?? t("auth.login.error");
|
||||
@@ -68,18 +82,40 @@ export function LoginForm({
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<Tabs
|
||||
onValueChange={(value) => {
|
||||
setMode(value as Mode);
|
||||
setError(null);
|
||||
}}
|
||||
value={mode}
|
||||
>
|
||||
<TabsList className="w-full">
|
||||
<TabsTab className="flex-1" value="email">
|
||||
{t("auth.login.tabEmail")}
|
||||
</TabsTab>
|
||||
<TabsTab className="flex-1" value="username">
|
||||
{t("auth.login.tabUsername")}
|
||||
</TabsTab>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">
|
||||
{t("auth.login.emailLabel")}
|
||||
<FieldLabel htmlFor="identifier">
|
||||
{mode === "email"
|
||||
? t("auth.login.emailLabel")
|
||||
: t("auth.login.usernameLabel")}
|
||||
</FieldLabel>
|
||||
<Input
|
||||
autoComplete="email"
|
||||
id="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={t("auth.login.emailPlaceholder")}
|
||||
autoComplete={mode === "email" ? "email" : "username"}
|
||||
id="identifier"
|
||||
onChange={(e) => setIdentifier(e.target.value)}
|
||||
placeholder={
|
||||
mode === "email"
|
||||
? t("auth.login.emailPlaceholder")
|
||||
: t("auth.login.usernamePlaceholder")
|
||||
}
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
type={mode === "email" ? "email" : "text"}
|
||||
value={identifier}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="w-full">
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
"use client";
|
||||
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogPanel,
|
||||
DialogPopup,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ROLE_LABELS } from "@/lib/access";
|
||||
import { apiFetch } from "@/lib/api-client";
|
||||
import { PROVISIONABLE_ROLES } from "@/lib/roles";
|
||||
import { notify } from "@/lib/toast";
|
||||
|
||||
const MIN_PASSWORD = 12;
|
||||
const MIN_USERNAME = 3;
|
||||
|
||||
const selectClass =
|
||||
"h-9 w-full rounded-3xl border border-transparent bg-input/50 px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onCreated?: () => void;
|
||||
};
|
||||
|
||||
// Admin provisions a staff account in two steps: first the "invitation" (who +
|
||||
// what role), then the credentials (username + password) the employee uses to
|
||||
// sign in. Posts to /api/staff, which creates the account and adds them to the
|
||||
// active clinic via Better Auth.
|
||||
export function AddStaffDialog({ open, onOpenChange, onCreated }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [step, setStep] = useState<1 | 2>(1);
|
||||
const [name, setName] = useState("");
|
||||
const [role, setRole] = useState<string>("reception");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const reset = () => {
|
||||
setStep(1);
|
||||
setName("");
|
||||
setRole("reception");
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
setError(null);
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
const handleOpenChange = (next: boolean) => {
|
||||
if (!next) reset();
|
||||
onOpenChange(next);
|
||||
};
|
||||
|
||||
const submit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
|
||||
// Step 1 → advance to credentials.
|
||||
if (step === 1) {
|
||||
if (!name.trim()) {
|
||||
setError(t("settings.careTeam.add.nameRequired"));
|
||||
return;
|
||||
}
|
||||
setStep(2);
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 2 → create the account.
|
||||
if (username.trim().length < MIN_USERNAME) {
|
||||
setError(t("settings.careTeam.add.usernameTooShort", { count: MIN_USERNAME }));
|
||||
return;
|
||||
}
|
||||
if (password.length < MIN_PASSWORD) {
|
||||
setError(t("settings.careTeam.add.passwordTooShort", { count: MIN_PASSWORD }));
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await apiFetch("/api/staff", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
name: name.trim(),
|
||||
role,
|
||||
username: username.trim(),
|
||||
password,
|
||||
}),
|
||||
});
|
||||
notify.success(
|
||||
t("settings.careTeam.add.createdTitle"),
|
||||
t("settings.careTeam.add.createdBody", {
|
||||
name: name.trim(),
|
||||
username: username.trim().toLowerCase(),
|
||||
}),
|
||||
);
|
||||
onCreated?.();
|
||||
handleOpenChange(false);
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : t("settings.careTeam.add.error");
|
||||
setError(message);
|
||||
notify.error(t("settings.careTeam.add.errorTitle"), message);
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog onOpenChange={handleOpenChange} open={open}>
|
||||
<DialogPopup className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("settings.careTeam.add.title")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{step === 1
|
||||
? t("settings.careTeam.add.step1Description")
|
||||
: t("settings.careTeam.add.step2Description")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="contents" onSubmit={submit}>
|
||||
<DialogPanel className="flex flex-col gap-4">
|
||||
{error && (
|
||||
<p className="rounded-2xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{step === 1 ? (
|
||||
<>
|
||||
<Field className="w-full">
|
||||
<FieldLabel htmlFor="staff-name">
|
||||
{t("settings.careTeam.add.nameLabel")}
|
||||
</FieldLabel>
|
||||
<Input
|
||||
autoFocus
|
||||
id="staff-name"
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={t("settings.careTeam.add.namePlaceholder")}
|
||||
required
|
||||
value={name}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="w-full">
|
||||
<FieldLabel htmlFor="staff-role">
|
||||
{t("settings.careTeam.add.roleLabel")}
|
||||
</FieldLabel>
|
||||
<select
|
||||
className={selectClass}
|
||||
id="staff-role"
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
value={role}
|
||||
>
|
||||
{PROVISIONABLE_ROLES.map((r) => (
|
||||
<option key={r} value={r}>
|
||||
{ROLE_LABELS[r]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Field className="w-full">
|
||||
<FieldLabel htmlFor="staff-username">
|
||||
{t("settings.careTeam.add.usernameLabel")}
|
||||
</FieldLabel>
|
||||
<Input
|
||||
autoComplete="off"
|
||||
autoFocus
|
||||
id="staff-username"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={t("settings.careTeam.add.usernamePlaceholder")}
|
||||
required
|
||||
value={username}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="w-full">
|
||||
<FieldLabel htmlFor="staff-password">
|
||||
{t("settings.careTeam.add.passwordLabel")}
|
||||
</FieldLabel>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id="staff-password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
<FieldDescription>
|
||||
{t("settings.careTeam.add.passwordHint", { count: MIN_PASSWORD })}
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
</DialogPanel>
|
||||
|
||||
<DialogFooter>
|
||||
{step === 2 && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setStep(1);
|
||||
setError(null);
|
||||
}}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("settings.careTeam.add.back")}
|
||||
</Button>
|
||||
)}
|
||||
<DialogClose render={<Button type="button" variant="ghost" />}>
|
||||
{t("settings.careTeam.add.cancel")}
|
||||
</DialogClose>
|
||||
<Button disabled={submitting} type="submit">
|
||||
{step === 1
|
||||
? t("settings.careTeam.add.next")
|
||||
: submitting
|
||||
? t("settings.careTeam.add.creating")
|
||||
: t("settings.careTeam.add.create")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogPopup>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import { type FormEvent, useCallback, useEffect, useState } from "react";
|
||||
import { UserPlus, X } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { AddStaffDialog } from "@/components/settings/add-staff-dialog";
|
||||
import {
|
||||
SettingsCard,
|
||||
SettingsSection,
|
||||
@@ -11,27 +12,23 @@ import {
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ROLE_LABELS } from "@/lib/access";
|
||||
import { apiFetch } from "@/lib/api-client";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
|
||||
type Member = {
|
||||
// One row of /api/staff — clinic members joined to their user record (incl. the
|
||||
// username admin-provisioned staff sign in with).
|
||||
type StaffMember = {
|
||||
id: string;
|
||||
role: string;
|
||||
userId: string;
|
||||
user?: { name?: string | null; email?: string | null };
|
||||
role: string;
|
||||
name: string | null;
|
||||
email: string | null;
|
||||
username: string | null;
|
||||
};
|
||||
type Invite = {
|
||||
id: string;
|
||||
email: string;
|
||||
role?: string | null;
|
||||
status: string;
|
||||
};
|
||||
|
||||
const INVITE_ROLES = ["member", "admin", "viewer"] as const;
|
||||
|
||||
function roleLabel(role?: string | null): string {
|
||||
if (!role) return "Member";
|
||||
if (!role) return ROLE_LABELS.member;
|
||||
return (ROLE_LABELS as Record<string, string>)[role] ?? role;
|
||||
}
|
||||
|
||||
@@ -51,32 +48,24 @@ function initials(name?: string | null, email?: string | null): string {
|
||||
export function CareTeamPanel() {
|
||||
const { t } = useTranslation();
|
||||
const { data: session } = authClient.useSession();
|
||||
const [members, setMembers] = useState<Member[]>([]);
|
||||
const [invites, setInvites] = useState<Invite[]>([]);
|
||||
const [members, setMembers] = useState<StaffMember[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [notice, setNotice] = useState<string | null>(null);
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [role, setRole] = useState<(typeof INVITE_ROLES)[number]>("member");
|
||||
const [inviting, setInviting] = useState(false);
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const { data, error: err } =
|
||||
await authClient.organization.getFullOrganization();
|
||||
if (err || !data) {
|
||||
setError(err?.message ?? t("settings.careTeam.loadError"));
|
||||
try {
|
||||
const data = await apiFetch<StaffMember[]>("/api/staff");
|
||||
setMembers(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : t("settings.careTeam.loadError"),
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setMembers((data.members ?? []) as Member[]);
|
||||
setInvites(
|
||||
((data.invitations ?? []) as Invite[]).filter(
|
||||
(i) => i.status === "pending"
|
||||
)
|
||||
);
|
||||
setError(null);
|
||||
setLoading(false);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -86,36 +75,11 @@ export function CareTeamPanel() {
|
||||
const myRole = members.find((m) => m.userId === session?.user?.id)?.role;
|
||||
const canManage = myRole === "owner" || myRole === "admin";
|
||||
|
||||
const invite = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!email.trim() || inviting) return;
|
||||
setInviting(true);
|
||||
setNotice(null);
|
||||
setError(null);
|
||||
const { error: err } = await authClient.organization.inviteMember({
|
||||
email: email.trim(),
|
||||
role,
|
||||
});
|
||||
setInviting(false);
|
||||
if (err) {
|
||||
setError(err.message ?? t("settings.careTeam.inviteError"));
|
||||
return;
|
||||
}
|
||||
setEmail("");
|
||||
setNotice(t("settings.careTeam.inviteSent", { email: email.trim() }));
|
||||
void load();
|
||||
};
|
||||
|
||||
const removeMember = async (memberId: string) => {
|
||||
await authClient.organization.removeMember({ memberIdOrEmail: memberId });
|
||||
void load();
|
||||
};
|
||||
|
||||
const cancelInvite = async (invitationId: string) => {
|
||||
await authClient.organization.cancelInvitation({ invitationId });
|
||||
void load();
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
description={t("settings.careTeam.description")}
|
||||
@@ -126,46 +90,14 @@ export function CareTeamPanel() {
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{notice && (
|
||||
<p className="rounded-2xl bg-primary/10 px-3 py-2 text-sm text-primary">
|
||||
{notice}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{canManage && (
|
||||
<SettingsCard className="p-4">
|
||||
<form
|
||||
className="flex flex-col gap-2 sm:flex-row sm:items-center"
|
||||
onSubmit={invite}
|
||||
>
|
||||
<Input
|
||||
className="flex-1"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={t("settings.careTeam.invitePlaceholder")}
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
/>
|
||||
<select
|
||||
className="h-9 rounded-3xl border border-transparent bg-input/50 px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30"
|
||||
onChange={(e) =>
|
||||
setRole(e.target.value as (typeof INVITE_ROLES)[number])
|
||||
}
|
||||
value={role}
|
||||
>
|
||||
{INVITE_ROLES.map((r) => (
|
||||
<option key={r} value={r}>
|
||||
{roleLabel(r)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button disabled={inviting} type="submit">
|
||||
{inviting
|
||||
? t("settings.careTeam.inviting")
|
||||
: t("settings.careTeam.invite")}
|
||||
</Button>
|
||||
</form>
|
||||
</SettingsCard>
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setAdding(true)} type="button">
|
||||
<UserPlus className="size-4" />
|
||||
{t("settings.careTeam.addMember")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<SettingsCard className="divide-y divide-border">
|
||||
@@ -176,25 +108,28 @@ export function CareTeamPanel() {
|
||||
) : (
|
||||
members.map((m) => {
|
||||
const isSelf = m.userId === session?.user?.id;
|
||||
// Prefer the login username; fall back to email for owners who
|
||||
// signed up by email.
|
||||
const secondary = m.username ? `@${m.username}` : m.email;
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-3" key={m.id}>
|
||||
<Avatar className="size-8">
|
||||
<AvatarFallback>
|
||||
{initials(m.user?.name, m.user?.email)}
|
||||
{initials(m.name, m.email)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{m.user?.name || m.user?.email || m.userId}
|
||||
{m.name || m.email || m.userId}
|
||||
{isSelf && (
|
||||
<span className="ml-1 text-xs text-muted-foreground">
|
||||
{t("settings.careTeam.you")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{m.user?.email && (
|
||||
{secondary && (
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
{m.user.email}
|
||||
{secondary}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -218,33 +153,12 @@ export function CareTeamPanel() {
|
||||
)}
|
||||
</SettingsCard>
|
||||
|
||||
{invites.length > 0 && (
|
||||
<SettingsCard className="divide-y divide-border">
|
||||
<p className="px-4 py-2.5 text-xs font-medium tracking-wide text-muted-foreground uppercase">
|
||||
{t("settings.careTeam.pendingInvitations")}
|
||||
</p>
|
||||
{invites.map((inv) => (
|
||||
<div className="flex items-center gap-3 px-4 py-3" key={inv.id}>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm">{inv.email}</p>
|
||||
</div>
|
||||
<Badge className="capitalize" variant="outline">
|
||||
{roleLabel(inv.role)}
|
||||
</Badge>
|
||||
{canManage && (
|
||||
<Button
|
||||
aria-label={t("settings.careTeam.cancelInvitation")}
|
||||
onClick={() => cancelInvite(inv.id)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</SettingsCard>
|
||||
{canManage && (
|
||||
<AddStaffDialog
|
||||
onCreated={() => void load()}
|
||||
onOpenChange={setAdding}
|
||||
open={adding}
|
||||
/>
|
||||
)}
|
||||
</SettingsSection>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
import { SigningPanel } from "@/components/settings/settings-billing";
|
||||
import { CareTeamPanel } from "@/components/settings/settings-care-team";
|
||||
import { ProfilePanel } from "@/components/settings/settings-preferences";
|
||||
import { useActiveRole } from "@/lib/roles";
|
||||
|
||||
const TABS = [
|
||||
{ id: "profile", labelKey: "settings.tabs.profile" },
|
||||
@@ -41,20 +42,27 @@ function PlaceholderPanel({
|
||||
|
||||
export function SettingsView() {
|
||||
const { t } = useTranslation();
|
||||
const role = useActiveRole();
|
||||
const [tab, setTab] = useState<Tab>("profile");
|
||||
|
||||
// Only clinic owners/admins manage clinic-wide settings (care team, records,
|
||||
// signing, developers). Everyone else gets their own profile only.
|
||||
const isAdmin = role === "owner" || role === "admin";
|
||||
const visibleTabs = isAdmin ? TABS : TABS.filter((item) => item.id === "profile");
|
||||
const activeTab = visibleTabs.some((item) => item.id === tab) ? tab : "profile";
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-3xl px-6 py-10">
|
||||
<div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
{t(`settings.tabs.${tab}`)}
|
||||
{t(`settings.tabs.${activeTab}`)}
|
||||
</h1>
|
||||
<nav className="flex flex-wrap items-center gap-1">
|
||||
{TABS.map((item) => (
|
||||
{visibleTabs.map((item) => (
|
||||
<button
|
||||
className={cn(
|
||||
"rounded-lg px-3 py-1.5 text-sm transition-colors",
|
||||
tab === item.id
|
||||
activeTab === item.id
|
||||
? "bg-muted text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
@@ -69,16 +77,16 @@ export function SettingsView() {
|
||||
</div>
|
||||
|
||||
<div className="mt-10 space-y-12">
|
||||
{tab === "profile" && <ProfilePanel />}
|
||||
{tab === "records" && (
|
||||
{activeTab === "profile" && <ProfilePanel />}
|
||||
{activeTab === "records" && (
|
||||
<PlaceholderPanel
|
||||
description={t("settings.records.description")}
|
||||
title={t("settings.tabs.records")}
|
||||
/>
|
||||
)}
|
||||
{tab === "signing" && <SigningPanel />}
|
||||
{tab === "careTeam" && <CareTeamPanel />}
|
||||
{tab === "developers" && (
|
||||
{activeTab === "signing" && <SigningPanel />}
|
||||
{activeTab === "careTeam" && <CareTeamPanel />}
|
||||
{activeTab === "developers" && (
|
||||
<PlaceholderPanel
|
||||
description={t("settings.developers.description")}
|
||||
title={t("settings.tabs.developers")}
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { navItems } from "@/lib/nav";
|
||||
import { useActiveRole, visibleNavItems } from "@/lib/roles";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -26,9 +26,11 @@ import { NavUser } from "@/components/sidebar-02/nav-user";
|
||||
export function DashboardSidebar() {
|
||||
const { state } = useSidebar();
|
||||
const { t } = useTranslation();
|
||||
const role = useActiveRole();
|
||||
const isCollapsed = state === "collapsed";
|
||||
|
||||
const dashboardRoutes: Route[] = navItems.map((item) => ({
|
||||
// Hide clinical nav from non-clinical roles (e.g. reception). See lib/roles.ts.
|
||||
const dashboardRoutes: Route[] = visibleNavItems(role).map((item) => ({
|
||||
id: item.id,
|
||||
title: t(item.labelKey),
|
||||
icon: <item.icon className="size-4" />,
|
||||
|
||||
+21
-1
@@ -42,6 +42,24 @@ export const member = ac.newRole({
|
||||
task: ["read", "write", "delete"],
|
||||
});
|
||||
|
||||
// doctor (clinician): mirrors backend/src/lib/access.ts — same clinical access
|
||||
// as `member`.
|
||||
export const doctor = ac.newRole({
|
||||
...memberAc.statements,
|
||||
patient: ["read", "write"],
|
||||
appointment: ["read", "write", "delete"],
|
||||
prescription: ["read", "write", "delete"],
|
||||
task: ["read", "write", "delete"],
|
||||
});
|
||||
|
||||
// reception (front desk): scheduling + registration only, no clinical records.
|
||||
export const reception = ac.newRole({
|
||||
...memberAc.statements,
|
||||
patient: ["read", "write"],
|
||||
appointment: ["read", "write", "delete"],
|
||||
task: ["read", "write"],
|
||||
});
|
||||
|
||||
export const viewer = ac.newRole({
|
||||
patient: ["read"],
|
||||
appointment: ["read"],
|
||||
@@ -49,12 +67,14 @@ export const viewer = ac.newRole({
|
||||
task: ["read"],
|
||||
});
|
||||
|
||||
export const roles = { owner, admin, member, viewer };
|
||||
export const roles = { owner, admin, doctor, reception, member, viewer };
|
||||
|
||||
// Human-readable labels for the role keys used in the UI.
|
||||
export const ROLE_LABELS: Record<keyof typeof roles, string> = {
|
||||
owner: "Owner",
|
||||
admin: "Admin",
|
||||
doctor: "Doctor",
|
||||
reception: "Reception",
|
||||
member: "Clinician",
|
||||
viewer: "Viewer",
|
||||
};
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { organizationClient } from "better-auth/client/plugins";
|
||||
import {
|
||||
organizationClient,
|
||||
usernameClient,
|
||||
} from "better-auth/client/plugins";
|
||||
import { createAuthClient } from "better-auth/react";
|
||||
|
||||
import { ac, roles } from "@/lib/access";
|
||||
@@ -8,7 +11,9 @@ import { ac, roles } from "@/lib/access";
|
||||
// cookie set by the backend is included on every request.
|
||||
export const authClient = createAuthClient({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000",
|
||||
plugins: [organizationClient({ ac, roles })],
|
||||
// usernameClient enables signIn.username(...) so admin-provisioned staff can
|
||||
// log in with a username; organizationClient powers clinics + RBAC.
|
||||
plugins: [usernameClient(), organizationClient({ ac, roles })],
|
||||
});
|
||||
|
||||
export const {
|
||||
|
||||
@@ -11,8 +11,12 @@
|
||||
"login": {
|
||||
"title": "Welcome back",
|
||||
"subtitle": "Sign in to your clinician account",
|
||||
"tabEmail": "Email",
|
||||
"tabUsername": "Username",
|
||||
"emailLabel": "Email",
|
||||
"emailPlaceholder": "you@clinic.org",
|
||||
"usernameLabel": "Username",
|
||||
"usernamePlaceholder": "jdoe",
|
||||
"passwordLabel": "Password",
|
||||
"forgotPassword": "Forgot your password?",
|
||||
"submit": "Sign in",
|
||||
@@ -695,18 +699,36 @@
|
||||
},
|
||||
"careTeam": {
|
||||
"title": "Care team",
|
||||
"description": "Clinicians with access to this clinic",
|
||||
"description": "Staff with access to this clinic",
|
||||
"loadError": "Could not load the care team.",
|
||||
"invitePlaceholder": "colleague@clinic.org",
|
||||
"inviting": "Sending…",
|
||||
"invite": "Invite",
|
||||
"inviteError": "Could not send the invitation.",
|
||||
"inviteSent": "Invitation sent to {{email}}.",
|
||||
"loading": "Loading care team…",
|
||||
"you": "(you)",
|
||||
"pendingInvitations": "Pending invitations",
|
||||
"addMember": "Add team member",
|
||||
"removeMember": "Remove member",
|
||||
"cancelInvitation": "Cancel invitation"
|
||||
"add": {
|
||||
"title": "Add team member",
|
||||
"step1Description": "Who are you adding, and what can they do?",
|
||||
"step2Description": "Set the username and password they'll sign in with.",
|
||||
"nameLabel": "Full name",
|
||||
"namePlaceholder": "Jane Okafor",
|
||||
"nameRequired": "Enter the person's name.",
|
||||
"roleLabel": "Role",
|
||||
"usernameLabel": "Username",
|
||||
"usernamePlaceholder": "jokafor",
|
||||
"usernameTooShort": "Username must be at least {{count}} characters.",
|
||||
"passwordLabel": "Password",
|
||||
"passwordHint": "Must be at least {{count}} characters long.",
|
||||
"passwordTooShort": "Password must be at least {{count}} characters.",
|
||||
"back": "Back",
|
||||
"cancel": "Cancel",
|
||||
"next": "Next",
|
||||
"create": "Create account",
|
||||
"creating": "Creating…",
|
||||
"createdTitle": "Account created",
|
||||
"createdBody": "{{name}} can now sign in with the username {{username}}.",
|
||||
"error": "Could not create the account.",
|
||||
"errorTitle": "Could not add member"
|
||||
}
|
||||
},
|
||||
"signing": {
|
||||
"keyTitle": "Signing key",
|
||||
|
||||
+27
-3
@@ -18,6 +18,8 @@ export type NavSubItem = {
|
||||
labelKey: string;
|
||||
icon?: LucideIcon;
|
||||
link: string;
|
||||
// Hidden from non-clinical roles (e.g. reception). See lib/roles.ts.
|
||||
requiresClinical?: boolean;
|
||||
};
|
||||
|
||||
export type NavItem = {
|
||||
@@ -28,13 +30,21 @@ export type NavItem = {
|
||||
link: string;
|
||||
// Optional sub-pages revealed under this item in the sidebar.
|
||||
subs?: NavSubItem[];
|
||||
// Hidden from non-clinical roles (e.g. reception). See lib/roles.ts.
|
||||
requiresClinical?: boolean;
|
||||
};
|
||||
|
||||
// Single source of truth for the primary navigation. Consumed by the sidebar
|
||||
// (components/sidebar-02/app-sidebar.tsx) and the command palette
|
||||
// (components/command-palette.tsx) so the two never drift.
|
||||
export const navItems: NavItem[] = [
|
||||
{ id: "new-chat", labelKey: "nav.newChat", icon: Plus, link: "/" },
|
||||
{
|
||||
id: "new-chat",
|
||||
labelKey: "nav.newChat",
|
||||
icon: Plus,
|
||||
link: "/",
|
||||
requiresClinical: true,
|
||||
},
|
||||
{
|
||||
id: "patients",
|
||||
labelKey: "nav.patients",
|
||||
@@ -53,6 +63,7 @@ export const navItems: NavItem[] = [
|
||||
labelKey: "nav.prescriptions",
|
||||
icon: Pill,
|
||||
link: "/prescriptions",
|
||||
requiresClinical: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -61,10 +72,23 @@ export const navItems: NavItem[] = [
|
||||
labelKey: "nav.analysis",
|
||||
icon: BarChart3,
|
||||
link: "/analysis",
|
||||
requiresClinical: true,
|
||||
},
|
||||
{ id: "messages", labelKey: "nav.messages", icon: Mail, link: "/messages" },
|
||||
{ id: "notes", labelKey: "nav.notes", icon: NotebookPen, link: "/notes" },
|
||||
{
|
||||
id: "notes",
|
||||
labelKey: "nav.notes",
|
||||
icon: NotebookPen,
|
||||
link: "/notes",
|
||||
requiresClinical: true,
|
||||
},
|
||||
{ id: "tasks", labelKey: "nav.tasks", icon: ListTodo, link: "/tasks" },
|
||||
{ id: "activity", labelKey: "nav.activity", icon: History, link: "/activity" },
|
||||
{
|
||||
id: "activity",
|
||||
labelKey: "nav.activity",
|
||||
icon: History,
|
||||
link: "/activity",
|
||||
requiresClinical: true,
|
||||
},
|
||||
{ id: "settings", labelKey: "nav.settings", icon: Settings, link: "/settings" },
|
||||
];
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { type roles } from "@/lib/access";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { type NavItem, navItems } from "@/lib/nav";
|
||||
|
||||
export type RoleKey = keyof typeof roles;
|
||||
|
||||
// Roles an admin can assign when provisioning staff (owner is excluded — the
|
||||
// clinic creator is the sole owner). Mirrors the backend's PROVISIONABLE_ROLES.
|
||||
export const PROVISIONABLE_ROLES: RoleKey[] = [
|
||||
"admin",
|
||||
"doctor",
|
||||
"reception",
|
||||
"viewer",
|
||||
];
|
||||
|
||||
// The current user's role in the active clinic (null while loading or if they
|
||||
// aren't a member). Re-fetches when the active organization changes.
|
||||
export function useActiveRole(): string | null {
|
||||
const { data: activeOrg } = authClient.useActiveOrganization();
|
||||
const [role, setRole] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
authClient.organization
|
||||
.getActiveMember()
|
||||
.then(({ data }) => {
|
||||
if (!cancelled) setRole(data?.role ?? null);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setRole(null);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [activeOrg?.id]);
|
||||
|
||||
return role;
|
||||
}
|
||||
|
||||
// Whether a role may see clinical records (AI lookup, prescriptions, notes,
|
||||
// analysis). Driven by Better Auth permissions so it stays in lock-step with
|
||||
// lib/access.ts: the `reception` role has no `prescription` statement, so this
|
||||
// is false for them and true for every clinical role.
|
||||
export function hasClinicalAccess(role: string | null | undefined): boolean {
|
||||
if (!role) return false;
|
||||
try {
|
||||
return authClient.organization.checkRolePermission({
|
||||
role: role as RoleKey,
|
||||
permissions: { prescription: ["read"] },
|
||||
});
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Where a role lands after sign-in. Reception has no AI chat, so they start on
|
||||
// the appointments board; clinical roles start on the chat home.
|
||||
export function defaultLandingFor(role: string | null | undefined): string {
|
||||
return hasClinicalAccess(role) ? "/" : "/appointments";
|
||||
}
|
||||
|
||||
// Clinical-only routes — a non-clinical role (reception) is redirected away.
|
||||
// Keyed by path; "/" matches exactly, others match themselves + nested paths.
|
||||
const CLINICAL_ROUTES = [
|
||||
"/",
|
||||
"/prescriptions",
|
||||
"/analysis",
|
||||
"/notes",
|
||||
"/activity",
|
||||
];
|
||||
|
||||
// Whether `path` is reachable by `role`. Returns true while the role is still
|
||||
// loading to avoid redirect flicker; the authoritative check is the backend's
|
||||
// per-route RBAC (which returns 403 regardless).
|
||||
export function canAccessRoute(
|
||||
path: string,
|
||||
role: string | null | undefined,
|
||||
): boolean {
|
||||
if (role == null) return true;
|
||||
if (hasClinicalAccess(role)) return true;
|
||||
return !CLINICAL_ROUTES.some((r) =>
|
||||
r === "/" ? path === "/" : path === r || path.startsWith(`${r}/`),
|
||||
);
|
||||
}
|
||||
|
||||
// Nav items visible to a role, with clinical-only items (and sub-items) removed
|
||||
// for non-clinical roles. While the role is loading we optimistically show
|
||||
// everything (clinical users are the common case) — the flash is sub-second.
|
||||
export function visibleNavItems(role: string | null | undefined): NavItem[] {
|
||||
if (role == null) return navItems;
|
||||
const clinical = hasClinicalAccess(role);
|
||||
return navItems
|
||||
.filter((item) => !item.requiresClinical || clinical)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
subs: item.subs?.filter((sub) => !sub.requiresClinical || clinical),
|
||||
}));
|
||||
}
|
||||
Reference in New Issue
Block a user