@hed-hog/operations 0.0.318 → 0.0.321

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

@@ -49,21 +49,28 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  CalendarDays,
   ClipboardList,
   Clock3,
   Eye,
   LayoutGrid,
   List,
   Loader2,
+  Pencil,
   Plus,
   Send,
+  Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 import { AsyncOptionsCombobox } from '../_components/async-options-combobox';
+import {
+  OperationsCalendarView,
+  type OperationsCalendarItem,
+} from '../_components/operations-calendar-view';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { TimesheetTaskCreateSheet } from '../_components/timesheet-task-create-sheet';
@@ -82,7 +89,7 @@ import type {
   PaginatedResponse,
 } from '../_lib/types';
 import {
-  formatDateRange,
+  formatDate,
   formatEnumLabel,
   formatHours,
   getStatusBadgeClass,
@@ -203,6 +210,22 @@ function buildFollowUpFormValues(
   };
 }
 
+function buildEntryFormValues(
+  entry: OperationsTimesheetEntry
+): QuickEntryFormValues {
+  return {
+    projectId: entry.projectId ?? undefined,
+    taskId: entry.taskId ?? undefined,
+    workDate: String(entry.workDate).match(/(\d{4}-\d{2}-\d{2})/)?.[1] ?? '',
+    duration:
+      typeof entry.durationMinutes === 'number' && entry.durationMinutes > 0
+        ? Number((entry.durationMinutes / 60).toFixed(2))
+        : Number(entry.hours ?? 0),
+    unit: 'hours',
+    description: entry.description ?? '',
+  };
+}
+
 export default function OperationsTimesheetsPage() {
   const t = useTranslations('operations.TimesheetsPage');
   const commonT = useTranslations('operations.Common');
@@ -210,15 +233,25 @@ export default function OperationsTimesheetsPage() {
   const access = useOperationsAccess();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [calendarYear, setCalendarYear] = useState(() =>
+    new Date().getFullYear()
+  );
+  const [calendarMonth, setCalendarMonth] = useState(
+    () => new Date().getMonth() + 1
+  );
   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 [viewMode, setViewMode] = useState<'table' | 'cards' | 'calendar'>(
+    () => {
+      if (typeof window === 'undefined') return 'table';
+      const saved = window.localStorage.getItem(
+        'operations-timesheets-view-mode'
+      );
+      return saved === 'cards' || saved === 'calendar' ? saved : 'table';
+    }
+  );
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const [isTaskCreateSheetOpen, setIsTaskCreateSheetOpen] = useState(false);
@@ -285,6 +318,8 @@ export default function OperationsTimesheetsPage() {
       currentLocaleCode,
       search,
       statusFilter,
+      dateFrom,
+      dateTo,
       page,
       pageSize,
     ],
@@ -295,6 +330,8 @@ export default function OperationsTimesheetsPage() {
       });
       if (search.trim()) params.set('search', search.trim());
       if (statusFilter !== 'all') params.set('status', statusFilter);
+      if (dateFrom) params.set('dateFrom', dateFrom);
+      if (dateTo) params.set('dateTo', dateTo);
       return fetchOperations<PaginatedResponse<OperationsTimesheet>>(
         request,
         `/operations/timesheets?${params.toString()}`
@@ -305,9 +342,61 @@ export default function OperationsTimesheetsPage() {
 
   const timesheets = timesheetsResponse?.data ?? [];
 
+  const calendarDateFrom = `${String(calendarYear)}-${String(calendarMonth).padStart(2, '0')}-01`;
+  const calendarDateTo = (() => {
+    const lastDay = new Date(calendarYear, calendarMonth, 0).getDate();
+    return `${String(calendarYear)}-${String(calendarMonth).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+  })();
+
+  const { data: calendarTimesheetsResponse } = useQuery<
+    PaginatedResponse<OperationsTimesheet>
+  >({
+    queryKey: [
+      'operations-timesheets-calendar',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      calendarYear,
+      calendarMonth,
+    ],
+    enabled: viewMode === 'calendar',
+    queryFn: () => {
+      const params = new URLSearchParams({
+        sortField: 'weekStartDate',
+        sortOrder: 'desc',
+        dateFrom: calendarDateFrom,
+        dateTo: calendarDateTo,
+      });
+      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 calendarTimesheets = useMemo(
+    () => calendarTimesheetsResponse?.data ?? [],
+    [calendarTimesheetsResponse]
+  );
+
+  const getTimesheetStatusLabel = useCallback(
+    (status?: string | null) => {
+      if (!status) {
+        return commonT('labels.notAvailable');
+      }
+
+      return t.has(`statuses.${status}`)
+        ? t(`statuses.${status}`)
+        : formatEnumLabel(status);
+    },
+    [commonT, t]
+  );
+
   const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') return;
-    setViewMode(value as 'table' | 'cards');
+    if (value !== 'table' && value !== 'cards' && value !== 'calendar') return;
+    setViewMode(value as 'table' | 'cards' | 'calendar');
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('operations-timesheets-view-mode', value);
     }
@@ -523,6 +612,31 @@ export default function OperationsTimesheetsPage() {
   const isEditingEntry = Boolean(editingEntry);
 
   const filteredRows = timesheets;
+  const calendarItems = useMemo<OperationsCalendarItem[]>(
+    () =>
+      calendarTimesheets.map((timesheet) => ({
+        id: `timesheet-${timesheet.id}`,
+        date:
+          String(timesheet.weekStartDate).match(/(\d{4}-\d{2}-\d{2})/)?.[1] ??
+          timesheet.weekStartDate,
+        kind: 'timesheet',
+        title: `${formatHours(timesheet.totalHours)} • ${timesheet.collaboratorName}`,
+        subtitle:
+          (timesheet.entries ?? [])
+            .slice(0, 2)
+            .map(
+              (entry) =>
+                [entry.projectName, entry.taskName || entry.activityLabel]
+                  .filter(Boolean)
+                  .join(' • ') || commonT('labels.unassigned')
+            )
+            .join(', ') || commonT('labels.unassigned'),
+        meta: `${timesheet.entries?.length ?? 0} ${commonT('labels.lines')}`,
+        statusLabel: getTimesheetStatusLabel(timesheet.status),
+        badgeClassName: getStatusBadgeClass(timesheet.status),
+      })),
+    [calendarTimesheets, commonT, getTimesheetStatusLabel]
+  );
 
   const cards = [
     {
@@ -577,7 +691,93 @@ export default function OperationsTimesheetsPage() {
     setIsDetailsOpen(true);
   };
 
+  const openEditEntry = (entry: OperationsTimesheetEntry) => {
+    setEditingEntry(entry);
+    form.reset(buildEntryFormValues(entry));
+    setProjectQuery({ search: '', page: 1 });
+    setTaskQuery({ search: '', page: 1 });
+    setProjectOptions((current) =>
+      appendUniqueById(
+        current,
+        entry.projectId && entry.projectName
+          ? [
+              {
+                id: entry.projectId,
+                label:
+                  [entry.projectCode, entry.projectName]
+                    .filter(Boolean)
+                    .join(' • ') || entry.projectName,
+                name: entry.projectName,
+                code: entry.projectCode,
+                status: entry.status ?? 'submitted',
+              },
+            ]
+          : []
+      )
+    );
+    setTaskOptions((current) =>
+      appendUniqueById(
+        current,
+        entry.taskId && entry.projectId
+          ? [
+              {
+                id: entry.taskId,
+                label:
+                  entry.taskName ||
+                  entry.activityLabel ||
+                  commonT('labels.unassigned'),
+                name:
+                  entry.taskName ||
+                  entry.activityLabel ||
+                  commonT('labels.unassigned'),
+                status: entry.status ?? 'submitted',
+                projectId: entry.projectId,
+                projectAssignmentId: entry.projectAssignmentId ?? 0,
+                projectName:
+                  entry.projectName || commonT('labels.unassigned'),
+              },
+            ]
+          : []
+      )
+    );
+    setEntryToDelete(null);
+    setIsDetailsOpen(false);
+    setIsTaskCreateSheetOpen(false);
+    setIsSheetOpen(true);
+  };
+
+  const openTimesheetForDate = (date: string) => {
+    const existingTimesheet =
+      calendarTimesheets.find((item) => item.weekStartDate === date) ??
+      timesheets.find((item) => item.weekStartDate === date);
+
+    if (existingTimesheet) {
+      openDetails(existingTimesheet);
+      return;
+    }
+
+    setEditingEntry(null);
+    form.reset({
+      ...buildDefaultFormValues(),
+      workDate: date,
+    });
+    setProjectQuery({ search: '', page: 1 });
+    setTaskQuery({ search: '', page: 1 });
+    setProjectOptions([]);
+    setTaskOptions([]);
+    setIsTaskCreateSheetOpen(false);
+    setIsSheetOpen(true);
+  };
+
   const canManageRow = (timesheet: OperationsTimesheet) => {
+    return Boolean(
+      me?.id &&
+      timesheet.collaboratorId === me.id &&
+      timesheet.status !== 'approved'
+    );
+  };
+
+  const canSubmitTimesheet = (timesheet: OperationsTimesheet) => {
     return Boolean(
       me?.id &&
       timesheet.collaboratorId === me.id &&
@@ -742,12 +942,41 @@ export default function OperationsTimesheetsPage() {
                 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') },
+                  { value: 'draft', label: getTimesheetStatusLabel('draft') },
+                  {
+                    value: 'submitted',
+                    label: getTimesheetStatusLabel('submitted'),
+                  },
+                  {
+                    value: 'approved',
+                    label: getTimesheetStatusLabel('approved'),
+                  },
+                  {
+                    value: 'rejected',
+                    label: getTimesheetStatusLabel('rejected'),
+                  },
                 ],
               },
+              {
+                id: 'dateFrom',
+                type: 'date',
+                value: dateFrom,
+                onChange: (value) => {
+                  setDateFrom(value);
+                  setPage(1);
+                },
+                label: commonT('filters.dateFrom'),
+              },
+              {
+                id: 'dateTo',
+                type: 'date',
+                value: dateTo,
+                onChange: (value) => {
+                  setDateTo(value);
+                  setPage(1);
+                },
+                label: commonT('filters.dateTo'),
+              },
             ]}
           />
         </div>
@@ -771,14 +1000,37 @@ export default function OperationsTimesheetsPage() {
               <LayoutGrid className="h-4 w-4" />
               <span className="hidden sm:inline">{t('viewModeCards')}</span>
             </ToggleGroupItem>
+            <ToggleGroupItem value="calendar" className="gap-1.5 px-2.5">
+              <CalendarDays className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCalendar')}</span>
+            </ToggleGroupItem>
           </ToggleGroup>
         </div>
       </div>
 
       <KpiCardsGrid items={cards} columns={3} />
 
-      {timesheets.length > 0 ? (
-        viewMode === 'cards' ? (
+      {(viewMode === 'calendar' ? true : timesheets.length > 0) ? (
+        viewMode === 'calendar' ? (
+          <OperationsCalendarView
+            locale={currentLocaleCode}
+            items={calendarItems}
+            emptyLabel={t('emptyDescription')}
+            actionLabel={t('actions.viewDetails')}
+            onMonthChange={(year, month) => {
+              setCalendarYear(year);
+              setCalendarMonth(month);
+            }}
+            onOpenItem={(item) => {
+              openTimesheetForDate(item.date);
+            }}
+            onDateSelect={(date, items) => {
+              if (items.some((item) => item.kind === 'timesheet')) {
+                openTimesheetForDate(date);
+              }
+            }}
+          />
+        ) : viewMode === 'cards' ? (
           <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
             {timesheets.map((timesheet) => (
               <div
@@ -791,18 +1043,11 @@ export default function OperationsTimesheetsPage() {
                       {timesheet.collaboratorName}
                     </div>
                     <div className="truncate text-xs text-muted-foreground">
-                      {formatDateRange(
-                        timesheet.weekStartDate,
-                        timesheet.weekEndDate
-                      )}
+                      {formatDate(timesheet.weekStartDate)}
                     </div>
                   </div>
                   <StatusBadge
-                    label={
-                      t.has(`statuses.${timesheet.status}`)
-                        ? t(`statuses.${timesheet.status}`)
-                        : formatEnumLabel(timesheet.status)
-                    }
+                    label={getTimesheetStatusLabel(timesheet.status)}
                     className={getStatusBadgeClass(timesheet.status)}
                   />
                 </div>
@@ -839,13 +1084,15 @@ export default function OperationsTimesheetsPage() {
                       <Eye className="size-4" />
                       {t('actions.viewDetails')}
                     </Button>
-                    <Button
-                      size="sm"
-                      onClick={() => void submitTimesheet(timesheet.id)}
-                    >
-                      <Send className="size-4" />
-                      {commonT('actions.submit')}
-                    </Button>
+                    {canSubmitTimesheet(timesheet) ? (
+                      <Button
+                        size="sm"
+                        onClick={() => void submitTimesheet(timesheet.id)}
+                      >
+                        <Send className="size-4" />
+                        {commonT('actions.submit')}
+                      </Button>
+                    ) : null}
                   </div>
                 ) : (
                   <div className="flex justify-end border-t border-border/60 pt-3">
@@ -869,7 +1116,7 @@ export default function OperationsTimesheetsPage() {
               <TableHeader>
                 <TableRow>
                   <TableHead>{commonT('labels.collaborator')}</TableHead>
-                  <TableHead>{commonT('labels.week')}</TableHead>
+                  <TableHead>{commonT('labels.workDate')}</TableHead>
                   <TableHead>{commonT('labels.entries')}</TableHead>
                   <TableHead>{commonT('labels.totalHours')}</TableHead>
                   <TableHead>{commonT('labels.approver')}</TableHead>
@@ -889,12 +1136,7 @@ export default function OperationsTimesheetsPage() {
                         {timesheet.notes || commonT('labels.noNotes')}
                       </div>
                     </TableCell>
-                    <TableCell>
-                      {formatDateRange(
-                        timesheet.weekStartDate,
-                        timesheet.weekEndDate
-                      )}
-                    </TableCell>
+                    <TableCell>{formatDate(timesheet.weekStartDate)}</TableCell>
                     <TableCell>
                       <div className="font-medium">
                         {timesheet.entries?.length ?? 0}{' '}
@@ -926,11 +1168,7 @@ export default function OperationsTimesheetsPage() {
                     </TableCell>
                     <TableCell>
                       <StatusBadge
-                        label={
-                          t.has(`statuses.${timesheet.status}`)
-                            ? t(`statuses.${timesheet.status}`)
-                            : formatEnumLabel(timesheet.status)
-                        }
+                        label={getTimesheetStatusLabel(timesheet.status)}
                         className={getStatusBadgeClass(timesheet.status)}
                       />
                     </TableCell>
@@ -947,12 +1185,14 @@ export default function OperationsTimesheetsPage() {
                               <Eye className="size-4" />
                               {t('actions.viewDetails')}
                             </Button>
-                            <Button
-                              size="icon"
-                              onClick={() => void submitTimesheet(timesheet.id)}
-                            >
-                              <Send className="size-4" />
-                            </Button>
+                            {canSubmitTimesheet(timesheet) ? (
+                              <Button
+                                size="icon"
+                                onClick={() => void submitTimesheet(timesheet.id)}
+                              >
+                                <Send className="size-4" />
+                              </Button>
+                            ) : null}
                           </>
                         ) : (
                           <Button
@@ -1245,7 +1485,11 @@ export default function OperationsTimesheetsPage() {
                 onCancel={closeCreateSheet}
                 cancelLabel={commonT('actions.cancel')}
                 submitType="submit"
-                submitLabel={commonT('actions.save')}
+                submitLabel={
+                  isEditingEntry
+                    ? commonT('actions.save')
+                    : commonT('actions.submit')
+                }
                 submitDisabled={form.formState.isSubmitting}
               />
             </form>
@@ -1276,10 +1520,7 @@ export default function OperationsTimesheetsPage() {
                       {selectedTimesheet.collaboratorName}
                     </div>
                     <div className="mt-1 text-sm text-muted-foreground">
-                      {formatDateRange(
-                        selectedTimesheet.weekStartDate,
-                        selectedTimesheet.weekEndDate
-                      )}
+                      {formatDate(selectedTimesheet.weekStartDate)}
                     </div>
                   </div>
                   <StatusBadge
@@ -1324,8 +1565,7 @@ export default function OperationsTimesheetsPage() {
                     {t('details.period')}
                   </div>
                   <div className="mt-1 text-sm">
-                    {formatDateLabel(selectedTimesheet.weekStartDate)} -{' '}
-                    {formatDateLabel(selectedTimesheet.weekEndDate)}
+                    {formatDateLabel(selectedTimesheet.weekStartDate)}
                   </div>
                 </div>
               </div>
@@ -1382,6 +1622,30 @@ export default function OperationsTimesheetsPage() {
                         <div className="mt-2 text-sm">
                           {entry.description || commonT('labels.noNotes')}
                         </div>
+                        {canManageRow(selectedTimesheet) ? (
+                          <div className="mt-3 flex justify-end gap-2 border-t border-border/60 pt-3">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              className="cursor-pointer"
+                              onClick={() => openEditEntry(entry)}
+                            >
+                              <Pencil className="size-4" />
+                              {commonT('actions.edit')}
+                            </Button>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              className="cursor-pointer text-destructive hover:bg-destructive/10"
+                              onClick={() => setEntryToDelete(entry)}
+                            >
+                              <Trash2 className="size-4" />
+                              {commonT('actions.delete')}
+                            </Button>
+                          </div>
+                        ) : null}
                       </div>
                     ))
                   ) : (