@hed-hog/operations 0.0.330 → 0.0.331

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';
@@ -117,10 +117,6 @@ 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 +247,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 +294,6 @@ function defaultSchedule(): CollaboratorFormState['weeklySchedule'] {
 
 function buildEmptyForm(): CollaboratorFormState {
   return {
-    userId: '',
     personId: '',
     displayName: '',
     collaboratorTypeId: '',
@@ -358,7 +352,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 +630,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 +687,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 +743,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 +766,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 +993,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 +1027,6 @@ export function CollaboratorFormScreen({
   };
 
   const onSubmit = async () => {
-    const userId = parseNumberInput(form.userId);
     const personId = parseNumberInput(form.personId);
     const compensationAmount = isHourlyType
       ? null
@@ -1103,7 +1048,6 @@ export function CollaboratorFormScreen({
     }
 
     const payload = {
-      userId: userId ?? undefined,
       personId: personId ?? undefined,
       displayName: trimToNull(form.displayName),
       collaboratorTypeId,
@@ -1380,6 +1324,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 +1337,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 +2057,7 @@ export function CollaboratorFormScreen({
     </div>
   );
 
-  const salaryChartData = useMemo(() => {
+  const salaryChartData = (() => {
     if (!compensationHistory.length) return [];
 
     const sorted = [...compensationHistory].sort(
@@ -2178,7 +2107,7 @@ export function CollaboratorFormScreen({
       },
       ...projectionPoints,
     ];
-  }, [compensationHistory]);
+  })();
 
   const costsSection = (
     <Accordion
@@ -2488,7 +2417,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>
     );

package/hedhog/frontend/app/_components/collaborator-picker.tsx.ejs

@@ -0,0 +1,158 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import type { Dispatch, SetStateAction } from 'react';
+
+export type CollaboratorPickerOption = {
+  id: number;
+  displayName: string;
+  userPhotoId?: number | null;
+  personAvatarId?: number | null;
+  code?: string | null;
+  department?: string | null;
+};
+
+export type CollaboratorPickerProps = {
+  label?: string;
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  setFormData: Dispatch<SetStateAction<any>>;
+};
+
+type CollaboratorListPayload = {
+  data: CollaboratorPickerOption[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+};
+
+const PAGE_SIZE = 20;
+
+function getCollaboratorPhotoUrl(option: CollaboratorPickerOption) {
+  // Priority: userPhotoId > personAvatarId
+  if (typeof option.userPhotoId === 'number' && option.userPhotoId > 0) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${option.userPhotoId}`;
+  }
+  if (typeof option.personAvatarId === 'number' && option.personAvatarId > 0) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${option.personAvatarId}`;
+  }
+  return undefined;
+}
+
+function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return '??';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
+export function CollaboratorPicker({
+  label,
+  value,
+  placeholder,
+  onChange,
+  setFormData,
+}: CollaboratorPickerProps) {
+  const { request } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const taskT = useTranslations('operations.ProjectDetailsPage');
+
+  return (
+    <EntityPicker<CollaboratorPickerOption>
+      label={label}
+      value={value || ''}
+      onChange={(nextValue) => {
+        const normalizedValue = nextValue ? String(nextValue) : '';
+        onChange(normalizedValue);
+        setFormData((prev: any) => ({
+          ...prev,
+          assigneeCollaboratorId: normalizedValue,
+        }));
+      }}
+      placeholder={commonT('labels.notAssigned')}
+      emptySelectionLabel={commonT('labels.notAssigned')}
+      searchPlaceholder={placeholder}
+      emptyStateDescription={commonT('states.emptyDescription')}
+      noResultsLabel={commonT('states.emptyDescription')}
+      loadingLabel={commonT('states.loading')}
+      clearable
+      allowEmptySelection
+      valueType="string"
+      showCreateButton={false}
+      getOptionValue={(collab) => String(collab.id)}
+      getOptionLabel={(collab) => collab.displayName}
+      getOptionDescription={(collab) =>
+        [collab.code, collab.department].filter(Boolean).join(' • ') || undefined
+      }
+      renderOption={({ option }) => (
+        <div className="flex min-w-0 items-center gap-2.5">
+          <Avatar className="h-7 w-7 shrink-0 rounded-full">
+            <AvatarImage src={getCollaboratorPhotoUrl(option)} />
+            <AvatarFallback className="rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
+              {getInitials(option.displayName)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm font-medium">{option.displayName}</div>
+            {option.code || option.department ? (
+              <div className="truncate text-xs text-muted-foreground">
+                {[option.code, option.department].filter(Boolean).join(' • ')}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+      renderSelectedValue={({ option, label: fallbackLabel }) => {
+        if (!option) {
+          return fallbackLabel;
+        }
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <Avatar className="h-5 w-5 shrink-0 rounded-full">
+              <AvatarImage src={getCollaboratorPhotoUrl(option)} />
+              <AvatarFallback className="rounded-full bg-muted text-[9px] font-semibold text-muted-foreground">
+                {getInitials(option.displayName)}
+              </AvatarFallback>
+            </Avatar>
+            <span className="truncate">{option.displayName}</span>
+          </div>
+        );
+      }}
+      loadOptions={async ({ page, pageSize, search }) => {
+        const params = new URLSearchParams();
+        params.set('page', String(page));
+        params.set('pageSize', String(pageSize || PAGE_SIZE));
+        params.set('sortField', 'displayName');
+        params.set('sortOrder', 'asc');
+
+        if (search.trim()) {
+          params.set('search', search.trim());
+        }
+
+        const response = await request<CollaboratorListPayload>({
+          url: `/operations/collaborators?${params.toString()}`,
+          method: 'GET',
+        });
+
+        const payload = response?.data;
+
+        return {
+          items: (payload?.data ?? []) as CollaboratorPickerOption[],
+          hasMore: (payload?.page ?? 1) < (payload?.lastPage ?? 1),
+        };
+      }}
+    />
+  );
+}