@nightkatana/kronosys-app 1.0.0-beta.2 → 1.0.0-beta.21

package/components/dashboard/KronosysTimePopoverField.tsx

@@ -1,8 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
-import { Clock } from "lucide-react";
+import { Check, Clock } from "lucide-react";
 
 import type { Lang } from "@/lib/dashboardCopy";
 import type { SettingsCopy } from "@/lib/settingsCopy";
@@ -40,7 +46,12 @@ type KronosysTimePopoverFieldProps = {
   lang: Lang;
   /** Aperçu localisé sous les sélecteurs : `true` = 24 h, `false` = 12 h (AM/PM). */
   use24HourClock?: boolean;
-  t: Pick<SettingsCopy, "timePickerPopoverTimeLabel" | "timePickerPopoverHourAria" | "timePickerPopoverMinuteAria">;
+  t: Pick<
+    SettingsCopy,
+    | "timePickerPopoverTimeLabel"
+    | "timePickerPopoverHourAria"
+    | "timePickerPopoverMinuteAria"
+  >;
 };
 
 export function KronosysTimePopoverField({
@@ -72,15 +83,19 @@ export function KronosysTimePopoverField({
     (h: number, m: number) => {
       onChange(formatTimeHHmm(h, m));
     },
-    [onChange]
+    [onChange],
   );
 
   const display = formatTimeHHmm(hour, minute);
+  const acceptAriaLabel = lang === "fr" ? "Accepter l'heure" : "Accept time";
   const displayLocalized = (() => {
     const d = new Date();
     d.setHours(hour, minute, 0, 0);
     const loc = lang === "fr" ? "fr-CA" : "en-CA";
-    return new Intl.DateTimeFormat(loc, { timeStyle: "short", hour12: !use24HourClock }).format(d);
+    return new Intl.DateTimeFormat(loc, {
+      timeStyle: "short",
+      hour12: !use24HourClock,
+    }).format(d);
   })();
 
   const updatePosition = useCallback(() => {
@@ -121,7 +136,10 @@ export function KronosysTimePopoverField({
     }
     const onDoc = (e: MouseEvent) => {
       const tNode = e.target as Node;
-      if (popoverRef.current?.contains(tNode) || triggerRef.current?.contains(tNode)) {
+      if (
+        popoverRef.current?.contains(tNode) ||
+        triggerRef.current?.contains(tNode)
+      ) {
         return;
       }
       setOpen(false);
@@ -159,7 +177,9 @@ export function KronosysTimePopoverField({
             }}
           >
             <div className="flex flex-wrap items-center justify-center gap-2">
-              <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t.timePickerPopoverTimeLabel}</span>
+              <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                {t.timePickerPopoverTimeLabel}
+              </span>
               <div className="inline-flex items-center gap-1.5">
                 <select
                   className="h-9 rounded-lg border border-violet-500/45 bg-white px-2.5 text-sm font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
@@ -195,12 +215,26 @@ export function KronosysTimePopoverField({
                   ))}
                 </select>
               </div>
+              <button
+                type="button"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-emerald-500/50 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-400/60 dark:bg-emerald-950/35 dark:text-emerald-200 dark:hover:bg-emerald-900/40"
+                aria-label={acceptAriaLabel}
+                onClick={() => {
+                  commit(hour, minute);
+                  setOpen(false);
+                }}
+              >
+                <Check className="h-4 w-4" strokeWidth={2.5} aria-hidden />
+              </button>
             </div>
-            <p className="mt-2 text-center text-xs text-zinc-500 dark:text-zinc-400" aria-hidden>
+            <p
+              className="mt-2 text-center text-xs text-zinc-500 dark:text-zinc-400"
+              aria-hidden
+            >
               {display} · {displayLocalized}
             </p>
           </div>,
-          document.body
+          document.body,
         )
       : null;
 
@@ -212,7 +246,9 @@ export function KronosysTimePopoverField({
         disabled={disabled}
         className={
           "inline-flex w-full max-w-md items-center justify-between gap-2 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-left text-sm outline-none ring-violet-500/30 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 " +
-          (disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:border-zinc-400 dark:hover:border-zinc-600")
+          (disabled
+            ? "cursor-not-allowed opacity-50"
+            : "cursor-pointer hover:border-zinc-400 dark:hover:border-zinc-600")
         }
         aria-label={ariaLabel}
         aria-expanded={open}
@@ -224,8 +260,14 @@ export function KronosysTimePopoverField({
           setOpen((o) => !o);
         }}
       >
-        <span className="min-w-0 flex-1 truncate font-mono text-sm tabular-nums text-zinc-900 dark:text-zinc-100">{display}</span>
-        <Clock className="h-4 w-4 shrink-0 opacity-70" strokeWidth={2} aria-hidden />
+        <span className="min-w-0 flex-1 truncate font-mono text-sm tabular-nums text-zinc-900 dark:text-zinc-100">
+          {display}
+        </span>
+        <Clock
+          className="h-4 w-4 shrink-0 opacity-70"
+          strokeWidth={2}
+          aria-hidden
+        />
       </button>
       {popover}
     </div>

package/components/dashboard/NewSessionScopeModal.tsx

@@ -16,6 +16,15 @@ export type NewSessionScopePayload =
       timeEndLocal?: string;
     };
 
+/** Résultat de la modale : portée + début de session (immédiat ou ISO passé/présent). */
+export type NewSessionConfirmPayload = {
+  scope: NewSessionScopePayload;
+  /** `null` = maintenant (comportement par défaut). */
+  sessionStartAtIso: string | null;
+  /** Fin de session (ISO) — obligatoire avec `sessionStartAtIso` pour une session entièrement passée. */
+  sessionEndAtIso: string | null;
+};
+
 const WD_EN = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 const WD_FR = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
 
@@ -34,6 +43,24 @@ function localHmNow(): string {
   return `${h}:${m}`;
 }
 
+/** Valeur pour `<input type="datetime-local">` (fuseau local du navigateur). */
+function localDatetimeLocalNow(): string {
+  const d = new Date();
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(
+    d.getHours(),
+  )}:${pad(d.getMinutes())}`;
+}
+
+/** Décalage par rapport à maintenant (ex. début de session il y a quelques minutes). */
+function localDatetimeLocalOffsetMs(offsetMs: number): string {
+  const d = new Date(Date.now() + offsetMs);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(
+    d.getHours(),
+  )}:${pad(d.getMinutes())}`;
+}
+
 function useEscapeClose(open: boolean, onClose: () => void) {
   useEffect(() => {
     if (!open) {
@@ -60,9 +87,14 @@ export function NewSessionScopeModal({
   lang: Lang;
   t: DashboardStrings;
   onCancel: () => void;
-  onConfirm: (scope: NewSessionScopePayload) => void;
+  onConfirm: (payload: NewSessionConfirmPayload) => void;
 }) {
   const titleId = useId();
+  const [timingMode, setTimingMode] = useState<"immediate" | "past">(
+    "immediate",
+  );
+  const [pastStartLocal, setPastStartLocal] = useState("");
+  const [pastEndLocal, setPastEndLocal] = useState("");
   const [mode, setMode] = useState<NewSessionScopePayload["mode"]>("none");
   const [maxHoursStr, setMaxHoursStr] = useState("4");
   const [dateFrom, setDateFrom] = useState("");
@@ -87,6 +119,9 @@ export function NewSessionScopeModal({
     if (!open) {
       return;
     }
+    setTimingMode("immediate");
+    setPastStartLocal("");
+    setPastEndLocal("");
     setMode("none");
     setMaxHoursStr("4");
     setDateFrom("");
@@ -110,37 +145,81 @@ export function NewSessionScopeModal({
 
   const handleSubmit = useCallback(() => {
     setError(null);
-    if (mode === "none") {
-      onConfirm({ mode: "none" });
-      return;
+    let sessionStartAtIso: string | null = null;
+    let sessionEndAtIso: string | null = null;
+    if (timingMode === "past") {
+      const rawStart = pastStartLocal.trim();
+      const rawEnd = pastEndLocal.trim();
+      if (!rawStart) {
+        setError(t.newSessionErrorPastMissing);
+        return;
+      }
+      if (!rawEnd) {
+        setError(t.newSessionErrorPastEndMissing);
+        return;
+      }
+      const msStart = Date.parse(rawStart);
+      const msEnd = Date.parse(rawEnd);
+      if (!Number.isFinite(msStart) || !Number.isFinite(msEnd)) {
+        setError(t.newSessionErrorPastInvalid);
+        return;
+      }
+      if (msStart > Date.now() + 60_000) {
+        setError(t.newSessionErrorPastFuture);
+        return;
+      }
+      if (msEnd > Date.now() + 60_000) {
+        setError(t.newSessionErrorPastEndFuture);
+        return;
+      }
+      if (msEnd <= msStart) {
+        setError(t.newSessionErrorPastEndBeforeStart);
+        return;
+      }
+      sessionStartAtIso = new Date(msStart).toISOString();
+      sessionEndAtIso = new Date(msEnd).toISOString();
+      const slackMs = 1000;
+      if (msStart >= Date.now() - slackMs) {
+        sessionStartAtIso = null;
+        sessionEndAtIso = null;
+      }
     }
-    if (mode === "maxWallClock") {
+
+    let scope: NewSessionScopePayload;
+    if (mode === "none") {
+      scope = { mode: "none" };
+    } else if (mode === "maxWallClock") {
       const h = Number(maxHoursStr.replace(",", "."));
       if (!Number.isFinite(h) || h < 0.1 || h > 8760) {
         setError(t.newSessionErrorMax);
         return;
       }
-      onConfirm({
+      scope = {
         mode: "maxWallClock",
         maxWallClockMinutes: Math.round(h * 60),
-      });
-      return;
-    }
-    if (mode === "calendar") {
+      };
+    } else if (mode === "calendar") {
+      const ymd = /^\d{4}-\d{2}-\d{2}$/;
       const a = dateFrom.trim();
       const b = dateTo.trim();
       if (!a && !b) {
         setError(t.newSessionErrorCalendar);
         return;
       }
-      onConfirm({
+      if ((a && !ymd.test(a)) || (b && !ymd.test(b))) {
+        setError(
+          lang === "fr"
+            ? "Utilisez une date complète (AAAA-MM-JJ) pour chaque champ renseigné."
+            : "Use a full date (YYYY-MM-DD) for each filled field.",
+        );
+        return;
+      }
+      scope = {
         mode: "calendar",
         ...(a ? { calendarStart: a } : {}),
         ...(b ? { calendarEnd: b } : {}),
-      });
-      return;
-    }
-    if (mode === "weekly") {
+      };
+    } else {
       const days = weekdays.map((on, i) => (on ? i : -1)).filter((i) => i >= 0);
       if (days.length === 0) {
         setError(t.newSessionErrorWeekly);
@@ -160,16 +239,17 @@ export function NewSessionScopeModal({
           );
           return;
         }
-        onConfirm({
+        scope = {
           mode: "weekly",
           weekdays: days,
           timeStartLocal: ts,
           timeEndLocal: te,
-        });
-        return;
+        };
+      } else {
+        scope = { mode: "weekly", weekdays: days };
       }
-      onConfirm({ mode: "weekly", weekdays: days });
     }
+    onConfirm({ scope, sessionStartAtIso, sessionEndAtIso });
   }, [
     dateFrom,
     dateTo,
@@ -177,11 +257,20 @@ export function NewSessionScopeModal({
     maxHoursStr,
     mode,
     onConfirm,
+    pastEndLocal,
+    pastStartLocal,
     t.newSessionErrorCalendar,
     t.newSessionErrorMax,
+    t.newSessionErrorPastEndBeforeStart,
+    t.newSessionErrorPastEndFuture,
+    t.newSessionErrorPastEndMissing,
+    t.newSessionErrorPastFuture,
+    t.newSessionErrorPastInvalid,
+    t.newSessionErrorPastMissing,
     t.newSessionErrorWeekly,
     timeFrom,
     timeTo,
+    timingMode,
     useTimeWindow,
     weekdays,
   ]);
@@ -214,7 +303,105 @@ export function NewSessionScopeModal({
         </div>
 
         <fieldset className="mt-4 space-y-2">
-          <legend className="sr-only">Mode</legend>
+          <legend className="mb-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">
+            {t.newSessionTimingSectionTitle}
+          </legend>
+          {(
+            [
+              ["immediate", t.newSessionTimingImmediate],
+              ["past", t.newSessionTimingPast],
+            ] 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-start-timing"
+                value={value}
+                checked={timingMode === value}
+                onChange={() => {
+                  setTimingMode(value);
+                  if (value === "past") {
+                    if (pastStartLocal.trim() === "") {
+                      setPastStartLocal(localDatetimeLocalOffsetMs(-5 * 60_000));
+                    }
+                    if (pastEndLocal.trim() === "") {
+                      setPastEndLocal(localDatetimeLocalNow());
+                    }
+                  }
+                }}
+                className="size-4 accent-violet-500"
+              />
+              {label}
+            </label>
+          ))}
+        </fieldset>
+
+        {timingMode === "past" ? (
+          <div className="mt-3 space-y-4">
+            <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.newSessionPastStartLabel}
+              </span>
+              <div className="flex flex-wrap items-center gap-2">
+                <input
+                  name="session-past-start"
+                  type="datetime-local"
+                  value={pastStartLocal}
+                  min="1000-01-01T00:00"
+                  max="9999-12-31T23:59"
+                  onChange={(e) => setPastStartLocal(e.target.value)}
+                  className="min-w-0 flex-1 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={() => setPastStartLocal(localDatetimeLocalOffsetMs(-5 * 60_000))}
+                >
+                  {t.newSessionNowBtn}
+                </button>
+              </div>
+              <span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">
+                {t.newSessionPastStartHint}
+              </span>
+            </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.newSessionPastEndLabel}
+              </span>
+              <div className="flex flex-wrap items-center gap-2">
+                <input
+                  name="session-past-end"
+                  type="datetime-local"
+                  value={pastEndLocal}
+                  min={
+                    pastStartLocal.trim() !== ""
+                      ? pastStartLocal
+                      : "1000-01-01T00:00"
+                  }
+                  max="9999-12-31T23:59"
+                  onChange={(e) => setPastEndLocal(e.target.value)}
+                  className="min-w-0 flex-1 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={() => setPastEndLocal(localDatetimeLocalNow())}
+                >
+                  {t.newSessionNowBtn}
+                </button>
+              </div>
+              <span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">
+                {t.newSessionPastEndHint}
+              </span>
+            </label>
+          </div>
+        ) : null}
+
+        <fieldset className="mt-6 space-y-2">
+          <legend className="sr-only">{t.newSessionScopeFieldsetLegend}</legend>
           {(
             [
               ["none", t.newSessionModeNone],
@@ -267,6 +454,8 @@ export function NewSessionScopeModal({
                 <input
                   type="date"
                   value={dateFrom}
+                  min="1000-01-01"
+                  max="9999-12-31"
                   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"
                 />
@@ -287,6 +476,8 @@ export function NewSessionScopeModal({
                 <input
                   type="date"
                   value={dateTo}
+                  min="1000-01-01"
+                  max="9999-12-31"
                   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"
                 />