@open-mercato/core 0.6.6-develop.6451.1.5b071f47fc → 0.6.6-develop.6453.1.6cbc2d5d47

package/src/modules/staff/widgets/dashboard/timesheets-time-reporting/widget.client.tsx

@@ -6,6 +6,7 @@ import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/ap
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useActiveTimesheetTimer } from '../../../lib/timesheets-ui/useActiveTimesheetTimer'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { startTimerEntry } from '../../../lib/timesheets-ui/startTimer'
 import { resolveTimerActionError } from '../../../lib/timesheets-ui/timerErrors'
@@ -13,13 +14,6 @@ import { DEFAULT_SETTINGS, hydrateSettings, type TimeReportingSettings } from '.
 
 type ProjectOption = { id: string; name: string; code: string | null }
 
-type TimerState = {
-  entryId: string | null
-  running: boolean
-  startedAt: string | null
-  projectId: string | null
-}
-
 const TIMER_WIDGET_MUTATION_CONTEXT_ID = 'staff-timesheets-time-reporting-widget'
 
 type TimerWidgetMutationContext = {
@@ -57,84 +51,56 @@ const TimeReportingWidget: React.FC<DashboardWidgetComponentProps<TimeReportingS
   const [projects, setProjects] = React.useState<ProjectOption[]>([])
   const [selectedProjectId, setSelectedProjectId] = React.useState<string | null>(hydrated.lastProjectId)
   const [notes, setNotes] = React.useState('')
-  const [timer, setTimer] = React.useState<TimerState>({ entryId: null, running: false, startedAt: null, projectId: null })
   const [elapsed, setElapsed] = React.useState('00:00:00')
-  const [staffMemberId, setStaffMemberId] = React.useState<string | null>(null)
   const [loading, setLoading] = React.useState(true)
   const [actionLoading, setActionLoading] = React.useState(false)
   const [error, setError] = React.useState<string | null>(null)
+  const didLoadRef = React.useRef(false)
+  const activeTimer = useActiveTimesheetTimer()
+  const {
+    staffMemberId,
+    entryId: activeEntryId,
+    running: timerRunning,
+    startedAt: timerStartedAt,
+    projectId: activeProjectId,
+    projectName: activeProjectName,
+    isLoading: activeTimerLoading,
+    error: activeTimerError,
+    refresh: refreshActiveTimer,
+  } = activeTimer
 
   const loadState = React.useCallback(async () => {
     onRefreshStateChange?.(true)
     setLoading(true)
     setError(null)
     try {
-      // Assignments and the current user's staff member are independent — fetch them together.
-      const [assignmentsRes, selfRes] = await Promise.all([
-        readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
-          '/api/staff/timesheets/my-projects?pageSize=100',
-          undefined,
-          { errorMessage: '', fallback: { items: [] } },
-        ),
-        readApiResultOrThrow<{ member?: { id: string } | null }>(
-          '/api/staff/team-members/self',
-          undefined,
-          { errorMessage: '', fallback: { member: null } },
-        ),
-      ])
-
+      // Load assigned projects
+      const assignmentsRes = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
+        '/api/staff/timesheets/my-projects?pageSize=100',
+        undefined,
+        { errorMessage: '', fallback: { items: [] } },
+      )
       const assignmentItems = Array.isArray(assignmentsRes.items) ? assignmentsRes.items : []
       const projectIds = assignmentItems
         .map((item) => String(item.time_project_id ?? item.timeProjectId ?? ''))
         .filter((id) => id.length > 0)
 
-      const memberId = selfRes.member?.id ?? null
-      setStaffMemberId(memberId)
-
-      // Project details depend on the assignment ids and the active timer depends on the staff
-      // member id, but the two requests are independent of each other — fetch them together.
-      const [projectsRes, entriesRes] = await Promise.all([
-        projectIds.length > 0
-          ? readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
-              `/api/staff/timesheets/time-projects?ids=${projectIds.join(',')}&pageSize=100`,
-              undefined,
-              { errorMessage: '', fallback: { items: [] } },
-            )
-          : Promise.resolve<{ items?: Array<Record<string, unknown>> }>({ items: [] }),
-        memberId
-          ? readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
-              `/api/staff/timesheets/time-entries?staffMemberId=${memberId}&running=true&pageSize=100`,
-              undefined,
-              { errorMessage: '', fallback: { items: [] } },
-            )
-          : Promise.resolve<{ items?: Array<Record<string, unknown>> }>({ items: [] }),
-      ])
-
-      const projectItems = Array.isArray(projectsRes.items) ? projectsRes.items : []
-      setProjects(projectItems.map((item) => ({
-        id: String(item.id ?? ''),
-        name: String(item.name ?? ''),
-        code: typeof item.code === 'string' ? item.code : null,
-      })))
-
-      if (memberId) {
-        const entries = Array.isArray(entriesRes.items) ? entriesRes.items : []
-        const running = entries.find((entry) => {
-          const startedAt = entry.started_at ?? entry.startedAt
-          const endedAt = entry.ended_at ?? entry.endedAt
-          return startedAt != null && endedAt == null
-        })
-        if (running) {
-          setTimer({
-            entryId: String(running.id ?? ''),
-            running: true,
-            startedAt: String(running.started_at ?? running.startedAt ?? ''),
-            projectId: String(running.time_project_id ?? running.timeProjectId ?? ''),
-          })
-        } else {
-          setTimer({ entryId: null, running: false, startedAt: null, projectId: null })
-        }
+      if (projectIds.length > 0) {
+        const projectsRes = await readApiResultOrThrow<{ items?: Array<Record<string, unknown>> }>(
+          `/api/staff/timesheets/time-projects?ids=${projectIds.join(',')}&pageSize=100`,
+          undefined,
+          { errorMessage: '', fallback: { items: [] } },
+        )
+        const items = Array.isArray(projectsRes.items) ? projectsRes.items : []
+        setProjects(items.map((item) => ({
+          id: String(item.id ?? ''),
+          name: String(item.name ?? ''),
+          code: typeof item.code === 'string' ? item.code : null,
+        })))
+      } else {
+        setProjects([])
       }
+
     } catch (err) {
       console.error('staff.timesheets.timeReporting.load', err)
       setError(t('staff.timesheets.widgets.timeReporting.error', 'Failed to load timer state'))
@@ -145,21 +111,29 @@ const TimeReportingWidget: React.FC<DashboardWidgetComponentProps<TimeReportingS
   }, [onRefreshStateChange, t])
 
   React.useEffect(() => {
-    void loadState()
-  }, [loadState, refreshToken])
+    if (!didLoadRef.current) {
+      didLoadRef.current = true
+      void loadState()
+      return
+    }
+    void Promise.allSettled([loadState(), refreshActiveTimer()])
+  }, [loadState, refreshActiveTimer, refreshToken])
 
   // Tick elapsed time
   React.useEffect(() => {
-    if (!timer.running || !timer.startedAt) return
-    const tick = () => setElapsed(formatElapsed(timer.startedAt!))
+    if (!timerRunning || !timerStartedAt) {
+      setElapsed('00:00:00')
+      return
+    }
+    const tick = () => setElapsed(formatElapsed(timerStartedAt))
     tick()
     const interval = setInterval(tick, 1000)
     return () => clearInterval(interval)
-  }, [timer.running, timer.startedAt])
+  }, [timerRunning, timerStartedAt])
 
   const handleStart = React.useCallback(async () => {
     if (!selectedProjectId || !staffMemberId) return
-    if (timer.running) return
+    if (timerRunning) return
     setActionLoading(true)
     try {
       const today = new Date().toISOString().slice(0, 10)
@@ -188,45 +162,45 @@ const TimeReportingWidget: React.FC<DashboardWidgetComponentProps<TimeReportingS
       })
 
       onSettingsChange({ ...hydrated, lastProjectId: selectedProjectId })
-      await loadState()
+      await refreshActiveTimer()
     } catch (err) {
       console.error('staff.timesheets.timeReporting.start', err)
       setError(resolveTimerActionError(err, t('staff.timesheets.widgets.timeReporting.startError', 'Failed to start timer')))
     } finally {
       setActionLoading(false)
     }
-  }, [selectedProjectId, staffMemberId, timer.running, notes, hydrated, onSettingsChange, loadState, runMutation, retryLastMutation, t])
+  }, [selectedProjectId, staffMemberId, timerRunning, notes, runMutation, retryLastMutation, hydrated, onSettingsChange, refreshActiveTimer, t])
 
   const handleStop = React.useCallback(async () => {
-    if (!timer.entryId || !staffMemberId) return
+    if (!activeEntryId || !staffMemberId) return
     setActionLoading(true)
     try {
       const stopPayload = {
-        id: timer.entryId,
+        id: activeEntryId,
         action: 'timer-stop',
         staffMemberId,
       }
       await runMutation({
         operation: () =>
-          apiCall(`/api/staff/timesheets/time-entries/${timer.entryId}/timer-stop`, { method: 'POST' }),
+          apiCall(`/api/staff/timesheets/time-entries/${activeEntryId}/timer-stop`, { method: 'POST' }),
         context: {
           formId: TIMER_WIDGET_MUTATION_CONTEXT_ID,
           resourceKind: 'staff.timesheets.time_entry',
-          resourceId: timer.entryId,
+          resourceId: activeEntryId,
           staffMemberId,
           action: 'timer-stop',
           retryLastMutation,
         },
         mutationPayload: stopPayload,
       })
-      await loadState()
+      await refreshActiveTimer()
     } catch (err) {
       console.error('staff.timesheets.timeReporting.stop', err)
       setError(resolveTimerActionError(err, t('staff.timesheets.widgets.timeReporting.stopError', 'Failed to stop timer')))
     } finally {
       setActionLoading(false)
     }
-  }, [timer.entryId, staffMemberId, loadState, runMutation, retryLastMutation, t])
+  }, [activeEntryId, staffMemberId, runMutation, retryLastMutation, refreshActiveTimer, t])
 
   if (mode === 'settings') {
     return (
@@ -238,7 +212,7 @@ const TimeReportingWidget: React.FC<DashboardWidgetComponentProps<TimeReportingS
     )
   }
 
-  if (loading) {
+  if (loading || activeTimerLoading) {
     return (
       <div className="flex h-full items-center justify-center py-8">
         <p className="text-sm text-muted-foreground">{t('staff.timesheets.widgets.timeReporting.loading', 'Loading...')}</p>
@@ -246,10 +220,12 @@ const TimeReportingWidget: React.FC<DashboardWidgetComponentProps<TimeReportingS
     )
   }
 
-  if (error) {
+  if (error || activeTimerError) {
     return (
       <div className="flex h-full items-center justify-center py-8">
-        <p role="alert" className="text-sm text-destructive">{error}</p>
+        <p role="alert" className="text-sm text-destructive">
+          {error ?? t('staff.timesheets.widgets.timeReporting.error', 'Failed to load timer state')}
+        </p>
       </div>
     )
   }
@@ -265,12 +241,12 @@ const TimeReportingWidget: React.FC<DashboardWidgetComponentProps<TimeReportingS
   }
 
   // Timer is running
-  if (timer.running) {
-    const runningProject = projects.find((p) => p.id === timer.projectId)
+  if (timerRunning) {
+    const runningProject = projects.find((p) => p.id === activeProjectId)
     return (
       <div className="space-y-3">
         <div className="text-sm text-muted-foreground">
-          {runningProject?.name ?? t('staff.timesheets.widgets.timeReporting.unknownProject', 'Unknown project')}
+          {runningProject?.name ?? activeProjectName ?? t('staff.timesheets.widgets.timeReporting.unknownProject', 'Unknown project')}
         </div>
         <div className="text-center">
           <p className="font-mono text-3xl font-bold tabular-nums">{elapsed}</p>

package/src/modules/staff/widgets/injection/timer-sidebar-indicator/widget.tsx

@@ -1,36 +1,10 @@
 "use client"
 
 import * as React from 'react'
-import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { InjectionWidgetModule } from '@open-mercato/shared/modules/widgets/injection'
 import { ProjectColorDot } from '../../../lib/timesheets-ui/ProjectColorDot'
-
-type TimerState = {
-  entryId: string
-  projectName: string
-  projectColor: string | null
-  startedAt: string
-}
-
-const STORAGE_KEY = 'om:timesheets:activeTimer'
-
-function saveToSession(state: TimerState | null) {
-  try {
-    if (state) sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state))
-    else sessionStorage.removeItem(STORAGE_KEY)
-  } catch { /* private browsing */ }
-}
-
-function loadFromSession(): TimerState | null {
-  try {
-    const raw = sessionStorage.getItem(STORAGE_KEY)
-    if (!raw) return null
-    const parsed = JSON.parse(raw)
-    if (parsed?.startedAt && parsed?.entryId) return parsed as TimerState
-  } catch { /* corrupt or private browsing */ }
-  return null
-}
+import { useActiveTimesheetTimer } from '../../../lib/timesheets-ui/useActiveTimesheetTimer'
 
 function formatElapsed(seconds: number): string {
   const h = Math.floor(seconds / 3600)
@@ -41,69 +15,13 @@ function formatElapsed(seconds: number): string {
 
 function TimerSidebarIndicator() {
   const t = useT()
-  // Initialise from sessionStorage so the indicator doesn't flash away on navigation
-  const [timer, setTimer] = React.useState<TimerState | null>(loadFromSession)
+  const timer = useActiveTimesheetTimer()
   const [elapsed, setElapsed] = React.useState(0)
   const intervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null)
 
-  // Wrap setTimer to also persist to sessionStorage
-  const updateTimer = React.useCallback((next: TimerState | null) => {
-    setTimer(next)
-    saveToSession(next)
-  }, [])
-
-  const pollTimer = React.useCallback(async () => {
-    try {
-      const selfRes = await apiCall<{ member?: { id: string } | null }>('/api/staff/team-members/self')
-      const memberId = selfRes.result?.member?.id
-      if (!memberId) { updateTimer(null); return }
-
-      const res = await apiCall<{ items?: Array<Record<string, unknown>> }>(
-        `/api/staff/timesheets/time-entries?staffMemberId=${memberId}&running=true&pageSize=50`,
-      )
-      const items = (res.result?.items ?? []) as Array<Record<string, unknown>>
-      const active = items.find((e) => e.started_at && !e.ended_at)
-
-      if (!active) {
-        updateTimer(null)
-        return
-      }
-
-      const projectId = String(active.time_project_id ?? '')
-      let projectName = ''
-      let projectColor: string | null = null
-      if (projectId) {
-        const projRes = await apiCall<{ items?: Array<Record<string, unknown>> }>(
-          `/api/staff/timesheets/time-projects?ids=${projectId}&pageSize=1`,
-        )
-        const proj = (projRes.result?.items ?? [])[0]
-        if (proj) {
-          projectName = String(proj.name ?? '')
-          projectColor = typeof proj.color === 'string' ? proj.color : null
-        }
-      }
-
-      updateTimer({
-        entryId: String(active.id ?? ''),
-        projectName,
-        projectColor,
-        startedAt: String(active.started_at ?? ''),
-      })
-    } catch {
-      // Silent — don't crash the sidebar
-    }
-  }, [updateTimer])
-
-  // Poll for active timer on mount + every 30s
-  React.useEffect(() => {
-    void pollTimer()
-    const poll = setInterval(() => { void pollTimer() }, 30000)
-    return () => clearInterval(poll)
-  }, [pollTimer])
-
   // Tick the elapsed counter locally every second
   React.useEffect(() => {
-    if (!timer) {
+    if (!timer.running || !timer.startedAt) {
       if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null }
       setElapsed(0)
       return
@@ -117,9 +35,9 @@ function TimerSidebarIndicator() {
     return () => {
       if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null }
     }
-  }, [timer])
+  }, [timer.running, timer.startedAt])
 
-  if (!timer) return null
+  if (!timer.running || !timer.entryId) return null
 
   return (
     <a