Add subsidiary names to project creation

src/app/(main)/projects/create/page.tsx

@@ -1,3 +1,4 @@
+import { fetchAllCustomers, fetchAllSubsidiaries } from "@/app/api/customer";
 import {
   fetchProjectBuildingTypes,
   fetchProjectCategories,
@@ -31,6 +32,8 @@ const Projects: React.FC = async () => {
   fetchProjectServiceTypes();
   fetchProjectBuildingTypes();
   fetchProjectWorkNatures();
+  fetchAllCustomers();
+  fetchAllSubsidiaries();
   preloadTeamLeads();
   preloadStaff();
 

src/components/CreateProject/CreateProject.tsx

@@ -35,7 +35,7 @@ import {
 import { StaffResult } from "@/app/api/staff";
 import { Typography } from "@mui/material";
 import { Grade } from "@/app/api/grades";
-import { Customer } from "@/app/api/customer";
+import { Customer, Subsidiary } from "@/app/api/customer";
 
 export interface Props {
   allTasks: Task[];
@@ -43,6 +43,7 @@ export interface Props {
   taskTemplates: TaskTemplate[];
   teamLeads: StaffResult[];
   allCustomers: Customer[];
+  allSubsidiaries: Subsidiary[];
   fundingTypes: FundingType[];
   serviceTypes: ServiceType[];
   contractTypes: ContractType[];
@@ -76,6 +77,7 @@ const CreateProject: React.FC<Props> = ({
   teamLeads,
   grades,
   allCustomers,
+  allSubsidiaries,
   contractTypes,
   fundingTypes,
   locationTypes,
@@ -171,6 +173,7 @@ const CreateProject: React.FC<Props> = ({
             locationTypes={locationTypes}
             serviceTypes={serviceTypes}
             allCustomers={allCustomers}
+            allSubsidiaries={allSubsidiaries}
             projectCategories={projectCategories}
             teamLeads={teamLeads}
             isActive={tabIndex === 0}

src/components/CreateProject/CreateProjectWrapper.tsx

@@ -10,7 +10,7 @@ import {
   fetchProjectWorkNatures,
 } from "@/app/api/projects";
 import { fetchStaff, fetchTeamLeads } from "@/app/api/staff";
-import { fetchAllCustomers } from "@/app/api/customer";
+import { fetchAllCustomers, fetchAllSubsidiaries } from "@/app/api/customer";
 
 const CreateProjectWrapper: React.FC = async () => {
   const [
@@ -19,6 +19,7 @@ const CreateProjectWrapper: React.FC = async () => {
     projectCategories,
     teamLeads,
     allCustomers,
+    allSubsidiaries,
     contractTypes,
     fundingTypes,
     locationTypes,
@@ -32,6 +33,7 @@ const CreateProjectWrapper: React.FC = async () => {
     fetchProjectCategories(),
     fetchTeamLeads(),
     fetchAllCustomers(),
+    fetchAllSubsidiaries(),
     fetchProjectContractTypes(),
     fetchProjectFundingTypes(),
     fetchProjectLocationTypes(),
@@ -47,6 +49,7 @@ const CreateProjectWrapper: React.FC = async () => {
       projectCategories={projectCategories}
       taskTemplates={taskTemplates}
       teamLeads={teamLeads}
+      allSubsidiaries={allSubsidiaries}
       allCustomers={allCustomers}
       contractTypes={contractTypes}
       fundingTypes={fundingTypes}

src/components/CreateProject/MilestoneSection.tsx

@@ -43,7 +43,8 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
     t,
     i18n: { language },
   } = useTranslation();
-  const { getValues, setValue } = useFormContext<CreateProjectInputs>();
+  const { getValues, setValue, formState } =
+    useFormContext<CreateProjectInputs>();
   const [payments, setPayments] = useState<PaymentRow[]>(
     getValues("milestones")[taskGroupId]?.payments || [],
   );
@@ -223,6 +224,9 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
     </Button>
   );
 
+  const startDate = getValues("milestones")[taskGroupId]?.startDate;
+  const endDate = getValues("milestones")[taskGroupId]?.endDate;
+
   return (
     <Stack gap={1}>
       <Typography variant="overline" display="block" marginBlockEnd={1}>
@@ -237,7 +241,7 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
             <FormControl fullWidth>
               <DatePicker
                 label={t("Stage Start Date")}
-                value={dayjs(getValues("milestones")[taskGroupId]?.startDate)}
+                value={startDate ? dayjs(startDate) : null}
                 onChange={(date) => {
                   if (!date) return;
                   const milestones = getValues("milestones");
@@ -256,7 +260,7 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
             <FormControl fullWidth>
               <DatePicker
                 label={t("Stage End Date")}
-                value={dayjs(getValues("milestones")[taskGroupId]?.endDate)}
+                value={endDate ? dayjs(endDate) : null}
                 onChange={(date) => {
                   if (!date) return;
                   const milestones = getValues("milestones");

src/components/CreateProject/ProjectClientDetails.tsx

@@ -27,7 +27,7 @@ import {
   WorkNature,
 } from "@/app/api/projects";
 import { StaffResult } from "@/app/api/staff";
-import { Contact, Customer } from "@/app/api/customer";
+import { Contact, Customer, Subsidiary } from "@/app/api/customer";
 import Link from "next/link";
 import React, { useEffect, useMemo, useState } from "react";
 import { fetchCustomer } from "@/app/api/customer/actions";
@@ -39,6 +39,7 @@ interface Props {
   projectCategories: ProjectCategory[];
   teamLeads: StaffResult[];
   allCustomers: Customer[];
+  allSubsidiaries: Subsidiary[];
   serviceTypes: ServiceType[];
   contractTypes: ContractType[];
   fundingTypes: FundingType[];
@@ -52,6 +53,7 @@ const ProjectClientDetails: React.FC<Props> = ({
   projectCategories,
   teamLeads,
   allCustomers,
+  allSubsidiaries,
   serviceTypes,
   contractTypes,
   fundingTypes,
@@ -69,6 +71,13 @@ const ProjectClientDetails: React.FC<Props> = ({
     getValues,
   } = useFormContext<CreateProjectInputs>();
 
+  const subsidiaryMap = useMemo<{
+    [id: Subsidiary["id"]]: Subsidiary;
+  }>(
+    () => allSubsidiaries.reduce((acc, sub) => ({ ...acc, [sub.id]: sub }), {}),
+    [allSubsidiaries],
+  );
+
   const selectedCustomerId = watch("clientId");
   const selectedCustomer = useMemo(
     () => allCustomers.find((c) => c.id === selectedCustomerId),
@@ -482,14 +491,20 @@ const ProjectClientDetails: React.FC<Props> = ({
                     name="clientSubsidiaryId"
                     render={({ field }) => (
                       <Select label={t("Client Lead")} {...field}>
-                        {customerSubsidiaryIds.map((subsidiaryId, index) => (
-                          <MenuItem
-                            key={`${subsidiaryId}-${index}`}
-                            value={subsidiaryId}
-                          >
-                            {subsidiaryId}
-                          </MenuItem>
-                        ))}
+                        {customerSubsidiaryIds
+                          .filter((subId) => subsidiaryMap[subId])
+                          .map((subsidiaryId, index) => {
+                            const subsidiary = subsidiaryMap[subsidiaryId];
+
+                            return (
+                              <MenuItem
+                                key={`${subsidiaryId}-${index}`}
+                                value={subsidiaryId}
+                              >
+                                {`${subsidiary.code} - ${subsidiary.name}`}
+                              </MenuItem>
+                            );
+                          })}
                       </Select>
                     )}
                   />