@hed-hog/operations 0.0.305 → 0.0.309

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,14 +51,15 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   ClipboardList,
   Clock3,
+  Eye,
+  LayoutGrid,
+  List,
   Loader2,
   Plus,
   Send,
-  Sparkles,
-  Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -99,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,
@@ -145,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;
@@ -202,11 +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<
@@ -215,6 +237,7 @@ export default function OperationsTimesheetsPage() {
   const [taskQuery, setTaskQuery] = useState({ search: '', page: 1 });
   const [taskRefreshKey, setTaskRefreshKey] = useState(0);
   const [taskOptions, setTaskOptions] = useState<OperationsTaskOption[]>([]);
+  const previousProjectIdRef = useRef<number | undefined>(undefined);
 
   const quickEntrySchema = useMemo(
     () =>
@@ -254,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,
@@ -271,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,
@@ -307,66 +357,73 @@ export default function OperationsTimesheetsPage() {
     placeholderData: (previous) => previous,
   });
 
-  const { data: projectOptionsResponse, isLoading: isProjectOptionsLoading } =
-    useQuery<PaginatedResponse<OperationsProjectOption>>({
-      queryKey: [
-        'operations-timesheet-project-options',
-        currentLocaleCode,
-        projectQuery.search,
-        projectQuery.page,
-      ],
-      enabled: access.isCollaborator && isSheetOpen,
-      queryFn: () => {
-        const params = new URLSearchParams({
-          page: String(projectQuery.page),
-          pageSize: '20',
-        });
-
-        if (projectQuery.search.trim()) {
-          params.set('search', projectQuery.search.trim());
-        }
+  const {
+    data: projectOptionsResponse,
+    isLoading: isProjectOptionsLoading,
+    error: projectOptionsError,
+  } = useQuery<PaginatedResponse<OperationsProjectOption>>({
+    queryKey: [
+      'operations-timesheet-project-options',
+      currentLocaleCode,
+      projectQuery.search,
+      projectQuery.page,
+    ],
+    enabled: access.isCollaborator && isSheetOpen,
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(projectQuery.page),
+        pageSize: '20',
+      });
 
-        return fetchOperations<PaginatedResponse<OperationsProjectOption>>(
-          request,
-          `/operations/projects/options?${params.toString()}`
-        );
-      },
-      placeholderData: (previous) => previous,
-    });
+      if (projectQuery.search.trim()) {
+        params.set('search', projectQuery.search.trim());
+      }
 
-  const { data: taskOptionsResponse, isLoading: isTaskOptionsLoading } =
-    useQuery<PaginatedResponse<OperationsTaskOption>>({
-      queryKey: [
-        'operations-timesheet-task-options',
-        currentLocaleCode,
-        selectedProjectId,
-        taskQuery.search,
-        taskQuery.page,
-        taskRefreshKey,
-      ],
-      enabled:
-        access.isCollaborator && isSheetOpen && Boolean(selectedProjectId),
-      queryFn: () => {
-        const params = new URLSearchParams({
-          page: String(taskQuery.page),
-          pageSize: '20',
-        });
-
-        if (taskQuery.search.trim()) {
-          params.set('search', taskQuery.search.trim());
-        }
+      return fetchOperations<PaginatedResponse<OperationsProjectOption>>(
+        request,
+        `/operations/projects/options?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
+  });
 
-        if (selectedProjectId) {
-          params.set('projectId', String(selectedProjectId));
-        }
+  const selectedProject =
+    projectOptions.find((option) => option.id === selectedProjectId) ?? null;
 
-        return fetchOperations<PaginatedResponse<OperationsTaskOption>>(
-          request,
-          `/operations/tasks?${params.toString()}`
-        );
-      },
-      placeholderData: (previous) => previous,
-    });
+  const {
+    data: taskOptionsResponse,
+    isLoading: isTaskOptionsLoading,
+    error: taskOptionsError,
+  } = useQuery<PaginatedResponse<OperationsTaskOption>>({
+    queryKey: [
+      'operations-timesheet-task-options',
+      currentLocaleCode,
+      selectedProjectId,
+      taskQuery.search,
+      taskQuery.page,
+      taskRefreshKey,
+    ],
+    enabled: access.isCollaborator && isSheetOpen && Boolean(selectedProjectId),
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(taskQuery.page),
+        pageSize: '20',
+      });
+
+      if (taskQuery.search.trim()) {
+        params.set('search', taskQuery.search.trim());
+      }
+
+      if (selectedProjectId) {
+        params.set('projectId', String(selectedProjectId));
+      }
+
+      return fetchOperations<PaginatedResponse<OperationsTaskOption>>(
+        request,
+        `/operations/tasks?${params.toString()}`
+      );
+    },
+  });
 
   useEffect(() => {
     if (!projectOptionsResponse) {
@@ -375,10 +432,12 @@ export default function OperationsTimesheetsPage() {
 
     setProjectOptions((current) =>
       projectQuery.page === 1
-        ? (projectOptionsResponse.data ?? [])
+        ? editingEntry
+          ? appendUniqueById(current, projectOptionsResponse.data ?? [])
+          : (projectOptionsResponse.data ?? [])
         : appendUniqueById(current, projectOptionsResponse.data ?? [])
     );
-  }, [projectOptionsResponse, projectQuery.page]);
+  }, [editingEntry, projectOptionsResponse, projectQuery.page]);
 
   useEffect(() => {
     if (!selectedProjectId) {
@@ -392,45 +451,78 @@ export default function OperationsTimesheetsPage() {
 
     setTaskOptions((current) =>
       taskQuery.page === 1
-        ? (taskOptionsResponse.data ?? [])
-        : appendUniqueById(current, taskOptionsResponse.data ?? [])
+        ? editingEntry
+          ? appendUniqueById(
+              current,
+              (taskOptionsResponse.data ?? []).filter(
+                (option) => option.projectId === selectedProjectId
+              )
+            )
+          : (taskOptionsResponse.data ?? []).filter(
+              (option) => option.projectId === selectedProjectId
+            )
+        : appendUniqueById(
+            current,
+            (taskOptionsResponse.data ?? []).filter(
+              (option) => option.projectId === selectedProjectId
+            )
+          )
     );
-  }, [selectedProjectId, taskOptionsResponse, taskQuery.page]);
+  }, [editingEntry, selectedProjectId, taskOptionsResponse, taskQuery.page]);
 
-  const recentEntries = recentEntriesResponse?.data ?? [];
-  const selectedProject =
-    projectOptions.find((option) => option.id === selectedProjectId) ?? null;
+  useEffect(() => {
+    const previousProjectId = previousProjectIdRef.current;
+    previousProjectIdRef.current = selectedProjectId;
+
+    if (
+      previousProjectId === undefined ||
+      previousProjectId === selectedProjectId
+    ) {
+      return;
+    }
+
+    setTaskOptions([]);
+    setTaskQuery({ search: '', page: 1 });
+    form.setValue('taskId', undefined, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: false,
+    });
+  }, [form, selectedProjectId]);
+
+  useEffect(() => {
+    if (!projectOptionsError) {
+      return;
+    }
+
+    showToastHandler?.(
+      'error',
+      getOperationsErrorMessage(
+        projectOptionsError,
+        t('messages.projectLoadError')
+      )
+    );
+  }, [projectOptionsError, showToastHandler, t]);
+
+  useEffect(() => {
+    if (!taskOptionsError) {
+      return;
+    }
+
+    showToastHandler?.(
+      'error',
+      getOperationsErrorMessage(taskOptionsError, t('messages.taskLoadError'))
+    );
+  }, [showToastHandler, t, taskOptionsError]);
+
+  const filteredTaskOptions = selectedProjectId
+    ? taskOptions.filter((option) => option.projectId === selectedProjectId)
+    : [];
   const selectedTask =
-    taskOptions.find((option) => option.id === selectedTaskId) ?? null;
+    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 = [
     {
@@ -459,9 +551,11 @@ export default function OperationsTimesheetsPage() {
   ];
 
   const openCreate = () => {
+    setEditingEntry(null);
     form.reset(buildDefaultFormValues());
     setProjectQuery({ search: '', page: 1 });
     setTaskQuery({ search: '', page: 1 });
+    setProjectOptions([]);
     setTaskOptions([]);
     setIsTaskCreateSheetOpen(false);
     setIsSheetOpen(true);
@@ -469,13 +563,20 @@ export default function OperationsTimesheetsPage() {
 
   const closeCreateSheet = () => {
     setIsSheetOpen(false);
+    setEditingEntry(null);
     setIsTaskCreateSheetOpen(false);
     form.reset(buildDefaultFormValues());
     setProjectQuery({ search: '', page: 1 });
     setTaskQuery({ search: '', page: 1 });
+    setProjectOptions([]);
     setTaskOptions([]);
   };
 
+  const openDetails = (timesheet: OperationsTimesheet) => {
+    setSelectedTimesheet(timesheet);
+    setIsDetailsOpen(true);
+  };
+
   const canManageRow = (timesheet: OperationsTimesheet) => {
     return Boolean(
       me?.id &&
@@ -484,28 +585,39 @@ 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,
+      taskId: values.taskId,
+      workDate: values.workDate,
+      duration: values.duration,
+      unit: values.unit,
+      description: trimToNull(values.description),
+    };
+
     try {
-      await mutateOperations(request, '/operations/timesheet-entries', 'POST', {
-        projectId: values.projectId,
-        taskId: values.taskId,
-        workDate: values.workDate,
-        duration: values.duration,
-        unit: values.unit,
-        description: trimToNull(values.description),
-      });
+      if (editingEntry?.id) {
+        await mutateOperations(
+          request,
+          `/operations/timesheet-entries/${editingEntry.id}`,
+          'PATCH',
+          payload
+        );
+      } else {
+        await mutateOperations(
+          request,
+          '/operations/timesheet-entries',
+          'POST',
+          payload
+        );
+      }
 
-      showToastHandler?.('success', t('messages.saveSuccess'));
+      showToastHandler?.(
+        'success',
+        editingEntry ? t('messages.updateSuccess') : t('messages.saveSuccess')
+      );
 
-      if (keepContextOnSave) {
+      if (!editingEntry && keepContextOnSave) {
         form.reset(buildFollowUpFormValues(values, true));
         setProjectQuery({ search: '', page: 1 });
         setTaskQuery({ search: '', page: 1 });
@@ -519,7 +631,10 @@ export default function OperationsTimesheetsPage() {
     } catch (error) {
       showToastHandler?.(
         'error',
-        getOperationsErrorMessage(error, t('messages.saveError'))
+        getOperationsErrorMessage(
+          error,
+          editingEntry ? t('messages.updateError') : t('messages.saveError')
+        )
       );
     }
   };
@@ -604,222 +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>
+                {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)}
+                    >
+                      <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>
-
-              <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) => (
-                  <div
-                    key={entry.id}
-                    className="flex flex-col gap-3 px-6 py-4 sm:flex-row sm:items-center sm:justify-between"
-                  >
-                    <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="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 flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                        <span>{formatDateLabel(entry.workDate)}</span>
-                        {entry.description ? (
+                      <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) ? (
                           <>
-                            <span>•</span>
-                            <span className="truncate">
-                              {entry.description}
-                            </span>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="cursor-pointer"
+                              onClick={() => openDetails(timesheet)}
+                            >
+                              <Eye className="size-4" />
+                              {t('actions.viewDetails')}
+                            </Button>
+                            <Button
+                              size="icon"
+                              onClick={() => void submitTimesheet(timesheet.id)}
+                            >
+                              <Send className="size-4" />
+                            </Button>
                           </>
-                        ) : null}
-                      </div>
-                    </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
+                        ) : (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="cursor-pointer"
+                            onClick={() => openDetails(timesheet)}
+                          >
+                            <Eye className="size-4" />
+                            {t('actions.viewDetails')}
+                          </Button>
                         )}
-                      </span>
-
-                      {canManageEntry(entry) ? (
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="text-muted-foreground hover:text-destructive"
-                          onClick={() => setEntryToDelete(entry)}
-                          aria-label={t('messages.confirmDeleteTitle')}
-                        >
-                          <Trash2 className="size-4" />
-                        </Button>
-                      ) : null}
-                    </div>
-                  </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
                 ))}
-              </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>
+              </TableBody>
+            </Table>
+          </div>
+        )
       ) : (
         <EmptyState
           icon={<ClipboardList className="size-12" />}
@@ -834,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) => {
@@ -857,7 +1022,11 @@ export default function OperationsTimesheetsPage() {
               </div>
 
               <div className="space-y-1">
-                <SheetTitle>{t('sheet.createTitle')}</SheetTitle>
+                <SheetTitle>
+                  {isEditingEntry
+                    ? t('sheet.editTitle')
+                    : t('sheet.createTitle')}
+                </SheetTitle>
                 <SheetDescription>{t('sheet.description')}</SheetDescription>
               </div>
             </div>
@@ -926,7 +1095,7 @@ export default function OperationsTimesheetsPage() {
                           <AsyncOptionsCombobox
                             value={field.value}
                             selectedOption={selectedTask}
-                            options={taskOptions}
+                            options={filteredTaskOptions}
                             onSelect={(option) => field.onChange(option?.id)}
                             searchValue={taskQuery.search}
                             onSearchValueChange={(value) =>
@@ -1091,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) => {