@hed-hog/operations 0.0.330 → 0.0.331

package/hedhog/frontend/app/_components/task-info-display.tsx.ejs

@@ -0,0 +1,137 @@
+'use client';
+
+import { AlarmClock, Calendar, History, Tag, User } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { formatDate } from '../_lib/utils/format';
+import { formatDurationMinutes, getInitials } from '../_lib/utils/task-ui';
+import type { TaskDetailSheetData } from './task-detail-sheet';
+
+type Props = {
+  task: TaskDetailSheetData;
+  avatarSrc: string | null;
+  doingMinutes: number;
+  getSettingValue: (key: string) => unknown;
+  currentLocaleCode: string;
+  footer?: ReactNode;
+};
+
+export function TaskInfoDisplay({
+  task,
+  avatarSrc,
+  doingMinutes,
+  getSettingValue,
+  currentLocaleCode,
+  footer,
+}: Props) {
+  const commonT = useTranslations('operations.Common');
+  const detailT = useTranslations('operations.ProjectDetailsPage');
+
+  return (
+    <div className="flex flex-col gap-5">
+      {task.description ? (
+        <div>
+          <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {detailT('taskForm.descriptionLabel')}
+          </p>
+          <p className="text-sm leading-relaxed">{task.description}</p>
+        </div>
+      ) : null}
+
+      {task.dueDate || task.estimateHours != null ? (
+        <div className="grid grid-cols-2 gap-3">
+          {task.dueDate ? (
+            <div className="flex items-start gap-2 text-sm">
+              <Calendar className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-[11px] text-muted-foreground">
+                  {detailT('taskForm.deadlineLabel')}
+                </p>
+                <p className="font-medium">
+                  {formatDate(task.dueDate, getSettingValue, currentLocaleCode)}
+                </p>
+              </div>
+            </div>
+          ) : null}
+          {task.estimateHours != null ? (
+            <div className="flex items-start gap-2 text-sm">
+              <AlarmClock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-[11px] text-muted-foreground">
+                  {detailT('taskForm.estimateLabel')}
+                </p>
+                <p className="font-medium">{task.estimateHours}h</p>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="flex items-start gap-2 text-sm">
+        <History className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+        <div>
+          <p className="text-[11px] text-muted-foreground">
+            {detailT('taskForm.doingTimeLabel')}
+          </p>
+          <p className="font-medium">{formatDurationMinutes(doingMinutes)}</p>
+        </div>
+      </div>
+
+      {task.tags ? (
+        <div>
+          <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <Tag className="size-3" />
+            {detailT('taskForm.tagsLabel')}
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {task.tags.split(',').map((tag) => (
+              <span
+                key={tag.trim()}
+                className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+              >
+                {tag.trim()}
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {task.assigneeName ? (
+        <div>
+          <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <User className="size-3" />
+            {commonT('labels.collaborator')}
+          </div>
+          <div className="flex items-center gap-2.5">
+            <div className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-semibold uppercase text-muted-foreground ring-1 ring-border">
+              {avatarSrc ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={avatarSrc}
+                  alt={task.assigneeName}
+                  className="size-full object-cover"
+                />
+              ) : (
+                getInitials(task.assigneeName)
+              )}
+            </div>
+            <span className="text-sm">{task.assigneeName}</span>
+          </div>
+        </div>
+      ) : null}
+
+      {task.projectName || task.projectCode ? (
+        <div className="rounded-lg border bg-muted/20 px-3 py-2.5">
+          <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+            {commonT('labels.project')}
+          </p>
+          <p className="mt-0.5 text-sm font-medium">
+            {[task.projectName, task.projectCode].filter(Boolean).join(' • ')}
+          </p>
+        </div>
+      ) : null}
+
+      {footer ? <div className="border-t pt-5">{footer}</div> : null}
+    </div>
+  );
+}

package/hedhog/frontend/app/_components/timesheet-entry-create-sheet.tsx.ejs

@@ -0,0 +1,306 @@
+'use client';
+
+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 {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Timer } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { getOperationsErrorMessage, mutateOperations } from '../_lib/api';
+import { trimToNull } from '../_lib/utils/forms';
+
+type TimesheetEntryCreateSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: {
+    id: number;
+    label: string;
+    projectAssignmentId?: number | null;
+  } | null;
+  task: {
+    id: number;
+    label: string;
+  } | null;
+  onCreated?: () => void;
+};
+
+type EntryFormValues = {
+  workDate: string;
+  duration?: number;
+  unit: 'hours' | 'minutes';
+  description: string;
+};
+
+const getTodayDate = () => {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+};
+
+const buildDefaultValues = (): EntryFormValues => ({
+  workDate: getTodayDate(),
+  duration: undefined,
+  unit: 'hours',
+  description: '',
+});
+
+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)
+  );
+
+export function TimesheetEntryCreateSheet({
+  open,
+  onOpenChange,
+  project,
+  task,
+  onCreated,
+}: TimesheetEntryCreateSheetProps) {
+  const t = useTranslations('operations.TimesheetsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler } = useApp();
+
+  const entrySchema = useMemo(
+    () =>
+      z.object({
+        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<EntryFormValues>({
+    resolver: zodResolver(entrySchema),
+    defaultValues: buildDefaultValues(),
+  });
+
+  const unitValue = form.watch('unit');
+
+  useEffect(() => {
+    if (!open) {
+      form.reset(buildDefaultValues());
+    }
+  }, [form, open]);
+
+  const handleSubmit = async (values: EntryFormValues) => {
+    if (!project?.id || !task?.id) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    try {
+      await mutateOperations(request, '/operations/timesheet-entries', 'POST', {
+        projectId: project.id,
+        taskId: task.id,
+        workDate: values.workDate,
+        duration: values.duration,
+        unit: values.unit,
+        description: trimToNull(values.description),
+      });
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      form.reset(buildDefaultValues());
+      onOpenChange(false);
+      onCreated?.();
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.saveError'))
+      );
+    }
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (form.formState.isSubmitting && !nextOpen) {
+      return;
+    }
+
+    onOpenChange(nextOpen);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-xl">
+        <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-cyan-500/10 text-cyan-600">
+              <Timer className="size-5" />
+            </div>
+
+            <div className="space-y-1">
+              <SheetTitle>{t('sheet.title')}</SheetTitle>
+              <SheetDescription>{t('sheet.description')}</SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="flex min-h-0 flex-1 flex-col"
+          >
+            <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4">
+              <div className="rounded-lg border bg-muted/30 p-3">
+                <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {commonT('labels.project')}
+                </div>
+                <div className="mt-1 text-sm font-medium text-foreground">
+                  {project?.label ?? commonT('labels.notAssigned')}
+                </div>
+              </div>
+
+              <div className="rounded-lg border bg-muted/30 p-3">
+                <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {commonT('labels.task')}
+                </div>
+                <div className="mt-1 text-sm font-medium text-foreground">
+                  {task?.label ?? commonT('labels.notAssigned')}
+                </div>
+              </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>
+                  )}
+                />
+
+                <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>
+                  )}
+                />
+
+                <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
+                        {...field}
+                        rows={4}
+                        placeholder={t('sheet.placeholders.description')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormActions
+              sheet
+              onCancel={() => onOpenChange(false)}
+              cancelLabel={commonT('actions.cancel')}
+              submitType="submit"
+              submitLabel={commonT('actions.submit')}
+              submitDisabled={
+                form.formState.isSubmitting || !project?.id || !task?.id
+              }
+            />
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}