@hed-hog/operations 0.0.328 → 0.0.329

package/dist/controllers/operations-tasks.controller.d.ts

@@ -135,14 +135,14 @@ export declare class OperationsTasksController {
         created_at: Date;
     }[]>;
     addTaskFile(user: any, id: number, file: MulterFile): Promise<{
+        filename: string;
+        location: string;
+        id: number;
         path: string;
         size: number;
-        id: number;
-        filename: string;
         created_at: Date;
         updated_at: Date;
         provider_id: number;
-        location: string;
         mimetype_id: number;
     }>;
     removeTaskFile(user: any, id: number, fileRelationId: number): Promise<{

package/dist/operations.service.d.ts

@@ -1022,14 +1022,14 @@ export declare class OperationsService {
         created_at: Date;
     }[]>;
     addTaskFile(userId: number, taskId: number, file: MulterFile): Promise<{
+        filename: string;
+        location: string;
+        id: number;
         path: string;
         size: number;
-        id: number;
-        filename: string;
         created_at: Date;
         updated_at: Date;
         provider_id: number;
-        location: string;
         mimetype_id: number;
     }>;
     removeTaskFile(userId: number, taskId: number, fileRelationId: number): Promise<{

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

@@ -113,14 +113,14 @@ import {
 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 { DepartmentPicker } from './department-picker';
 import { OperationsHeader } from './operations-header';
 import { ProjectAssignmentsTab } from './project-assignments-tab';
 import { StatusBadge } from './status-badge';
 import {
-  SystemUserSelectWithCreate,
-  type SystemUserOption,
-} from './system-user-select-with-create';
+  SystemUserPicker,
+  type SystemUserPickerOption as SystemUserOption,
+} from './system-user-picker';
 
 const weekdays = [
   'monday',
@@ -1390,7 +1390,7 @@ export function CollaboratorFormScreen({
           />
         </div>
         <div className="space-y-2 md:col-span-2 xl:col-span-2">
-          <SystemUserSelectWithCreate
+          <SystemUserPicker
             label={t('fields.userIdOptional')}
             value={form.userId}
             options={systemUsers}
@@ -1435,7 +1435,7 @@ export function CollaboratorFormScreen({
           </div>
         ) : null}
         <div className="space-y-2 xl:col-span-1">
-          <DepartmentSelectWithCreate
+          <DepartmentPicker
             label={t('fields.department')}
             value={
               departmentOptions.find((d) => String(d.id) === form.departmentId)
@@ -1455,7 +1455,7 @@ export function CollaboratorFormScreen({
           />
         </div>
         <div className="space-y-2 xl:col-span-1">
-          <DepartmentSelectWithCreate
+          <DepartmentPicker
             label={t('fields.title')}
             value={form.title}
             options={titleOptions}

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+
+type DepartmentOption = {
+  id?: number | null;
+  name: string;
+  code?: string | null;
+  description?: string | null;
+};
+
+export type DepartmentPickerProps = {
+  label: string;
+  value?: string | null;
+  options: DepartmentOption[];
+  onChange: (department: DepartmentOption) => void;
+  onCreate?: (
+    departmentName: string
+  ) => Promise<DepartmentOption | null | void> | DepartmentOption | null | void;
+  selectPlaceholder: string;
+  createDescription?: string;
+  createPlaceholder?: string;
+  disabled?: boolean;
+};
+
+function normalizeDepartmentName(value?: string | null) {
+  return value?.trim() ?? '';
+}
+
+export function DepartmentPicker({
+  label,
+  value,
+  options,
+  onChange,
+  onCreate,
+  selectPlaceholder,
+  createDescription,
+  createPlaceholder,
+  disabled = false,
+}: DepartmentPickerProps) {
+  const commonT = useTranslations('operations.Common');
+  const normalizedValue = normalizeDepartmentName(value);
+
+  const normalizedOptions = useMemo(() => {
+    const values = new Map<string, DepartmentOption>();
+
+    for (const option of options) {
+      const normalizedName = normalizeDepartmentName(option.name);
+
+      if (!normalizedName) {
+        continue;
+      }
+
+      values.set(normalizedName.toLowerCase(), {
+        ...option,
+        name: normalizedName,
+      });
+    }
+
+    return Array.from(values.values()).sort((left, right) =>
+      left.name.localeCompare(right.name)
+    );
+  }, [options]);
+
+  return (
+    <EntityPicker<DepartmentOption>
+      label={label}
+      value={normalizedValue}
+      onChange={(_, option) => {
+        onChange(option ?? { id: null, name: '' });
+      }}
+      placeholder={selectPlaceholder}
+      searchPlaceholder={selectPlaceholder}
+      emptySelectionLabel={selectPlaceholder}
+      emptyStateDescription={commonT('states.emptyDescription')}
+      createActionLabel={`${commonT('actions.create')} ${label.toLowerCase()}`}
+      createTitle={`${commonT('actions.create')} ${label.toLowerCase()}`}
+      createDescription={createDescription || selectPlaceholder}
+      clearable
+      allowEmptySelection
+      disabled={disabled}
+      initialSelectedLabel={normalizedValue}
+      options={normalizedOptions}
+      getOptionValue={(option) => normalizeDepartmentName(option.name)}
+      getOptionLabel={(option) => option.name}
+      getOptionDescription={(option) =>
+        [option.code, option.description].filter(Boolean).join(' • ') ||
+        undefined
+      }
+      createFields={[
+        {
+          name: 'name',
+          label,
+          placeholder: createPlaceholder || label,
+          required: true,
+        },
+      ]}
+      onCreate={async (values) => {
+        const normalizedDepartment = normalizeDepartmentName(values.name);
+
+        if (!normalizedDepartment) {
+          return null;
+        }
+
+        const nextOption = onCreate
+          ? await onCreate(normalizedDepartment)
+          : {
+              id: null,
+              name: normalizedDepartment,
+            };
+
+        if (!nextOption?.name?.trim()) {
+          return null;
+        }
+
+        return {
+          ...nextOption,
+          name: normalizeDepartmentName(nextOption.name),
+        };
+      }}
+    />
+  );
+}

package/hedhog/frontend/app/_components/department-select-with-create.tsx.ejs

@@ -1,31 +1,8 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { ChevronsUpDown, Plus, X } from 'lucide-react';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { useTranslations } from 'next-intl';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo } from 'react';
 
 type DepartmentOption = {
   id?: number | null;
@@ -34,7 +11,7 @@ type DepartmentOption = {
   description?: string | null;
 };
 
-type DepartmentSelectWithCreateProps = {
+export type DepartmentSelectWithCreateProps = {
   label: string;
   value?: string | null;
   options: DepartmentOption[];
@@ -48,6 +25,10 @@ type DepartmentSelectWithCreateProps = {
   disabled?: boolean;
 };
 
+function normalizeDepartmentName(value?: string | null) {
+  return value?.trim() ?? '';
+}
+
 export function DepartmentSelectWithCreate({
   label,
   value,
@@ -60,22 +41,13 @@ export function DepartmentSelectWithCreate({
   disabled = false,
 }: DepartmentSelectWithCreateProps) {
   const commonT = useTranslations('operations.Common');
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const [createOpen, setCreateOpen] = useState(false);
-  const [newDepartment, setNewDepartment] = useState('');
-  const [isCreating, setIsCreating] = useState(false);
-  const [visibleCount, setVisibleCount] = useState(20);
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-
-  const normalizedValue = value?.trim() ?? '';
+  const normalizedValue = normalizeDepartmentName(value);
 
   const normalizedOptions = useMemo(() => {
     const values = new Map<string, DepartmentOption>();
 
     for (const option of options) {
-      const normalizedName = option.name.trim();
+      const normalizedName = normalizeDepartmentName(option.name);
 
       if (!normalizedName) {
         continue;
@@ -99,294 +71,61 @@ export function DepartmentSelectWithCreate({
     );
   }, [options, normalizedValue]);
 
-  const filteredOptions = useMemo(() => {
-    const normalizedSearch = search.trim().toLowerCase();
-
-    if (!normalizedSearch) {
-      return normalizedOptions;
-    }
-
-    return normalizedOptions.filter((option) =>
-      [option.name, option.code, option.description]
-        .filter(Boolean)
-        .some((field) => String(field).toLowerCase().includes(normalizedSearch))
-    );
-  }, [normalizedOptions, search]);
-
-  const visibleOptions = filteredOptions.slice(0, visibleCount);
-
-  const captureParentScrollPosition = (trigger: HTMLElement) => {
-    const parentSheetContent = trigger.closest(
-      '[data-radix-dialog-content]'
-    ) as HTMLElement | null;
-
-    if (!parentSheetContent) {
-      parentScrollContainerRef.current = null;
-      parentScrollTopRef.current = 0;
-      return;
-    }
-
-    parentScrollContainerRef.current = parentSheetContent;
-    parentScrollTopRef.current = parentSheetContent.scrollTop;
-  };
-
-  const restoreParentScrollPosition = () => {
-    const fallbackOpenDialog = (
-      Array.from(
-        document.querySelectorAll(
-          '[data-radix-dialog-content][data-state="open"]'
-        )
-      ) as HTMLElement[]
-    ).at(-1);
-
-    const container =
-      parentScrollContainerRef.current &&
-      document.body.contains(parentScrollContainerRef.current)
-        ? parentScrollContainerRef.current
-        : fallbackOpenDialog || null;
-
-    if (!container) {
-      return;
-    }
-
-    const restore = () => {
-      container.scrollTop = parentScrollTopRef.current;
-    };
-
-    requestAnimationFrame(restore);
-    setTimeout(restore, 0);
-    setTimeout(restore, 120);
-  };
-
-  const saveDepartment = async () => {
-    const normalizedDepartment = newDepartment.trim();
-
-    if (!normalizedDepartment || isCreating) {
-      return;
-    }
-
-    setIsCreating(true);
-
-    try {
-      const nextOption = onCreate
-        ? await onCreate(normalizedDepartment)
-        : {
-            id: null,
-            name: normalizedDepartment,
-          };
-
-      if (!nextOption?.name?.trim()) {
-        return;
-      }
-
-      onChange({
-        ...nextOption,
-        name: nextOption.name.trim(),
-      });
-      setNewDepartment('');
-      setSearch(nextOption.name.trim());
-      setCreateOpen(false);
-      setOpen(false);
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
   return (
-    <>
-      <div className="grid gap-2">
-        <Label>{label}</Label>
-
-        <div className="flex w-full min-w-0 items-center gap-2">
-          <Popover
-            open={!disabled && open}
-            onOpenChange={(nextOpen) => {
-              if (!disabled) {
-                setOpen(nextOpen);
-              }
-            }}
-          >
-            <PopoverTrigger asChild>
-              <Button
-                type="button"
-                variant="outline"
-                role="combobox"
-                disabled={disabled || isCreating}
-                className="h-10 flex-1 min-w-0 justify-between overflow-hidden"
-              >
-                <span className="truncate text-left">
-                  {normalizedValue || selectPlaceholder}
-                </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={selectPlaceholder}
-                  value={search}
-                  onValueChange={(value) => {
-                    setSearch(value);
-                    setVisibleCount(20);
-                  }}
-                />
-                <CommandList>
-                  <CommandEmpty>
-                    <div className="space-y-2 p-2 text-center">
-                      <p className="text-sm text-muted-foreground">
-                        {commonT('states.emptyDescription')}
-                      </p>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        className="w-full"
-                        onClick={(event) => {
-                          captureParentScrollPosition(event.currentTarget);
-                          setNewDepartment(search.trim());
-                          setOpen(false);
-                          setCreateOpen(true);
-                        }}
-                      >
-                        {commonT('actions.create')} {label.toLowerCase()}
-                      </Button>
-                    </div>
-                  </CommandEmpty>
-
-                  <CommandGroup>
-                    {visibleOptions.map((option) => (
-                      <CommandItem
-                        key={`${option.id ?? 'new'}-${option.name}`}
-                        value={`${option.name} ${option.code ?? ''} ${option.description ?? ''}`}
-                        onSelect={() => {
-                          onChange(option);
-                          setSearch(option.name);
-                          setOpen(false);
-                        }}
-                      >
-                        <div className="min-w-0">
-                          <div className="truncate">{option.name}</div>
-                          {option.code || option.description ? (
-                            <div className="truncate text-xs text-muted-foreground">
-                              {[option.code, option.description]
-                                .filter(Boolean)
-                                .join(' • ')}
-                            </div>
-                          ) : null}
-                        </div>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-
-                  {filteredOptions.length > visibleCount ? (
-                    <div className="border-t p-2">
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        className="w-full"
-                        onClick={() =>
-                          setVisibleCount((current) => current + 20)
-                        }
-                      >
-                        {commonT('actions.loadMore')}
-                      </Button>
-                    </div>
-                  ) : null}
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-
-          {normalizedValue ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="h-10 w-10 shrink-0"
-              disabled={disabled || isCreating}
-              onClick={() => {
-                onChange({ id: null, name: '' });
-                setSearch('');
-                setVisibleCount(20);
-                setOpen(false);
-              }}
-              aria-label={commonT('actions.cancel')}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          ) : null}
-
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="h-10 w-10 shrink-0"
-            disabled={disabled || isCreating}
-            onClick={(event) => {
-              captureParentScrollPosition(event.currentTarget);
-              setNewDepartment(normalizedValue);
-              setOpen(false);
-              setCreateOpen(true);
-            }}
-            aria-label={`${commonT('actions.create')} ${label.toLowerCase()}`}
-          >
-            <Plus className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      <Sheet
-        open={createOpen}
-        onOpenChange={(nextOpen) => {
-          setCreateOpen(nextOpen);
-          if (!nextOpen) {
-            setNewDepartment('');
-            restoreParentScrollPosition();
-          }
-        }}
-      >
-        <SheetContent
-          className="w-full overflow-y-auto sm:max-w-md px-2"
-          onCloseAutoFocus={(event) => event.preventDefault()}
-        >
-          <SheetHeader>
-            <SheetTitle>
-              {commonT('actions.create')} {label.toLowerCase()}
-            </SheetTitle>
-            <SheetDescription>
-              {createDescription || selectPlaceholder}
-            </SheetDescription>
-          </SheetHeader>
-
-          <div className="mt-6 space-y-4">
-            <div className="space-y-2">
-              <Label>{label}</Label>
-              <Input
-                value={newDepartment}
-                placeholder={createPlaceholder || label}
-                onChange={(event) => setNewDepartment(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter') {
-                    event.preventDefault();
-                    void saveDepartment();
-                  }
-                }}
-              />
-            </div>
-
-            <Button
-              type="button"
-              className="w-full"
-              disabled={!newDepartment.trim() || isCreating}
-              onClick={() => void saveDepartment()}
-            >
-              {commonT('actions.save')}
-            </Button>
-          </div>
-        </SheetContent>
-      </Sheet>
-    </>
+    <EntityPicker<DepartmentOption>
+      label={label}
+      value={normalizedValue}
+      onChange={(_, option) => {
+        onChange(option ?? { id: null, name: '' });
+      }}
+      placeholder={selectPlaceholder}
+      searchPlaceholder={selectPlaceholder}
+      emptySelectionLabel={selectPlaceholder}
+      emptyStateDescription={commonT('states.emptyDescription')}
+      createActionLabel={`${commonT('actions.create')} ${label.toLowerCase()}`}
+      createTitle={`${commonT('actions.create')} ${label.toLowerCase()}`}
+      createDescription={createDescription || selectPlaceholder}
+      clearable
+      allowEmptySelection
+      disabled={disabled}
+      options={normalizedOptions}
+      getOptionValue={(option) => option.id ?? option.name.trim()}
+      getOptionLabel={(option) => option.name}
+      getOptionDescription={(option) =>
+        [option.code, option.description].filter(Boolean).join(' • ') ||
+        undefined
+      }
+      createFields={[
+        {
+          name: 'name',
+          label,
+          placeholder: createPlaceholder || label,
+          required: true,
+        },
+      ]}
+      onCreate={async (values) => {
+        const normalizedDepartment = normalizeDepartmentName(values.name);
+
+        if (!normalizedDepartment) {
+          return null;
+        }
+
+        const nextOption = onCreate
+          ? await onCreate(normalizedDepartment)
+          : {
+              id: null,
+              name: normalizedDepartment,
+            };
+
+        if (!nextOption?.name?.trim()) {
+          return null;
+        }
+
+        return {
+          ...nextOption,
+          name: normalizeDepartmentName(nextOption.name),
+        };
+      }}
+    />
   );
 }

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

@@ -89,7 +89,7 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { ContractFormScreen } from './contract-form-screen';
-import { DepartmentSelectWithCreate } from './department-select-with-create';
+import { DepartmentPicker } from './department-picker';
 import { OperationsHeader } from './operations-header';
 
 const OPTION_PAGE_SIZE = 12;
@@ -192,13 +192,13 @@ function buildEmptyForm(
       projectRoleId: 'none',
       roleLabel: '',
       weeklyHours: '',
-      allocationPercent: '',
-      status: 'active',
-      startDate: new Date().toISOString().split('T')[0] ?? '',
-      endDate: '',
-    })),
-  };
-}
+      allocationPercent: '',
+      status: 'active',
+      startDate: new Date().toISOString().split('T')[0] ?? '',
+      endDate: '',
+    })),
+  };
+}
 
 function toFormState(
   project: OperationsProjectDetails,
@@ -274,13 +274,13 @@ function toFormState(
           assignment?.allocationPercent !== undefined
             ? String(assignment.allocationPercent)
             : '',
-        status: assignment?.status ?? 'active',
-        startDate:
-          normalizeDateInputValue(assignment?.startDate) ||
-          new Date().toISOString().split('T')[0] ||
-          '',
-        endDate: normalizeDateInputValue(assignment?.endDate),
-      };
+        status: assignment?.status ?? 'active',
+        startDate:
+          normalizeDateInputValue(assignment?.startDate) ||
+          new Date().toISOString().split('T')[0] ||
+          '',
+        endDate: normalizeDateInputValue(assignment?.endDate),
+      };
     }),
   };
 }
@@ -1532,7 +1532,7 @@ export function ProjectFormScreen({
                           </div>
                         </label>
                         <div className="space-y-1">
-                          <DepartmentSelectWithCreate
+                          <DepartmentPicker
                             label=""
                             value={assignment.roleLabel}
                             options={projectRoleOptions}