@hed-hog/operations 0.0.304 → 0.0.306

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

@@ -69,11 +69,19 @@ import {
   formatWeekdayLabel,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import {
+  normalizePercentInput,
+  parseNumberInput,
+  trimToNull,
+} from '../_lib/utils/forms';
 import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
 import { PersonSelectWithCreate } from './person-select-with-create';
 import { StatusBadge } from './status-badge';
+import {
+  SystemUserSelectWithCreate,
+  type SystemUserOption,
+} from './system-user-select-with-create';
 
 const weekdays = [
   'monday',
@@ -96,11 +104,6 @@ const COLLABORATOR_LEVEL_OPTIONS = [
 
 type CollaboratorLevel = (typeof COLLABORATOR_LEVEL_OPTIONS)[number];
 
-type SystemUserOption = {
-  id: number;
-  name: string;
-};
-
 function normalizeCollaboratorLevel(
   value?: string | null
 ): CollaboratorLevel | '' {
@@ -171,6 +174,32 @@ function normalizeTimeValue(value?: string | null, fallback = '') {
   return fallback || String(value);
 }
 
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  const normalizedValue = String(value).trim();
+
+  if (!normalizedValue) {
+    return '';
+  }
+
+  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
+
+  if (directMatch?.[0]) {
+    return directMatch[0];
+  }
+
+  const parsedDate = new Date(normalizedValue);
+
+  if (Number.isNaN(parsedDate.getTime())) {
+    return normalizedValue;
+  }
+
+  return parsedDate.toISOString().slice(0, 10);
+}
+
 const EQUITY_ENABLED_TYPE_SLUGS = new Set([
   'socio',
   'acionista',
@@ -308,16 +337,19 @@ function toFormState(
         ? String(collaborator.weeklyCapacityHours)
         : '',
     status: collaborator.status ?? 'active',
-    joinedAt: collaborator.joinedAt ?? '',
-    leftAt: collaborator.leftAt ?? '',
+    joinedAt: normalizeDateInputValue(collaborator.joinedAt),
+    leftAt: normalizeDateInputValue(collaborator.leftAt),
     supervisorCollaboratorId: collaborator.supervisorId
       ? String(collaborator.supervisorId)
       : 'none',
     compensationAmount:
-      collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
-      collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
-        ? String(collaborator.relatedContracts[0].budgetAmount)
-        : '',
+      collaborator.compensationAmount !== null &&
+      collaborator.compensationAmount !== undefined
+        ? String(collaborator.compensationAmount)
+        : collaborator.relatedContracts?.[0]?.budgetAmount !== null &&
+            collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
+          ? String(collaborator.relatedContracts[0].budgetAmount)
+          : '',
     contractDescription: collaborator.relatedContracts?.[0]?.description ?? '',
     autoGenerateContractDraft: true,
     notes: collaborator.notes ?? '',
@@ -335,8 +367,12 @@ function toFormState(
         collaborator.equityParticipation?.votingPower !== undefined
           ? String(collaborator.equityParticipation.votingPower)
           : '',
-      startDate: collaborator.equityParticipation?.startDate ?? '',
-      endDate: collaborator.equityParticipation?.endDate ?? '',
+      startDate: normalizeDateInputValue(
+        collaborator.equityParticipation?.startDate
+      ),
+      endDate: normalizeDateInputValue(
+        collaborator.equityParticipation?.endDate
+      ),
       notes: collaborator.equityParticipation?.notes ?? '',
     },
     weeklySchedule: normalizeSchedule(collaborator.weeklySchedule),
@@ -496,166 +532,6 @@ function SupervisorAutocomplete({
   );
 }
 
-type SystemUserAutocompleteProps = {
-  label: string;
-  value: string;
-  options: SystemUserOption[];
-  placeholder: string;
-  emptyLabel: string;
-  onChange: (value: string) => void;
-};
-
-function SystemUserAutocomplete({
-  label,
-  value,
-  options,
-  placeholder,
-  emptyLabel,
-  onChange,
-}: SystemUserAutocompleteProps) {
-  const commonT = useTranslations('operations.Common');
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const [visibleCount, setVisibleCount] = useState(SUPERVISOR_PAGE_SIZE);
-
-  const filteredOptions = useMemo(() => {
-    const normalizedSearch = search.trim().toLowerCase();
-
-    if (!normalizedSearch) {
-      return options;
-    }
-
-    return options.filter((option) =>
-      [option.name, `#${option.id}`]
-        .filter(Boolean)
-        .some((field) => String(field).toLowerCase().includes(normalizedSearch))
-    );
-  }, [options, search]);
-
-  const selectedOption =
-    options.find((option) => String(option.id) === value) ??
-    (value
-      ? {
-          id: Number(value),
-          name: `#${value}`,
-        }
-      : null);
-  const visibleOptions = filteredOptions.slice(0, visibleCount);
-
-  return (
-    <div className="grid gap-2">
-      <Label>{label}</Label>
-
-      <Popover
-        open={open}
-        onOpenChange={(nextOpen) => {
-          setOpen(nextOpen);
-          setVisibleCount(SUPERVISOR_PAGE_SIZE);
-
-          if (!nextOpen) {
-            setSearch('');
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <Button
-            type="button"
-            variant="outline"
-            role="combobox"
-            className="w-full justify-between overflow-hidden"
-          >
-            <span className="truncate text-left">
-              {selectedOption
-                ? `${selectedOption.name} (#${selectedOption.id})`
-                : emptyLabel}
-            </span>
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="p-0"
-          style={{ width: 'var(--radix-popover-trigger-width)' }}
-        >
-          <Command shouldFilter={false}>
-            <CommandInput
-              placeholder={placeholder}
-              value={search}
-              onValueChange={(nextValue) => {
-                setSearch(nextValue);
-                setVisibleCount(SUPERVISOR_PAGE_SIZE);
-              }}
-            />
-            <CommandList>
-              <CommandEmpty>
-                <div className="p-2 text-sm text-muted-foreground">
-                  {commonT('states.emptyDescription')}
-                </div>
-              </CommandEmpty>
-
-              <CommandGroup>
-                <CommandItem
-                  value="none"
-                  onSelect={() => {
-                    onChange('');
-                    setOpen(false);
-                  }}
-                >
-                  {!value ? (
-                    <Check className="mr-2 h-4 w-4" />
-                  ) : (
-                    <span className="mr-2 h-4 w-4" />
-                  )}
-                  {emptyLabel}
-                </CommandItem>
-
-                {visibleOptions.map((option) => (
-                  <CommandItem
-                    key={option.id}
-                    value={`${option.name} #${option.id}`}
-                    onSelect={() => {
-                      onChange(String(option.id));
-                      setOpen(false);
-                    }}
-                  >
-                    {String(option.id) === value ? (
-                      <Check className="mr-2 h-4 w-4" />
-                    ) : (
-                      <span className="mr-2 h-4 w-4" />
-                    )}
-                    <div className="min-w-0">
-                      <div className="truncate">{option.name}</div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        #{option.id}
-                      </div>
-                    </div>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-
-              {filteredOptions.length > visibleCount ? (
-                <div className="border-t p-2">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="w-full"
-                    onClick={() =>
-                      setVisibleCount(
-                        (current) => current + SUPERVISOR_PAGE_SIZE
-                      )
-                    }
-                  >
-                    {commonT('actions.loadMore')}
-                  </Button>
-                </div>
-              ) : null}
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
-
 type CollaboratorFormScreenProps = {
   collaboratorId?: number;
   onSaved?: (
@@ -714,26 +590,28 @@ export function CollaboratorFormScreen({
       ),
   });
 
-  const { data: systemUsers = [] } = useQuery<SystemUserOption[]>({
+  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<
-        SystemUserOption[] | { data?: SystemUserOption[] }
-      >({
-        url: '/person/owner-options',
+      const response = await request<{
+        paginate: { data: Array<{ id: number; name: string | null }> };
+      }>({
+        url: '/user?pageSize=100',
         method: 'GET',
       });
 
-      const options = Array.isArray(response.data)
-        ? response.data
-        : response.data?.data || [];
+      const raw = response.data?.paginate?.data ?? [];
+      const options: SystemUserOption[] = raw.map((u) => ({
+        id: u.id,
+        name: u.name || `#${u.id}`,
+      }));
 
-      return [...options].sort((left, right) =>
-        left.name.localeCompare(right.name)
-      );
+      return options.sort((left, right) => left.name.localeCompare(right.name));
     },
   });
 
@@ -823,19 +701,66 @@ export function CollaboratorFormScreen({
     }));
   }, [collaboratorId, collaboratorTypes, form.collaboratorTypeId]);
 
-  const selectedCollaboratorType = useMemo(
-    () =>
-      collaboratorTypes.find(
+  const selectedCollaboratorType = useMemo(() => {
+    const availableTypes = [...collaboratorTypes];
+
+    if (
+      collaborator?.collaboratorTypeId &&
+      collaborator.collaboratorType &&
+      !availableTypes.some(
+        (item) => item.id === collaborator.collaboratorTypeId
+      )
+    ) {
+      availableTypes.push({
+        id: collaborator.collaboratorTypeId,
+        slug: collaborator.collaboratorTypeSlug ?? '',
+        name: collaborator.collaboratorType,
+        status: 'active',
+      });
+    }
+
+    return (
+      availableTypes.find(
         (item) => String(item.id) === String(form.collaboratorTypeId)
-      ) ?? null,
-    [collaboratorTypes, form.collaboratorTypeId]
-  );
+      ) ?? null
+    );
+  }, [collaborator, collaboratorTypes, form.collaboratorTypeId]);
+
+  const supervisorOptions = useMemo(() => {
+    const options = new Map<number, OperationsCollaborator>();
+
+    for (const item of collaborators) {
+      if (item.id !== collaboratorId) {
+        options.set(item.id, item);
+      }
+    }
+
+    if (
+      collaborator?.supervisorId &&
+      collaborator.supervisorName &&
+      collaborator.supervisorId !== collaboratorId &&
+      !options.has(collaborator.supervisorId)
+    ) {
+      options.set(collaborator.supervisorId, {
+        id: collaborator.supervisorId,
+        code: '',
+        displayName: collaborator.supervisorName,
+        department: null,
+        title: null,
+        status: 'active',
+      });
+    }
+
+    return Array.from(options.values()).sort((left, right) =>
+      left.displayName.localeCompare(right.displayName)
+    );
+  }, [collaborator, collaboratorId, collaborators]);
 
   const shouldShowEquitySection =
     !isCreateMode &&
     Boolean(
       selectedCollaboratorType?.slug &&
-        EQUITY_ENABLED_TYPE_SLUGS.has(selectedCollaboratorType.slug)
+      EQUITY_ENABLED_TYPE_SLUGS.has(selectedCollaboratorType.slug)
     );
 
   const getCollaboratorTypeLabel = (
@@ -958,6 +883,29 @@ export function CollaboratorFormScreen({
     }
   };
 
+  const createSystemUser = async (
+    name: string,
+    email: string,
+    password: string
+  ): Promise<SystemUserOption | null> => {
+    try {
+      const response = await request<{ id: number; name: string }>({
+        url: '/user',
+        method: 'POST',
+        data: { name, email, password },
+      });
+      await refetchSystemUsers();
+      showToastHandler?.('success', t('messages.createUserSuccess'));
+      return { id: response.data.id, name: response.data.name };
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getOperationsErrorMessage(error, t('messages.createUserError'))
+      );
+      return null;
+    }
+  };
+
   const updateScheduleDay = (
     weekday: string,
     patch: Partial<CollaboratorFormState['weeklySchedule'][number]>
@@ -994,6 +942,7 @@ export function CollaboratorFormScreen({
   const onSubmit = async () => {
     const userId = parseNumberInput(form.userId);
     const personId = parseNumberInput(form.personId);
+    const compensationAmount = parseNumberInput(form.compensationAmount);
 
     if (!personId) {
       showToastHandler?.('error', t('messages.personRequired'));
@@ -1028,7 +977,8 @@ export function CollaboratorFormScreen({
         form.supervisorCollaboratorId === 'none'
           ? null
           : parseNumberInput(form.supervisorCollaboratorId),
-      compensationAmount: parseNumberInput(form.compensationAmount),
+      compensationAmount:
+        compensationAmount !== null ? compensationAmount : null,
       contractDescription: trimToNull(form.contractDescription),
       autoGenerateContractDraft: form.autoGenerateContractDraft,
       notes: trimToNull(form.notes),
@@ -1073,7 +1023,7 @@ export function CollaboratorFormScreen({
       setForm(toFormState(response));
 
       await Promise.all([
-        refetchCollaborator(),
+        collaboratorId ? refetchCollaborator() : Promise.resolve(),
         refetchCollaboratorTypes(),
         refetchDepartments(),
         refetchCollaborators(),
@@ -1229,7 +1179,7 @@ export function CollaboratorFormScreen({
             label={t('fields.person')}
             entityLabel={t('fields.personEntityLabel')}
             value={form.personId ? Number(form.personId) : null}
-            initialSelectedLabel={form.displayName}
+            initialSelectedLabel={collaborator?.personName ?? form.displayName}
             selectPlaceholder={t('placeholders.person')}
             onChange={(personId, personName) =>
               setForm((current) => ({
@@ -1241,7 +1191,7 @@ export function CollaboratorFormScreen({
           />
         </div>
         <div className="space-y-2 md:col-span-2 xl:col-span-2">
-          <SystemUserAutocomplete
+          <SystemUserSelectWithCreate
             label={t('fields.userIdOptional')}
             value={form.userId}
             options={systemUsers}
@@ -1253,6 +1203,7 @@ export function CollaboratorFormScreen({
                 userId: value,
               }))
             }
+            onCreate={createSystemUser}
           />
           <p className="text-xs text-muted-foreground">
             {t('fields.userIdDescription')}
@@ -1467,11 +1418,15 @@ export function CollaboratorFormScreen({
               </label>
               <InputMoney
                 step="0.01"
-                value={form.compensationAmount}
-                onChange={(event) =>
+                value={
+                  form.compensationAmount === ''
+                    ? ''
+                    : Number(form.compensationAmount)
+                }
+                onValueChange={(value) =>
                   setForm((current) => ({
                     ...current,
-                    compensationAmount: event.target.value,
+                    compensationAmount: value !== null ? String(value) : '',
                   }))
                 }
               />
@@ -1534,10 +1489,8 @@ export function CollaboratorFormScreen({
         <div className="space-y-2">
           <Label>{t('fields.equityPercentage')}</Label>
           <Input
-            type="number"
-            min="0"
-            max="100"
-            step="0.0001"
+            type="text"
+            inputMode="decimal"
             placeholder={t('placeholders.equityPercentage')}
             value={form.equityParticipation.percentage}
             onChange={(event) =>
@@ -1545,7 +1498,7 @@ export function CollaboratorFormScreen({
                 ...current,
                 equityParticipation: {
                   ...current.equityParticipation,
-                  percentage: event.target.value,
+                  percentage: normalizePercentInput(event.target.value),
                 },
               }))
             }
@@ -1554,10 +1507,8 @@ export function CollaboratorFormScreen({
         <div className="space-y-2">
           <Label>{t('fields.votingPower')}</Label>
           <Input
-            type="number"
-            min="0"
-            max="100"
-            step="0.0001"
+            type="text"
+            inputMode="decimal"
             placeholder={t('placeholders.votingPower')}
             value={form.equityParticipation.votingPower}
             onChange={(event) =>
@@ -1565,7 +1516,7 @@ export function CollaboratorFormScreen({
                 ...current,
                 equityParticipation: {
                   ...current.equityParticipation,
-                  votingPower: event.target.value,
+                  votingPower: normalizePercentInput(event.target.value),
                 },
               }))
             }
@@ -1637,7 +1588,7 @@ export function CollaboratorFormScreen({
       <SupervisorAutocomplete
         label={commonT('labels.supervisor')}
         value={form.supervisorCollaboratorId}
-        options={collaborators.filter((item) => item.id !== collaboratorId)}
+        options={supervisorOptions}
         placeholder={t('placeholders.supervisor')}
         emptyLabel={commonT('labels.notAssigned')}
         onChange={(value) =>
@@ -1683,11 +1634,15 @@ export function CollaboratorFormScreen({
           </label>
           <InputMoney
             step="0.01"
-            value={form.compensationAmount}
-            onChange={(event) =>
+            value={
+              form.compensationAmount === ''
+                ? ''
+                : Number(form.compensationAmount)
+            }
+            onValueChange={(value) =>
               setForm((current) => ({
                 ...current,
-                compensationAmount: event.target.value,
+                compensationAmount: value !== null ? String(value) : '',
               }))
             }
           />