@hed-hog/operations 0.0.306 → 0.0.310

package/hedhog/frontend/app/timesheets/page.tsx.ejs

@@ -1,6 +1,11 @@
 'use client';
 
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -12,13 +17,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
 import {
   Form,
   FormControl,
@@ -53,12 +51,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   ClipboardList,
   Clock3,
+  Eye,
+  LayoutGrid,
+  List,
   Loader2,
-  Pencil,
   Plus,
   Send,
-  Sparkles,
-  Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -100,7 +98,10 @@ type QuickEntryFormValues = {
   description: string;
 };
 
-const getTodayDate = () => new Date().toISOString().slice(0, 10);
+const getTodayDate = () => {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+};
 
 const buildDefaultFormValues = (): QuickEntryFormValues => ({
   projectId: undefined,
@@ -146,7 +147,13 @@ function formatDateLabel(value?: string | null) {
     return '—';
   }
 
-  const date = new Date(`${value}T00:00:00`);
+  // Always extract just the YYYY-MM-DD part to avoid UTC offset shifting the date
+  const match = String(value).match(/(\d{4}-\d{2}-\d{2})/);
+  if (!match) {
+    return value;
+  }
+
+  const date = new Date(`${match[1]}T12:00:00`);
 
   if (Number.isNaN(date.getTime())) {
     return value;
@@ -196,69 +203,6 @@ function buildFollowUpFormValues(
   };
 }
 
-function buildProjectOptionFromEntry(
-  entry: OperationsTimesheetEntry
-): OperationsProjectOption | null {
-  if (!entry.projectId) {
-    return null;
-  }
-
-  return {
-    id: entry.projectId,
-    label:
-      [entry.projectCode, entry.projectName, entry.roleLabel]
-        .filter(Boolean)
-        .join(' • ') || String(entry.projectId),
-    name: entry.projectName || String(entry.projectId),
-    code: entry.projectCode,
-    projectAssignmentId: entry.projectAssignmentId,
-    roleLabel: entry.roleLabel,
-    status: 'active',
-  };
-}
-
-function buildTaskOptionFromEntry(
-  entry: OperationsTimesheetEntry
-): OperationsTaskOption | null {
-  if (!entry.taskId || !entry.projectId || !entry.projectAssignmentId) {
-    return null;
-  }
-
-  return {
-    id: entry.taskId,
-    label:
-      [entry.taskName || entry.activityLabel, entry.projectName]
-        .filter(Boolean)
-        .join(' • ') || String(entry.taskId),
-    name: entry.taskName || entry.activityLabel || String(entry.taskId),
-    status: 'todo',
-    projectId: entry.projectId,
-    projectAssignmentId: entry.projectAssignmentId,
-    projectName: entry.projectName || '',
-    projectCode: entry.projectCode,
-  };
-}
-
-function buildEditFormValues(
-  entry: OperationsTimesheetEntry
-): QuickEntryFormValues {
-  const durationMinutes =
-    typeof entry.durationMinutes === 'number' &&
-    Number.isFinite(entry.durationMinutes)
-      ? entry.durationMinutes
-      : Math.round(Number(entry.hours ?? 0) * 60);
-  const useHours = durationMinutes > 0 && durationMinutes % 60 === 0;
-
-  return {
-    projectId: entry.projectId ?? undefined,
-    taskId: entry.taskId ?? undefined,
-    workDate: entry.workDate ? entry.workDate.slice(0, 10) : '',
-    duration: useHours ? durationMinutes / 60 : durationMinutes,
-    unit: useHours ? 'hours' : 'minutes',
-    description: entry.description ?? '',
-  };
-}
-
 export default function OperationsTimesheetsPage() {
   const t = useTranslations('operations.TimesheetsPage');
   const commonT = useTranslations('operations.Common');
@@ -266,13 +210,25 @@ export default function OperationsTimesheetsPage() {
   const access = useOperationsAccess();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
+    if (typeof window === 'undefined') return 'table';
+    const saved = window.localStorage.getItem(
+      'operations-timesheets-view-mode'
+    );
+    return saved === 'cards' ? 'cards' : 'table';
+  });
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const [isTaskCreateSheetOpen, setIsTaskCreateSheetOpen] = useState(false);
   const [keepContextOnSave, setKeepContextOnSave] = useState(true);
   const [editingEntry, setEditingEntry] =
     useState<OperationsTimesheetEntry | null>(null);
   const [entryToDelete, setEntryToDelete] =
     useState<OperationsTimesheetEntry | null>(null);
+  const [selectedTimesheet, setSelectedTimesheet] =
+    useState<OperationsTimesheet | null>(null);
   const [isDeletingEntry, setIsDeletingEntry] = useState(false);
   const [projectQuery, setProjectQuery] = useState({ search: '', page: 1 });
   const [projectOptions, setProjectOptions] = useState<
@@ -321,13 +277,42 @@ export default function OperationsTimesheetsPage() {
     name: 'unit',
   });
 
-  const { data: timesheets = [], refetch } = useQuery<OperationsTimesheet[]>({
-    queryKey: ['operations-timesheets', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<OperationsTimesheet[]>(request, '/operations/timesheets'),
-    placeholderData: (previous) => previous ?? [],
+  const { data: timesheetsResponse, refetch } = useQuery<
+    PaginatedResponse<OperationsTimesheet>
+  >({
+    queryKey: [
+      'operations-timesheets',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (search.trim()) params.set('search', search.trim());
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      return fetchOperations<PaginatedResponse<OperationsTimesheet>>(
+        request,
+        `/operations/timesheets?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
   });
 
+  const timesheets = timesheetsResponse?.data ?? [];
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value as 'table' | 'cards');
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('operations-timesheets-view-mode', value);
+    }
+  };
+
   const { data: me } = useQuery<OperationsCollaborator>({
     queryKey: ['operations-timesheets-me', currentLocaleCode],
     enabled: access.isCollaborator,
@@ -338,11 +323,9 @@ export default function OperationsTimesheetsPage() {
       ),
   });
 
-  const {
-    data: recentEntriesResponse,
-    isLoading: isRecentEntriesLoading,
-    refetch: refetchRecentEntries,
-  } = useQuery<PaginatedResponse<OperationsTimesheetEntry>>({
+  const { refetch: refetchRecentEntries } = useQuery<
+    PaginatedResponse<OperationsTimesheetEntry>
+  >({
     queryKey: [
       'operations-timesheet-recent-entries',
       currentLocaleCode,
@@ -532,7 +515,6 @@ export default function OperationsTimesheetsPage() {
     );
   }, [showToastHandler, t, taskOptionsError]);
 
-  const recentEntries = recentEntriesResponse?.data ?? [];
   const filteredTaskOptions = selectedProjectId
     ? taskOptions.filter((option) => option.projectId === selectedProjectId)
     : [];
@@ -540,34 +522,7 @@ export default function OperationsTimesheetsPage() {
     filteredTaskOptions.find((option) => option.id === selectedTaskId) ?? null;
   const isEditingEntry = Boolean(editingEntry);
 
-  const filteredRows = useMemo(
-    () =>
-      timesheets.filter((item) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              item.collaboratorName,
-              item.approverName,
-              item.notes,
-              ...((item.entries ?? []).flatMap((entry) => [
-                entry.projectName,
-                entry.taskName,
-                entry.activityLabel,
-                entry.description,
-              ]) as Array<string | undefined>),
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-        const matchesStatus =
-          statusFilter === 'all' ? true : item.status === statusFilter;
-        return matchesSearch && matchesStatus;
-      }),
-    [timesheets, search, statusFilter]
-  );
+  const filteredRows = timesheets;
 
   const cards = [
     {
@@ -606,20 +561,6 @@ export default function OperationsTimesheetsPage() {
     setIsSheetOpen(true);
   };
 
-  const openEditEntry = (entry: OperationsTimesheetEntry) => {
-    const projectOption = buildProjectOptionFromEntry(entry);
-    const taskOption = buildTaskOptionFromEntry(entry);
-
-    setEditingEntry(entry);
-    form.reset(buildEditFormValues(entry));
-    setProjectQuery({ search: '', page: 1 });
-    setTaskQuery({ search: '', page: 1 });
-    setProjectOptions(projectOption ? [projectOption] : []);
-    setTaskOptions(taskOption ? [taskOption] : []);
-    setIsTaskCreateSheetOpen(false);
-    setIsSheetOpen(true);
-  };
-
   const closeCreateSheet = () => {
     setIsSheetOpen(false);
     setEditingEntry(null);
@@ -631,6 +572,11 @@ export default function OperationsTimesheetsPage() {
     setTaskOptions([]);
   };
 
+  const openDetails = (timesheet: OperationsTimesheet) => {
+    setSelectedTimesheet(timesheet);
+    setIsDetailsOpen(true);
+  };
+
   const canManageRow = (timesheet: OperationsTimesheet) => {
     return Boolean(
       me?.id &&
@@ -639,14 +585,6 @@ export default function OperationsTimesheetsPage() {
     );
   };
 
-  const canManageEntry = (entry: OperationsTimesheetEntry) => {
-    return Boolean(
-      me?.id &&
-      entry.collaboratorId === me.id &&
-      ['draft', 'rejected'].includes(entry.status ?? '')
-    );
-  };
-
   const handleQuickEntrySubmit = async (values: QuickEntryFormValues) => {
     const payload = {
       projectId: values.projectId,
@@ -781,251 +719,260 @@ export default function OperationsTimesheetsPage() {
         }
       />
 
-      <SearchBar
-        searchQuery={search}
-        onSearchChange={setSearch}
-        onSearch={() => undefined}
-        placeholder={t('searchPlaceholder')}
-        controls={[
-          {
-            id: 'status',
-            type: 'select',
-            value: statusFilter,
-            onChange: setStatusFilter,
-            placeholder: commonT('labels.status'),
-            options: [
-              { value: 'all', label: commonT('filters.allStatuses') },
-              { value: 'draft', label: formatEnumLabel('draft') },
-              { value: 'submitted', label: formatEnumLabel('submitted') },
-              { value: 'approved', label: formatEnumLabel('approved') },
-              { value: 'rejected', label: formatEnumLabel('rejected') },
-            ],
-          },
-        ]}
-      />
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => {
+                  setStatusFilter(value);
+                  setPage(1);
+                },
+                placeholder: commonT('labels.status'),
+                options: [
+                  { value: 'all', label: commonT('filters.allStatuses') },
+                  { value: 'draft', label: formatEnumLabel('draft') },
+                  { value: 'submitted', label: formatEnumLabel('submitted') },
+                  { value: 'approved', label: formatEnumLabel('approved') },
+                  { value: 'rejected', label: formatEnumLabel('rejected') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
 
       <KpiCardsGrid items={cards} columns={3} />
 
-      {access.isCollaborator ? (
-        <Card>
-          <CardHeader className="border-b">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-              <div className="flex items-start gap-3">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-                  <Sparkles className="size-5" />
+      {timesheets.length > 0 ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {timesheets.map((timesheet) => (
+              <div
+                key={timesheet.id}
+                className="rounded-lg border bg-card shadow-sm p-4 space-y-3"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="truncate font-semibold">
+                      {timesheet.collaboratorName}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                      {formatDateRange(
+                        timesheet.weekStartDate,
+                        timesheet.weekEndDate
+                      )}
+                    </div>
+                  </div>
+                  <StatusBadge
+                    label={
+                      t.has(`statuses.${timesheet.status}`)
+                        ? t(`statuses.${timesheet.status}`)
+                        : formatEnumLabel(timesheet.status)
+                    }
+                    className={getStatusBadgeClass(timesheet.status)}
+                  />
                 </div>
-
-                <div className="space-y-1">
-                  <CardTitle>{t('recentEntries.title')}</CardTitle>
-                  <CardDescription>
-                    {t('recentEntries.description')}
-                  </CardDescription>
+                <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
+                  <div>
+                    <span className="font-medium text-foreground">
+                      {commonT('labels.totalHours')}:
+                    </span>{' '}
+                    {formatHours(timesheet.totalHours)}
+                  </div>
+                  <div>
+                    <span className="font-medium text-foreground">
+                      {commonT('labels.entries')}:
+                    </span>{' '}
+                    {timesheet.entries?.length ?? 0}
+                  </div>
                 </div>
-              </div>
-
-              <Button size="sm" onClick={openCreate}>
-                <Plus className="size-4" />
-                {t('sheet.createTitle')}
-              </Button>
-            </div>
-          </CardHeader>
-
-          <CardContent className="px-0">
-            {isRecentEntriesLoading ? (
-              <div className="px-6 py-6 text-sm text-muted-foreground">
-                {t('recentEntries.loading')}
-              </div>
-            ) : recentEntries.length > 0 ? (
-              <div className="divide-y">
-                {recentEntries.map((entry) => {
-                  const isEditableEntry = canManageEntry(entry);
-
-                  return (
-                    <div
-                      key={entry.id}
-                      className={`flex flex-col gap-3 px-6 py-4 sm:flex-row sm:items-center sm:justify-between ${
-                        isEditableEntry
-                          ? 'cursor-pointer hover:bg-muted/30'
-                          : ''
-                      }`}
-                      onClick={
-                        isEditableEntry ? () => openEditEntry(entry) : undefined
-                      }
+                {timesheet.approverName ? (
+                  <div className="text-sm text-muted-foreground">
+                    <span className="font-medium text-foreground">
+                      {commonT('labels.approver')}:
+                    </span>{' '}
+                    {timesheet.approverName}
+                  </div>
+                ) : null}
+                {canManageRow(timesheet) ? (
+                  <div className="flex justify-end gap-2 border-t border-border/60 pt-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="cursor-pointer"
+                      onClick={() => openDetails(timesheet)}
                     >
-                      <div className="min-w-0 space-y-1">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <span className="font-medium text-foreground">
-                            {[entry.projectCode, entry.projectName]
-                              .filter(Boolean)
-                              .join(' • ') || commonT('labels.unassigned')}
-                          </span>
-                          <span className="text-muted-foreground">•</span>
-                          <span className="text-sm text-muted-foreground">
-                            {entry.taskName ||
-                              entry.activityLabel ||
-                              commonT('labels.noNotes')}
-                          </span>
-                        </div>
-
-                        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                          <span>{formatDateLabel(entry.workDate)}</span>
-                          {entry.description ? (
-                            <>
-                              <span>•</span>
-                              <span className="truncate">
-                                {entry.description}
-                              </span>
-                            </>
-                          ) : null}
-                        </div>
+                      <Eye className="size-4" />
+                      {t('actions.viewDetails')}
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => void submitTimesheet(timesheet.id)}
+                    >
+                      <Send className="size-4" />
+                      {commonT('actions.submit')}
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="flex justify-end border-t border-border/60 pt-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="cursor-pointer"
+                      onClick={() => openDetails(timesheet)}
+                    >
+                      <Eye className="size-4" />
+                      {t('actions.viewDetails')}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{commonT('labels.collaborator')}</TableHead>
+                  <TableHead>{commonT('labels.week')}</TableHead>
+                  <TableHead>{commonT('labels.entries')}</TableHead>
+                  <TableHead>{commonT('labels.totalHours')}</TableHead>
+                  <TableHead>{commonT('labels.approver')}</TableHead>
+                  <TableHead>{commonT('labels.decisionNote')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead>{commonT('labels.actions')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRows.map((timesheet) => (
+                  <TableRow key={timesheet.id} className="hover:bg-muted/30">
+                    <TableCell>
+                      <div className="font-medium">
+                        {timesheet.collaboratorName}
                       </div>
-
-                      <div className="flex items-center gap-2 self-start sm:self-center">
-                        {entry.status ? (
-                          <StatusBadge
-                            label={formatEnumLabel(entry.status)}
-                            className={getStatusBadgeClass(entry.status)}
-                          />
-                        ) : null}
-
-                        <span className="inline-flex items-center rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground">
-                          {formatEntryDuration(
-                            entry.durationMinutes,
-                            entry.hours
-                          )}
-                        </span>
-
-                        {isEditableEntry ? (
+                      <div className="text-xs text-muted-foreground">
+                        {timesheet.notes || commonT('labels.noNotes')}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {formatDateRange(
+                        timesheet.weekStartDate,
+                        timesheet.weekEndDate
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="font-medium">
+                        {timesheet.entries?.length ?? 0}{' '}
+                        {commonT('labels.lines')}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {(timesheet.entries ?? [])
+                          .slice(0, 2)
+                          .map(
+                            (entry) =>
+                              [
+                                entry.projectName,
+                                entry.taskName || entry.activityLabel,
+                              ]
+                                .filter(Boolean)
+                                .join(' • ') || commonT('labels.unassigned')
+                          )
+                          .join(', ') || commonT('labels.unassigned')}
+                      </div>
+                    </TableCell>
+                    <TableCell>{formatHours(timesheet.totalHours)}</TableCell>
+                    <TableCell>
+                      {timesheet.approverName || commonT('labels.notAssigned')}
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm text-muted-foreground">
+                        {timesheet.decisionNote || commonT('labels.noNotes')}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={
+                          t.has(`statuses.${timesheet.status}`)
+                            ? t(`statuses.${timesheet.status}`)
+                            : formatEnumLabel(timesheet.status)
+                        }
+                        className={getStatusBadgeClass(timesheet.status)}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex justify-end gap-2">
+                        {canManageRow(timesheet) ? (
                           <>
                             <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="text-muted-foreground"
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                openEditEntry(entry);
-                              }}
-                              aria-label={t('sheet.editTitle')}
+                              variant="outline"
+                              size="sm"
+                              className="cursor-pointer"
+                              onClick={() => openDetails(timesheet)}
                             >
-                              <Pencil className="size-4" />
+                              <Eye className="size-4" />
+                              {t('actions.viewDetails')}
                             </Button>
                             <Button
-                              type="button"
-                              variant="ghost"
                               size="icon"
-                              className="text-muted-foreground hover:text-destructive"
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                setEntryToDelete(entry);
-                              }}
-                              aria-label={t('messages.confirmDeleteTitle')}
+                              onClick={() => void submitTimesheet(timesheet.id)}
                             >
-                              <Trash2 className="size-4" />
+                              <Send className="size-4" />
                             </Button>
                           </>
-                        ) : null}
+                        ) : (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="cursor-pointer"
+                            onClick={() => openDetails(timesheet)}
+                          >
+                            <Eye className="size-4" />
+                            {t('actions.viewDetails')}
+                          </Button>
+                        )}
                       </div>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="px-6 py-6 text-sm text-muted-foreground">
-                {t('recentEntries.empty')}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      ) : null}
-
-      {filteredRows.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{commonT('labels.collaborator')}</TableHead>
-                <TableHead>{commonT('labels.week')}</TableHead>
-                <TableHead>{commonT('labels.entries')}</TableHead>
-                <TableHead>{commonT('labels.totalHours')}</TableHead>
-                <TableHead>{commonT('labels.approver')}</TableHead>
-                <TableHead>{commonT('labels.decisionNote')}</TableHead>
-                <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead>{commonT('labels.actions')}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredRows.map((timesheet) => (
-                <TableRow key={timesheet.id} className="hover:bg-muted/30">
-                  <TableCell>
-                    <div className="font-medium">
-                      {timesheet.collaboratorName}
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      {timesheet.notes || commonT('labels.noNotes')}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    {formatDateRange(
-                      timesheet.weekStartDate,
-                      timesheet.weekEndDate
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <div className="font-medium">
-                      {timesheet.entries?.length ?? 0} {commonT('labels.lines')}
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      {(timesheet.entries ?? [])
-                        .slice(0, 2)
-                        .map(
-                          (entry) =>
-                            [
-                              entry.projectName,
-                              entry.taskName || entry.activityLabel,
-                            ]
-                              .filter(Boolean)
-                              .join(' • ') || commonT('labels.unassigned')
-                        )
-                        .join(', ') || commonT('labels.unassigned')}
-                    </div>
-                  </TableCell>
-                  <TableCell>{formatHours(timesheet.totalHours)}</TableCell>
-                  <TableCell>
-                    {timesheet.approverName || commonT('labels.notAssigned')}
-                  </TableCell>
-                  <TableCell>
-                    <div className="text-sm text-muted-foreground">
-                      {timesheet.decisionNote || commonT('labels.noNotes')}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={formatEnumLabel(timesheet.status)}
-                      className={getStatusBadgeClass(timesheet.status)}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-2">
-                      {canManageRow(timesheet) ? (
-                        <Button
-                          size="icon"
-                          onClick={() => void submitTimesheet(timesheet.id)}
-                        >
-                          <Send className="size-4" />
-                        </Button>
-                      ) : (
-                        <span className="text-xs text-muted-foreground">
-                          {commonT('labels.viewOnly')}
-                        </span>
-                      )}
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
       ) : (
         <EmptyState
           icon={<ClipboardList className="size-12" />}
@@ -1040,6 +987,18 @@ export default function OperationsTimesheetsPage() {
         />
       )}
 
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={timesheetsResponse?.total ?? 0}
+        pageSizeOptions={[12, 24, 48]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
+
       <Sheet
         open={isSheetOpen}
         onOpenChange={(open) => {
@@ -1301,6 +1260,142 @@ export default function OperationsTimesheetsPage() {
         onCreated={handleTaskCreated}
       />
 
+      <Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle>{t('details.title')}</SheetTitle>
+            <SheetDescription>{t('details.description')}</SheetDescription>
+          </SheetHeader>
+
+          {selectedTimesheet ? (
+            <div className="mt-6 space-y-5 px-4 pb-8">
+              <div className="rounded-lg border bg-muted/20 p-4">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div>
+                    <div className="text-lg font-semibold">
+                      {selectedTimesheet.collaboratorName}
+                    </div>
+                    <div className="mt-1 text-sm text-muted-foreground">
+                      {formatDateRange(
+                        selectedTimesheet.weekStartDate,
+                        selectedTimesheet.weekEndDate
+                      )}
+                    </div>
+                  </div>
+                  <StatusBadge
+                    label={
+                      t.has(`statuses.${selectedTimesheet.status}`)
+                        ? t(`statuses.${selectedTimesheet.status}`)
+                        : formatEnumLabel(selectedTimesheet.status)
+                    }
+                    className={getStatusBadgeClass(selectedTimesheet.status)}
+                  />
+                </div>
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    {commonT('labels.totalHours')}
+                  </div>
+                  <div className="mt-1 text-sm">
+                    {formatHours(selectedTimesheet.totalHours)}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    {commonT('labels.entries')}
+                  </div>
+                  <div className="mt-1 text-sm">
+                    {selectedTimesheet.entries?.length ?? 0}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    {commonT('labels.approver')}
+                  </div>
+                  <div className="mt-1 text-sm">
+                    {selectedTimesheet.approverName ||
+                      commonT('labels.notAssigned')}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    {t('details.period')}
+                  </div>
+                  <div className="mt-1 text-sm">
+                    {formatDateLabel(selectedTimesheet.weekStartDate)} -{' '}
+                    {formatDateLabel(selectedTimesheet.weekEndDate)}
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <div className="text-xs font-medium uppercase text-muted-foreground">
+                  {commonT('labels.notes')}
+                </div>
+                <div className="mt-1 rounded-lg border p-3 text-sm">
+                  {selectedTimesheet.notes || commonT('labels.noNotes')}
+                </div>
+              </div>
+
+              <div>
+                <div className="text-xs font-medium uppercase text-muted-foreground">
+                  {commonT('labels.decisionNote')}
+                </div>
+                <div className="mt-1 rounded-lg border p-3 text-sm">
+                  {selectedTimesheet.decisionNote || commonT('labels.noNotes')}
+                </div>
+              </div>
+
+              <div>
+                <div className="text-xs font-medium uppercase text-muted-foreground">
+                  {t('details.entriesTitle')}
+                </div>
+                <div className="mt-2 space-y-3">
+                  {(selectedTimesheet.entries ?? []).length ? (
+                    (selectedTimesheet.entries ?? []).map((entry) => (
+                      <div key={entry.id} className="rounded-lg border p-3">
+                        <div className="flex flex-wrap items-start justify-between gap-3">
+                          <div>
+                            <div className="font-medium">
+                              {entry.taskName ||
+                                entry.activityLabel ||
+                                commonT('labels.unassigned')}
+                            </div>
+                            <div className="text-xs text-muted-foreground">
+                              {[entry.projectName, entry.roleLabel]
+                                .filter(Boolean)
+                                .join(' • ') || commonT('labels.unassigned')}
+                            </div>
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {formatEntryDuration(
+                              entry.durationMinutes,
+                              entry.hours
+                            )}
+                          </div>
+                        </div>
+                        <div className="mt-2 text-xs text-muted-foreground">
+                          {formatDateLabel(entry.workDate)}
+                        </div>
+                        <div className="mt-2 text-sm">
+                          {entry.description || commonT('labels.noNotes')}
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <div className="rounded-lg border p-3 text-sm text-muted-foreground">
+                      {t('details.noEntries')}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </SheetContent>
+      </Sheet>
+
       <AlertDialog
         open={Boolean(entryToDelete)}
         onOpenChange={(open) => {