@open-mercato/core 0.6.4-develop.4217.1.c9aa050183 → 0.6.4-develop.4239.1.4a264a5828

package/dist/modules/staff/lib/timesheets-ui/CalendarPicker.js

@@ -0,0 +1,209 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+function getMonday(date) {
+  const result = new Date(date);
+  const day = result.getDay();
+  const diff = day === 0 ? -6 : 1 - day;
+  result.setDate(result.getDate() + diff);
+  result.setHours(0, 0, 0, 0);
+  return result;
+}
+function getWeekNumber(date) {
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  target.setUTCDate(target.getUTCDate() + 4 - (target.getUTCDay() || 7));
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
+  return Math.ceil(((target.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+}
+function isSameDay(first, second) {
+  return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
+}
+function isSameWeek(first, second) {
+  return isSameDay(getMonday(first), getMonday(second));
+}
+function buildWeeks(year, month) {
+  const firstDay = new Date(year, month, 1);
+  const start = getMonday(firstDay);
+  const weeks = [];
+  const current = new Date(start);
+  for (let weekIdx = 0; weekIdx < 6; weekIdx++) {
+    const week = [];
+    for (let dayIdx = 0; dayIdx < 7; dayIdx++) {
+      week.push(new Date(current));
+      current.setDate(current.getDate() + 1);
+    }
+    weeks.push(week);
+    if (current.getMonth() !== month && weekIdx >= 3) break;
+  }
+  return weeks;
+}
+function getLocalizedDayHeaders() {
+  const baseMonday = new Date(2024, 0, 1);
+  return Array.from({ length: 7 }, (_, idx) => {
+    const date = new Date(baseMonday);
+    date.setDate(date.getDate() + idx);
+    return date.toLocaleDateString(void 0, { weekday: "narrow" });
+  });
+}
+function CalendarPicker({ selectedWeekStart, onWeekSelect }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [viewYear, setViewYear] = React.useState(selectedWeekStart.getFullYear());
+  const [viewMonth, setViewMonth] = React.useState(selectedWeekStart.getMonth());
+  const containerRef = React.useRef(null);
+  const dayHeaders = React.useMemo(() => getLocalizedDayHeaders(), []);
+  React.useEffect(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  React.useEffect(() => {
+    setViewYear(selectedWeekStart.getFullYear());
+    setViewMonth(selectedWeekStart.getMonth());
+  }, [selectedWeekStart]);
+  const weeks = React.useMemo(() => buildWeeks(viewYear, viewMonth), [viewYear, viewMonth]);
+  const monthLabel = React.useMemo(() => {
+    return new Date(viewYear, viewMonth, 1).toLocaleString(void 0, { month: "long", year: "numeric" });
+  }, [viewYear, viewMonth]);
+  const today = React.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const handleWeekClick = React.useCallback((monday) => {
+    onWeekSelect(monday);
+    setOpen(false);
+  }, [onWeekSelect]);
+  const goToPrevMonth = React.useCallback(() => {
+    setViewMonth((prev) => {
+      if (prev === 0) {
+        setViewYear((yr) => yr - 1);
+        return 11;
+      }
+      return prev - 1;
+    });
+  }, []);
+  const goToNextMonth = React.useCallback(() => {
+    setViewMonth((prev) => {
+      if (prev === 11) {
+        setViewYear((yr) => yr + 1);
+        return 0;
+      }
+      return prev + 1;
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "outline",
+        size: "sm",
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        "aria-label": t("staff.timesheets.my.calendar.open", "Open calendar"),
+        children: /* @__PURE__ */ jsx(CalendarDays, { className: "size-4" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 z-20 mt-1 w-[280px] rounded-lg border bg-popover p-3 shadow-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex gap-2 border-b pb-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-auto px-2 py-1 text-xs",
+            onClick: () => handleWeekClick(getMonday(/* @__PURE__ */ new Date())),
+            children: t("staff.timesheets.my.calendar.thisWeek", "This week")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-auto px-2 py-1 text-xs",
+            onClick: () => {
+              const lastWeek = /* @__PURE__ */ new Date();
+              lastWeek.setDate(lastWeek.getDate() - 7);
+              handleWeekClick(getMonday(lastWeek));
+            },
+            children: t("staff.timesheets.my.calendar.lastWeek", "Last week")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "xs",
+            type: "button",
+            onClick: goToPrevMonth,
+            "aria-label": t("staff.timesheets.my.calendar.prevMonth", "Previous month"),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: monthLabel }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "xs",
+            type: "button",
+            onClick: goToNextMonth,
+            "aria-label": t("staff.timesheets.my.calendar.nextMonth", "Next month"),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[32px_repeat(7,1fr)] gap-0 mb-1", children: [
+        /* @__PURE__ */ jsx("div", {}),
+        dayHeaders.map((day, idx) => /* @__PURE__ */ jsx("div", { className: "text-center text-[11px] font-medium text-muted-foreground py-1", children: day }, idx))
+      ] }),
+      weeks.map((week) => {
+        const monday = week[0];
+        const weekNum = getWeekNumber(monday);
+        const isSelected = isSameWeek(monday, selectedWeekStart);
+        return /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            className: `grid grid-cols-[32px_repeat(7,1fr)] gap-0 w-full h-auto rounded-md px-0 py-0 hover:bg-muted
+                  ${isSelected ? "bg-primary text-primary-foreground hover:bg-primary/90" : ""}`,
+            onClick: () => handleWeekClick(monday),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium py-1.5 text-center ${isSelected ? "text-primary-foreground/70" : "text-muted-foreground"}`, children: weekNum }),
+              week.map((date) => {
+                const inMonth = date.getMonth() === viewMonth;
+                const isTodayDate = isSameDay(date, today);
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `text-xs py-1.5 text-center
+                        ${!inMonth && !isSelected ? "text-muted-foreground/40" : ""}
+                        ${isTodayDate && !isSelected ? "font-bold text-primary" : ""}
+                        ${isTodayDate && isSelected ? "font-bold underline" : ""}`,
+                    children: date.getDate()
+                  },
+                  date.toISOString()
+                );
+              })
+            ]
+          },
+          monday.toISOString()
+        );
+      })
+    ] })
+  ] });
+}
+export {
+  CalendarPicker
+};
+//# sourceMappingURL=CalendarPicker.js.map

package/dist/modules/staff/lib/timesheets-ui/CalendarPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/timesheets-ui/CalendarPicker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react'\n\ntype CalendarPickerProps = {\n  selectedWeekStart: Date\n  onWeekSelect: (weekStart: Date) => void\n}\n\nfunction getMonday(date: Date): Date {\n  const result = new Date(date)\n  const day = result.getDay()\n  const diff = day === 0 ? -6 : 1 - day\n  result.setDate(result.getDate() + diff)\n  result.setHours(0, 0, 0, 0)\n  return result\n}\n\nfunction getWeekNumber(date: Date): number {\n  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))\n  target.setUTCDate(target.getUTCDate() + 4 - (target.getUTCDay() || 7))\n  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))\n  return Math.ceil(((target.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)\n}\n\nfunction isSameDay(first: Date, second: Date): boolean {\n  return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate()\n}\n\nfunction isSameWeek(first: Date, second: Date): boolean {\n  return isSameDay(getMonday(first), getMonday(second))\n}\n\nfunction buildWeeks(year: number, month: number): Date[][] {\n  const firstDay = new Date(year, month, 1)\n  const start = getMonday(firstDay)\n  const weeks: Date[][] = []\n  const current = new Date(start)\n\n  for (let weekIdx = 0; weekIdx < 6; weekIdx++) {\n    const week: Date[] = []\n    for (let dayIdx = 0; dayIdx < 7; dayIdx++) {\n      week.push(new Date(current))\n      current.setDate(current.getDate() + 1)\n    }\n    weeks.push(week)\n    if (current.getMonth() !== month && weekIdx >= 3) break\n  }\n  return weeks\n}\n\nfunction getLocalizedDayHeaders(): string[] {\n  const baseMonday = new Date(2024, 0, 1) // Known Monday\n  return Array.from({ length: 7 }, (_, idx) => {\n    const date = new Date(baseMonday)\n    date.setDate(date.getDate() + idx)\n    return date.toLocaleDateString(undefined, { weekday: 'narrow' })\n  })\n}\n\nexport function CalendarPicker({ selectedWeekStart, onWeekSelect }: CalendarPickerProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [viewYear, setViewYear] = React.useState(selectedWeekStart.getFullYear())\n  const [viewMonth, setViewMonth] = React.useState(selectedWeekStart.getMonth())\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  const dayHeaders = React.useMemo(() => getLocalizedDayHeaders(), [])\n\n  React.useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setOpen(false)\n      }\n    }\n    if (open) document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [open])\n\n  React.useEffect(() => {\n    setViewYear(selectedWeekStart.getFullYear())\n    setViewMonth(selectedWeekStart.getMonth())\n  }, [selectedWeekStart])\n\n  const weeks = React.useMemo(() => buildWeeks(viewYear, viewMonth), [viewYear, viewMonth])\n\n  const monthLabel = React.useMemo(() => {\n    return new Date(viewYear, viewMonth, 1).toLocaleString(undefined, { month: 'long', year: 'numeric' })\n  }, [viewYear, viewMonth])\n\n  const today = React.useMemo(() => new Date(), [])\n\n  const handleWeekClick = React.useCallback((monday: Date) => {\n    onWeekSelect(monday)\n    setOpen(false)\n  }, [onWeekSelect])\n\n  const goToPrevMonth = React.useCallback(() => {\n    setViewMonth((prev) => {\n      if (prev === 0) { setViewYear((yr) => yr - 1); return 11 }\n      return prev - 1\n    })\n  }, [])\n\n  const goToNextMonth = React.useCallback(() => {\n    setViewMonth((prev) => {\n      if (prev === 11) { setViewYear((yr) => yr + 1); return 0 }\n      return prev + 1\n    })\n  }, [])\n\n  return (\n    <div ref={containerRef} className=\"relative inline-block\">\n      <IconButton\n        variant=\"outline\"\n        size=\"sm\"\n        type=\"button\"\n        onClick={() => setOpen((prev) => !prev)}\n        aria-label={t('staff.timesheets.my.calendar.open', 'Open calendar')}\n      >\n        <CalendarDays className=\"size-4\" />\n      </IconButton>\n\n      {open && (\n        <div className=\"absolute left-0 z-20 mt-1 w-[280px] rounded-lg border bg-popover p-3 shadow-lg\">\n          {/* Quick links */}\n          <div className=\"mb-3 flex gap-2 border-b pb-2\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-auto px-2 py-1 text-xs\"\n              onClick={() => handleWeekClick(getMonday(new Date()))}\n            >\n              {t('staff.timesheets.my.calendar.thisWeek', 'This week')}\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-auto px-2 py-1 text-xs\"\n              onClick={() => {\n                const lastWeek = new Date()\n                lastWeek.setDate(lastWeek.getDate() - 7)\n                handleWeekClick(getMonday(lastWeek))\n              }}\n            >\n              {t('staff.timesheets.my.calendar.lastWeek', 'Last week')}\n            </Button>\n          </div>\n\n          {/* Month navigation */}\n          <div className=\"mb-2 flex items-center justify-between\">\n            <IconButton\n              variant=\"ghost\"\n              size=\"xs\"\n              type=\"button\"\n              onClick={goToPrevMonth}\n              aria-label={t('staff.timesheets.my.calendar.prevMonth', 'Previous month')}\n            >\n              <ChevronLeft className=\"size-3.5\" />\n            </IconButton>\n            <span className=\"text-sm font-medium\">{monthLabel}</span>\n            <IconButton\n              variant=\"ghost\"\n              size=\"xs\"\n              type=\"button\"\n              onClick={goToNextMonth}\n              aria-label={t('staff.timesheets.my.calendar.nextMonth', 'Next month')}\n            >\n              <ChevronRight className=\"size-3.5\" />\n            </IconButton>\n          </div>\n\n          {/* Day headers */}\n          <div className=\"grid grid-cols-[32px_repeat(7,1fr)] gap-0 mb-1\">\n            <div />\n            {dayHeaders.map((day, idx) => (\n              <div key={idx} className=\"text-center text-[11px] font-medium text-muted-foreground py-1\">\n                {day}\n              </div>\n            ))}\n          </div>\n\n          {/* Week rows */}\n          {weeks.map((week) => {\n            const monday = week[0]\n            const weekNum = getWeekNumber(monday)\n            const isSelected = isSameWeek(monday, selectedWeekStart)\n\n            return (\n              <Button\n                key={monday.toISOString()}\n                type=\"button\"\n                variant=\"ghost\"\n                className={`grid grid-cols-[32px_repeat(7,1fr)] gap-0 w-full h-auto rounded-md px-0 py-0 hover:bg-muted\n                  ${isSelected ? 'bg-primary text-primary-foreground hover:bg-primary/90' : ''}`}\n                onClick={() => handleWeekClick(monday)}\n              >\n                <span className={`text-[10px] font-medium py-1.5 text-center ${isSelected ? 'text-primary-foreground/70' : 'text-muted-foreground'}`}>\n                  {weekNum}\n                </span>\n                {week.map((date) => {\n                  const inMonth = date.getMonth() === viewMonth\n                  const isTodayDate = isSameDay(date, today)\n                  return (\n                    <span\n                      key={date.toISOString()}\n                      className={`text-xs py-1.5 text-center\n                        ${!inMonth && !isSelected ? 'text-muted-foreground/40' : ''}\n                        ${isTodayDate && !isSelected ? 'font-bold text-primary' : ''}\n                        ${isTodayDate && isSelected ? 'font-bold underline' : ''}`}\n                    >\n                      {date.getDate()}\n                    </span>\n                  )\n                })}\n              </Button>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA4HQ,cAME,YANF;AA1HR,YAAY,WAAW;AACvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,cAAc,aAAa,oBAAoB;AAOxD,SAAS,UAAU,MAAkB;AACnC,QAAM,SAAS,IAAI,KAAK,IAAI;AAC5B,QAAM,MAAM,OAAO,OAAO;AAC1B,QAAM,OAAO,QAAQ,IAAI,KAAK,IAAI;AAClC,SAAO,QAAQ,OAAO,QAAQ,IAAI,IAAI;AACtC,SAAO,SAAS,GAAG,GAAG,GAAG,CAAC;AAC1B,SAAO;AACT;AAEA,SAAS,cAAc,MAAoB;AACzC,QAAM,SAAS,IAAI,KAAK,KAAK,IAAI,KAAK,YAAY,GAAG,KAAK,SAAS,GAAG,KAAK,QAAQ,CAAC,CAAC;AACrF,SAAO,WAAW,OAAO,WAAW,IAAI,KAAK,OAAO,UAAU,KAAK,EAAE;AACrE,QAAM,YAAY,IAAI,KAAK,KAAK,IAAI,OAAO,eAAe,GAAG,GAAG,CAAC,CAAC;AAClE,SAAO,KAAK,OAAO,OAAO,QAAQ,IAAI,UAAU,QAAQ,KAAK,QAAW,KAAK,CAAC;AAChF;AAEA,SAAS,UAAU,OAAa,QAAuB;AACrD,SAAO,MAAM,YAAY,MAAM,OAAO,YAAY,KAAK,MAAM,SAAS,MAAM,OAAO,SAAS,KAAK,MAAM,QAAQ,MAAM,OAAO,QAAQ;AACtI;AAEA,SAAS,WAAW,OAAa,QAAuB;AACtD,SAAO,UAAU,UAAU,KAAK,GAAG,UAAU,MAAM,CAAC;AACtD;AAEA,SAAS,WAAW,MAAc,OAAyB;AACzD,QAAM,WAAW,IAAI,KAAK,MAAM,OAAO,CAAC;AACxC,QAAM,QAAQ,UAAU,QAAQ;AAChC,QAAM,QAAkB,CAAC;AACzB,QAAM,UAAU,IAAI,KAAK,KAAK;AAE9B,WAAS,UAAU,GAAG,UAAU,GAAG,WAAW;AAC5C,UAAM,OAAe,CAAC;AACtB,aAAS,SAAS,GAAG,SAAS,GAAG,UAAU;AACzC,WAAK,KAAK,IAAI,KAAK,OAAO,CAAC;AAC3B,cAAQ,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAAA,IACvC;AACA,UAAM,KAAK,IAAI;AACf,QAAI,QAAQ,SAAS,MAAM,SAAS,WAAW,EAAG;AAAA,EACpD;AACA,SAAO;AACT;AAEA,SAAS,yBAAmC;AAC1C,QAAM,aAAa,IAAI,KAAK,MAAM,GAAG,CAAC;AACtC,SAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,QAAQ;AAC3C,UAAM,OAAO,IAAI,KAAK,UAAU;AAChC,SAAK,QAAQ,KAAK,QAAQ,IAAI,GAAG;AACjC,WAAO,KAAK,mBAAmB,QAAW,EAAE,SAAS,SAAS,CAAC;AAAA,EACjE,CAAC;AACH;AAEO,SAAS,eAAe,EAAE,mBAAmB,aAAa,GAAwB;AACvF,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,kBAAkB,YAAY,CAAC;AAC9E,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,kBAAkB,SAAS,CAAC;AAC7E,QAAM,eAAe,MAAM,OAAuB,IAAI;AAEtD,QAAM,aAAa,MAAM,QAAQ,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAEnE,QAAM,UAAU,MAAM;AACpB,aAAS,mBAAmB,OAAmB;AAC7C,UAAI,aAAa,WAAW,CAAC,aAAa,QAAQ,SAAS,MAAM,MAAc,GAAG;AAChF,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,QAAI,KAAM,UAAS,iBAAiB,aAAa,kBAAkB;AACnE,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EAC3E,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAU,MAAM;AACpB,gBAAY,kBAAkB,YAAY,CAAC;AAC3C,iBAAa,kBAAkB,SAAS,CAAC;AAAA,EAC3C,GAAG,CAAC,iBAAiB,CAAC;AAEtB,QAAM,QAAQ,MAAM,QAAQ,MAAM,WAAW,UAAU,SAAS,GAAG,CAAC,UAAU,SAAS,CAAC;AAExF,QAAM,aAAa,MAAM,QAAQ,MAAM;AACrC,WAAO,IAAI,KAAK,UAAU,WAAW,CAAC,EAAE,eAAe,QAAW,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC;AAAA,EACtG,GAAG,CAAC,UAAU,SAAS,CAAC;AAExB,QAAM,QAAQ,MAAM,QAAQ,MAAM,oBAAI,KAAK,GAAG,CAAC,CAAC;AAEhD,QAAM,kBAAkB,MAAM,YAAY,CAAC,WAAiB;AAC1D,iBAAa,MAAM;AACnB,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,gBAAgB,MAAM,YAAY,MAAM;AAC5C,iBAAa,CAAC,SAAS;AACrB,UAAI,SAAS,GAAG;AAAE,oBAAY,CAAC,OAAO,KAAK,CAAC;AAAG,eAAO;AAAA,MAAG;AACzD,aAAO,OAAO;AAAA,IAChB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB,MAAM,YAAY,MAAM;AAC5C,iBAAa,CAAC,SAAS;AACrB,UAAI,SAAS,IAAI;AAAE,oBAAY,CAAC,OAAO,KAAK,CAAC;AAAG,eAAO;AAAA,MAAE;AACzD,aAAO,OAAO;AAAA,IAChB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,SAAI,KAAK,cAAc,WAAU,yBAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACtC,cAAY,EAAE,qCAAqC,eAAe;AAAA,QAElE,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,IACnC;AAAA,IAEC,QACC,qBAAC,SAAI,WAAU,kFAEb;AAAA,2BAAC,SAAI,WAAU,iCACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,gBAAgB,UAAU,oBAAI,KAAK,CAAC,CAAC;AAAA,YAEnD,YAAE,yCAAyC,WAAW;AAAA;AAAA,QACzD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM;AACb,oBAAM,WAAW,oBAAI,KAAK;AAC1B,uBAAS,QAAQ,SAAS,QAAQ,IAAI,CAAC;AACvC,8BAAgB,UAAU,QAAQ,CAAC;AAAA,YACrC;AAAA,YAEC,YAAE,yCAAyC,WAAW;AAAA;AAAA,QACzD;AAAA,SACF;AAAA,MAGA,qBAAC,SAAI,WAAU,0CACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAY,EAAE,0CAA0C,gBAAgB;AAAA,YAExE,8BAAC,eAAY,WAAU,YAAW;AAAA;AAAA,QACpC;AAAA,QACA,oBAAC,UAAK,WAAU,uBAAuB,sBAAW;AAAA,QAClD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAY,EAAE,0CAA0C,YAAY;AAAA,YAEpE,8BAAC,gBAAa,WAAU,YAAW;AAAA;AAAA,QACrC;AAAA,SACF;AAAA,MAGA,qBAAC,SAAI,WAAU,kDACb;AAAA,4BAAC,SAAI;AAAA,QACJ,WAAW,IAAI,CAAC,KAAK,QACpB,oBAAC,SAAc,WAAU,kEACtB,iBADO,GAEV,CACD;AAAA,SACH;AAAA,MAGC,MAAM,IAAI,CAAC,SAAS;AACnB,cAAM,SAAS,KAAK,CAAC;AACrB,cAAM,UAAU,cAAc,MAAM;AACpC,cAAM,aAAa,WAAW,QAAQ,iBAAiB;AAEvD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAW;AAAA,oBACP,aAAa,2DAA2D,EAAE;AAAA,YAC9E,SAAS,MAAM,gBAAgB,MAAM;AAAA,YAErC;AAAA,kCAAC,UAAK,WAAW,8CAA8C,aAAa,+BAA+B,uBAAuB,IAC/H,mBACH;AAAA,cACC,KAAK,IAAI,CAAC,SAAS;AAClB,sBAAM,UAAU,KAAK,SAAS,MAAM;AACpC,sBAAM,cAAc,UAAU,MAAM,KAAK;AACzC,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAW;AAAA,0BACP,CAAC,WAAW,CAAC,aAAa,6BAA6B,EAAE;AAAA,0BACzD,eAAe,CAAC,aAAa,2BAA2B,EAAE;AAAA,0BAC1D,eAAe,aAAa,wBAAwB,EAAE;AAAA,oBAEzD,eAAK,QAAQ;AAAA;AAAA,kBANT,KAAK,YAAY;AAAA,gBAOxB;AAAA,cAEJ,CAAC;AAAA;AAAA;AAAA,UAxBI,OAAO,YAAY;AAAA,QAyB1B;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KAEJ;AAEJ;",
+  "names": []
+}

package/dist/modules/staff/lib/timesheets-ui/ColorPicker.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { PROJECT_COLORS } from "./colors.js";
+function ColorPicker({
+  value,
+  onChange,
+  allowReset = true,
+  resetLabel = "Auto",
+  id,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { id, className: "flex flex-wrap items-center gap-2", role: "radiogroup", children: [
+    PROJECT_COLORS.map((color) => {
+      const selected = value === color.key;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": selected,
+          "aria-label": color.key,
+          title: color.key,
+          disabled,
+          onClick: () => onChange(color.key),
+          className: `inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${selected ? "ring-2 ring-offset-1 ring-ring" : ""}`,
+          style: { backgroundColor: color.hex },
+          children: selected ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 }) : null
+        },
+        color.key
+      );
+    }),
+    allowReset ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": value == null,
+        "aria-label": resetLabel,
+        title: resetLabel,
+        disabled,
+        onClick: () => onChange(null),
+        className: `inline-flex h-6 items-center cursor-pointer rounded-full border border-dashed border-muted-foreground/50 bg-transparent px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${value == null ? "ring-2 ring-offset-1 ring-ring" : ""}`,
+        children: resetLabel
+      }
+    ) : null
+  ] });
+}
+export {
+  ColorPicker
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/modules/staff/lib/timesheets-ui/ColorPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/timesheets-ui/ColorPicker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check } from 'lucide-react'\nimport { PROJECT_COLORS } from './colors'\n\nexport type ColorPickerProps = {\n  value: string | null | undefined\n  onChange: (value: string | null) => void\n  allowReset?: boolean\n  resetLabel?: string\n  id?: string\n  disabled?: boolean\n}\n\nexport function ColorPicker({\n  value,\n  onChange,\n  allowReset = true,\n  resetLabel = 'Auto',\n  id,\n  disabled = false,\n}: ColorPickerProps) {\n  return (\n    <div id={id} className=\"flex flex-wrap items-center gap-2\" role=\"radiogroup\">\n      {PROJECT_COLORS.map((color) => {\n        const selected = value === color.key\n        return (\n          <button\n            key={color.key}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={color.key}\n            title={color.key}\n            disabled={disabled}\n            onClick={() => onChange(color.key)}\n            className={`inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${\n              selected ? 'ring-2 ring-offset-1 ring-ring' : ''\n            }`}\n            style={{ backgroundColor: color.hex }}\n          >\n            {selected ? <Check className=\"h-3.5 w-3.5 text-white\" strokeWidth={3} /> : null}\n          </button>\n        )\n      })}\n      {allowReset ? (\n        <button\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={value == null}\n          aria-label={resetLabel}\n          title={resetLabel}\n          disabled={disabled}\n          onClick={() => onChange(null)}\n          className={`inline-flex h-6 items-center cursor-pointer rounded-full border border-dashed border-muted-foreground/50 bg-transparent px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${\n            value == null ? 'ring-2 ring-offset-1 ring-ring' : ''\n          }`}\n        >\n          {resetLabel}\n        </button>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAwBI,SAkBoB,KAlBpB;AArBJ,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAWxB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA,WAAW;AACb,GAAqB;AACnB,SACE,qBAAC,SAAI,IAAQ,WAAU,qCAAoC,MAAK,cAC7D;AAAA,mBAAe,IAAI,CAAC,UAAU;AAC7B,YAAM,WAAW,UAAU,MAAM;AACjC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,cAAY,MAAM;AAAA,UAClB,OAAO,MAAM;AAAA,UACb;AAAA,UACA,SAAS,MAAM,SAAS,MAAM,GAAG;AAAA,UACjC,WAAW,iPACT,WAAW,mCAAmC,EAChD;AAAA,UACA,OAAO,EAAE,iBAAiB,MAAM,IAAI;AAAA,UAEnC,qBAAW,oBAAC,SAAM,WAAU,0BAAyB,aAAa,GAAG,IAAK;AAAA;AAAA,QAbtE,MAAM;AAAA,MAcb;AAAA,IAEJ,CAAC;AAAA,IACA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc,SAAS;AAAA,QACvB,cAAY;AAAA,QACZ,OAAO;AAAA,QACP;AAAA,QACA,SAAS,MAAM,SAAS,IAAI;AAAA,QAC5B,WAAW,uTACT,SAAS,OAAO,mCAAmC,EACrD;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,KACN;AAEJ;",
+  "names": []
+}

package/dist/modules/staff/lib/timesheets-ui/CreateProjectDialog.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@open-mercato/ui/primitives/dialog";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { createCrud } from "@open-mercato/ui/backend/utils/crud";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { E } from "../../../../generated/entities.ids.generated.js";
+import {
+  buildProjectPayload,
+  createProjectFormFields,
+  createProjectFormGroups,
+  createProjectFormSchema
+} from "../../backend/staff/timesheets/projects/projectFormConfig.js";
+function CreateProjectDialog({ open, onOpenChange, onProjectCreated }) {
+  const t = useT();
+  const formSchema = React.useMemo(() => createProjectFormSchema(), []);
+  const fields = React.useMemo(() => createProjectFormFields(t), [t]);
+  const groups = React.useMemo(() => createProjectFormGroups(t), [t]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("staff.timesheets.projects.form.createTitle", "Create project") }) }),
+    /* @__PURE__ */ jsx(
+      CrudForm,
+      {
+        embedded: true,
+        fields,
+        groups,
+        schema: formSchema,
+        initialValues: {},
+        entityIds: [E.staff.staff_time_project],
+        submitLabel: t("staff.timesheets.projects.form.actions.create", "Create"),
+        extraActions: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: t("staff.timesheets.projects.form.actions.cancel", "Cancel") }),
+        onSubmit: async (values) => {
+          const payload = buildProjectPayload(values);
+          const { result: created } = await createCrud(
+            "staff/timesheets/time-projects",
+            payload,
+            { errorMessage: t("staff.timesheets.projects.errors.save", "Failed to save project.") }
+          );
+          const newId = created?.id;
+          if (!newId) {
+            throw createCrudFormError(
+              t("staff.timesheets.projects.errors.save", "Failed to save project.")
+            );
+          }
+          try {
+            const selfRes = await apiCall("/api/staff/team-members/self");
+            const staffMemberId = selfRes.result?.member?.id;
+            if (staffMemberId) {
+              await createCrud("staff/timesheets/time-projects/" + newId + "/employees", {
+                staffMemberId,
+                assignedStartDate: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+                status: "active"
+              }, { errorMessage: "" });
+            }
+          } catch {
+          }
+          onProjectCreated({
+            id: newId,
+            name: created?.name ?? values.name.trim(),
+            code: created?.code ?? values.code?.trim() ?? null
+          });
+          flash(t("staff.timesheets.projects.messages.saved", "Project saved."), "success");
+          onOpenChange(false);
+        }
+      }
+    )
+  ] }) });
+}
+export {
+  CreateProjectDialog
+};
+//# sourceMappingURL=CreateProjectDialog.js.map

package/dist/modules/staff/lib/timesheets-ui/CreateProjectDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/timesheets-ui/CreateProjectDialog.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CrudForm } from '@open-mercato/ui/backend/CrudForm'\nimport { createCrud } from '@open-mercato/ui/backend/utils/crud'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { E } from '#generated/entities.ids.generated'\nimport {\n  buildProjectPayload,\n  createProjectFormFields,\n  createProjectFormGroups,\n  createProjectFormSchema,\n  type ProjectFormValues,\n} from '../../backend/staff/timesheets/projects/projectFormConfig'\n\ntype CreateProjectDialogProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  onProjectCreated: (project: { id: string; name: string; code: string | null }) => void\n}\n\nexport function CreateProjectDialog({ open, onOpenChange, onProjectCreated }: CreateProjectDialogProps) {\n  const t = useT()\n\n  const formSchema = React.useMemo(() => createProjectFormSchema(), [])\n  const fields = React.useMemo(() => createProjectFormFields(t), [t])\n  const groups = React.useMemo(() => createProjectFormGroups(t), [t])\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-lg\">\n        <DialogHeader>\n          <DialogTitle>\n            {t('staff.timesheets.projects.form.createTitle', 'Create project')}\n          </DialogTitle>\n        </DialogHeader>\n        <CrudForm<ProjectFormValues>\n          embedded\n          fields={fields}\n          groups={groups}\n          schema={formSchema}\n          initialValues={{}}\n          entityIds={[E.staff.staff_time_project]}\n          submitLabel={t('staff.timesheets.projects.form.actions.create', 'Create')}\n          extraActions={(\n            <Button type=\"button\" variant=\"ghost\" onClick={() => onOpenChange(false)}>\n              {t('staff.timesheets.projects.form.actions.cancel', 'Cancel')}\n            </Button>\n          )}\n          onSubmit={async (values) => {\n            const payload = buildProjectPayload(values)\n\n            const { result: created } = await createCrud<{ id?: string; name?: string; code?: string | null }>(\n              'staff/timesheets/time-projects',\n              payload,\n              { errorMessage: t('staff.timesheets.projects.errors.save', 'Failed to save project.') },\n            )\n\n            const newId = created?.id\n            if (!newId) {\n              throw createCrudFormError(\n                t('staff.timesheets.projects.errors.save', 'Failed to save project.'),\n              )\n            }\n\n            // Auto-assign creator to the project (best-effort)\n            try {\n              const selfRes = await apiCall<{ member?: { id?: string } | null }>('/api/staff/team-members/self')\n              const staffMemberId = selfRes.result?.member?.id\n              if (staffMemberId) {\n                await createCrud('staff/timesheets/time-projects/' + newId + '/employees', {\n                  staffMemberId,\n                  assignedStartDate: new Date().toISOString().slice(0, 10),\n                  status: 'active',\n                }, { errorMessage: '' })\n              }\n            } catch {\n              // non-critical \u2014 project created, self-assignment is best-effort\n            }\n\n            onProjectCreated({\n              id: newId,\n              name: created?.name ?? values.name.trim(),\n              code: created?.code ?? values.code?.trim() ?? null,\n            })\n\n            flash(t('staff.timesheets.projects.messages.saved', 'Project saved.'), 'success')\n            onOpenChange(false)\n          }}\n        />\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": ";AAmCM,SAEI,KAFJ;AAjCN,YAAY,WAAW;AACvB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAQA,SAAS,oBAAoB,EAAE,MAAM,cAAc,iBAAiB,GAA6B;AACtG,QAAM,IAAI,KAAK;AAEf,QAAM,aAAa,MAAM,QAAQ,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACpE,QAAM,SAAS,MAAM,QAAQ,MAAM,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC;AAClE,QAAM,SAAS,MAAM,QAAQ,MAAM,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC;AAElE,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,eACvB;AAAA,wBAAC,gBACC,8BAAC,eACE,YAAE,8CAA8C,gBAAgB,GACnE,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,eAAe,CAAC;AAAA,QAChB,WAAW,CAAC,EAAE,MAAM,kBAAkB;AAAA,QACtC,aAAa,EAAE,iDAAiD,QAAQ;AAAA,QACxE,cACE,oBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,aAAa,KAAK,GACpE,YAAE,iDAAiD,QAAQ,GAC9D;AAAA,QAEF,UAAU,OAAO,WAAW;AAC1B,gBAAM,UAAU,oBAAoB,MAAM;AAE1C,gBAAM,EAAE,QAAQ,QAAQ,IAAI,MAAM;AAAA,YAChC;AAAA,YACA;AAAA,YACA,EAAE,cAAc,EAAE,yCAAyC,yBAAyB,EAAE;AAAA,UACxF;AAEA,gBAAM,QAAQ,SAAS;AACvB,cAAI,CAAC,OAAO;AACV,kBAAM;AAAA,cACJ,EAAE,yCAAyC,yBAAyB;AAAA,YACtE;AAAA,UACF;AAGA,cAAI;AACF,kBAAM,UAAU,MAAM,QAA6C,8BAA8B;AACjG,kBAAM,gBAAgB,QAAQ,QAAQ,QAAQ;AAC9C,gBAAI,eAAe;AACjB,oBAAM,WAAW,oCAAoC,QAAQ,cAAc;AAAA,gBACzE;AAAA,gBACA,oBAAmB,oBAAI,KAAK,GAAE,YAAY,EAAE,MAAM,GAAG,EAAE;AAAA,gBACvD,QAAQ;AAAA,cACV,GAAG,EAAE,cAAc,GAAG,CAAC;AAAA,YACzB;AAAA,UACF,QAAQ;AAAA,UAER;AAEA,2BAAiB;AAAA,YACf,IAAI;AAAA,YACJ,MAAM,SAAS,QAAQ,OAAO,KAAK,KAAK;AAAA,YACxC,MAAM,SAAS,QAAQ,OAAO,MAAM,KAAK,KAAK;AAAA,UAChD,CAAC;AAED,gBAAM,EAAE,4CAA4C,gBAAgB,GAAG,SAAS;AAChF,uBAAa,KAAK;AAAA,QACpB;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/modules/staff/lib/timesheets-ui/ListView.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { ProjectColorDot } from "./ProjectColorDot.js";
+function getLocalDateStr(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function formatDayLabel(dateStr, translate) {
+  const today = /* @__PURE__ */ new Date();
+  const todayStr = getLocalDateStr(today);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const yesterdayStr = getLocalDateStr(yesterday);
+  if (dateStr === todayStr) return translate("staff.timesheets.my.list.today", "Today");
+  if (dateStr === yesterdayStr) return translate("staff.timesheets.my.list.yesterday", "Yesterday");
+  const date = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
+  const dayName = date.toLocaleDateString(void 0, { weekday: "short" });
+  const day = date.getDate();
+  const month = date.toLocaleDateString(void 0, { month: "short" });
+  return `${dayName}, ${day} ${month}`;
+}
+function formatDuration(minutes) {
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  if (remainingMinutes === 0) return `${hours}h`;
+  return `${hours}h ${remainingMinutes}m`;
+}
+function formatTimeRange(startedAt, endedAt) {
+  const start = new Date(startedAt);
+  const end = new Date(endedAt);
+  const format = (date) => date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+  return `${format(start)} - ${format(end)}`;
+}
+function InlineDescription({
+  entryId,
+  initialValue,
+  placeholder,
+  onSaved
+}) {
+  const [editing, setEditing] = React.useState(false);
+  const [value, setValue] = React.useState(initialValue ?? "");
+  const [saving, setSaving] = React.useState(false);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (editing && inputRef.current) inputRef.current.focus();
+  }, [editing]);
+  const save = React.useCallback(async () => {
+    const trimmed = value.trim();
+    if (trimmed === (initialValue ?? "")) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiCall(`/api/staff/timesheets/time-entries`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: entryId, notes: trimmed || null })
+      });
+      onSaved?.();
+    } catch {
+    } finally {
+      setSaving(false);
+      setEditing(false);
+    }
+  }, [entryId, value, initialValue, onSaved]);
+  if (!editing) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setEditing(true),
+        className: `text-sm text-left cursor-pointer hover:underline ${initialValue ? "" : "text-muted-foreground italic"}`,
+        children: initialValue || placeholder
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      value,
+      disabled: saving,
+      onChange: (e) => setValue(e.target.value),
+      onBlur: () => {
+        void save();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          void save();
+        }
+        if (e.key === "Escape") {
+          setValue(initialValue ?? "");
+          setEditing(false);
+        }
+      },
+      placeholder,
+      className: "text-sm w-full bg-transparent border-b border-primary/40 outline-none py-0.5 placeholder:text-muted-foreground/50"
+    }
+  );
+}
+function ListView({ entries, onEntryUpdated }) {
+  const t = useT();
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 text-sm text-muted-foreground", children: t("staff.timesheets.my.list.noEntries", "No entries for this period.") });
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const existing = grouped.get(entry.date);
+    if (existing) {
+      existing.push(entry);
+    } else {
+      grouped.set(entry.date, [entry]);
+    }
+  }
+  const sortedDays = [...grouped.keys()].sort((a, b) => b.localeCompare(a));
+  return /* @__PURE__ */ jsx("div", { children: sortedDays.map((dateStr) => {
+    const dayEntries = grouped.get(dateStr);
+    const dailyTotal = dayEntries.reduce(
+      (sum, entry) => sum + entry.durationMinutes,
+      0
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border mb-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 border-b bg-muted/30 font-medium text-sm", children: [
+        /* @__PURE__ */ jsx("span", { children: formatDayLabel(dateStr, t) }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: formatDuration(dailyTotal) })
+      ] }),
+      dayEntries.map((entry) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between p-3 border-b last:border-0 hover:bg-muted/20",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0 flex-1 mr-4", children: [
+              /* @__PURE__ */ jsx(
+                InlineDescription,
+                {
+                  entryId: entry.id,
+                  initialValue: entry.notes,
+                  placeholder: t("staff.timesheets.my.list.addDescription", "Add description"),
+                  onSaved: onEntryUpdated
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(ProjectColorDot, { colorKey: entry.projectColor, projectName: entry.projectName, size: "xs" }),
+                entry.projectName
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1 shrink-0", children: [
+              entry.source === "timer" && entry.startedAt && entry.endedAt ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatTimeRange(entry.startedAt, entry.endedAt) }) : null,
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-mono tabular-nums", children: formatDuration(entry.durationMinutes) })
+            ] })
+          ]
+        },
+        entry.id
+      ))
+    ] }, dateStr);
+  }) });
+}
+export {
+  ListView
+};
+//# sourceMappingURL=ListView.js.map

package/dist/modules/staff/lib/timesheets-ui/ListView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/timesheets-ui/ListView.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { ProjectColorDot } from './ProjectColorDot'\n\ntype TimeEntry = {\n  id: string\n  date: string\n  durationMinutes: number\n  projectId: string\n  projectName: string\n  projectCode: string | null\n  projectColor: string | null\n  notes: string | null\n  source: string\n  startedAt: string | null\n  endedAt: string | null\n}\n\ntype ListViewProps = {\n  entries: TimeEntry[]\n  onEntryUpdated?: () => void\n}\n\nfunction getLocalDateStr(date: Date): string {\n  const year = date.getFullYear()\n  const month = String(date.getMonth() + 1).padStart(2, '0')\n  const day = String(date.getDate()).padStart(2, '0')\n  return `${year}-${month}-${day}`\n}\n\nfunction formatDayLabel(dateStr: string, translate: TranslateFn): string {\n  const today = new Date()\n  const todayStr = getLocalDateStr(today)\n\n  const yesterday = new Date(today)\n  yesterday.setDate(yesterday.getDate() - 1)\n  const yesterdayStr = getLocalDateStr(yesterday)\n\n  if (dateStr === todayStr) return translate('staff.timesheets.my.list.today', 'Today')\n  if (dateStr === yesterdayStr) return translate('staff.timesheets.my.list.yesterday', 'Yesterday')\n\n  const date = new Date(dateStr + 'T00:00:00')\n  const dayName = date.toLocaleDateString(undefined, { weekday: 'short' })\n  const day = date.getDate()\n  const month = date.toLocaleDateString(undefined, { month: 'short' })\n\n  return `${dayName}, ${day} ${month}`\n}\n\nfunction formatDuration(minutes: number): string {\n  if (minutes < 60) return `${minutes}m`\n\n  const hours = Math.floor(minutes / 60)\n  const remainingMinutes = minutes % 60\n\n  if (remainingMinutes === 0) return `${hours}h`\n  return `${hours}h ${remainingMinutes}m`\n}\n\nfunction formatTimeRange(startedAt: string, endedAt: string): string {\n  const start = new Date(startedAt)\n  const end = new Date(endedAt)\n\n  const format = (date: Date) =>\n    date.toLocaleTimeString(undefined, {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    })\n\n  return `${format(start)} - ${format(end)}`\n}\n\nfunction InlineDescription({\n  entryId,\n  initialValue,\n  placeholder,\n  onSaved,\n}: {\n  entryId: string\n  initialValue: string | null\n  placeholder: string\n  onSaved?: () => void\n}) {\n  const [editing, setEditing] = React.useState(false)\n  const [value, setValue] = React.useState(initialValue ?? '')\n  const [saving, setSaving] = React.useState(false)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (editing && inputRef.current) inputRef.current.focus()\n  }, [editing])\n\n  const save = React.useCallback(async () => {\n    const trimmed = value.trim()\n    if (trimmed === (initialValue ?? '')) {\n      setEditing(false)\n      return\n    }\n    setSaving(true)\n    try {\n      await apiCall(`/api/staff/timesheets/time-entries`, {\n        method: 'PUT',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ id: entryId, notes: trimmed || null }),\n      })\n      onSaved?.()\n    } catch {\n      // silent\n    } finally {\n      setSaving(false)\n      setEditing(false)\n    }\n  }, [entryId, value, initialValue, onSaved])\n\n  if (!editing) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setEditing(true)}\n        className={`text-sm text-left cursor-pointer hover:underline ${\n          initialValue ? '' : 'text-muted-foreground italic'\n        }`}\n      >\n        {initialValue || placeholder}\n      </button>\n    )\n  }\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      disabled={saving}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={() => { void save() }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') { void save() }\n        if (e.key === 'Escape') { setValue(initialValue ?? ''); setEditing(false) }\n      }}\n      placeholder={placeholder}\n      className=\"text-sm w-full bg-transparent border-b border-primary/40 outline-none py-0.5 placeholder:text-muted-foreground/50\"\n    />\n  )\n}\n\nexport function ListView({ entries, onEntryUpdated }: ListViewProps) {\n  const t = useT()\n\n  if (entries.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center py-12 text-sm text-muted-foreground\">\n        {t('staff.timesheets.my.list.noEntries', 'No entries for this period.')}\n      </div>\n    )\n  }\n\n  const grouped = new Map<string, TimeEntry[]>()\n  for (const entry of entries) {\n    const existing = grouped.get(entry.date)\n    if (existing) {\n      existing.push(entry)\n    } else {\n      grouped.set(entry.date, [entry])\n    }\n  }\n\n  const sortedDays = [...grouped.keys()].sort((a, b) => b.localeCompare(a))\n\n  return (\n    <div>\n      {sortedDays.map((dateStr) => {\n        const dayEntries = grouped.get(dateStr)!\n        const dailyTotal = dayEntries.reduce(\n          (sum, entry) => sum + entry.durationMinutes,\n          0,\n        )\n\n        return (\n          <div key={dateStr} className=\"rounded-lg border mb-4\">\n            <div className=\"flex justify-between items-center p-4 border-b bg-muted/30 font-medium text-sm\">\n              <span>{formatDayLabel(dateStr, t)}</span>\n              <span className=\"font-mono tabular-nums\">\n                {formatDuration(dailyTotal)}\n              </span>\n            </div>\n\n            {dayEntries.map((entry) => (\n              <div\n                key={entry.id}\n                className=\"flex items-center justify-between p-3 border-b last:border-0 hover:bg-muted/20\"\n              >\n                <div className=\"flex flex-col gap-1 min-w-0 flex-1 mr-4\">\n                  <InlineDescription\n                    entryId={entry.id}\n                    initialValue={entry.notes}\n                    placeholder={t('staff.timesheets.my.list.addDescription', 'Add description')}\n                    onSaved={onEntryUpdated}\n                  />\n                  <span className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground\">\n                    <ProjectColorDot colorKey={entry.projectColor} projectName={entry.projectName} size=\"xs\" />\n                    {entry.projectName}\n                  </span>\n                </div>\n\n                <div className=\"flex flex-col items-end gap-1 shrink-0\">\n                  {entry.source === 'timer' &&\n                  entry.startedAt &&\n                  entry.endedAt ? (\n                    <span className=\"text-xs text-muted-foreground\">\n                      {formatTimeRange(entry.startedAt, entry.endedAt)}\n                    </span>\n                  ) : null}\n                  <span className=\"text-sm font-mono tabular-nums\">\n                    {formatDuration(entry.durationMinutes)}\n                  </span>\n                </div>\n              </div>\n            ))}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/staff/lib/timesheets-ui/ProjectColorDot.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { resolveProjectColorHex } from "./colors.js";
+const SIZE_CLASS = {
+  xs: "h-2 w-2",
+  sm: "h-2.5 w-2.5",
+  md: "h-3 w-3"
+};
+function ProjectColorDot({
+  colorKey,
+  projectName,
+  size = "sm",
+  className,
+  title
+}) {
+  const hex = resolveProjectColorHex(colorKey, projectName);
+  const base = "inline-block shrink-0 rounded-full";
+  const classes = [base, SIZE_CLASS[size], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      title,
+      className: classes,
+      style: { backgroundColor: hex }
+    }
+  );
+}
+export {
+  ProjectColorDot
+};
+//# sourceMappingURL=ProjectColorDot.js.map