@hed-hog/operations 0.0.304 → 0.0.306

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

@@ -54,13 +54,14 @@ import {
   ClipboardList,
   Clock3,
   Loader2,
+  Pencil,
   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';
 
@@ -195,6 +196,69 @@ function buildFollowUpFormValues(
   };
 }
 
+function buildProjectOptionFromEntry(
+  entry: OperationsTimesheetEntry
+): OperationsProjectOption | null {
+  if (!entry.projectId) {
+    return null;
+  }
+
+  return {
+    id: entry.projectId,
+    label:
+      [entry.projectCode, entry.projectName, entry.roleLabel]
+        .filter(Boolean)
+        .join(' • ') || String(entry.projectId),
+    name: entry.projectName || String(entry.projectId),
+    code: entry.projectCode,
+    projectAssignmentId: entry.projectAssignmentId,
+    roleLabel: entry.roleLabel,
+    status: 'active',
+  };
+}
+
+function buildTaskOptionFromEntry(
+  entry: OperationsTimesheetEntry
+): OperationsTaskOption | null {
+  if (!entry.taskId || !entry.projectId || !entry.projectAssignmentId) {
+    return null;
+  }
+
+  return {
+    id: entry.taskId,
+    label:
+      [entry.taskName || entry.activityLabel, entry.projectName]
+        .filter(Boolean)
+        .join(' • ') || String(entry.taskId),
+    name: entry.taskName || entry.activityLabel || String(entry.taskId),
+    status: 'todo',
+    projectId: entry.projectId,
+    projectAssignmentId: entry.projectAssignmentId,
+    projectName: entry.projectName || '',
+    projectCode: entry.projectCode,
+  };
+}
+
+function buildEditFormValues(
+  entry: OperationsTimesheetEntry
+): QuickEntryFormValues {
+  const durationMinutes =
+    typeof entry.durationMinutes === 'number' &&
+    Number.isFinite(entry.durationMinutes)
+      ? entry.durationMinutes
+      : Math.round(Number(entry.hours ?? 0) * 60);
+  const useHours = durationMinutes > 0 && durationMinutes % 60 === 0;
+
+  return {
+    projectId: entry.projectId ?? undefined,
+    taskId: entry.taskId ?? undefined,
+    workDate: entry.workDate ? entry.workDate.slice(0, 10) : '',
+    duration: useHours ? durationMinutes / 60 : durationMinutes,
+    unit: useHours ? 'hours' : 'minutes',
+    description: entry.description ?? '',
+  };
+}
+
 export default function OperationsTimesheetsPage() {
   const t = useTranslations('operations.TimesheetsPage');
   const commonT = useTranslations('operations.Common');
@@ -205,6 +269,8 @@ export default function OperationsTimesheetsPage() {
   const [isSheetOpen, setIsSheetOpen] = 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 [isDeletingEntry, setIsDeletingEntry] = useState(false);
@@ -215,6 +281,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(
     () =>
@@ -307,66 +374,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 +449,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,16 +468,77 @@ 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
+            )
+          )
+    );
+  }, [editingEntry, selectedProjectId, taskOptionsResponse, taskQuery.page]);
+
+  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'))
     );
-  }, [selectedProjectId, taskOptionsResponse, taskQuery.page]);
+  }, [showToastHandler, t, taskOptionsError]);
 
   const recentEntries = recentEntriesResponse?.data ?? [];
-  const selectedProject =
-    projectOptions.find((option) => option.id === selectedProjectId) ?? null;
+  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(
     () =>
@@ -459,20 +596,38 @@ 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);
   };
 
+  const openEditEntry = (entry: OperationsTimesheetEntry) => {
+    const projectOption = buildProjectOptionFromEntry(entry);
+    const taskOption = buildTaskOptionFromEntry(entry);
+
+    setEditingEntry(entry);
+    form.reset(buildEditFormValues(entry));
+    setProjectQuery({ search: '', page: 1 });
+    setTaskQuery({ search: '', page: 1 });
+    setProjectOptions(projectOption ? [projectOption] : []);
+    setTaskOptions(taskOption ? [taskOption] : []);
+    setIsTaskCreateSheetOpen(false);
+    setIsSheetOpen(true);
+  };
+
   const closeCreateSheet = () => {
     setIsSheetOpen(false);
+    setEditingEntry(null);
     setIsTaskCreateSheetOpen(false);
     form.reset(buildDefaultFormValues());
     setProjectQuery({ search: '', page: 1 });
     setTaskQuery({ search: '', page: 1 });
+    setProjectOptions([]);
     setTaskOptions([]);
   };
 
@@ -493,19 +648,38 @@ export default function OperationsTimesheetsPage() {
   };
 
   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 +693,10 @@ export default function OperationsTimesheetsPage() {
     } catch (error) {
       showToastHandler?.(
         'error',
-        getOperationsErrorMessage(error, t('messages.saveError'))
+        getOperationsErrorMessage(
+          error,
+          editingEntry ? t('messages.updateError') : t('messages.saveError')
+        )
       );
     }
   };
@@ -660,69 +837,98 @@ export default function OperationsTimesheetsPage() {
               </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>
+                {recentEntries.map((entry) => {
+                  const isEditableEntry = canManageEntry(entry);
+
+                  return (
+                    <div
+                      key={entry.id}
+                      className={`flex flex-col gap-3 px-6 py-4 sm:flex-row sm:items-center sm:justify-between ${
+                        isEditableEntry
+                          ? 'cursor-pointer hover:bg-muted/30'
+                          : ''
+                      }`}
+                      onClick={
+                        isEditableEntry ? () => openEditEntry(entry) : undefined
+                      }
+                    >
+                      <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 flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                        <span>{formatDateLabel(entry.workDate)}</span>
-                        {entry.description ? (
+                      <div className="flex items-center gap-2 self-start sm:self-center">
+                        {entry.status ? (
+                          <StatusBadge
+                            label={formatEnumLabel(entry.status)}
+                            className={getStatusBadgeClass(entry.status)}
+                          />
+                        ) : null}
+
+                        <span className="inline-flex items-center rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground">
+                          {formatEntryDuration(
+                            entry.durationMinutes,
+                            entry.hours
+                          )}
+                        </span>
+
+                        {isEditableEntry ? (
                           <>
-                            <span>•</span>
-                            <span className="truncate">
-                              {entry.description}
-                            </span>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="text-muted-foreground"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                openEditEntry(entry);
+                              }}
+                              aria-label={t('sheet.editTitle')}
+                            >
+                              <Pencil className="size-4" />
+                            </Button>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="text-muted-foreground hover:text-destructive"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                setEntryToDelete(entry);
+                              }}
+                              aria-label={t('messages.confirmDeleteTitle')}
+                            >
+                              <Trash2 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
-                        )}
-                      </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">
@@ -857,7 +1063,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 +1136,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) =>