@hed-hog/operations 0.0.338 → 0.0.349

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

@@ -18,6 +18,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/ui/command';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -49,12 +50,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/components/ui/tabs';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import {
   Tooltip,
@@ -100,12 +96,37 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { ContractFormScreen } from './contract-form-screen';
-import { DepartmentPicker } from './department-picker';
 import { OperationsHeader } from './operations-header';
 import { ProjectFileAttachments } from './project-file-attachments';
 
 const OPTION_PAGE_SIZE = 12;
 
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : undefined;
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${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('');
+}
+
 type TeamAssignmentState = {
   collaboratorId: number;
   selected: boolean;
@@ -140,6 +161,27 @@ type ProjectFormState = {
 
 type ProjectFormValues = ProjectFormState;
 
+type ManagerOption = {
+  id: number;
+  title: string;
+  description: string;
+  avatarUrl: string | null;
+};
+
+function toManagerOption(collaborator: OperationsCollaborator): ManagerOption {
+  return {
+    id: collaborator.id,
+    title: collaborator.displayName,
+    description: [collaborator.department, collaborator.title]
+      .filter(Boolean)
+      .join(' • '),
+    avatarUrl:
+      getUserPhotoUrl(collaborator.userPhotoId) ??
+      getPersonAvatarUrl(collaborator.personAvatarId) ??
+      null,
+  };
+}
+
 function generateProjectCode(name: string): string {
   const words = name.trim().split(/\s+/).filter(Boolean);
   if (words.length === 0) return '';
@@ -645,6 +687,7 @@ export function ProjectFormScreen({
   const t = useTranslations('operations.ProjectFormPage');
   const commonT = useTranslations('operations.Common');
   const contractT = useTranslations('operations.ContractFormPage');
+  const collaboratorFormT = useTranslations('operations.CollaboratorFormPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const router = useRouter();
@@ -655,6 +698,8 @@ export function ProjectFormScreen({
   const isSheetMode = Boolean(onCancel);
   const isCreateMode = !projectId;
   const [codeAutoMode, setCodeAutoMode] = useState(isCreateMode);
+  const [createdManagerCollaborators, setCreatedManagerCollaborators] =
+    useState<OperationsCollaborator[]>([]);
 
   const projectFormSchema = useMemo(
     () =>
@@ -746,6 +791,39 @@ export function ProjectFormScreen({
     [rawCollaborators]
   );
 
+  const createManagerCollaborator = async (
+    values: Record<string, string>
+  ): Promise<ManagerOption | null> => {
+    const displayName = values.displayName?.trim() ?? '';
+    const weeklyCapacityHours = parseNumberInput(
+      values.weeklyCapacityHours ?? ''
+    );
+
+    if (!displayName) {
+      return null;
+    }
+
+    const created = await mutateOperations<OperationsCollaborator>(
+      request,
+      '/operations/collaborators',
+      'POST',
+      {
+        displayName,
+        weeklyCapacityHours,
+        status: 'active',
+        autoGenerateContractDraft: false,
+      }
+    );
+
+    setCreatedManagerCollaborators((current) => {
+      const next = current.filter((item) => item.id !== created.id);
+      next.unshift(created);
+      return next;
+    });
+
+    return toManagerOption(created);
+  };
+
   const { data: contracts = [], refetch: refetchContracts } = useQuery<
     OperationsContract[]
   >({
@@ -819,6 +897,10 @@ export function ProjectFormScreen({
       byId.set(collaborator.id, collaborator);
     }
 
+    for (const collaborator of createdManagerCollaborators) {
+      byId.set(collaborator.id, collaborator);
+    }
+
     if (
       project?.managerCollaboratorId &&
       !byId.has(project.managerCollaboratorId)
@@ -847,7 +929,7 @@ export function ProjectFormScreen({
     }
 
     return Array.from(byId.values());
-  }, [collaborators, project]);
+  }, [collaborators, createdManagerCollaborators, project]);
 
   const availableContracts = useMemo(() => {
     if (!project?.relatedContract) {
@@ -873,18 +955,9 @@ export function ProjectFormScreen({
 
   const managerOptions = useMemo(
     () =>
-      availableCollaborators.map((collaborator) => ({
-        id: collaborator.id,
-        title: collaborator.displayName,
-        description: [collaborator.department, collaborator.title]
-          .filter(Boolean)
-          .join(' • '),
-        avatarUrl:
-          typeof collaborator.personAvatarId === 'number' &&
-          collaborator.personAvatarId > 0
-            ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${collaborator.personAvatarId}`
-            : null,
-      })),
+      availableCollaborators.map((collaborator) =>
+        toManagerOption(collaborator)
+      ),
     [availableCollaborators]
   );
 
@@ -1176,6 +1249,9 @@ export function ProjectFormScreen({
                             : null
                         }
                         initialSelectedLabel={field.value}
+                        initialSelectedAvatarId={
+                          project?.clientAvatarId ?? null
+                        }
                         selectPlaceholder={t('placeholders.clientName')}
                         onChange={(personId, personName) => {
                           field.onChange(personName ?? '');
@@ -1267,17 +1343,97 @@ export function ProjectFormScreen({
           <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-5">
             <div className="min-w-0 space-y-2">
               <FieldLabel label={commonT('labels.manager')} />
-              <SearchableSelect
-                label=""
-                value={form.managerCollaboratorId}
+              <EntityPicker
+                value={
+                  form.managerCollaboratorId === 'none'
+                    ? null
+                    : Number(form.managerCollaboratorId)
+                }
                 options={managerOptions}
+                getOptionValue={(option) => option.id}
+                getOptionLabel={(option) => option.title}
+                getOptionDescription={(option) =>
+                  option.description || undefined
+                }
+                renderOption={({ option }) => (
+                  <div className="flex min-w-0 items-center gap-2.5">
+                    <Avatar className="size-6 shrink-0">
+                      <AvatarImage
+                        src={option.avatarUrl ?? undefined}
+                        alt={option.title}
+                      />
+                      <AvatarFallback className="text-[10px]">
+                        {getInitials(option.title)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0">
+                      <div className="truncate text-sm">{option.title}</div>
+                      {option.description ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {option.description}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                )}
+                renderSelectedValue={({ option, label }) =>
+                  option ? (
+                    <div className="flex min-w-0 items-center gap-2">
+                      <Avatar className="size-5 shrink-0">
+                        <AvatarImage
+                          src={option.avatarUrl ?? undefined}
+                          alt={option.title}
+                        />
+                        <AvatarFallback className="text-[10px]">
+                          {getInitials(option.title)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">{option.title}</span>
+                    </div>
+                  ) : (
+                    <span className="text-muted-foreground">{label}</span>
+                  )
+                }
                 placeholder={commonT('labels.notAssigned')}
                 searchPlaceholder={t('placeholders.managerSearch')}
-                emptyLabel={commonT('labels.notAssigned')}
+                emptySelectionLabel={commonT('labels.notAssigned')}
+                valueType="number"
+                clearable
+                allowEmptySelection
+                showCreateButton
+                entityLabel={commonT('labels.manager').toLowerCase()}
+                createActionLabel={`${commonT('actions.create')} ${commonT(
+                  'labels.manager'
+                ).toLowerCase()}`}
+                createTitle={`${commonT('actions.create')} ${commonT(
+                  'labels.manager'
+                ).toLowerCase()}`}
+                createDescription={collaboratorFormT(
+                  'sections.employmentInfoCreateDescription'
+                )}
+                createFields={[
+                  {
+                    name: 'displayName',
+                    label: collaboratorFormT('fields.displayName'),
+                    placeholder: collaboratorFormT('fields.displayName'),
+                    required: true,
+                  },
+                  {
+                    name: 'weeklyCapacityHours',
+                    label: collaboratorFormT('fields.weeklyCapacityHours'),
+                    placeholder: '40',
+                    type: 'number',
+                  },
+                ]}
+                mapSearchToCreateValues={(search) => ({
+                  displayName: search,
+                  weeklyCapacityHours: '40',
+                })}
+                onCreate={createManagerCollaborator}
                 onChange={(value) =>
                   setForm((current) => ({
                     ...current,
-                    managerCollaboratorId: value,
+                    managerCollaboratorId: value ? String(value) : 'none',
                   }))
                 }
               />
@@ -1487,9 +1643,7 @@ export function ProjectFormScreen({
                       }}
                       initialValues={{
                         code: form.code ? `PRJ-${form.code}` : '',
-                        name: form.name
-                          ? `${form.name} Service Agreement`
-                          : '',
+                        name: form.name ? `${form.name} Service Agreement` : '',
                         clientName: form.clientName,
                         contractCategory: 'client',
                         contractType: 'service_agreement',

package/hedhog/frontend/app/_components/task-detail-sheet.tsx.ejs

@@ -41,7 +41,11 @@ import type {
   OperationsTaskActivity,
   OperationsTaskComment,
 } from '../_lib/types';
-import { formatDate, formatDateTime, getStatusBadgeClass } from '../_lib/utils/format';
+import {
+  formatDate,
+  formatDateTime,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
 import {
   formatDurationMinutes,
   getElapsedDoingMinutes,
@@ -138,7 +142,10 @@ export type TaskCommentsSectionProps = {
   onChanged?: () => void;
 };
 
-export function TaskCommentsSection({ taskId, onChanged }: TaskCommentsSectionProps) {
+export function TaskCommentsSection({
+  taskId,
+  onChanged,
+}: TaskCommentsSectionProps) {
   const { request, showToastHandler, getSettingValue } = useApp();
   const ct = useTranslations('operations.ProjectDetailsPage.commentsSection');
   const editWindowMinutes = Number(
@@ -386,9 +393,13 @@ export function TaskCommentsSection({ taskId, onChanged }: TaskCommentsSectionPr
         />
         <div className="flex items-center justify-end gap-2">
           <span className="text-[10px] text-muted-foreground select-none">
-            <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">Ctrl</kbd>
+            <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">
+              Ctrl
+            </kbd>
             {' + '}
-            <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">↵</kbd>
+            <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">
+              ↵
+            </kbd>
           </span>
           <Button
             size="sm"
@@ -581,6 +592,7 @@ export function TaskDetailSheet({
   open,
   onOpenChange,
   statusLabel,
+  footer,
   defaultTab = 'comments',
 }: Props) {
   const detailT = useTranslations('operations.ProjectDetailsPage');
@@ -648,13 +660,15 @@ export function TaskDetailSheet({
                       <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                         {detailT('taskForm.descriptionLabel')}
                       </p>
-                      <p className="text-sm leading-relaxed">{task.description}</p>
+                      <CommentContent content={task.description} />
                     </div>
                   ) : null}
 
                   <Tabs
                     value={tab}
-                    onValueChange={(v) => setTab(v as 'comments' | 'activities')}
+                    onValueChange={(v) =>
+                      setTab(v as 'comments' | 'activities')
+                    }
                     className="flex flex-1 min-h-0 flex-col"
                   >
                     <div className="shrink-0 border-b px-5 py-2">
@@ -744,7 +758,11 @@ export function TaskDetailSheet({
                       <div className="flex items-center gap-1.5 text-sm">
                         <Calendar className="size-3.5 shrink-0 text-muted-foreground" />
                         <span>
-                          {formatDate(task.dueDate, getSettingValue, currentLocaleCode)}
+                          {formatDate(
+                            task.dueDate,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
                         </span>
                       </div>
                     </div>
@@ -788,6 +806,9 @@ export function TaskDetailSheet({
                   </div>
                 </aside>
               </div>
+              {footer ? (
+                <div className="shrink-0 border-t px-5 py-4">{footer}</div>
+              ) : null}
             </>
           ) : null}
         </SheetContent>

package/hedhog/frontend/app/_lib/api.ts.ejs

@@ -478,3 +478,154 @@ export function deleteTaskComment(
     'DELETE'
   );
 }
+
+// Collaborator Payments
+
+export type CollaboratorPayment = {
+  id: number;
+  collaboratorId: number;
+  amount: string;
+  paymentDate: string;
+  referenceMonth: string | null;
+  paymentMethod: string;
+  notes: string | null;
+  createdAt: string;
+};
+
+export function fetchCollaboratorPayments(
+  request: RequestFn,
+  collaboratorId: number
+) {
+  return fetchOperations<CollaboratorPayment[]>(
+    request,
+    `/operations/collaborators/${collaboratorId}/payment-history`
+  );
+}
+
+export function createCollaboratorPayment(
+  request: RequestFn,
+  collaboratorId: number,
+  data: {
+    amount: number;
+    paymentDate: string;
+    referenceMonth?: string | null;
+    paymentMethod?: string;
+    notes?: string | null;
+  }
+) {
+  return mutateOperations<CollaboratorPayment>(
+    request,
+    `/operations/collaborators/${collaboratorId}/payment-history`,
+    'POST',
+    data
+  );
+}
+
+export function updateCollaboratorPayment(
+  request: RequestFn,
+  collaboratorId: number,
+  paymentId: number,
+  data: Partial<{
+    amount: number;
+    paymentDate: string;
+    referenceMonth: string | null;
+    paymentMethod: string;
+    notes: string | null;
+  }>
+) {
+  return mutateOperations<CollaboratorPayment>(
+    request,
+    `/operations/collaborators/${collaboratorId}/payment-history/${paymentId}`,
+    'PATCH',
+    data
+  );
+}
+
+export function deleteCollaboratorPayment(
+  request: RequestFn,
+  collaboratorId: number,
+  paymentId: number
+) {
+  return mutateOperations<{ success: boolean }>(
+    request,
+    `/operations/collaborators/${collaboratorId}/payment-history/${paymentId}`,
+    'DELETE'
+  );
+}
+
+// Collaborator Invoices
+
+export type CollaboratorInvoice = {
+  id: number;
+  collaboratorId: number;
+  invoiceNumber: string | null;
+  amount: string;
+  issueDate: string;
+  dueDate: string | null;
+  status: string;
+  description: string | null;
+  createdAt: string;
+};
+
+export function fetchCollaboratorInvoices(
+  request: RequestFn,
+  collaboratorId: number
+) {
+  return fetchOperations<CollaboratorInvoice[]>(
+    request,
+    `/operations/collaborators/${collaboratorId}/invoices`
+  );
+}
+
+export function createCollaboratorInvoice(
+  request: RequestFn,
+  collaboratorId: number,
+  data: {
+    invoiceNumber?: string | null;
+    amount: number;
+    issueDate: string;
+    dueDate?: string | null;
+    status?: string;
+    description?: string | null;
+  }
+) {
+  return mutateOperations<CollaboratorInvoice>(
+    request,
+    `/operations/collaborators/${collaboratorId}/invoices`,
+    'POST',
+    data
+  );
+}
+
+export function updateCollaboratorInvoice(
+  request: RequestFn,
+  collaboratorId: number,
+  invoiceId: number,
+  data: Partial<{
+    invoiceNumber: string | null;
+    amount: number;
+    issueDate: string;
+    dueDate: string | null;
+    status: string;
+    description: string | null;
+  }>
+) {
+  return mutateOperations<CollaboratorInvoice>(
+    request,
+    `/operations/collaborators/${collaboratorId}/invoices/${invoiceId}`,
+    'PATCH',
+    data
+  );
+}
+
+export function deleteCollaboratorInvoice(
+  request: RequestFn,
+  collaboratorId: number,
+  invoiceId: number
+) {
+  return mutateOperations<{ success: boolean }>(
+    request,
+    `/operations/collaborators/${collaboratorId}/invoices/${invoiceId}`,
+    'DELETE'
+  );
+}

package/hedhog/frontend/app/_lib/types.ts.ejs

@@ -435,6 +435,7 @@ export type OperationsProject = {
   managerCollaboratorId?: number | null;
   clientPersonId?: number | null;
   clientAvatarId?: number | null;
+  clientUserPhotoId?: number | null;
   code: string;
   name: string;
   clientName?: string | null;

package/hedhog/frontend/app/_lib/utils/task-ui.ts.ejs

@@ -41,3 +41,21 @@ export function formatDurationMinutes(minutes?: number | null) {
   if (remainingMinutes <= 0) return `${hours}h`;
   return `${hours}h ${remainingMinutes}min`;
 }
+
+export function getTaskDescriptionPreview(value?: string | null) {
+  if (!value) return '';
+
+  return String(value)
+    .replace(/<br\s*\/?>(?=)/gi, ' ')
+    .replace(/<\/(p|div|li|ul|ol|h1|h2|h3|h4|h5|h6)>/gi, ' ')
+    .replace(/<li[^>]*>/gi, ' ')
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/&#39;/gi, "'")
+    .replace(/&quot;/gi, '"')
+    .replace(/\s+/g, ' ')
+    .trim();
+}