@hed-hog/operations 0.0.330 → 0.0.332

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

@@ -69,14 +69,14 @@ import {
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   CartesianGrid,
   Legend,
   Line,
   LineChart,
-  ResponsiveContainer,
   Tooltip as RechartsTooltip,
+  ResponsiveContainer,
   XAxis,
   YAxis,
 } from 'recharts';
@@ -111,16 +111,14 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { CollaboratorCostsSection } from './collaborator-costs-section';
+import { CollaboratorInvoicesTab } from './collaborator-invoices-tab';
+import { CollaboratorPaymentHistoryTab } from './collaborator-payment-history-tab';
 import { CollaboratorTasksTab } from './collaborator-tasks-tab';
 import { CollaboratorTimesheetsTab } from './collaborator-timesheets-tab';
 import { DepartmentPicker } from './department-picker';
 import { OperationsHeader } from './operations-header';
 import { ProjectAssignmentsTab } from './project-assignments-tab';
 import { StatusBadge } from './status-badge';
-import {
-  SystemUserPicker,
-  type SystemUserPickerOption as SystemUserOption,
-} from './system-user-picker';
 
 const weekdays = [
   'monday',
@@ -251,7 +249,6 @@ const EQUITY_ENABLED_TYPE_SLUGS = new Set([
 const HOURLY_RATE_SLUGS = new Set(['pj', 'freelancer']);
 
 type CollaboratorFormState = {
-  userId: string;
   personId: string;
   displayName: string;
   collaboratorTypeId: string;
@@ -299,7 +296,6 @@ function defaultSchedule(): CollaboratorFormState['weeklySchedule'] {
 
 function buildEmptyForm(): CollaboratorFormState {
   return {
-    userId: '',
     personId: '',
     displayName: '',
     collaboratorTypeId: '',
@@ -358,7 +354,6 @@ function toFormState(
   collaborator: OperationsCollaboratorDetails
 ): CollaboratorFormState {
   return {
-    userId: collaborator.userId ? String(collaborator.userId) : '',
     personId: collaborator.personId ? String(collaborator.personId) : '',
     displayName: collaborator.displayName ?? '',
     collaboratorTypeId: collaborator.collaboratorTypeId
@@ -637,38 +632,6 @@ export function CollaboratorFormScreen({
       ),
   });
 
-  const { data: systemUsers = [], refetch: refetchSystemUsers } = useQuery<
-    SystemUserOption[]
-  >({
-    queryKey: ['operations-collaborator-form-system-users', currentLocaleCode],
-    enabled: access.isDirector,
-    staleTime: 0,
-    refetchOnMount: 'always',
-    queryFn: async () => {
-      const response = await request<{
-        paginate: {
-          data: Array<{
-            id: number;
-            name: string | null;
-            photo_id?: number | null;
-          }>;
-        };
-      }>({
-        url: '/user?pageSize=100',
-        method: 'GET',
-      });
-
-      const raw = response.data?.paginate?.data ?? [];
-      const options: SystemUserOption[] = raw.map((u) => ({
-        id: u.id,
-        name: u.name || `#${u.id}`,
-        photoId: u.photo_id ?? null,
-      }));
-
-      return options.sort((left, right) => left.name.localeCompare(right.name));
-    },
-  });
-
   const {
     data: collaboratorTypes = [],
     refetch: refetchCollaboratorTypes,
@@ -726,6 +689,7 @@ export function CollaboratorFormScreen({
 
   const [personSheetOpen, setPersonSheetOpen] = useState(false);
   const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
+  const personSheetModeRef = useRef<'edit' | 'create'>('edit');
 
   const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
     queryKey: ['contact-person-contact-types', currentLocaleCode],
@@ -781,13 +745,22 @@ export function CollaboratorFormScreen({
     placeholderData: (previous) => previous ?? [],
   });
 
-  const handleOpenPersonSheet = async () => {
-    if (!collaborator?.personId) return;
+  const handleOpenPersonSheet = async (personId?: number | null) => {
+    const targetPersonId =
+      personId && personId > 0
+        ? personId
+        : (parseNumberInput(form.personId) ?? collaborator?.personId ?? null);
+
+    if (!targetPersonId) {
+      return;
+    }
+
     try {
       const response = await request<Person>({
-        url: `/person/${collaborator.personId}`,
+        url: `/person/${targetPersonId}`,
         method: 'GET',
       });
+      personSheetModeRef.current = 'edit';
       setPersonToEdit(response.data);
       setPersonSheetOpen(true);
     } catch {
@@ -795,6 +768,12 @@ export function CollaboratorFormScreen({
     }
   };
 
+  const handleOpenPersonCreateSheet = () => {
+    personSheetModeRef.current = 'create';
+    setPersonToEdit(null);
+    setPersonSheetOpen(true);
+  };
+
   useEffect(() => {
     if (collaborator) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -1016,37 +995,6 @@ export function CollaboratorFormScreen({
     }
   };
 
-  const createSystemUser = async (
-    name: string,
-    email: string,
-    password: string
-  ): Promise<SystemUserOption | null> => {
-    try {
-      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'));
-      const user = response.data.user;
-      return {
-        id: user.id,
-        name: user.name || `#${user.id}`,
-        photoId: user.photo_id ?? null,
-      };
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(error, t('messages.createUserError'))
-      );
-      return null;
-    }
-  };
-
   const updateScheduleDay = (
     weekday: string,
     patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
@@ -1081,7 +1029,6 @@ export function CollaboratorFormScreen({
   };
 
   const onSubmit = async () => {
-    const userId = parseNumberInput(form.userId);
     const personId = parseNumberInput(form.personId);
     const compensationAmount = isHourlyType
       ? null
@@ -1103,7 +1050,6 @@ export function CollaboratorFormScreen({
     }
 
     const payload = {
-      userId: userId ?? undefined,
       personId: personId ?? undefined,
       displayName: trimToNull(form.displayName),
       collaboratorTypeId,
@@ -1380,6 +1326,10 @@ export function CollaboratorFormScreen({
             value={form.personId ? Number(form.personId) : null}
             initialSelectedLabel={collaborator?.personName ?? form.displayName}
             selectPlaceholder={t('placeholders.person')}
+            showEditButton
+            editAriaLabel={t('actions.editPersonCrm')}
+            onEditSelection={(personId) => void handleOpenPersonSheet(personId)}
+            onCreateNew={() => handleOpenPersonCreateSheet()}
             onChange={(personId, personName) =>
               setForm((current) => ({
                 ...current,
@@ -1389,25 +1339,6 @@ export function CollaboratorFormScreen({
             }
           />
         </div>
-        <div className="space-y-2 md:col-span-2 xl:col-span-2">
-          <SystemUserPicker
-            label={t('fields.userIdOptional')}
-            value={form.userId}
-            options={systemUsers}
-            placeholder={t('placeholders.userIdOptional')}
-            emptyLabel={commonT('labels.notAssigned')}
-            onChange={(value) =>
-              setForm((current) => ({
-                ...current,
-                userId: value,
-              }))
-            }
-            onCreate={createSystemUser}
-          />
-          <p className="text-xs text-muted-foreground">
-            {t('fields.userIdDescription')}
-          </p>
-        </div>
 
         {!isCreateMode ? (
           <div className="space-y-2">
@@ -2128,7 +2059,7 @@ export function CollaboratorFormScreen({
     </div>
   );
 
-  const salaryChartData = useMemo(() => {
+  const salaryChartData = (() => {
     if (!compensationHistory.length) return [];
 
     const sorted = [...compensationHistory].sort(
@@ -2178,7 +2109,7 @@ export function CollaboratorFormScreen({
       },
       ...projectionPoints,
     ];
-  }, [compensationHistory]);
+  })();
 
   const costsSection = (
     <Accordion
@@ -2214,9 +2145,7 @@ export function CollaboratorFormScreen({
 
   const formContent = isSheetMode ? (
     <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'}`}
-      >
+      <TabsList className="mx-4 mb-2 flex w-[calc(100%-2rem)] flex-wrap gap-0.5 h-auto">
         <TabsTrigger value="details">{t('tabs.details')}</TabsTrigger>
         <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
         {!isHourlyType ? (
@@ -2230,6 +2159,14 @@ export function CollaboratorFormScreen({
         {!isCreateMode ? (
           <TabsTrigger value="salary">{t('tabs.salary')}</TabsTrigger>
         ) : null}
+        {!isCreateMode ? (
+          <TabsTrigger value="paymentHistory">
+            {t('tabs.paymentHistory')}
+          </TabsTrigger>
+        ) : null}
+        {!isCreateMode ? (
+          <TabsTrigger value="invoices">{t('tabs.invoices')}</TabsTrigger>
+        ) : null}
       </TabsList>
       <TabsContent value="details" className="mt-0 space-y-4 px-4 pt-2">
         {profileContent}
@@ -2447,6 +2384,34 @@ export function CollaboratorFormScreen({
           )}
         </TabsContent>
       ) : null}
+      {!isCreateMode ? (
+        <TabsContent value="paymentHistory" className="mt-0 px-4 pt-2">
+          {collaborator ? (
+            <CollaboratorPaymentHistoryTab
+              collaboratorId={collaborator.id}
+              disabled={!access.isDirector}
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('sections.costsSaveBefore')}
+            </p>
+          )}
+        </TabsContent>
+      ) : null}
+      {!isCreateMode ? (
+        <TabsContent value="invoices" className="mt-0 px-4 pt-2">
+          {collaborator ? (
+            <CollaboratorInvoicesTab
+              collaboratorId={collaborator.id}
+              disabled={!access.isDirector}
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('sections.costsSaveBefore')}
+            </p>
+          )}
+        </TabsContent>
+      ) : null}
     </Tabs>
   ) : (
     <div className="space-y-4 px-4">
@@ -2488,7 +2453,18 @@ export function CollaboratorFormScreen({
             setPersonSheetOpen(nextOpen);
             if (!nextOpen) setPersonToEdit(null);
           }}
-          onSuccess={() => void refetchCollaborator()}
+          onSuccess={(person) => {
+            if (personSheetModeRef.current === 'create' && person) {
+              setForm((current) => ({
+                ...current,
+                personId: String(person.id),
+                displayName: person.name,
+              }));
+            } else {
+              void refetchCollaborator();
+            }
+            personSheetModeRef.current = 'edit';
+          }}
         />
       </div>
     );