@hed-hog/operations 0.0.295 → 0.0.296

package/hedhog/frontend/app/_components/collaborator-form-screen.tsx.ejs

@@ -0,0 +1,631 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ArrowLeft, Save, UserRound } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type {
+  OperationsCollaborator,
+  OperationsCollaboratorDetails,
+  OperationsWeeklyScheduleDay,
+} from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { formatEnumLabel } from '../_lib/utils/format';
+
+const weekdays = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+] as const;
+
+type CollaboratorFormState = {
+  userId: string;
+  code: string;
+  displayName: string;
+  collaboratorType: string;
+  department: string;
+  title: string;
+  levelLabel: string;
+  weeklyCapacityHours: string;
+  status: string;
+  joinedAt: string;
+  leftAt: string;
+  supervisorCollaboratorId: string;
+  compensationAmount: string;
+  contractDescription: string;
+  autoGenerateContractDraft: boolean;
+  notes: string;
+  weeklySchedule: Array<{
+    weekday: string;
+    isWorkingDay: boolean;
+    startTime: string;
+    endTime: string;
+    breakMinutes: string;
+  }>;
+};
+
+function defaultSchedule(): CollaboratorFormState['weeklySchedule'] {
+  return weekdays.map((weekday) => ({
+    weekday,
+    isWorkingDay: !['saturday', 'sunday'].includes(weekday),
+    startTime: '09:00',
+    endTime: '18:00',
+    breakMinutes: '60',
+  }));
+}
+
+function buildEmptyForm(): CollaboratorFormState {
+  return {
+    userId: '',
+    code: '',
+    displayName: '',
+    collaboratorType: 'clt',
+    department: '',
+    title: '',
+    levelLabel: '',
+    weeklyCapacityHours: '40',
+    status: 'active',
+    joinedAt: '',
+    leftAt: '',
+    supervisorCollaboratorId: 'none',
+    compensationAmount: '',
+    contractDescription: '',
+    autoGenerateContractDraft: true,
+    notes: '',
+    weeklySchedule: defaultSchedule(),
+  };
+}
+
+function normalizeSchedule(
+  weeklySchedule?: OperationsWeeklyScheduleDay[]
+): CollaboratorFormState['weeklySchedule'] {
+  const byWeekday = new Map(
+    (weeklySchedule ?? []).map((item) => [item.weekday, item])
+  );
+
+  return weekdays.map((weekday) => {
+    const item = byWeekday.get(weekday);
+
+    return {
+      weekday,
+      isWorkingDay: item?.isWorkingDay ?? !['saturday', 'sunday'].includes(weekday),
+      startTime: item?.startTime ?? '09:00',
+      endTime: item?.endTime ?? '18:00',
+      breakMinutes:
+        item?.breakMinutes !== null && item?.breakMinutes !== undefined
+          ? String(item.breakMinutes)
+          : '60',
+    };
+  });
+}
+
+function toFormState(
+  collaborator: OperationsCollaboratorDetails
+): CollaboratorFormState {
+  return {
+    userId: collaborator.userId ? String(collaborator.userId) : '',
+    code: collaborator.code ?? '',
+    displayName: collaborator.displayName ?? '',
+    collaboratorType: collaborator.collaboratorType ?? 'other',
+    department: collaborator.department ?? '',
+    title: collaborator.title ?? '',
+    levelLabel: collaborator.levelLabel ?? '',
+    weeklyCapacityHours:
+      collaborator.weeklyCapacityHours !== null &&
+      collaborator.weeklyCapacityHours !== undefined
+        ? String(collaborator.weeklyCapacityHours)
+        : '',
+    status: collaborator.status ?? 'active',
+    joinedAt: collaborator.joinedAt ?? '',
+    leftAt: collaborator.leftAt ?? '',
+    supervisorCollaboratorId: collaborator.supervisorId
+      ? String(collaborator.supervisorId)
+      : 'none',
+    compensationAmount:
+      collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
+      collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
+        ? String(collaborator.relatedContracts[0].budgetAmount)
+        : '',
+    contractDescription: collaborator.relatedContracts?.[0]?.description ?? '',
+    autoGenerateContractDraft: true,
+    notes: collaborator.notes ?? '',
+    weeklySchedule: normalizeSchedule(collaborator.weeklySchedule),
+  };
+}
+
+type CollaboratorFormScreenProps = {
+  collaboratorId?: number;
+};
+
+export function CollaboratorFormScreen({
+  collaboratorId,
+}: CollaboratorFormScreenProps) {
+  const t = useTranslations('operations.CollaboratorFormPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
+
+  const { data: collaborator, isLoading: isLoadingCollaborator } =
+    useQuery<OperationsCollaboratorDetails>({
+      queryKey: ['operations-collaborator-form', currentLocaleCode, collaboratorId],
+      enabled: Boolean(collaboratorId),
+      queryFn: () =>
+        fetchOperations<OperationsCollaboratorDetails>(
+          request,
+          `/operations/collaborators/${collaboratorId}`
+        ),
+    });
+
+  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-collaborator-form-supervisors', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+  });
+
+  useEffect(() => {
+    if (collaborator) {
+      setForm(toFormState(collaborator));
+    }
+  }, [collaborator]);
+
+  const updateScheduleDay = (
+    weekday: string,
+    patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
+  ) => {
+    setForm((current) => ({
+      ...current,
+      weeklySchedule: current.weeklySchedule.map((day) =>
+        day.weekday === weekday ? { ...day, ...patch } : day
+      ),
+    }));
+  };
+
+  const onSubmit = async () => {
+    const userId = parseNumberInput(form.userId);
+    if (!collaboratorId && !userId) {
+      showToastHandler?.('error', t('messages.userRequired'));
+      return;
+    }
+
+    if (!form.code.trim() || !form.displayName.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    const payload = {
+      userId: userId ?? undefined,
+      code: form.code.trim(),
+      displayName: form.displayName.trim(),
+      collaboratorType: form.collaboratorType,
+      department: trimToNull(form.department),
+      title: trimToNull(form.title),
+      levelLabel: trimToNull(form.levelLabel),
+      weeklyCapacityHours: parseNumberInput(form.weeklyCapacityHours),
+      status: form.status,
+      joinedAt: trimToNull(form.joinedAt),
+      leftAt: trimToNull(form.leftAt),
+      supervisorCollaboratorId:
+        form.supervisorCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(form.supervisorCollaboratorId),
+      compensationAmount: parseNumberInput(form.compensationAmount),
+      contractDescription: trimToNull(form.contractDescription),
+      autoGenerateContractDraft: form.autoGenerateContractDraft,
+      notes: trimToNull(form.notes),
+      weeklySchedule: form.weeklySchedule.map((day) => ({
+        weekday: day.weekday,
+        isWorkingDay: day.isWorkingDay,
+        startTime: day.isWorkingDay ? trimToNull(day.startTime) : null,
+        endTime: day.isWorkingDay ? trimToNull(day.endTime) : null,
+        breakMinutes: day.isWorkingDay ? parseNumberInput(day.breakMinutes) : 0,
+      })),
+    };
+
+    try {
+      const response = collaboratorId
+        ? await mutateOperations<OperationsCollaboratorDetails>(
+            request,
+            `/operations/collaborators/${collaboratorId}`,
+            'PATCH',
+            payload
+          )
+        : await mutateOperations<OperationsCollaboratorDetails>(
+            request,
+            '/operations/collaborators',
+            'POST',
+            payload
+          );
+
+      showToastHandler?.(
+        'success',
+        collaboratorId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+      router.push(`/operations/collaborators/${response.id}`);
+    } catch {
+      showToastHandler?.(
+        'error',
+        collaboratorId ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  if (!access.isDirector && !access.isLoading) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t(collaboratorId ? 'editTitle' : 'newTitle')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<UserRound className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => router.refresh()}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(collaboratorId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                href={
+                  collaboratorId
+                    ? `/operations/collaborators/${collaboratorId}`
+                    : '/operations/collaborators'
+                }
+              >
+                <ArrowLeft className="size-4" />
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button size="sm" onClick={() => void onSubmit()}>
+              <Save className="size-4" />
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title={t('sections.basicInfo')} description={t('sections.basicInfoDescription')}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.userId')}</label>
+              <Input
+                value={form.userId}
+                disabled={Boolean(collaboratorId)}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, userId: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.code')}</label>
+              <Input
+                value={form.code}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, code: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.displayName')}</label>
+              <Input
+                value={form.displayName}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    displayName: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.department')}</label>
+              <Input
+                value={form.department}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    department: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.title')}</label>
+              <Input
+                value={form.title}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, title: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.levelLabel')}</label>
+              <Input
+                value={form.levelLabel}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    levelLabel: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2 md:col-span-2">
+              <label className="text-sm font-medium">{t('fields.notes')}</label>
+              <Textarea
+                rows={4}
+                value={form.notes}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, notes: event.target.value }))
+                }
+              />
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.employmentInfo')}
+          description={t('sections.employmentInfoDescription')}
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.collaboratorType')}</label>
+              <Select
+                value={form.collaboratorType}
+                onValueChange={(value) =>
+                  setForm((current) => ({ ...current, collaboratorType: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="clt">CLT</SelectItem>
+                  <SelectItem value="pj">PJ</SelectItem>
+                  <SelectItem value="freelancer">Freelancer</SelectItem>
+                  <SelectItem value="intern">Intern</SelectItem>
+                  <SelectItem value="other">Other</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.status')}</label>
+              <Select
+                value={form.status}
+                onValueChange={(value) =>
+                  setForm((current) => ({ ...current, status: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="on_leave">On Leave</SelectItem>
+                  <SelectItem value="inactive">Inactive</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.startDate')}</label>
+              <Input
+                type="date"
+                value={form.joinedAt}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, joinedAt: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.endDate')}</label>
+              <Input
+                type="date"
+                value={form.leftAt}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, leftAt: event.target.value }))
+                }
+              />
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.supervisor')}
+          description={t('sections.supervisorDescription')}
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.supervisor')}</label>
+              <Select
+                value={form.supervisorCollaboratorId}
+                onValueChange={(value) =>
+                  setForm((current) => ({
+                    ...current,
+                    supervisorCollaboratorId: value,
+                  }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">{commonT('labels.notAssigned')}</SelectItem>
+                  {collaborators
+                    .filter((item) => item.id !== collaboratorId)
+                    .map((item) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.displayName}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.contract')}
+          description={t('sections.contractDescription')}
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.weeklyCapacityHours')}</label>
+              <Input
+                type="number"
+                step="0.5"
+                value={form.weeklyCapacityHours}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    weeklyCapacityHours: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.compensationAmount')}</label>
+              <Input
+                type="number"
+                step="0.01"
+                value={form.compensationAmount}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    compensationAmount: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2 md:col-span-2">
+              <label className="text-sm font-medium">{t('fields.contractDescription')}</label>
+              <Textarea
+                rows={4}
+                value={form.contractDescription}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    contractDescription: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-2">
+              <div>
+                <div className="font-medium">{t('fields.autoGenerateContractDraft')}</div>
+                <div className="text-sm text-muted-foreground">
+                  {t('fields.autoGenerateContractDraftDescription')}
+                </div>
+              </div>
+              <Switch
+                checked={form.autoGenerateContractDraft}
+                onCheckedChange={(checked) =>
+                  setForm((current) => ({
+                    ...current,
+                    autoGenerateContractDraft: checked,
+                  }))
+                }
+              />
+            </div>
+          </div>
+        </SectionCard>
+      </div>
+
+      <SectionCard
+        title={t('sections.schedule')}
+        description={t('sections.scheduleDescription')}
+      >
+        <div className="space-y-3">
+          {form.weeklySchedule.map((day) => (
+            <div
+              key={day.weekday}
+              className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[1fr_auto_1fr_1fr_1fr]"
+            >
+              <div>
+                <div className="font-medium">{formatEnumLabel(day.weekday)}</div>
+                <div className="text-xs text-muted-foreground">
+                  {day.isWorkingDay ? commonT('labels.workingDay') : commonT('labels.dayOff')}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={day.isWorkingDay}
+                  onCheckedChange={(checked) =>
+                    updateScheduleDay(day.weekday, { isWorkingDay: checked })
+                  }
+                />
+              </div>
+              <Input
+                type="time"
+                value={day.startTime}
+                disabled={!day.isWorkingDay}
+                onChange={(event) =>
+                  updateScheduleDay(day.weekday, { startTime: event.target.value })
+                }
+              />
+              <Input
+                type="time"
+                value={day.endTime}
+                disabled={!day.isWorkingDay}
+                onChange={(event) =>
+                  updateScheduleDay(day.weekday, { endTime: event.target.value })
+                }
+              />
+              <Input
+                type="number"
+                value={day.breakMinutes}
+                disabled={!day.isWorkingDay}
+                onChange={(event) =>
+                  updateScheduleDay(day.weekday, {
+                    breakMinutes: event.target.value,
+                  })
+                }
+              />
+            </div>
+          ))}
+        </div>
+      </SectionCard>
+
+      {collaboratorId && isLoadingCollaborator ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+    </Page>
+  );
+}