@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -41,6 +41,15 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import {
   Tooltip,
@@ -61,6 +70,17 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { PersonPicker } from '../../contact/_components/person-picker';
 import {
   fetchOperations,
   getOperationsErrorMessage,
@@ -78,8 +98,8 @@ import type {
   PaginatedResponse,
 } from '../_lib/types';
 import {
+  formatCurrency,
   formatDate,
-  formatDateRange,
   formatEnumLabel,
   formatHours,
   formatWeekdayLabel,
@@ -91,9 +111,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,
@@ -226,6 +248,8 @@ const EQUITY_ENABLED_TYPE_SLUGS = new Set([
   'parceiro',
 ]);
 
+const HOURLY_RATE_SLUGS = new Set(['pj', 'freelancer']);
+
 type CollaboratorFormState = {
   userId: string;
   personId: string;
@@ -241,6 +265,9 @@ type CollaboratorFormState = {
   leftAt: string;
   supervisorCollaboratorId: string;
   compensationAmount: string;
+  hourlyRate: string;
+  compensationEffectiveDate: string;
+  compensationNotes: string;
   contractId: string;
   notes: string;
   equityParticipation: {
@@ -286,6 +313,9 @@ function buildEmptyForm(): CollaboratorFormState {
     leftAt: '',
     supervisorCollaboratorId: 'none',
     compensationAmount: '',
+    hourlyRate: '',
+    compensationEffectiveDate: '',
+    compensationNotes: '',
     contractId: '',
     notes: '',
     equityParticipation: {
@@ -359,6 +389,12 @@ function toFormState(
             collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
           ? String(collaborator.relatedContracts[0].budgetAmount)
           : '',
+    hourlyRate:
+      collaborator.hourlyRate !== null && collaborator.hourlyRate !== undefined
+        ? String(collaborator.hourlyRate)
+        : '',
+    compensationEffectiveDate: '',
+    compensationNotes: '',
     contractId: collaborator.relatedContracts?.[0]?.id
       ? String(collaborator.relatedContracts[0].id)
       : '',
@@ -558,7 +594,8 @@ export function CollaboratorFormScreen({
   const t = useTranslations('operations.CollaboratorFormPage');
   const commonT = useTranslations('operations.Common');
   const detailsT = useTranslations('operations.CollaboratorDetailsPage');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const access = useOperationsAccess();
   const router = useRouter();
   const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
@@ -703,6 +740,34 @@ export function CollaboratorFormScreen({
     placeholderData: (previous) => previous ?? [],
   });
 
+  type CompensationHistoryEntry = {
+    id: number;
+    collaboratorId: number;
+    amount: string;
+    effectiveDate: string | null;
+    actorUserId: number | null;
+    actorName: string | null;
+    notes: string | null;
+    createdAt: string;
+  };
+
+  const {
+    data: compensationHistory = [],
+    refetch: refetchCompensationHistory,
+  } = useQuery<CompensationHistoryEntry[]>({
+    queryKey: [
+      'operations-collaborator-compensation-history',
+      currentLocaleCode,
+      collaboratorId,
+    ],
+    enabled: !isCreateMode && access.isDirector,
+    queryFn: () =>
+      fetchOperations<CompensationHistoryEntry[]>(
+        request,
+        `/operations/collaborators/${collaboratorId}/compensation-history`
+      ),
+  });
+
   const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
     queryKey: ['contact-person-document-types', currentLocaleCode],
     enabled: personSheetOpen,
@@ -823,6 +888,10 @@ export function CollaboratorFormScreen({
       EQUITY_ENABLED_TYPE_SLUGS.has(selectedCollaboratorType.slug)
     );
 
+  const isHourlyType = HOURLY_RATE_SLUGS.has(
+    selectedCollaboratorType?.slug ?? ''
+  );
+
   const getCollaboratorTypeLabel = (
     value?: string | null,
     fallbackName?: string | null
@@ -919,20 +988,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',
@@ -978,7 +1083,10 @@ export function CollaboratorFormScreen({
   const onSubmit = async () => {
     const userId = parseNumberInput(form.userId);
     const personId = parseNumberInput(form.personId);
-    const compensationAmount = parseNumberInput(form.compensationAmount);
+    const compensationAmount = isHourlyType
+      ? null
+      : parseNumberInput(form.compensationAmount);
+    const hourlyRate = isHourlyType ? parseNumberInput(form.hourlyRate) : null;
 
     if (!personId) {
       showToastHandler?.('error', t('messages.personRequired'));
@@ -1013,6 +1121,9 @@ export function CollaboratorFormScreen({
           : parseNumberInput(form.supervisorCollaboratorId),
       compensationAmount:
         compensationAmount !== null ? compensationAmount : null,
+      hourlyRate: hourlyRate !== null ? hourlyRate : null,
+      compensationEffectiveDate: trimToNull(form.compensationEffectiveDate),
+      compensationNotes: trimToNull(form.compensationNotes),
       contractId: parseNumberInput(form.contractId),
       notes: trimToNull(form.notes),
       equityParticipation: shouldShowEquitySection
@@ -1053,10 +1164,16 @@ export function CollaboratorFormScreen({
             payload
           );
 
-      setForm(toFormState(response));
+      setForm((prev) => ({
+        ...toFormState(response),
+        compensationEffectiveDate: '',
+        compensationNotes: '',
+        weeklySchedule: prev.weeklySchedule,
+      }));
 
       await Promise.all([
         collaboratorId ? refetchCollaborator() : Promise.resolve(),
+        collaboratorId ? refetchCompensationHistory() : Promise.resolve(),
         refetchCollaboratorTypes(),
         refetchDepartments(),
         refetchCollaborators(),
@@ -1099,10 +1216,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 +1229,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 +1244,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 +1276,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 +1374,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 +1442,7 @@ export function CollaboratorFormScreen({
                 ?.name ?? ''
             }
             options={departmentOptions}
+            onCreate={createDepartment}
             selectPlaceholder={t('placeholders.department')}
             createDescription={t('fields.departmentDescription')}
             createPlaceholder={t('placeholders.departmentCreate')}
@@ -1518,21 +1668,70 @@ export function CollaboratorFormScreen({
                 }
               />
             </div>
+            {isHourlyType ? (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  {t('fields.hourlyRate')}
+                </label>
+                <InputMoney
+                  step="0.01"
+                  value={form.hourlyRate === '' ? '' : Number(form.hourlyRate)}
+                  onValueChange={(value) =>
+                    setForm((current) => ({
+                      ...current,
+                      hourlyRate: value !== null ? String(value) : '',
+                    }))
+                  }
+                />
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  {t('fields.compensationAmount')}
+                </label>
+                <InputMoney
+                  step="0.01"
+                  value={
+                    form.compensationAmount === ''
+                      ? ''
+                      : Number(form.compensationAmount)
+                  }
+                  onValueChange={(value) =>
+                    setForm((current) => ({
+                      ...current,
+                      compensationAmount: value !== null ? String(value) : '',
+                    }))
+                  }
+                />
+              </div>
+            )}
             <div className="space-y-2">
               <label className="text-sm font-medium">
-                {t('fields.compensationAmount')}
+                {t('fields.compensationEffectiveDate')}
               </label>
-              <InputMoney
-                step="0.01"
-                value={
-                  form.compensationAmount === ''
-                    ? ''
-                    : Number(form.compensationAmount)
+              <Input
+                type="date"
+                value={form.compensationEffectiveDate}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    compensationEffectiveDate: event.target.value,
+                  }))
                 }
-                onValueChange={(value) =>
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t('fields.compensationNotes')}
+              </label>
+              <Textarea
+                rows={2}
+                value={form.compensationNotes}
+                placeholder={t('placeholders.compensationNotes')}
+                onChange={(event) =>
                   setForm((current) => ({
                     ...current,
-                    compensationAmount: value !== null ? String(value) : '',
+                    compensationNotes: event.target.value,
                   }))
                 }
               />
@@ -1681,32 +1880,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">
@@ -1734,21 +1907,70 @@ export function CollaboratorFormScreen({
             }
           />
         </div>
+        {isHourlyType ? (
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              {t('fields.hourlyRate')}
+            </label>
+            <InputMoney
+              step="0.01"
+              value={form.hourlyRate === '' ? '' : Number(form.hourlyRate)}
+              onValueChange={(value) =>
+                setForm((current) => ({
+                  ...current,
+                  hourlyRate: value !== null ? String(value) : '',
+                }))
+              }
+            />
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              {t('fields.compensationAmount')}
+            </label>
+            <InputMoney
+              step="0.01"
+              value={
+                form.compensationAmount === ''
+                  ? ''
+                  : Number(form.compensationAmount)
+              }
+              onValueChange={(value) =>
+                setForm((current) => ({
+                  ...current,
+                  compensationAmount: value !== null ? String(value) : '',
+                }))
+              }
+            />
+          </div>
+        )}
         <div className="space-y-2">
           <label className="text-sm font-medium">
-            {t('fields.compensationAmount')}
+            {t('fields.compensationEffectiveDate')}
           </label>
-          <InputMoney
-            step="0.01"
-            value={
-              form.compensationAmount === ''
-                ? ''
-                : Number(form.compensationAmount)
+          <Input
+            type="date"
+            value={form.compensationEffectiveDate}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                compensationEffectiveDate: event.target.value,
+              }))
             }
-            onValueChange={(value) =>
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {t('fields.compensationNotes')}
+          </label>
+          <Textarea
+            rows={2}
+            value={form.compensationNotes}
+            placeholder={t('placeholders.compensationNotes')}
+            onChange={(event) =>
               setForm((current) => ({
                 ...current,
-                compensationAmount: value !== null ? String(value) : '',
+                compensationNotes: event.target.value,
               }))
             }
           />
@@ -1898,212 +2120,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}
@@ -2112,6 +2128,58 @@ export function CollaboratorFormScreen({
     </div>
   );
 
+  const salaryChartData = useMemo(() => {
+    if (!compensationHistory.length) return [];
+
+    const sorted = [...compensationHistory].sort(
+      (a, b) =>
+        new Date(a.effectiveDate ?? a.createdAt).getTime() -
+        new Date(b.effectiveDate ?? b.createdAt).getTime()
+    );
+
+    const historicalPoints = sorted.map((entry) => ({
+      date: (entry.effectiveDate ?? entry.createdAt).slice(0, 10),
+      valor: Number(entry.amount),
+      projecao: null as number | null,
+    }));
+
+    const lastEntry = sorted[sorted.length - 1];
+    if (!lastEntry) return [];
+    const lastAmount = Number(lastEntry.amount);
+    const prevEntry = sorted.length > 1 ? sorted[sorted.length - 2] : null;
+    const growthRate =
+      prevEntry && Number(prevEntry.amount) > 0
+        ? (lastAmount - Number(prevEntry.amount)) / Number(prevEntry.amount)
+        : 0;
+
+    const projectionPoints: { date: string; valor: null; projecao: number }[] =
+      [];
+    const baseDate = new Date(
+      (lastEntry.effectiveDate ?? lastEntry.createdAt).slice(0, 10) +
+        'T00:00:00'
+    );
+
+    for (let i = 1; i <= 12; i++) {
+      const d = new Date(baseDate);
+      d.setMonth(d.getMonth() + i);
+      projectionPoints.push({
+        date: d.toISOString().slice(0, 10),
+        valor: null,
+        projecao:
+          Math.round(lastAmount * Math.pow(1 + growthRate, i / 12) * 100) / 100,
+      });
+    }
+
+    return [
+      ...historicalPoints,
+      {
+        ...historicalPoints[historicalPoints.length - 1],
+        projecao: lastAmount,
+      },
+      ...projectionPoints,
+    ];
+  }, [compensationHistory]);
+
   const costsSection = (
     <Accordion
       type="single"
@@ -2145,13 +2213,241 @@ 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)] ${!isCreateMode && !isHourlyType ? 'grid-cols-7' : isCreateMode && isHourlyType ? 'grid-cols-5' : 'grid-cols-6'}`}
+      >
+        <TabsTrigger value="details">{t('tabs.details')}</TabsTrigger>
+        <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
+        {!isHourlyType ? (
+          <TabsTrigger value="schedule">
+            {t('tabs.defaultSchedule')}
+          </TabsTrigger>
+        ) : null}
+        <TabsTrigger value="projects">{t('tabs.projects')}</TabsTrigger>
+        <TabsTrigger value="tasks">{t('tabs.tasks')}</TabsTrigger>
+        <TabsTrigger value="timesheets">{t('tabs.timesheets')}</TabsTrigger>
+        {!isCreateMode ? (
+          <TabsTrigger value="salary">{t('tabs.salary')}</TabsTrigger>
+        ) : null}
+      </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>
+      {!isCreateMode ? (
+        <TabsContent value="salary" className="mt-0 px-4 pt-2 space-y-6">
+          {access.isDirector ? (
+            <>
+              <div>
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">
+                  {isHourlyType
+                    ? t('chart.hourlyHistory')
+                    : t('chart.salaryHistory')}
+                </h3>
+                {salaryChartData.length > 0 ? (
+                  <ResponsiveContainer width="100%" height={260}>
+                    <LineChart
+                      data={salaryChartData}
+                      margin={{ top: 8, right: 16, left: 8, bottom: 8 }}
+                    >
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        className="stroke-muted"
+                      />
+                      <XAxis
+                        dataKey="date"
+                        tick={{ fontSize: 11 }}
+                        tickFormatter={(v: string) => {
+                          const [year, month] = v.split('-');
+                          return `${month}/${year?.slice(2)}`;
+                        }}
+                      />
+                      <YAxis
+                        tick={{ fontSize: 11 }}
+                        tickFormatter={(v: number) =>
+                          formatCurrency(v, getSettingValue, currentLocaleCode)
+                        }
+                        width={90}
+                      />
+                      <RechartsTooltip
+                        formatter={(value: number) => [
+                          formatCurrency(
+                            value,
+                            getSettingValue,
+                            currentLocaleCode
+                          ),
+                        ]}
+                        labelFormatter={(label: string) => label}
+                      />
+                      <Legend />
+                      <Line
+                        type="monotone"
+                        dataKey="valor"
+                        name={t('chart.actual')}
+                        stroke="hsl(var(--primary))"
+                        strokeWidth={2}
+                        dot={{ r: 4 }}
+                        activeDot={{ r: 6 }}
+                        isAnimationActive
+                        animationDuration={800}
+                        connectNulls={false}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="projecao"
+                        name={t('chart.projection')}
+                        stroke="hsl(var(--muted-foreground))"
+                        strokeWidth={2}
+                        strokeDasharray="5 5"
+                        dot={false}
+                        isAnimationActive
+                        animationDuration={800}
+                        connectNulls={false}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {detailsT('noCompensationHistory')}
+                  </p>
+                )}
+              </div>
+              <div>
+                {compensationHistory.length > 0 ? (
+                  <div className="overflow-x-auto rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>
+                            {detailsT('compensationHistory.amount')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.effectiveDate')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.recordedAt')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.changedBy')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.notes')}
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {compensationHistory.map((entry) => (
+                          <TableRow key={entry.id}>
+                            <TableCell className="font-medium">
+                              {formatCurrency(
+                                Number(entry.amount),
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {entry.effectiveDate
+                                ? formatDate(
+                                    entry.effectiveDate,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )
+                                : '—'}
+                            </TableCell>
+                            <TableCell>
+                              {formatDate(
+                                entry.createdAt,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </TableCell>
+                            <TableCell>{entry.actorName ?? '—'}</TableCell>
+                            <TableCell className="text-muted-foreground">
+                              {entry.notes ?? '—'}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {detailsT('noCompensationHistory')}
+                  </p>
+                )}
+              </div>
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('noDirectorAccess')}
+            </p>
+          )}
+        </TabsContent>
+      ) : null}
+    </Tabs>
   ) : (
     <div className="space-y-4 px-4">
       {profileContent}
@@ -2168,7 +2464,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}