@hed-hog/operations 0.0.303 → 0.0.304

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

@@ -1,16 +1,35 @@
 'use client';
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  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,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import {
   Sheet,
   SheetContent,
@@ -18,6 +37,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
 import {
   Table,
   TableBody,
@@ -27,82 +47,151 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { ClipboardList, Pencil, Plus, Send, Trash2 } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ClipboardList,
+  Clock3,
+  Loader2,
+  Plus,
+  Send,
+  Sparkles,
+  Trash2,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AsyncOptionsCombobox } from '../_components/async-options-combobox';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
-import { fetchOperations, mutateOperations } from '../_lib/api';
+import { TimesheetTaskCreateSheet } from '../_components/timesheet-task-create-sheet';
+import {
+  fetchOperations,
+  getOperationsErrorMessage,
+  mutateOperations,
+} from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaborator,
-  OperationsProject,
+  OperationsProjectOption,
+  OperationsTaskOption,
   OperationsTimesheet,
+  OperationsTimesheetEntry,
+  PaginatedResponse,
 } from '../_lib/types';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
 import {
   formatDateRange,
   formatEnumLabel,
   formatHours,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
+import { trimToNull } from '../_lib/utils/forms';
 
-type TimesheetEntryFormState = {
-  projectAssignmentId: string;
-  activityLabel: string;
+type QuickEntryFormValues = {
+  projectId?: number;
+  taskId?: number;
   workDate: string;
-  hours: string;
+  duration?: number;
+  unit: 'hours' | 'minutes';
   description: string;
 };
 
-type TimesheetFormState = {
-  weekStartDate: string;
-  weekEndDate: string;
-  notes: string;
-  entries: TimesheetEntryFormState[];
-};
+const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
-const createEmptyEntry = (): TimesheetEntryFormState => ({
-  projectAssignmentId: 'none',
-  activityLabel: '',
-  workDate: '',
-  hours: '',
+const buildDefaultFormValues = (): QuickEntryFormValues => ({
+  projectId: undefined,
+  taskId: undefined,
+  workDate: getTodayDate(),
+  duration: undefined,
+  unit: 'hours',
   description: '',
 });
 
-const emptyForm: TimesheetFormState = {
-  weekStartDate: '',
-  weekEndDate: '',
-  notes: '',
-  entries: [createEmptyEntry()],
-};
+const positiveNumberField = (message: string) =>
+  z.preprocess(
+    (value) => {
+      if (value === '' || value === null || value === undefined) {
+        return undefined;
+      }
+
+      if (typeof value === 'number') {
+        return value;
+      }
+
+      const parsed = Number(value);
+      return Number.isNaN(parsed) ? value : parsed;
+    },
+    z.number({ required_error: message }).positive(message)
+  );
+
+function appendUniqueById<T extends { id: number | string }>(
+  current: T[],
+  next: T[]
+) {
+  const unique = new Map<string, T>();
+
+  [...current, ...next].forEach((item) => {
+    unique.set(String(item.id), item);
+  });
+
+  return Array.from(unique.values());
+}
+
+function formatDateLabel(value?: string | null) {
+  if (!value) {
+    return '—';
+  }
+
+  const date = new Date(`${value}T00:00:00`);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  }).format(date);
+}
+
+function formatEntryDuration(minutes?: number | null, hours?: number | null) {
+  if (typeof minutes === 'number' && Number.isFinite(minutes) && minutes > 0) {
+    const wholeHours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+
+    if (!wholeHours) {
+      return `${remainingMinutes}m`;
+    }
 
-function toFormState(
-  timesheet?: OperationsTimesheet | null
-): TimesheetFormState {
-  if (!timesheet) {
-    return emptyForm;
+    if (!remainingMinutes) {
+      return `${wholeHours}h`;
+    }
+
+    return `${wholeHours}h ${remainingMinutes}m`;
+  }
+
+  return formatHours(Number(hours ?? 0));
+}
+
+function buildFollowUpFormValues(
+  current: QuickEntryFormValues,
+  keepContextOnSave: boolean
+): QuickEntryFormValues {
+  if (!keepContextOnSave) {
+    return buildDefaultFormValues();
   }
 
   return {
-    weekStartDate: timesheet.weekStartDate ?? '',
-    weekEndDate: timesheet.weekEndDate ?? '',
-    notes: timesheet.notes ?? '',
-    entries: timesheet.entries?.length
-      ? timesheet.entries.map((entry) => ({
-          projectAssignmentId: entry.projectAssignmentId
-            ? String(entry.projectAssignmentId)
-            : 'none',
-          activityLabel: entry.activityLabel ?? '',
-          workDate: entry.workDate ?? '',
-          hours:
-            entry.hours !== null && entry.hours !== undefined
-              ? String(entry.hours)
-              : '',
-          description: entry.description ?? '',
-        }))
-      : [createEmptyEntry()],
+    projectId: current.projectId,
+    taskId: current.taskId,
+    workDate: current.workDate || getTodayDate(),
+    duration: 0,
+    unit: current.unit ?? 'hours',
+    description: '',
   };
 }
 
@@ -114,14 +203,62 @@ export default function OperationsTimesheetsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [editingTimesheet, setEditingTimesheet] =
-    useState<OperationsTimesheet | null>(null);
-  const [form, setForm] = useState<TimesheetFormState>(emptyForm);
+  const [isTaskCreateSheetOpen, setIsTaskCreateSheetOpen] = useState(false);
+  const [keepContextOnSave, setKeepContextOnSave] = useState(true);
+  const [entryToDelete, setEntryToDelete] =
+    useState<OperationsTimesheetEntry | null>(null);
+  const [isDeletingEntry, setIsDeletingEntry] = useState(false);
+  const [projectQuery, setProjectQuery] = useState({ search: '', page: 1 });
+  const [projectOptions, setProjectOptions] = useState<
+    OperationsProjectOption[]
+  >([]);
+  const [taskQuery, setTaskQuery] = useState({ search: '', page: 1 });
+  const [taskRefreshKey, setTaskRefreshKey] = useState(0);
+  const [taskOptions, setTaskOptions] = useState<OperationsTaskOption[]>([]);
+
+  const quickEntrySchema = useMemo(
+    () =>
+      z.object({
+        projectId: positiveNumberField(t('messages.selectProjectRequired')),
+        taskId: positiveNumberField(t('messages.selectTaskRequired')),
+        workDate: z.string().min(1, t('messages.requiredFields')),
+        duration: positiveNumberField(t('messages.entryValidation')),
+        unit: z.enum(['hours', 'minutes']),
+        description: z
+          .string()
+          .trim()
+          .max(500, t('sheet.validation.descriptionMaxLength'))
+          .optional()
+          .or(z.literal('')),
+      }),
+    [t]
+  );
+
+  const form = useForm<QuickEntryFormValues>({
+    resolver: zodResolver(quickEntrySchema),
+    defaultValues: buildDefaultFormValues(),
+  });
+
+  const selectedProjectId = useWatch({
+    control: form.control,
+    name: 'projectId',
+  });
+
+  const selectedTaskId = useWatch({
+    control: form.control,
+    name: 'taskId',
+  });
+
+  const unitValue = useWatch({
+    control: form.control,
+    name: 'unit',
+  });
 
   const { data: timesheets = [], refetch } = useQuery<OperationsTimesheet[]>({
     queryKey: ['operations-timesheets', currentLocaleCode],
     queryFn: () =>
       fetchOperations<OperationsTimesheet[]>(request, '/operations/timesheets'),
+    placeholderData: (previous) => previous ?? [],
   });
 
   const { data: me } = useQuery<OperationsCollaborator>({
@@ -134,25 +271,137 @@ export default function OperationsTimesheetsPage() {
       ),
   });
 
-  const { data: projects = [] } = useQuery<OperationsProject[]>({
-    queryKey: ['operations-timesheet-project-options', currentLocaleCode],
+  const {
+    data: recentEntriesResponse,
+    isLoading: isRecentEntriesLoading,
+    refetch: refetchRecentEntries,
+  } = useQuery<PaginatedResponse<OperationsTimesheetEntry>>({
+    queryKey: [
+      'operations-timesheet-recent-entries',
+      currentLocaleCode,
+      search,
+      statusFilter,
+    ],
     enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsProject[]>(request, '/operations/projects'),
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: '1',
+        pageSize: '8',
+        sortField: 'workDate',
+        sortOrder: 'desc',
+      });
+
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+
+      return fetchOperations<PaginatedResponse<OperationsTimesheetEntry>>(
+        request,
+        `/operations/timesheet-entries?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
   });
 
-  const projectOptions = useMemo(
-    () =>
-      projects
-        .filter((project) => project.myAssignmentId)
-        .map((project) => ({
-          value: String(project.myAssignmentId),
-          label: [project.name, project.myRoleLabel]
-            .filter(Boolean)
-            .join(' • '),
-        })),
-    [projects]
-  );
+  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());
+        }
+
+        return fetchOperations<PaginatedResponse<OperationsProjectOption>>(
+          request,
+          `/operations/projects/options?${params.toString()}`
+        );
+      },
+      placeholderData: (previous) => previous,
+    });
+
+  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());
+        }
+
+        if (selectedProjectId) {
+          params.set('projectId', String(selectedProjectId));
+        }
+
+        return fetchOperations<PaginatedResponse<OperationsTaskOption>>(
+          request,
+          `/operations/tasks?${params.toString()}`
+        );
+      },
+      placeholderData: (previous) => previous,
+    });
+
+  useEffect(() => {
+    if (!projectOptionsResponse) {
+      return;
+    }
+
+    setProjectOptions((current) =>
+      projectQuery.page === 1
+        ? (projectOptionsResponse.data ?? [])
+        : appendUniqueById(current, projectOptionsResponse.data ?? [])
+    );
+  }, [projectOptionsResponse, projectQuery.page]);
+
+  useEffect(() => {
+    if (!selectedProjectId) {
+      setTaskOptions([]);
+      return;
+    }
+
+    if (!taskOptionsResponse) {
+      return;
+    }
+
+    setTaskOptions((current) =>
+      taskQuery.page === 1
+        ? (taskOptionsResponse.data ?? [])
+        : appendUniqueById(current, taskOptionsResponse.data ?? [])
+    );
+  }, [selectedProjectId, taskOptionsResponse, taskQuery.page]);
+
+  const recentEntries = recentEntriesResponse?.data ?? [];
+  const selectedProject =
+    projectOptions.find((option) => option.id === selectedProjectId) ?? null;
+  const selectedTask =
+    taskOptions.find((option) => option.id === selectedTaskId) ?? null;
 
   const filteredRows = useMemo(
     () =>
@@ -165,6 +414,8 @@ export default function OperationsTimesheetsPage() {
               item.notes,
               ...((item.entries ?? []).flatMap((entry) => [
                 entry.projectName,
+                entry.taskName,
+                entry.activityLabel,
                 entry.description,
               ]) as Array<string | undefined>),
             ]
@@ -185,16 +436,19 @@ export default function OperationsTimesheetsPage() {
     {
       key: 'all',
       title: t('cards.visible'),
+      description: t('cards.visibleDescription'),
       value: timesheets.length,
     },
     {
       key: 'pending',
       title: t('cards.pending'),
+      description: t('cards.pendingDescription'),
       value: timesheets.filter((item) => item.status === 'submitted').length,
     },
     {
       key: 'hours',
       title: t('cards.hours'),
+      description: t('cards.hoursDescription'),
       value: formatHours(
         timesheets.reduce(
           (total, item) => total + Number(item.totalHours ?? 0),
@@ -205,15 +459,21 @@ export default function OperationsTimesheetsPage() {
   ];
 
   const openCreate = () => {
-    setEditingTimesheet(null);
-    setForm(emptyForm);
+    form.reset(buildDefaultFormValues());
+    setProjectQuery({ search: '', page: 1 });
+    setTaskQuery({ search: '', page: 1 });
+    setTaskOptions([]);
+    setIsTaskCreateSheetOpen(false);
     setIsSheetOpen(true);
   };
 
-  const openEdit = (timesheet: OperationsTimesheet) => {
-    setEditingTimesheet(timesheet);
-    setForm(toFormState(timesheet));
-    setIsSheetOpen(true);
+  const closeCreateSheet = () => {
+    setIsSheetOpen(false);
+    setIsTaskCreateSheetOpen(false);
+    form.reset(buildDefaultFormValues());
+    setProjectQuery({ search: '', page: 1 });
+    setTaskQuery({ search: '', page: 1 });
+    setTaskOptions([]);
   };
 
   const canManageRow = (timesheet: OperationsTimesheet) => {
@@ -224,88 +484,43 @@ export default function OperationsTimesheetsPage() {
     );
   };
 
-  const updateEntry = (
-    index: number,
-    patch: Partial<TimesheetEntryFormState>
-  ) => {
-    setForm((current) => ({
-      ...current,
-      entries: current.entries.map((entry, entryIndex) =>
-        entryIndex === index ? { ...entry, ...patch } : entry
-      ),
-    }));
-  };
-
-  const addEntry = () => {
-    setForm((current) => ({
-      ...current,
-      entries: [...current.entries, createEmptyEntry()],
-    }));
-  };
-
-  const removeEntry = (index: number) => {
-    setForm((current) => ({
-      ...current,
-      entries:
-        current.entries.length === 1
-          ? [createEmptyEntry()]
-          : current.entries.filter((_, entryIndex) => entryIndex !== index),
-    }));
+  const canManageEntry = (entry: OperationsTimesheetEntry) => {
+    return Boolean(
+      me?.id &&
+      entry.collaboratorId === me.id &&
+      ['draft', 'rejected'].includes(entry.status ?? '')
+    );
   };
 
-  const onSubmit = async () => {
-    if (!form.weekStartDate || !form.weekEndDate) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
+  const handleQuickEntrySubmit = async (values: QuickEntryFormValues) => {
+    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),
+      });
 
-    const payload = {
-      weekStartDate: form.weekStartDate,
-      weekEndDate: form.weekEndDate,
-      notes: trimToNull(form.notes),
-      entries: form.entries
-        .filter((entry) => entry.workDate || entry.hours || entry.description)
-        .map((entry) => ({
-          projectAssignmentId:
-            entry.projectAssignmentId === 'none'
-              ? null
-              : parseNumberInput(entry.projectAssignmentId),
-          activityLabel: trimToNull(entry.activityLabel),
-          workDate: entry.workDate,
-          hours: parseNumberInput(entry.hours) ?? 0,
-          description: trimToNull(entry.description),
-        })),
-    };
-
-    if (payload.entries.some((entry) => !entry.workDate || !entry.hours)) {
-      showToastHandler?.('error', t('messages.entryValidation'));
-      return;
-    }
+      showToastHandler?.('success', t('messages.saveSuccess'));
 
-    try {
-      if (editingTimesheet) {
-        await mutateOperations(
-          request,
-          `/operations/timesheets/${editingTimesheet.id}`,
-          'PATCH',
-          payload
-        );
+      if (keepContextOnSave) {
+        form.reset(buildFollowUpFormValues(values, true));
+        setProjectQuery({ search: '', page: 1 });
+        setTaskQuery({ search: '', page: 1 });
+        setIsTaskCreateSheetOpen(false);
+        setTimeout(() => form.setFocus('duration'), 0);
       } else {
-        await mutateOperations(
-          request,
-          '/operations/timesheets',
-          'POST',
-          payload
-        );
+        closeCreateSheet();
       }
 
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      setIsSheetOpen(false);
-      setEditingTimesheet(null);
-      setForm(emptyForm);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
+      await Promise.all([refetch(), refetchRecentEntries()]);
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.saveError'))
+      );
     }
   };
 
@@ -316,9 +531,60 @@ export default function OperationsTimesheetsPage() {
         method: 'POST',
       });
       showToastHandler?.('success', t('messages.submitSuccess'));
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.submitError'));
+      await Promise.all([refetch(), refetchRecentEntries()]);
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.submitError'))
+      );
+    }
+  };
+
+  const openTaskCreateSheet = () => {
+    if (!selectedProjectId || !selectedProject) {
+      showToastHandler?.('error', t('messages.selectProjectFirst'));
+      return;
+    }
+
+    setIsTaskCreateSheetOpen(true);
+  };
+
+  const handleTaskCreated = (task: OperationsTaskOption) => {
+    setTaskOptions((current) => [
+      task,
+      ...current.filter((item) => item.id !== task.id),
+    ]);
+    form.setValue('taskId', task.id, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    setTaskQuery({ search: '', page: 1 });
+    setTaskRefreshKey((current) => current + 1);
+  };
+
+  const handleDeleteEntry = async () => {
+    if (!entryToDelete?.id) {
+      return;
+    }
+
+    try {
+      setIsDeletingEntry(true);
+      await mutateOperations(
+        request,
+        `/operations/timesheet-entries/${entryToDelete.id}`,
+        'DELETE'
+      );
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setEntryToDelete(null);
+      await Promise.all([refetch(), refetchRecentEntries()]);
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.deleteError'))
+      );
+    } finally {
+      setIsDeletingEntry(false);
     }
   };
 
@@ -363,6 +629,110 @@ export default function OperationsTimesheetsPage() {
 
       <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" />
+                </div>
+
+                <div className="space-y-1">
+                  <CardTitle>{t('recentEntries.title')}</CardTitle>
+                  <CardDescription>
+                    {t('recentEntries.description')}
+                  </CardDescription>
+                </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="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>
+                    </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>
+
+                      {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>
+            ) : (
+              <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>
@@ -373,14 +743,14 @@ export default function OperationsTimesheetsPage() {
                 <TableHead>{commonT('labels.entries')}</TableHead>
                 <TableHead>{commonT('labels.totalHours')}</TableHead>
                 <TableHead>{commonT('labels.approver')}</TableHead>
-                <TableHead>{commonT('labels.timeline')}</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}>
+                <TableRow key={timesheet.id} className="hover:bg-muted/30">
                   <TableCell>
                     <div className="font-medium">
                       {timesheet.collaboratorName}
@@ -404,7 +774,10 @@ export default function OperationsTimesheetsPage() {
                         .slice(0, 2)
                         .map(
                           (entry) =>
-                            [entry.projectName, entry.activityLabel]
+                            [
+                              entry.projectName,
+                              entry.taskName || entry.activityLabel,
+                            ]
                               .filter(Boolean)
                               .join(' • ') || commonT('labels.unassigned')
                         )
@@ -416,13 +789,7 @@ export default function OperationsTimesheetsPage() {
                     {timesheet.approverName || commonT('labels.notAssigned')}
                   </TableCell>
                   <TableCell>
-                    <div>
-                      {formatDateRange(
-                        timesheet.weekStartDate,
-                        timesheet.weekEndDate
-                      )}
-                    </div>
-                    <div className="text-xs text-muted-foreground">
+                    <div className="text-sm text-muted-foreground">
                       {timesheet.decisionNote || commonT('labels.noNotes')}
                     </div>
                   </TableCell>
@@ -435,21 +802,12 @@ export default function OperationsTimesheetsPage() {
                   <TableCell>
                     <div className="flex justify-end gap-2">
                       {canManageRow(timesheet) ? (
-                        <>
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            onClick={() => openEdit(timesheet)}
-                          >
-                            <Pencil className="size-4" />
-                          </Button>
-                          <Button
-                            size="icon"
-                            onClick={() => void submitTimesheet(timesheet.id)}
-                          >
-                            <Send className="size-4" />
-                          </Button>
-                        </>
+                        <Button
+                          size="icon"
+                          onClick={() => void submitTimesheet(timesheet.id)}
+                        >
+                          <Send className="size-4" />
+                        </Button>
                       ) : (
                         <span className="text-xs text-muted-foreground">
                           {commonT('labels.viewOnly')}
@@ -479,201 +837,300 @@ export default function OperationsTimesheetsPage() {
       <Sheet
         open={isSheetOpen}
         onOpenChange={(open) => {
-          setIsSheetOpen(open);
+          if (form.formState.isSubmitting && !open) {
+            return;
+          }
+
           if (!open) {
-            setEditingTimesheet(null);
-            setForm(emptyForm);
+            closeCreateSheet();
+            return;
           }
+
+          setIsSheetOpen(true);
         }}
       >
-        <SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
-          <SheetHeader>
-            <SheetTitle>
-              {editingTimesheet ? t('sheet.editTitle') : t('sheet.createTitle')}
-            </SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <div className="mt-6 grid gap-4 px-4">
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.weekStart')}
-                </label>
-                <Input
-                  type="date"
-                  value={form.weekStartDate}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      weekStartDate: event.target.value,
-                    }))
-                  }
-                />
+        <SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl">
+          <SheetHeader className="border-b px-4 py-4 text-left">
+            <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">
+                <Clock3 className="size-5" />
               </div>
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.weekEnd')}
-                </label>
-                <Input
-                  type="date"
-                  value={form.weekEndDate}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      weekEndDate: event.target.value,
-                    }))
-                  }
-                />
+
+              <div className="space-y-1">
+                <SheetTitle>{t('sheet.createTitle')}</SheetTitle>
+                <SheetDescription>{t('sheet.description')}</SheetDescription>
               </div>
             </div>
+          </SheetHeader>
 
-            <div className="space-y-2">
-              <label className="text-sm font-medium">
-                {commonT('labels.notes')}
-              </label>
-              <Textarea
-                rows={3}
-                value={form.notes}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    notes: event.target.value,
-                  }))
-                }
-              />
-            </div>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleQuickEntrySubmit)}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <div className="flex-1 space-y-5 overflow-y-auto px-4 py-4">
+                <div className="grid gap-4 lg:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="projectId"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('sheet.fields.project')}</FormLabel>
+                        <FormControl>
+                          <AsyncOptionsCombobox
+                            value={field.value}
+                            selectedOption={selectedProject}
+                            options={projectOptions}
+                            onSelect={(option) => {
+                              field.onChange(option?.id);
+                              form.setValue('taskId', undefined, {
+                                shouldDirty: true,
+                                shouldTouch: true,
+                              });
+                              setTaskQuery({ search: '', page: 1 });
+                              setTaskOptions([]);
+                            }}
+                            searchValue={projectQuery.search}
+                            onSearchValueChange={(value) =>
+                              setProjectQuery({ search: value, page: 1 })
+                            }
+                            placeholder={t('sheet.placeholders.project')}
+                            searchPlaceholder={t(
+                              'sheet.placeholders.projectSearch'
+                            )}
+                            emptyLabel={t('entries.projectHint')}
+                            loadMoreLabel={commonT('actions.loadMore')}
+                            clearLabel={commonT('actions.clearSelection')}
+                            isLoading={isProjectOptionsLoading}
+                            hasMore={Boolean(projectOptionsResponse?.next)}
+                            onLoadMore={() =>
+                              setProjectQuery((current) => ({
+                                ...current,
+                                page: current.page + 1,
+                              }))
+                            }
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="text-sm font-medium">
-                    {t('entries.title')}
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    {projectOptions.length > 0
-                      ? t('entries.description')
-                      : t('entries.projectHint')}
-                  </div>
+                  <FormField
+                    control={form.control}
+                    name="taskId"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('sheet.fields.task')}</FormLabel>
+                        <FormControl>
+                          <AsyncOptionsCombobox
+                            value={field.value}
+                            selectedOption={selectedTask}
+                            options={taskOptions}
+                            onSelect={(option) => field.onChange(option?.id)}
+                            searchValue={taskQuery.search}
+                            onSearchValueChange={(value) =>
+                              setTaskQuery({ search: value, page: 1 })
+                            }
+                            placeholder={t('sheet.placeholders.task')}
+                            searchPlaceholder={t(
+                              'sheet.placeholders.taskSearch'
+                            )}
+                            emptyLabel={
+                              selectedProjectId
+                                ? t('sheet.helper.task')
+                                : t('sheet.helper.selectProjectFirst')
+                            }
+                            loadMoreLabel={commonT('actions.loadMore')}
+                            clearLabel={commonT('actions.clearSelection')}
+                            createLabel={t('sheet.task.createAction')}
+                            onCreateClick={openTaskCreateSheet}
+                            isLoading={isTaskOptionsLoading}
+                            hasMore={Boolean(taskOptionsResponse?.next)}
+                            onLoadMore={() =>
+                              setTaskQuery((current) => ({
+                                ...current,
+                                page: current.page + 1,
+                              }))
+                            }
+                            disabled={!selectedProjectId}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                 </div>
-                <Button variant="outline" size="sm" onClick={addEntry}>
-                  <Plus className="size-4" />
-                  {commonT('actions.addLine')}
-                </Button>
-              </div>
 
-              <div className="space-y-3">
-                {form.entries.map((entry, index) => (
-                  <div
-                    key={index}
-                    className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[1.4fr_1fr_1fr_0.8fr_auto]"
-                  >
-                    <div className="space-y-3">
-                      <div className="space-y-2">
-                        <label className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                          {commonT('labels.projectAssignment')}
-                        </label>
-                        <Select
-                          value={entry.projectAssignmentId}
-                          onValueChange={(value) =>
-                            updateEntry(index, { projectAssignmentId: value })
-                          }
-                        >
-                          <SelectTrigger>
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="none">
-                              {commonT('labels.unassigned')}
-                            </SelectItem>
-                            {projectOptions.map((option) => (
-                              <SelectItem
-                                key={option.value}
-                                value={option.value}
-                              >
-                                {option.label}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </div>
+                <div className="grid gap-4 md:grid-cols-[1fr_1fr_220px]">
+                  <FormField
+                    control={form.control}
+                    name="workDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{commonT('labels.workDate')}</FormLabel>
+                        <FormControl>
+                          <Input type="date" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-                      <div className="space-y-2">
-                        <label className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                          {commonT('labels.activity')}
-                        </label>
-                        <Input
-                          value={entry.activityLabel}
-                          onChange={(event) =>
-                            updateEntry(index, {
-                              activityLabel: event.target.value,
-                            })
-                          }
-                          placeholder={t('entries.activityPlaceholder')}
-                        />
-                      </div>
+                  <FormField
+                    control={form.control}
+                    name="duration"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('sheet.fields.duration')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            min="0"
+                            step={unitValue === 'minutes' ? '5' : '0.25'}
+                            placeholder={t('sheet.placeholders.duration')}
+                            value={field.value ?? ''}
+                            onChange={(event) => {
+                              const nextValue = event.target.value;
+                              field.onChange(
+                                nextValue === '' ? undefined : Number(nextValue)
+                              );
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-                      <div className="space-y-2">
-                        <label className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                          {commonT('labels.description')}
-                        </label>
+                  <FormField
+                    control={form.control}
+                    name="unit"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('sheet.fields.unit')}</FormLabel>
+                        <FormControl>
+                          <ToggleGroup
+                            type="single"
+                            value={field.value}
+                            className="w-full"
+                            onValueChange={(value) => {
+                              if (value === 'hours' || value === 'minutes') {
+                                field.onChange(value);
+                              }
+                            }}
+                          >
+                            <ToggleGroupItem value="hours" className="flex-1">
+                              {t('sheet.fields.hours')}
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="minutes" className="flex-1">
+                              {t('sheet.fields.minutes')}
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{commonT('labels.description')}</FormLabel>
+                      <FormControl>
                         <Textarea
-                          rows={2}
-                          value={entry.description}
-                          onChange={(event) =>
-                            updateEntry(index, {
-                              description: event.target.value,
-                            })
-                          }
+                          {...field}
+                          rows={4}
+                          placeholder={t('sheet.placeholders.description')}
                         />
-                      </div>
-                    </div>
-
-                    <div className="space-y-2">
-                      <label className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                        {commonT('labels.workDate')}
-                      </label>
-                      <Input
-                        type="date"
-                        value={entry.workDate}
-                        onChange={(event) =>
-                          updateEntry(index, { workDate: event.target.value })
-                        }
-                      />
-                    </div>
-
-                    <div className="space-y-2">
-                      <label className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                        {commonT('labels.hours')}
-                      </label>
-                      <Input
-                        type="number"
-                        step="0.5"
-                        value={entry.hours}
-                        onChange={(event) =>
-                          updateEntry(index, { hours: event.target.value })
-                        }
-                      />
-                    </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
 
-                    <div className="flex items-start justify-end">
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        onClick={() => removeEntry(index)}
-                      >
-                        <Trash2 className="size-4" />
-                      </Button>
-                    </div>
+                <div className="flex items-center justify-between rounded-lg border bg-background p-3">
+                  <div className="space-y-1 pr-3">
+                    <p className="text-sm font-medium text-foreground">
+                      {t('sheet.helper.keepContext')}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('sheet.helper.keepContextDescription')}
+                    </p>
                   </div>
-                ))}
+
+                  <Switch
+                    checked={keepContextOnSave}
+                    onCheckedChange={setKeepContextOnSave}
+                    aria-label={t('sheet.helper.keepContext')}
+                  />
+                </div>
               </div>
-            </div>
 
-            <Button onClick={onSubmit}>{commonT('actions.save')}</Button>
-          </div>
+              <FormActions
+                sheet
+                onCancel={closeCreateSheet}
+                cancelLabel={commonT('actions.cancel')}
+                submitType="submit"
+                submitLabel={commonT('actions.save')}
+                submitDisabled={form.formState.isSubmitting}
+              />
+            </form>
+          </Form>
         </SheetContent>
       </Sheet>
+
+      <TimesheetTaskCreateSheet
+        open={isTaskCreateSheetOpen}
+        onOpenChange={setIsTaskCreateSheetOpen}
+        project={selectedProject}
+        onCreated={handleTaskCreated}
+      />
+
+      <AlertDialog
+        open={Boolean(entryToDelete)}
+        onOpenChange={(open) => {
+          if (!open && !isDeletingEntry) {
+            setEntryToDelete(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t('messages.confirmDeleteTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('messages.confirmDeleteDescription', {
+                name:
+                  entryToDelete?.taskName ||
+                  entryToDelete?.activityLabel ||
+                  entryToDelete?.projectName ||
+                  `#${entryToDelete?.id ?? ''}`,
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingEntry}>
+              {commonT('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => void handleDeleteEntry()}
+              disabled={isDeletingEntry}
+            >
+              {isDeletingEntry ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : null}
+              {commonT('actions.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Page>
   );
 }