fix: clinic creation gating, analysis line charts, username + task assignee, delete confirm

- Hide "Create clinic" (sidebar footer) for non-admins; only owner/admin can spin up additional clinics. Onboarding for brand-new users is unaffected. - Analysis: drop the bar charts; show line charts (Sparkline) inside KPI cards that open a detail dialog with the full chart + per-point breakdown. - Add Team Member: validate the username client-side (no spaces; letters, numbers, dots, underscores) with a clear warning + field hint. - Tasks: New Task now has an Assignee selector (Myself / Other → department). Tasks are visible to the department they're assigned to (or the creator), and show who created them. Backend adds assignee_role + created_by_name with visibility filtering in listTasks; owners/admins see all. - Care team: removing a member now asks for confirmation first (dialog) and surfaces success/failure + refreshes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-26 11:58:14 +00:00 · 2026-06-08 19:52:12 +03:00
parent 8ab0552cf8
commit 4f8793c765
19 changed files with 2878 additions and 144 deletions
@@ -0,0 +1,2 @@
+ALTER TABLE "tasks" ADD COLUMN "assignee_role" text;--> statement-breakpoint
+ALTER TABLE "tasks" ADD COLUMN "created_by_name" text;
@@ -57,6 +57,13 @@
      "when": 1780933857005,
      "tag": "0007_skinny_bloodstrike",
      "breakpoints": true
+    },
+    {
+      "idx": 8,
+      "version": "7",
+      "when": 1780937195597,
+      "tag": "0008_luxuriant_blue_blade",
+      "breakpoints": true
    }
  ]
 }
@@ -22,6 +22,9 @@ export const tasks = pgTable(
      .references(() => organization.id, { onDelete: "cascade" }),
    title: text("title").notNull(),
    assignee: text("assignee").notNull().default("Unassigned"),
+    // The department (member role) a task is assigned to, e.g. "reception".
+    // Null means a personal task belonging to its creator. Drives who sees it.
+    assigneeRole: text("assignee_role"),
    due: text("due").notNull().default("No due date"),
    priority: text("priority").$type<TaskPriority>().notNull(),
    patient: text("patient"),
@@ -30,6 +33,9 @@ export const tasks = pgTable(
    createdBy: text("created_by").references(() => user.id, {
      onDelete: "set null",
    }),
+    // Denormalised creator name so "created by …" survives even if the user is
+    // later removed (createdBy is set null on delete).
+    createdByName: text("created_by_name"),
    createdAt: timestamp("created_at").defaultNow().notNull(),
    updatedAt: timestamp("updated_at")
      .defaultNow()
@@ -1,9 +1,14 @@
 import { z } from "zod";

+// Departments a task can be assigned to (member roles). Null = a personal task
+// that belongs to its creator.
+export const TASK_DEPARTMENTS = ["admin", "doctor", "reception"] as const;
+
 // Payload accepted by POST /api/tasks (full create).
 export const taskInputSchema = z.object({
  title: z.string().trim().min(1, "A task subject is required.").max(200),
  assignee: z.string().trim().max(200).default("Unassigned"),
+  assigneeRole: z.enum(TASK_DEPARTMENTS).nullish(),
  due: z.string().trim().max(120).default("No due date"),
  priority: z.enum(["high", "medium", "low"]).default("medium"),
  patient: z.string().trim().max(200).nullish(),
@@ -19,7 +19,12 @@ tasksRouter.get(
  requirePermission({ task: ["read"] }),
  async (req, res, next) => {
    try {
-      res.json(await service.listTasks(req.organizationId!));
+      res.json(
+        await service.listTasks(req.organizationId!, {
+          userId: req.user!.id,
+          role: req.memberRole ?? "",
+        }),
+      );
    } catch (err) {
      next(err);
    }
@@ -34,7 +39,7 @@ tasksRouter.post(
      const input = taskInputSchema.parse(req.body);
      const created = await service.createTask(
        req.organizationId!,
-        req.user!.id,
+        { id: req.user!.id, name: req.user!.name },
        input,
      );
      await recordActivity({
@@ -1,4 +1,4 @@
-import { and, desc, eq } from "drizzle-orm";
+import { and, desc, eq, inArray, or } from "drizzle-orm";

 import { db } from "../db/index.js";
 import { tasks } from "../db/schema/tasks.js";
@@ -11,33 +11,58 @@ type TaskRow = typeof tasks.$inferSelect;
 const UUID_RE =
  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

+function rolesOf(role: string): string[] {
+  return String(role ?? "")
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
 function toTask(row: TaskRow): Task {
  return {
    id: row.id,
    title: row.title,
    assignee: row.assignee,
+    assigneeRole: row.assigneeRole,
    due: row.due,
    priority: row.priority,
    patient: row.patient,
    notes: row.notes,
    done: row.done,
+    createdById: row.createdBy,
+    createdByName: row.createdByName,
    createdAt: row.createdAt.toISOString(),
    updatedAt: row.updatedAt.toISOString(),
  };
 }

-export async function listTasks(orgId: string): Promise<Task[]> {
+// A member sees a task if they created it or it's assigned to their department.
+// Owners/admins see every task in the clinic.
+export async function listTasks(
+  orgId: string,
+  viewer: { userId: string; role: string },
+): Promise<Task[]> {
+  const roles = rolesOf(viewer.role);
+  const isAdmin = roles.some((r) => r === "owner" || r === "admin");
+
+  let where = eq(tasks.organizationId, orgId);
+  if (!isAdmin) {
+    const visible = [eq(tasks.createdBy, viewer.userId)];
+    if (roles.length) visible.push(inArray(tasks.assigneeRole, roles));
+    where = and(where, or(...visible))!;
+  }
+
  const rows = await db
    .select()
    .from(tasks)
-    .where(eq(tasks.organizationId, orgId))
+    .where(where)
    .orderBy(desc(tasks.createdAt));
  return rows.map(toTask);
 }

 export async function createTask(
  orgId: string,
-  userId: string,
+  creator: { id: string; name: string },
  input: TaskInput,
 ): Promise<Task> {
  const [row] = await db
@@ -46,11 +71,13 @@ export async function createTask(
      organizationId: orgId,
      title: input.title,
      assignee: input.assignee,
+      assigneeRole: input.assigneeRole ?? null,
      due: input.due,
      priority: input.priority,
      patient: input.patient ?? null,
      notes: input.notes ?? null,
-      createdBy: userId,
+      createdBy: creator.id,
+      createdByName: creator.name,
    })
    .returning();
  return toTask(row!);
@@ -67,6 +94,8 @@ export async function updateTask(
  const set: Partial<typeof tasks.$inferInsert> = {};
  if (patch.title !== undefined) set.title = patch.title;
  if (patch.assignee !== undefined) set.assignee = patch.assignee;
+  if (patch.assigneeRole !== undefined)
+    set.assigneeRole = patch.assigneeRole ?? null;
  if (patch.due !== undefined) set.due = patch.due;
  if (patch.priority !== undefined) set.priority = patch.priority;
  if (patch.patient !== undefined) set.patient = patch.patient ?? null;
@@ -7,11 +7,15 @@ export type Task = {
  id: string;
  title: string;
  assignee: string;
+  // Department (member role) the task is assigned to; null = personal task.
+  assigneeRole: string | null;
  due: string;
  priority: TaskPriority;
  patient: string | null;
  notes: string | null;
  done: boolean;
+  createdById: string | null;
+  createdByName: string | null;
  createdAt: string;
  updatedAt: string;
 };
@@ -3,7 +3,7 @@
 import { type ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

-import { BarChart } from "@/components/analysis/bar-chart";
+import { TrendCard } from "@/components/analysis/trend-card";
 import { Card } from "@/components/ui/card";
 import { type Analytics, getAnalytics } from "@/lib/analytics";

@@ -46,26 +46,6 @@ function Section({
  );
 }

-// A full-width section that frames a single chart in a card.
-function ChartSection({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description: string;
-  children: ReactNode;
-}) {
-  return (
-    <section className="flex flex-col gap-3">
-      <div>
-        <h2 className="font-semibold text-lg tracking-tight">{title}</h2>
-        <p className="text-muted-foreground text-sm">{description}</p>
-      </div>
-      <Card className="p-5">{children}</Card>
-    </section>
-  );
-}

 export function AnalysisView() {
  const { t } = useTranslation();
@@ -114,15 +94,32 @@ export function AnalysisView() {
        />
      </Section>

-      <ChartSection
-        description={t("analysis.charts.patientGrowthDescription")}
-        title={t("analysis.charts.patientGrowthTitle")}
-      >
-        <BarChart
-          data={data?.trends.patientsByMonth ?? []}
-          emptyLabel={t("analysis.charts.empty")}
-        />
-      </ChartSection>
+      <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">
+          <TrendCard
+            description={t("analysis.charts.patientGrowthDescription")}
+            detailsLabel={t("analysis.charts.viewDetails")}
+            emptyLabel={t("analysis.charts.empty")}
+            points={data?.trends.patientsByMonth ?? []}
+            title={t("analysis.charts.patientGrowthTitle")}
+          />
+          <TrendCard
+            description={t("analysis.charts.weeklyAppointmentsDescription")}
+            detailsLabel={t("analysis.charts.viewDetails")}
+            emptyLabel={t("analysis.charts.empty")}
+            points={data?.trends.appointmentsByWeekday ?? []}
+            title={t("analysis.charts.weeklyAppointmentsTitle")}
+          />
+        </div>
+      </section>

      <Section
        description={t("analysis.appointments.description")}
@@ -146,16 +143,6 @@ export function AnalysisView() {
        />
      </Section>

-      <ChartSection
-        description={t("analysis.charts.weeklyAppointmentsDescription")}
-        title={t("analysis.charts.weeklyAppointmentsTitle")}
-      >
-        <BarChart
-          data={data?.trends.appointmentsByWeekday ?? []}
-          emptyLabel={t("analysis.charts.empty")}
-        />
-      </ChartSection>
-
      <Section
        description={t("analysis.prescriptions.description")}
        title={t("analysis.prescriptions.title")}
@@ -1,59 +0,0 @@
-"use client";
-
-import type { TrendPoint } from "@/lib/analytics";
-import { cn } from "@/lib/utils";
-
-// A small dependency-free vertical bar chart (matches the spirit of
-// components/chat/sparkline.tsx). Bars scale to the series max; each shows its
-// value above and its label below. Themed with semantic tokens.
-export function BarChart({
-  data,
-  className,
-  emptyLabel,
-}: {
-  data: TrendPoint[];
-  className?: string;
-  emptyLabel: string;
-}) {
-  const max = Math.max(1, ...data.map((d) => d.count));
-  const hasData = data.some((d) => d.count > 0);
-
-  if (data.length === 0 || !hasData) {
-    return (
-      <div
-        className={cn(
-          "flex h-44 items-center justify-center text-muted-foreground text-sm",
-          className,
-        )}
-      >
-        {emptyLabel}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("flex h-44 items-end gap-2 sm:gap-3", className)}>
-      {data.map((d, i) => {
-        const pct = (d.count / max) * 100;
-        return (
-          <div
-            className="flex h-full flex-1 flex-col items-center gap-1.5"
-            key={`${d.label}-${i}`}
-          >
-            <span className="font-medium text-foreground text-xs tabular-nums">
-              {d.count}
-            </span>
-            <div className="flex w-full flex-1 items-end">
-              <div
-                className="w-full rounded-t-md bg-primary/80 transition-colors hover:bg-primary"
-                style={{ height: `${Math.max(pct, d.count > 0 ? 4 : 0)}%` }}
-                title={`${d.label}: ${d.count}`}
-              />
-            </div>
-            <span className="text-muted-foreground text-xs">{d.label}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+
+import { Sparkline } from "@/components/chat/sparkline";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogDescription,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import type { TrendPoint } from "@/lib/analytics";
+
+// A KPI card with an inline line chart (Sparkline). Clicking it opens a dialog
+// with the full line chart and a per-point breakdown. Used on the Analysis page.
+export function TrendCard({
+  title,
+  description,
+  points,
+  emptyLabel,
+  detailsLabel,
+}: {
+  title: string;
+  description: string;
+  points: TrendPoint[];
+  emptyLabel: string;
+  detailsLabel: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const values = points.map((p) => p.count);
+  const total = values.reduce((a, b) => a + b, 0);
+  const hasData = points.length > 0;
+
+  return (
+    <>
+      <button
+        className="w-full text-left"
+        disabled={!hasData}
+        onClick={() => setOpen(true)}
+        type="button"
+      >
+        <Card className="gap-3 p-4 transition-colors hover:border-ring/40 hover:bg-accent/30">
+          <div className="flex items-baseline justify-between gap-2">
+            <span className="text-muted-foreground text-sm">{title}</span>
+            <span className="font-semibold text-foreground text-xl tabular-nums">
+              {total}
+            </span>
+          </div>
+          {hasData ? (
+            <Sparkline className="h-12" points={values} />
+          ) : (
+            <p className="py-4 text-center text-muted-foreground text-xs">
+              {emptyLabel}
+            </p>
+          )}
+          {hasData && (
+            <span className="text-muted-foreground text-xs">{detailsLabel}</span>
+          )}
+        </Card>
+      </button>
+
+      <Dialog onOpenChange={setOpen} open={open}>
+        <DialogPopup className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+          <DialogPanel className="flex flex-col gap-5">
+            <Sparkline className="h-36" points={values} />
+            <dl className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm sm:grid-cols-3">
+              {points.map((p) => (
+                <div
+                  className="flex items-center justify-between border-border/60 border-b py-1"
+                  key={p.label}
+                >
+                  <dt className="text-muted-foreground">{p.label}</dt>
+                  <dd className="font-medium text-foreground tabular-nums">
+                    {p.count}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </DialogPanel>
+        </DialogPopup>
+      </Dialog>
+    </>
+  );
+}
@@ -23,6 +23,9 @@ import { notify } from "@/lib/toast";

 const MIN_PASSWORD = 12;
 const MIN_USERNAME = 3;
+// Mirrors the backend rule (backend/src/routes/staff.ts): letters, numbers,
+// dots and underscores only — notably no spaces.
+const USERNAME_RE = /^[a-zA-Z0-9_.]+$/;

 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";
@@ -77,10 +80,15 @@ export function AddStaffDialog({ open, onOpenChange, onCreated }: Props) {
    }

    // Step 2 → create the account.
-    if (username.trim().length < MIN_USERNAME) {
+    const trimmedUsername = username.trim();
+    if (trimmedUsername.length < MIN_USERNAME) {
      setError(t("settings.careTeam.add.usernameTooShort", { count: MIN_USERNAME }));
      return;
    }
+    if (!USERNAME_RE.test(trimmedUsername)) {
+      setError(t("settings.careTeam.add.usernameInvalid"));
+      return;
+    }
    if (password.length < MIN_PASSWORD) {
      setError(t("settings.careTeam.add.passwordTooShort", { count: MIN_PASSWORD }));
      return;
@@ -93,7 +101,7 @@ export function AddStaffDialog({ open, onOpenChange, onCreated }: Props) {
        body: JSON.stringify({
          name: name.trim(),
          role,
-          username: username.trim(),
+          username: trimmedUsername,
          password,
        }),
      });
@@ -101,7 +109,7 @@ export function AddStaffDialog({ open, onOpenChange, onCreated }: Props) {
        t("settings.careTeam.add.createdTitle"),
        t("settings.careTeam.add.createdBody", {
          name: name.trim(),
-          username: username.trim().toLowerCase(),
+          username: trimmedUsername.toLowerCase(),
        }),
      );
      onCreated?.();
@@ -183,6 +191,9 @@ export function AddStaffDialog({ open, onOpenChange, onCreated }: Props) {
                    required
                    value={username}
                  />
+                  <FieldDescription>
+                    {t("settings.careTeam.add.usernameHint")}
+                  </FieldDescription>
                </Field>
                <Field className="w-full">
                  <FieldLabel htmlFor="staff-password">
@@ -12,9 +12,19 @@ import {
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPopup,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { ROLE_LABELS } from "@/lib/access";
 import { apiFetch } from "@/lib/api-client";
 import { authClient } from "@/lib/auth-client";
+import { notify } from "@/lib/toast";

 // One row of /api/staff — clinic members joined to their user record (incl. the
 // username admin-provisioned staff sign in with).
@@ -52,6 +62,8 @@ export function CareTeamPanel() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [adding, setAdding] = useState(false);
+  const [pendingRemove, setPendingRemove] = useState<StaffMember | null>(null);
+  const [removing, setRemoving] = useState(false);

  const load = useCallback(async () => {
    try {
@@ -75,8 +87,27 @@ export function CareTeamPanel() {
  const myRole = members.find((m) => m.userId === session?.user?.id)?.role;
  const canManage = myRole === "owner" || myRole === "admin";

-  const removeMember = async (memberId: string) => {
-    await authClient.organization.removeMember({ memberIdOrEmail: memberId });
+  const confirmRemove = async () => {
+    if (!pendingRemove || removing) return;
+    setRemoving(true);
+    const { error: err } = await authClient.organization.removeMember({
+      memberIdOrEmail: pendingRemove.id,
+    });
+    setRemoving(false);
+    if (err) {
+      notify.error(
+        t("settings.careTeam.remove.failedTitle"),
+        err.message ?? t("settings.careTeam.remove.failedBody"),
+      );
+      return;
+    }
+    notify.success(
+      t("settings.careTeam.remove.removedTitle"),
+      t("settings.careTeam.remove.removedBody", {
+        name: pendingRemove.name ?? pendingRemove.email ?? "",
+      }),
+    );
+    setPendingRemove(null);
    void load();
  };

@@ -139,7 +170,7 @@ export function CareTeamPanel() {
                {canManage && !isSelf && m.role !== "owner" && (
                  <Button
                    aria-label={t("settings.careTeam.removeMember")}
-                    onClick={() => removeMember(m.id)}
+                    onClick={() => setPendingRemove(m)}
                    size="icon-sm"
                    type="button"
                    variant="ghost"
@@ -160,6 +191,41 @@ export function CareTeamPanel() {
          open={adding}
        />
      )}
+
+      {/* Confirm before removing a member — destructive and not reversible. */}
+      <Dialog
+        onOpenChange={(o) => !o && setPendingRemove(null)}
+        open={pendingRemove !== null}
+      >
+        <DialogPopup className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t("settings.careTeam.remove.title")}</DialogTitle>
+            <DialogDescription>
+              {t("settings.careTeam.remove.description", {
+                name:
+                  pendingRemove?.name ??
+                  pendingRemove?.email ??
+                  t("settings.careTeam.remove.thisMember"),
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose render={<Button type="button" variant="outline" />}>
+              {t("settings.careTeam.remove.cancel")}
+            </DialogClose>
+            <Button
+              disabled={removing}
+              onClick={confirmRemove}
+              type="button"
+              variant="destructive"
+            >
+              {removing
+                ? t("settings.careTeam.remove.removing")
+                : t("settings.careTeam.remove.confirm")}
+            </Button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>
    </SettingsSection>
  );
 }
@@ -49,6 +49,7 @@ import {
  useSidebar,
 } from "@/components/ui/sidebar";
 import { authClient } from "@/lib/auth-client";
+import { useActiveRole } from "@/lib/roles";
 import { notify } from "@/lib/toast";

 // Open-source repo (placeholder).
@@ -91,6 +92,10 @@ export function NavUser() {
  const { open: openCommand } = useCommandPalette();
  const { data: orgs } = authClient.useListOrganizations();
  const { data: activeOrg } = authClient.useActiveOrganization();
+  const role = useActiveRole();
+  // Only clinic owners/admins may spin up additional clinics. New users with no
+  // clinic still onboard via /onboarding (a separate flow).
+  const canCreateClinic = role === "owner" || role === "admin";

  const [createOpen, setCreateOpen] = useState(false);

@@ -231,11 +236,18 @@ export function NavUser() {
                    </MenuItem>
                  ))}
                </MenuGroup>
-                <MenuSeparator />
-                <MenuItem className="gap-2" onClick={() => setCreateOpen(true)}>
-                  <Plus />
-                  {t("userMenu.createClinic")}
-                </MenuItem>
+                {canCreateClinic && (
+                  <>
+                    <MenuSeparator />
+                    <MenuItem
+                      className="gap-2"
+                      onClick={() => setCreateOpen(true)}
+                    >
+                      <Plus />
+                      {t("userMenu.createClinic")}
+                    </MenuItem>
+                  </>
+                )}
              </MenuSubPopup>
            </MenuSub>

@@ -11,6 +11,7 @@ import {
  SheetPopup,
  SheetTitle,
 } from "@/components/ui/sheet";
+import { ROLE_LABELS } from "@/lib/access";
 import { cn } from "@/lib/utils";
 import type { Priority, Task } from "@/components/tasks/tasks-view";

@@ -21,6 +22,10 @@ const priorityVariant: Record<Priority, "destructive" | "secondary" | "outline">
    low: "outline",
  };

+function deptLabel(role: string): string {
+  return (ROLE_LABELS as Record<string, string>)[role] ?? role;
+}
+
 // Right-side Sheet showing a single task's full detail, opened from the Tasks
 // list (mirrors the Patients table → PatientDetailSheet pattern). The task is
 // passed in directly from the page.
@@ -67,9 +72,19 @@ export function TaskDetailSheet({
                    : t("tasks.detail.open")}
                </dd>
                <dt className="text-muted-foreground">
-                  {t("tasks.detail.assignee")}
+                  {t("tasks.detail.assignedTo")}
                </dt>
-                <dd className="text-foreground">{task.assignee}</dd>
+                <dd className="text-foreground">
+                  {task.assigneeRole
+                    ? t("tasks.detail.deptTeam", {
+                        dept: deptLabel(task.assigneeRole),
+                      })
+                    : t("tasks.detail.personal")}
+                </dd>
+                <dt className="text-muted-foreground">
+                  {t("tasks.detail.createdBy")}
+                </dt>
+                <dd className="text-foreground">{task.createdByName ?? "—"}</dd>
                <dt className="text-muted-foreground">
                  {t("tasks.detail.due")}
                </dt>
@@ -25,6 +25,8 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { ROLE_LABELS } from "@/lib/access";
+import { DEPARTMENTS } from "@/lib/roles";
 import {
  type Priority,
  type Task,
@@ -36,6 +38,12 @@ import {
 import { notify } from "@/lib/toast";
 import { cn } from "@/lib/utils";

+type AssigneeMode = "self" | "other";
+
+function deptLabel(role: string): string {
+  return (ROLE_LABELS as Record<string, string>)[role] ?? role;
+}
+
 export type { Priority, Task } from "@/lib/tasks";

 type Filter = "all" | "open" | "done";
@@ -98,14 +106,16 @@ function AddTaskDialog({
  const { t } = useTranslation();
  const [title, setTitle] = useState("");
  const [notes, setNotes] = useState("");
-  const [assignee, setAssignee] = useState("");
+  const [assigneeMode, setAssigneeMode] = useState<AssigneeMode>("self");
+  const [department, setDepartment] = useState<string>("reception");
  const [due, setDue] = useState("");
  const [priority, setPriority] = useState<Priority>("medium");

  const reset = () => {
    setTitle("");
    setNotes("");
-    setAssignee("");
+    setAssigneeMode("self");
+    setDepartment("reception");
    setDue("");
    setPriority("medium");
  };
@@ -122,7 +132,8 @@ function AddTaskDialog({
    onAdd({
      title: title.trim(),
      notes: notes.trim() || undefined,
-      assignee: assignee.trim() || "Unassigned",
+      // "Myself" → personal task (no department); "Other" → a department.
+      assigneeRole: assigneeMode === "self" ? null : department,
      due: due.trim() || "No due date",
      priority,
    });
@@ -163,14 +174,47 @@ function AddTaskDialog({
                value={notes}
              />
            </Field>
-            <div className="grid grid-cols-2 gap-3">
-              <Field label={t("tasks.dialog.assignee")}>
-                <Input
-                  onChange={(e) => setAssignee(e.target.value)}
-                  placeholder={t("tasks.dialog.assigneePlaceholder")}
-                  value={assignee}
-                />
+            <div className="flex flex-col gap-1.5">
+              <span className="text-muted-foreground text-xs">
+                {t("tasks.dialog.assignee")}
+              </span>
+              <div className="flex gap-2">
+                <Button
+                  className="flex-1"
+                  onClick={() => setAssigneeMode("self")}
+                  size="sm"
+                  type="button"
+                  variant={assigneeMode === "self" ? "secondary" : "outline"}
+                >
+                  {t("tasks.dialog.assigneeSelf")}
+                </Button>
+                <Button
+                  className="flex-1"
+                  onClick={() => setAssigneeMode("other")}
+                  size="sm"
+                  type="button"
+                  variant={assigneeMode === "other" ? "secondary" : "outline"}
+                >
+                  {t("tasks.dialog.assigneeOther")}
+                </Button>
+              </div>
+            </div>
+            {assigneeMode === "other" && (
+              <Field label={t("tasks.dialog.department")}>
+                <select
+                  className={controlClass}
+                  onChange={(e) => setDepartment(e.target.value)}
+                  value={department}
+                >
+                  {DEPARTMENTS.map((d) => (
+                    <option key={d} value={d}>
+                      {ROLE_LABELS[d]}
+                    </option>
+                  ))}
+                </select>
              </Field>
+            )}
+            <div className="grid grid-cols-2 gap-3">
              <Field label={t("tasks.dialog.due")}>
                <Input
                  onChange={(e) => setDue(e.target.value)}
@@ -178,18 +222,18 @@ function AddTaskDialog({
                  value={due}
                />
              </Field>
+              <Field label={t("tasks.dialog.priorityLabel")}>
+                <select
+                  className={controlClass}
+                  onChange={(e) => setPriority(e.target.value as Priority)}
+                  value={priority}
+                >
+                  <option value="high">{t("tasks.priority.high")}</option>
+                  <option value="medium">{t("tasks.priority.medium")}</option>
+                  <option value="low">{t("tasks.priority.low")}</option>
+                </select>
+              </Field>
            </div>
-            <Field label={t("tasks.dialog.priorityLabel")}>
-              <select
-                className={controlClass}
-                onChange={(e) => setPriority(e.target.value as Priority)}
-                value={priority}
-              >
-                <option value="high">{t("tasks.priority.high")}</option>
-                <option value="medium">{t("tasks.priority.medium")}</option>
-                <option value="low">{t("tasks.priority.low")}</option>
-              </select>
-            </Field>
          </DialogPanel>

          <DialogFooter>
@@ -337,7 +381,14 @@ export function TasksView() {
                  {task.title}
                </span>
                <span className="truncate text-muted-foreground text-xs">
-                  {task.assignee} · {task.due}
+                  {task.assigneeRole
+                    ? t("tasks.list.forDept", {
+                        dept: deptLabel(task.assigneeRole),
+                      })
+                    : t("tasks.list.personal")}
+                  {task.createdByName
+                    ? ` · ${t("tasks.list.byCreator", { name: task.createdByName })}`
+                    : ""}
                </span>
              </button>
              <Badge
@@ -322,20 +322,30 @@
      "details": "Details — what needs to be done",
      "detailsPlaceholder": "Describe what needs to happen, any context, links…",
      "assignee": "Assignee",
-      "assigneePlaceholder": "e.g. Dr. Okafor",
+      "assigneeSelf": "Myself",
+      "assigneeOther": "Other",
+      "department": "Department",
      "due": "Due",
      "duePlaceholder": "e.g. Today",
      "priorityLabel": "Priority",
      "cancel": "Cancel",
      "add": "Add task"
    },
+    "list": {
+      "forDept": "For {{dept}}",
+      "personal": "Personal",
+      "byCreator": "by {{name}}"
+    },
    "detail": {
      "fallbackTitle": "Task",
      "priorityBadge": "{{priority}} priority",
      "status": "Status",
      "completed": "Completed",
      "open": "Open",
-      "assignee": "Assignee",
+      "assignedTo": "Assigned to",
+      "createdBy": "Created by",
+      "deptTeam": "{{dept}} team",
+      "personal": "Personal task",
      "due": "Due",
      "patient": "Patient",
      "details": "Details",
@@ -404,7 +414,10 @@
      "completed": "Completed"
    },
    "charts": {
-      "patientGrowthTitle": "Patient growth",
+      "title": "Trends",
+      "subtitle": "Tap a card for the full breakdown.",
+      "viewDetails": "Tap for details",
+      "patientGrowthTitle": "New patients",
      "patientGrowthDescription": "New patients per month over the last 6 months",
      "weeklyAppointmentsTitle": "Appointments this week",
      "weeklyAppointmentsDescription": "Bookings per day for the current week",
@@ -712,6 +725,18 @@
      "you": "(you)",
      "addMember": "Add team member",
      "removeMember": "Remove member",
+      "remove": {
+        "title": "Remove team member?",
+        "description": "{{name}} will lose access to this clinic. This can't be undone.",
+        "thisMember": "This member",
+        "cancel": "Cancel",
+        "confirm": "Remove",
+        "removing": "Removing…",
+        "removedTitle": "Member removed",
+        "removedBody": "{{name}} no longer has access.",
+        "failedTitle": "Couldn't remove member",
+        "failedBody": "Please try again."
+      },
      "add": {
        "title": "Add team member",
        "step1Description": "Who are you adding, and what can they do?",
@@ -722,7 +747,9 @@
        "roleLabel": "Role",
        "usernameLabel": "Username",
        "usernamePlaceholder": "jokafor",
+        "usernameHint": "Letters, numbers, dots and underscores — no spaces.",
        "usernameTooShort": "Username must be at least {{count}} characters.",
+        "usernameInvalid": "Username can't contain spaces. Use letters, numbers, dots or underscores.",
        "passwordLabel": "Password",
        "passwordHint": "Must be at least {{count}} characters long.",
        "passwordTooShort": "Password must be at least {{count}} characters.",
@@ -17,6 +17,10 @@ export const PROVISIONABLE_ROLES: RoleKey[] = [
  "viewer",
 ];

+// Departments a task can be assigned to (member roles). Mirrors the backend's
+// TASK_DEPARTMENTS in lib/task-validation.ts.
+export const DEPARTMENTS = ["admin", "doctor", "reception"] as const;
+
 // 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 {
@@ -8,11 +8,15 @@ export type Task = {
  id: string;
  title: string;
  assignee: string;
+  // Department (member role) the task is assigned to; null = personal task.
+  assigneeRole: string | null;
  due: string;
  priority: Priority;
  patient: string | null;
  notes: string | null;
  done: boolean;
+  createdById: string | null;
+  createdByName: string | null;
  createdAt: string;
  updatedAt: string;
 };
@@ -21,6 +25,7 @@ export type Task = {
 export type TaskInput = {
  title: string;
  assignee?: string;
+  assigneeRole?: string | null;
  due?: string;
  priority?: Priority;
  patient?: string | null;