mirror of
https://github.com/temetro/temetro.git
synced 2026-08-09 01:59:30 +00:00
Khalid Abdi
6213da9477
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>
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
SettingsCard,
|
|
SettingsSection,
|
|
} from "@/components/settings/settings-parts";
|
|
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" },
|
|
{ id: "records", labelKey: "settings.tabs.records" },
|
|
{ id: "signing", labelKey: "settings.tabs.signing" },
|
|
{ id: "careTeam", labelKey: "settings.tabs.careTeam" },
|
|
{ id: "developers", labelKey: "settings.tabs.developers" },
|
|
] as const;
|
|
|
|
type Tab = (typeof TABS)[number]["id"];
|
|
|
|
function PlaceholderPanel({
|
|
title,
|
|
description,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<SettingsSection description={description} title={title}>
|
|
<SettingsCard className="flex items-center justify-center p-12">
|
|
<p className="text-sm text-muted-foreground">{t("settings.empty")}</p>
|
|
</SettingsCard>
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
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.${activeTab}`)}
|
|
</h1>
|
|
<nav className="flex flex-wrap items-center gap-1">
|
|
{visibleTabs.map((item) => (
|
|
<button
|
|
className={cn(
|
|
"rounded-lg px-3 py-1.5 text-sm transition-colors",
|
|
activeTab === item.id
|
|
? "bg-muted text-foreground"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
key={item.id}
|
|
onClick={() => setTab(item.id)}
|
|
type="button"
|
|
>
|
|
{t(item.labelKey)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="mt-10 space-y-12">
|
|
{activeTab === "profile" && <ProfilePanel />}
|
|
{activeTab === "records" && (
|
|
<PlaceholderPanel
|
|
description={t("settings.records.description")}
|
|
title={t("settings.tabs.records")}
|
|
/>
|
|
)}
|
|
{activeTab === "signing" && <SigningPanel />}
|
|
{activeTab === "careTeam" && <CareTeamPanel />}
|
|
{activeTab === "developers" && (
|
|
<PlaceholderPanel
|
|
description={t("settings.developers.description")}
|
|
title={t("settings.tabs.developers")}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|