From 9caa7b9e7faff83f2b454ddc11b46b3bf17bd796 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Sat, 30 Nov 2024 21:42:38 +0200
Subject: [PATCH] [Fix]: Handle Timesheet Update (#3384)

* Fix: handle timesheet update with precise time ranges and billing information

* Fix: deepscan

* Fix: deepscan

* Fix: deepscan

* fix: deep scan

* fix: deep scan
---
 .../[memberId]/components/AddTaskModal.tsx    |  70 ++++----
 .../[memberId]/components/EditTaskModal.tsx   | 152 +++++++++++++-----
 .../[locale]/timesheet/[memberId]/page.tsx    |   2 +-
 .../hooks/features/useTimelogFilterOptions.ts |  10 +-
 apps/web/app/interfaces/timer/ITimerLog.ts    |  12 +-
 apps/web/lib/components/combobox/index.tsx    |   5 +-
 .../manual-time/manage-member-component.tsx   |   6 +-
 7 files changed, 175 insertions(+), 82 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
index 3a13f5688..f9ba3321a 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -60,9 +60,9 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
             closeModal={closeModal}
             title={'+ Add Time Entry'}
             showCloseIcon
-            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto] overflow-y-auto"
+            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[32rem] justify-start h-[auto]"
             titleClass="font-bold flex justify-start w-full">
-            <div className="flex flex-col w-full gap-4 justify-start overflow-y-auto">
+            <div className="flex flex-col w-full gap-4 justify-start md:w-40 md:min-w-[32rem] p-4">
                 <div className=" w-full mr-[4%]">
                     <label className="block text-[#282048] dark:text-gray-400 font-medium mb-1">
                         {t('sidebar.TASKS')}
@@ -207,7 +207,7 @@ const ShiftTimingSelect = ({ label, timeOptions, placeholder, className, onChang
                         <SelectItem
                             key={time}
                             value={time}
-                            className="hover:bg-primary focus:bg-primary hover:text-white px-2 py-1 cursor-pointer"
+                            className="hover:bg-primary focus:bg-primary hover:text-white  py-1 cursor-pointer"
                         >
                             {time}
                         </SelectItem>
@@ -232,27 +232,31 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions, t }: {
     const [shifts, setShifts] = React.useState<Shift[]>([
         { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },
     ])
-    const convertToMinutes = (time: string): number => {
-        const [hours, minutes] = time.split(':').map(Number);
-        return hours * 60 + minutes;
-    };
-
-    const calculateTotalHours = React.useCallback((start: string, end: string): string => {
-        if (!start || !end) return '00:00h';
 
-        const startMinutes = convertToMinutes(start);
-        const endMinutes = convertToMinutes(end);
+    const convertToMinutesHour = (time: string): number => {
+        const [hourMinute, period] = time.split(' ');
+        const [hours, minutes] = hourMinute.split(':').map(Number);
 
-        const totalMinutes = endMinutes >= startMinutes
-            ? endMinutes - startMinutes
-            : 1440 - startMinutes + endMinutes;
-
-        const hours = Math.floor(totalMinutes / 60);
-        const minutes = totalMinutes % 60;
-        return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}h`;
-    }, []);
+        let totalMinutes = (hours % 12) * 60 + minutes;
+        if (period === 'PM') totalMinutes += 720;
 
+        return totalMinutes;
+    }
 
+    const calculateTotalHoursHour = React.useCallback(
+        (start: string, end: string): string => {
+            if (!start || !end) return '00:00h';
+            const startMinutes = convertToMinutesHour(start);
+            const endMinutes = convertToMinutesHour(end);
+            const totalMinutes = endMinutes >= startMinutes
+                ? endMinutes - startMinutes
+                : 1440 - startMinutes + endMinutes;
+            const hours = Math.floor(totalMinutes / 60);
+            const minutes = totalMinutes % 60;
+            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}h`;
+        },
+        []
+    );
 
     const handleAddShift = () => {
         setShifts([...shifts,
@@ -264,26 +268,38 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions, t }: {
         setShifts(updatedShifts);
     };
 
+
     const handleShiftChange = (index: number, field: keyof Shift, value: string) => {
         const updatedShifts = [...shifts];
         updatedShifts[index][field] = value;
 
         if (field === 'startTime' || field === 'endTime') {
             const { startTime, endTime } = updatedShifts[index];
-            updatedShifts[index].totalHours = calculateTotalHours(startTime, endTime);
+
+            if (!startTime || !endTime) return;
+
+            if (convertToMinutesHour(startTime) >= convertToMinutesHour(endTime)) {
+                return;
+            }
+            updatedShifts[index].totalHours = calculateTotalHoursHour(startTime, endTime);
             const isOverlapping = shifts.some((shift, i) => {
                 if (i === index || !shift.startTime || !shift.endTime) return false;
-                const currentStart = convertToMinutes(startTime);
-                const currentEnd = convertToMinutes(endTime);
-                const shiftStart = convertToMinutes(shift.startTime);
-                const shiftEnd = convertToMinutes(shift.endTime);
-                return (currentStart >= shiftStart && currentStart < shiftEnd) ||
-                    (currentEnd > shiftStart && currentEnd <= shiftEnd);
+
+                const currentStart = convertToMinutesHour(startTime);
+                const currentEnd = convertToMinutesHour(endTime);
+                const shiftStart = convertToMinutesHour(shift.startTime);
+                const shiftEnd = convertToMinutesHour(shift.endTime);
+                return (
+                    (currentStart < shiftEnd && currentEnd > shiftStart) ||
+                    (currentStart === shiftStart && currentEnd === shiftEnd)
+                );
             });
+
             if (isOverlapping) {
                 return;
             }
         }
+
         setShifts(updatedShifts);
     };
 
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index 3c19327df..3daa25980 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -2,7 +2,7 @@ import { Modal, statusColor } from "@/lib/components";
 import { IoMdArrowDropdown } from "react-icons/io";
 import { FaRegClock } from "react-icons/fa";
 import { DatePickerFilter } from "./TimesheetFilterDate";
-import { useState } from "react";
+import { FormEvent, useCallback, useState } from "react";
 import { useTranslations } from "next-intl";
 import { clsxm } from "@/app/utils";
 import { Item, ManageOrMemberComponent, getNestedValue } from "@/lib/features/manual-time/manage-member-component";
@@ -10,6 +10,8 @@ import { useTeamTasks } from "@/app/hooks";
 import { CustomSelect, TaskNameInfoDisplay } from "@/lib/features";
 import { statusTable } from "./TimesheetAction";
 import { TimesheetLog } from "@/app/interfaces";
+import { secondsToTime } from "@/app/helpers";
+import { useTimesheet } from "@/app/hooks/features/useTimesheet";
 
 export interface IEditTaskModalProps {
 	isOpen: boolean;
@@ -19,34 +21,43 @@ export interface IEditTaskModalProps {
 export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskModalProps) {
 	const { activeTeam } = useTeamTasks();
 	const t = useTranslations();
-	// const [dateRange, setDateRange] = useState<{ from: Date | null }>({
-	// 	from: new Date(),
-	// });
-	// const [endTime, setEndTime] = useState<string>('');
-	// const [startTime, setStartTime] = useState<string>('');
-	// const [isBillable, setIsBillable] = useState<boolean>(dataTimesheet.isBillable);
-	// const [notes, setNotes] = useState('');
+	const { updateTimesheet } = useTimesheet({})
 
-	const [dateRange, setDateRange] = useState<{ from: Date | null }>({
-		from: dataTimesheet.timesheet?.startedAt ? new Date(dataTimesheet.timesheet.startedAt) : new Date(),
+	const [dateRange, setDateRange] = useState<{ date: Date | null }>({
+		date: dataTimesheet.timesheet?.startedAt ? new Date(dataTimesheet.timesheet.startedAt) : new Date(),
 	});
-	const [endTime, setEndTime] = useState<string>(
-		dataTimesheet.timesheet?.stoppedAt
-			? new Date(dataTimesheet.timesheet.stoppedAt).toLocaleTimeString('en-US', { hour12: false }).slice(0, 5)
-			: ''
-	);
-	const [startTime, setStartTime] = useState<string>(
-		dataTimesheet.timesheet?.startedAt
-			? new Date(dataTimesheet.timesheet.startedAt).toLocaleTimeString('en-US', { hour12: false }).slice(0, 5)
-			: ''
-	);
-	const [isBillable, setIsBillable] = useState<boolean>(dataTimesheet.isBillable);
-	const [notes, setNotes] = useState<string>('');
+
+	const { h: hours, m: minutes } = secondsToTime(dataTimesheet.timesheet.duration);
+
+	const [timeRange, setTimeRange] = useState<{ startTime: string; endTime: string }>({
+		startTime: dataTimesheet.timesheet?.startedAt
+			? dataTimesheet.timesheet.startedAt.toString().slice(0, 5)
+			: '',
+		endTime: dataTimesheet.timesheet?.stoppedAt
+			? dataTimesheet.timesheet.stoppedAt.toString().slice(0, 5)
+			: '',
+	});
+
+	const updateTime = (key: 'startTime' | 'endTime', value: string) => {
+		setTimeRange(prevState => ({
+			...prevState,
+			[key]: value,
+		}));
+	};
+	const [timesheetData, setTimesheetData] = useState({
+		isBillable: dataTimesheet.isBillable,
+		projectId: dataTimesheet.project?.id || '',
+		notes: dataTimesheet.description || '',
+	});
+
 	const memberItemsLists = {
 		Project: activeTeam?.projects as [],
 	};
 	const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
-		// Handle value changes
+		setTimesheetData((prev) => ({
+			...prev,
+			projectId: values['Project']?.id,
+		}));
 	};
 	const selectedValues = {
 		Teams: null,
@@ -55,6 +66,49 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 		// Handle field changes
 	};
 
+	const handleUpdateSubmit = useCallback(async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		if (!timeRange.startTime || !timeRange.endTime) {
+			alert('Please enter valid start and end times.');
+			return;
+		}
+		if (!/^\d{2}:\d{2}$/.test(timeRange.startTime) || !/^\d{2}:\d{2}$/.test(timeRange.endTime)) {
+			alert('Time format should be HH:MM.');
+			return;
+		}
+
+		const baseDate = dateRange.date ?? new Date();
+		const startedAt = new Date(
+			Date.UTC(
+				baseDate.getFullYear(),
+				baseDate.getMonth(),
+				baseDate.getDate(),
+				...timeRange.startTime.split(':').map(Number)
+			)
+		);
+		const stoppedAt = new Date(
+			Date.UTC(
+				baseDate.getFullYear(),
+				baseDate.getMonth(),
+				baseDate.getDate(),
+				...timeRange.endTime.split(':').map(Number)
+			)
+		);
+		await updateTimesheet({
+			id: dataTimesheet.timesheetId,
+			isBillable: timesheetData.isBillable,
+			employeeId: dataTimesheet.employeeId,
+			logType: dataTimesheet.logType,
+			source: dataTimesheet.source,
+			startedAt: startedAt,
+			stoppedAt: stoppedAt,
+			tenantId: dataTimesheet.tenantId,
+			organizationId: dataTimesheet.organizationId,
+			description: timesheetData.notes,
+			projectId: timesheetData.projectId,
+		});
+	}, [dateRange, timeRange, timesheetData, dataTimesheet, updateTimesheet]);
+
 	const fields = [
 		{
 			label: t('sidebar.PROJECTS'),
@@ -62,12 +116,14 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 			isRequired: true,
 			valueKey: 'id',
 			displayKey: 'name',
-			element: 'Project'
+			element: 'Project',
+			defaultValue: dataTimesheet.project.name
+
 		},
 	];
 
 	const handleFromChange = (fromDate: Date | null) => {
-		setDateRange((prev) => ({ ...prev, from: fromDate }));
+		setDateRange((prev) => ({ ...prev, date: fromDate }));
 	};
 	return (
 		<Modal
@@ -75,9 +131,9 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 			isOpen={isOpen}
 			showCloseIcon
 			title={'Edit Task'}
-			className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]"
+			className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:min-w-[32rem] justify-start h-[auto]"
 			titleClass="font-bold flex justify-start w-full">
-			<div className="flex flex-col w-full">
+			<form onSubmit={handleUpdateSubmit} className="flex flex-col w-full">
 				<div className="flex flex-col border-b border-b-slate-100 dark:border-b-gray-700">
 					<TaskNameInfoDisplay
 						task={dataTimesheet.task}
@@ -98,7 +154,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						<span className="text-[#282048] dark:text-gray-500 ">{t('dailyPlan.TASK_TIME')}</span>
 						<div className="flex items-center gap-x-2 ">
 							<FaRegClock className="text-[#30B366]" />
-							<span>08:10h</span>
+							<span>{hours}:{minutes} h</span>
 						</div>
 					</div>
 					<div className="flex items-center w-full">
@@ -111,8 +167,11 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 								aria-label="Start time"
 								aria-describedby="start-time-error"
 								type="time"
-								value={startTime}
-								onChange={(e) => setStartTime(e.target.value)}
+								min="00:00"
+								max="23:59"
+								pattern="[0-9]{2}:[0-9]{2}"
+								value={timeRange.startTime}
+								onChange={(e) => updateTime("startTime", e.target.value)}
 								className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
 								required
 							/>
@@ -128,8 +187,8 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 								aria-label="End time"
 								aria-describedby="end-time-error"
 								type="time"
-								value={endTime}
-								onChange={(e) => setEndTime(e.target.value)}
+								value={timeRange.endTime}
+								onChange={(e) => updateTime('endTime', e.target.value)}
 								className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
 								required
 							/>
@@ -139,7 +198,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 					<div>
 						<span className="block text-[#282048] dark:text-gray-500   mr-2">{t("manualTime.DATE")}</span>
 						<DatePickerFilter
-							date={dateRange.from}
+							date={dateRange.date}
 							setDate={handleFromChange}
 							label="Oct 01 2024"
 						/>
@@ -160,13 +219,19 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						<label className="text-[#282048] dark:text-gray-500   mr-12 capitalize">{t('pages.timesheet.BILLABLE.BILLABLE').toLowerCase()}</label>
 						<div className="flex items-center gap-3">
 							<ToggleButton
-								isActive={isBillable}
-								onClick={() => setIsBillable(true)}
+								isActive={timesheetData.isBillable}
+								onClick={() => setTimesheetData((prev) => ({
+									...prev,
+									isBillable: true,
+								}))}
 								label={t('pages.timesheet.BILLABLE.YES')}
 							/>
 							<ToggleButton
-								isActive={!isBillable}
-								onClick={() => setIsBillable(false)}
+								isActive={!timesheetData.isBillable}
+								onClick={() => setTimesheetData((prev) => ({
+									...prev,
+									isBillable: false,
+								}))}
 								label={t('pages.timesheet.BILLABLE.NO')}
 							/>
 						</div>
@@ -174,14 +239,17 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 					<div className="w-full flex flex-col">
 						<span className="text-[#282048] dark:text-gray-400">{t('common.NOTES')}</span>
 						<textarea
-							value={notes}
-							onChange={(e) => setNotes(e.target.value)}
+							value={timesheetData.notes}
+							onChange={(e) => setTimesheetData((prev) => ({
+								...prev,
+								notes: e.target.value,
+							}))}
 							placeholder="Insert notes here..."
 							className={clsxm(
 								"bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent",
 								"placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full",
 								"border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40 bg-[#FBB6500D]",
-								notes.trim().length === 0 && "border-red-500"
+								timesheetData.notes.trim().length === 0 && "border-red-500"
 							)}
 							maxLength={120}
 							minLength={0}
@@ -189,7 +257,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 							required
 						/>
 						<div className="text-sm text-[#282048] dark:text-gray-500   text-right">
-							{notes.length}/{120}
+							{timesheetData.notes.length}/{120}
 						</div>
 					</div>
 					<div className="border-t border-t-gray-200 dark:border-t-gray-700 w-full"></div>
@@ -224,7 +292,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						</div>
 					</div>
 				</div>
-			</div>
+			</form>
 
 		</Modal>
 	)
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 20de348bc..3eecb7d5f 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -229,7 +229,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 	);
 });
 
-export default withAuthentication(TimeSheet, { displayName: 'TimeSheet' });
+export default withAuthentication(TimeSheet, { displayName: 'TimeSheet', showPageSkeleton: true });
 
 const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({ mode, active, icon, onClick, t }) => (
 	<button
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index a8fdc2fd8..a79fcb1ad 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -19,11 +19,15 @@ export function useTimelogFilterOptions() {
     const generateTimeOptions = (interval = 15) => {
         const totalSlots = (24 * 60) / interval; // Total intervals in a day
         return Array.from({ length: totalSlots }, (_, i) => {
-            const hour = Math.floor((i * interval) / 60).toString().padStart(2, '0');
-            const minutes = ((i * interval) % 60).toString().padStart(2, '0');
-            return `${hour}:${minutes}`;
+            const totalMinutes = i * interval;
+            const hour24 = Math.floor(totalMinutes / 60);
+            const hour12 = hour24 % 12 || 12; // Convert to 12-hour format
+            const minutes = (totalMinutes % 60).toString().padStart(2, '0');
+            const period = hour24 < 12 ? 'AM' : 'PM'; // Determine AM/PM
+            return `${hour12.toString().padStart(2, '0')}:${minutes} ${period}`;
         });
     };
+
     const handleSelectRowTimesheet = (items: string) => {
         setSelectTimesheet((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index 09368bbad..b40955c4d 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -85,11 +85,11 @@ interface OrganizationContact extends BaseEntity, ImageEntity {
 }
 
 export interface TimesheetLog extends BaseEntity {
-    startedAt: string;
-    stoppedAt: string;
+    startedAt: string | Date;
+    stoppedAt: string | Date;
     editedAt: string | null;
-    logType: TimeLogType;
-    source: TimerSource;
+    logType: TimeLogType.MANUAL;
+    source: TimerSource.BROWSER;
     description: string;
     reason: string | null;
     isBillable: boolean;
@@ -117,8 +117,8 @@ export interface UpdateTimesheetStatus extends BaseEntity {
     keyboard: number;
     mouse: number;
     overall: number;
-    startedAt: string;
-    stoppedAt: string;
+    startedAt: string | Date;
+    stoppedAt: string | Date;
     approvedAt: string | null;
     submittedAt: string | null;
     lockedAt: string | null;
diff --git a/apps/web/lib/components/combobox/index.tsx b/apps/web/lib/components/combobox/index.tsx
index d0faacc2b..20fd6db83 100644
--- a/apps/web/lib/components/combobox/index.tsx
+++ b/apps/web/lib/components/combobox/index.tsx
@@ -18,6 +18,7 @@ interface ComboboxProps<T> {
 	className?: string;
 	popoverClassName?: string;
 	selectedItem?: T | null;
+	defaultValue?: string
 }
 
 export function CustomCombobox<T>({
@@ -31,7 +32,8 @@ export function CustomCombobox<T>({
 	onChangeValue,
 	className,
 	popoverClassName,
-	selectedItem = null
+	selectedItem = null,
+	defaultValue
 }: Readonly<ComboboxProps<T>>) {
 	const [open, setOpen] = React.useState(false);
 	const [value, setValue] = React.useState<T | null>(selectedItem);
@@ -88,6 +90,7 @@ export function CustomCombobox<T>({
 						<CommandGroup>
 							{items.map((item) => (
 								<CommandItem
+									defaultValue={defaultValue}
 									className="w-full dark:bg-dark--theme-light"
 									key={itemToValue(item)}
 									value={itemToValue(item)}
diff --git a/apps/web/lib/features/manual-time/manage-member-component.tsx b/apps/web/lib/features/manual-time/manage-member-component.tsx
index b9e5a8fc6..c4fa127ca 100644
--- a/apps/web/lib/features/manual-time/manage-member-component.tsx
+++ b/apps/web/lib/features/manual-time/manage-member-component.tsx
@@ -32,6 +32,7 @@ interface ManageOrMemberComponentProps<T extends Item> {
         isRequired: boolean;
         valueKey: string; // Key for extracting the item's value
         displayKey: string; // Key for extracting the item's display text
+        defaultValue?: string
     }[];
 
     /**
@@ -77,7 +78,7 @@ interface ManageOrMemberComponentProps<T extends Item> {
      */
     itemToValue: (item: T | null, valueKey: string) => string;
 
-    classNameTitle?: string
+    classNameTitle?: string;
 }
 
 /**
@@ -94,7 +95,7 @@ export const ManageOrMemberComponent = <T extends Item>({
     handleChange,
     itemToString,
     itemToValue,
-    classNameTitle
+    classNameTitle,
 }: ManageOrMemberComponentProps<T>): JSX.Element => {
 
     /**
@@ -122,6 +123,7 @@ export const ManageOrMemberComponent = <T extends Item>({
                         {field.isRequired && <span className="text-[#de5505e1] ml-1 text-sm">*</span>}
                     </label>
                     <CustomCombobox
+                        defaultValue={field.defaultValue}
                         popoverWidth='w-full'
                         buttonWidth='w-full'
                         itemToString={(item) => itemToString(item, field.displayKey)}