@open-mercato/core 0.8.1-develop.7274.1.21a0083828 → 0.8.1-develop.7294.1.0ef99fc518

package/src/modules/staff/backend/staff/time-tracking/page.tsx

@@ -31,11 +31,13 @@
 
 import * as React from 'react'
 import Link from 'next/link'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
 import { CalendarDays, Copy, Lock, Pencil, Plus } from 'lucide-react'
 import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Progress } from '@open-mercato/ui/primitives/progress'
 import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
 import {
   Select,
   SelectContent,
@@ -335,6 +337,89 @@ export default function TimeTrackingMyWorkPage() {
 
   const todayTotal = data.entries.reduce((sum, entry) => sum + entry.durationMinutes, 0)
 
+  const todayEntriesColumns = React.useMemo<ColumnDef<MyWorkEntry>[]>(
+    () => [
+      {
+        id: 'task',
+        header: t('staff.time_tracking.myWork.today.columns.task', 'Task'),
+        cell: ({ row }) => {
+          const entry = row.original
+          return (
+            <div>
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="font-medium">
+                  {entry.taskTitle ??
+                    entry.description ??
+                    t('staff.time_tracking.entries.table.noTask', 'No task')}
+                </span>
+                {entry.isBillable ? null : (
+                  <StatusBadge variant="neutral">
+                    {t('staff.time_tracking.entries.badges.nonBillable', 'non-billable')}
+                  </StatusBadge>
+                )}
+                {entry.isLocked ? (
+                  <StatusBadge variant="neutral">
+                    <Lock className="size-3" aria-hidden="true" />
+                    {t('staff.time_tracking.entries.badges.locked', 'locked')}
+                  </StatusBadge>
+                ) : null}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {[entry.projectName, entry.taskTitle ? entry.description : null]
+                  .filter((part): part is string => Boolean(part))
+                  .join(' · ')}
+              </div>
+            </div>
+          )
+        },
+      },
+      {
+        id: 'clock',
+        header: t('staff.time_tracking.myWork.today.columns.time', 'Time'),
+        meta: { maxWidth: '8rem' },
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">{formatClockRange(row.original) ?? '—'}</span>
+        ),
+      },
+      {
+        id: 'duration',
+        header: () => (
+          <span className="block text-right">
+            {t('staff.time_tracking.myWork.today.columns.duration', 'Duration')}
+          </span>
+        ),
+        meta: { maxWidth: '6rem' },
+        cell: ({ row }) => (
+          <span className="block text-right font-mono font-semibold tabular-nums">
+            {formatDuration(row.original.durationMinutes, 'clock')}
+          </span>
+        ),
+      },
+      {
+        id: 'actions',
+        header: '',
+        meta: { maxWidth: '3rem' },
+        cell: ({ row }) => {
+          const entry = row.original
+          return canManageOwn && !entry.isLocked ? (
+            <div className="flex justify-end">
+              <Button
+                type="button"
+                variant="ghost"
+                size="2xs"
+                aria-label={t('staff.time_tracking.timesheet.list.edit', 'Edit')}
+                onClick={() => setDialog({ open: true, entryId: entry.id })}
+              >
+                <Pencil className="size-3.5" aria-hidden="true" />
+              </Button>
+            </div>
+          ) : null
+        },
+      },
+    ],
+    [canManageOwn, t],
+  )
+
   const submitQuickEntry = React.useCallback(async () => {
     if (!quickTargetKey || quickMinutes === null || quickMinutes <= 0 || quickSaving) return
     const target = parseTargetKey(quickTargetKey)
@@ -568,136 +653,82 @@ export default function TimeTrackingMyWorkPage() {
                     {t('staff.time_tracking.myWork.today.empty', 'Nothing logged today yet.')}
                   </p>
                 ) : (
-                  <table className="w-full text-sm">
-                    <tbody>
-                      {data.entries.map((entry) => (
-                        <tr key={entry.id} className="border-b last:border-0">
-                          <td className="p-3 align-top">
-                            <div className="flex flex-wrap items-center gap-2">
-                              <span className="font-medium">
-                                {entry.taskTitle ??
-                                  entry.description ??
-                                  t('staff.time_tracking.entries.table.noTask', 'No task')}
-                              </span>
-                              {entry.isBillable ? null : (
-                                <StatusBadge variant="neutral">
-                                  {t('staff.time_tracking.entries.badges.nonBillable', 'non-billable')}
-                                </StatusBadge>
-                              )}
-                              {entry.isLocked ? (
-                                <StatusBadge variant="neutral">
-                                  <Lock className="size-3" aria-hidden="true" />
-                                  {t('staff.time_tracking.entries.badges.locked', 'locked')}
-                                </StatusBadge>
-                              ) : null}
-                            </div>
-                            <div className="text-xs text-muted-foreground">
-                              {[entry.projectName, entry.taskTitle ? entry.description : null]
-                                .filter((part): part is string => Boolean(part))
-                                .join(' · ')}
-                            </div>
-                          </td>
-                          <td className="w-32 p-3 align-top text-xs text-muted-foreground">
-                            {formatClockRange(entry) ?? '—'}
-                          </td>
-                          <td className="w-20 p-3 text-right align-top font-mono font-semibold tabular-nums">
-                            {formatDuration(entry.durationMinutes, 'clock')}
-                          </td>
-                          <td className="w-16 p-3 text-right align-top">
-                            {canManageOwn && !entry.isLocked ? (
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="2xs"
-                                aria-label={t('staff.time_tracking.timesheet.list.edit', 'Edit')}
-                                onClick={() => setDialog({ open: true, entryId: entry.id })}
-                              >
-                                <Pencil className="size-3.5" aria-hidden="true" />
-                              </Button>
-                            ) : null}
-                          </td>
-                        </tr>
-                      ))}
-                      {canManageOwn && quickTargets.length > 0 ? (
-                        <tr>
-                          <td colSpan={4} className="p-3">
-                            <div
-                              className="flex flex-wrap items-start gap-2"
-                              onKeyDown={(event) => {
-                                if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-                                  event.preventDefault()
-                                  void submitQuickEntry()
-                                }
-                              }}
-                            >
-                              <Select value={quickTargetKey} onValueChange={setQuickTargetKey}>
-                                <SelectTrigger
-                                  className="w-72"
-                                  aria-label={t('staff.time_tracking.myWork.quickEntry.target', 'Project or task')}
-                                >
-                                  <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {quickTargets.map((target) => (
-                                    <SelectItem key={target.key} value={target.key}>
-                                      {targetLabel(target)}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                              <div className="w-32">
-                                <DurationInput
-                                  key={quickEpoch}
-                                  variant="compact"
-                                  value={quickMinutes}
-                                  onChange={(minutes) => setQuickMinutes(minutes)}
-                                  ariaLabel={t('staff.time_tracking.myWork.quickEntry.duration', 'Duration')}
-                                />
-                              </div>
-                              <Button
-                                type="button"
-                                size="sm"
-                                disabled={quickSaving || quickMinutes === null || quickMinutes <= 0}
-                                onClick={() => void submitQuickEntry()}
-                              >
-                                {t('staff.time_tracking.myWork.quickEntry.save', 'Save')}
-                              </Button>
-                              <span className="self-center text-xs text-muted-foreground">
-                                {t('staff.time_tracking.entryDialog.shortcutSave', '⌘↵ to save')}
-                              </span>
-                              {/*
-                                * The same block the task drawer offers, from the same
-                                * component: a row that can log an hour but not say what
-                                * it was for, or when, sends people to the full dialog
-                                * for the one field they were missing.
-                                */}
-                              <div className="w-full">
-                                <EntryDetailsFields
-                                  idPrefix="my-work-quick"
-                                  value={quickDetails}
-                                  onChange={setQuickDetails}
-                                  tagOptions={tagOptions}
-                                  onCreateTag={createTag}
-                                  disabled={quickSaving}
-                                />
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      ) : null}
-                    </tbody>
-                    <tfoot>
-                      <tr className="border-t bg-muted/40 font-medium">
-                        <td className="p-3" colSpan={2}>
-                          {t('staff.time_tracking.myWork.today.total', 'Total today')}
-                        </td>
-                        <td className="p-3 text-right font-mono tabular-nums">
-                          {formatDuration(todayTotal, 'clock')}
-                        </td>
-                        <td />
-                      </tr>
-                    </tfoot>
-                  </table>
+                  <>
+                    <DataTable<MyWorkEntry>
+                      embedded
+                      extensionTableId={extensionPoints.hosts.myWorkTodayEntriesTable.tableId}
+                      disableRowClick
+                      columns={todayEntriesColumns}
+                      data={data.entries}
+                    />
+                    {canManageOwn && quickTargets.length > 0 ? (
+                      <div
+                        className="flex flex-wrap items-start gap-2 border-t p-3"
+                        onKeyDown={(event) => {
+                          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+                            event.preventDefault()
+                            void submitQuickEntry()
+                          }
+                        }}
+                      >
+                        <Select value={quickTargetKey} onValueChange={setQuickTargetKey}>
+                          <SelectTrigger
+                            className="w-72"
+                            aria-label={t('staff.time_tracking.myWork.quickEntry.target', 'Project or task')}
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {quickTargets.map((target) => (
+                              <SelectItem key={target.key} value={target.key}>
+                                {targetLabel(target)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <div className="w-32">
+                          <DurationInput
+                            key={quickEpoch}
+                            variant="compact"
+                            value={quickMinutes}
+                            onChange={(minutes) => setQuickMinutes(minutes)}
+                            ariaLabel={t('staff.time_tracking.myWork.quickEntry.duration', 'Duration')}
+                          />
+                        </div>
+                        <Button
+                          type="button"
+                          size="sm"
+                          disabled={quickSaving || quickMinutes === null || quickMinutes <= 0}
+                          onClick={() => void submitQuickEntry()}
+                        >
+                          {t('staff.time_tracking.myWork.quickEntry.save', 'Save')}
+                        </Button>
+                        <span className="self-center text-xs text-muted-foreground">
+                          {t('staff.time_tracking.entryDialog.shortcutSave', '⌘↵ to save')}
+                        </span>
+                        {/*
+                          * The same block the task drawer offers, from the same
+                          * component: a row that can log an hour but not say what
+                          * it was for, or when, sends people to the full dialog
+                          * for the one field they were missing.
+                          */}
+                        <div className="w-full">
+                          <EntryDetailsFields
+                            idPrefix="my-work-quick"
+                            value={quickDetails}
+                            onChange={setQuickDetails}
+                            tagOptions={tagOptions}
+                            onCreateTag={createTag}
+                            disabled={quickSaving}
+                          />
+                        </div>
+                      </div>
+                    ) : null}
+                    <div className="flex items-center justify-between border-t bg-muted/40 p-3 text-sm font-medium">
+                      <span>{t('staff.time_tracking.myWork.today.total', 'Total today')}</span>
+                      <span className="font-mono tabular-nums">{formatDuration(todayTotal, 'clock')}</span>
+                    </div>
+                  </>
                 )}
               </section>
 

package/src/modules/staff/backend/staff/time-tracking/projects/[id]/page.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import * as React from 'react'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -330,6 +332,53 @@ export default function TimesheetProjectDetailPage({ params }: { params?: { id?:
   const activeCount = employees.filter((emp) => emp.status === 'active').length
   const inactiveCount = employees.length - activeCount
 
+  const recentEntriesColumns = React.useMemo<ColumnDef<ProjectEntryRow>[]>(
+    () => [
+      {
+        accessorKey: 'date',
+        header: t('staff.timesheets.projects.detail.colDate', 'Date'),
+        cell: ({ row }) => <span className="whitespace-nowrap">{row.original.date}</span>,
+      },
+      {
+        id: 'person',
+        header: t('staff.timesheets.projects.detail.colWho', 'Person'),
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap">
+            {employeeNameById.get(row.original.staffMemberId ?? '') ?? '—'}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'description',
+        header: t('staff.timesheets.projects.detail.colDescription', 'Description'),
+        cell: ({ row }) => (
+          <span className="flex items-center gap-2">
+            <span className="truncate">{row.original.description ?? '—'}</span>
+            {row.original.isBillable ? null : (
+              <Badge variant="neutral">
+                {t('staff.timesheets.projects.detail.nonBillableTag', 'non-billable')}
+              </Badge>
+            )}
+          </span>
+        ),
+      },
+      {
+        id: 'hours',
+        header: () => (
+          <span className="block text-right">
+            {t('staff.timesheets.projects.detail.colHours', 'Hours')}
+          </span>
+        ),
+        cell: ({ row }) => (
+          <span className="block whitespace-nowrap text-right font-mono tabular-nums">
+            {formatHours(row.original.durationMinutes)}
+          </span>
+        ),
+      },
+    ],
+    [employeeNameById, t],
+  )
+
   // --- Load project ---
   React.useEffect(() => {
     if (!projectId) return
@@ -1131,49 +1180,12 @@ export default function TimesheetProjectDetailPage({ params }: { params?: { id?:
                   </p>
                 </div>
               ) : (
-                <div className="overflow-x-auto rounded-lg border">
-                  <table className="w-full text-sm">
-                    <thead>
-                      <tr className="border-b bg-muted/40 text-left">
-                        <th className="px-3 py-2 font-medium text-muted-foreground">
-                          {t('staff.timesheets.projects.detail.colDate', 'Date')}
-                        </th>
-                        <th className="px-3 py-2 font-medium text-muted-foreground">
-                          {t('staff.timesheets.projects.detail.colWho', 'Person')}
-                        </th>
-                        <th className="px-3 py-2 font-medium text-muted-foreground">
-                          {t('staff.timesheets.projects.detail.colDescription', 'Description')}
-                        </th>
-                        <th className="px-3 py-2 text-right font-medium text-muted-foreground">
-                          {t('staff.timesheets.projects.detail.colHours', 'Hours')}
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {recentEntries.map((entry) => (
-                        <tr key={entry.id} className="border-b last:border-b-0">
-                          <td className="whitespace-nowrap px-3 py-2">{entry.date}</td>
-                          <td className="whitespace-nowrap px-3 py-2">
-                            {employeeNameById.get(entry.staffMemberId ?? '') ?? '—'}
-                          </td>
-                          <td className="px-3 py-2">
-                            <span className="flex items-center gap-2">
-                              <span className="truncate">{entry.description ?? '—'}</span>
-                              {entry.isBillable ? null : (
-                                <Badge variant="neutral">
-                                  {t('staff.timesheets.projects.detail.nonBillableTag', 'non-billable')}
-                                </Badge>
-                              )}
-                            </span>
-                          </td>
-                          <td className="whitespace-nowrap px-3 py-2 text-right font-mono tabular-nums">
-                            {formatHours(entry.durationMinutes)}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                <DataTable<ProjectEntryRow>
+                  extensionTableId={extensionPoints.hosts.projectDetailTimeEntriesTable.tableId}
+                  disableRowClick
+                  columns={recentEntriesColumns}
+                  data={recentEntries}
+                />
               )}
             </TabsContent>
 

package/src/modules/staff/backend/staff/time-tracking/reports/[id]/page.tsx

@@ -23,8 +23,10 @@
 
 import * as React from 'react'
 import { useSearchParams } from 'next/navigation'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
 import { Download, Lock, LockOpen } from 'lucide-react'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
 import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -55,6 +57,7 @@ import {
   parseReportSheet,
   type ReportHistoryEvent,
   type ReportSheetPayload,
+  type ReportSheetRow,
 } from '../../../../../lib/timesheets-reports/reportSheetData'
 import { formatReportMinutes } from '../../../../../lib/timesheets-reports/reportTotals'
 
@@ -205,6 +208,57 @@ export default function TimeTrackingReportDetailPage({ params }: { params?: { id
     [sheet?.report.currencyCode],
   )
 
+  const lockedEntriesColumns = React.useMemo<ColumnDef<ReportSheetRow>[]>(
+    () => [
+      {
+        accessorKey: 'date',
+        header: t('staff.time_tracking.reports.export.date', 'Date'),
+        cell: ({ row }) => <span className="text-muted-foreground">{row.original.date}</span>,
+      },
+      {
+        accessorKey: 'taskLabel',
+        header: t('staff.time_tracking.reports.export.task', 'Task'),
+      },
+      {
+        accessorKey: 'personLabel',
+        header: t('staff.time_tracking.reports.export.person', 'Person'),
+      },
+      {
+        id: 'hours',
+        header: () => (
+          <span className="block text-right">
+            {t('staff.time_tracking.reports.sheet.time', 'Time')}
+          </span>
+        ),
+        cell: ({ row }) => (
+          <span className="block font-mono tabular-nums text-right">{row.original.hours}</span>
+        ),
+      },
+      {
+        id: 'amount',
+        header: () => (
+          <span className="block text-right">
+            {t('staff.time_tracking.reports.sheet.amount', 'Amount')}
+          </span>
+        ),
+        cell: ({ row }) => (
+          <span className="block font-mono tabular-nums text-right">{money(row.original.amount)}</span>
+        ),
+      },
+      {
+        id: 'lock',
+        header: '',
+        meta: { maxWidth: '2.5rem' },
+        cell: () => (
+          <span className="text-muted-foreground">
+            <Lock aria-hidden="true" className="size-4" />
+          </span>
+        ),
+      },
+    ],
+    [money, t],
+  )
+
   const roundingLabel = React.useMemo(() => {
     const unit = sheet?.report.roundingUnitMinutes ?? 0
     if (!unit) return t('staff.time_tracking.reports.rounding.off', 'no rounding')
@@ -470,44 +524,13 @@ export default function TimeTrackingReportDetailPage({ params }: { params?: { id
                   .replace('{hours}', formatReportMinutes(sheet.totals.billableMinutes))}
               </span>
             </header>
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
-                    <th className="px-4 py-2 text-left font-medium">
-                      {t('staff.time_tracking.reports.export.date', 'Date')}
-                    </th>
-                    <th className="px-4 py-2 text-left font-medium">
-                      {t('staff.time_tracking.reports.export.task', 'Task')}
-                    </th>
-                    <th className="px-4 py-2 text-left font-medium">
-                      {t('staff.time_tracking.reports.export.person', 'Person')}
-                    </th>
-                    <th className="px-4 py-2 text-right font-medium">
-                      {t('staff.time_tracking.reports.sheet.time', 'Time')}
-                    </th>
-                    <th className="px-4 py-2 text-right font-medium">
-                      {t('staff.time_tracking.reports.sheet.amount', 'Amount')}
-                    </th>
-                    <th className="w-10 px-4 py-2" />
-                  </tr>
-                </thead>
-                <tbody>
-                  {sheet.rows.map((row) => (
-                    <tr key={row.entryId} className="border-b border-border/60 last:border-b-0">
-                      <td className="px-4 py-2 text-muted-foreground">{row.date}</td>
-                      <td className="px-4 py-2">{row.taskLabel}</td>
-                      <td className="px-4 py-2">{row.personLabel}</td>
-                      <td className="px-4 py-2 text-right font-mono tabular-nums">{row.hours}</td>
-                      <td className="px-4 py-2 text-right font-mono tabular-nums">{money(row.amount)}</td>
-                      <td className="px-4 py-2 text-muted-foreground">
-                        <Lock aria-hidden="true" className="size-4" />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+            <DataTable<ReportSheetRow>
+              embedded
+              extensionTableId={extensionPoints.hosts.reportDetailLockedEntriesTable.tableId}
+              disableRowClick
+              columns={lockedEntriesColumns}
+              data={sheet.rows}
+            />
             {sheet.rowsTruncated ? (
               <p className="border-t border-border p-3 text-xs text-muted-foreground">
                 {t(

package/src/modules/staff/extension-points.ts

@@ -82,6 +82,22 @@ export const extensionPoints = defineModuleExtensionPoints({
       tableId: 'staff.time_reports.list',
       source: 'backend/staff/time-tracking/reports/page.tsx',
     }),
+    myWorkTodayEntriesTable: dataTableExtensionHost({
+      tableId: 'staff.my_work.today_entries.list',
+      source: 'backend/staff/time-tracking/page.tsx',
+    }),
+    projectDetailTimeEntriesTable: dataTableExtensionHost({
+      tableId: 'staff.time_project_detail.entries.list',
+      source: 'backend/staff/time-tracking/projects/[id]/page.tsx',
+    }),
+    reportDetailLockedEntriesTable: dataTableExtensionHost({
+      tableId: 'staff.time_report_detail.locked_entries.list',
+      source: 'backend/staff/time-tracking/reports/[id]/page.tsx',
+    }),
+    taskBoardListViewTable: dataTableExtensionHost({
+      tableId: 'staff.time_task_board.list_view',
+      source: 'lib/time-tracking-ui/TaskListView.tsx',
+    }),
 
     projectForm: crudFormExtensionHost({
       entityId: 'staff.staff_time_project',

package/src/modules/staff/frontend/[orgSlug]/portal/time-reports/[id]/page.tsx

@@ -11,8 +11,8 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import { ArrowLeft } from 'lucide-react'
+import { replaceWithPageReload } from '@open-mercato/shared/lib/navigation/pageReload'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -50,7 +50,6 @@ type PortalTimeReportDetail = {
 
 export default function PortalTimeReportDetailPage({ params }: Props) {
   const t = useT()
-  const router = useRouter()
   const { auth } = usePortalContext()
   const { user, loading } = auth
 
@@ -60,8 +59,8 @@ export default function PortalTimeReportDetailPage({ params }: Props) {
   const [error, setError] = React.useState<string | null>(null)
 
   React.useEffect(() => {
-    if (!loading && !user) router.replace(`/${params.orgSlug}/portal/login`)
-  }, [loading, user, router, params.orgSlug])
+    if (!loading && !user) replaceWithPageReload(`/${params.orgSlug}/portal/login`)
+  }, [loading, user, params.orgSlug])
 
   const load = React.useCallback(async () => {
     if (!user) return

package/src/modules/staff/frontend/[orgSlug]/portal/time-reports/page.tsx

@@ -12,7 +12,7 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { replaceWithPageReload } from '@open-mercato/shared/lib/navigation/pageReload'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -50,7 +50,6 @@ const PAGE_SIZE = 20
 
 export default function PortalTimeReportsPage({ params }: Props) {
   const t = useT()
-  const router = useRouter()
   const { auth } = usePortalContext()
   const { user, loading } = auth
 
@@ -61,8 +60,8 @@ export default function PortalTimeReportsPage({ params }: Props) {
   const [error, setError] = React.useState<string | null>(null)
 
   React.useEffect(() => {
-    if (!loading && !user) router.replace(`/${params.orgSlug}/portal/login`)
-  }, [loading, user, router, params.orgSlug])
+    if (!loading && !user) replaceWithPageReload(`/${params.orgSlug}/portal/login`)
+  }, [loading, user, params.orgSlug])
 
   const load = React.useCallback(async () => {
     if (!user) return