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>

frontend/components/analysis/analysis-view.tsx

@@ -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")}

frontend/components/analysis/bar-chart.tsx

@@ -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>
-  );
-}

frontend/components/analysis/trend-card.tsx

@@ -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>
+    </>
+  );
+}