frontend: fix onboarding bounce, mobile sidebar btn, notif deep-links, analysis header

- Fix clinic onboarding loop: refresh session after setActive before navigating,
  surface setActive errors, and guard AppAuthGuard's onboarding redirect race (#1)
- Add a mobile-only floating top-right SidebarTrigger so the sidebar is reachable
  when the offcanvas sidebar is closed on phones (#5)
- Make notifications clickable: navigate to the source (conversation/patient) and
  mark read; MessagesView/PatientsView honor ?conversation= / ?file= deep links (#6)
- Analysis page: add an Overview header with a time-range segmented control and a
  Customize popover that shows/hides sections; range slices month-based charts (#10)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/app/(app)/layout.tsx

@@ -1,6 +1,7 @@
 import { AppAuthGuard } from "@/components/auth/app-auth-guard";
 import { CommandPaletteProvider } from "@/components/command-palette";
 import { DashboardSidebar } from "@/components/sidebar-02/app-sidebar";
+import { MobileSidebarTrigger } from "@/components/sidebar-02/mobile-sidebar-trigger";
 import { SidebarProvider } from "@/components/ui/sidebar";
 
 export default function AppLayout({
@@ -14,6 +15,7 @@ export default function AppLayout({
         <SidebarProvider>
           <div className="relative flex h-dvh w-full">
             <DashboardSidebar />
+            <MobileSidebarTrigger />
             {children}
           </div>
         </SidebarProvider>

frontend/components/analysis/analysis-view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SlidersHorizontal } from "lucide-react";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -11,10 +12,46 @@ import { BarXAxis } from "@/components/charts/bar-x-axis";
 import { Grid } from "@/components/charts/grid";
 import { ChartTooltip } from "@/components/charts/tooltip";
 import { XAxis } from "@/components/charts/x-axis";
+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
 import { type Analytics, getAnalytics } from "@/lib/analytics";
 import { type Appointment, listAppointments } from "@/lib/appointments";
 import { formatMoney } from "@/lib/invoices";
+import { cn } from "@/lib/utils";
+
+// Time-range filter for the Overview header. Month-based series are sliced to
+// the trailing window; sub-month ranges (30d/today) fall back to the latest
+// point since the backend has no finer-grained series yet.
+const RANGES = ["all", "12m", "3m", "30d", "today"] as const;
+type Range = (typeof RANGES)[number];
+const RANGE_MONTHS: Record<Range, number | null> = {
+  all: null,
+  "12m": 12,
+  "3m": 3,
+  "30d": 1,
+  today: 1,
+};
+function sliceMonths<T>(arr: T[], range: Range): T[] {
+  const months = RANGE_MONTHS[range];
+  return months == null ? arr : arr.slice(-months);
+}
+
+// The Overview sections the Customize popover can show/hide.
+const SECTION_KEYS = [
+  "visits",
+  "patients",
+  "trends",
+  "earnings",
+  "appointments",
+  "prescriptions",
+] as const;
+type SectionKey = (typeof SECTION_KEYS)[number];
 
 // Clinic analytics computed on the server from real data (patients,
 // appointments, prescriptions, tasks). No fabricated financials — temetro has no
@@ -91,6 +128,15 @@ export function AnalysisView() {
   const { t } = useTranslation();
   const [data, setData] = useState<Analytics | null>(null);
   const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [range, setRange] = useState<Range>("30d");
+  const [visible, setVisible] = useState<Record<SectionKey, boolean>>({
+    visits: true,
+    patients: true,
+    trends: true,
+    earnings: true,
+    appointments: true,
+    prescriptions: true,
+  });
 
   useEffect(() => {
     let active = true;
@@ -135,7 +181,11 @@ export function AnalysisView() {
     }
     return months;
   }, [appointments]);
-  const visitTotal = visitData.reduce((sum, p) => sum + p.visits, 0);
+  const visitDataRanged = useMemo(
+    () => sliceMonths(visitData, range),
+    [visitData, range],
+  );
+  const visitTotal = visitDataRanged.reduce((sum, p) => sum + p.visits, 0);
 
   // The area chart needs real Date x-values: synthesise one month per point,
   // ending with the current month.
@@ -162,86 +212,162 @@ export function AnalysisView() {
     [data],
   );
 
-  const monthTotal = monthData.reduce((sum, p) => sum + p.patients, 0);
+  const monthDataRanged = useMemo(
+    () => sliceMonths(monthData, range),
+    [monthData, range],
+  );
+  const earningsByMonthRanged = sliceMonths(
+    data?.earnings.byMonth ?? [],
+    range,
+  );
+  const monthTotal = monthDataRanged.reduce((sum, p) => sum + p.patients, 0);
   const weekdayTotal = weekdayData.reduce((sum, p) => sum + p.appointments, 0);
 
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-10">
-      <div>
-        <h1 className="font-semibold text-2xl tracking-tight">
-          {t("analysis.title")}
-        </h1>
-        <p className="text-muted-foreground text-sm">{t("analysis.subtitle")}</p>
+      {/* Overview header: title + time-range segmented control + Customize. */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="font-semibold text-2xl tracking-tight">
+            {t("analysis.title")}
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            {t("analysis.subtitle")}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-0.5 rounded-full border bg-muted/40 p-1">
+            {RANGES.map((r) => (
+              <button
+                className={cn(
+                  "rounded-full px-3 py-1 font-medium text-sm transition-colors",
+                  range === r
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                key={r}
+                onClick={() => setRange(r)}
+                type="button"
+              >
+                {t(`analysis.range.${r}`)}
+              </button>
+            ))}
+          </div>
+          <Popover>
+            <PopoverTrigger
+              render={
+                <Button size="sm" variant="outline">
+                  <SlidersHorizontal className="size-4" />
+                  {t("analysis.customize")}
+                </Button>
+              }
+            />
+            <PopoverPopup className="w-56">
+              <p className="mb-2 font-medium text-sm">
+                {t("analysis.customizeTitle")}
+              </p>
+              <div className="flex flex-col gap-2">
+                {SECTION_KEYS.map((key) => (
+                  <label
+                    className="flex items-center justify-between gap-3 text-sm"
+                    key={key}
+                  >
+                    <span className="text-muted-foreground">
+                      {t(`analysis.section.${key}`)}
+                    </span>
+                    <Switch
+                      checked={visible[key]}
+                      onCheckedChange={(checked) =>
+                        setVisible((prev) => ({ ...prev, [key]: checked }))
+                      }
+                    />
+                  </label>
+                ))}
+              </div>
+            </PopoverPopup>
+          </Popover>
+        </div>
       </div>
 
-      <section className="flex flex-col gap-3">
-        <div>
-          <h2 className="font-semibold text-lg tracking-tight">
-            {t("analysis.area.title")}
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            {t("analysis.area.subtitle")}
-          </p>
-        </div>
-        <Card className="gap-3 p-4">
-          <div className="flex items-baseline justify-between gap-2">
-            <span className="text-muted-foreground text-sm">
-              {t("analysis.area.label")}
-            </span>
-            <span className="font-semibold text-foreground text-xl tabular-nums">
-              {visitTotal}
-            </span>
+      {visible.visits && (
+        <section className="flex flex-col gap-3">
+          <div>
+            <h2 className="font-semibold text-lg tracking-tight">
+              {t("analysis.area.title")}
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              {t("analysis.area.subtitle")}
+            </p>
           </div>
-          <AreaChart aspectRatio="3 / 1" data={visitData}>
-            <Grid horizontal />
-            <Area dataKey="visits" fill="var(--chart-line-primary)" />
-            <XAxis numTicks={Math.max(visitData.length, 2)} tickMode="data" />
-            <ChartTooltip showDatePill={false} />
-          </AreaChart>
-        </Card>
-      </section>
-
-      <Section
-        columns={3}
-        description={t("analysis.patientVolume.description")}
-        title={t("analysis.patientVolume.title")}
-      >
-        <StatCard
-          label={t("analysis.patientVolume.total")}
-          value={n(data?.patients.total)}
-        />
-        <StatCard
-          label={t("analysis.patientVolume.newThisMonth")}
-          value={n(data?.patients.newThisMonth)}
-        />
-        <StatCard
-          label={t("analysis.patientVolume.active")}
-          value={n(data?.patients.active)}
-        />
-      </Section>
-
-      <section className="flex flex-col gap-3">
-        <div>
-          <h2 className="font-semibold text-lg tracking-tight">
-            {t("analysis.charts.title")}
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            {t("analysis.charts.subtitle")}
-          </p>
-        </div>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <ChartCard
-            title={t("analysis.charts.patientGrowthTitle")}
-            total={monthTotal}
-          >
-            <AreaChart aspectRatio="2 / 1" data={monthData}>
+          <Card className="gap-3 p-4">
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-muted-foreground text-sm">
+                {t("analysis.area.label")}
+              </span>
+              <span className="font-semibold text-foreground text-xl tabular-nums">
+                {visitTotal}
+              </span>
+            </div>
+            <AreaChart aspectRatio="3 / 1" data={visitDataRanged}>
               <Grid horizontal />
-              <Area dataKey="patients" fill="var(--chart-line-primary)" />
-              {/* One tick per month so every point is labelled. */}
-              <XAxis numTicks={Math.max(monthData.length, 2)} tickMode="data" />
+              <Area dataKey="visits" fill="var(--chart-line-primary)" />
+              <XAxis
+                numTicks={Math.max(visitDataRanged.length, 2)}
+                tickMode="data"
+              />
               <ChartTooltip showDatePill={false} />
             </AreaChart>
-          </ChartCard>
+          </Card>
+        </section>
+      )}
+
+      {visible.patients && (
+        <Section
+          columns={3}
+          description={t("analysis.patientVolume.description")}
+          title={t("analysis.patientVolume.title")}
+        >
+          <StatCard
+            label={t("analysis.patientVolume.total")}
+            value={n(data?.patients.total)}
+          />
+          <StatCard
+            label={t("analysis.patientVolume.newThisMonth")}
+            value={n(data?.patients.newThisMonth)}
+          />
+          <StatCard
+            label={t("analysis.patientVolume.active")}
+            value={n(data?.patients.active)}
+          />
+        </Section>
+      )}
+
+      {visible.trends && (
+        <section className="flex flex-col gap-3">
+          <div>
+            <h2 className="font-semibold text-lg tracking-tight">
+              {t("analysis.charts.title")}
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              {t("analysis.charts.subtitle")}
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <ChartCard
+              title={t("analysis.charts.patientGrowthTitle")}
+              total={monthTotal}
+            >
+              <AreaChart aspectRatio="2 / 1" data={monthDataRanged}>
+                <Grid horizontal />
+                <Area dataKey="patients" fill="var(--chart-line-primary)" />
+                {/* One tick per month so every point is labelled. */}
+                <XAxis
+                  numTicks={Math.max(monthDataRanged.length, 2)}
+                  tickMode="data"
+                />
+                <ChartTooltip showDatePill={false} />
+              </AreaChart>
+            </ChartCard>
           <ChartCard
             title={t("analysis.charts.weeklyAppointmentsTitle")}
             total={weekdayTotal}
@@ -255,9 +381,11 @@ export function AnalysisView() {
               <ChartTooltip showDatePill={false} />
             </BarChart>
           </ChartCard>
-        </div>
-      </section>
+          </div>
+        </section>
+      )}
 
+      {visible.earnings && (
       <section className="flex flex-col gap-3">
         <div>
           <h2 className="font-semibold text-lg tracking-tight">
@@ -285,47 +413,52 @@ export function AnalysisView() {
           <span className="text-muted-foreground text-sm">
             {t("analysis.earnings.byMonth")}
           </span>
-          <EarningsChart data={data?.earnings.byMonth ?? []} />
+          <EarningsChart data={earningsByMonthRanged} />
         </Card>
       </section>
+      )}
 
-      <Section
-        columns={4}
-        description={t("analysis.appointments.description")}
-        title={t("analysis.appointments.title")}
-      >
-        <StatCard
-          label={t("analysis.appointments.thisWeek")}
-          value={n(data?.appointments.thisWeek)}
-        />
-        <StatCard
-          label={t("analysis.appointments.upcoming")}
-          value={n(data?.appointments.upcoming)}
-        />
-        <StatCard
-          label={t("analysis.appointments.completed")}
-          value={n(data?.appointments.completed)}
-        />
-        <StatCard
-          label={t("analysis.appointments.cancelled")}
-          value={n(data?.appointments.cancelled)}
-        />
-      </Section>
+      {visible.appointments && (
+        <Section
+          columns={4}
+          description={t("analysis.appointments.description")}
+          title={t("analysis.appointments.title")}
+        >
+          <StatCard
+            label={t("analysis.appointments.thisWeek")}
+            value={n(data?.appointments.thisWeek)}
+          />
+          <StatCard
+            label={t("analysis.appointments.upcoming")}
+            value={n(data?.appointments.upcoming)}
+          />
+          <StatCard
+            label={t("analysis.appointments.completed")}
+            value={n(data?.appointments.completed)}
+          />
+          <StatCard
+            label={t("analysis.appointments.cancelled")}
+            value={n(data?.appointments.cancelled)}
+          />
+        </Section>
+      )}
 
-      <Section
-        columns={2}
-        description={t("analysis.prescriptions.description")}
-        title={t("analysis.prescriptions.title")}
-      >
-        <StatCard
-          label={t("analysis.prescriptions.total")}
-          value={n(data?.prescriptions.total)}
-        />
-        <StatCard
-          label={t("analysis.prescriptions.active")}
-          value={n(data?.prescriptions.active)}
-        />
-      </Section>
+      {visible.prescriptions && (
+        <Section
+          columns={2}
+          description={t("analysis.prescriptions.description")}
+          title={t("analysis.prescriptions.title")}
+        >
+          <StatCard
+            label={t("analysis.prescriptions.total")}
+            value={n(data?.prescriptions.total)}
+          />
+          <StatCard
+            label={t("analysis.prescriptions.active")}
+            value={n(data?.prescriptions.active)}
+          />
+        </Section>
+      )}
 
       <Section
         columns={2}

frontend/components/auth/app-auth-guard.tsx

@@ -34,12 +34,23 @@ export function AppAuthGuard({ children }: { children: ReactNode }) {
 
     // Signed in but no active clinic selected yet.
     if (orgsPending) return;
+    // A setActive is already in flight (e.g. just after creating a clinic) — wait
+    // for it rather than treating the momentarily-empty list as "no clinics" and
+    // bouncing the user back to onboarding.
+    if (settingActive.current) return;
     const first = orgs?.[0];
     if (first) {
-      if (!settingActive.current) {
-        settingActive.current = true;
-        void authClient.organization.setActive({ organizationId: first.id });
-      }
+      settingActive.current = true;
+      void authClient.organization
+        .setActive({ organizationId: first.id })
+        // Refresh the cached session so activeOrganizationId is populated and the
+        // guard re-renders into the ready state.
+        .then(() =>
+          authClient.getSession({ query: { disableCookieCache: true } }),
+        )
+        .catch(() => {
+          settingActive.current = false;
+        });
     } else {
       router.replace("/onboarding");
     }

frontend/components/clinic/create-clinic-form.tsx

@@ -51,7 +51,22 @@ export function CreateClinicForm({
       return;
     }
 
-    await authClient.organization.setActive({ organizationId: org.id });
+    const { error: activeErr } = await authClient.organization.setActive({
+      organizationId: org.id,
+    });
+    if (activeErr) {
+      const message = activeErr.message ?? t("clinic.createError");
+      setError(message);
+      notify.error(t("clinic.createFailedTitle"), message);
+      setSubmitting(false);
+      return;
+    }
+
+    // Refresh the cached session so `activeOrganizationId` is populated before we
+    // navigate — otherwise AppAuthGuard still sees no active clinic and bounces
+    // straight back to /onboarding.
+    await authClient.getSession({ query: { disableCookieCache: true } });
+
     notify.success(t("clinic.createdTitle"), t("clinic.createdBody", { name: org.name }));
     onCreated?.(org);
   };

frontend/components/messages/messages-view.tsx

@@ -11,6 +11,7 @@ import {
   SendHorizonal,
   X,
 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
 import {
   type ChangeEvent,
   type FormEvent,
@@ -145,6 +146,11 @@ export function MessagesView() {
   const { data: session } = authClient.useSession();
   const myId = session?.user?.id ?? "";
 
+  // Deep link from a notification: /messages?conversation=<id>.
+  const searchParams = useSearchParams();
+  const deepLinkConversation = searchParams.get("conversation");
+  const openedDeepLink = useRef<string | null>(null);
+
   // "Today" / "Yesterday" / "Jun 9, 2026" for the thread's day separators.
   const formatDay = (iso: string): string => {
     const date = new Date(iso);
@@ -281,6 +287,17 @@ export function MessagesView() {
     );
   };
 
+  // Once the inbox has loaded, auto-open a conversation deep-linked from a
+  // notification. Guarded so it only fires once per target id.
+  useEffect(() => {
+    if (!deepLinkConversation || conversations.length === 0) return;
+    if (openedDeepLink.current === deepLinkConversation) return;
+    openedDeepLink.current = deepLinkConversation;
+    open(deepLinkConversation);
+    // `open` is stable enough for this one-shot; deps intentionally minimal.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [deepLinkConversation, conversations]);
+
   const send = (event: FormEvent) => {
     event.preventDefault();
     const text = draft.trim();

frontend/components/patients/patients-view.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { Plus, Search } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { AiBadge } from "@/components/ai-badge";
@@ -68,6 +69,16 @@ export function PatientsView() {
     setSheetOpen(true);
   };
 
+  // Deep link from a notification: /patients?file=<fileNumber> opens the record.
+  const searchParams = useSearchParams();
+  const deepLinkFile = searchParams.get("file");
+  const openedDeepLink = useRef<string | null>(null);
+  useEffect(() => {
+    if (!deepLinkFile || openedDeepLink.current === deepLinkFile) return;
+    openedDeepLink.current = deepLinkFile;
+    open(deepLinkFile);
+  }, [deepLinkFile]);
+
   const refresh = () => {
     void listPatients()
       .then(setAllPatients)

frontend/components/sidebar-02/mobile-sidebar-trigger.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { PanelLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/components/ui/sidebar";
+
+// A floating top-right button that opens the sidebar on phones. The in-sidebar
+// SidebarTrigger is unreachable on mobile once the offcanvas sidebar is closed,
+// so this gives a persistent way to bring it back. Hidden on md+ where the
+// sidebar is always docked.
+export function MobileSidebarTrigger() {
+  const { t } = useTranslation();
+  const { toggleSidebar, openMobile } = useSidebar();
+
+  // While the offcanvas Sheet is open it already covers the screen — no need to
+  // float a button over it.
+  if (openMobile) return null;
+
+  return (
+    <Button
+      aria-label={t("nav.openSidebar")}
+      className="fixed top-3 right-3 z-50 size-9 rounded-full bg-background/80 shadow-sm backdrop-blur md:hidden"
+      onClick={toggleSidebar}
+      size="icon"
+      variant="outline"
+    >
+      <PanelLeft className="size-4" />
+    </Button>
+  );
+}

frontend/components/sidebar-02/nav-notifications.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { BellIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -14,6 +15,7 @@ import {
   MenuSeparator,
   MenuTrigger,
 } from "@/components/ui/menu";
+import { markNotificationRead, notificationHref } from "@/lib/notifications";
 import { useNotifications } from "@/lib/use-notifications";
 
 // ISO timestamp -> "just now" / "10m ago" / "3h ago" / "2d ago".
@@ -29,6 +31,7 @@ function relativeTime(iso: string): string {
 
 export function NotificationsPopover() {
   const { t } = useTranslation();
+  const router = useRouter();
   const { items, unread, markAllRead } = useNotifications();
 
   return (
@@ -65,19 +68,31 @@ export function NotificationsPopover() {
             {t("nav.notificationsEmpty")}
           </div>
         ) : (
-          items.map((n) => (
-            <MenuItem className="flex items-start gap-3" key={n.id}>
-              <Avatar className="size-8">
-                <AvatarFallback>{n.actorInitials ?? "•"}</AvatarFallback>
-              </Avatar>
-              <div className="flex min-w-0 flex-col">
-                <span className="font-medium text-sm">{n.text}</span>
-                <span className="text-muted-foreground text-xs">
-                  {relativeTime(n.createdAt)}
-                </span>
-              </div>
-            </MenuItem>
-          ))
+          items.map((n) => {
+            const href = notificationHref(n);
+            return (
+              <MenuItem
+                className="flex items-start gap-3"
+                disabled={!href}
+                key={n.id}
+                onClick={() => {
+                  if (!href) return;
+                  if (!n.read) void markNotificationRead(n.id).catch(() => {});
+                  router.push(href);
+                }}
+              >
+                <Avatar className="size-8">
+                  <AvatarFallback>{n.actorInitials ?? "•"}</AvatarFallback>
+                </Avatar>
+                <div className="flex min-w-0 flex-col">
+                  <span className="font-medium text-sm">{n.text}</span>
+                  <span className="text-muted-foreground text-xs">
+                    {relativeTime(n.createdAt)}
+                  </span>
+                </div>
+              </MenuItem>
+            );
+          })
         )}
       </MenuPopup>
     </Menu>

frontend/lib/i18n/locales/en/translation.json

@@ -121,9 +121,12 @@
     "lab": "Lab",
     "notes": "Notes",
     "messages": "Messages",
+    "inbox": "Inbox",
+    "meetings": "Meetings",
     "tasks": "Tasks",
     "activity": "Activity",
     "settings": "Settings",
+    "openSidebar": "Open menu",
     "notifications": "Notifications",
     "notificationsEmpty": "You're all caught up.",
     "quickNav": "Quick nav",
@@ -763,8 +766,25 @@
     }
   },
   "analysis": {
-    "title": "Analysis",
+    "title": "Overview",
     "subtitle": "Clinic performance at a glance, computed from your clinic's data.",
+    "customize": "Customize",
+    "customizeTitle": "Show sections",
+    "range": {
+      "all": "All Time",
+      "12m": "12m",
+      "3m": "3m",
+      "30d": "30d",
+      "today": "Today"
+    },
+    "section": {
+      "visits": "Patient visits",
+      "patients": "Patient volume",
+      "trends": "Trends",
+      "earnings": "Earnings",
+      "appointments": "Appointments",
+      "prescriptions": "Prescriptions"
+    },
     "area": {
       "title": "Patient visits",
       "subtitle": "Visit volume over the last six months.",

frontend/lib/notifications.ts

@@ -30,3 +30,18 @@ export function markNotificationRead(id: string): Promise<void> {
 export function markAllNotificationsRead(): Promise<void> {
   return apiFetch<void>("/api/notifications/read-all", { method: "POST" });
 }
+
+// Maps a notification to the in-app route where the event occurred, so the
+// popover can navigate the user there on click. Returns null when there's no
+// meaningful destination (the item then renders as non-clickable).
+export function notificationHref(n: Notification): string | null {
+  if (!n.entityId) return null;
+  switch (n.entityType) {
+    case "conversation":
+      return `/messages?conversation=${encodeURIComponent(n.entityId)}`;
+    case "patient":
+      return `/patients?file=${encodeURIComponent(n.entityId)}`;
+    default:
+      return null;
+  }
+}