@sjolystinnovation/app-kit 0.19.0 → 0.21.0

package/src/admin/AdminUsersPanel.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { PlusIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { useEffect, useRef, useState } from "react";
+import type { AdminUser, createAdminUsersService } from "../api/services";
+import { toast } from "../toast";
+import { TextInput } from "../ui/TextInput";
+import { Toggle } from "../ui/Toggle";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultAdminUsersPanelStrings, type AdminUsersPanelStrings } from "./adminUsersPanelStrings";
+
+export interface AdminUsersPanelProps {
+  /** The user admin calls, such as `createAdminUsersService(api)`. */
+  service: ReturnType<typeof createAdminUsersService>;
+  /** The roles an admin may give, from the app's own endpoint. */
+  getRoles: () => Promise<string[]>;
+  /** The role a new invite starts with. `Admin` by default. */
+  defaultInviteRole?: string | undefined;
+  strings?: TextOverrides<AdminUsersPanelStrings> | undefined;
+}
+
+const fill = (text: string, values: Record<string, string>) =>
+  text.replace(/\{(\w+)\}/g, (match, key: string) => values[key] ?? match);
+
+const reason = (err: unknown, fallback: string) => (err instanceof Error && err.message ? err.message : fallback);
+
+/**
+ * The admin users page: every user with their roles, a toggle for deleted users, giving and taking
+ * roles, deleting an account after a confirm, and inviting a user by email.
+ */
+export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin", strings }: AdminUsersPanelProps) {
+  const text = withDefaults(defaultAdminUsersPanelStrings, strings);
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [allRoles, setAllRoles] = useState<string[]>([]);
+  const [includeDeleted, setIncludeDeleted] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [addRoleFor, setAddRoleFor] = useState<string | null>(null);
+  const [selectedRole, setSelectedRole] = useState("");
+  const [roleLoading, setRoleLoading] = useState(false);
+  const [invite, setInvite] = useState({ email: "", firstName: "", lastName: "", role: defaultInviteRole });
+  const [inviting, setInviting] = useState(false);
+  // Bumped to fetch the list again after a change, through the same effect as every other load.
+  const [reloads, setReloads] = useState(0);
+  // The latest service, so an inline one does not fetch the list again on every render. The roles
+  // load once, so the first getRoles is enough.
+  const serviceRef = useRef(service);
+  useEffect(() => {
+    serviceRef.current = service;
+  }, [service]);
+  const getRolesRef = useRef(getRoles);
+
+  // Callers set `loading` before changing what to fetch, so the effect only sets state once the
+  // request settles. A request replaced by a newer one is ignored, so a slow answer to an earlier
+  // toggle cannot overwrite the list the toggle now shows.
+  useEffect(() => {
+    let replaced = false;
+    serviceRef.current
+      .getUsers(includeDeleted)
+      .then((list) => {
+        if (!replaced) setUsers(list);
+      })
+      .catch((err: unknown) => {
+        if (!replaced) toast.error(reason(err, text.usersLoadFailed));
+      })
+      .finally(() => {
+        if (!replaced) setLoading(false);
+      });
+    return () => {
+      replaced = true;
+    };
+  }, [includeDeleted, reloads, text.usersLoadFailed]);
+
+  useEffect(() => {
+    getRolesRef
+      .current()
+      .then(setAllRoles)
+      .catch(() => toast.error(text.rolesLoadFailed));
+  }, [text.rolesLoadFailed]);
+
+  const reload = () => {
+    setLoading(true);
+    setReloads((n) => n + 1);
+  };
+
+  const toggleDeleted = (deleted: boolean) => {
+    setLoading(true);
+    setIncludeDeleted(deleted);
+  };
+
+  const setRoles = (id: string, roles: string[]) => setUsers((prev) => prev.map((u) => (u.id === id ? { ...u, roles } : u)));
+
+  const assignRole = async (user: AdminUser) => {
+    if (!selectedRole) return;
+    setRoleLoading(true);
+    try {
+      await serviceRef.current.addRole(user.id, selectedRole);
+      setRoles(user.id, [...user.roles, selectedRole]);
+      toast.success(fill(text.roleAssigned, { name: user.firstName, role: selectedRole }));
+      setAddRoleFor(null);
+      setSelectedRole("");
+    } catch (err) {
+      toast.error(reason(err, text.roleAssignFailed));
+    } finally {
+      setRoleLoading(false);
+    }
+  };
+
+  const removeRole = async (user: AdminUser, role: string) => {
+    try {
+      await serviceRef.current.removeRole(user.id, role);
+      setRoles(user.id, user.roles.filter((r) => r !== role));
+      toast.success(fill(text.roleRemoved, { name: user.firstName, role }));
+    } catch (err) {
+      toast.error(reason(err, text.roleRemoveFailed));
+    }
+  };
+
+  const deleteUser = async (user: AdminUser) => {
+    const label = `${user.firstName} ${user.lastName}`.trim() || user.email;
+    if (!window.confirm(fill(text.confirmDelete, { name: label }))) return;
+    try {
+      await serviceRef.current.deleteUser(user.id);
+      toast.success(text.userDeleted);
+      reload();
+    } catch (err) {
+      toast.error(reason(err, text.userDeleteFailed));
+    }
+  };
+
+  const sendInvite = async () => {
+    if (!invite.email.trim() || !invite.firstName.trim() || !invite.lastName.trim()) {
+      toast.error(text.inviteIncomplete);
+      return;
+    }
+    setInviting(true);
+    try {
+      await serviceRef.current.invite(invite.email.trim(), invite.firstName.trim(), invite.lastName.trim(), invite.role);
+      toast.success(text.inviteSent);
+      setInvite({ email: "", firstName: "", lastName: "", role: invite.role });
+      reload();
+    } catch (err) {
+      toast.error(reason(err, text.inviteFailed));
+    } finally {
+      setInviting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold text-gray-900">{text.users}</h2>
+        <Toggle label={text.showDeleted} checked={includeDeleted} onChange={toggleDeleted} />
+      </div>
+
+      <div className="rounded-2xl border border-gray-200 p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-gray-900">{text.inviteUser}</h3>
+        <div className="flex flex-wrap items-end gap-2">
+          <div className="w-40">
+            <TextInput label={text.firstName} value={invite.firstName} onChange={(e) => setInvite({ ...invite, firstName: e.target.value })} />
+          </div>
+          <div className="w-40">
+            <TextInput label={text.lastName} value={invite.lastName} onChange={(e) => setInvite({ ...invite, lastName: e.target.value })} />
+          </div>
+          <div className="flex-1 min-w-[14rem]">
+            <TextInput label={text.email} type="email" value={invite.email} onChange={(e) => setInvite({ ...invite, email: e.target.value })} />
+          </div>
+          <label className="text-xs text-gray-600">
+            {text.role}
+            <select
+              value={invite.role}
+              onChange={(e) => setInvite({ ...invite, role: e.target.value })}
+              className="mt-1 block rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            >
+              {allRoles.map((role) => (
+                <option key={role} value={role}>
+                  {role}
+                </option>
+              ))}
+            </select>
+          </label>
+          <button
+            onClick={sendInvite}
+            disabled={inviting}
+            className="rounded-button bg-button-primary-bg text-button-primary-text font-semibold px-4 py-2 text-sm hover:brightness-95 disabled:opacity-60 transition"
+          >
+            {inviting ? text.sending : text.sendInvite}
+          </button>
+        </div>
+        <p className="text-xs text-gray-500">{text.inviteHint}</p>
+      </div>
+
+      {loading ? (
+        <p className="text-gray-500">{text.loading}</p>
+      ) : (
+        <ul className="divide-y divide-gray-100 rounded-2xl border border-gray-200">
+          {users.map((user) => {
+            const isAddingRole = addRoleFor === user.id;
+            const available = allRoles.filter((r) => !user.roles.includes(r));
+            return (
+              <li key={user.id} className="p-4 space-y-2">
+                <div className="flex items-start justify-between gap-3">
+                  <div className={user.isDeleted ? "text-gray-400" : "text-gray-800"}>
+                    <span className="font-medium">
+                      {user.firstName} {user.lastName}
+                    </span>
+                    <span className="ml-2 text-xs text-gray-500">{user.email}</span>
+                    {user.isDeleted && <span className="ml-2 text-xs text-gray-400">({text.deleted})</span>}
+                  </div>
+                  {!user.isDeleted && (
+                    <button
+                      onClick={() => deleteUser(user)}
+                      title={text.delete}
+                      className="shrink-0 p-2 rounded-lg text-red-500 hover:text-red-700 hover:bg-red-50 transition-colors"
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {user.roles.map((role) => (
+                    <span key={role} className="flex items-center gap-1 pl-2 pr-1 py-0.5 bg-gray-100 border border-gray-200 rounded-lg text-xs text-gray-700">
+                      {role}
+                      <button onClick={() => removeRole(user, role)} className="hover:text-red-600 transition-colors" title={`${text.remove} ${role}`}>
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </span>
+                  ))}
+                  {user.roles.length === 0 && <span className="text-xs text-gray-400">{text.noRoles}</span>}
+                  {!isAddingRole && !user.isDeleted && available.length > 0 && (
+                    <button
+                      onClick={() => {
+                        setAddRoleFor(user.id);
+                        setSelectedRole(available[0] ?? "");
+                      }}
+                      className="flex items-center gap-1 px-2 py-0.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-lg text-xs text-gray-500 hover:text-gray-800 transition"
+                    >
+                      <PlusIcon className="h-3 w-3" /> {text.addRole}
+                    </button>
+                  )}
+                </div>
+
+                {isAddingRole && (
+                  <div className="flex items-center gap-2">
+                    <select
+                      value={selectedRole}
+                      onChange={(e) => setSelectedRole(e.target.value)}
+                      aria-label={text.addRole}
+                      className="rounded-lg border border-gray-300 px-2 py-1 text-sm"
+                    >
+                      {available.map((r) => (
+                        <option key={r} value={r}>
+                          {r}
+                        </option>
+                      ))}
+                    </select>
+                    <button
+                      onClick={() => assignRole(user)}
+                      disabled={roleLoading}
+                      className="rounded-lg bg-gray-900 text-white text-xs px-3 py-1.5 hover:bg-gray-800 disabled:opacity-50 transition"
+                    >
+                      {roleLoading ? "…" : text.add}
+                    </button>
+                    <button onClick={() => setAddRoleFor(null)} className="rounded-lg border border-gray-300 text-gray-700 text-xs px-3 py-1.5 hover:bg-gray-50 transition">
+                      {text.cancel}
+                    </button>
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/admin/CompanySettingsForm.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
+import type { SiteSettings } from "../api/services";
+import { toast } from "../toast";
+import { TextInput } from "../ui/TextInput";
+import { Toggle } from "../ui/Toggle";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultCompanySettingsFormStrings, type CompanySettingsFormStrings } from "./companySettingsFormStrings";
+
+export interface CompanySettingsFormProps {
+  /** The settings calls, such as `createSettingsService(api)`. */
+  service: { get: () => Promise<SiteSettings>; update: (settings: SiteSettings) => Promise<SiteSettings> };
+  strings?: TextOverrides<CompanySettingsFormStrings> | undefined;
+  /** Shown below the form once the settings have loaded, such as the `BrandingManager`. */
+  children?: ReactNode;
+}
+
+const EMPTY: SiteSettings = {
+  contactRecipientEmail: "",
+  companyName: "",
+  companyLegalName: "",
+  orgNumber: "",
+  vatRegistered: false,
+  streetAddress: "",
+  postalCode: "",
+  addressLocality: "",
+  addressRegion: "",
+  publicEmail: "",
+  publicPhone: "",
+};
+
+/**
+ * The admin form for the business details the public pages show: the contact recipient, names, org
+ * number and VAT, the address in parts, and the public email and phone.
+ */
+export function CompanySettingsForm({ service, strings, children }: CompanySettingsFormProps) {
+  const text = withDefaults(defaultCompanySettingsFormStrings, strings);
+  const [settings, setSettings] = useState<SiteSettings>(EMPTY);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [failed, setFailed] = useState(false);
+  // The latest service, so an inline one does not load the settings again on every render.
+  const serviceRef = useRef(service);
+  useEffect(() => {
+    serviceRef.current = service;
+  }, [service]);
+
+  useEffect(() => {
+    serviceRef.current
+      .get()
+      .then(setSettings)
+      .catch(() => {
+        // No form without the saved settings, since saving a blank one would erase them.
+        setFailed(true);
+        toast.error(text.loadFailed);
+      })
+      .finally(() => setLoading(false));
+  }, [text.loadFailed]);
+
+  const patch = (changes: Partial<SiteSettings>) => setSettings(prev => ({ ...prev, ...changes }));
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      setSettings(await serviceRef.current.update(settings));
+      toast.success(text.saved);
+    } catch (err) {
+      toast.error(err instanceof Error && err.message ? err.message : text.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <p className="text-gray-500">{text.loading}</p>;
+  if (failed) return <p className="text-gray-500">{text.loadFailed}</p>;
+
+  return (
+    <div className="space-y-8">
+      <form onSubmit={handleSubmit} className="max-w-md space-y-4">
+        <TextInput
+          label={text.contactRecipient}
+          name="contactRecipientEmail"
+          type="email"
+          value={settings.contactRecipientEmail}
+          onChange={e => patch({ contactRecipientEmail: e.target.value })}
+          required
+        />
+        <p className="text-xs text-gray-500">{text.contactRecipientHint}</p>
+
+        <TextInput label={text.companyName} name="companyName" value={settings.companyName} onChange={e => patch({ companyName: e.target.value })} required />
+        <TextInput label={text.legalName} name="companyLegalName" value={settings.companyLegalName} onChange={e => patch({ companyLegalName: e.target.value })} />
+        <p className="text-xs text-gray-500">{text.legalNameHint}</p>
+
+        <TextInput label={text.orgNumber} name="orgNumber" value={settings.orgNumber} onChange={e => patch({ orgNumber: e.target.value })} />
+        <Toggle label={text.vatRegistered} checked={settings.vatRegistered} onChange={v => patch({ vatRegistered: v })} />
+        <p className="text-xs text-gray-500">{text.vatHint}</p>
+
+        <TextInput label={text.streetAddress} name="streetAddress" value={settings.streetAddress} onChange={e => patch({ streetAddress: e.target.value })} required />
+        <div className="grid gap-4 sm:grid-cols-[8rem_1fr]">
+          <TextInput label={text.postalCode} name="postalCode" inputMode="numeric" value={settings.postalCode} onChange={e => patch({ postalCode: e.target.value })} />
+          <TextInput label={text.addressLocality} name="addressLocality" value={settings.addressLocality} onChange={e => patch({ addressLocality: e.target.value })} />
+        </div>
+        <TextInput label={text.addressRegion} name="addressRegion" value={settings.addressRegion} onChange={e => patch({ addressRegion: e.target.value })} />
+        <p className="text-xs text-gray-500">{text.addressHint}</p>
+        <TextInput label={text.publicEmail} name="publicEmail" type="email" value={settings.publicEmail} onChange={e => patch({ publicEmail: e.target.value })} required />
+        <TextInput label={text.publicPhone} name="publicPhone" value={settings.publicPhone} onChange={e => patch({ publicPhone: e.target.value })} required />
+
+        <button
+          type="submit"
+          disabled={saving}
+          className="rounded-button bg-button-primary-bg text-button-primary-text font-semibold px-5 py-2.5 hover:brightness-95 disabled:opacity-60 transition"
+        >
+          {saving ? text.saving : text.save}
+        </button>
+      </form>
+
+      {children}
+    </div>
+  );
+}

package/src/admin/LegalPagesEditor.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { LegalPage } from "../api/services";
+import { toast } from "../toast";
+import { TextInput } from "../ui/TextInput";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultLegalPagesEditorStrings, type LegalPagesEditorStrings } from "./legalPagesEditorStrings";
+import { LocaleTabs } from "./LocaleTabs";
+
+export interface LegalPagesEditorProps<K extends string, L extends string> {
+  /** The legal page calls, such as `createLegalService(api, publicApi)`. */
+  service: {
+    listAll: () => Promise<LegalPage<K>[]>;
+    save: (key: K, locale: L, title: string, bodyMarkdown: string) => Promise<unknown>;
+  };
+  /** The pages, in tab order. The first opens. */
+  keys: readonly K[];
+  /** Each page's tab label, such as `Terms`. */
+  keyLabels: Record<K, string>;
+  /** The locales each page is written in. The first opens. */
+  locales: readonly L[];
+  /** Each locale's tab label, such as `Norsk`. */
+  localeLabels: Record<L, string>;
+  strings?: TextOverrides<LegalPagesEditorStrings> | undefined;
+}
+
+type Draft = { title: string; bodyMarkdown: string };
+
+const emptyDraft: Draft = { title: "", bodyMarkdown: "" };
+
+/** The admin editor for the legal pages: one page and one locale at a time, with the title and the Markdown body. */
+export function LegalPagesEditor<K extends string, L extends string>({ service, keys, keyLabels, locales, localeLabels, strings }: LegalPagesEditorProps<K, L>) {
+  const text = withDefaults(defaultLegalPagesEditorStrings, strings);
+  const [drafts, setDrafts] = useState<Record<string, Draft>>({});
+  const [activeKey, setActiveKey] = useState<K | undefined>(keys[0]);
+  const [activeLocale, setActiveLocale] = useState<L | undefined>(locales[0]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [failed, setFailed] = useState(false);
+  // The latest service, so an inline one does not load the pages again on every render.
+  const serviceRef = useRef(service);
+  useEffect(() => {
+    serviceRef.current = service;
+  }, [service]);
+
+  useEffect(() => {
+    serviceRef.current
+      .listAll()
+      .then(pages => setDrafts(Object.fromEntries(pages.map(p => [`${p.key}:${p.locale}`, { title: p.title, bodyMarkdown: p.bodyMarkdown }]))))
+      .catch((err: unknown) => {
+        // No editor without the saved pages, since saving a blank one would erase it.
+        setFailed(true);
+        toast.error(err instanceof Error && err.message ? err.message : text.loadFailed);
+      })
+      .finally(() => setLoading(false));
+  }, [text.loadFailed]);
+
+  if (activeKey === undefined || activeLocale === undefined) return null;
+
+  const slot = `${activeKey}:${activeLocale}`;
+  const draft = drafts[slot] ?? emptyDraft;
+
+  const patch = (changes: Partial<Draft>) => setDrafts(prev => ({ ...prev, [slot]: { ...(prev[slot] ?? emptyDraft), ...changes } }));
+
+  const save = async () => {
+    if (draft.title.trim() === "" || draft.bodyMarkdown.trim() === "") {
+      toast.error(text.required);
+      return;
+    }
+    setSaving(true);
+    try {
+      await serviceRef.current.save(activeKey, activeLocale, draft.title.trim(), draft.bodyMarkdown);
+      toast.success(text.saved);
+    } catch (err) {
+      toast.error(err instanceof Error && err.message ? err.message : text.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <p className="text-gray-500">{text.loading}</p>;
+  if (failed) return <p className="text-gray-500">{text.loadFailed}</p>;
+
+  const filled = Object.fromEntries(locales.map(l => [l, (drafts[`${activeKey}:${l}`]?.bodyMarkdown ?? "") !== ""])) as Record<L, boolean>;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold text-gray-900">{text.heading}</h2>
+        <button
+          onClick={save}
+          disabled={saving}
+          className="rounded-button bg-button-primary-bg text-button-primary-text font-semibold px-5 py-2 text-sm hover:brightness-95 disabled:opacity-60 transition"
+        >
+          {saving ? text.saving : text.save}
+        </button>
+      </div>
+
+      <div className="flex gap-1">
+        {keys.map(key => (
+          <button
+            key={key}
+            onClick={() => setActiveKey(key)}
+            aria-pressed={key === activeKey}
+            className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${key === activeKey ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"}`}
+          >
+            {keyLabels[key]}
+          </button>
+        ))}
+      </div>
+
+      <LocaleTabs locales={locales} labels={localeLabels} active={activeLocale} onChange={setActiveLocale} filled={filled} notFilled={text.notFilled} />
+
+      <TextInput label={text.title} value={draft.title} onChange={e => patch({ title: e.target.value })} />
+
+      <div>
+        <label htmlFor="legal-body" className="block text-sm font-medium text-gray-700 mb-1">
+          {text.bodyMarkdown}
+        </label>
+        <textarea
+          id="legal-body"
+          rows={24}
+          value={draft.bodyMarkdown}
+          onChange={e => patch({ bodyMarkdown: e.target.value })}
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+    </div>
+  );
+}

package/src/admin/LocaleTabs.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+export interface LocaleTabsProps<L extends string> {
+  locales: readonly L[];
+  /** Each locale's tab label, such as `Norsk`. */
+  labels: Record<L, string>;
+  active: L;
+  onChange: (locale: L) => void;
+  /** Which locales have content. A locale marked false gets a dot titled `notFilled`. */
+  filled?: Partial<Record<L, boolean>> | undefined;
+  /** The dot's title, such as "Not filled in". */
+  notFilled?: string | undefined;
+}
+
+/** Tabs for editing one translation at a time. */
+export function LocaleTabs<L extends string>({ locales, labels, active, onChange, filled, notFilled = "Not filled in" }: LocaleTabsProps<L>) {
+  return (
+    <div className="flex items-center gap-1 border-b border-gray-200">
+      {locales.map(locale => (
+        <button
+          key={locale}
+          type="button"
+          onClick={() => onChange(locale)}
+          aria-pressed={locale === active}
+          className={`px-4 py-2 text-sm font-semibold border-b-2 -mb-px transition-colors ${
+            locale === active ? "border-gray-900 text-gray-900" : "border-transparent text-gray-500 hover:text-gray-900"
+          }`}
+        >
+          {labels[locale]}
+          {filled?.[locale] === false && <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 align-middle" title={notFilled} />}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/admin/StatHistoryChart.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultStatHistoryChartStrings, STAT_SERIES_COLORS, type StatHistoryChartStrings } from "./statHistoryChartStrings";
+
+/** One line on the chart. */
+export interface StatSeries<T> {
+  /** The field of each day's row the line plots. A missing or non-numeric value counts as zero. */
+  key: keyof T & string;
+  label: string;
+  /** The line's colour. Defaults to the next colour in `STAT_SERIES_COLORS`. */
+  color?: string | undefined;
+}
+
+export interface StatHistoryChartProps<T extends { date: string }> {
+  /** One row per day, oldest first, with `date` as `YYYY-MM-DD`. */
+  data: readonly T[];
+  series: readonly StatSeries<T>[];
+  strings?: TextOverrides<StatHistoryChartStrings> | undefined;
+}
+
+const W = 720;
+const H = 240;
+const PAD = { top: 16, right: 16, bottom: 28, left: 32 };
+
+/**
+ * A line per series over the days, with the scale from zero to the highest shown value. The legend
+ * buttons hide and show a line, and the scale follows the lines that are shown.
+ */
+export function StatHistoryChart<T extends { date: string }>({ data, series, strings }: StatHistoryChartProps<T>) {
+  const text = withDefaults(defaultStatHistoryChartStrings, strings);
+  const [hidden, setHidden] = useState<string[]>([]);
+
+  const toggle = (key: string) => setHidden(prev => (prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]));
+
+  if (data.length === 0) {
+    return <p className="text-sm text-gray-500">{text.empty}</p>;
+  }
+
+  const lines = series.map((s, i) => ({ ...s, color: s.color ?? STAT_SERIES_COLORS[i % STAT_SERIES_COLORS.length] }));
+  const shown = lines.filter(s => !hidden.includes(s.key));
+  const innerW = W - PAD.left - PAD.right;
+  const innerH = H - PAD.top - PAD.bottom;
+  // An API without a given series sends no value. It counts as zero rather than poisoning the scale with NaN.
+  const value = (d: T, key: keyof T) => Number(d[key]) || 0;
+  const maxVal = Math.max(1, ...data.flatMap(d => shown.map(s => value(d, s.key))));
+  const n = data.length;
+
+  const x = (i: number) => PAD.left + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+  const y = (v: number) => PAD.top + innerH - (v / maxVal) * innerH;
+
+  const path = (key: keyof T) => data.map((d, i) => `${i === 0 ? "M" : "L"} ${x(i).toFixed(1)} ${y(value(d, key)).toFixed(1)}`).join(" ");
+
+  const ticks = [...new Set([0, Math.round(maxVal / 2), maxVal])];
+  const labelIdx = [...new Set([0, Math.floor((n - 1) / 2), n - 1])];
+
+  return (
+    <div>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto" role="img" aria-label={text.chart}>
+        {ticks.map(t => (
+          <g key={t}>
+            <line x1={PAD.left} y1={y(t)} x2={W - PAD.right} y2={y(t)} className="stroke-chart-grid" strokeWidth={1} />
+            <text x={PAD.left - 6} y={y(t) + 3} textAnchor="end" fontSize={10} className="fill-chart-label">
+              {t}
+            </text>
+          </g>
+        ))}
+        {labelIdx.map(i => (
+          <text key={i} x={x(i)} y={H - 8} textAnchor="middle" fontSize={10} className="fill-chart-label">
+            {data[i]?.date.slice(5)}
+          </text>
+        ))}
+        {shown.map(s => (
+          <path key={s.key} d={path(s.key)} fill="none" stroke={s.color} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
+        ))}
+      </svg>
+      <div className="mt-3 flex flex-wrap gap-2">
+        {lines.map(s => {
+          const off = hidden.includes(s.key);
+          return (
+            <button
+              key={s.key}
+              type="button"
+              onClick={() => toggle(s.key)}
+              aria-pressed={!off}
+              className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition ${
+                off ? "border-gray-200 bg-white text-gray-400" : "border-gray-300 bg-gray-50 text-gray-700"
+              }`}
+            >
+              <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ backgroundColor: off ? "#d1d5db" : s.color }} />
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}