@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -1,126 +1,636 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { StatusBadge } from '../_components/status-badge';
-import { TimesheetEntryDialog } from '../_components/timesheet-entry-dialog';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatDate, formatHours } from '../_lib/utils/format';
-import { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
-
-export default function TimesheetsPage() {
-  const t = useTranslations('operations.TimesheetsPage');
-  const { timesheets, users, projects, tasks, dailyTotals } =
-    useOperationsData();
-  const [search, setSearch] = useState('');
-
-  const filteredTimesheets = useMemo(
-    () =>
-      timesheets.filter((entry) => {
-        const user = users.find((item) => item.id === entry.userId);
-        const project = projects.find((item) => item.id === entry.projectId);
-        const task = tasks.find((item) => item.id === entry.taskId);
-
-        return `${user?.name} ${project?.name} ${task?.title} ${entry.description}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-      }),
-    [timesheets, users, projects, tasks, search]
-  );
-
-  const weeklyTotal = filteredTimesheets.reduce(
-    (sum, entry) => sum + entry.hours,
-    0
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <TimesheetEntryDialog users={users} projects={projects} tasks={tasks} />
-        }
-      />
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <SectionCard title={t('summary.totalHours')}>
-          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
-        </SectionCard>
-        <SectionCard title={t('summary.dailyTotals')}>
-          <div className="space-y-2 text-sm">
-            {Object.entries(dailyTotals).map(([date, total]) => (
-              <div key={date} className="flex items-center justify-between">
-                <span>{formatDate(date)}</span>
-                <span>{formatHours(total)}</span>
-              </div>
-            ))}
-          </div>
-        </SectionCard>
-        <SectionCard title={t('summary.weeklyTotal')}>
-          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
-        </SectionCard>
-      </div>
-
-      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('columns.date')}</TableHead>
-              <TableHead>{t('columns.user')}</TableHead>
-              <TableHead>{t('columns.project')}</TableHead>
-              <TableHead>{t('columns.task')}</TableHead>
-              <TableHead>{t('columns.hours')}</TableHead>
-              <TableHead>{t('columns.description')}</TableHead>
-              <TableHead>{t('columns.status')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredTimesheets.map((entry) => {
-              const user = users.find((item) => item.id === entry.userId);
-              const project = projects.find((item) => item.id === entry.projectId);
-              const task = tasks.find((item) => item.id === entry.taskId);
-
-              return (
-                <TableRow key={entry.id}>
-                  <TableCell>{formatDate(entry.date)}</TableCell>
-                  <TableCell>{user?.name}</TableCell>
-                  <TableCell>{project?.name}</TableCell>
-                  <TableCell>{task?.title}</TableCell>
-                  <TableCell>{formatHours(entry.hours)}</TableCell>
-                  <TableCell>{entry.description}</TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={getApprovalLabel(entry.status)}
-                      className={getApprovalBadgeClasses(entry.status)}
-                    />
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+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,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ClipboardList, Pencil, Plus, Send, Trash2 } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from '../_components/operations-header';
+import { StatusBadge } from '../_components/status-badge';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type {
+  OperationsCollaborator,
+  OperationsProject,
+  OperationsTimesheet,
+} from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import {
+  formatDateRange,
+  formatEnumLabel,
+  formatHours,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+
+type TimesheetEntryFormState = {
+  projectAssignmentId: string;
+  activityLabel: string;
+  workDate: string;
+  hours: string;
+  description: string;
+};
+
+type TimesheetFormState = {
+  weekStartDate: string;
+  weekEndDate: string;
+  notes: string;
+  entries: TimesheetEntryFormState[];
+};
+
+const createEmptyEntry = (): TimesheetEntryFormState => ({
+  projectAssignmentId: 'none',
+  activityLabel: '',
+  workDate: '',
+  hours: '',
+  description: '',
+});
+
+const emptyForm: TimesheetFormState = {
+  weekStartDate: '',
+  weekEndDate: '',
+  notes: '',
+  entries: [createEmptyEntry()],
+};
+
+function toFormState(timesheet?: OperationsTimesheet | null): TimesheetFormState {
+  if (!timesheet) {
+    return emptyForm;
+  }
+
+  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()],
+  };
+}
+
+export default function OperationsTimesheetsPage() {
+  const t = useTranslations('operations.TimesheetsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  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 { data: timesheets = [], refetch } = useQuery<OperationsTimesheet[]>({
+    queryKey: ['operations-timesheets', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsTimesheet[]>(request, '/operations/timesheets'),
+  });
+
+  const { data: me } = useQuery<OperationsCollaborator>({
+    queryKey: ['operations-timesheets-me', currentLocaleCode],
+    enabled: access.isCollaborator,
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator>(request, '/operations/collaborators/me'),
+  });
+
+  const { data: projects = [] } = useQuery<OperationsProject[]>({
+    queryKey: ['operations-timesheet-project-options', currentLocaleCode],
+    enabled: access.isCollaborator,
+    queryFn: () => fetchOperations<OperationsProject[]>(request, '/operations/projects'),
+  });
+
+  const projectOptions = useMemo(
+    () =>
+      projects
+        .filter((project) => project.myAssignmentId)
+        .map((project) => ({
+          value: String(project.myAssignmentId),
+          label: [project.name, project.myRoleLabel].filter(Boolean).join(' • '),
+        })),
+    [projects]
+  );
+
+  const filteredRows = useMemo(
+    () =>
+      timesheets.filter((item) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              item.collaboratorName,
+              item.approverName,
+              item.notes,
+              ...((item.entries ?? []).flatMap((entry) => [
+                entry.projectName,
+                entry.description,
+              ]) as Array<string | undefined>),
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value).toLowerCase().includes(search.trim().toLowerCase())
+              );
+        const matchesStatus =
+          statusFilter === 'all' ? true : item.status === statusFilter;
+        return matchesSearch && matchesStatus;
+      }),
+    [timesheets, search, statusFilter]
+  );
+
+  const cards = [
+    {
+      key: 'all',
+      title: t('cards.visible'),
+      value: timesheets.length,
+    },
+    {
+      key: 'pending',
+      title: t('cards.pending'),
+      value: timesheets.filter((item) => item.status === 'submitted').length,
+    },
+    {
+      key: 'hours',
+      title: t('cards.hours'),
+      value: formatHours(
+        timesheets.reduce(
+          (total, item) => total + Number(item.totalHours ?? 0),
+          0
+        )
+      ),
+    },
+  ];
+
+  const openCreate = () => {
+    setEditingTimesheet(null);
+    setForm(emptyForm);
+    setIsSheetOpen(true);
+  };
+
+  const openEdit = (timesheet: OperationsTimesheet) => {
+    setEditingTimesheet(timesheet);
+    setForm(toFormState(timesheet));
+    setIsSheetOpen(true);
+  };
+
+  const canManageRow = (timesheet: OperationsTimesheet) => {
+    return Boolean(
+      me?.id &&
+        timesheet.collaboratorId === me.id &&
+        ['draft', 'rejected'].includes(timesheet.status)
+    );
+  };
+
+  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 onSubmit = async () => {
+    if (!form.weekStartDate || !form.weekEndDate) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    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;
+    }
+
+    try {
+      if (editingTimesheet) {
+        await mutateOperations(
+          request,
+          `/operations/timesheets/${editingTimesheet.id}`,
+          'PATCH',
+          payload
+        );
+      } else {
+        await mutateOperations(request, '/operations/timesheets', 'POST', payload);
+      }
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setIsSheetOpen(false);
+      setEditingTimesheet(null);
+      setForm(emptyForm);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    }
+  };
+
+  const submitTimesheet = async (timesheetId: number) => {
+    try {
+      await request({
+        url: `/operations/timesheets/${timesheetId}/submit`,
+        method: 'POST',
+      });
+      showToastHandler?.('success', t('messages.submitSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.submitError'));
+    }
+  };
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isCollaborator ? (
+            <Button size="sm" onClick={openCreate}>
+              <Plus className="size-4" />
+              {commonT('actions.create')}
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => undefined}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: statusFilter,
+            onChange: setStatusFilter,
+            placeholder: commonT('labels.status'),
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'draft', label: formatEnumLabel('draft') },
+              { value: 'submitted', label: formatEnumLabel('submitted') },
+              { value: 'approved', label: formatEnumLabel('approved') },
+              { value: 'rejected', label: formatEnumLabel('rejected') },
+            ],
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={cards} columns={3} />
+
+      {filteredRows.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{commonT('labels.collaborator')}</TableHead>
+                <TableHead>{commonT('labels.week')}</TableHead>
+                <TableHead>{commonT('labels.entries')}</TableHead>
+                <TableHead>{commonT('labels.totalHours')}</TableHead>
+                <TableHead>{commonT('labels.approver')}</TableHead>
+                <TableHead>{commonT('labels.timeline')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead>{commonT('labels.actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRows.map((timesheet) => (
+                <TableRow key={timesheet.id}>
+                  <TableCell>
+                    <div className="font-medium">{timesheet.collaboratorName}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {timesheet.notes || commonT('labels.noNotes')}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {formatDateRange(
+                      timesheet.weekStartDate,
+                      timesheet.weekEndDate
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="font-medium">
+                      {timesheet.entries?.length ?? 0} {commonT('labels.lines')}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {(timesheet.entries ?? [])
+                        .slice(0, 2)
+                        .map((entry) =>
+                          [entry.projectName, entry.activityLabel]
+                            .filter(Boolean)
+                            .join(' • ') || commonT('labels.unassigned')
+                        )
+                        .join(', ') || commonT('labels.unassigned')}
+                    </div>
+                  </TableCell>
+                  <TableCell>{formatHours(timesheet.totalHours)}</TableCell>
+                  <TableCell>
+                    {timesheet.approverName || commonT('labels.notAssigned')}
+                  </TableCell>
+                  <TableCell>
+                    <div>{formatDateRange(timesheet.weekStartDate, timesheet.weekEndDate)}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {timesheet.decisionNote || commonT('labels.noNotes')}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(timesheet.status)}
+                      className={getStatusBadgeClass(timesheet.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      {canManageRow(timesheet) ? (
+                        <>
+                          <Button
+                            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>
+                        </>
+                      ) : (
+                        <span className="text-xs text-muted-foreground">
+                          {commonT('labels.viewOnly')}
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<ClipboardList className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={access.isCollaborator ? commonT('actions.create') : commonT('actions.refresh')}
+          onAction={access.isCollaborator ? openCreate : () => void refetch()}
+        />
+      )}
+
+      <Sheet
+        open={isSheetOpen}
+        onOpenChange={(open) => {
+          setIsSheetOpen(open);
+          if (!open) {
+            setEditingTimesheet(null);
+            setForm(emptyForm);
+          }
+        }}
+      >
+        <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">
+            <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,
+                    }))
+                  }
+                />
+              </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>
+            </div>
+
+            <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>
+
+            <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>
+                </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="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>
+
+                      <div className="space-y-2">
+                        <label className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                          {commonT('labels.description')}
+                        </label>
+                        <Textarea
+                          rows={2}
+                          value={entry.description}
+                          onChange={(event) =>
+                            updateEntry(index, { description: event.target.value })
+                          }
+                        />
+                      </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>
+
+                    <div className="flex items-start justify-end">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => removeEntry(index)}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <Button onClick={onSubmit}>{commonT('actions.save')}</Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}