@hed-hog/operations 0.0.328 → 0.0.330

package/hedhog/frontend/app/_components/project-costs-section.tsx.ejs

@@ -93,6 +93,7 @@ import {
   updateProjectCost,
   type Currency,
 } from '../_lib/api';
+import { MASKED_VALUE } from '../_lib/hooks/use-values-visibility';
 import type {
   FullCostSummary,
   PaginatedResponse,
@@ -189,14 +190,23 @@ function costToForm(cost: ProjectCost): CostFormState {
 
 type Props = {
   projectId: number;
+  valuesVisible?: boolean;
 };
 
-export function ProjectCostsSection({ projectId }: Props) {
+export function ProjectCostsSection({
+  projectId,
+  valuesVisible = false,
+}: Props) {
   const t = useTranslations('operations.ProjectCostsSection');
   const commonT = useTranslations('operations.Common');
   const { request, showToastHandler, getSettingValue, currentLocaleCode } =
     useApp();
 
+  const fmtCurrency = (amount: number): string =>
+    valuesVisible
+      ? formatCurrency(amount, getSettingValue, currentLocaleCode)
+      : MASKED_VALUE;
+
   const queryClient = useQueryClient();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [editingCost, setEditingCost] = useState<ProjectCost | null>(null);
@@ -415,11 +425,7 @@ export function ProjectCostsSection({ projectId }: Props) {
               <p className="text-xs text-muted-foreground">
                 {t('grandTotal')}:{' '}
                 <span className="font-medium text-foreground">
-                  {formatCurrency(
-                    grandTotal,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
+                  {fmtCurrency(grandTotal)}
                 </span>
               </p>
             ) : null}
@@ -457,11 +463,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.budget_amount,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.budget_amount)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -472,11 +474,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.extra_cost_total,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.extra_cost_total)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -487,11 +485,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.total_project_cost,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.total_project_cost)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -514,11 +508,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                   fullSummary.remaining_budget < 0 ? 'text-destructive' : ''
                 )}
               >
-                {formatCurrency(
-                  fullSummary.remaining_budget,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.remaining_budget)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -552,11 +542,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.realized_total,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.realized_total)}
               </p>
             </div>
           </div>
@@ -616,11 +602,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                           {entry.category_name}
                         </span>
                         <span className="ml-auto shrink-0 text-xs font-medium tabular-nums">
-                          {formatCurrency(
-                            entry.total,
-                            getSettingValue,
-                            currentLocaleCode
-                          )}
+                          {fmtCurrency(entry.total)}
                         </span>
                       </div>
                     ))}
@@ -846,11 +828,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                   </Badge>
                 </div>
                 <span className="text-xs font-medium text-muted-foreground">
-                  {formatCurrency(
-                    group.total_amount,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
+                  {fmtCurrency(group.total_amount)}
                 </span>
               </div>
 
@@ -920,20 +898,12 @@ export function ProjectCostsSection({ projectId }: Props) {
                         <TableCell className="text-right tabular-nums">
                           <span className="text-xs text-muted-foreground">
                             {Number(cost.quantity ?? 1)} ×{' '}
-                            {formatCurrency(
-                              Number(cost.amount),
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {fmtCurrency(Number(cost.amount))}
                           </span>
                         </TableCell>
                         <TableCell className="hidden text-right tabular-nums sm:table-cell">
                           <span className="font-medium">
-                            {formatCurrency(
-                              total,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {fmtCurrency(total)}
                           </span>
                         </TableCell>
                         <TableCell>
@@ -1026,25 +996,25 @@ export function ProjectCostsSection({ projectId }: Props) {
                     placeholder: t('fields.costTypeCodePlaceholder'),
                   },
                 ]}
-                mapSearchToCreateValues={(search) => ({ name: search })}
-                onCreate={async (values) => {
-                  const name = values.name?.trim() ?? '';
-                  const slug = name
-                    .toLowerCase()
-                    .replace(/\s+/g, '-')
-                    .replace(/[^a-z0-9-]/g, '');
-                  const code =
-                    values.code?.trim() ||
-                    name
-                      .toUpperCase()
-                      .replace(/\s+/g, '-')
-                      .replace(/[^A-Z0-9-]/g, '')
-                      .slice(0, 40);
-                  const created = await createProjectCostType(request, {
-                    name,
-                    code,
-                    slug,
-                  });
+                mapSearchToCreateValues={(search) => ({ name: search })}
+                onCreate={async (values) => {
+                  const name = values.name?.trim() ?? '';
+                  const slug = name
+                    .toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^a-z0-9-]/g, '');
+                  const code =
+                    values.code?.trim() ||
+                    name
+                      .toUpperCase()
+                      .replace(/\s+/g, '-')
+                      .replace(/[^A-Z0-9-]/g, '')
+                      .slice(0, 40);
+                  const created = await createProjectCostType(request, {
+                    name,
+                    code,
+                    slug,
+                  });
                   return (created as ProjectCostType) ?? null;
                 }}
                 initialSelectedLabel={editingCost?.cost_type?.name}
@@ -1084,17 +1054,17 @@ export function ProjectCostsSection({ projectId }: Props) {
                     required: true,
                   },
                 ]}
-                mapSearchToCreateValues={(search) => ({ name: search })}
-                onCreate={async (values) => {
-                  const name = values.name?.trim() ?? '';
-                  const slug = name
-                    .toLowerCase()
-                    .replace(/\s+/g, '-')
-                    .replace(/[^a-z0-9-]/g, '');
-                  const created = await createProjectCostCategory(request, {
-                    name,
-                    slug,
-                  });
+                mapSearchToCreateValues={(search) => ({ name: search })}
+                onCreate={async (values) => {
+                  const name = values.name?.trim() ?? '';
+                  const slug = name
+                    .toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^a-z0-9-]/g, '');
+                  const created = await createProjectCostCategory(request, {
+                    name,
+                    slug,
+                  });
                   return (created as ProjectCostCategory) ?? null;
                 }}
                 initialSelectedLabel={editingCost?.category?.name}

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

@@ -80,6 +80,8 @@ import {
   CheckCircle2,
   ChevronRight,
   ClipboardList,
+  Eye,
+  EyeOff,
   FileText,
   FolderKanban,
   Gauge,
@@ -125,6 +127,10 @@ import {
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import {
+  MASKED_VALUE,
+  useValuesVisibility,
+} from '../_lib/hooks/use-values-visibility';
 import type {
   OperationsProjectDetails,
   OperationsTaskOption,
@@ -1100,6 +1106,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const access = useOperationsAccess();
   const mentionItems = useMentionItems(request);
   const isLimitedView = !access.isDirector && !access.isSupervisor;
+  const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -2078,6 +2085,20 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             </div>
           </div>
           <div className="flex shrink-0 flex-wrap gap-1.5">
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={toggleValuesVisible}
+              title={commonT(
+                valuesVisible ? 'actions.hideValues' : 'actions.showValues'
+              )}
+            >
+              {valuesVisible ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </Button>
             {access.isDirector ? (
               <Button
                 size="sm"
@@ -2492,11 +2513,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     </dt>
                     <dd className="font-medium">
                       {project.budgetAmount
-                        ? formatCurrency(
-                            project.budgetAmount,
-                            getSettingValue,
-                            currentLocaleCode
-                          )
+                        ? valuesVisible
+                          ? formatCurrency(
+                              project.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
                         : commonT('labels.notAvailable')}
                     </dd>
                   </div>
@@ -2657,11 +2680,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                           </dt>
                           <dd className="font-medium">
                             {project.relatedContract.budgetAmount
-                              ? formatCurrency(
-                                  project.relatedContract.budgetAmount,
-                                  getSettingValue,
-                                  currentLocaleCode
-                                )
+                              ? valuesVisible
+                                ? formatCurrency(
+                                    project.relatedContract.budgetAmount,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )
+                                : MASKED_VALUE
                               : commonT('labels.notAvailable')}
                           </dd>
                         </div>
@@ -4121,7 +4146,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             description={t('sections.costsDescription')}
             className="rounded-2xl border bg-card p-4 shadow-sm"
           >
-            <ProjectCostsSection projectId={projectId} />
+            <ProjectCostsSection
+              projectId={projectId}
+              valuesVisible={valuesVisible}
+            />
           </SectionCard>
         </TabsContent>
       </Tabs>

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;
@@ -111,6 +111,7 @@ type ProjectFormState = {
   managerCollaboratorId: string;
   code: string;
   name: string;
+  clientPersonId: string;
   clientName: string;
   summary: string;
   status: string;
@@ -173,6 +174,7 @@ function buildEmptyForm(
     managerCollaboratorId: 'none',
     code: '',
     name: '',
+    clientPersonId: '',
     clientName: '',
     summary: '',
     status: 'planning',
@@ -192,13 +194,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,
@@ -232,6 +234,9 @@ function toFormState(
       : 'none',
     code: project.code ?? '',
     name: project.name ?? '',
+    clientPersonId: project.clientPersonId
+      ? String(project.clientPersonId)
+      : '',
     clientName: project.clientName ?? '',
     summary: project.summary ?? '',
     status: project.status ?? 'planning',
@@ -274,13 +279,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),
+      };
     }),
   };
 }
@@ -651,6 +656,7 @@ export function ProjectFormScreen({
         managerCollaboratorId: z.string(),
         code: z.string().trim().min(1, t('messages.requiredFields')),
         name: z.string().trim().min(1, t('messages.requiredFields')),
+        clientPersonId: z.string(),
         clientName: z.string().trim().min(1, t('messages.requiredFields')),
         summary: z.string(),
         status: z.string(),
@@ -965,6 +971,9 @@ export function ProjectFormScreen({
         values.managerCollaboratorId === 'none'
           ? null
           : parseNumberInput(values.managerCollaboratorId),
+      clientPersonId: values.clientPersonId
+        ? parseNumberInput(values.clientPersonId)
+        : null,
       code: values.code.trim(),
       name: values.name.trim(),
       clientName: trimToNull(values.clientName),
@@ -1148,12 +1157,20 @@ export function ProjectFormScreen({
                       <PersonPicker
                         label=""
                         entityLabel={t('fields.clientName')}
-                        value={null}
+                        value={
+                          formMethods.watch('clientPersonId')
+                            ? Number(formMethods.watch('clientPersonId'))
+                            : null
+                        }
                         initialSelectedLabel={field.value}
                         selectPlaceholder={t('placeholders.clientName')}
-                        onChange={(_, personName) =>
-                          field.onChange(personName ?? '')
-                        }
+                        onChange={(personId, personName) => {
+                          field.onChange(personName ?? '');
+                          formMethods.setValue(
+                            'clientPersonId',
+                            personId ? String(personId) : ''
+                          );
+                        }}
                         personTypeFilter="all"
                         createType="company"
                       />
@@ -1532,7 +1549,7 @@ export function ProjectFormScreen({
                           </div>
                         </label>
                         <div className="space-y-1">
-                          <DepartmentSelectWithCreate
+                          <DepartmentPicker
                             label=""
                             value={assignment.roleLabel}
                             options={projectRoleOptions}

package/hedhog/frontend/app/_components/system-user-picker.tsx.ejs

@@ -0,0 +1,198 @@
+'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';
+
+export type SystemUserPickerOption = {
+  id: number;
+  name: string;
+  photoId?: number | null;
+};
+
+export type SystemUserPickerProps = {
+  label: string;
+  value: string;
+  options: SystemUserPickerOption[];
+  placeholder: string;
+  emptyLabel: string;
+  onChange: (value: string) => void;
+  onCreate: (
+    name: string,
+    email: string,
+    password: string
+  ) => Promise<SystemUserPickerOption | null>;
+  createDescription?: string;
+};
+
+type UserListPayload = {
+  paginate: {
+    data: Array<{ id: number; name: string | null; photo_id?: number | null }>;
+    lastPage: number;
+    page: number;
+  };
+};
+
+const PAGE_SIZE = 10;
+
+function parseUserListResponse(payload: UserListPayload) {
+  const raw = payload?.paginate?.data ?? [];
+
+  return {
+    items: raw.map((user) => ({
+      id: user.id,
+      name: user.name || `#${user.id}`,
+      photoId: user.photo_id ?? null,
+    })),
+    hasMore: (payload?.paginate?.page ?? 1) < (payload?.paginate?.lastPage ?? 1),
+  };
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${photoId}`
+    : 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 SystemUserPicker({
+  label,
+  value,
+  options,
+  placeholder,
+  emptyLabel,
+  onChange,
+  onCreate,
+  createDescription,
+}: SystemUserPickerProps) {
+  const { request } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const t = useTranslations('operations.CollaboratorFormPage');
+
+  const selectedOption =
+    options.find((option) => String(option.id) === value) ?? null;
+
+  return (
+    <EntityPicker<SystemUserPickerOption>
+      label={label}
+      value={value}
+      onChange={(nextValue) => {
+        onChange(nextValue ? String(nextValue) : '');
+      }}
+      placeholder={emptyLabel}
+      emptySelectionLabel={emptyLabel}
+      searchPlaceholder={placeholder}
+      emptyStateDescription={commonT('states.emptyDescription')}
+      createActionLabel={t('actions.createUser')}
+      createTitle={t('actions.createUser')}
+      createDescription={createDescription ?? t('fields.createUserDescription')}
+      clearable
+      allowEmptySelection
+      options={options}
+      initialSelectedLabel={selectedOption?.name ?? ''}
+      loadOptions={async ({ page, pageSize, search }) => {
+        const params = new URLSearchParams();
+        params.set('page', String(page));
+        params.set('pageSize', String(pageSize || PAGE_SIZE));
+
+        const normalizedSearch = search.trim();
+        if (normalizedSearch) {
+          params.set('search', normalizedSearch);
+        }
+
+        const response = await request<UserListPayload>({
+          url: `/user?${params.toString()}`,
+          method: 'GET',
+        });
+
+        return parseUserListResponse(response.data);
+      }}
+      pageSize={PAGE_SIZE}
+      getOptionValue={(option) => option.id}
+      getOptionLabel={(option) => option.name}
+      getOptionDescription={(option) => `#${option.id}`}
+      renderOption={({ option }) => (
+        <div className="flex min-w-0 items-center gap-2">
+          <Avatar className="h-7 w-7 shrink-0 border border-border/60 bg-muted">
+            <AvatarImage
+              src={getUserPhotoUrl(option.photoId)}
+              alt={option.name}
+            />
+            <AvatarFallback className="bg-muted text-[11px] font-semibold text-foreground">
+              {getInitials(option.name)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <div className="truncate">{option.name}</div>
+            <div className="truncate text-xs text-muted-foreground">
+              #{option.id}
+            </div>
+          </div>
+        </div>
+      )}
+      renderSelectedValue={({ option, label: selectedLabel }) =>
+        option ? (
+          <span className="flex min-w-0 items-center gap-2 text-left">
+            <Avatar className="h-7 w-7 shrink-0 border border-border/60 bg-muted">
+              <AvatarImage
+                src={getUserPhotoUrl(option.photoId)}
+                alt={option.name}
+              />
+              <AvatarFallback className="bg-muted text-[11px] font-semibold text-foreground">
+                {getInitials(option.name)}
+              </AvatarFallback>
+            </Avatar>
+            <span className="min-w-0 truncate">
+              {selectedLabel} (#{option.id})
+            </span>
+          </span>
+        ) : (
+          selectedLabel
+        )
+      }
+      createFields={[
+        {
+          name: 'name',
+          label: t('fields.createUserName'),
+          placeholder: t('placeholders.createUserName'),
+          required: true,
+        },
+        {
+          name: 'email',
+          label: t('fields.createUserEmail'),
+          placeholder: t('placeholders.createUserEmail'),
+          type: 'email',
+          required: true,
+        },
+        {
+          name: 'password',
+          label: t('fields.createUserPassword'),
+          placeholder: t('placeholders.createUserPassword'),
+          type: 'password',
+          required: true,
+        },
+      ]}
+      onCreate={async (values) =>
+        onCreate(
+          values.name?.trim() ?? '',
+          values.email?.trim() ?? '',
+          values.password ?? ''
+        )
+      }
+    />
+  );
+}