@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -41,6 +41,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import {
   Tooltip,
@@ -61,6 +62,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
+import { PersonPicker } from '../../contact/_components/person-picker';
 import {
   fetchOperations,
   getOperationsErrorMessage,
@@ -79,7 +81,6 @@ import type {
 } from '../_lib/types';
 import {
   formatDate,
-  formatDateRange,
   formatEnumLabel,
   formatHours,
   formatWeekdayLabel,
@@ -91,9 +92,11 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { CollaboratorCostsSection } from './collaborator-costs-section';
+import { CollaboratorTasksTab } from './collaborator-tasks-tab';
+import { CollaboratorTimesheetsTab } from './collaborator-timesheets-tab';
 import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
-import { PersonSelectWithCreate } from './person-select-with-create';
+import { ProjectAssignmentsTab } from './project-assignments-tab';
 import { StatusBadge } from './status-badge';
 import {
   SystemUserSelectWithCreate,
@@ -919,20 +922,56 @@ export function CollaboratorFormScreen({
     }
   };
 
+  const createDepartment = async (departmentName: string) => {
+    try {
+      const createdDepartment = await mutateOperations<OperationsDepartment>(
+        request,
+        '/operations/departments',
+        'POST',
+        {
+          name: departmentName,
+        }
+      );
+
+      await refetchDepartments();
+
+      return {
+        id: createdDepartment.id,
+        name: createdDepartment.name,
+        code: createdDepartment.code ?? null,
+        description: createdDepartment.description ?? null,
+      };
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, 'Unable to create the department.')
+      );
+      return null;
+    }
+  };
+
   const createSystemUser = async (
     name: string,
     email: string,
     password: string
   ): Promise<SystemUserOption | null> => {
     try {
-      const response = await request<{ id: number; name: string }>({
+      const response = await request<{
+        user: { id: number; name: string | null; photo_id?: number | null };
+        challenge: unknown;
+      }>({
         url: '/user',
         method: 'POST',
         data: { name, email, password },
       });
       await refetchSystemUsers();
       showToastHandler?.('success', t('messages.createUserSuccess'));
-      return { id: response.data.id, name: response.data.name };
+      const user = response.data.user;
+      return {
+        id: user.id,
+        name: user.name || `#${user.id}`,
+        photoId: user.photo_id ?? null,
+      };
     } catch (error) {
       showToastHandler?.(
         'error',
@@ -1099,10 +1138,10 @@ export function CollaboratorFormScreen({
 
   const collaboratorSummary =
     collaborator && isSheetMode ? (
-      <div className="mx-4 rounded-xl border bg-muted/30 px-4 py-3">
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+      <div className="mx-4 rounded-xl border bg-muted/30 px-4 py-3 space-y-3">
+        <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-3">
-            <Avatar className="h-12 w-12 border border-border/60 bg-background">
+            <Avatar className="h-10 w-10 shrink-0 border border-border/60 bg-background">
               <AvatarImage
                 src={getPersonAvatarUrl(collaborator.personAvatarId)}
                 alt={collaborator.displayName}
@@ -1112,7 +1151,7 @@ export function CollaboratorFormScreen({
               </AvatarFallback>
             </Avatar>
             <div className="min-w-0">
-              <div className="truncate text-base font-semibold">
+              <div className="truncate text-sm font-semibold">
                 {collaborator.displayName}
               </div>
               <div className="truncate text-xs text-muted-foreground">
@@ -1127,7 +1166,7 @@ export function CollaboratorFormScreen({
             </div>
           </div>
 
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="flex shrink-0 items-center gap-1.5">
             <StatusBadge
               label={getStatusLabel(collaborator.status)}
               className={getStatusBadgeClass(collaborator.status)}
@@ -1159,38 +1198,70 @@ export function CollaboratorFormScreen({
           </div>
         </div>
 
-        <div className="mt-3 grid gap-2 text-sm md:grid-cols-2 xl:grid-cols-4">
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.supervisor')}
-            </div>
-            <div className="font-medium">
+        <div className="flex flex-wrap gap-x-5 gap-y-1.5 border-t pt-2.5 text-xs">
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {commonT('labels.supervisor')}:
+            </span>
+            <span className="font-medium">
               {collaborator.supervisorName || commonT('labels.notAssigned')}
-            </div>
+            </span>
           </div>
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.weeklyCapacity')}
-            </div>
-            <div className="font-medium">
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {commonT('labels.weeklyCapacity')}:
+            </span>
+            <span className="font-medium">
               {formatHours(collaborator.weeklyCapacityHours)}
-            </div>
+            </span>
           </div>
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.startDate')}
-            </div>
-            <div className="font-medium">
-              {formatDate(collaborator.joinedAt)}
-            </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {commonT('labels.startDate')}:
+            </span>
+            <span className="font-medium">
+              {formatDate(collaborator.joinedAt) || '—'}
+            </span>
           </div>
-          <div>
-            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-              {commonT('labels.projectCount')}
-            </div>
-            <div className="font-medium">
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {commonT('labels.projectCount')}:
+            </span>
+            <span className="font-medium">
               {collaborator.assignedProjects.length}
-            </div>
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {detailsT('cards.timesheets')}:
+            </span>
+            <span className="font-medium">
+              {collaborator.timesheetSummary.totalTimesheets}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {detailsT('cards.loggedHours')}:
+            </span>
+            <span className="font-medium">
+              {formatHours(collaborator.timesheetSummary.totalHours)}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {detailsT('cards.timeOff')}:
+            </span>
+            <span className="font-medium">
+              {collaborator.timeOffSummary.totalRequests}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">
+              {detailsT('sections.scheduleAdjustments')}:
+            </span>
+            <span className="font-medium">
+              {collaborator.scheduleAdjustmentRequests.length}
+            </span>
           </div>
         </div>
       </div>
@@ -1225,7 +1296,7 @@ export function CollaboratorFormScreen({
       </div>
       <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
         <div className="space-y-2 md:col-span-2">
-          <PersonSelectWithCreate
+          <PersonPicker
             label={t('fields.person')}
             entityLabel={t('fields.personEntityLabel')}
             value={form.personId ? Number(form.personId) : null}
@@ -1293,6 +1364,7 @@ export function CollaboratorFormScreen({
                 ?.name ?? ''
             }
             options={departmentOptions}
+            onCreate={createDepartment}
             selectPlaceholder={t('placeholders.department')}
             createDescription={t('fields.departmentDescription')}
             createPlaceholder={t('placeholders.departmentCreate')}
@@ -1681,32 +1753,6 @@ export function CollaboratorFormScreen({
     </div>
   ) : null;
 
-  const supervisorSection = (
-    <div className="space-y-2">
-      <div className="space-y-0.5">
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-          {t('sections.supervisor')}
-        </h3>
-        <p className="text-[11px] text-muted-foreground/80">
-          {t('sections.supervisorDescription')}
-        </p>
-      </div>
-      <SupervisorAutocomplete
-        label={commonT('labels.supervisor')}
-        value={form.supervisorCollaboratorId}
-        options={supervisorOptions}
-        placeholder={t('placeholders.supervisor')}
-        emptyLabel={commonT('labels.notAssigned')}
-        onChange={(value) =>
-          setForm((current) => ({
-            ...current,
-            supervisorCollaboratorId: value,
-          }))
-        }
-      />
-    </div>
-  );
-
   const contractSection = (
     <div className="space-y-2">
       <div className="space-y-0.5">
@@ -1898,212 +1944,6 @@ export function CollaboratorFormScreen({
     </div>
   );
 
-  const activitySection = collaborator ? (
-    <div className="space-y-4">
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('cards.timesheets')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {collaborator.timesheetSummary.totalTimesheets}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('cards.timesheetsDescription', {
-              pending: collaborator.timesheetSummary.pendingTimesheets,
-            })}
-          </p>
-        </div>
-
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('cards.loggedHours')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {formatHours(collaborator.timesheetSummary.totalHours)}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('cards.loggedHoursDescription')}
-          </p>
-        </div>
-
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('cards.timeOff')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {collaborator.timeOffSummary.totalRequests}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('cards.timeOffDescription', {
-              pending: collaborator.timeOffSummary.pendingRequests,
-            })}
-          </p>
-        </div>
-
-        <div className="rounded-xl border bg-muted/20 px-4 py-3">
-          <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
-            {detailsT('sections.scheduleAdjustments')}
-          </div>
-          <div className="mt-1 text-xl font-semibold">
-            {collaborator.scheduleAdjustmentRequests.length}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {detailsT('sections.scheduleAdjustmentsDescription')}
-          </p>
-        </div>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <div className="rounded-xl border px-4 py-3">
-          <div className="mb-3 space-y-0.5">
-            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              {detailsT('sections.projects')}
-            </h3>
-            <p className="text-[11px] text-muted-foreground/80">
-              {detailsT('sections.projectsDescription')}
-            </p>
-          </div>
-
-          {collaborator.assignedProjects.length > 0 ? (
-            <div className="space-y-2">
-              {collaborator.assignedProjects.slice(0, 6).map((project) => (
-                <div
-                  key={project.id}
-                  className="flex flex-col gap-2 rounded-lg border px-3 py-2.5"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="truncate font-medium">{project.name}</div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {[
-                          project.code,
-                          project.roleLabel || commonT('labels.notAssigned'),
-                          project.weeklyHours !== null &&
-                          project.weeklyHours !== undefined
-                            ? formatHours(project.weeklyHours)
-                            : null,
-                          project.allocationPercent !== null &&
-                          project.allocationPercent !== undefined
-                            ? `${project.allocationPercent}%`
-                            : null,
-                        ]
-                          .filter(Boolean)
-                          .join(' • ')}
-                      </div>
-                    </div>
-                    <StatusBadge
-                      label={formatEnumLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    {formatDateRange(project.startDate, project.endDate)}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              {detailsT('noProjects')}
-            </p>
-          )}
-        </div>
-
-        <div className="space-y-4">
-          <div className="rounded-xl border px-4 py-3">
-            <div className="mb-3 space-y-0.5">
-              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                {detailsT('sections.primaryContract')}
-              </h3>
-              <p className="text-[11px] text-muted-foreground/80">
-                {t('sections.contractDescription')}
-              </p>
-            </div>
-
-            {collaborator.relatedContracts.length > 0 ? (
-              <div className="space-y-2">
-                {collaborator.relatedContracts.slice(0, 3).map((contract) => (
-                  <Link
-                    key={contract.id}
-                    href={`/operations/contracts?edit=${contract.id}`}
-                    className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border px-3 py-2.5 transition-colors hover:bg-muted/20"
-                  >
-                    <div className="min-w-0">
-                      <div className="truncate font-medium">
-                        {contract.name || contract.code}
-                      </div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {[
-                          contract.code,
-                          formatEnumLabel(contract.contractCategory),
-                        ]
-                          .filter(Boolean)
-                          .join(' • ')}
-                      </div>
-                    </div>
-                    <StatusBadge
-                      label={formatEnumLabel(contract.status)}
-                      className={getStatusBadgeClass(contract.status)}
-                    />
-                  </Link>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {detailsT('noContracts')}
-              </p>
-            )}
-          </div>
-
-          <div className="rounded-xl border px-4 py-3">
-            <div className="mb-3 space-y-0.5">
-              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                {detailsT('sections.scheduleAdjustments')}
-              </h3>
-              <p className="text-[11px] text-muted-foreground/80">
-                {detailsT('sections.scheduleAdjustmentsDescription')}
-              </p>
-            </div>
-
-            {collaborator.scheduleAdjustmentRequests.length > 0 ? (
-              <div className="space-y-2">
-                {collaborator.scheduleAdjustmentRequests
-                  .slice(0, 4)
-                  .map((request) => (
-                    <div
-                      key={request.id}
-                      className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2.5"
-                    >
-                      <div className="min-w-0">
-                        <div className="font-medium">
-                          {formatEnumLabel(request.requestScope)}
-                        </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {formatDateRange(
-                            request.effectiveStartDate,
-                            request.effectiveEndDate
-                          )}
-                        </div>
-                      </div>
-                      <StatusBadge
-                        label={formatEnumLabel(request.status)}
-                        className={getStatusBadgeClass(request.status)}
-                      />
-                    </div>
-                  ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {detailsT('noScheduleAdjustments')}
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  ) : null;
-
   const profileContent = (
     <div className="space-y-4">
       {basicInfoSection}
@@ -2145,13 +1985,82 @@ export function CollaboratorFormScreen({
   );
 
   const formContent = isSheetMode ? (
-    <div className="space-y-4 px-4">
-      {profileContent}
-      {contractSection}
-      {!isCreateMode ? costsSection : null}
-      {!isCreateMode ? scheduleSection : null}
-      {activitySection}
-    </div>
+    <Tabs defaultValue="details" className="w-full">
+      <TabsList className="mx-4 mb-2 grid w-[calc(100%-2rem)] grid-cols-6">
+        <TabsTrigger value="details">{t('tabs.details')}</TabsTrigger>
+        <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
+        <TabsTrigger value="schedule">{t('tabs.defaultSchedule')}</TabsTrigger>
+        <TabsTrigger value="projects">{t('tabs.projects')}</TabsTrigger>
+        <TabsTrigger value="tasks">{t('tabs.tasks')}</TabsTrigger>
+        <TabsTrigger value="timesheets">{t('tabs.timesheets')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="details" className="mt-0 space-y-4 px-4 pt-2">
+        {profileContent}
+        {contractSection}
+      </TabsContent>
+      <TabsContent value="costs" className="mt-0 px-4 pt-2">
+        {isCreateMode || !collaborator ? (
+          <p className="text-sm text-muted-foreground">
+            {t('sections.costsSaveBefore')}
+          </p>
+        ) : (
+          <CollaboratorCostsSection
+            collaboratorId={collaborator.id}
+            disabled={!access.isDirector}
+            weeklyCapacity={collaborator.weeklyCapacityHours ?? undefined}
+            remunerationValue={
+              collaborator.compensationAmount != null
+                ? Number(collaborator.compensationAmount)
+                : undefined
+            }
+          />
+        )}
+      </TabsContent>
+      <TabsContent value="schedule" className="mt-0 px-4 pt-2">
+        {isCreateMode || !collaborator ? (
+          <p className="text-sm text-muted-foreground">
+            {t('sections.costsSaveBefore')}
+          </p>
+        ) : (
+          scheduleSection
+        )}
+      </TabsContent>
+      <TabsContent value="projects" className="mt-0 px-4 pt-2">
+        <ProjectAssignmentsTab
+          collaborator={collaborator ?? null}
+          request={request}
+          onUpdated={() => void refetchCollaborator()}
+          disabled={!access.isDirector}
+        />
+      </TabsContent>
+      <TabsContent value="tasks" className="mt-0 px-4 pt-2">
+        {isCreateMode || !collaborator ? (
+          <p className="text-sm text-muted-foreground">
+            {t('sections.costsSaveBefore')}
+          </p>
+        ) : (
+          <CollaboratorTasksTab
+            collaboratorId={collaborator.id}
+            collaboratorName={collaborator.displayName}
+            request={request}
+            disabled={!access.isDirector}
+          />
+        )}
+      </TabsContent>
+      <TabsContent value="timesheets" className="mt-0 px-4 pt-2">
+        {isCreateMode || !collaborator ? (
+          <p className="text-sm text-muted-foreground">
+            {t('sections.costsSaveBefore')}
+          </p>
+        ) : (
+          <CollaboratorTimesheetsTab
+            collaboratorId={collaborator.id}
+            request={request}
+            disabled={!access.isDirector}
+          />
+        )}
+      </TabsContent>
+    </Tabs>
   ) : (
     <div className="space-y-4 px-4">
       {profileContent}
@@ -2168,7 +2077,7 @@ export function CollaboratorFormScreen({
 
   if (isSheetMode) {
     return (
-      <div className="mt-6 space-y-4 pb-6">
+      <div className="mt-0 space-y-4 pb-6">
         {collaboratorSummary}
         {formContent}
         {loadingState}