@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/LanguageMenu.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Check, ChevronDown, Globe } from "lucide-react";
+import type { Lang } from "@/lib/dashboardCopy";
+
+const LANGS: Lang[] = ["en", "fr"];
+
+export function LanguageMenu({
+  lang,
+  labelEn,
+  labelFr,
+  menuHeading,
+  triggerAriaLabel,
+  onSelect,
+}: {
+  lang: Lang;
+  labelEn: string;
+  labelFr: string;
+  /** Titre court au-dessus des options (ex. « Langue » / « Language »). */
+  menuHeading: string;
+  triggerAriaLabel: string;
+  onSelect: (next: Lang) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const menuId = useId();
+
+  const labelFor = (code: Lang) => (code === "fr" ? labelFr : labelEn);
+  const currentLabel = labelFor(lang);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative inline-flex shrink-0" ref={rootRef}>
+      <button
+        type="button"
+        className={`inline-flex h-10 min-h-10 shrink-0 items-center gap-2 rounded-lg border px-2.5 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45 sm:px-3 ${
+          open
+            ? "border-violet-500/50 bg-violet-50 text-zinc-900 shadow-[0_0_0_1px_rgba(139,92,246,0.12)] dark:bg-zinc-800/90 dark:text-zinc-100"
+            : "border-zinc-300 bg-white text-zinc-800 hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800/60"
+        }`}
+        aria-label={triggerAriaLabel}
+        aria-haspopup="menu"
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={menuId}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <Globe size={18} className="shrink-0 text-violet-600 dark:text-violet-400/90" strokeWidth={1.75} aria-hidden />
+        <span className="max-w-36 truncate font-medium">{currentLabel}</span>
+        <ChevronDown
+          size={18}
+          className={`shrink-0 text-zinc-600 transition-transform duration-200 dark:text-zinc-500 ${open ? "rotate-180" : ""}`}
+          strokeWidth={2}
+          aria-hidden
+        />
+      </button>
+      {open ? (
+        <div
+          id={menuId}
+          role="menu"
+          aria-orientation="vertical"
+          className="absolute right-0 top-[calc(100%+0.375rem)] z-80 min-w-46 overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-lg shadow-zinc-900/12 ring-1 ring-zinc-200/80 backdrop-blur-sm dark:border-zinc-600/90 dark:bg-zinc-900/98 dark:shadow-2xl dark:shadow-black/50 dark:ring-violet-500/15"
+        >
+          <div className="border-b border-zinc-200 bg-zinc-50/80 px-3 py-2 dark:border-zinc-800/90 dark:bg-transparent">
+            <p className="text-[0.65rem] font-medium uppercase tracking-wider text-zinc-600 dark:text-zinc-500">
+              {menuHeading}
+            </p>
+          </div>
+          <div className="bg-white p-1 dark:bg-zinc-900/95">
+            {LANGS.map((code) => {
+              const selected = lang === code;
+              return (
+                <button
+                  key={code}
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={selected ? "true" : "false"}
+                  className={`flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition ${
+                    selected
+                      ? "bg-violet-100 text-violet-950 dark:bg-violet-950/55 dark:text-violet-100"
+                      : "text-zinc-800 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800/75"
+                  }`}
+                  onClick={() => {
+                    onSelect(code);
+                    setOpen(false);
+                  }}
+                >
+                  <span className="font-medium">{labelFor(code)}</span>
+                  {selected ? (
+                    <Check size={16} className="shrink-0 text-violet-600 dark:text-violet-400" strokeWidth={2.5} aria-hidden />
+                  ) : (
+                    <span className="h-4 w-4 shrink-0" aria-hidden />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/dashboard/MongoMirrorSyncLine.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { InlineMetricHelpTrigger } from "@/components/dashboard/InlineMetricHelpTrigger";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+
+export type MongoMirrorSyncStatus = "disabled" | "unknown" | "aligned" | "localAhead" | "mongoAhead";
+
+export type MongoMirrorSyncPayload = {
+  localPersistedCount: number;
+  mongoDocumentCount: number | null;
+  status: MongoMirrorSyncStatus;
+};
+
+export function MongoMirrorSyncLine({
+  t,
+  sync,
+  mongoEnabled,
+}: Readonly<{
+  t: DashboardStrings;
+  sync: MongoMirrorSyncPayload | undefined;
+  mongoEnabled: boolean;
+}>) {
+  if (!mongoEnabled || !sync || sync.status === "disabled") {
+    return null;
+  }
+
+  const mongoDisplay = sync.mongoDocumentCount === null ? "—" : String(sync.mongoDocumentCount);
+  const statusText =
+    sync.status === "aligned"
+      ? t.mongoSyncStatusAligned
+      : sync.status === "unknown"
+        ? t.mongoSyncStatusUnknown
+        : sync.status === "localAhead"
+          ? t.mongoSyncStatusLocalAhead
+          : t.mongoSyncStatusMongoAhead;
+
+  const statusClass =
+    sync.status === "aligned" ? "text-emerald-400/90" : "text-amber-400/90";
+
+  return (
+    <div
+      className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-zinc-400"
+      role="status"
+      aria-live="polite"
+    >
+      <span>
+        <span className="text-zinc-500">{t.mongoSyncLocalLabel}:</span> {sync.localPersistedCount}
+        <span className="mx-1.5 text-zinc-600" aria-hidden>
+          ·
+        </span>
+        <span className="text-zinc-500">{t.mongoSyncMongoLabel}:</span> {mongoDisplay}
+      </span>
+      <span className={`font-medium ${statusClass}`}>{statusText}</span>
+      <InlineMetricHelpTrigger ariaLabel={t.mongoSyncHelpAriaLabel} body={t.mongoSyncHelpBody}       />
+    </div>
+  );
+}

package/components/dashboard/NewSessionScopeModal.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import { useCallback, useEffect, useId, useState } from "react";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import { tbModalPrimary } from "@/lib/translucentButtonClasses";
+import { InlineMetricHelpTrigger } from "@/components/dashboard/InlineMetricHelpTrigger";
+
+export type NewSessionScopePayload =
+  | { mode: "none" }
+  | { mode: "maxWallClock"; maxWallClockMinutes: number }
+  | { mode: "calendar"; calendarStart?: string; calendarEnd?: string }
+  | {
+      mode: "weekly";
+      weekdays: number[];
+      timeStartLocal?: string;
+      timeEndLocal?: string;
+    };
+
+const WD_EN = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const WD_FR = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
+
+function localYmdToday(): string {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+function localHmNow(): string {
+  const now = new Date();
+  const h = String(now.getHours()).padStart(2, "0");
+  const m = String(now.getMinutes()).padStart(2, "0");
+  return `${h}:${m}`;
+}
+
+function useEscapeClose(open: boolean, onClose: () => void) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+}
+
+export function NewSessionScopeModal({
+  open,
+  lang,
+  t,
+  onCancel,
+  onConfirm,
+}: {
+  open: boolean;
+  lang: Lang;
+  t: DashboardStrings;
+  onCancel: () => void;
+  onConfirm: (scope: NewSessionScopePayload) => void;
+}) {
+  const titleId = useId();
+  const [mode, setMode] = useState<NewSessionScopePayload["mode"]>("none");
+  const [maxHoursStr, setMaxHoursStr] = useState("4");
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+  const [weekdays, setWeekdays] = useState<boolean[]>(() => [
+    false,
+    true,
+    true,
+    true,
+    true,
+    true,
+    false,
+  ]);
+  const [useTimeWindow, setUseTimeWindow] = useState(false);
+  const [timeFrom, setTimeFrom] = useState("09:00");
+  const [timeTo, setTimeTo] = useState("17:00");
+  const [error, setError] = useState<string | null>(null);
+
+  useEscapeClose(open, onCancel);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setMode("none");
+    setMaxHoursStr("4");
+    setDateFrom("");
+    setDateTo("");
+    setWeekdays([false, true, true, true, true, true, false]);
+    setUseTimeWindow(false);
+    setTimeFrom("09:00");
+    setTimeTo("17:00");
+    setError(null);
+  }, [open]);
+
+  const wdLabels = lang === "fr" ? WD_FR : WD_EN;
+
+  const toggleDay = useCallback((i: number) => {
+    setWeekdays((prev) => {
+      const next = [...prev];
+      next[i] = !next[i];
+      return next;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    setError(null);
+    if (mode === "none") {
+      onConfirm({ mode: "none" });
+      return;
+    }
+    if (mode === "maxWallClock") {
+      const h = Number(maxHoursStr.replace(",", "."));
+      if (!Number.isFinite(h) || h < 0.1 || h > 8760) {
+        setError(t.newSessionErrorMax);
+        return;
+      }
+      onConfirm({
+        mode: "maxWallClock",
+        maxWallClockMinutes: Math.round(h * 60),
+      });
+      return;
+    }
+    if (mode === "calendar") {
+      const a = dateFrom.trim();
+      const b = dateTo.trim();
+      if (!a && !b) {
+        setError(t.newSessionErrorCalendar);
+        return;
+      }
+      onConfirm({
+        mode: "calendar",
+        ...(a ? { calendarStart: a } : {}),
+        ...(b ? { calendarEnd: b } : {}),
+      });
+      return;
+    }
+    if (mode === "weekly") {
+      const days = weekdays.map((on, i) => (on ? i : -1)).filter((i) => i >= 0);
+      if (days.length === 0) {
+        setError(t.newSessionErrorWeekly);
+        return;
+      }
+      if (useTimeWindow) {
+        const ts = timeFrom.trim();
+        const te = timeTo.trim();
+        if (
+          !/^([01]?\d|2[0-3]):[0-5]\d$/.test(ts) ||
+          !/^([01]?\d|2[0-3]):[0-5]\d$/.test(te)
+        ) {
+          setError(
+            lang === "fr"
+              ? "Heures au format HH:mm (24 h)."
+              : "Use HH:mm (24 h) for times.",
+          );
+          return;
+        }
+        onConfirm({
+          mode: "weekly",
+          weekdays: days,
+          timeStartLocal: ts,
+          timeEndLocal: te,
+        });
+        return;
+      }
+      onConfirm({ mode: "weekly", weekdays: days });
+    }
+  }, [
+    dateFrom,
+    dateTo,
+    lang,
+    maxHoursStr,
+    mode,
+    onConfirm,
+    t.newSessionErrorCalendar,
+    t.newSessionErrorMax,
+    t.newSessionErrorWeekly,
+    timeFrom,
+    timeTo,
+    useTimeWindow,
+    weekdays,
+  ]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+        <div className="flex items-start justify-between gap-2">
+          <h2
+            id={titleId}
+            className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"
+          >
+            {t.newSessionModalTitle}
+          </h2>
+          <InlineMetricHelpTrigger
+            ariaLabel={t.newSessionModalHelpAria}
+            body={t.newSessionModalHelpBody}
+            preserveLineBreaks
+            panelClassName="w-[min(calc(100vw-2rem),26rem)]"
+          />
+        </div>
+
+        <fieldset className="mt-4 space-y-2">
+          <legend className="sr-only">Mode</legend>
+          {(
+            [
+              ["none", t.newSessionModeNone],
+              ["maxWallClock", t.newSessionModeMax],
+              ["calendar", t.newSessionModeCalendar],
+              ["weekly", t.newSessionModeWeekly],
+            ] as const
+          ).map(([value, label]) => (
+            <label
+              key={value}
+              className="flex cursor-pointer items-center gap-2 rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-800 hover:bg-zinc-100/90 has-[:checked]:border-violet-500/50 has-[:checked]:bg-violet-50 dark:border-zinc-700/80 dark:text-zinc-200 dark:hover:bg-zinc-800/50 dark:has-[:checked]:border-violet-500/60 dark:has-[:checked]:bg-violet-950/30"
+            >
+              <input
+                type="radio"
+                name="session-scope-mode"
+                value={value}
+                checked={mode === value}
+                onChange={() => setMode(value)}
+                className="size-4 accent-violet-500"
+              />
+              {label}
+            </label>
+          ))}
+        </fieldset>
+
+        {mode === "maxWallClock" ? (
+          <label className="mt-4 block text-sm text-zinc-700 dark:text-zinc-300">
+            <span className="mb-1 block font-medium text-zinc-800 dark:text-zinc-200">
+              {t.newSessionMaxHoursLabel}
+            </span>
+            <input
+              type="number"
+              min={0.1}
+              max={8760}
+              step={0.1}
+              value={maxHoursStr}
+              onChange={(e) => setMaxHoursStr(e.target.value)}
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+            />
+          </label>
+        ) : null}
+
+        {mode === "calendar" ? (
+          <div className="mt-4 grid gap-3 sm:grid-cols-2">
+            <label className="block text-sm text-zinc-700 dark:text-zinc-300">
+              <span className="mb-1 block font-medium text-zinc-800 dark:text-zinc-200">
+                {t.newSessionDateFromLabel}
+              </span>
+              <div className="flex items-center gap-2">
+                <input
+                  type="date"
+                  value={dateFrom}
+                  onChange={(e) => setDateFrom(e.target.value)}
+                  className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+                />
+                <button
+                  type="button"
+                  className="shrink-0 rounded-lg border border-zinc-300 px-2.5 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                  onClick={() => setDateFrom(localYmdToday())}
+                >
+                  {t.newSessionTodayBtn}
+                </button>
+              </div>
+            </label>
+            <label className="block text-sm text-zinc-700 dark:text-zinc-300">
+              <span className="mb-1 block font-medium text-zinc-800 dark:text-zinc-200">
+                {t.newSessionDateToLabel}
+              </span>
+              <div className="flex items-center gap-2">
+                <input
+                  type="date"
+                  value={dateTo}
+                  onChange={(e) => setDateTo(e.target.value)}
+                  className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+                />
+                <button
+                  type="button"
+                  className="shrink-0 rounded-lg border border-zinc-300 px-2.5 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                  onClick={() => setDateTo(localYmdToday())}
+                >
+                  {t.newSessionTodayBtn}
+                </button>
+              </div>
+            </label>
+          </div>
+        ) : null}
+
+        {mode === "weekly" ? (
+          <div className="mt-4 space-y-3">
+            <p className="text-sm font-medium text-zinc-200">
+              {t.newSessionWeekdaysLegend}
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {wdLabels.map((label, i) => (
+                <label
+                  key={label}
+                  className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-zinc-300 px-2 py-1.5 text-xs text-zinc-800 hover:bg-zinc-100 has-[:checked]:border-violet-500/50 has-[:checked]:bg-violet-50 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800/60 dark:has-[:checked]:border-violet-500/60 dark:has-[:checked]:bg-violet-950/35"
+                >
+                  <input
+                    type="checkbox"
+                    checked={weekdays[i]}
+                    onChange={() => toggleDay(i)}
+                    className="size-3.5 accent-violet-500"
+                  />
+                  {label}
+                </label>
+              ))}
+            </div>
+            <label className="flex cursor-pointer items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
+              <input
+                type="checkbox"
+                checked={useTimeWindow}
+                onChange={(e) => setUseTimeWindow(e.target.checked)}
+                className="size-4 accent-violet-500"
+              />
+              {t.newSessionUseTimeWindow}
+            </label>
+            {useTimeWindow ? (
+              <div className="grid gap-3 sm:grid-cols-2">
+                <label className="block text-sm text-zinc-700 dark:text-zinc-300">
+                  <span className="mb-1 block font-medium text-zinc-800 dark:text-zinc-200">
+                    {t.newSessionTimeFromLabel}
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="time"
+                      value={timeFrom}
+                      onChange={(e) => setTimeFrom(e.target.value)}
+                      className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+                    />
+                    <button
+                      type="button"
+                      className="shrink-0 rounded-lg border border-zinc-300 px-2.5 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                      onClick={() => setTimeFrom(localHmNow())}
+                    >
+                      {t.newSessionNowBtn}
+                    </button>
+                  </div>
+                </label>
+                <label className="block text-sm text-zinc-700 dark:text-zinc-300">
+                  <span className="mb-1 block font-medium text-zinc-800 dark:text-zinc-200">
+                    {t.newSessionTimeToLabel}
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="time"
+                      value={timeTo}
+                      onChange={(e) => setTimeTo(e.target.value)}
+                      className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+                    />
+                    <button
+                      type="button"
+                      className="shrink-0 rounded-lg border border-zinc-300 px-2.5 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                      onClick={() => setTimeTo(localHmNow())}
+                    >
+                      {t.newSessionNowBtn}
+                    </button>
+                  </div>
+                </label>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {error ? (
+          <p
+            className="mt-3 text-sm text-red-700 dark:text-amber-200"
+            role="alert"
+          >
+            {error}
+          </p>
+        ) : null}
+
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-zinc-300 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            onClick={onCancel}
+          >
+            {t.newSessionCancelBtn}
+          </button>
+          <button
+            type="button"
+            className={tbModalPrimary}
+            onClick={handleSubmit}
+          >
+            {t.newSessionStartBtn}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}