@hed-hog/operations 0.0.306 → 0.0.310

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

@@ -42,7 +42,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import {
   Tooltip,
@@ -78,7 +77,6 @@ import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaborator,
   OperationsContract,
-  OperationsContractTemplate,
   OperationsProjectDetails,
   OperationsProjectRole,
 } from '../_lib/types';
@@ -89,7 +87,6 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { ContractFormScreen } from './contract-form-screen';
-import { ContractTemplateFormScreen } from './contract-template-form-screen';
 import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
 import { PersonSelectWithCreate } from './person-select-with-create';
@@ -103,13 +100,11 @@ type TeamAssignmentState = {
   roleLabel: string;
   weeklyHours: string;
   allocationPercent: string;
-  isBillable: boolean;
   status: string;
 };
 
 type ProjectFormState = {
   contractId: string;
-  contractTemplateId: string;
   managerCollaboratorId: string;
   code: string;
   name: string;
@@ -126,7 +121,6 @@ type ProjectFormState = {
   contractCode: string;
   contractName: string;
   contractDescription: string;
-  autoGenerateContractDraft: boolean;
   teamAssignments: TeamAssignmentState[];
 };
 
@@ -163,7 +157,6 @@ function buildEmptyForm(
 ): ProjectFormState {
   return {
     contractId: 'none',
-    contractTemplateId: 'none',
     managerCollaboratorId: 'none',
     code: '',
     name: '',
@@ -180,7 +173,6 @@ function buildEmptyForm(
     contractCode: '',
     contractName: '',
     contractDescription: '',
-    autoGenerateContractDraft: true,
     teamAssignments: collaborators.map((collaborator) => ({
       collaboratorId: collaborator.id,
       selected: false,
@@ -188,7 +180,6 @@ function buildEmptyForm(
       roleLabel: '',
       weeklyHours: '',
       allocationPercent: '',
-      isBillable: true,
       status: 'active',
     })),
   };
@@ -221,7 +212,6 @@ function toFormState(
     contractId: project.relatedContract?.id
       ? String(project.relatedContract.id)
       : 'none',
-    contractTemplateId: 'none',
     managerCollaboratorId: project.managerCollaboratorId
       ? String(project.managerCollaboratorId)
       : 'none',
@@ -250,7 +240,6 @@ function toFormState(
     contractCode: project.relatedContract?.code ?? '',
     contractName: project.relatedContract?.name ?? '',
     contractDescription: project.relatedContract?.description ?? '',
-    autoGenerateContractDraft: true,
     teamAssignments: collaboratorOptions.map((collaborator) => {
       const assignment = assignments.get(collaborator.id);
       return {
@@ -270,7 +259,6 @@ function toFormState(
           assignment?.allocationPercent !== undefined
             ? String(assignment.allocationPercent)
             : '',
-        isBillable: assignment?.isBillable ?? true,
         status: assignment?.status ?? 'active',
       };
     }),
@@ -474,7 +462,6 @@ type ContractSelectWithCreateProps = {
     code?: string;
     name?: string;
     clientName?: string;
-    contractTemplateId?: string;
     contractCategory?: string;
     contractType?: string;
     signatureStatus?: string;
@@ -520,7 +507,9 @@ function ContractSelectWithCreate({
               description: [
                 contract.code,
                 contract.clientName,
-                formatEnumLabel(contract.contractType),
+                contractT.has(`options.contractTypes.${contract.contractType}`)
+                  ? contractT(`options.contractTypes.${contract.contractType}`)
+                  : formatEnumLabel(contract.contractType),
               ]
                 .filter(Boolean)
                 .join(' • '),
@@ -599,104 +588,6 @@ function ContractSelectWithCreate({
   );
 }
 
-type ContractTemplateSelectWithCreateProps = {
-  value: string;
-  templates: OperationsContractTemplate[];
-  label: string;
-  selectPlaceholder: string;
-  searchPlaceholder: string;
-  onChange: (value: string) => void;
-  onCreated?: (template: OperationsContractTemplate) => void | Promise<void>;
-};
-
-function ContractTemplateSelectWithCreate({
-  value,
-  templates,
-  label,
-  selectPlaceholder,
-  searchPlaceholder,
-  onChange,
-  onCreated,
-}: ContractTemplateSelectWithCreateProps) {
-  const commonT = useTranslations('operations.Common');
-  const templateT = useTranslations('operations.ContractTemplateFormPage');
-  const hasSelection = value !== 'none';
-  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
-
-  return (
-    <>
-      <div className="space-y-2">
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
-          <SearchableSelect
-            label={label}
-            value={value}
-            options={templates.map((template) => ({
-              id: template.id,
-              title: template.name,
-              description: [
-                template.code,
-                formatEnumLabel(template.contractType),
-                formatEnumLabel(template.billingModel),
-              ]
-                .filter(Boolean)
-                .join(' • '),
-            }))}
-            placeholder={selectPlaceholder}
-            searchPlaceholder={searchPlaceholder}
-            emptyLabel={commonT('labels.notAssigned')}
-            onChange={onChange}
-          />
-
-          {hasSelection ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="shrink-0"
-              onClick={() => onChange('none')}
-              aria-label={commonT('actions.clearSelection')}
-            >
-              <X className="size-4" />
-            </Button>
-          ) : null}
-
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="shrink-0"
-            onClick={() => setIsCreateSheetOpen(true)}
-            aria-label={commonT('actions.create')}
-          >
-            <Plus className="size-4" />
-          </Button>
-        </div>
-      </div>
-
-      <Sheet open={isCreateSheetOpen} onOpenChange={setIsCreateSheetOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-7xl">
-          <SheetHeader>
-            <SheetTitle>{templateT('newTitle')}</SheetTitle>
-            <SheetDescription>{templateT('description')}</SheetDescription>
-          </SheetHeader>
-
-          <ContractTemplateFormScreen
-            onCancel={() => setIsCreateSheetOpen(false)}
-            onSaved={async (template) => {
-              const createdTemplateId = template?.id
-                ? String(template.id)
-                : value;
-              onChange(createdTemplateId);
-              await onCreated?.(template);
-              setIsCreateSheetOpen(false);
-            }}
-          />
-        </SheetContent>
-      </Sheet>
-    </>
-  );
-}
-
 export function ProjectFormScreen({
   projectId,
   onSaved,
@@ -704,6 +595,7 @@ export function ProjectFormScreen({
 }: ProjectFormScreenProps) {
   const t = useTranslations('operations.ProjectFormPage');
   const commonT = useTranslations('operations.Common');
+  const contractT = useTranslations('operations.ContractFormPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const router = useRouter();
@@ -715,7 +607,6 @@ export function ProjectFormScreen({
     () =>
       z.object({
         contractId: z.string(),
-        contractTemplateId: z.string(),
         managerCollaboratorId: z.string(),
         code: z.string().trim().min(1, t('messages.requiredFields')),
         name: z.string().trim().min(1, t('messages.requiredFields')),
@@ -741,7 +632,6 @@ export function ProjectFormScreen({
         contractCode: z.string(),
         contractName: z.string(),
         contractDescription: z.string(),
-        autoGenerateContractDraft: z.boolean(),
         teamAssignments: z
           .array(
             z.object({
@@ -751,7 +641,6 @@ export function ProjectFormScreen({
               roleLabel: z.string(),
               weeklyHours: z.string(),
               allocationPercent: z.string(),
-              isBillable: z.boolean(),
               status: z.string(),
             })
           )
@@ -812,20 +701,6 @@ export function ProjectFormScreen({
       fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
   });
 
-  const { data: contractTemplates = [], refetch: refetchContractTemplates } =
-    useQuery<OperationsContractTemplate[]>({
-      queryKey: [
-        'operations-project-form-contract-templates',
-        currentLocaleCode,
-      ],
-      enabled: access.isDirector,
-      queryFn: () =>
-        fetchOperations<OperationsContractTemplate[]>(
-          request,
-          '/operations/contract-templates'
-        ),
-    });
-
   const { data: projectRoles = [], refetch: refetchProjectRoles } = useQuery<
     OperationsProjectRole[]
   >({
@@ -928,14 +803,6 @@ export function ProjectFormScreen({
     [availableContracts, form.contractId]
   );
 
-  const selectedContractTemplate = useMemo(
-    () =>
-      contractTemplates.find(
-        (template) => String(template.id) === form.contractTemplateId
-      ) ?? null,
-    [contractTemplates, form.contractTemplateId]
-  );
-
   const managerOptions = useMemo(
     () =>
       availableCollaborators.map((collaborator) => ({
@@ -1040,10 +907,6 @@ export function ProjectFormScreen({
         values.contractId === 'none'
           ? null
           : parseNumberInput(values.contractId),
-      contractTemplateId:
-        values.contractTemplateId === 'none'
-          ? null
-          : parseNumberInput(values.contractTemplateId),
       managerCollaboratorId:
         values.managerCollaboratorId === 'none'
           ? null
@@ -1063,8 +926,6 @@ export function ProjectFormScreen({
       contractCode: trimToNull(values.contractCode),
       contractName: trimToNull(values.contractName),
       contractDescription: trimToNull(values.contractDescription),
-      autoGenerateContractDraft:
-        values.contractId === 'none' ? values.autoGenerateContractDraft : false,
       teamAssignments: values.teamAssignments
         .filter((assignment) => assignment.selected)
         .map((assignment) => ({
@@ -1076,7 +937,6 @@ export function ProjectFormScreen({
           roleLabel: trimToNull(assignment.roleLabel),
           weeklyHours: parseNumberInput(assignment.weeklyHours),
           allocationPercent: parseNumberInput(assignment.allocationPercent),
-          isBillable: assignment.isBillable,
           status: assignment.status,
           startDate: trimToNull(values.startDate),
           endDate: trimToNull(values.endDate),
@@ -1417,7 +1277,7 @@ export function ProjectFormScreen({
                   {t('sections.financialsDescription')}
                 </p>
               </div>
-              <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-5">
+              <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-4">
                 <div className="min-w-0 space-y-2">
                   <FieldLabel label={commonT('labels.budget')} />
                   <InputMoney
@@ -1438,16 +1298,17 @@ export function ProjectFormScreen({
                     hint={t('hints.monthlyHourCap')}
                   />
                   <Input
-                    type="number"
-                    step="0.5"
+                    type="text"
+                    inputMode="numeric"
                     placeholder={t('placeholders.monthlyHourCap')}
                     value={form.monthlyHourCap}
-                    onChange={(event) =>
+                    onChange={(event) => {
+                      const raw = event.target.value.replace(/[^0-9]/g, '');
                       setForm((current) => ({
                         ...current,
-                        monthlyHourCap: event.target.value,
-                      }))
-                    }
+                        monthlyHourCap: raw,
+                      }));
+                    }}
                   />
                 </div>
                 <div className="min-w-0 space-y-2">
@@ -1477,34 +1338,6 @@ export function ProjectFormScreen({
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="min-w-0 space-y-2">
-                  <FieldLabel
-                    label={t('fields.contractTemplate')}
-                    hint={t('hints.contractTemplate')}
-                  />
-                  <ContractTemplateSelectWithCreate
-                    label=""
-                    value={form.contractTemplateId}
-                    templates={contractTemplates}
-                    selectPlaceholder={commonT('labels.notAssigned')}
-                    searchPlaceholder={t('placeholders.contractTemplateSearch')}
-                    onChange={(value) =>
-                      setForm((current) => ({
-                        ...current,
-                        contractTemplateId: value,
-                      }))
-                    }
-                    onCreated={async (template) => {
-                      await refetchContractTemplates();
-                      setForm((current) => ({
-                        ...current,
-                        contractTemplateId: template?.id
-                          ? String(template.id)
-                          : current.contractTemplateId,
-                      }));
-                    }}
-                  />
-                </div>
                 <div className="min-w-0 space-y-2">
                   <FieldLabel
                     label={commonT('labels.contract')}
@@ -1537,29 +1370,18 @@ export function ProjectFormScreen({
                     }}
                     initialValues={{
                       code: form.code ? `PRJ-${form.code}` : '',
-                      name: form.name
-                        ? `${form.name} Service Agreement`
-                        : (selectedContractTemplate?.name ?? ''),
+                      name: form.name ? `${form.name} Service Agreement` : '',
                       clientName: form.clientName,
-                      contractTemplateId: form.contractTemplateId,
-                      contractCategory:
-                        selectedContractTemplate?.contractCategory ?? 'client',
-                      contractType:
-                        selectedContractTemplate?.contractType ??
-                        'service_agreement',
-                      signatureStatus:
-                        selectedContractTemplate?.signatureStatus ??
-                        'not_started',
-                      billingModel:
-                        selectedContractTemplate?.billingModel ??
-                        form.billingModel,
+                      contractCategory: 'client',
+                      contractType: 'service_agreement',
+                      signatureStatus: 'not_started',
+                      billingModel: form.billingModel,
                       budgetAmount: form.budgetAmount,
                       monthlyHourCap: form.monthlyHourCap,
                       startDate: form.startDate,
                       endDate: form.endDate,
-                      description:
-                        selectedContractTemplate?.description ?? form.summary,
-                      contentHtml: selectedContractTemplate?.contentHtml ?? '',
+                      description: form.summary,
+                      contentHtml: '',
                     }}
                   />
                 </div>
@@ -1593,7 +1415,7 @@ export function ProjectFormScreen({
                             ]
                               .filter(Boolean)
                               .join(' • ')
-                          : t('fields.autoGenerateContractDraftDescription')}
+                          : commonT('labels.notAssigned')}
                       </div>
                     </div>
                     {selectedContract?.status ? (
@@ -1603,31 +1425,18 @@ export function ProjectFormScreen({
                             selectedContract.status
                           )}`}
                         >
-                          {formatEnumLabel(selectedContract.status)}
+                          {contractT.has(
+                            `options.statuses.${selectedContract.status}`
+                          )
+                            ? contractT(
+                                `options.statuses.${selectedContract.status}`
+                              )
+                            : formatEnumLabel(selectedContract.status)}
                         </span>
                       </span>
                     ) : null}
                   </div>
 
-                  {selectedContractTemplate ? (
-                    <div className="mt-3 rounded-md bg-muted/40 px-2.5 py-2">
-                      <div className="text-xs font-medium text-foreground">
-                        {t('labels.templateSelected')}
-                      </div>
-                      <div className="mt-1 text-[11px] text-muted-foreground">
-                        {[
-                          selectedContractTemplate.name,
-                          selectedContractTemplate.code,
-                          formatEnumLabel(
-                            selectedContractTemplate.contractType
-                          ),
-                        ]
-                          .filter(Boolean)
-                          .join(' • ')}
-                      </div>
-                    </div>
-                  ) : null}
-
                   <div className="mt-3 flex flex-wrap gap-2">
                     {selectedContract ? (
                       <Button type="button" variant="outline" size="sm" asChild>
@@ -1641,50 +1450,6 @@ export function ProjectFormScreen({
                     ) : null}
                   </div>
                 </div>
-
-                <div className="min-w-0 px-1 py-2">
-                  <div className="flex items-center justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="flex items-center gap-1.5 text-sm font-medium">
-                        <span>{t('fields.autoGenerateContractDraft')}</span>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span className="inline-flex cursor-help text-muted-foreground">
-                              <Info className="h-3.5 w-3.5" />
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>
-                              {form.contractId === 'none'
-                                ? t(
-                                    'fields.autoGenerateContractDraftDescription'
-                                  )
-                                : t('fields.existingContractSelected')}
-                            </p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                      <div className="text-[11px] text-muted-foreground">
-                        {form.contractId === 'none'
-                          ? t('labels.enabled')
-                          : t('labels.disabled')}
-                      </div>
-                    </div>
-                    <Switch
-                      checked={
-                        form.contractId === 'none' &&
-                        form.autoGenerateContractDraft
-                      }
-                      disabled={form.contractId !== 'none'}
-                      onCheckedChange={(checked) =>
-                        setForm((current) => ({
-                          ...current,
-                          autoGenerateContractDraft: checked,
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
               </div>
             </section>
 
@@ -1735,7 +1500,7 @@ export function ProjectFormScreen({
                     return (
                       <div
                         key={assignment.collaboratorId}
-                        className="grid min-w-0 gap-2 rounded-lg border px-3 py-2 xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1.2fr)_110px_110px_auto]"
+                        className="grid min-w-0 gap-2 rounded-lg border px-3 py-2 xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1.2fr)_110px_110px]"
                       >
                         <label className="flex cursor-pointer items-start gap-3 py-1">
                           <Checkbox
@@ -1789,56 +1554,60 @@ export function ProjectFormScreen({
                           ) : null}
                         </div>
                         <Input
-                          className="h-9"
+                          className="h-9 mt-2 self-start"
                           type="number"
+                          min="0"
+                          step="0.5"
                           placeholder={t('fields.weeklyHours')}
                           value={assignment.weeklyHours}
                           disabled={!assignment.selected}
-                          onChange={(event) =>
-                            updateAssignment(assignment.collaboratorId, {
-                              weeklyHours: event.target.value,
-                            })
-                          }
+                          onChange={(event) => {
+                            const hours = event.target.value;
+                            const updates: Partial<TeamAssignmentState> = {
+                              weeklyHours: hours,
+                            };
+                            const cap = collaborator.weeklyCapacityHours;
+                            if (cap && hours && Number(hours) > 0) {
+                              const pct = Math.round(
+                                (Number(hours) / cap) * 100
+                              );
+                              updates.allocationPercent = String(
+                                Math.min(pct, 100)
+                              );
+                            }
+                            updateAssignment(
+                              assignment.collaboratorId,
+                              updates
+                            );
+                          }}
                         />
                         <Input
-                          className="h-9"
+                          className="h-9 mt-2 self-start"
                           type="text"
                           inputMode="decimal"
                           placeholder={t('fields.allocationPercent')}
                           value={assignment.allocationPercent}
                           disabled={!assignment.selected}
-                          onChange={(event) =>
-                            updateAssignment(assignment.collaboratorId, {
-                              allocationPercent: normalizePercentInput(
-                                event.target.value
-                              ),
-                            })
-                          }
-                        />
-                        <div className="flex items-center justify-between gap-3 px-1 py-2">
-                          <div className="flex items-center gap-1.5 text-xs font-medium">
-                            <span>{t('fields.isBillable')}</span>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <span className="inline-flex cursor-help text-muted-foreground">
-                                  <Info className="h-3.5 w-3.5" />
-                                </span>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                <p>{t('fields.isBillableDescription')}</p>
-                              </TooltipContent>
-                            </Tooltip>
-                          </div>
-                          <Switch
-                            checked={assignment.isBillable}
-                            disabled={!assignment.selected}
-                            onCheckedChange={(checked) =>
-                              updateAssignment(assignment.collaboratorId, {
-                                isBillable: checked,
-                              })
+                          onChange={(event) => {
+                            const pct = normalizePercentInput(
+                              event.target.value
+                            );
+                            const updates: Partial<TeamAssignmentState> = {
+                              allocationPercent: pct,
+                            };
+                            const cap = collaborator.weeklyCapacityHours;
+                            if (cap && pct && Number(pct) > 0) {
+                              const hours = Math.round(
+                                (Number(pct) / 100) * cap
+                              );
+                              updates.weeklyHours = String(hours);
                             }
-                          />
-                        </div>
+                            updateAssignment(
+                              assignment.collaboratorId,
+                              updates
+                            );
+                          }}
+                        />
                       </div>
                     );
                   })}