@hed-hog/operations 0.0.317 → 0.0.319

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

@@ -21,6 +21,7 @@ import { StatusBadge } from './status-badge';
 import { fetchOperations } from '../_lib/api';
 import type { OperationsCollaboratorDetails } from '../_lib/types';
 import {
+  formatCurrency,
   formatDate,
   formatDateRange,
   formatEnumLabel,
@@ -37,7 +38,7 @@ export function CollaboratorDetailsScreen({
 }) {
   const t = useTranslations('operations.CollaboratorDetailsPage');
   const commonT = useTranslations('operations.Common');
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
 
   const { data: collaborator, refetch } =
@@ -54,24 +55,50 @@ export function CollaboratorDetailsScreen({
         ),
     });
 
-  if (!collaborator) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-        <EmptyState
-          icon={<UserRound className="size-12" />}
+  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 = [] } =
+    useQuery<CompensationHistoryEntry[]>({
+      queryKey: [
+        'operations-collaborator-compensation-history',
+        currentLocaleCode,
+        collaboratorId,
+      ],
+      enabled: access.isDirector,
+      queryFn: () =>
+        fetchOperations<CompensationHistoryEntry[]>(
+          request,
+          `/operations/collaborators/${collaboratorId}/compensation-history`
+        ),
+    });
+
+  if (!collaborator) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<UserRound className="size-12" />}
           title={commonT('states.emptyTitle')}
           description={t('notFound')}
           actionLabel={commonT('actions.refresh')}
           onAction={() => void refetch()}
-        />
-      </Page>
-    );
-  }
+        />
+      </Page>
+    );
+  }
 
   const summaryCards = [
     {
@@ -392,6 +419,58 @@ export function CollaboratorDetailsScreen({
           )}
         </SectionCard>
       </div>
+
+      {access.isDirector && (
+        <SectionCard
+          title={t('sections.compensationHistory')}
+          description={t('sections.compensationHistoryDescription')}
+        >
+          {compensationHistory.length > 0 ? (
+            <div className="overflow-x-auto rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('compensationHistory.amount')}</TableHead>
+                    <TableHead>{t('compensationHistory.effectiveDate')}</TableHead>
+                    <TableHead>{t('compensationHistory.recordedAt')}</TableHead>
+                    <TableHead>{t('compensationHistory.changedBy')}</TableHead>
+                    <TableHead>{t('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)
+                          : '—'}
+                      </TableCell>
+                      <TableCell>{formatDate(entry.createdAt)}</TableCell>
+                      <TableCell>
+                        {entry.actorName ?? '—'}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground">
+                        {entry.notes ?? '—'}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('noCompensationHistory')}
+            </p>
+          )}
+        </SectionCard>
+      )}
     </Page>
   );
 }

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

@@ -1,6 +1,18 @@
 'use client';
 
+import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+  Person,
+} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
 import { EmptyState, Page } from '@/components/entity-list';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -11,6 +23,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/ui/command';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
@@ -40,6 +53,7 @@ import {
   Check,
   ChevronsUpDown,
   Info,
+  Pencil,
   Save,
   UserRound,
 } from 'lucide-react';
@@ -57,9 +71,11 @@ import type {
   OperationsCollaborator,
   OperationsCollaboratorDetails,
   OperationsCollaboratorType,
+  OperationsContract,
   OperationsDepartment,
   OperationsJobTitle,
   OperationsWeeklyScheduleDay,
+  PaginatedResponse,
 } from '../_lib/types';
 import {
   formatDate,
@@ -74,6 +90,7 @@ import {
   parseNumberInput,
   trimToNull,
 } from '../_lib/utils/forms';
+import { CollaboratorCostsSection } from './collaborator-costs-section';
 import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
 import { PersonSelectWithCreate } from './person-select-with-create';
@@ -212,11 +229,9 @@ const EQUITY_ENABLED_TYPE_SLUGS = new Set([
 type CollaboratorFormState = {
   userId: string;
   personId: string;
-  code: string;
   displayName: string;
   collaboratorTypeId: string;
   departmentId: string;
-  department: string;
   jobTitleId: string;
   title: string;
   levelLabel: string;
@@ -226,8 +241,7 @@ type CollaboratorFormState = {
   leftAt: string;
   supervisorCollaboratorId: string;
   compensationAmount: string;
-  contractDescription: string;
-  autoGenerateContractDraft: boolean;
+  contractId: string;
   notes: string;
   equityParticipation: {
     participationType: string;
@@ -260,11 +274,9 @@ function buildEmptyForm(): CollaboratorFormState {
   return {
     userId: '',
     personId: '',
-    code: '',
     displayName: '',
     collaboratorTypeId: '',
     departmentId: '',
-    department: '',
     jobTitleId: '',
     title: '',
     levelLabel: '',
@@ -274,8 +286,7 @@ function buildEmptyForm(): CollaboratorFormState {
     leftAt: '',
     supervisorCollaboratorId: 'none',
     compensationAmount: '',
-    contractDescription: '',
-    autoGenerateContractDraft: true,
+    contractId: '',
     notes: '',
     equityParticipation: {
       participationType: 'partner_quota_holder',
@@ -319,7 +330,6 @@ function toFormState(
   return {
     userId: collaborator.userId ? String(collaborator.userId) : '',
     personId: collaborator.personId ? String(collaborator.personId) : '',
-    code: collaborator.code ?? '',
     displayName: collaborator.displayName ?? '',
     collaboratorTypeId: collaborator.collaboratorTypeId
       ? String(collaborator.collaboratorTypeId)
@@ -327,7 +337,6 @@ function toFormState(
     departmentId: collaborator.departmentId
       ? String(collaborator.departmentId)
       : '',
-    department: collaborator.department ?? '',
     jobTitleId: collaborator.jobTitleId ? String(collaborator.jobTitleId) : '',
     title: collaborator.title ?? '',
     levelLabel: normalizeCollaboratorLevel(collaborator.levelLabel),
@@ -350,8 +359,9 @@ function toFormState(
             collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
           ? String(collaborator.relatedContracts[0].budgetAmount)
           : '',
-    contractDescription: collaborator.relatedContracts?.[0]?.description ?? '',
-    autoGenerateContractDraft: true,
+    contractId: collaborator.relatedContracts?.[0]?.id
+      ? String(collaborator.relatedContracts[0].id)
+      : '',
     notes: collaborator.notes ?? '',
     equityParticipation: {
       participationType:
@@ -677,6 +687,49 @@ export function CollaboratorFormScreen({
       fetchOperations<OperationsJobTitle[]>(request, '/operations/job-titles'),
   });
 
+  const [personSheetOpen, setPersonSheetOpen] = useState(false);
+  const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    enabled: personSheetOpen,
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    enabled: personSheetOpen,
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const handleOpenPersonSheet = async () => {
+    if (!collaborator?.personId) return;
+    try {
+      const response = await request<Person>({
+        url: `/person/${collaborator.personId}`,
+        method: 'GET',
+      });
+      setPersonToEdit(response.data);
+      setPersonSheetOpen(true);
+    } catch {
+      showToastHandler?.('error', t('messages.updateError'));
+    }
+  };
+
   useEffect(() => {
     if (collaborator) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -793,40 +846,16 @@ export function CollaboratorFormScreen({
   };
 
   const departmentOptions = useMemo(() => {
-    const selectedDepartment = trimToNull(form.department);
-    const options: Array<{
-      id?: number | null;
-      name: string;
-      code?: string | null;
-      description?: string | null;
-    }> = departments
-      .filter(
-        (item) => item.status === 'active' || item.name === selectedDepartment
-      )
+    return departments
+      .filter((item) => item.status === 'active')
       .map((item) => ({
         id: item.id,
         name: item.name,
         code: item.code ?? null,
         description: item.description ?? null,
-      }));
-
-    if (selectedDepartment) {
-      const alreadyIncluded = options.some(
-        (item) => item.name === selectedDepartment
-      );
-
-      if (!alreadyIncluded) {
-        options.push({
-          id: form.departmentId ? Number(form.departmentId) : undefined,
-          name: selectedDepartment,
-          code: null,
-          description: null,
-        });
-      }
-    }
-
-    return options.sort((left, right) => left.name.localeCompare(right.name));
-  }, [departments, form.department, form.departmentId]);
+      }))
+      .sort((left, right) => left.name.localeCompare(right.name));
+  }, [departments]);
 
   const titleOptions = useMemo(() => {
     const selectedTitle = trimToNull(form.title);
@@ -968,11 +997,9 @@ export function CollaboratorFormScreen({
     const payload = {
       userId: userId ?? undefined,
       personId: personId ?? undefined,
-      code: trimToNull(form.code) ?? undefined,
       displayName: trimToNull(form.displayName),
       collaboratorTypeId,
       departmentId: departmentId ?? undefined,
-      department: departmentId ? undefined : trimToNull(form.department),
       jobTitleId: jobTitleId ?? undefined,
       title: trimToNull(form.title),
       levelLabel: trimToNull(form.levelLabel),
@@ -986,8 +1013,7 @@ export function CollaboratorFormScreen({
           : parseNumberInput(form.supervisorCollaboratorId),
       compensationAmount:
         compensationAmount !== null ? compensationAmount : null,
-      contractDescription: trimToNull(form.contractDescription),
-      autoGenerateContractDraft: form.autoGenerateContractDraft,
+      contractId: parseNumberInput(form.contractId),
       notes: trimToNull(form.notes),
       equityParticipation: shouldShowEquitySection
         ? {
@@ -1101,7 +1127,7 @@ export function CollaboratorFormScreen({
             </div>
           </div>
 
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             <StatusBadge
               label={getStatusLabel(collaborator.status)}
               className={getStatusBadgeClass(collaborator.status)}
@@ -1113,6 +1139,23 @@ export function CollaboratorFormScreen({
                 collaborator.collaboratorTypeName
               )}
             </span>
+            {collaborator.personId ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-7 w-7"
+                    onClick={() => void handleOpenPersonSheet()}
+                  >
+                    <Pencil className="size-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  {t('actions.editPersonCrm')}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
           </div>
         </div>
 
@@ -1216,20 +1259,7 @@ export function CollaboratorFormScreen({
             {t('fields.userIdDescription')}
           </p>
         </div>
-        <div className="space-y-2">
-          <Label>{t('fields.code')}</Label>
-          <Input
-            className="h-10"
-            value={form.code}
-            placeholder="COL-001"
-            onChange={(event) =>
-              setForm((current) => ({
-                ...current,
-                code: event.target.value,
-              }))
-            }
-          />
-        </div>
+
         {!isCreateMode ? (
           <div className="space-y-2">
             <Label>{t('fields.levelLabel')}</Label>
@@ -1258,7 +1288,10 @@ export function CollaboratorFormScreen({
         <div className="space-y-2 xl:col-span-1">
           <DepartmentSelectWithCreate
             label={t('fields.department')}
-            value={form.department}
+            value={
+              departmentOptions.find((d) => String(d.id) === form.departmentId)
+                ?.name ?? ''
+            }
             options={departmentOptions}
             selectPlaceholder={t('placeholders.department')}
             createDescription={t('fields.departmentDescription')}
@@ -1267,7 +1300,6 @@ export function CollaboratorFormScreen({
               setForm((current) => ({
                 ...current,
                 departmentId: department.id ? String(department.id) : '',
-                department: department.name,
               }))
             }
           />
@@ -1290,6 +1322,73 @@ export function CollaboratorFormScreen({
             }
           />
         </div>
+        <div className="space-y-2 xl:col-span-1">
+          <label className="text-sm font-medium">{t('fields.contract')}</label>
+          <EntityPicker<OperationsContract>
+            value={form.contractId ? Number(form.contractId) : null}
+            onChange={(v) =>
+              setForm((current) => ({
+                ...current,
+                contractId: v ? String(v) : '',
+              }))
+            }
+            placeholder={t('fields.contractPlaceholder')}
+            emptyLabel={t('fields.contractEmpty')}
+            initialSelectedLabel={
+              form.contractId
+                ? (collaborator?.relatedContracts.find(
+                    (c) => String(c.id) === form.contractId
+                  )?.name ??
+                  collaborator?.relatedContracts.find(
+                    (c) => String(c.id) === form.contractId
+                  )?.code ??
+                  undefined)
+                : undefined
+            }
+            clearable
+            showCreateButton
+            createTitle={t('fields.contractCreateTitle')}
+            createDescription={t('fields.contractCreateDescription')}
+            createFields={[
+              {
+                name: 'name',
+                label: t('fields.contractNameField'),
+                placeholder: t('fields.contractNameField'),
+                required: true,
+              },
+            ]}
+            loadOptions={async ({ page, pageSize, search }) => {
+              const params = new URLSearchParams({
+                page: String(page),
+                pageSize: String(pageSize),
+              });
+              if (search.trim()) params.set('search', search.trim());
+              const res = await fetchOperations<
+                PaginatedResponse<OperationsContract>
+              >(request, `/operations/contracts?${params.toString()}`);
+              return {
+                items: res.data ?? [],
+                hasMore: res.page < res.lastPage,
+              };
+            }}
+            getOptionValue={(c) => c.id}
+            getOptionLabel={(c) => (c.name || c.code) as string}
+            getOptionDescription={(c) =>
+              [c.code, c.status].filter(Boolean).join(' • ') || undefined
+            }
+            onCreate={async (values) => {
+              return mutateOperations<OperationsContract>(
+                request,
+                '/operations/contracts',
+                'POST',
+                {
+                  name: values.name,
+                  billingModel: 'time_and_material',
+                }
+              );
+            }}
+          />
+        </div>
       </div>
     </div>
   );
@@ -1618,7 +1717,7 @@ export function CollaboratorFormScreen({
           {t('sections.contractDescription')}
         </p>
       </div>
-      <div className="grid gap-3 md:grid-cols-2">
+      <div className="grid gap-3 md:grid-cols-3">
         <div className="space-y-2">
           <label className="text-sm font-medium">
             {t('fields.weeklyCapacityHours')}
@@ -1654,36 +1753,17 @@ export function CollaboratorFormScreen({
             }
           />
         </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) =>
+        <div className="space-y-2">
+          <SupervisorAutocomplete
+            label={commonT('labels.supervisor')}
+            value={form.supervisorCollaboratorId}
+            options={supervisorOptions}
+            placeholder={t('placeholders.supervisor')}
+            emptyLabel={commonT('labels.notAssigned')}
+            onChange={(value) =>
               setForm((current) => ({
                 ...current,
-                autoGenerateContractDraft: checked,
+                supervisorCollaboratorId: value,
               }))
             }
           />
@@ -2029,21 +2109,54 @@ export function CollaboratorFormScreen({
       {basicInfoSection}
       {employmentInfoSection}
       {!isCreateMode ? equitySection : null}
-      {supervisorSection}
     </div>
   );
 
+  const costsSection = (
+    <Accordion
+      type="single"
+      collapsible
+      defaultValue={isCreateMode ? undefined : 'costs'}
+    >
+      <AccordionItem value="costs" className="rounded-xl border px-4">
+        <AccordionTrigger className="py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline">
+          {t('sections.costs')}
+        </AccordionTrigger>
+        <AccordionContent className="pb-4">
+          {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
+              }
+            />
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+
   const formContent = isSheetMode ? (
     <div className="space-y-4 px-4">
       {profileContent}
-      {!isCreateMode ? contractSection : null}
+      {contractSection}
+      {!isCreateMode ? costsSection : null}
       {!isCreateMode ? scheduleSection : null}
       {activitySection}
     </div>
   ) : (
     <div className="space-y-4 px-4">
       {profileContent}
-      {!isCreateMode ? contractSection : null}
+      {contractSection}
+      {!isCreateMode ? costsSection : null}
       {!isCreateMode ? scheduleSection : null}
     </div>
   );
@@ -2069,6 +2182,18 @@ export function CollaboratorFormScreen({
           submitLabel={commonT('actions.save')}
           submitSize="lg"
         />
+
+        <PersonFormSheet
+          open={personSheetOpen}
+          person={personToEdit}
+          contactTypes={contactTypes}
+          documentTypes={documentTypes}
+          onOpenChange={(nextOpen) => {
+            setPersonSheetOpen(nextOpen);
+            if (!nextOpen) setPersonToEdit(null);
+          }}
+          onSuccess={() => void refetchCollaborator()}
+        />
       </div>
     );
   }