@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/KronosysDatetimePopoverField.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { Calendar } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { enUS, fr } from "date-fns/locale";
+import "react-day-picker/style.css";
+
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import { DEFAULT_DASHBOARD_TIME_ZONE, isValidIanaTimeZone } from "@/lib/dashboardTimeZone";
+import { TASK_PAST_DATETIME_TRIGGER_CLASS } from "./taskFieldStyles";
+
+function pad2(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+export function formatDatetimeLocalValue(d: Date): string {
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(
+    d.getDate(),
+  )}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+
+export function parseDatetimeLocalValue(s: string): Date | undefined {
+  const t = s.trim();
+  if (!t) {
+    return undefined;
+  }
+  const d = new Date(t);
+  return Number.isNaN(d.getTime()) ? undefined : d;
+}
+
+const POPOVER_MAX_H = 400;
+const GAP = 8;
+
+type KronosysDatetimePopoverFieldProps = {
+  value: string;
+  onChange: (next: string) => void;
+  onBlur?: () => void;
+  "aria-label": string;
+  lang: Lang;
+  /** Fuseau IANA pour l’aperçu textuel (le champ reste en heure locale du navigateur). */
+  displayTimeZone?: string;
+  /** Aperçu textuel : `true` = 24 h, `false` = 12 h (AM/PM). */
+  use24HourClock?: boolean;
+  t: Pick<
+    DashboardStrings,
+    | "taskPastDatetimePlaceholder"
+    | "taskPastDatetimeTimeLabel"
+    | "taskPastDatetimeHourAria"
+    | "taskPastDatetimeMinuteAria"
+    | "taskPastDatetimeTodayBtn"
+    | "taskPastDatetimeNowBtn"
+  >;
+};
+
+export function KronosysDatetimePopoverField({
+  value,
+  onChange,
+  onBlur,
+  "aria-label": ariaLabel,
+  lang,
+  displayTimeZone = DEFAULT_DASHBOARD_TIME_ZONE,
+  use24HourClock = true,
+  t,
+}: KronosysDatetimePopoverFieldProps) {
+  const [open, setOpen] = useState(false);
+  const wasOpenRef = useRef(false);
+  const [pos, setPos] = useState({ top: 0, left: 0, maxW: 300 });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const parsed = parseDatetimeLocalValue(value);
+  const [selectedDay, setSelectedDay] = useState<Date | undefined>(parsed);
+  const [hour, setHour] = useState(parsed?.getHours() ?? 12);
+  const [minute, setMinute] = useState(parsed?.getMinutes() ?? 0);
+
+  useEffect(() => {
+    const p = parseDatetimeLocalValue(value);
+    setSelectedDay(p);
+    if (p) {
+      setHour(p.getHours());
+      setMinute(p.getMinutes());
+    }
+  }, [value]);
+
+  const commitFrom = useCallback(
+    (day: Date | undefined, h: number, m: number) => {
+      const base = day ?? selectedDay ?? new Date();
+      const next = new Date(base);
+      next.setHours(h, m, 0, 0);
+      onChange(formatDatetimeLocalValue(next));
+    },
+    [onChange, selectedDay],
+  );
+
+  const updatePosition = useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) {
+      return;
+    }
+    const r = el.getBoundingClientRect();
+    const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+    const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+    const maxW = Math.min(300, vw - 16);
+    let top = r.bottom + GAP;
+    let left = r.left + r.width / 2 - maxW / 2;
+    left = Math.max(8, Math.min(left, vw - maxW - 8));
+    if (top + POPOVER_MAX_H > vh - 8) {
+      top = Math.max(8, r.top - GAP - POPOVER_MAX_H);
+    }
+    setPos({ top, left, maxW });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    updatePosition();
+    const ro = () => updatePosition();
+    window.addEventListener("resize", ro);
+    window.addEventListener("scroll", ro, true);
+    return () => {
+      window.removeEventListener("resize", ro);
+      window.removeEventListener("scroll", ro, true);
+    };
+  }, [open, updatePosition]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      const tNode = e.target as Node;
+      if (
+        popoverRef.current?.contains(tNode) ||
+        triggerRef.current?.contains(tNode)
+      ) {
+        return;
+      }
+      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]);
+
+  useEffect(() => {
+    if (open) {
+      wasOpenRef.current = true;
+      return;
+    }
+    if (wasOpenRef.current) {
+      wasOpenRef.current = false;
+      onBlur?.();
+    }
+  }, [open, onBlur]);
+
+  const locale = lang === "fr" ? fr : enUS;
+
+  const display =
+    parsed !== undefined
+      ? new Intl.DateTimeFormat(lang === "fr" ? "fr-CA" : "en-CA", {
+          dateStyle: "short",
+          timeStyle: "short",
+          hour12: !use24HourClock,
+          ...(displayTimeZone.trim() && isValidIanaTimeZone(displayTimeZone.trim())
+            ? { timeZone: displayTimeZone.trim() }
+            : {}),
+        }).format(parsed)
+      : null;
+
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: 60 }, (_, i) => i);
+
+  const popover =
+    open && typeof document !== "undefined"
+      ? createPortal(
+          <div
+            ref={popoverRef}
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+            className="kronosys-datetime-popover fixed z-[200] rounded-xl border border-violet-500/45 bg-zinc-50 p-3 shadow-2xl dark:border-violet-400/45 dark:bg-zinc-900"
+            style={{
+              top: pos.top,
+              left: pos.left,
+              width: pos.maxW,
+              maxHeight: POPOVER_MAX_H,
+            }}
+          >
+            <DayPicker
+              mode="single"
+              required={false}
+              selected={selectedDay}
+              defaultMonth={selectedDay ?? new Date()}
+              onSelect={(d) => {
+                setSelectedDay(d);
+                if (d) {
+                  commitFrom(d, hour, minute);
+                }
+              }}
+              locale={locale}
+              classNames={{
+                button_previous:
+                  "rdp-button_previous rounded-lg border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
+                button_next:
+                  "rdp-button_next rounded-lg border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
+                caption_label:
+                  "rdp-caption_label text-sm font-semibold text-zinc-800 dark:text-zinc-100",
+                weekday: "rdp-weekday text-zinc-500 dark:text-zinc-400",
+              }}
+              components={{
+                Chevron: (props) =>
+                  props.orientation === "left" ? (
+                    <span
+                      className="text-base leading-none font-semibold"
+                      aria-hidden
+                    >
+                      ‹
+                    </span>
+                  ) : (
+                    <span
+                      className="text-base leading-none font-semibold"
+                      aria-hidden
+                    >
+                      ›
+                    </span>
+                  ),
+              }}
+            />
+            <div className="mt-3 flex flex-wrap items-center justify-center gap-2 border-t border-zinc-200 pt-3 dark:border-zinc-700/80">
+              <button
+                type="button"
+                className="rounded-lg border border-zinc-300 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+                onClick={() => {
+                  const now = new Date();
+                  const today = new Date(
+                    now.getFullYear(),
+                    now.getMonth(),
+                    now.getDate(),
+                    hour,
+                    minute,
+                    0,
+                    0,
+                  );
+                  setSelectedDay(today);
+                  commitFrom(today, hour, minute);
+                }}
+              >
+                {t.taskPastDatetimeTodayBtn}
+              </button>
+              <button
+                type="button"
+                className="rounded-lg border border-violet-500/45 bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-700 hover:bg-violet-100 dark:border-violet-400/55 dark:bg-violet-950/35 dark:text-violet-200 dark:hover:bg-violet-900/40"
+                onClick={() => {
+                  const now = new Date();
+                  const h = now.getHours();
+                  const m = now.getMinutes();
+                  setSelectedDay(now);
+                  setHour(h);
+                  setMinute(m);
+                  commitFrom(now, h, m);
+                }}
+              >
+                {t.taskPastDatetimeNowBtn}
+              </button>
+            </div>
+            <div className="mt-3 flex flex-wrap items-center justify-center gap-2 border-t border-zinc-200 pt-3 dark:border-zinc-700/80">
+              <label className="flex items-center gap-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                <span className="whitespace-nowrap">
+                  {t.taskPastDatetimeTimeLabel}
+                </span>
+                <select
+                  className="h-8 rounded-lg border border-violet-500/45 bg-white px-2 text-xs font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
+                  value={hour}
+                  onChange={(e) => {
+                    const h = Number(e.target.value);
+                    setHour(h);
+                    commitFrom(selectedDay, h, minute);
+                  }}
+                  aria-label={t.taskPastDatetimeHourAria}
+                >
+                  {hours.map((h) => (
+                    <option key={h} value={h}>
+                      {pad2(h)}
+                    </option>
+                  ))}
+                </select>
+                <span className="font-mono text-zinc-500">:</span>
+                <select
+                  className="h-8 rounded-lg border border-violet-500/45 bg-white px-2 text-xs font-mono text-zinc-900 outline-none dark:border-violet-400/50 dark:bg-zinc-800 dark:text-zinc-100"
+                  value={minute}
+                  onChange={(e) => {
+                    const m = Number(e.target.value);
+                    setMinute(m);
+                    commitFrom(selectedDay, hour, m);
+                  }}
+                  aria-label={t.taskPastDatetimeMinuteAria}
+                >
+                  {minutes.map((m) => (
+                    <option key={m} value={m}>
+                      {pad2(m)}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            </div>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <div className="inline-flex min-w-0 max-w-full shrink-0">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`${TASK_PAST_DATETIME_TRIGGER_CLASS} inline-flex max-w-full cursor-pointer items-center gap-2 text-left`}
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span
+          className={`inline-block min-w-0 max-w-full flex-1 truncate text-left font-mono text-xs tabular-nums ${
+            display
+              ? "text-zinc-800 dark:text-zinc-100"
+              : "text-zinc-500 dark:text-zinc-500"
+          }`}
+        >
+          {display ?? t.taskPastDatetimePlaceholder}
+        </span>
+        <Calendar
+          className="h-3.5 w-3.5 shrink-0 opacity-70"
+          strokeWidth={2}
+          aria-hidden
+        />
+      </button>
+      {popover}
+    </div>
+  );
+}

package/components/dashboard/KronosysTimePopoverField.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Clock } from "lucide-react";
+
+import type { Lang } from "@/lib/dashboardCopy";
+import type { SettingsCopy } from "@/lib/settingsCopy";
+
+const TIME_RE = /^([01]?\d|2[0-3]):([0-5]\d)$/;
+
+function pad2(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+export function parseTimeHHmm(s: string): { h: number; m: number } {
+  const t = s.trim();
+  const m = TIME_RE.exec(t);
+  if (m) {
+    return { h: Number(m[1]), m: Number(m[2]) };
+  }
+  return { h: 9, m: 0 };
+}
+
+export function formatTimeHHmm(h: number, m: number): string {
+  const hh = ((h % 24) + 24) % 24;
+  const mm = ((m % 60) + 60) % 60;
+  return `${pad2(hh)}:${pad2(mm)}`;
+}
+
+const POPOVER_MAX_H = 200;
+const GAP = 8;
+
+type KronosysTimePopoverFieldProps = {
+  value: string;
+  onChange: (next: string) => void;
+  disabled?: boolean;
+  className?: string;
+  "aria-label": string;
+  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">;
+};
+
+export function KronosysTimePopoverField({
+  value,
+  onChange,
+  disabled,
+  className = "",
+  "aria-label": ariaLabel,
+  lang,
+  use24HourClock = true,
+  t,
+}: KronosysTimePopoverFieldProps) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ top: 0, left: 0, maxW: 280 });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const init = parseTimeHHmm(value);
+  const [hour, setHour] = useState(init.h);
+  const [minute, setMinute] = useState(init.m);
+
+  useEffect(() => {
+    const { h, m } = parseTimeHHmm(value);
+    setHour(h);
+    setMinute(m);
+  }, [value]);
+
+  const commit = useCallback(
+    (h: number, m: number) => {
+      onChange(formatTimeHHmm(h, m));
+    },
+    [onChange]
+  );
+
+  const display = formatTimeHHmm(hour, minute);
+  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);
+  })();
+
+  const updatePosition = useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) {
+      return;
+    }
+    const r = el.getBoundingClientRect();
+    const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+    const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+    const maxW = Math.min(280, vw - 16);
+    let top = r.bottom + GAP;
+    let left = r.left + r.width / 2 - maxW / 2;
+    left = Math.max(8, Math.min(left, vw - maxW - 8));
+    if (top + POPOVER_MAX_H > vh - 8) {
+      top = Math.max(8, r.top - GAP - POPOVER_MAX_H);
+    }
+    setPos({ top, left, maxW });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!open || disabled) {
+      return;
+    }
+    updatePosition();
+    const ro = () => updatePosition();
+    window.addEventListener("resize", ro);
+    window.addEventListener("scroll", ro, true);
+    return () => {
+      window.removeEventListener("resize", ro);
+      window.removeEventListener("scroll", ro, true);
+    };
+  }, [open, disabled, updatePosition]);
+
+  useEffect(() => {
+    if (!open || disabled) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      const tNode = e.target as Node;
+      if (popoverRef.current?.contains(tNode) || triggerRef.current?.contains(tNode)) {
+        return;
+      }
+      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, disabled]);
+
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: 60 }, (_, i) => i);
+
+  const popover =
+    open && !disabled && typeof document !== "undefined"
+      ? createPortal(
+          <div
+            ref={popoverRef}
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+            className="kronosys-time-popover fixed z-[200] rounded-xl border border-violet-500/45 bg-zinc-50 p-3 shadow-2xl dark:border-violet-400/45 dark:bg-zinc-900"
+            style={{
+              top: pos.top,
+              left: pos.left,
+              width: pos.maxW,
+              maxHeight: POPOVER_MAX_H,
+            }}
+          >
+            <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>
+              <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"
+                  value={hour}
+                  onChange={(e) => {
+                    const h = Number(e.target.value);
+                    setHour(h);
+                    commit(h, minute);
+                  }}
+                  aria-label={t.timePickerPopoverHourAria}
+                >
+                  {hours.map((h) => (
+                    <option key={h} value={h}>
+                      {pad2(h)}
+                    </option>
+                  ))}
+                </select>
+                <span className="font-mono text-zinc-500">:</span>
+                <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"
+                  value={minute}
+                  onChange={(e) => {
+                    const m = Number(e.target.value);
+                    setMinute(m);
+                    commit(hour, m);
+                  }}
+                  aria-label={t.timePickerPopoverMinuteAria}
+                >
+                  {minutes.map((m) => (
+                    <option key={m} value={m}>
+                      {pad2(m)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            <p className="mt-2 text-center text-xs text-zinc-500 dark:text-zinc-400" aria-hidden>
+              {display} · {displayLocalized}
+            </p>
+          </div>,
+          document.body
+        )
+      : null;
+
+  return (
+    <div className={`inline-flex min-w-0 max-w-full ${className}`}>
+      <button
+        ref={triggerRef}
+        type="button"
+        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")
+        }
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        onClick={() => {
+          if (disabled) {
+            return;
+          }
+          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 />
+      </button>
+      {popover}
+    </div>
+  );
+}