From 8f6352dba1f95000bf2bcb639fd0b322691cfcd3 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:12:46 +0200
Subject: [PATCH 01/12] [Feat]: Add Component for Timesheet Creation and
 Optimize Task Button (#3359)

* feat: add component for timesheet creation and optimize task button

* feat(timesheet): add grouping by week and month functionality

* fix: simplify and improve readability of conditional rendering in timesheet display

* feat: timesheet creation task buttons

* fix:coderabbitai
---
 .../[memberId]/components/AddTaskModal.tsx    | 157 ++++++++++++++++++
 .../components/FilterWithStatus.tsx           |  42 ++++-
 .../[memberId]/components/FrequencySelect.tsx |  15 +-
 .../[memberId]/components/TimesheetAction.tsx |   9 +-
 .../[memberId]/components/TimesheetFilter.tsx |  14 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |  37 +++--
 .../hooks/features/useTimelogFilterOptions.ts |   5 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  66 +++++++-
 apps/web/app/interfaces/ITask.ts              |   4 +
 apps/web/app/stores/time-logs.ts              |   5 +-
 .../calendar/table-time-sheet.tsx             |  41 +++--
 11 files changed, 330 insertions(+), 65 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
new file mode 100644
index 000000000..86a6812f0
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -0,0 +1,157 @@
+import { useTeamTasks } from '@/app/hooks';
+import { ITaskIssue } from '@/app/interfaces';
+import { clsxm } from '@/app/utils';
+import { Modal } from '@/lib/components'
+import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features';
+import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
+import { useTranslations } from 'next-intl';
+import React from 'react'
+import { ToggleButton } from './EditTaskModal';
+export interface IAddTaskModalProps {
+    isOpen: boolean;
+    closeModal: () => void;
+}
+export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
+    const t = useTranslations();
+    const { activeTeam } = useTeamTasks();
+    const [notes, setNotes] = React.useState('');
+    const [task, setTasks] = React.useState('')
+    const [isBillable, setIsBillable] = React.useState<boolean>(true);
+
+    const projectItemsLists = {
+        Project: activeTeam?.projects ?? [],
+    };
+
+    const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
+        // Handle value changes
+    };
+    const selectedValues = {
+        Project: null,
+    };
+    const handleChange = (field: string, selectedItem: Item | null) => {
+        // Handle field changes
+    };
+
+    const fields = [
+        {
+            label: t('sidebar.PROJECTS'),
+            placeholder: 'Select a project',
+            isRequired: true,
+            valueKey: 'id',
+            displayKey: 'name',
+            element: 'Project'
+        },
+    ];
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            closeModal={closeModal}
+            title={'ADD TASK'}
+            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]"
+            titleClass="font-bold flex justify-start w-full">
+            <div className="flex flex-col w-full gap-4 justify-start">
+                <div className=" w-full mr-[4%]">
+                    <label className="block text-[#282048] font-medium mb-1">
+                        Task
+                        <span className="text-[#de5505e1] ml-1">*</span>
+                    </label>
+                    <input
+                        aria-label="Task"
+                        aria-describedby="start-time-error"
+                        type="Task"
+                        value={task}
+                        onChange={(e) => setTasks(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
+                    />
+                </div>
+                <div className=" w-full mr-[4%] flex items-center">
+                    <label className="block text-[#282048]  mb-1 px-2">
+                        {t('common.ISSUE_TYPE')}
+                        <span className="text-[#de5505e1] ml-1">*</span>:
+                    </label>
+                    <CustomSelect
+                        className='w-auto'
+                        options={Object.keys(taskIssues).flatMap((items) => items)}
+                        renderOption={(option) => (
+                            <div className="flex items-center gap-x-2">
+                                <TaskStatus
+                                    {...taskIssues[option as ITaskIssue]}
+                                    showIssueLabels={false}
+                                    issueType="issue"
+                                    className={clsxm('rounded-md px-2 text-white bg-primary')}
+                                />
+                                {option}
+                            </div>
+                        )}
+                    />
+                </div>
+                <div className=" flex flex-col items-center w-full">
+                    <label className="text-[#282048] font-medium mr-12 capitalize">
+                        {t('pages.timesheet.BILLABLE.BILLABLE').toLowerCase()
+                        }</label>
+                    <div className="flex items-center gap-3">
+                        <ToggleButton
+                            isActive={isBillable}
+                            onClick={() => setIsBillable(true)}
+                            label={t('pages.timesheet.BILLABLE.YES')}
+                        />
+                        <ToggleButton
+                            isActive={!isBillable}
+                            onClick={() => setIsBillable(false)}
+                            label={t('pages.timesheet.BILLABLE.NO')}
+                        />
+                    </div>
+                </div>
+                <div className="w-full flex flex-col">
+                    <ManageOrMemberComponent
+                        fields={fields}
+                        itemsLists={projectItemsLists}
+                        selectedValues={selectedValues}
+                        onSelectedValuesChange={handleSelectedValuesChange}
+                        handleChange={handleChange}
+                        itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
+                        itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
+                    />
+                </div>
+                <div className="w-full flex flex-col">
+                    <span className="text-[#282048] font-medium">Notes</span>
+                    <textarea
+                        value={notes}
+                        onChange={(e) => setNotes(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"
+                        )}
+                        maxLength={120}
+                        minLength={0}
+                        aria-label="Insert notes here"
+                        required
+                    />
+                    <div className="text-sm text-[#282048] font-medium text-right">
+                        {notes.length}/{120}
+                    </div>
+                </div>
+                <div className="flex items-center gap-x-2 justify-end w-full">
+                    <button
+                        type="button"
+                        className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
+                        {t('common.CANCEL')}
+                    </button>
+                    <button
+                        type="submit"
+                        className={clsxm(
+                            'bg-[#3826A6] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+                        )}>
+                        {t('common.SAVE')}
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    )
+}
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
index 1ce06fadd..14ac28f0c 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
@@ -2,23 +2,47 @@
 import React, { HTMLAttributes } from 'react';
 import { Button } from 'lib/components';
 import { clsxm } from '@app/utils';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 
-export type FilterStatus = 'All Tasks' | 'Pending' | 'Approved' | 'Rejected';
+export type FilterStatus = 'All Tasks' | 'Pending' | 'Approved' | 'In review' | 'Draft' | 'Rejected';
 export function FilterWithStatus({
 	activeStatus,
 	onToggle,
-	className
+	className,
+	data
 }: Readonly<{
 	activeStatus: FilterStatus;
+	data?: Record<TimesheetStatus, TimesheetLog[]>
+
 	onToggle: (status: FilterStatus) => void;
 	className?: HTMLAttributes<HTMLDivElement>;
 }>) {
-	const buttonData: { label: FilterStatus; count: number; icon: React.ReactNode }[] = [
-		{ label: 'All Tasks', count: 46, icon: <i className="icon-all" /> },
-		{ label: 'Pending', count: 12, icon: <i className="icon-pending" /> },
-		{ label: 'Approved', count: 28, icon: <i className="icon-approved" /> },
-		{ label: 'Rejected', count: 6, icon: <i className="icon-rejected" /> }
-	];
+
+	const statusIcons: Record<FilterStatus, string> = {
+		'All Tasks': 'icon-all',
+		Pending: 'icon-pending',
+		Approved: 'icon-approved',
+		'In review': 'icon-rejected',
+		Draft: 'icon-approved',
+		Rejected: 'icon-rejected',
+	};
+
+	const buttonData = React.useMemo(() => {
+		const counts = {
+			'All Tasks': Object.values(data ?? {}).reduce((total, tasks) => total + (tasks?.length ?? 0), 0),
+			Pending: data?.PENDING?.length ?? 0,
+			Approved: data?.APPROVED?.length ?? 0,
+			'In review': data?.['IN REVIEW']?.length ?? 0,
+			Draft: data?.DRAFT?.length ?? 0,
+			Rejected: data?.DENIED?.length ?? 0,
+		};
+		return Object.entries(counts).map(([label, count]) => ({
+			label: label as FilterStatus,
+			count,
+			icon: <i className={statusIcons[label as FilterStatus]} />,
+		}));
+	}, [data]);
+
 
 	return (
 		<div
@@ -34,7 +58,7 @@ export function FilterWithStatus({
 						'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
 						'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
 						activeStatus === label &&
-							'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
+						'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
 					)}
 					onClick={() => onToggle(label)}
 				>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
index ef2f316d1..7cad6ab32 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
@@ -22,6 +22,8 @@ import { DatePicker } from "@components/ui/DatePicker";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { PiCalendarDotsThin } from "react-icons/pi";
+import { useTimelogFilterOptions } from "@/app/hooks";
+import { TimesheetFilterByDays } from "@/app/interfaces";
 
 interface DatePickerInputProps {
     date: Date | null;
@@ -29,24 +31,23 @@ interface DatePickerInputProps {
 }
 
 export function FrequencySelect() {
-    const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
-
+    const { setTimesheetGroupByDays, timesheetGroupByDays } = useTimelogFilterOptions();
     const handleSelectChange = (value: string) => {
-        setSelectedValue(value);
+        setTimesheetGroupByDays(value as TimesheetFilterByDays);
     };
 
     return (
         <Select
-            value={selectedValue}
+            value={timesheetGroupByDays}
             onValueChange={handleSelectChange}>
             <SelectTrigger className="w-36 overflow-hidden  h-[2.2rem]  text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
                 <SelectValue placeholder="Select a daily" />
             </SelectTrigger>
             <SelectContent>
                 <SelectGroup>
-                    <SelectItem value="daily">Daily</SelectItem>
-                    <SelectItem value="weekly">Weekly</SelectItem>
-                    <SelectItem value="monthly">Monthly</SelectItem>
+                    <SelectItem value="Daily">Daily</SelectItem>
+                    <SelectItem value="Weekly">Weekly</SelectItem>
+                    <SelectItem value="Monthly">Monthly</SelectItem>
                 </SelectGroup>
             </SelectContent>
         </Select>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index 5ba36512b..1909dcd13 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -1,4 +1,4 @@
-import { TimesheetStatus } from "@/app/interfaces";
+import { TimesheetFilterByDays, TimesheetStatus } from "@/app/interfaces";
 import { clsxm } from "@/app/utils";
 import { TranslationHooks } from "next-intl";
 import { ReactNode } from "react";
@@ -31,6 +31,7 @@ export type StatusType = "Pending" | "Approved" | "Denied";
 export type StatusAction = "Deleted" | "Approved" | "Denied";
 
 
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, disabled: boolean, onClick: (action: StatusAction) => void) => {
 
@@ -69,3 +70,9 @@ export const statusTable: { label: TimesheetStatus; description: string }[] = [
     { label: "DRAFT", description: "The item is saved as draft" },
     { label: "DENIED", description: "The item has been rejected" },
 ];
+
+export const DailyTable: { label: TimesheetFilterByDays; description: string }[] = [
+    { label: "Daily", description: 'Group by Daily' },
+    { label: "Weekly", description: 'Group by Weekly' },
+    { label: "Monthly", description: 'Group by Monthly' },
+];
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
index a1e3c9de2..71d9c6fb0 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
@@ -1,8 +1,9 @@
 import { FilterStatus, FilterWithStatus } from './FilterWithStatus';
 import { FrequencySelect, TimeSheetFilterPopover, TimesheetFilterDate, TimesheetFilterDateProps } from '.';
 import { Button } from 'lib/components';
-import { AddManualTimeModal } from '@/lib/features/manual-time/add-manual-time-modal';
 import { TranslationHooks } from 'next-intl';
+import { AddTaskModal } from './AddTaskModal';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 
 interface ITimesheetFilter {
     isOpen: boolean,
@@ -11,22 +12,23 @@ interface ITimesheetFilter {
     t: TranslationHooks,
     initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>,
     onChangeStatus?: (status: FilterStatus) => void;
-    filterStatus?: FilterStatus
+    filterStatus?: FilterStatus,
+    data?: Record<TimesheetStatus, TimesheetLog[]>
+
 }
 
-export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate, filterStatus, onChangeStatus }: ITimesheetFilter,) {
+export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate, filterStatus, onChangeStatus, data }: ITimesheetFilter,) {
     return (
         <>
             {
-                isOpen && <AddManualTimeModal
+                isOpen && <AddTaskModal
                     closeModal={closeModal}
                     isOpen={isOpen}
-                    params="AddManuelTime"
-                    timeSheetStatus="ManagerTimesheet"
                 />}
             <div className="flex w-full justify-between items-center">
                 <div>
                     <FilterWithStatus
+                        data={data}
                         activeStatus={filterStatus || "All Tasks"}
                         onToggle={(label) => onChangeStatus?.(label)}
                     />
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index f3b7df739..d8efb8505 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -43,25 +43,30 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		from: startOfDay(new Date()),
 		to: endOfDay(new Date())
 	});
-
-	const { timesheet } = useTimesheet({
+	const { timesheet, statusTimesheet } = useTimesheet({
 		startDate: dateRange.from ?? '',
 		endDate: dateRange.to ?? ''
 	});
 
 	const lowerCaseSearch = useMemo(() => search?.toLowerCase() ?? '', [search]);
-	const filterDataTimesheet = useMemo(
-		() =>
-			timesheet.filter((v) =>
-				v.tasks.some(
-					(task) =>
-						task.task?.title?.toLowerCase()?.includes(lowerCaseSearch) ||
-						task.employee?.fullName?.toLowerCase()?.includes(lowerCaseSearch) ||
-						task.project?.name?.toLowerCase()?.includes(lowerCaseSearch)
-				)
-			),
-		[timesheet, lowerCaseSearch]
-	);
+	const filterDataTimesheet = useMemo(() => {
+		const filteredTimesheet =
+			timesheet
+				.filter((v) =>
+					v.tasks.some(
+						(task) =>
+							task.task?.title?.toLowerCase()?.includes(lowerCaseSearch) ||
+							task.employee?.fullName?.toLowerCase()?.includes(lowerCaseSearch) ||
+							task.project?.name?.toLowerCase()?.includes(lowerCaseSearch)
+					)
+				);
+
+		return filteredTimesheet;
+	}, [
+		timesheet,
+		lowerCaseSearch,
+	]);
+
 
 	const {
 		isOpen: isManualTimeModalOpen,
@@ -166,8 +171,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 									/>
 								</div>
 							</div>
-
 							<TimesheetFilter
+								data={statusTimesheet}
 								onChangeStatus={setFilterStatus}
 								filterStatus={filterStatus}
 								initDate={{
@@ -210,7 +215,7 @@ const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({ mode, active, icon,
 		className={clsxm(
 			'text-[#7E7991]  font-medium w-[191px] h-[40px] flex items-center gap-x-4 text-[14px] px-2 rounded',
 			active &&
-				'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
+			'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
 		)}
 	>
 		{icon}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index c246038a8..98d431873 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -1,4 +1,4 @@
-import { timesheetDeleteState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
+import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
 import { useAtom } from 'jotai';
 import React from 'react';
 
@@ -8,6 +8,7 @@ export function useTimelogFilterOptions() {
     const [statusState, setStatusState] = useAtom(timesheetFilterStatusState);
     const [taskState, setTaskState] = useAtom(timesheetFilterTaskState);
     const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
+    const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState)
 
     const employee = employeeState;
     const project = projectState;
@@ -32,5 +33,7 @@ export function useTimelogFilterOptions() {
         handleSelectRowTimesheet,
         selectTimesheet,
         setSelectTimesheet,
+        timesheetGroupByDays,
+        setTimesheetGroupByDays
     };
 }
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 9c75b2b4e..ecd130a95 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -2,7 +2,7 @@ import { useAuthenticateUser } from './useAuthenticateUser';
 import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
 import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
@@ -29,7 +29,6 @@ interface DeleteTimesheetParams {
 const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
     type GroupedMap = Record<string, TimesheetLog[]>;
-
     const groupedByDate = items.reduce<GroupedMap>((acc, item) => {
         if (!item?.timesheet?.createdAt) {
             console.warn('Skipping item with missing timesheet or createdAt:', item);
@@ -52,7 +51,48 @@ const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
         .map(([date, tasks]) => ({ date, tasks }))
         .sort((a, b) => b.date.localeCompare(a.date));
 }
+const getWeekYearKey = (date: Date): string => {
+    const startOfYear = new Date(date.getFullYear(), 0, 1);
+    const daysSinceStart = Math.floor((date.getTime() - startOfYear.getTime()) / (1000 * 60 * 60 * 24));
+    const week = Math.ceil((daysSinceStart + startOfYear.getDay() + 1) / 7);
+    return `${date.getFullYear()}-W${week}`;
+};
+
 
+type GroupingKeyFunction = (date: Date) => string;
+
+const createGroupingFunction = (getKey: GroupingKeyFunction) => (items: TimesheetLog[]): GroupedTimesheet[] => {
+    if (!items?.length) return [];
+    type GroupedMap = Record<string, TimesheetLog[]>;
+
+    const grouped = items.reduce<GroupedMap>((acc, item) => {
+        if (!item?.timesheet?.createdAt) {
+            console.warn('Skipping item with missing timesheet or createdAt:', item);
+            return acc;
+        }
+        try {
+            const date = new Date(item.timesheet.createdAt);
+            const key = getKey(date);
+            if (!acc[key]) acc[key] = [];
+            acc[key].push(item);
+        } catch (error) {
+            console.error(
+                `Failed to process date for timesheet ${item.timesheet.id}:`,
+                { createdAt: item.timesheet.createdAt, error }
+            );
+        }
+        return acc;
+    }, {});
+
+    return Object.entries(grouped)
+        .map(([key, tasks]) => ({ date: key, tasks }))
+        .sort((a, b) => b.date.localeCompare(a.date));
+};
+
+const groupByWeek = createGroupingFunction(date => getWeekYearKey(date));
+const groupByMonth = createGroupingFunction(date =>
+    `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`
+);
 
 export function useTimesheet({
     startDate,
@@ -60,7 +100,7 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-    const { employee, project, task, statusState, selectTimesheet: logIds } = useTimelogFilterOptions();
+    const { employee, project, task, statusState, selectTimesheet: logIds, timesheetGroupByDays } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
     const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi)
 
@@ -159,19 +199,29 @@ export function useTimesheet({
     },
         [user, queryDeleteTimesheet, logIds, handleDeleteTimesheet] // deepscan-disable-line
     );
+    const timesheetElementGroup = useMemo(() => {
+        if (timesheetGroupByDays === 'Daily') {
+            return groupByDate(timesheet);
+        }
+        if (timesheetGroupByDays === 'Weekly') {
+            return groupByWeek(timesheet);
+        }
+        return groupByMonth(timesheet);
+    }, [timesheetGroupByDays, timesheet]);
+
 
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
-    }, [getTaskTimesheet, startDate, endDate]);
-
-
+    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays]);
 
     return {
         loadingTimesheet,
-        timesheet: groupByDate(timesheet),
+        timesheet: timesheetElementGroup,
         getTaskTimesheet,
         loadingDeleteTimesheet,
         deleteTaskTimesheet,
-        getStatusTimesheet
+        getStatusTimesheet,
+        timesheetGroupByDays,
+        statusTimesheet: getStatusTimesheet(timesheet.flat())
     };
 }
diff --git a/apps/web/app/interfaces/ITask.ts b/apps/web/app/interfaces/ITask.ts
index 1a50b539c..173288e0f 100644
--- a/apps/web/app/interfaces/ITask.ts
+++ b/apps/web/app/interfaces/ITask.ts
@@ -144,6 +144,10 @@ export type TimesheetStatus =
 	| "DENIED"
 	| "APPROVED";
 
+export type TimesheetFilterByDays =
+	| "Daily"
+	| "Weekly"
+	| "Monthly"
 
 export type ITaskStatusStack = {
 	status: ITaskStatus;
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 41354870f..3292d8690 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, OT_Member, TimesheetLog } from '../interfaces';
+import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -16,4 +16,5 @@ export const timesheetFilterProjectState = atom<IProject[]>([]);
 export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
 
 export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
-export const timesheetDeleteState = atom<string[]>([])
+export const timesheetDeleteState = atom<string[]>([]);
+export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 8d7c19c4b..60f1dfb29 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -52,7 +52,8 @@ import {
 	RejectSelectedModal,
 	StatusAction,
 	StatusType,
-	getTimesheetButtons
+	getTimesheetButtons,
+	statusTable
 } from '@/app/[locale]/timesheet/[memberId]/components';
 import { useTranslations } from 'next-intl';
 import { formatDate } from '@/app/helpers';
@@ -152,7 +153,7 @@ export const columns: ColumnDef<TimeSheet>[] = [
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const { isOpen, openModal, closeModal } = useModal();
 	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
-	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions();
+	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays } = useTimelogFilterOptions();
 	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 	const handleConfirm = () => {
 		try {
@@ -234,20 +235,25 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 				isOpen={isOpen}
 			/>
 			<div className="rounded-md">
-				{data?.map((plan, index) => (
-					<div key={index}>
+				{data?.map((plan, index) => {
+					return <div key={index}>
 						<div
 							className={clsxm(
 								'h-[48px] flex justify-between items-center w-full',
 								'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
 								'border-gray-400 px-5 text-[#71717A] font-medium'
 							)}>
-							<span>{formatDate(plan.date)}</span>
+							<div className='flex gap-x-3'>
+								{timesheetGroupByDays === 'Weekly' && (
+									<span>Week {index + 1}</span>
+								)}
+								<span>{formatDate(plan.date)}</span>
+							</div>
 							<TotalDurationByDate
 								timesheetLog={plan.tasks}
-								createdAt={formatDate(plan.date)} />
+								createdAt={formatDate(plan.date)}
+							/>
 						</div>
-
 						<Accordion type="single" collapsible>
 							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
 								<AccordionItem
@@ -343,7 +349,9 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 							))}
 						</Accordion>
 					</div>
-				))}
+				}
+
+				)}
 			</div>
 			<div className="flex items-center justify-end p-4 space-x-2">
 				<div className="flex-1 text-sm text-muted-foreground">
@@ -388,6 +396,7 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 	const { isOpen, closeModal, openModal } = useModal();
 	const [selected] = React.useState(selectedStatus);
 	const [newStatus, setNewStatus] = React.useState('');
+	const t = useTranslations();
 
 	const getColorClass = () => {
 		switch (selected) {
@@ -419,7 +428,7 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 				</SelectTrigger>
 				<SelectContent>
 					<SelectGroup className="rounded">
-						<SelectLabel>Status</SelectLabel>
+						<SelectLabel>{t('common.STATUS')}</SelectLabel>
 						{statusOptions.map((option, index) => (
 							<div key={option.value}>
 								<SelectItem value={option.value}>{option.label}</SelectItem>
@@ -437,6 +446,8 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 
 const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 	const { isOpen: isEditTask, openModal: isOpenModalEditTask, closeModal: isCloseModalEditTask } = useModal();
+	const t = useTranslations();
+
 	return (
 		<>
 			{<EditTaskModal
@@ -453,12 +464,12 @@ const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end">
 					<DropdownMenuItem className="cursor-pointer" onClick={isOpenModalEditTask}>
-						Edit
+						{t('common.EDIT')}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
 					<StatusTask />
 					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
-						Delete
+						{t('common.DELETE')}
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
@@ -490,10 +501,10 @@ export const StatusTask = () => {
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
-						{statusOptions?.map((status, index) => (
-							<DropdownMenuItem key={index} textValue={status.value} className="cursor-pointer">
+						{statusTable?.map((status, index) => (
+							<DropdownMenuItem key={index} textValue={status.label} className="cursor-pointer">
 								<div className="flex items-center gap-3">
-									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.value).bg)}></div>
+									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.label).bg)}></div>
 									<span>{status.label}</span>
 								</div>
 							</DropdownMenuItem>
@@ -503,7 +514,7 @@ export const StatusTask = () => {
 			</DropdownMenuSub>
 			<DropdownMenuSub>
 				<DropdownMenuSubTrigger>
-					<span>Billable</span>
+					<span>{t('pages.timesheet.BILLABLE.BILLABLE')}</span>
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>

From 528362cec61b5d366397968fb57b913f40bf05b5 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Sun, 24 Nov 2024 18:32:36 +0200
Subject: [PATCH 02/12] [Feat]: Add time Entry Modal and  Update Timesheet
 Status based on API response (#3365)

* feat: feat: add AddTimeEntyModal component for managing task entries with time and project association

* feat: update timesheet status based on API response

* feat: display total for pending tasks

* fix:coderabbitai

* fix:coderabbitai

* fix:coderabbitai

* fix:coderabbitai
---
 .../[memberId]/components/AddTaskModal.tsx    | 281 ++++++++++++++++--
 .../[memberId]/components/EditTaskModal.tsx   |  12 +-
 .../components/TimesheetFilterDate.tsx        |   2 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |   6 +-
 .../app/api/timer/timesheet/status/route.ts   |  69 +++++
 .../hooks/features/useTimelogFilterOptions.ts |  18 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  41 ++-
 apps/web/app/hooks/useScrollListener.ts       |  26 ++
 apps/web/app/interfaces/IDailyPlan.ts         |   7 +
 apps/web/app/interfaces/timer/ITimerLog.ts    |  29 ++
 .../services/client/api/timer/timer-log.ts    |  11 +-
 .../app/services/server/requests/timesheet.ts |  14 +-
 apps/web/app/stores/time-logs.ts              |   3 +-
 apps/web/components/ui/accordion.tsx          |   2 +-
 .../calendar/table-time-sheet.tsx             |  10 +-
 .../manual-time/manage-member-component.tsx   |   4 +-
 16 files changed, 476 insertions(+), 59 deletions(-)
 create mode 100644 apps/web/app/api/timer/timesheet/status/route.ts

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
index 86a6812f0..2df35bfe9 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -1,23 +1,34 @@
-import { useTeamTasks } from '@/app/hooks';
+import React from 'react'
+import { useTeamTasks, useTimelogFilterOptions } from '@/app/hooks';
 import { ITaskIssue } from '@/app/interfaces';
 import { clsxm } from '@/app/utils';
 import { Modal } from '@/lib/components'
 import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features';
 import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
 import { useTranslations } from 'next-intl';
-import React from 'react'
 import { ToggleButton } from './EditTaskModal';
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
+import { DatePickerFilter } from './TimesheetFilterDate';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select';
 export interface IAddTaskModalProps {
     isOpen: boolean;
     closeModal: () => void;
 }
 export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
+    const { generateTimeOptions } = useTimelogFilterOptions();
+    const timeOptions = generateTimeOptions(15);
     const t = useTranslations();
     const { activeTeam } = useTeamTasks();
     const [notes, setNotes] = React.useState('');
     const [task, setTasks] = React.useState('')
     const [isBillable, setIsBillable] = React.useState<boolean>(true);
-
+    const [dateRange, setDateRange] = React.useState<{ from: Date | null }>({
+        from: new Date(),
+    });
+    const handleFromChange = (fromDate: Date | null) => {
+        setDateRange((prev) => ({ ...prev, from: fromDate }));
+    };
     const projectItemsLists = {
         Project: activeTeam?.projects ?? [],
     };
@@ -34,7 +45,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
 
     const fields = [
         {
-            label: t('sidebar.PROJECTS'),
+            label: 'Link to Project',
             placeholder: 'Select a project',
             isRequired: true,
             valueKey: 'id',
@@ -47,13 +58,13 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
         <Modal
             isOpen={isOpen}
             closeModal={closeModal}
-            title={'ADD TASK'}
+            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]"
+            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"
             titleClass="font-bold flex justify-start w-full">
-            <div className="flex flex-col w-full gap-4 justify-start">
+            <div className="flex flex-col w-full gap-4 justify-start overflow-y-auto">
                 <div className=" w-full mr-[4%]">
-                    <label className="block text-[#282048] font-medium mb-1">
+                    <label className="block text-[#282048] dark:text-gray-400 font-medium mb-1">
                         Task
                         <span className="text-[#de5505e1] ml-1">*</span>
                     </label>
@@ -63,17 +74,19 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         type="Task"
                         value={task}
                         onChange={(e) => setTasks(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"
+                        className="w-full p-2 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
+                        placeholder='Bug for creating calendar view'
                         required
                     />
                 </div>
                 <div className=" w-full mr-[4%] flex items-center">
-                    <label className="block text-[#282048]  mb-1 px-2">
-                        {t('common.ISSUE_TYPE')}
+                    <label className="block text-[#282048] dark:text-gray-400  mb-1 px-2">
+                        Types
                         <span className="text-[#de5505e1] ml-1">*</span>:
                     </label>
                     <CustomSelect
-                        className='w-auto'
+                        ariaLabel='Task issues'
+                        className='w-32 bg-[#3826A633] text-primary font-medium'
                         options={Object.keys(taskIssues).flatMap((items) => items)}
                         renderOption={(option) => (
                             <div className="flex items-center gap-x-2">
@@ -88,11 +101,30 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         )}
                     />
                 </div>
-                <div className=" flex flex-col items-center w-full">
-                    <label className="text-[#282048] font-medium mr-12 capitalize">
+                <div>
+                    <OptimizedAccordion
+                        dateRange={dateRange}
+                        timeOptions={timeOptions}
+                        handleFromChange={handleFromChange} />
+                </div>
+
+                <div className="w-full flex flex-col">
+                    <ManageOrMemberComponent
+                        classNameTitle='text-[#282048] dark:text-gray-400 font-medium mr-12 capitalize'
+                        fields={fields}
+                        itemsLists={projectItemsLists}
+                        selectedValues={selectedValues}
+                        onSelectedValuesChange={handleSelectedValuesChange}
+                        handleChange={handleChange}
+                        itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
+                        itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
+                    />
+                </div>
+                <div className=" flex flex-col items-start w-full">
+                    <label className="text-[#282048] dark:text-gray-400 font-medium mr-12 capitalize">
                         {t('pages.timesheet.BILLABLE.BILLABLE').toLowerCase()
                         }</label>
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-start gap-3">
                         <ToggleButton
                             isActive={isBillable}
                             onClick={() => setIsBillable(true)}
@@ -105,19 +137,9 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         />
                     </div>
                 </div>
+
                 <div className="w-full flex flex-col">
-                    <ManageOrMemberComponent
-                        fields={fields}
-                        itemsLists={projectItemsLists}
-                        selectedValues={selectedValues}
-                        onSelectedValuesChange={handleSelectedValuesChange}
-                        handleChange={handleChange}
-                        itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
-                        itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
-                    />
-                </div>
-                <div className="w-full flex flex-col">
-                    <span className="text-[#282048] font-medium">Notes</span>
+                    <span className="text-[#282048] dark:text-gray-400 font-medium">Notes</span>
                     <textarea
                         value={notes}
                         onChange={(e) => setNotes(e.target.value)}
@@ -125,7 +147,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         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]",
+                            "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-36 bg-[#FBB6500D]",
                             notes.trim().length === 0 && "border-red-500"
                         )}
                         maxLength={120}
@@ -133,20 +155,23 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         aria-label="Insert notes here"
                         required
                     />
-                    <div className="text-sm text-[#282048] font-medium text-right">
+                    <div className="text-sm text-[#282048] dark:text-gray-400 font-medium text-right">
                         {notes.length}/{120}
                     </div>
                 </div>
                 <div className="flex items-center gap-x-2 justify-end w-full">
                     <button
                         type="button"
-                        className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
+                        onClick={closeModal}
+                        className={clsxm(
+                            "text-primary dark:text-primary-light h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light"
+                        )}>
                         {t('common.CANCEL')}
                     </button>
                     <button
                         type="submit"
                         className={clsxm(
-                            'bg-[#3826A6] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+                            'bg-primary dark:bg-primary-light h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
                         )}>
                         {t('common.SAVE')}
                     </button>
@@ -155,3 +180,197 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
         </Modal>
     )
 }
+interface ShiftTimingSelectProps {
+    label: string;
+    timeOptions: string[];
+    placeholder: string;
+    className?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+const ShiftTimingSelect = ({ label, timeOptions, placeholder, className, onChange, value }: ShiftTimingSelectProps) => (
+    <div className="flex items-center border border-gray-200 dark:border-gray-700 gap-2 rounded w-full">
+        <button className={clsxm("  border-r px-2 py-2 text-center flex items-center font-medium hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none", className)}>
+            {label}
+        </button>
+        <Select
+            onValueChange={onChange}
+            value={value}>
+            <SelectTrigger className="w-full text-ellipsis border-transparent rounded-none bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
+                <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent className="z-[10000] max-h-60 overflow-y-auto">
+                <SelectGroup>
+                    {timeOptions.map((time) => (
+                        <SelectItem
+                            key={time}
+                            value={time}
+                            className="hover:bg-primary focus:bg-primary hover:text-white px-2 py-1 cursor-pointer"
+                        >
+                            {time}
+                        </SelectItem>
+                    ))}
+                </SelectGroup>
+            </SelectContent>
+        </Select>
+    </div>
+);
+interface Shift {
+    startTime: string;
+    endTime: string;
+    totalHours: string;
+    dateFrom: Date | string
+}
+const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
+    dateRange: { from: Date | null };
+    handleFromChange: (date: Date | null) => void;
+    timeOptions: string[];
+}) => {
+    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 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,
+        { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },]);
+    };
+
+    const handleRemoveShift = (index: number) => {
+        const updatedShifts = shifts.filter((_, i) => i !== index);
+        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);
+            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);
+            });
+            if (isOverlapping) {
+                return;
+            }
+        }
+        setShifts(updatedShifts);
+    };
+
+    return (
+        <>
+            {shifts.map((element, index) => {
+                return <Accordion key={index} type="single" collapsible className="w-full p-1">
+                    <AccordionItem value={`item-${index}`}
+                        className="border rounded">
+                        <AccordionTrigger className="flex flex-row-reverse justify-end h-10 p-1 items-center hover:no-underline">
+                            <div className="flex items-center justify-between w-full">
+                                <label className="block text-[#282048] dark:text-gray-400 mb-1 px-2">
+                                    Date and Time
+                                    <span className="text-[#de5505e1] ml-1">*</span>:
+                                </label>
+                                <span
+                                    onClick={() => handleRemoveShift(index)}
+                                    className="hover:underline font-normal text-primary dark:text-primary-light cursor-pointer">
+                                    Remove Period
+                                </span>
+                            </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="p-2">
+                            <div className="flex flex-col gap-2">
+
+                                <ShiftManagement
+                                    value={element}
+                                    index={index}
+                                    onChange={handleShiftChange}
+                                    timeOptions={timeOptions}
+                                />
+
+                            </div>
+                        </AccordionContent>
+                    </AccordionItem>
+                </Accordion>
+            })}
+            <button onClick={handleAddShift} className='flex items-center justify-start gap-2 cursor-pointer'>
+                <div className='bg-[#3826A6] dark:bg-primary-light p-[0.5] rounded text-white'>
+                    <PlusIcon />
+                </div>
+                <span className='text-[#3826A6] dark:text-primary-light hover:underline'>Add Another Period</span>
+            </button>
+        </>
+
+    )
+};
+
+const ShiftManagement = (
+    { onChange, value, index, timeOptions }: {
+        onChange: (index: number, field: keyof Shift, value: string) => void,
+        value: Shift, index: number, timeOptions: string[]
+    }) => {
+    return (
+
+        <>
+            <div className="w-[212px]">
+                <span>Date</span>
+                <DatePickerFilter
+                    label={value.dateFrom ? value.dateFrom.toLocaleString() : 'Select Date'}
+                    date={value.dateFrom as Date}
+                    setDate={(value) => onChange(index, 'dateFrom', value as any)}
+                />
+            </div>
+            <div className="flex flex-col w-full items-start gap-2">
+                <span className="font-medium">Shift Timing</span>
+                <div className="flex items-center w-full justify-between gap-4 mb-4">
+                    <ShiftTimingSelect
+                        label="Start"
+                        timeOptions={timeOptions}
+                        placeholder="00:00"
+                        className="bg-[#30B3661A]"
+                        value={value.startTime}
+                        onChange={(value) => onChange(index, 'startTime', value)}
+                    />
+                    <ShiftTimingSelect
+                        label="End"
+                        timeOptions={timeOptions}
+                        placeholder="00:00"
+                        className="bg-[#DA27271A]"
+                        value={value.endTime}
+                        onChange={(value) => onChange(index, 'endTime', value)}
+                    />
+                    <button className="bg-gray-100 dark:bg-gray-800 border-r px-2 py-2 text-center flex items-center font-medium hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
+                        {value.totalHours}
+                    </button>
+                </div>
+            </div>
+        </>
+
+    );
+};
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index ae018d1b1..7e5274976 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -172,7 +172,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						</div>
 					</div>
 					<div className="w-full flex flex-col">
-						<span className="text-[#282048] dark:text-gray-500  ">Notes</span>
+						<span className="text-[#282048] dark:text-gray-400  ">Notes</span>
 						<textarea
 							value={notes}
 							onChange={(e) => setNotes(e.target.value)}
@@ -211,13 +211,13 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						<div className="flex items-center gap-x-2 justify-end w-full">
 							<button
 								type="button"
-								className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
+								className={clsxm("dark:text-primary-light h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
 								{t('common.CANCEL')}
 							</button>
 							<button
 								type="submit"
 								className={clsxm(
-									'bg-[#4435a1] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+									'bg-primary dark:bg-primary-light h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
 								)}>
 								{t('common.SAVE')}
 							</button>
@@ -242,17 +242,17 @@ export const ToggleButton = ({ isActive, onClick, label }: ToggleButtonProps) =>
 		onClick={onClick}
 		aria-pressed={isActive}
 		className={clsxm(
-			'flex items-center gap-x-2 p-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/50',
+			'flex items-center gap-x-2 p-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/50 dark:focus:ring-primary-light/50',
 			'transition-colors duration-200 ease-in-out'
 		)}
 	>
 		<div
 			className={clsxm(
 				'w-4 h-4 rounded-full transition-colors duration-200 ease-in-out',
-				isActive ? 'bg-primary' : 'bg-gray-200'
+				isActive ? 'bg-primary dark:bg-primary-light' : 'bg-gray-200'
 			)}
 		/>
-		<span className={clsxm('', isActive && 'text-primary')}>
+		<span className={clsxm('', isActive && 'text-primary dark:text-primary-light')}>
 			{label}
 		</span>
 	</button>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index 89726ea65..5c50e0631 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -336,7 +336,7 @@ export const FilterCalendar = memo(function FuturePlansCalendar<T extends { date
 			toYear={
 				endYear ||
 				new Date(sortedPlansByDateDesc?.[sortedPlansByDateDesc?.length - 1]?.date ?? Date.now()).getFullYear() +
-					10
+				10
 			}
 		/>
 	);
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index d8efb8505..14218b4de 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -48,6 +48,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		endDate: dateRange.to ?? ''
 	});
 
+
+
 	const lowerCaseSearch = useMemo(() => search?.toLowerCase() ?? '', [search]);
 	const filterDataTimesheet = useMemo(() => {
 		const filteredTimesheet =
@@ -66,8 +68,6 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		timesheet,
 		lowerCaseSearch,
 	]);
-
-
 	const {
 		isOpen: isManualTimeModalOpen,
 		openModal: openManualTimeModal,
@@ -119,7 +119,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 							</div>
 							<div className="flex items-center justify-between w-full gap-6 pt-4">
 								<TimesheetCard
-									count={72}
+									count={statusTimesheet.PENDING.length}
 									title="Pending Tasks"
 									description="Tasks waiting for your approval"
 									icon={<GrTask className="font-bold" />}
diff --git a/apps/web/app/api/timer/timesheet/status/route.ts b/apps/web/app/api/timer/timesheet/status/route.ts
new file mode 100644
index 000000000..cda2aeb28
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/status/route.ts
@@ -0,0 +1,69 @@
+import { ID } from "@/app/interfaces";
+import { authenticatedGuard } from "@/app/services/server/guards/authenticated-guard-app";
+import { updateStatusTimesheetRequest } from "@/app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function PUT(req: Request) {
+    const res = new NextResponse();
+    const {
+        $res,
+        user,
+        tenantId,
+        organizationId,
+        access_token
+    } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        const { searchParams } = new URL(req.url);
+
+        const rawIds = searchParams.get('ids');
+        const status = searchParams.get('status');
+
+        if (!rawIds || !status) {
+            return $res({
+                success: false,
+                message: 'Missing required parameters'
+            });
+        }
+        let ids: ID[];
+        try {
+            ids = JSON.parse(rawIds);
+            if (!Array.isArray(ids) || !ids.length) {
+                throw new Error('Invalid ids format');
+            }
+        } catch (error) {
+            return $res({
+                success: false,
+                message: 'Invalid ids format'
+            });
+        }
+        const validStatuses = ['pending', 'approved', 'rejected'];
+        if (!validStatuses.includes(status)) {
+            return $res({
+                success: false,
+                message: 'Invalid status value'
+            });
+        }
+        const { data } = await updateStatusTimesheetRequest(
+            {
+                ids,
+                organizationId,
+                status,
+                tenantId
+            },
+            access_token
+        );
+
+        return $res({
+            success: true,
+            data
+        });
+    } catch (error) {
+        console.error('Error updating timesheet status:', error);
+        return $res({
+            success: false,
+            message: 'Failed to update timesheet status'
+        });
+    }
+}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index 98d431873..b37953048 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -1,4 +1,4 @@
-import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
+import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState, timesheetUpdateStatus } from '@/app/stores';
 import { useAtom } from 'jotai';
 import React from 'react';
 
@@ -8,12 +8,21 @@ export function useTimelogFilterOptions() {
     const [statusState, setStatusState] = useAtom(timesheetFilterStatusState);
     const [taskState, setTaskState] = useAtom(timesheetFilterTaskState);
     const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
-    const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState)
+    const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState);
+    const [puTimesheetStatus, setPuTimesheetStatus] = useAtom(timesheetUpdateStatus)
 
     const employee = employeeState;
     const project = projectState;
     const task = taskState
 
+    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 handleSelectRowTimesheet = (items: string) => {
         setSelectTimesheet((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
@@ -34,6 +43,9 @@ export function useTimelogFilterOptions() {
         selectTimesheet,
         setSelectTimesheet,
         timesheetGroupByDays,
-        setTimesheetGroupByDays
+        setTimesheetGroupByDays,
+        generateTimeOptions,
+        setPuTimesheetStatus,
+        puTimesheetStatus
     };
 }
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index ecd130a95..75be26e60 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -3,9 +3,9 @@ import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
 import { useCallback, useEffect, useMemo } from 'react';
-import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
+import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi, updateStatusTimesheetFromApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
-import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
+import { ID, TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
@@ -100,9 +100,10 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-    const { employee, project, task, statusState, selectTimesheet: logIds, timesheetGroupByDays } = useTimelogFilterOptions();
+    const { employee, project, task, statusState, selectTimesheet: logIds, timesheetGroupByDays, puTimesheetStatus } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
-    const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi)
+    const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi);
+    const { loading: loadingUpdateTimesheetStatus, queryCall: queryUpdateTimesheetStatus } = useQuery(updateStatusTimesheetFromApi)
 
 
     const getTaskTimesheet = useCallback(
@@ -137,6 +138,31 @@ export function useTimesheet({
         ]
     );
 
+    const updateTimesheetStatus = useCallback(
+        ({ status, ids }: { status: TimesheetStatus, ids: ID[] | ID }) => {
+            if (!user) return;
+            queryUpdateTimesheetStatus({ ids, status })
+                .then((response) => {
+                    const updatedData = timesheet.map(item => {
+                        const newItem = response.data.find(newItem => newItem.id === item.timesheet.id);
+                        if (newItem) {
+                            return {
+                                ...item,
+                                timesheet: {
+                                    ...item.timesheet,
+                                    status: newItem.status
+                                }
+                            };
+                        }
+                        return item;
+                    });
+                    setTimesheet(updatedData);
+                })
+                .catch((error) => {
+                    console.error('Error fetching timesheet:', error);
+                });
+        }, [queryUpdateTimesheetStatus])
+
     const getStatusTimesheet = (items: TimesheetLog[] = []) => {
         const STATUS_MAP: Record<TimesheetStatus, TimesheetLog[]> = {
             PENDING: [],
@@ -212,7 +238,7 @@ export function useTimesheet({
 
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
-    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays]);
+    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays, timesheet]);
 
     return {
         loadingTimesheet,
@@ -222,6 +248,9 @@ export function useTimesheet({
         deleteTaskTimesheet,
         getStatusTimesheet,
         timesheetGroupByDays,
-        statusTimesheet: getStatusTimesheet(timesheet.flat())
+        statusTimesheet: getStatusTimesheet(timesheet.flat()),
+        updateTimesheetStatus,
+        loadingUpdateTimesheetStatus,
+        puTimesheetStatus
     };
 }
diff --git a/apps/web/app/hooks/useScrollListener.ts b/apps/web/app/hooks/useScrollListener.ts
index eb0ef9c4b..8b5343169 100644
--- a/apps/web/app/hooks/useScrollListener.ts
+++ b/apps/web/app/hooks/useScrollListener.ts
@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { TimesheetLog } from '../interfaces';
 
 export function useScrollListener() {
 	const [scrolling, setScrolling] = React.useState(false);
@@ -20,3 +21,28 @@ export function useScrollListener() {
 
 	return { scrolling };
 }
+
+
+
+export const useInfinityScroll = (timesheet: TimesheetLog[]) => {
+
+	const [items, setItems] = React.useState<TimesheetLog[]>(timesheet);
+	const [page, setPage] = React.useState(1);
+	const [isLoading, setIsLoading] = React.useState(false);
+
+
+	React.useEffect(() => {
+		const handleScroll = () => {
+			if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 && !isLoading) {
+				setPage((prevPage) => prevPage + 1);
+			}
+		};
+		window.addEventListener("scroll", handleScroll);
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, [isLoading]);
+
+
+	return { items, page, setIsLoading, setItems }
+}
diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts
index e296af463..c7aa0324e 100644
--- a/apps/web/app/interfaces/IDailyPlan.ts
+++ b/apps/web/app/interfaces/IDailyPlan.ts
@@ -38,4 +38,11 @@ export enum DailyPlanStatusEnum {
 	COMPLETED = 'completed'
 }
 
+export interface IUpdateTimesheetStatus {
+	ids: ID[] | ID,
+	organizationId?: ID,
+	status: ID,
+	tenantId?: ID
+}
+
 export type IDailyPlanMode = 'today' | 'tomorrow' | 'custom';
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index d6e469d25..13952ec97 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -108,3 +108,32 @@ export interface TimesheetLog extends BaseEntity {
     duration: number;
     isEdited: boolean;
 }
+
+
+
+export interface UpdateTimesheetStatus extends BaseEntity {
+    isActive: boolean;
+    isArchived: boolean;
+    archivedAt: string | null;
+    duration: number;
+    keyboard: number;
+    mouse: number;
+    overall: number;
+    startedAt: string;
+    stoppedAt: string;
+    approvedAt: string | null;
+    submittedAt: string | null;
+    lockedAt: string | null;
+    editedAt: string | null;
+    isBilled: boolean;
+    status:
+    | "DRAFT"
+    | "PENDING"
+    | "IN REVIEW"
+    | "DENIED"
+    | "APPROVED";
+    employeeId: string;
+    approvedById: string | null;
+    employee: Employee;
+    isEdited: boolean;
+}
diff --git a/apps/web/app/services/client/api/timer/timer-log.ts b/apps/web/app/services/client/api/timer/timer-log.ts
index 7ba7347c5..8e4682ef5 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,5 +1,6 @@
-import { TimesheetLog, ITimerStatus } from '@app/interfaces';
-import { get, deleteApi } from '../../axios';
+import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus } from '@app/interfaces';
+import { get, deleteApi, put } from '../../axios';
+import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export async function getTimerLogs(
 	tenantId: string,
@@ -120,3 +121,9 @@ export async function deleteTaskTimesheetLogsApi({
 		throw new Error(`Failed to delete timesheet logs`);
 	}
 }
+
+export function updateStatusTimesheetFromApi(data: IUpdateTimesheetStatus) {
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+	return put<UpdateTimesheetStatus[]>(`/timesheet/status`, { ...data, organizationId }, { tenantId });
+}
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index 4040697dd..cc0f06a78 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,8 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { TimesheetLog } from '@/app/interfaces/timer/ITimerLog';
+import { TimesheetLog, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
+import { IUpdateTimesheetStatus } from '@/app/interfaces';
 
 export type TTasksTimesheetStatisticsParams = {
 	tenantId: string;
@@ -95,3 +96,14 @@ export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer
 		tenantId: params.tenantId
 	});
 }
+
+
+export function updateStatusTimesheetRequest(params: IUpdateTimesheetStatus, bearer_token: string) {
+	return serverFetch<UpdateTimesheetStatus[]>({
+		path: '/timesheet/status',
+		method: 'PUT',
+		body: { ...params },
+		bearer_token,
+		tenantId: params.tenantId,
+	})
+}
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 3292d8690..31270c973 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog } from '../interfaces';
+import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog, UpdateTimesheetStatus } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -18,3 +18,4 @@ export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
 export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
 export const timesheetDeleteState = atom<string[]>([]);
 export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
+export const timesheetUpdateStatus = atom<UpdateTimesheetStatus[]>([])
diff --git a/apps/web/components/ui/accordion.tsx b/apps/web/components/ui/accordion.tsx
index c60b2759b..4465d5c73 100644
--- a/apps/web/components/ui/accordion.tsx
+++ b/apps/web/components/ui/accordion.tsx
@@ -29,7 +29,7 @@ const AccordionTrigger = React.forwardRef<
 		>
 			<>
 				{children}
-				<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+				<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 -rotate-90" />
 			</>
 		</AccordionPrimitive.Trigger>
 	</AccordionPrimitive.Header>
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 60f1dfb29..6b9112294 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -467,7 +467,7 @@ const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 						{t('common.EDIT')}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
-					<StatusTask />
+					<StatusTask ids={dataTimesheet.timesheet.id} />
 					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
 						{t('common.DELETE')}
 					</DropdownMenuItem>
@@ -491,8 +491,9 @@ const TaskDetails = ({ description, name }: { description: string; name: string
 	);
 };
 
-export const StatusTask = () => {
+export const StatusTask = ({ ids }: { ids: string }) => {
 	const t = useTranslations();
+	const { updateTimesheetStatus } = useTimesheet({});
 	return (
 		<>
 			<DropdownMenuSub>
@@ -502,7 +503,10 @@ export const StatusTask = () => {
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
 						{statusTable?.map((status, index) => (
-							<DropdownMenuItem key={index} textValue={status.label} className="cursor-pointer">
+							<DropdownMenuItem onClick={() => updateTimesheetStatus({
+								status: status.label as TimesheetStatus,
+								ids: [ids]
+							})} key={index} textValue={status.label} className="cursor-pointer">
 								<div className="flex items-center gap-3">
 									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.label).bg)}></div>
 									<span>{status.label}</span>
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 056a04db0..b9e5a8fc6 100644
--- a/apps/web/lib/features/manual-time/manage-member-component.tsx
+++ b/apps/web/lib/features/manual-time/manage-member-component.tsx
@@ -1,3 +1,4 @@
+import { clsxm } from "@/app/utils";
 import { CustomCombobox } from "lib/components/combobox";
 
 
@@ -93,6 +94,7 @@ export const ManageOrMemberComponent = <T extends Item>({
     handleChange,
     itemToString,
     itemToValue,
+    classNameTitle
 }: ManageOrMemberComponentProps<T>): JSX.Element => {
 
     /**
@@ -116,7 +118,7 @@ export const ManageOrMemberComponent = <T extends Item>({
             {fields.map((field, index) => (
                 <div key={index} className="mb-4">
                     <label className="block text-gray-600 mb-1 text-sm">
-                        <span className="text-[14px]">{field.label}</span>
+                        <span className={clsxm("text-[14px]", classNameTitle)}>{field.label}</span>
                         {field.isRequired && <span className="text-[#de5505e1] ml-1 text-sm">*</span>}
                     </label>
                     <CustomCombobox

From 897ad0440d995ed6e0fad12aafea7a3e3e571311 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:23:11 +0200
Subject: [PATCH 03/12] [Feat]: Add sortable headers to Timesheet component
 with dynamic sorting (#3367)

* Add sortable headers to Timesheet component with dynamic sorting logic for columns

* fix:deepscan

* fix: coderabbitai

* fix: coderabbitai
---
 .../[memberId]/components/TimesheetLoader.tsx |  23 +++
 .../[memberId]/components/TimesheetView.tsx   |  33 ++--
 .../timesheet/[memberId]/components/index.tsx |   1 +
 .../[locale]/timesheet/[memberId]/page.tsx    |   5 +-
 .../hooks/features/useTimelogFilterOptions.ts |  14 ++
 .../calendar/table-time-sheet.tsx             | 144 ++++++++++++++++--
 6 files changed, 191 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx
new file mode 100644
index 000000000..326e9bdfb
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx
@@ -0,0 +1,23 @@
+import { BackdropLoader } from "@/lib/components";
+import { useEffect, useState } from "react";
+
+export function TimesheetLoader({ show = false }: { show?: boolean }) {
+    const [dots, setDots] = useState("");
+
+    useEffect(() => {
+        if (!show) {
+            setDots(""); // Reset the dots when loader is hidden
+            return;
+        }
+
+        const interval = setInterval(() => {
+            setDots((prev) => (prev.length < 3 ? prev + "." : ""));
+        }, 1000); // Update dots every second
+
+        return () => clearInterval(interval); // Cleanup interval on unmount or when `show` changes
+    }, [show]);
+
+    return (
+        <BackdropLoader show={show} title={`Loading${dots}`} />
+    );
+}
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index aed47e2c3..4fd852b36 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -2,23 +2,28 @@ import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
-export function TimesheetView({ data }: { data?: GroupedTimesheet[] }) {
+export function TimesheetView({ data, loading }: { data?: GroupedTimesheet[]; loading?: boolean }) {
 	const t = useTranslations();
+
+	if (loading || !data) {
+		return (
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex items-center justify-center">
+				<p>{t('pages.timesheet.LOADING')}</p>
+			</div>
+		);
+	}
+
+	if (data.length === 0) {
+		return (
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex flex-col items-center justify-center h-full min-h-[280px]">
+				<p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
+			</div>
+		);
+	}
+
 	return (
 		<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
-			{data ? (
-				data.length > 0 ? (
-					<DataTableTimeSheet data={data} />
-				) : (
-					<div className="flex items-center justify-center h-full min-h-[280px]">
-						<p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
-					</div>
-				)
-			) : (
-				<div className="flex items-center justify-center h-full">
-					<p>{t('pages.timesheet.LOADING')}</p>
-				</div>
-			)}
+			<DataTableTimeSheet data={data} />
 		</div>
 	);
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
index 5c0dea0a2..06948073c 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
@@ -9,3 +9,4 @@ export * from './TimeSheetFilterPopover'
 export * from './TimesheetAction';
 export * from './RejectSelectedModal';
 export * from './EditTaskModal';
+export * from './TimesheetLoader'
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 14218b4de..863759acc 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -43,7 +43,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		from: startOfDay(new Date()),
 		to: endOfDay(new Date())
 	});
-	const { timesheet, statusTimesheet } = useTimesheet({
+	const { timesheet, statusTimesheet, loadingTimesheet } = useTimesheet({
 		startDate: dateRange.from ?? '',
 		endDate: dateRange.to ?? ''
 	});
@@ -195,7 +195,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 						{/* <DropdownMenuDemo /> */}
 						<div className="border border-gray-200 rounded-lg dark:border-gray-800">
 							{timesheetNavigator === 'ListView' ? (
-								<TimesheetView data={filterDataTimesheet} />
+								<TimesheetView data={filterDataTimesheet}
+									loading={loadingTimesheet} />
 							) : (
 								<CalendarView />
 							)}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index b37953048..a8fdc2fd8 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -10,6 +10,7 @@ export function useTimelogFilterOptions() {
     const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
     const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState);
     const [puTimesheetStatus, setPuTimesheetStatus] = useAtom(timesheetUpdateStatus)
+    const [selectedItems, setSelectedItems] = React.useState<{ status: string; date: string }[]>([]);
 
     const employee = employeeState;
     const project = projectState;
@@ -26,6 +27,17 @@ export function useTimelogFilterOptions() {
     const handleSelectRowTimesheet = (items: string) => {
         setSelectTimesheet((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
+
+    const handleSelectRowByStatusAndDate = (status: string, date: string) => {
+        setSelectedItems((prev) =>
+            prev.some((item) => item.status === status && item.date === date)
+                ? prev.filter((item) => !(item.status === status && item.date === date))
+                : [...prev, { status, date }]
+        );
+    }
+
+
+
     React.useEffect(() => {
         return () => setSelectTimesheet([]);
     }, []);
@@ -40,6 +52,8 @@ export function useTimelogFilterOptions() {
         setTaskState,
         setStatusState,
         handleSelectRowTimesheet,
+        handleSelectRowByStatusAndDate,
+        selectedItems,
         selectTimesheet,
         setSelectTimesheet,
         timesheetGroupByDays,
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 6b9112294..5326b964c 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -38,7 +38,9 @@ import {
 	MdKeyboardDoubleArrowLeft,
 	MdKeyboardDoubleArrowRight,
 	MdKeyboardArrowLeft,
-	MdKeyboardArrowRight
+	MdKeyboardArrowRight,
+	MdKeyboardArrowUp,
+	MdKeyboardArrowDown
 } from 'react-icons/md';
 import { ConfirmStatusChange, StatusBadge, statusOptions, dataSourceTimeSheet, TimeSheet } from '.';
 import { useModal, useTimelogFilterOptions } from '@app/hooks';
@@ -153,7 +155,7 @@ export const columns: ColumnDef<TimeSheet>[] = [
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const { isOpen, openModal, closeModal } = useModal();
 	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
-	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays } = useTimelogFilterOptions();
+	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays, handleSelectRowByStatusAndDate } = useTimelogFilterOptions();
 	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 	const handleConfirm = () => {
 		try {
@@ -195,7 +197,9 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 			rowSelection
 		}
 	});
-
+	const handleSort = (key: string, order: SortOrder) => {
+		console.log(`Sorting ${key} in ${order} order`);
+	};
 	const handleButtonClick = (action: StatusAction) => {
 		switch (action) {
 			case 'Approved':
@@ -211,7 +215,6 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 				console.error(`Unsupported action: ${action}`);
 		}
 	};
-
 	return (
 		<div className="w-full dark:bg-dark--theme">
 			<AlertDialogConfirmation
@@ -255,11 +258,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 							/>
 						</div>
 						<Accordion type="single" collapsible>
-							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
-								<AccordionItem
+							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => {
+								return rows.length > 0 && status && <AccordionItem
 									key={status}
 									value={status === 'DENIED' ? 'REJECTED' : status}
-									className="p-1 rounded"
+									className={clsxm("p-1 rounded")}
 								>
 									<AccordionTrigger
 										style={{ backgroundColor: statusColor(status).bgOpacity }}
@@ -276,7 +279,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 													<span className="text-base font-normal text-gray-400 uppercase">
 														{status === 'DENIED' ? 'REJECTED' : status}
 													</span>
-													<span className="text-gray-400 text-[14px]">({rows?.length})</span>
+													<span className="text-gray-400 text-[14px]">({rows.length})</span>
 												</div>
 												<Badge
 													variant={'outline'}
@@ -292,7 +295,15 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 										</div>
 									</AccordionTrigger>
 									<AccordionContent className="flex flex-col w-full">
-										{rows?.map((task) => (
+										<HeaderRow
+											handleSelectRowByStatusAndDate={
+												() => handleSelectRowByStatusAndDate(status, plan.date)}
+											data={rows}
+											status={status}
+											onSort={handleSort}
+											date={plan.date}
+										/>
+										{rows.map((task) => (
 											<div
 												key={task.id}
 												style={{
@@ -335,7 +346,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 													<Badge
 														className={`${getBadgeColor(task.timesheet.status as TimesheetStatus)}  rounded-md py-1 px-2 text-center font-medium text-black`}
 													>
-														{task.timesheet.status}
+														{task.timesheet.status === 'DENIED' ? 'REJECTED' : task.timesheet.status}
 													</Badge>
 												</div>
 												<DisplayTimeForTimesheet
@@ -346,11 +357,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 										))}
 									</AccordionContent>
 								</AccordionItem>
-							))}
+							}
+							)}
 						</Accordion>
 					</div>
 				}
-
 				)}
 			</div>
 			<div className="flex items-center justify-end p-4 space-x-2">
@@ -388,7 +399,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 					</Button>
 				</div>
 			</div>
-		</div>
+		</div >
 	);
 }
 
@@ -555,3 +566,110 @@ const getBadgeColor = (timesheetStatus: TimesheetStatus | null) => {
 			return 'bg-gray-100';
 	}
 };
+
+
+type SortOrder = "ASC" | "DESC";
+
+const HeaderColumn = ({
+	label,
+	onSort,
+	currentSort,
+}: {
+	label: string;
+	onSort: () => void;
+	currentSort: SortOrder | null;
+}) => (
+	<div className="flex gap-x-2" role="columnheader">
+		<span>{label}</span>
+		<button
+			onClick={onSort}
+			aria-label={`Sort ${label} column ${currentSort ? `currently ${currentSort.toLowerCase()}` : ''}`}
+			className="flex flex-col items-start leading-none gap-0"
+		>
+			<MdKeyboardArrowUp
+				style={{
+					height: 10,
+					color: "#71717A",
+				}}
+			/>
+			<MdKeyboardArrowDown
+				style={{
+					height: 10,
+					color: "#71717A",
+				}}
+			/>
+		</button>
+	</div>
+);
+
+const HeaderRow = ({
+	status,
+	onSort,
+	data,
+	handleSelectRowByStatusAndDate, date
+}: {
+	status: string;
+	onSort: (key: string, order: SortOrder) => void,
+	data: TimesheetLog[],
+	handleSelectRowByStatusAndDate: (status: string, date: string) => void,
+	date?: string
+}) => {
+
+	const { bg, bgOpacity } = statusColor(status);
+	const [sortState, setSortState] = React.useState<{ [key: string]: SortOrder | null }>({
+		Task: null,
+		Project: null,
+		Employee: null,
+		Status: null,
+	});
+
+	const handleSort = (key: string) => {
+		const newOrder = sortState[key] === "ASC" ? "DESC" : "ASC";
+		setSortState({ ...sortState, [key]: newOrder });
+		onSort(key, newOrder);
+	};
+
+	return (
+		<div
+			style={{ backgroundColor: bgOpacity, borderBottomColor: bg }}
+			className="flex items-center text-[#71717A] font-medium border-b border-t dark:border-gray-600 space-x-4 p-1 h-[60px] w-full"
+		>
+			<Checkbox
+				onCheckedChange={() => date && handleSelectRowByStatusAndDate(status, date)}
+				className="w-5 h-5"
+				disabled={!date}
+			/>
+			<div className="flex-[2]">
+				<HeaderColumn
+					label="Task"
+					onSort={() => handleSort("Task")}
+					currentSort={sortState["Task"]}
+				/>
+			</div>
+			<div className="flex-1">
+				<HeaderColumn
+					label="Project"
+					onSort={() => handleSort("Project")}
+					currentSort={sortState["Project"]}
+				/>
+			</div>
+			<div className="flex-1">
+				<HeaderColumn
+					label="Employee"
+					onSort={() => handleSort("Employee")}
+					currentSort={sortState["Employee"]}
+				/>
+			</div>
+			<div className="flex-auto">
+				<HeaderColumn
+					label="Status"
+					onSort={() => handleSort("Status")}
+					currentSort={sortState["Status"]}
+				/>
+			</div>
+			<div className="space-x-2">
+				<span>Time</span>
+			</div>
+		</div>
+	);
+};

From aab335d4e33b0aaf2a3e1e3a95c5e7b375da6908 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:24:17 +0200
Subject: [PATCH 04/12] [Feat]: Timesheet Calendar View UI (#3369)

* feat:timesheet calendar view ui init

* feat:timesheet calendar view ui daily

* fix:cspell

* fix:cspell

* fix:coderabbitai

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 .../[memberId]/components/CalendarView.tsx    | 140 +++++++++++++++++-
 .../components/CompactTimesheetComponent.tsx  |  46 ++++++
 .../timesheet/[memberId]/components/index.tsx |   6 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |   2 +-
 apps/web/lib/components/types.ts              |   7 +
 .../calendar/table-time-sheet.tsx             |   7 +-
 apps/web/lib/features/task/task-displays.tsx  |   6 +-
 7 files changed, 202 insertions(+), 12 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
index 724bb0e9c..ca6cd2900 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
@@ -1,7 +1,143 @@
+import { GroupedTimesheet, useTimesheet } from "@/app/hooks/features/useTimesheet";
+import { clsxm } from "@/app/utils";
+import { statusColor } from "@/lib/components";
+import { DisplayTimeForTimesheet, TaskNameInfoDisplay, TotalDurationByDate, TotalTimeDisplay } from "@/lib/features";
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@components/ui/accordion";
+import { Accordion } from "@radix-ui/react-accordion";
+import { TranslationHooks, useTranslations } from "next-intl";
+import React from "react";
+import { EmployeeAvatar } from "./CompactTimesheetComponent";
+import { formatDate } from "@/app/helpers";
+import { ClockIcon } from "lucide-react";
 
-export function CalendarView() {
+export function CalendarView({ data }: { data?: GroupedTimesheet[] }) {
+    const t = useTranslations();
     return (
-        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
+        <div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
+            {data ? (
+                data.length > 0 ? (
+                    <CalendarDataView data={data} t={t} />
+                ) : (
+                    <div className="flex items-center justify-center h-full min-h-[280px]">
+                        <p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
+                    </div>
+                )
+            ) : (
+                <div className="flex items-center justify-center h-full">
+                    <p>{t('pages.timesheet.LOADING')}</p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const CalendarDataView = ({ data, t }: { data?: GroupedTimesheet[], t: TranslationHooks }) => {
+    const { getStatusTimesheet } = useTimesheet({});
+
+    return (
+        <div className="w-full dark:bg-dark--theme">
+            <div className="rounded-md">
+                {data?.map((plan, index) => {
+                    return <div key={index}>
+                        <div
+                            className={clsxm(
+                                'h-[40px] flex justify-between items-center w-full',
+                                'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
+                                'border-gray-400 px-5 text-[#71717A] font-medium'
+                            )}>
+                            <div className='flex gap-x-3'>
+                                <span>{formatDate(plan.date)}</span>
+                            </div>
+                            <div className="flex items-center gap-x-1">
+                                <span className="text-[#868687]">Total{" : "}</span>
+
+                                <TotalDurationByDate
+                                    timesheetLog={plan.tasks}
+                                    createdAt={formatDate(plan.date)}
+                                    className="text-black dark:text-gray-500 text-sm"
+                                />
+                            </div>
+                        </div>
+                        <Accordion type="single" collapsible>
+                            {Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
+                                rows.length > 0 && status && <AccordionItem
+                                    key={status}
+                                    value={status === 'DENIED' ? 'REJECTED' : status}
+                                    className="p-1 rounded"
+                                >
+                                    <AccordionTrigger
+                                        type="button"
+                                        className={clsxm(
+                                            'flex flex-row-reverse justify-end items-center w-full h-[30px] rounded-sm gap-x-2 hover:no-underline px-2',
+                                            statusColor(status).text
+                                        )}
+                                    >
+                                        <div className="flex items-center justify-between space-x-1 w-full">
+                                            <div className="flex items-center  w-full gap-2">
+                                                <div className={clsxm('p-2 rounded', statusColor(status).bg)}></div>
+                                                <div className="flex items-center gap-x-1">
+                                                    <span className="text-base font-normal text-gray-400 uppercase text-[12px]">
+                                                        {status === 'DENIED' ? 'REJECTED' : status}
+                                                    </span>
+                                                    <span className="text-gray-400 text-[14px]">({rows.length})</span>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center space-x-2">
+                                                <ClockIcon className=' text-[12px] h-3 w-3' />
+                                                <TotalTimeDisplay timesheetLog={rows} />
+                                            </div>
+                                        </div>
+                                    </AccordionTrigger>
+                                    <AccordionContent className="flex flex-col w-full gap-y-2">
+                                        {rows.map((task) => (
+                                            <div
+                                                key={task.id}
+                                                style={{
+                                                    backgroundColor: statusColor(status).bgOpacity,
+                                                    borderLeftColor: statusColor(status).border
+
+                                                }}
+                                                className={clsxm(
+                                                    'border-l-4 rounded-l flex flex-col p-2 gap-2 items-start  space-x-4  h-[100px]',
+                                                )}
+                                            >
+                                                <div className="flex  px-3 justify-between items-center w-full">
+                                                    <div className="flex items-center gap-x-1">
+                                                        <EmployeeAvatar
+                                                            imageUrl={task.employee.user.imageUrl ?? ''}
+                                                        />
+                                                        <span className=" font-normal text-[#3D5A80] dark:text-[#7aa2d8]">{task.employee.fullName}</span>
+                                                    </div>
+                                                    <DisplayTimeForTimesheet
+                                                        duration={task.timesheet.duration}
+
+                                                    />
+                                                </div>
+                                                <TaskNameInfoDisplay
+                                                    task={task.task}
+                                                    className={clsxm(
+                                                        'shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent'
+                                                    )}
+                                                    taskTitleClassName={clsxm(
+                                                        'text-sm text-ellipsis overflow-hidden !text-[#293241] dark:!text-white '
+                                                    )}
+                                                    showSize={true}
+                                                    dash
+                                                    taskNumberClassName="text-sm"
+                                                />
+                                                <div>
+                                                    <span className="flex-1">{task.project && task.project.name}</span>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </AccordionContent>
+                                </AccordionItem>
+                            ))}
+                        </Accordion>
+                    </div>
+                }
+                )}
+            </div>
 
         </div>
     )
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
new file mode 100644
index 000000000..03f80d818
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+export const EmployeeAvatar = ({ imageUrl }: { imageUrl: string }) => {
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    return (
+        <div className="relative w-6 h-6">
+            {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-200 rounded-full">
+                    <LoadingSpinner className="w-4 h-4" />
+                </div>
+            )}
+            <img
+                className="w-6 h-6 rounded-full"
+                src={imageUrl}
+                alt="Employee"
+                onLoad={() => setIsLoading(false)}
+                onError={() => setIsLoading(false)}
+            />
+        </div>
+    );
+};
+
+
+const LoadingSpinner = ({ className }: { className?: string }) => (
+    <svg
+        className={`animate-spin text-gray-500 ${className}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+        ></circle>
+        <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+        ></path>
+    </svg>
+);
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
index 06948073c..35543a172 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
@@ -5,8 +5,10 @@ export * from './TimesheetFilter';
 export * from './FrequencySelect';
 export * from './FilterWithStatus';
 export * from './TimesheetFilterDate';
-export * from './TimeSheetFilterPopover'
+export * from './TimeSheetFilterPopover';
 export * from './TimesheetAction';
 export * from './RejectSelectedModal';
 export * from './EditTaskModal';
-export * from './TimesheetLoader'
+export * from './CompactTimesheetComponent';
+export * from './TimesheetLoader';
+
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 863759acc..a90e0378a 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -198,7 +198,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 								<TimesheetView data={filterDataTimesheet}
 									loading={loadingTimesheet} />
 							) : (
-								<CalendarView />
+								<CalendarView data={filterDataTimesheet} />
 							)}
 						</div>
 					</Container>
diff --git a/apps/web/lib/components/types.ts b/apps/web/lib/components/types.ts
index 30c0412ef..a5a822801 100644
--- a/apps/web/lib/components/types.ts
+++ b/apps/web/lib/components/types.ts
@@ -1,6 +1,7 @@
 export type IVariant = 'primary' | 'outline' | 'ghost' | 'light' | 'dark';
 type StatusColorScheme = {
     bg: string;
+    border: string,
     text: string;
     bgOpacity: string;
 };
@@ -8,31 +9,37 @@ type StatusColorScheme = {
 const STATUS_COLORS: Record<string, StatusColorScheme> = {
     PENDING: {
         bg: 'bg-[#FBB650]',
+        border: 'rgb(251, 182, 80)',
         text: 'text-[#FBB650]',
         bgOpacity: 'rgba(251, 182, 80, 0.1)',
     },
     APPROVED: {
         bg: 'bg-[#30B366]',
+        border: 'rgba(48, 179, 102)',
         text: 'text-[#30B366]',
         bgOpacity: 'rgba(48, 179, 102, 0.1)',
     },
     DENIED: {
         bg: 'bg-[#dc2626]',
+        border: 'rgba(220, 38, 38)',
         text: 'text-[#dc2626]',
         bgOpacity: 'rgba(220, 38, 38, 0.1)',
     },
     DRAFT: {
         bg: 'bg-gray-300',
+        border: 'rgba(220, 220, 220)',
         text: 'text-gray-500',
         bgOpacity: 'rgba(220, 220, 220, 0.1)',
     },
     'IN REVIEW': {
         bg: 'bg-blue-500',
+        border: 'rgba(59, 130, 246)',
         text: 'text-blue-500',
         bgOpacity: 'rgba(59, 130, 246, 0.1)',
     },
     DEFAULT: {
         bg: 'bg-gray-100',
+        border: 'rgba(243, 244, 246)',
         text: 'text-gray-400',
         bgOpacity: 'rgba(243, 244, 246, 0.1)',
     },
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 5326b964c..3860a9d19 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -54,6 +54,7 @@ import {
 	RejectSelectedModal,
 	StatusAction,
 	StatusType,
+	EmployeeAvatar,
 	getTimesheetButtons,
 	statusTable
 } from '@/app/[locale]/timesheet/[memberId]/components';
@@ -335,10 +336,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 												</div>
 												<span className="flex-1">{task.project && task.project.name}</span>
 												<div className="flex items-center flex-1 gap-x-2">
-													<img
-														className="w-8 h-8 rounded-full"
-														src={task.employee.user.imageUrl!}
-														alt=""
+													<EmployeeAvatar
+														imageUrl={task.employee.user.imageUrl!}
 													/>
 													<span className="flex-1 font-medium">{task.employee.fullName}</span>
 												</div>
diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx
index 0bca22f27..c87453592 100644
--- a/apps/web/lib/features/task/task-displays.tsx
+++ b/apps/web/lib/features/task/task-displays.tsx
@@ -82,7 +82,7 @@ export const DisplayTimeForTimesheet = ({ duration }: { duration: number }) => {
 	return (
 		<div className='flex items-center font-medium gap-x-1'>
 			<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
-			<div className='flex items-center'>
+			<div className='flex items-center text-[#282048] dark:text-[#9b8ae1]'>
 				{formatTime(hours, minute)}
 			</div>
 		</div>
@@ -104,7 +104,7 @@ TotalTimeDisplay.displayName = 'TotalTimeDisplay';
 
 
 export const TotalDurationByDate = React.memo(
-	({ timesheetLog, createdAt }: { timesheetLog: TimesheetLog[]; createdAt: Date | string }) => {
+	({ timesheetLog, createdAt, className }: { timesheetLog: TimesheetLog[]; createdAt: Date | string, className?: string }) => {
 		const targetDateISO = new Date(createdAt).toISOString();
 		const filteredLogs = timesheetLog.filter(
 			(item) => formatDate(item.timesheet.createdAt) === formatDate(targetDateISO));
@@ -112,7 +112,7 @@ export const TotalDurationByDate = React.memo(
 			(total, log) => total + (log.timesheet?.duration || 0), 0);
 		const { h: hours, m: minutes } = secondsToTime(totalDurationInSeconds);
 		return (
-			<div className="flex items-center text-[#868688]">
+			<div className={clsxm("flex items-center text-[#868688]", className)}>
 				{formatTime(hours, minutes)}
 			</div>
 		);

From e9de21046c24dfb85d838ba440a462384710e74a Mon Sep 17 00:00:00 2001
From: Cedric Karungu | Lord VB <83704005+Cedric921@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:25:06 +0200
Subject: [PATCH 05/12] (apps-web)[fix]: Center Dashboard Data on Toggle
 FullWidth Mode (#3371)

---
 apps/web/app/[locale]/page-component.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index ddb2d6b58..89a043e2e 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -6,7 +6,7 @@ import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Breadcrumb, Card } from 'lib/components';
+import { Breadcrumb, Card, Container } from 'lib/components';
 import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
 import { MainLayout } from 'lib/layout';
 import { IssuesView } from '@app/constants';
@@ -98,7 +98,11 @@ function MainPage() {
 					footerClassName={clsxm('')}
 				>
 					<ChatwootWidget />
-					<div className="h-full ">{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
+					<div className="h-full ">{isTeamMember ?
+						<Container fullWidth={fullWidth} className='mx-auto' >
+							<TeamMembers kanbanView={view} />
+						</Container>
+						: <NoTeam />}</div>
 				</MainLayout>
 			</div>
 			<Analytics />

From 8a4784376b970ddc1f16952da6e68cf8cba40c79 Mon Sep 17 00:00:00 2001
From: Cedric Karungu | Lord VB <83704005+Cedric921@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:29:52 +0200
Subject: [PATCH 06/12] fix: Assignees and Project Dropdown (#3374)

---
 .../details-section/blocks/task-secondary-info.tsx     |  7 +++++--
 apps/web/lib/features/task/task-input.tsx              | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
index 959b2c4da..ecf7bc426 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
@@ -418,7 +418,10 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 						<>
 							<Listbox.Button
 								className={clsxm(
-									'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full ',
+									`cursor-pointer outline-none w-full flex
+									items-center justify-between px-4 h-full
+									border-solid border-color-[#F2F2F2]
+									dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] rounded-lg`,
 									styles?.value
 								)}
 							>
@@ -436,7 +439,7 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 								)}
 								<ChevronDownIcon
 									className={clsxm(
-										'h-4 w-4 text-default transition duration-150 ease-in-out group-hover:text-opacity-80'
+										'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
 									)}
 									aria-hidden="true"
 								/>
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index a05abd268..f4bbc0e58 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -751,12 +751,12 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 	);
 
 	return (
-		<div className=" w-40 rounded-xl bg-[#F2F2F2] py-2 px-3">
+		<div className="w-52 rounded-xl bg-[#F2F2F2] dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-2 px-3">
 			<Combobox multiple={true}>
 				<div className="relative my-auto">
 					<div className="relative w-full cursor-default overflow-hidden rounded-lg text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
 						<Combobox.Input readOnly className="w-0 h-0" />
-						<Combobox.Button className="absolute hover:transition-all inset-y-0 right-0 flex justify-between w-full items-center">
+						<Combobox.Button className="absolute hover:transition-all inset-y-0 right-0 flex justify-between w-40 items-center">
 							<span>{t('common.ASSIGNEE')}</span>
 							<ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
 						</Combobox.Button>
@@ -767,12 +767,12 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 						leaveFrom="opacity-100"
 						leaveTo="opacity-0"
 					>
-						<Combobox.Options className="absolute mt-1 max-h-60 h-auto w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+						<Combobox.Options className="absolute mt-1 max-h-40 h-auto w-44 overflow-auto rounded-md dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
 							{authMember && (
 								<Combobox.Option
 									className={({ active }) =>
 										`relative cursor-default select-none py-2 pl-10 pr-4 ${
-											active ? 'bg-primary/5' : 'text-gray-900'
+											active ? 'bg-primary/5 dark:bg-dark--theme-light dark:text-white' : 'text-gray-100'
 										}`
 									}
 									value={authMember}
@@ -791,7 +791,7 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 										key={member.id}
 										className={({ active }) =>
 											`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
-												active ? 'bg-primary/5' : 'text-gray-900'
+												active ? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights' : 'text-gray-900 dark:text-gray-200'
 											}`
 										}
 										onClick={() => {

From 4eccf2302c5fd364f981e7813c8ead23302cd975 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 27 Nov 2024 20:03:51 +0200
Subject: [PATCH 07/12] [Refactor]: Optimize DeleteTimesheet and
 UpdateTimesheetStatus (#3375)

* Add createTimesheetFromApi function to create a timesheet entry from API

* fix:update url

* refactor: optimize deleteTimesheet and updateTimesheetStatus function for better readability

* fix: deep scan

* fix

* fix: refactor some code

* fix: deep scan

* fix: Codacy Static Code Analysis

* fix: build

* feat: update billable from api

* fix: conflits

* fix: coderabbitai
---
 .../timer/timesheet/time-log/[id]/route.ts    |  33 +++++
 .../app/api/timer/timesheet/time-log/route.ts |  31 +++++
 apps/web/app/hooks/features/useTimesheet.ts   | 116 ++++++++++++------
 apps/web/app/interfaces/timer/ITimerLog.ts    |  34 +++--
 .../services/client/api/timer/timer-log.ts    |  32 ++++-
 .../app/services/server/requests/timesheet.ts |  23 +++-
 apps/web/app/stores/time-logs.ts              |   2 +
 .../calendar/table-time-sheet.tsx             |  61 +++++++--
 8 files changed, 271 insertions(+), 61 deletions(-)
 create mode 100644 apps/web/app/api/timer/timesheet/time-log/[id]/route.ts
 create mode 100644 apps/web/app/api/timer/timesheet/time-log/route.ts

diff --git a/apps/web/app/api/timer/timesheet/time-log/[id]/route.ts b/apps/web/app/api/timer/timesheet/time-log/[id]/route.ts
new file mode 100644
index 000000000..ed3c2f18c
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/time-log/[id]/route.ts
@@ -0,0 +1,33 @@
+import { UpdateTimesheet } from "@/app/interfaces";
+import { authenticatedGuard } from "@/app/services/server/guards/authenticated-guard-app";
+import { updateTimesheetRequest } from "@/app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function PUT(req: Request) {
+    const res = new NextResponse();
+    const {
+        $res,
+        user,
+        tenantId,
+        organizationId,
+        access_token
+    } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        const { searchParams } = new URL(req.url);
+        const id = searchParams.get('id') as string;
+        const body = (await req.json()) as UpdateTimesheet;
+        const { data } = await updateTimesheetRequest(
+            { ...body, tenantId, organizationId, id },
+            access_token
+        );
+        return $res(data);
+    } catch (error) {
+        console.error('Error updating timesheet status:', error);
+        return $res({
+            success: false,
+            message: 'Failed to update timesheet status'
+        });
+    }
+}
diff --git a/apps/web/app/api/timer/timesheet/time-log/route.ts b/apps/web/app/api/timer/timesheet/time-log/route.ts
new file mode 100644
index 000000000..38919df8e
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/time-log/route.ts
@@ -0,0 +1,31 @@
+import { UpdateTimesheet } from "@/app/interfaces";
+import { authenticatedGuard } from "@/app/services/server/guards/authenticated-guard-app";
+import { createTimesheetRequest } from "@/app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+    const res = new NextResponse();
+    const {
+        $res,
+        user,
+        tenantId,
+        organizationId,
+        access_token
+    } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        const body = (await req.json()) as UpdateTimesheet;
+        const { data } = await createTimesheetRequest(
+            { ...body, tenantId, organizationId },
+            access_token
+        );
+        return $res(data);
+    } catch (error) {
+        console.error('Error updating timesheet status:', error);
+        return $res({
+            success: false,
+            message: 'Failed to update timesheet status'
+        });
+    }
+}
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 75be26e60..4afc705b2 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -3,9 +3,9 @@ import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
 import { useCallback, useEffect, useMemo } from 'react';
-import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi, updateStatusTimesheetFromApi } from '@/app/services/client/api/timer/timer-log';
+import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi, updateStatusTimesheetFromApi, createTimesheetFromApi, updateTimesheetFromAPi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
-import { ID, TimesheetLog, TimesheetStatus } from '@/app/interfaces';
+import { ID, TimesheetLog, TimesheetStatus, UpdateTimesheet } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
@@ -19,13 +19,6 @@ export interface GroupedTimesheet {
 }
 
 
-interface DeleteTimesheetParams {
-    organizationId: string;
-    tenantId: string;
-    logIds: string[];
-}
-
-
 const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
     type GroupedMap = Record<string, TimesheetLog[]>;
@@ -104,6 +97,8 @@ export function useTimesheet({
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
     const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi);
     const { loading: loadingUpdateTimesheetStatus, queryCall: queryUpdateTimesheetStatus } = useQuery(updateStatusTimesheetFromApi)
+    const { loading: loadingCreateTimesheet, queryCall: queryCreateTimesheet } = useQuery(createTimesheetFromApi);
+    const { loading: loadingUpdateTimesheet, queryCall: queryUpdateTimesheet } = useQuery(updateTimesheetFromAPi);
 
 
     const getTaskTimesheet = useCallback(
@@ -138,30 +133,76 @@ export function useTimesheet({
         ]
     );
 
+    const createTimesheet = useCallback(
+        async ({ ...timesheetParams }: UpdateTimesheet) => {
+            if (!user) {
+                throw new Error("User not authenticated");
+            }
+            try {
+                const response = await queryCreateTimesheet(timesheetParams);
+                setTimesheet((prevTimesheet) => [
+                    response.data,
+                    ...(prevTimesheet || [])
+                ]);
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        },
+        [queryCreateTimesheet, setTimesheet, user]
+    );
+
+
+
+    const updateTimesheet = useCallback<(params: UpdateTimesheet) => Promise<void>>(
+        async ({ ...timesheet }: UpdateTimesheet) => {
+            if (!user) {
+                throw new Error("User not authenticated");
+            }
+            try {
+                const response = await queryUpdateTimesheet(timesheet);
+                setTimesheet(prevTimesheet =>
+                    prevTimesheet.map(item =>
+                        item.timesheet.id === response.data.timesheet.id
+                            ? response.data
+                            : item
+                    )
+                );
+            } catch (error) {
+                console.error('Error updating timesheet:', error);
+                throw error;
+            }
+        }, [queryUpdateTimesheet, setTimesheet, user])
+
+
     const updateTimesheetStatus = useCallback(
-        ({ status, ids }: { status: TimesheetStatus, ids: ID[] | ID }) => {
+        async ({ status, ids }: { status: TimesheetStatus; ids: ID[] | ID }) => {
             if (!user) return;
-            queryUpdateTimesheetStatus({ ids, status })
-                .then((response) => {
-                    const updatedData = timesheet.map(item => {
-                        const newItem = response.data.find(newItem => newItem.id === item.timesheet.id);
-                        if (newItem) {
+            const idsArray = Array.isArray(ids) ? ids : [ids];
+            try {
+                const response = await queryUpdateTimesheetStatus({ ids: idsArray, status });
+                const responseMap = new Map(response.data.map(item => [item.id, item]));
+                setTimesheet(prevTimesheet =>
+                    prevTimesheet.map(item => {
+                        const updatedItem = responseMap.get(item.timesheet.id);
+                        if (updatedItem) {
                             return {
                                 ...item,
                                 timesheet: {
                                     ...item.timesheet,
-                                    status: newItem.status
+                                    status: updatedItem.status
                                 }
                             };
                         }
                         return item;
-                    });
-                    setTimesheet(updatedData);
-                })
-                .catch((error) => {
-                    console.error('Error fetching timesheet:', error);
-                });
-        }, [queryUpdateTimesheetStatus])
+                    })
+                );
+                console.log('Timesheet status updated successfully!');
+            } catch (error) {
+                console.error('Error updating timesheet status:', error);
+            }
+        },
+        [queryUpdateTimesheetStatus, setTimesheet, user]
+    );
 
     const getStatusTimesheet = (items: TimesheetLog[] = []) => {
         const STATUS_MAP: Record<TimesheetStatus, TimesheetLog[]> = {
@@ -196,15 +237,6 @@ export function useTimesheet({
     }
 
 
-    const handleDeleteTimesheet = async (params: DeleteTimesheetParams) => {
-        try {
-            return await queryDeleteTimesheet(params);
-        } catch (error) {
-            console.error('Error deleting timesheet:', error);
-            throw error;
-        }
-    };
-
     const deleteTaskTimesheet = useCallback(async () => {
         if (!user) {
             throw new Error('User not authenticated');
@@ -213,18 +245,22 @@ export function useTimesheet({
             throw new Error('No timesheet IDs provided for deletion');
         }
         try {
-            await handleDeleteTimesheet({
+            await queryDeleteTimesheet({
                 organizationId: user.employee.organizationId,
                 tenantId: user.tenantId ?? "",
                 logIds
             });
+            setTimesheet(prevTimesheet =>
+                prevTimesheet.filter(item => !logIds.includes(item.timesheet.id))
+            );
+
         } catch (error) {
             console.error('Failed to delete timesheets:', error);
             throw error;
         }
-    },
-        [user, queryDeleteTimesheet, logIds, handleDeleteTimesheet] // deepscan-disable-line
-    );
+    }, [user, logIds, queryDeleteTimesheet, setTimesheet]);
+
+
     const timesheetElementGroup = useMemo(() => {
         if (timesheetGroupByDays === 'Daily') {
             return groupByDate(timesheet);
@@ -238,7 +274,7 @@ export function useTimesheet({
 
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
-    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays, timesheet]);
+    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays]);
 
     return {
         loadingTimesheet,
@@ -251,6 +287,10 @@ export function useTimesheet({
         statusTimesheet: getStatusTimesheet(timesheet.flat()),
         updateTimesheetStatus,
         loadingUpdateTimesheetStatus,
-        puTimesheetStatus
+        puTimesheetStatus,
+        createTimesheet,
+        loadingCreateTimesheet,
+        updateTimesheet,
+        loadingUpdateTimesheet
     };
 }
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index 13952ec97..09368bbad 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -1,4 +1,5 @@
-import { ITeamTask } from "../ITask";
+import { ITeamTask, TimesheetStatus } from "../ITask";
+import { TimeLogType, TimerSource } from "../ITimer";
 
 interface BaseEntity {
     id: string;
@@ -69,7 +70,7 @@ interface Timesheet extends BaseEntity {
     lockedAt: string | null;
     editedAt: string | null;
     isBilled: boolean;
-    status: string;
+    status: TimesheetStatus;
     employeeId: string;
     approvedById: string | null;
     isEdited: boolean;
@@ -87,8 +88,8 @@ export interface TimesheetLog extends BaseEntity {
     startedAt: string;
     stoppedAt: string;
     editedAt: string | null;
-    logType: "TRACKED" | "MANUAL";
-    source: "WEB_TIMER" | "MOBILE_APP" | "DESKTOP_APP";
+    logType: TimeLogType;
+    source: TimerSource;
     description: string;
     reason: string | null;
     isBillable: boolean;
@@ -112,9 +113,6 @@ export interface TimesheetLog extends BaseEntity {
 
 
 export interface UpdateTimesheetStatus extends BaseEntity {
-    isActive: boolean;
-    isArchived: boolean;
-    archivedAt: string | null;
     duration: number;
     keyboard: number;
     mouse: number;
@@ -137,3 +135,25 @@ export interface UpdateTimesheetStatus extends BaseEntity {
     employee: Employee;
     isEdited: boolean;
 }
+export interface UpdateTimesheet extends Pick<
+    Partial<TimesheetLog>,
+    | 'reason'
+    | 'organizationContactId'
+    | 'description'
+    | 'organizationTeamId'
+    | 'projectId'
+    | 'taskId'
+>,
+    Pick<
+        TimesheetLog,
+        | 'id'
+        | 'startedAt'
+        | 'stoppedAt'
+        | 'tenantId'
+        | 'logType'
+        | 'source'
+        | 'employeeId'
+        | 'organizationId'
+    > {
+    isBillable: boolean;
+}
diff --git a/apps/web/app/services/client/api/timer/timer-log.ts b/apps/web/app/services/client/api/timer/timer-log.ts
index 8e4682ef5..4e658918a 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,5 +1,5 @@
-import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus } from '@app/interfaces';
-import { get, deleteApi, put } from '../../axios';
+import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus, UpdateTimesheet } from '@app/interfaces';
+import { get, deleteApi, put, post } from '../../axios';
 import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export async function getTimerLogs(
@@ -127,3 +127,31 @@ export function updateStatusTimesheetFromApi(data: IUpdateTimesheetStatus) {
 	const tenantId = getTenantIdCookie();
 	return put<UpdateTimesheetStatus[]>(`/timesheet/status`, { ...data, organizationId }, { tenantId });
 }
+
+
+export function createTimesheetFromApi(data: UpdateTimesheet) {
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+	if (!organizationId || !tenantId) {
+		throw new Error('Required parameters missing: organizationId and tenantId are required');
+	}
+	try {
+		return post<TimesheetLog>('/timesheet/time-log', { ...data, organizationId }, { tenantId })
+	} catch (error) {
+		throw new Error('Failed to create timesheet log');
+	}
+}
+
+export function updateTimesheetFromAPi(params: UpdateTimesheet) {
+	const { id, ...data } = params
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+	if (!organizationId || !tenantId) {
+		throw new Error('Required parameters missing: organizationId and tenantId are required');
+	}
+	try {
+		return put<TimesheetLog>(`/timesheet/time-log/${params.id}`, { ...data, organizationId }, { tenantId })
+	} catch (error) {
+		throw new Error('Failed to create timesheet log');
+	}
+}
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index cc0f06a78..ef39e6abc 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,7 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { TimesheetLog, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
+import { TimesheetLog, UpdateTimesheet, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
 import { IUpdateTimesheetStatus } from '@/app/interfaces';
 
 export type TTasksTimesheetStatisticsParams = {
@@ -107,3 +107,24 @@ export function updateStatusTimesheetRequest(params: IUpdateTimesheetStatus, bea
 		tenantId: params.tenantId,
 	})
 }
+
+
+export function createTimesheetRequest(params: UpdateTimesheet, bearer_token: string) {
+	return serverFetch<TimesheetLog>({
+		path: '/timesheet/time-log',
+		method: 'POST',
+		body: { ...params },
+		bearer_token,
+		tenantId: params.tenantId
+	})
+}
+
+export function updateTimesheetRequest(params: UpdateTimesheet, bearer_token: string) {
+	return serverFetch<TimesheetLog>({
+		path: `/timesheet/time-log/${params.id}`,
+		method: 'PUT',
+		body: { ...params },
+		bearer_token,
+		tenantId: params.tenantId
+	});
+}
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 31270c973..19ad5da66 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -7,6 +7,7 @@ interface IFilterOption {
     label: string;
 }
 
+
 export const timerLogsDailyReportState = atom<ITimerLogsDailyReport[]>([]);
 
 export const timesheetRapportState = atom<TimesheetLog[]>([])
@@ -19,3 +20,4 @@ export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
 export const timesheetDeleteState = atom<string[]>([]);
 export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
 export const timesheetUpdateStatus = atom<UpdateTimesheetStatus[]>([])
+export const timesheetUpdateState = atom<TimesheetLog | null>(null)
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 3860a9d19..fb844453c 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -155,8 +155,11 @@ export const columns: ColumnDef<TimeSheet>[] = [
 
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const { isOpen, openModal, closeModal } = useModal();
-	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
+
+
+	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet, updateTimesheetStatus } = useTimesheet({});
 	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays, handleSelectRowByStatusAndDate } = useTimelogFilterOptions();
+
 	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 	const handleConfirm = () => {
 		try {
@@ -201,10 +204,15 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const handleSort = (key: string, order: SortOrder) => {
 		console.log(`Sorting ${key} in ${order} order`);
 	};
-	const handleButtonClick = (action: StatusAction) => {
+	const handleButtonClick = async (action: StatusAction) => {
 		switch (action) {
 			case 'Approved':
-				// TODO: Implement approval logic
+				if (selectTimesheet.length > 0) {
+					await updateTimesheetStatus({
+						status: 'APPROVED',
+						ids: selectTimesheet
+					})
+				}
 				break;
 			case 'Denied':
 				openModal();
@@ -220,7 +228,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 		<div className="w-full dark:bg-dark--theme">
 			<AlertDialogConfirmation
 				title="Are you sure you want to delete this?"
-				description={`This action is irreversible. All related data will be lost. (${selectTimesheet.length})`}
+				description={`This action is irreversible. All related data will be lost.`}
 				confirmText={t('common.DELETE')}
 				cancelText={t('common.CANCEL')}
 				isOpen={isDialogOpen}
@@ -477,7 +485,7 @@ const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 						{t('common.EDIT')}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
-					<StatusTask ids={dataTimesheet.timesheet.id} />
+					<StatusTask timesheet={dataTimesheet} />
 					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
 						{t('common.DELETE')}
 					</DropdownMenuItem>
@@ -501,9 +509,26 @@ const TaskDetails = ({ description, name }: { description: string; name: string
 	);
 };
 
-export const StatusTask = ({ ids }: { ids: string }) => {
+export const StatusTask = ({ timesheet }: { timesheet: TimesheetLog }) => {
 	const t = useTranslations();
-	const { updateTimesheetStatus } = useTimesheet({});
+	const { updateTimesheetStatus, updateTimesheet } = useTimesheet({});
+	const handleUpdateTimesheet = async (isBillable: boolean) => {
+		await updateTimesheet({
+			id: timesheet.timesheetId,
+			isBillable: isBillable,
+			employeeId: timesheet.employeeId,
+			logType: timesheet.logType,
+			source: timesheet.source,
+			stoppedAt: timesheet.stoppedAt,
+			startedAt: timesheet.startedAt,
+			tenantId: timesheet.tenantId,
+			organizationId: timesheet.organizationId,
+			description: timesheet.description,
+			projectId: timesheet.projectId,
+			reason: timesheet.reason,
+		});
+	};
+
 	return (
 		<>
 			<DropdownMenuSub>
@@ -513,10 +538,16 @@ export const StatusTask = ({ ids }: { ids: string }) => {
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
 						{statusTable?.map((status, index) => (
-							<DropdownMenuItem onClick={() => updateTimesheetStatus({
-								status: status.label as TimesheetStatus,
-								ids: [ids]
-							})} key={index} textValue={status.label} className="cursor-pointer">
+							<DropdownMenuItem onClick={async () => {
+								try {
+									await updateTimesheetStatus({
+										status: status.label as TimesheetStatus,
+										ids: [timesheet.timesheet.id]
+									});
+								} catch (error) {
+									console.error('Failed to update timesheet status:');
+								}
+							}} key={index} textValue={status.label} className="cursor-pointer">
 								<div className="flex items-center gap-3">
 									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.label).bg)}></div>
 									<span>{status.label}</span>
@@ -532,12 +563,16 @@ export const StatusTask = ({ ids }: { ids: string }) => {
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
-						<DropdownMenuItem textValue={'Yes'} className="cursor-pointer">
+						<DropdownMenuItem onClick={async () => {
+							await handleUpdateTimesheet(true)
+						}} textValue={'Yes'} className="cursor-pointer">
 							<div className="flex items-center gap-3">
 								<span>{t('pages.timesheet.BILLABLE.YES')}</span>
 							</div>
 						</DropdownMenuItem>
-						<DropdownMenuItem textValue={'No'} className="cursor-pointer">
+						<DropdownMenuItem onClick={async () => {
+							await handleUpdateTimesheet(false)
+						}} textValue={'No'} className="cursor-pointer">
 							<div className="flex items-center gap-3">
 								<span>{t('pages.timesheet.BILLABLE.NO')}</span>
 							</div>

From e5617bc5af08adc0bee4e6a8998de2a7b73a74cc Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Wed, 27 Nov 2024 20:35:15 +0200
Subject: [PATCH 08/12] [Feature] Create new project from the project dropdown
 (#3360)

* createw new project in add task or task detail page

* add project dropdown in task creation process

* add coderabit suggetions
---
 .../hooks/features/useOrganizationProjects.ts |  27 +-
 apps/web/app/services/client/api/projects.ts  |  11 +-
 .../blocks/task-secondary-info.tsx            | 278 ++++++++----------
 apps/web/components/ui/svgs/project-icon.tsx  |  12 +-
 .../features/project/create-project-modal.tsx |  96 ++++++
 apps/web/lib/features/task/task-status.tsx    |   2 +-
 apps/web/locales/ar.json                      |   3 +-
 apps/web/locales/bg.json                      |   3 +-
 apps/web/locales/de.json                      |   3 +-
 apps/web/locales/en.json                      |   3 +-
 apps/web/locales/es.json                      |   3 +-
 apps/web/locales/fr.json                      |   3 +-
 apps/web/locales/he.json                      |   3 +-
 apps/web/locales/it.json                      |   3 +-
 apps/web/locales/nl.json                      |   3 +-
 apps/web/locales/pl.json                      |   3 +-
 apps/web/locales/pt.json                      |   3 +-
 apps/web/locales/ru.json                      |   3 +-
 apps/web/locales/zh.json                      |   3 +-
 19 files changed, 285 insertions(+), 180 deletions(-)
 create mode 100644 apps/web/lib/features/project/create-project-modal.tsx

diff --git a/apps/web/app/hooks/features/useOrganizationProjects.ts b/apps/web/app/hooks/features/useOrganizationProjects.ts
index 121c4dc8e..fdf19e3b5 100644
--- a/apps/web/app/hooks/features/useOrganizationProjects.ts
+++ b/apps/web/app/hooks/features/useOrganizationProjects.ts
@@ -2,13 +2,15 @@ import {
 	editOrganizationProjectSettingAPI,
 	editOrganizationProjectAPI,
 	getOrganizationProjectAPI,
-	getOrganizationProjectsAPI
+	getOrganizationProjectsAPI,
+	createOrganizationProjectAPI
 } from '@app/services/client/api';
 import { userState } from '@app/stores';
 import { useCallback } from 'react';
 import { useAtom } from 'jotai';
 import { useQuery } from '../useQuery';
 import { organizationProjectsState } from '@/app/stores/organization-projects';
+import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export function useOrganizationProjects() {
 	const [user] = useAtom(userState);
@@ -26,6 +28,9 @@ export function useOrganizationProjects() {
 	const { loading: getOrganizationProjectsLoading, queryCall: getOrganizationProjectsQueryCall } =
 		useQuery(getOrganizationProjectsAPI);
 
+	const { loading: createOrganizationProjectLoading, queryCall: createOrganizationProjectQueryCall } =
+		useQuery(createOrganizationProjectAPI);
+
 	const editOrganizationProjectSetting = useCallback(
 		(id: string, data: any) => {
 			if (user?.tenantId) {
@@ -69,6 +74,24 @@ export function useOrganizationProjects() {
 		}
 	}, [getOrganizationProjectsQueryCall, setOrganizationProjects]);
 
+	const createOrganizationProject = useCallback(
+		async (data: { name: string }) => {
+			try {
+				const organizationId = getOrganizationIdCookie();
+				const tenantId = getTenantIdCookie();
+
+				const res = await createOrganizationProjectQueryCall({ ...data, organizationId, tenantId });
+
+				setOrganizationProjects([...organizationProjects, res.data]);
+
+				return res.data;
+			} catch (error) {
+				console.error(error);
+			}
+		},
+		[createOrganizationProjectQueryCall, organizationProjects, setOrganizationProjects]
+	);
+
 	return {
 		editOrganizationProjectSetting,
 		editOrganizationProjectSettingLoading,
@@ -79,5 +102,7 @@ export function useOrganizationProjects() {
 		getOrganizationProjects,
 		getOrganizationProjectsLoading,
 		organizationProjects,
+		createOrganizationProject,
+		createOrganizationProjectLoading
 	};
 }
diff --git a/apps/web/app/services/client/api/projects.ts b/apps/web/app/services/client/api/projects.ts
index a4f08467f..a69d540cf 100644
--- a/apps/web/app/services/client/api/projects.ts
+++ b/apps/web/app/services/client/api/projects.ts
@@ -1,12 +1,7 @@
-import { IProject } from '@app/interfaces';
+import { IProject, IProjectCreate } from '@app/interfaces';
 import { post } from '../axios';
 
-type Params = {
-	name: string;
-	tenantId: string;
-	organizationId: string;
-};
+export function createOrganizationProjectAPI(data: IProjectCreate) {
 
-export function createOrganizationProjectAPI(params: Params) {
-	return post<IProject>(`/organization-projects`, params);
+	return post<IProject>(`/organization-projects`, data);
 }
diff --git a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
index ecf7bc426..37707b6ce 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
@@ -1,4 +1,4 @@
-import { useModal, useOrganizationProjects, useTeamTasks } from '@app/hooks';
+import { useModal, useOrganizationProjects, useOrganizationTeams, useTeamTasks } from '@app/hooks';
 import { IProject, ITaskVersionCreate, ITeamTask } from '@app/interfaces';
 import { detailedTaskState } from '@app/stores';
 import { PlusIcon } from '@heroicons/react/20/solid';
@@ -21,11 +21,13 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import TaskRow from '../components/task-row';
 import { useTranslations } from 'next-intl';
-import { ChevronDownIcon, Square4OutlineIcon } from 'assets/svg';
+import { AddIcon, ChevronDownIcon, Square4OutlineIcon, TrashIcon } from 'assets/svg';
 import { Listbox, Transition } from '@headlessui/react';
 import { clsxm } from '@/app/utils';
 import { organizationProjectsState } from '@/app/stores/organization-projects';
 import ProjectIcon from '@components/ui/svgs/project-icon';
+import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
+import { CreateProjectModal } from '@/lib/features/project/create-project-modal';
 
 type StatusType = 'version' | 'epic' | 'status' | 'label' | 'size' | 'priority';
 
@@ -104,23 +106,6 @@ const TaskSecondaryInfo = () => {
 				</ActiveTaskVersionDropdown>
 			</TaskRow>
 
-			{/* Epic */}
-			{task && task.issueType === 'Story' && (
-				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
-					<TaskEpicDropdown
-						onValueChange={(d) => {
-							onTaskSelect({
-								id: d
-							} as ITeamTask);
-						}}
-						className="lg:min-w-[170px] text-black"
-						forDetails={true}
-						sidebarUI={true}
-						taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-						defaultValue={task.parentId || ''}
-					/>
-				</TaskRow>
-			)}
 			{/* Epic */}
 			{task && task.issueType === 'Story' && (
 				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
@@ -139,27 +124,8 @@ const TaskSecondaryInfo = () => {
 				</TaskRow>
 			)}
 
-			{task && <EpicParent task={task} />}
 			{task && <EpicParent task={task} />}
 
-			{/* Task Status */}
-			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
-				<ActiveTaskStatusDropdown
-					task={task}
-					className="lg:min-w-[170px] text-black"
-					forDetails={true}
-					sidebarUI={true}
-					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-				>
-					<Button
-						className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
-						variant="outline"
-						onClick={openModalEditionHandle('status')}
-					>
-						<PlusIcon className="w-4 h-4" />
-					</Button>
-				</ActiveTaskStatusDropdown>
-			</TaskRow>
 			{/* Task Status */}
 			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
 				<ActiveTaskStatusDropdown
@@ -179,34 +145,6 @@ const TaskSecondaryInfo = () => {
 				</ActiveTaskStatusDropdown>
 			</TaskRow>
 
-			{/* Task Labels */}
-			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
-				<TaskLabels
-					task={task}
-					className="lg:min-w-[170px] text-black lg:mt-0"
-					forDetails={true}
-					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-				/>
-			</TaskRow>
-			{tags.length > 0 && (
-				<TaskRow>
-					<div className="flex flex-row flex-wrap gap-1 max-w-[10rem]">
-						{tags.map((tag, i) => {
-							return (
-								<Tooltip key={i} label={tag.name?.split('-').join(' ') || ''} placement="auto">
-									<TaskStatus
-										{...tag}
-										className="rounded-[0.625rem] h-6 max-w-[8rem]"
-										active={true}
-										name={tag.name?.split('-').join(' ')}
-										titleClassName={'text-[0.625rem] font-[500]'}
-									/>
-								</Tooltip>
-							);
-						})}
-					</div>
-				</TaskRow>
-			)}
 			{/* Task Labels */}
 			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
 				<TaskLabels
@@ -277,7 +215,7 @@ const TaskSecondaryInfo = () => {
 			{/* Task project */}
 			{task && (
 				<TaskRow labelTitle={t('pages.taskDetails.PROJECT')} wrapperClassName="text-black">
-					<ProjectDropDown task={task} />
+					<ProjectDropDown styles={{ listCard: 'rounded-xl' }} task={task} />
 				</TaskRow>
 			)}
 			<Modal isOpen={modal.isOpen} closeModal={modal.closeModal}>
@@ -344,15 +282,16 @@ export default TaskSecondaryInfo;
  */
 export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 	const { task, controlled = false, onChange, styles } = props;
-
+	const { openModal, isOpen, closeModal } = useModal();
 	const organizationProjects = useAtomValue(organizationProjectsState);
 	const { getOrganizationProjects } = useOrganizationProjects();
 	const { updateTask, updateLoading } = useTeamTasks();
+	const { teams } = useOrganizationTeams();
 	const t = useTranslations();
 
 	useEffect(() => {
 		getOrganizationProjects();
-	}, [getOrganizationProjects]);
+	}, [getOrganizationProjects, teams]);
 
 	const [selected, setSelected] = useState<IProject>();
 
@@ -395,99 +334,128 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 	}, [task, updateTask]);
 
 	return (
-		<div
-			className={clsxm(
-				'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs',
-				styles?.container
-			)}
-		>
-			<Listbox
-				value={selected}
-				onChange={(project) => {
-					if (controlled && onChange) {
-						onChange(project);
-					} else {
-						handleUpdateProject(project);
-					}
-
-					setSelected(project);
-				}}
+		<>
+			<div
+				className={clsxm(
+					'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs',
+					styles?.container
+				)}
 			>
-				{({ open }) => {
-					return (
-						<>
-							<Listbox.Button
-								className={clsxm(
-									`cursor-pointer outline-none w-full flex
+				<Listbox
+					value={selected}
+					onChange={(project) => {
+						if (controlled && onChange) {
+							onChange(project);
+						} else {
+							handleUpdateProject(project);
+						}
+
+						setSelected(project);
+					}}
+				>
+					{({ open }) => {
+						return (
+							<>
+								<Listbox.Button
+									className={clsxm(
+										`cursor-pointer outline-none w-full flex
 									items-center justify-between px-4 h-full
 									border-solid border-color-[#F2F2F2]
 									dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] rounded-lg`,
-									styles?.value
-								)}
-							>
-								{selected && (
-									<div className="">
-										<ProjectIcon />
-									</div>
-								)}
-								{updateLoading ? (
-									<SpinnerLoader size={10} />
-								) : (
-									<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
-										{selected?.name ?? 'Project'}
-									</p>
-								)}
-								<ChevronDownIcon
-									className={clsxm(
-										'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
+										styles?.value
+									)}
+								>
+									{selected && (
+										<div className="">
+											<ProjectIcon />
+										</div>
+									)}
+									{updateLoading ? (
+										<SpinnerLoader size={10} />
+									) : (
+										<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
+											{selected?.name ?? 'Project'}
+										</p>
 									)}
-									aria-hidden="true"
-								/>
-							</Listbox.Button>
-
-							<Transition
-								show={open}
-								enter="transition duration-100 ease-out"
-								enterFrom="transform scale-95 opacity-0"
-								enterTo="transform scale-100 opacity-100"
-								leave="transition duration-75 ease-out"
-								leaveFrom="transform scale-100 opacity-100"
-								leaveTo="transform scale-95 opacity-0"
-								className={clsxm('absolute right-0 left-0 top-10 z-40 min-w-min outline-none')}
-							>
-								<Listbox.Options className="outline-none">
-									<Card
-										shadow="bigger"
+									<ChevronDownIcon
 										className={clsxm(
-											'p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-auto rounded-none',
-											styles?.listCard
+											'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
 										)}
-									>
-										{organizationProjects.map((item, i) => {
-											return (
-												<Listbox.Option key={item.id} value={item} as={Fragment}>
-													<li className="relative outline-none cursor-pointer">
-														{item.name}
-													</li>
-												</Listbox.Option>
-											);
-										})}
-										{!controlled && (
-											<Button
-												className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
-												variant="outline"
-												onClick={handleRemoveProject}
-											>
-												{t('common.REMOVE')}
-											</Button>
-										)}
-									</Card>
-								</Listbox.Options>
-							</Transition>
-						</>
-					);
+										aria-hidden="true"
+									/>
+								</Listbox.Button>
+
+								<Transition
+									show={open}
+									enter="transition duration-100 ease-out"
+									enterFrom="transform scale-95 opacity-0"
+									enterTo="transform scale-100 opacity-100"
+									leave="transition duration-75 ease-out"
+									leaveFrom="transform scale-100 opacity-100"
+									leaveTo="transform scale-95 opacity-0"
+									className={clsxm('absolute  right-0 left-0 top-10  z-40 min-w-min outline-none')}
+								>
+									<Listbox.Options className="outline-none">
+										<Card
+											shadow="bigger"
+											className={clsxm(
+												'p-0 md:p-0 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 h-[13rem] max-h-[13rem] overflow-x-auto rounded-none overflow-hidden',
+												styles?.listCard
+											)}
+										>
+											<ScrollArea className="w-full h-full">
+												<div className="flex flex-col gap-2.5 w-full p-4">
+													{organizationProjects.map((item, i) => {
+														return (
+															<Listbox.Option key={item.id} value={item} as={Fragment}>
+																<li className="relative border h-[2rem] flex items-center gap-1 px-2 rounded-lg outline-none cursor-pointer">
+																	<ProjectIcon width={14} height={14} />{' '}
+																	<span className=" truncate">{item.name}</span>
+																</li>
+															</Listbox.Option>
+														);
+													})}
+													<div className="mt-2">
+														{!controlled && (
+															<Button
+																className=" px-2 py-1 w-full !justify-start !gap-2  !min-w-min h-[2rem] rounded-lg text-xs dark:text-white dark:border-white"
+																variant="outline"
+																onClick={handleRemoveProject}
+															>
+																<TrashIcon className="w-5 " /> {t('common.REMOVE')}
+															</Button>
+														)}
+														<Button
+															className=" px-2 py-1 mt-2 w-full !justify-start !min-w-min h-[2rem] rounded-lg text-xs dark:text-white dark:border-white"
+															variant="outline"
+															onClick={openModal}
+														>
+															<AddIcon className="w-3 h-3 text-dark dark:text-white" />{' '}
+															<span className=" truncate">{t('common.CREATE_NEW')}</span>
+														</Button>
+													</div>
+												</div>
+												<ScrollBar className="-pr-60" />
+											</ScrollArea>
+										</Card>
+									</Listbox.Options>
+								</Transition>
+							</>
+						);
+					}}
+				</Listbox>
+			</div>
+			<CreateProjectModal
+				onSuccess={(project) => {
+					setSelected(project);
+					onChange?.(project);
+					if (!controlled) {
+						handleUpdateProject(project);
+					}
 				}}
-			</Listbox>
-		</div>
+				open={isOpen}
+				closeModal={closeModal}
+			/>
+		</>
 	);
 }
diff --git a/apps/web/components/ui/svgs/project-icon.tsx b/apps/web/components/ui/svgs/project-icon.tsx
index e15ec9d40..1512e0648 100644
--- a/apps/web/components/ui/svgs/project-icon.tsx
+++ b/apps/web/components/ui/svgs/project-icon.tsx
@@ -1,6 +1,14 @@
-export default function ProjectIcon() {
+import { IIconProps } from '@/app/interfaces';
+
+export default function ProjectIcon(props: Partial<IIconProps>) {
 	return (
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			width={props.width ?? 18}
+			height={props.height ?? 18}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
 			<path
 				d="M12 12.2501C11.56 12.2501 11.12 12.1401 10.72 11.9301L4.21 8.4201C3.62 8.1001 3.25 7.4701 3.25 6.7701C3.25 6.0701 3.62 5.4401 4.21 5.1201L10.72 1.6101C11.52 1.1801 12.48 1.1801 13.27 1.6101L19.78 5.1201C20.37 5.4401 20.74 6.0701 20.74 6.7701C20.74 7.4701 20.37 8.1001 19.78 8.4201L13.27 11.9301C12.88 12.1501 12.44 12.2501 12 12.2501ZM12 2.7801C11.81 2.7801 11.61 2.8301 11.43 2.9301L4.93 6.4301C4.76 6.5201 4.75 6.7101 4.75 6.7701C4.75 6.8301 4.76 7.0201 4.93 7.1001L11.44 10.6101C11.8 10.8001 12.21 10.8001 12.57 10.6101L19.08 7.1001C19.24 7.0101 19.26 6.8201 19.26 6.7701C19.26 6.7101 19.25 6.5201 19.08 6.4401L12.57 2.9301C12.39 2.8301 12.19 2.7801 12 2.7801Z"
 				fill="#292D32"
diff --git a/apps/web/lib/features/project/create-project-modal.tsx b/apps/web/lib/features/project/create-project-modal.tsx
new file mode 100644
index 000000000..fd32a2c65
--- /dev/null
+++ b/apps/web/lib/features/project/create-project-modal.tsx
@@ -0,0 +1,96 @@
+import { useOrganizationProjects } from '@/app/hooks';
+import { IProject } from '@/app/interfaces';
+import { Button, Card, InputField, Modal, Text } from 'lib/components';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useState } from 'react';
+
+interface ICreateProjectModalProps {
+	open: boolean;
+	closeModal: () => void;
+	onSuccess?: (project: IProject) => void;
+}
+/**
+ * A modal that allow to create a new project
+ *
+ * @param {Object} props - The props Object
+ * @param {boolean} props.open - If true open the modal otherwise close the modal
+ * @param {() => void} props.closeModal - A function to close the modal
+ *
+ * @returns {JSX.Element} The modal element
+ */
+export function CreateProjectModal(props: ICreateProjectModalProps) {
+	const t = useTranslations();
+	const { open, closeModal, onSuccess } = props;
+	const { createOrganizationProject, createOrganizationProjectLoading } = useOrganizationProjects();
+	const [name, setName] = useState('');
+
+	// Cleanup
+	useEffect(() => {
+		return () => {
+			setName('');
+		};
+	}, []);
+
+	const handleCreateProject = useCallback(async () => {
+		try {
+			if (name.trim() === '') {
+				return;
+			}
+			const data = await createOrganizationProject({ name });
+
+			if (data) {
+				onSuccess?.(data);
+			}
+
+			closeModal();
+		} catch (error) {
+			console.error(error);
+		}
+	}, [closeModal, createOrganizationProject, name, onSuccess]);
+
+	return (
+		<Modal isOpen={open} closeModal={closeModal} alignCloseIcon>
+			<Card className=" sm:w-[33rem] w-[20rem]" shadow="custom">
+				<div className="flex flex-col items-center justify-between gap-8">
+					<Text.Heading as="h3" className="text-center">
+						{t('common.CREATE_PROJECT')}
+					</Text.Heading>
+
+					<div className="w-full">
+						<InputField
+							name="name"
+							autoCustomFocus
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							placeholder={'Please enter the project name'}
+							required
+							className="w-full"
+							wrapperClassName=" h-full border border-blue-500"
+							noWrapper
+						/>
+					</div>
+
+					<div className="flex items-center justify-between w-full">
+						<Button
+							disabled={createOrganizationProjectLoading}
+							onClick={closeModal}
+							className="h-[2.75rem]"
+							variant="outline"
+						>
+							{t('common.CANCEL')}
+						</Button>
+						<Button
+							disabled={createOrganizationProjectLoading}
+							loading={createOrganizationProjectLoading}
+							className="h-[2.75rem]"
+							type="submit"
+							onClick={handleCreateProject}
+						>
+							{t('common.CREATE')}
+						</Button>
+					</div>
+				</div>
+			</Card>
+		</Modal>
+	);
+}
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index f8598bf3d..6bd82e0a3 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -1079,7 +1079,7 @@ export function StatusDropdown<T extends TStatusItem>({
 									<Listbox.Options className="outline-none">
 										<Card
 											shadow="bigger"
-											className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-auto"
+											className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 overflow-x-auto"
 										>
 											{items.map((item, i) => {
 												const item_value = item?.value || item?.name;
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index c64c8e161..b46388feb 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -249,7 +249,8 @@
 		"FILTER_CUSTOM_RANGE": "نطاق مخصص",
 		"CLEAR_FILTER": "مسح الفلتر",
 		"CLEAR": "مسح",
-		"APPLY_FILTER": "تطبيق الفلتر"
+		"APPLY_FILTER": "تطبيق الفلتر",
+		"CREATE_NEW": "إنشاء جديد"
 	},
 	"sidebar": {
 		"DASHBOARD": "لوحة التحكم",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index a504c9f88..f67870cdc 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Потребителски диапазон",
 		"CLEAR_FILTER": "Изчисти филтъра",
 		"CLEAR": "Изчисти",
-		"APPLY_FILTER": "Приложи филтър"
+		"APPLY_FILTER": "Приложи филтър",
+		"CREATE_NEW": "Създай нов"
 	},
 	"hotkeys": {
 		"HELP": "Помощ",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index a29130ced..4eb10c048 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Benutzerdefinierter Bereich",
 		"CLEAR_FILTER": "Filter löschen",
 		"CLEAR": "Löschen",
-		"APPLY_FILTER": "Filter anwenden"
+		"APPLY_FILTER": "Filter anwenden",
+		"CREATE_NEW": "Neu erstellen"
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 7ad4c6701..f9b336cb5 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Custom Range",
 		"CLEAR_FILTER": "Clear Filter",
 		"CLEAR": "Clear",
-		"APPLY_FILTER": "Apply Filter"
+		"APPLY_FILTER": "Apply Filter",
+		"CREATE_NEW": "Create New"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 072a30752..48a1fb500 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Rango personalizado",
 		"CLEAR_FILTER": "Borrar filtro",
 		"CLEAR": "Borrar",
-		"APPLY_FILTER": "Aplicar filtro"
+		"APPLY_FILTER": "Aplicar filtro",
+		"CREATE_NEW": "Crear nuevo"
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 03e6d72ae..df60e6395 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Plage personnalisée",
 		"CLEAR_FILTER": "Effacer le filtre",
 		"CLEAR": "Effacer",
-		"APPLY_FILTER": "Appliquer le filtre"
+		"APPLY_FILTER": "Appliquer le filtre",
+		"CREATE_NEW": "Créer nouveau"
 	},
 	"hotkeys": {
 		"HELP": "Aide",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 009eaf700..4eb9b0848 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "טווח מותאם אישית",
 		"CLEAR_FILTER": "נקה סינון",
 		"CLEAR": "נקה",
-		"APPLY_FILTER": "החל סינון"
+		"APPLY_FILTER": "החל סינון",
+		"CREATE_NEW": "צור חדש"
 	},
 	"hotkeys": {
 		"HELP": "עזרה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index c9810b03a..5413c4aa9 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Intervallo personalizzato",
 		"CLEAR_FILTER": "Cancella filtro",
 		"CLEAR": "Cancella",
-		"APPLY_FILTER": "Applica filtro"
+		"APPLY_FILTER": "Applica filtro",
+		"CREATE_NEW": "Crea nuovo"
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 15022dd3d..566273f74 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Aangepast bereik",
 		"CLEAR_FILTER": "Filter wissen",
 		"CLEAR": "Wissen",
-		"APPLY_FILTER": "Filter toepassen"
+		"APPLY_FILTER": "Filter toepassen",
+		"CREATE_NEW": "Nieuwe maken"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 3ff42ee43..d694fcdc5 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Zakres niestandardowy",
 		"CLEAR_FILTER": "Wyczyść filtr",
 		"CLEAR": "Wyczyść",
-		"APPLY_FILTER": "Zastosuj filtr"
+		"APPLY_FILTER": "Zastosuj filtr",
+		"CREATE_NEW": "Utwórz nowy"
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 4ae42a04d..a34170a2d 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Faixa personalizada",
 		"CLEAR_FILTER": "Limpar filtro",
 		"CLEAR": "Limpar",
-		"APPLY_FILTER": "Aplicar filtro"
+		"APPLY_FILTER": "Aplicar filtro",
+		"CREATE_NEW": "Criar novo"
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index a64a38134..fbb5d83c4 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Пользовательский диапазон",
 		"CLEAR_FILTER": "Очистить фильтр",
 		"CLEAR": "Очистить",
-		"APPLY_FILTER": "Применить фильтр"
+		"APPLY_FILTER": "Применить фильтр",
+		"CREATE_NEW": "Создать новый"
 	},
 	"hotkeys": {
 		"HELP": "Помощь",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 311077623..4445a5557 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "自定义范围",
 		"CLEAR_FILTER": "清除筛选",
 		"CLEAR": "清除",
-		"APPLY_FILTER": "应用筛选"
+		"APPLY_FILTER": "应用筛选",
+		"CREATE_NEW": "创建新的"
 	},
 	"hotkeys": {
 		"HELP": "帮助",

From 74b7fb3b5001818e5e8892340dce5d4fe2673f81 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Thu, 28 Nov 2024 21:44:49 +0200
Subject: [PATCH 09/12] feat(timesheet): add skeleton loader for improved UI
 feedback

---
 .../[memberId]/components/TimesheetView.tsx   |  7 ++--
 .../shared/skeleton/TimesheetSkeleton.tsx     | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/shared/skeleton/TimesheetSkeleton.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index 4fd852b36..ee72a1f79 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -1,4 +1,5 @@
 import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
+import TimesheetSkeleton from '@components/shared/skeleton/TimesheetSkeleton';
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
@@ -7,8 +8,10 @@ export function TimesheetView({ data, loading }: { data?: GroupedTimesheet[]; lo
 
 	if (loading || !data) {
 		return (
-			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex items-center justify-center">
-				<p>{t('pages.timesheet.LOADING')}</p>
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
+				{Array.from({ length: 10 }).map((_, index) => (
+					<TimesheetSkeleton key={index} />
+				))}
 			</div>
 		);
 	}
diff --git a/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx b/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx
new file mode 100644
index 000000000..e0462c314
--- /dev/null
+++ b/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Skeleton from './Skeleton'
+import { clsxm } from '@/app/utils'
+
+function TimesheetSkeleton() {
+    return (
+        <div className={clsxm(
+            'flex justify-between items-center w-full',
+            'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border',
+            'border-gray-100 dark:border-gray-700 text-[#71717A] font-medium my-2 p-2 h-[50px] rounded-sm gap-x-2  px-2 py-2'
+        )}>
+            <div className='flex flex-col w-full gap-4'>
+                <div className='flex items-center justify-between  gap-4'>
+                    <Skeleton width={80} borderRadius={4} height={10} className="dark:bg-[#272930]" />
+                    <Skeleton width={80} borderRadius={4} height={10} className="dark:bg-[#272930]" />
+                </div>
+                <div className='flex items-center justify-between gap-4 w-full'>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton width={20} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={40} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                    </div>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default TimesheetSkeleton

From 936b83564bc91a6ee849f013e2b0615fe63c684e Mon Sep 17 00:00:00 2001
From: syns <sutralian@gmail.com>
Date: Fri, 29 Nov 2024 03:16:20 +0700
Subject: [PATCH 10/12] Fix/server web implement config (#3368)

* fix: server web default setting

* fix: handle dynamic gauzy api host from desktop config

* fix: setup server web

* fix: remove unecessary code

* fix: miss spell word

* fix: clean code

* fix: handle error on create tray menu

* fix: build standalone for desktop
---
 .scripts/configure.electron.ts                |  77 ++++++++
 .scripts/copy-web-build.ts                    |  34 ++++
 .../src/locales/i18n/bg/translation.json      |  24 +--
 .../src/locales/i18n/en/translation.json      |  24 +--
 apps/server-web/src/main/helpers/constant.ts  |   4 +-
 .../src/main/helpers/interfaces/i-constant.ts |   2 +-
 .../src/main/helpers/interfaces/i-menu.ts     |  15 ++
 .../src/main/helpers/interfaces/i-server.ts   |   6 +-
 .../src/main/helpers/interfaces/index.ts      |   1 +
 .../src/main/helpers/replace-config.ts        |  24 +++
 .../services/desktop-server-factory.ts        |   1 +
 .../helpers/services/libs/desktop-store.ts    |  50 ++++--
 .../src/main/helpers/services/web-service.ts  |  16 +-
 apps/server-web/src/main/main.ts              | 168 +++++++++++-------
 apps/server-web/src/main/menu.ts              |  26 +--
 .../renderer/components/LanguageSelector.tsx  |  54 ++++++
 .../src/renderer/components/SideBar.tsx       |  22 +--
 .../src/renderer/components/Updater.tsx       |  12 +-
 .../renderer/libs/interfaces/i-components.ts  |   4 +-
 .../src/renderer/libs/interfaces/i-setting.ts |   4 +-
 .../server-web/src/renderer/pages/Setting.tsx |  36 +---
 .../src/renderer/pages/setup/Landing.tsx      |  22 ++-
 apps/web/app/api/desktop-server/route.ts      |   6 +
 apps/web/app/constants.ts                     |  13 +-
 apps/web/app/env.ts                           |  12 ++
 .../app/interfaces/IRuntimeServerConfig.ts    |   5 +
 apps/web/app/services/client/axios.ts         |  42 +++--
 .../server/requests/desktop-source.ts         |  16 ++
 package.json                                  |   5 +-
 29 files changed, 510 insertions(+), 215 deletions(-)
 create mode 100644 .scripts/configure.electron.ts
 create mode 100644 .scripts/copy-web-build.ts
 create mode 100644 apps/server-web/src/main/helpers/interfaces/i-menu.ts
 create mode 100644 apps/server-web/src/renderer/components/LanguageSelector.tsx
 create mode 100644 apps/web/app/api/desktop-server/route.ts
 create mode 100644 apps/web/app/interfaces/IRuntimeServerConfig.ts
 create mode 100644 apps/web/app/services/server/requests/desktop-source.ts

diff --git a/.scripts/configure.electron.ts b/.scripts/configure.electron.ts
new file mode 100644
index 000000000..fb2f5256b
--- /dev/null
+++ b/.scripts/configure.electron.ts
@@ -0,0 +1,77 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { hideBin } from 'yargs/helpers';
+import yargs from 'yargs';
+
+interface Arguments {
+    type: 'server' | 'constant'
+}
+const argv = yargs(hideBin(process.argv))
+  .options({
+    type: {
+      type: 'string',
+      choices: ['server', 'constant'],
+      demandOption: true,
+      description: 'Type of configuration to modify'
+    }
+  })
+  .parseSync() as Arguments;
+
+function modifiedNextServer() {
+    const filePath = path.resolve(__dirname, '../apps/server-web/release/app/dist/standalone/apps/web/server.js');
+    try {
+        let fileContent = fs.readFileSync(filePath, 'utf8');
+        const searchString = 'process.env.__NEXT_PRIVATE_STANDALONE_CONFIG';
+        const codeToInsert = `
+        nextConfig.serverRuntimeConfig = {
+            "GAUZY_API_SERVER_URL": process.env.GAUZY_API_SERVER_URL,
+            "NEXT_PUBLIC_GAUZY_API_SERVER_URL": process.env.NEXT_PUBLIC_GAUZY_API_SERVER_URL
+        }
+        `;
+
+        let lines = fileContent.split('\n');
+        const index = lines.findIndex((line) => line.includes(searchString));
+
+        if (index !== -1) {
+            lines.splice(index - 1, 0, codeToInsert);
+
+            fileContent = lines.join('\n');
+            fs.writeFileSync(filePath, fileContent, 'utf8');
+            console.log('Line of code successfully inserted.');
+        } else {
+            console.log(`The string "${searchString}" was not found in the file.`);
+        }
+    } catch (error) {
+        console.error('Failed to change static server configuration');
+    }
+}
+
+function updateWebConstant(setDesktopApp) {
+    const filePath = path.resolve(__dirname, '../apps/web/app/constants.ts');
+    try {
+       let fileContent = fs.readFileSync(filePath, 'utf8');
+       const envCheck = `export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';`;
+       const hardcoded = `export const IS_DESKTOP_APP = true;`;
+
+       const [from, to] = setDesktopApp ? [envCheck, hardcoded] : [hardcoded, envCheck];
+
+       if (!fileContent.includes(from)) {
+           throw new Error(`Expected content not found in ${filePath}`);
+       }
+
+       fileContent = fileContent.replace(from, to);
+       fs.writeFileSync(filePath, fileContent, 'utf8');
+       console.log(`Successfully ${setDesktopApp ? 'set' : 'reverted'} IS_DESKTOP_APP`);
+   } catch (error) {
+       console.error('Failed to update constants:', error);
+       process.exit(1);
+   }
+}
+
+
+if (argv.type === 'server') {
+    modifiedNextServer();
+    updateWebConstant(false);
+} else if (argv.type === 'constant') {
+    updateWebConstant(true);
+}
diff --git a/.scripts/copy-web-build.ts b/.scripts/copy-web-build.ts
new file mode 100644
index 000000000..d9291be66
--- /dev/null
+++ b/.scripts/copy-web-build.ts
@@ -0,0 +1,34 @@
+import { copy } from 'fs-extra';
+import { join } from 'path';
+
+async function copyWebBuild() {
+  const webDir = join(process.cwd(), 'apps/web');
+  const distDir = join(process.cwd(), 'apps/server-web/release/app/dist');
+
+  try {
+    // Copy standalone build
+    await copy(
+      join(webDir, '.next/standalone'),
+      join(distDir, 'standalone')
+    );
+
+    // Copy static files
+    await copy(
+      join(webDir, '.next/static'),
+      join(distDir, 'standalone/apps/web/.next/static')
+    );
+
+    // Copy public files
+    await copy(
+      join(webDir, 'public'),
+      join(distDir, 'standalone/apps/web/public')
+    );
+
+    console.log('Build files copied successfully');
+  } catch (error) {
+    console.error('Failed to copy build files:', error);
+    process.exit(1);
+  }
+}
+
+copyWebBuild();
diff --git a/apps/server-web/src/locales/i18n/bg/translation.json b/apps/server-web/src/locales/i18n/bg/translation.json
index bcec1eff5..28ca92eeb 100644
--- a/apps/server-web/src/locales/i18n/bg/translation.json
+++ b/apps/server-web/src/locales/i18n/bg/translation.json
@@ -15,19 +15,19 @@
     "SERVER_WINDOW": "Прозорец на сървъра"
   },
   "MENU_APP": {
-    "ABOUT": "Относно",
-    "QUIT": "Изход",
-    "WINDOW": "Прозорец",
-    "SUBMENU": {
-      "SETTING": "Настройки",
-      "SERVER_WINDOW": "Сървърен прозорец",
-      "LEARN_MORE": "Научете повече",
-      "DOC": "Документация",
-      "SETTING_DEV": "Настройки за разработчици",
-      "SERVER_DEV": "Сървър за разработчици"
+    "APP_ABOUT": "Относно",
+    "APP_QUIT": "Изход",
+    "APP_WINDOW": "Прозорец",
+    "APP_SUBMENU": {
+      "APP_SETTING": "Настройки",
+      "APP_SERVER_WINDOW": "Сървърен прозорец",
+      "APP_LEARN_MORE": "Научете повече",
+      "APP_DOC": "Документация",
+      "APP_SETTING_DEV": "Настройки за разработчици",
+      "APP_SERVER_DEV": "Сървър за разработчици"
     },
-    "DEV": "Разработчик",
-    "HELP": "Помощ"
+    "APP_DEV": "Разработчик",
+    "APP_HELP": "Помощ"
   },
   "FORM": {
     "FIELDS": {
diff --git a/apps/server-web/src/locales/i18n/en/translation.json b/apps/server-web/src/locales/i18n/en/translation.json
index c18265dde..440e56bec 100644
--- a/apps/server-web/src/locales/i18n/en/translation.json
+++ b/apps/server-web/src/locales/i18n/en/translation.json
@@ -15,19 +15,19 @@
     "SERVER_WINDOW": "Server Window"
   },
   "MENU_APP": {
-    "ABOUT": "About",
-    "QUIT": "Quit",
-    "WINDOW": "Window",
-    "SUBMENU": {
-      "SETTING": "Setting",
-      "SERVER_WINDOW": "Server Window",
-      "LEARN_MORE": "Learn More",
-      "DOC": "Documentation",
-      "SETTING_DEV": "Setting Dev.",
-      "SERVER_DEV": "Server Dev."
+    "APP_ABOUT": "About",
+    "APP_QUIT": "Quit",
+    "APP_WINDOW": "Window",
+    "APP_SUBMENU": {
+      "APP_SETTING": "Setting",
+      "APP_SERVER_WINDOW": "Server Window",
+      "APP_LEARN_MORE": "Learn More",
+      "APP_DOC": "Documentation",
+      "APP_SETTING_DEV": "Setting Dev.",
+      "APP_SERVER_DEV": "Server Dev."
     },
-    "DEV": "Developer",
-    "HELP": "Help"
+    "APP_DEV": "Developer",
+    "APP_HELP": "Help"
   },
   "FORM": {
     "FIELDS": {
diff --git a/apps/server-web/src/main/helpers/constant.ts b/apps/server-web/src/main/helpers/constant.ts
index b2ebfcb96..bcd77553f 100644
--- a/apps/server-web/src/main/helpers/constant.ts
+++ b/apps/server-web/src/main/helpers/constant.ts
@@ -17,7 +17,9 @@ export const EventLists = {
   SERVER_WINDOW: 'SERVER_WINDOW',
   RESTART_SERVER: 'RESTART_SERVER',
   CHANGE_THEME: 'CHANGE_THEME',
-  SETUP_WINDOW: 'SETUP_WINDOW'
+  SETUP_WINDOW: 'SETUP_WINDOW',
+  SETTING_WINDOW_DEV: 'SETTING_WINDOW_DEV',
+  SERVER_WINDOW_DEV: 'SERVER_WINDOW_DEV'
 }
 
 export const SettingPageTypeMessage = {
diff --git a/apps/server-web/src/main/helpers/interfaces/i-constant.ts b/apps/server-web/src/main/helpers/interfaces/i-constant.ts
index 421769ce3..e8e439af1 100644
--- a/apps/server-web/src/main/helpers/interfaces/i-constant.ts
+++ b/apps/server-web/src/main/helpers/interfaces/i-constant.ts
@@ -1 +1 @@
-export type Channels = 'setting-page' | 'ipc-renderer' | 'language-set' | 'updater-page' | 'server-page' | 'theme-change' | 'current-theme';
+export type Channels = 'setting-page' | 'ipc-renderer' | 'language-set' | 'updater-page' | 'server-page' | 'theme-change' | 'current-theme' | 'current-language';
diff --git a/apps/server-web/src/main/helpers/interfaces/i-menu.ts b/apps/server-web/src/main/helpers/interfaces/i-menu.ts
new file mode 100644
index 000000000..158bc6011
--- /dev/null
+++ b/apps/server-web/src/main/helpers/interfaces/i-menu.ts
@@ -0,0 +1,15 @@
+import { MenuItemConstructorOptions } from 'electron';
+export interface AppMenu {
+    id?: string;
+    label: string; // Menu label
+    submenu?: (AppMenu | ElectronMenuItem)[]; // Nested menus or Electron menu items
+    role?: 'appMenu' | 'fileMenu' | 'editMenu' | 'viewMenu' | 'windowMenu' | 'help'; // Predefined menu roles
+    type?: 'normal' | 'separator' | 'submenu' | 'checkbox' | 'radio'; // Menu item type
+    click?: () => void; // Click handler for the menu item
+    accelerator?: string; // Keyboard shortcut
+    enabled?: boolean; // Whether the item is enabled
+    visible?: boolean; // Whether the item is visible
+    checked?: boolean; // For 'checkbox' or 'radio' type
+  }
+
+  export type ElectronMenuItem = MenuItemConstructorOptions;
diff --git a/apps/server-web/src/main/helpers/interfaces/i-server.ts b/apps/server-web/src/main/helpers/interfaces/i-server.ts
index 43f188166..146e8ea31 100644
--- a/apps/server-web/src/main/helpers/interfaces/i-server.ts
+++ b/apps/server-web/src/main/helpers/interfaces/i-server.ts
@@ -1,13 +1,13 @@
-interface GeneralConfig {
+export interface GeneralConfig {
     lang?: string
     autoUpdate?: boolean
-    updateCheckPeriode?: string
+    updateCheckPeriod?: string
     theme?: string
     setup?: boolean
     [key: string]: any
 }
 
-interface ServerConfig {
+export interface ServerConfig {
     PORT: number;
     NEXT_PUBLIC_GAUZY_API_SERVER_URL: string;
     GAUZY_API_SERVER_URL: string;
diff --git a/apps/server-web/src/main/helpers/interfaces/index.ts b/apps/server-web/src/main/helpers/interfaces/index.ts
index 8f45b8de0..de47665c2 100644
--- a/apps/server-web/src/main/helpers/interfaces/index.ts
+++ b/apps/server-web/src/main/helpers/interfaces/index.ts
@@ -1,3 +1,4 @@
 export * from './i-server';
 export * from './i-desktop-dialog';
 export * from './i-constant';
+export * from './i-menu';
diff --git a/apps/server-web/src/main/helpers/replace-config.ts b/apps/server-web/src/main/helpers/replace-config.ts
index 98e12f9af..5e80d8730 100644
--- a/apps/server-web/src/main/helpers/replace-config.ts
+++ b/apps/server-web/src/main/helpers/replace-config.ts
@@ -42,3 +42,27 @@ export const replaceConfig = async (folderPath: string, envOptions: EnvOptions)
     console.log('error on replacing file', error);
   }
 }
+
+export const clearDesktopConfig = async (folderPath: string): Promise<Boolean> => {
+  if (!folderPath || typeof folderPath !== 'string') {
+     throw new Error('Invalid folder path provided');
+  }
+  const DESKTOP_CONFIG_FILES = ['desktop-server.body', 'desktop-server.meta'] as const;
+  try {
+    // remove cached desktop server config
+    await Promise.all(
+      DESKTOP_CONFIG_FILES.map(async (file) => {
+        const filePath = path.join(folderPath, file);
+        try {
+          await fs.promises.unlink(filePath)
+        } catch (error: any) {
+          console.log('error unlink static web file', error.message)
+        }
+      })
+    )
+    return true;
+  } catch (error) {
+    console.log('Failed to clear static config');
+    return false;
+  }
+}
diff --git a/apps/server-web/src/main/helpers/services/desktop-server-factory.ts b/apps/server-web/src/main/helpers/services/desktop-server-factory.ts
index 1a9502238..8206cc2a9 100644
--- a/apps/server-web/src/main/helpers/services/desktop-server-factory.ts
+++ b/apps/server-web/src/main/helpers/services/desktop-server-factory.ts
@@ -8,6 +8,7 @@ export class DesktopServerFactory {
 		if (!this.apiInstance && !!env) {
 			this.apiInstance = new WebService(path, env, win, signal, eventEmitter);
 		}
+		this.apiInstance.updateEnv(env)
 		return this.apiInstance;
 	}
 }
diff --git a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
index 01c708563..1875ee9c2 100644
--- a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
+++ b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
@@ -1,7 +1,7 @@
 import Store from 'electron-store';
-import { WebServer } from '../../interfaces';
+import { WebServer, ServerConfig } from '../../interfaces';
 const store = new Store();
-const DEFAULT_CONFIG:any = {
+const DEFAULT_CONFIG:WebServer = {
 	server: {
 		PORT: 3002,
 		GAUZY_API_SERVER_URL: 'http://localhost:3000',
@@ -11,7 +11,7 @@ const DEFAULT_CONFIG:any = {
 	general: {
 		lang: 'en',
 		autoUpdate: true,
-		updateCheckPeriode: '1140'
+		updateCheckPeriod: '1140' // Time in minutes
 	}
 }
 export const LocalStore = {
@@ -35,17 +35,41 @@ export const LocalStore = {
 		});
 	},
 
+	deepMerge<T>(target: T, source: Partial<T>): T {
+		const result: T = { ...target };
+		Object.keys(source).forEach(key => {
+			const value = source[key as keyof T];
+			if (value && typeof value === 'object') {
+				result[key as keyof T] = this.deepMerge(
+					target[key as keyof T],
+					value as any
+				);
+			} else if (value !== undefined) {
+				result[key as keyof T] = value as any;
+			}
+		});
+		return result;
+	},
 
-	setDefaultServerConfig: () => {
-		const defaultConfig: WebServer | any = store.get('config') || {};
-		Object.keys(DEFAULT_CONFIG).forEach((key) => {
-			Object.keys(DEFAULT_CONFIG[key]).forEach((keySub) => {
-				defaultConfig[key] = defaultConfig[key] || {};
-				defaultConfig[key][keySub] = defaultConfig[key][keySub] || DEFAULT_CONFIG[key][keySub];
-			})
-		})
-		store.set({
-			config: defaultConfig
+	validateConfig(config: WebServer): void {
+		const required = ['PORT', 'GAUZY_API_SERVER_URL'];
+		required.forEach(field => {
+			if (!config || !config.server || !config?.server[field as keyof ServerConfig]) {
+				throw new Error(`Missing required field: ${field}`);
+			}
 		});
+	},
+
+	setDefaultServerConfig() {
+	    try {
+	        const storedConfig = store.get('config') as Partial<WebServer> || {};
+	        const mergedConfig = this.deepMerge<WebServer>(DEFAULT_CONFIG, storedConfig)
+	        this.validateConfig(mergedConfig || {});
+
+	        store.set({ config: mergedConfig });
+	    } catch (error) {
+	        console.error('Failed to set default configuration:', error);
+	        store.set({ config: DEFAULT_CONFIG });
+	    }
 	}
 };
diff --git a/apps/server-web/src/main/helpers/services/web-service.ts b/apps/server-web/src/main/helpers/services/web-service.ts
index 80d02a4ff..ffb0b59b7 100644
--- a/apps/server-web/src/main/helpers/services/web-service.ts
+++ b/apps/server-web/src/main/helpers/services/web-service.ts
@@ -5,7 +5,7 @@ import { EventEmitter } from 'stream';
 export class WebService extends ServerTask {
 	constructor(
 		readonly path: string,
-		readonly env: any,
+		private env: any,
 		readonly window: BrowserWindow,
 		readonly signal: AbortSignal,
 		readonly eventEmitter: EventEmitter
@@ -38,11 +38,11 @@ export class WebService extends ServerTask {
 		}
 	}
 
-	private setApiConfig(): void {
-		// Object.assign(this.args, {
-		// 	API_HOST: '0.0.0.0',
-		// 	API_PORT: this.config.setting.PORT,
-		// 	API_BASE_URL: this.config.apiUrl
-		// });
+	public setApiConfig(): void {
+		Object.assign(this.args, {...this.env});
 	}
-}
+
+	public updateEnv(env: any): void {
+		this.env = {...env};
+	}
+ }
diff --git a/apps/server-web/src/main/main.ts b/apps/server-web/src/main/main.ts
index cba85f718..09db991a2 100644
--- a/apps/server-web/src/main/main.ts
+++ b/apps/server-web/src/main/main.ts
@@ -10,11 +10,12 @@ import Updater from './updater';
 import { mainBindings } from 'i18next-electron-fs-backend';
 import i18nextMainBackend from '../configs/i18n.mainconfig';
 import fs from 'fs';
-import { WebServer } from './helpers/interfaces';
-import { replaceConfig } from './helpers';
+import { WebServer, AppMenu, ServerConfig } from './helpers/interfaces';
+import { clearDesktopConfig } from './helpers';
 import Log from 'electron-log';
 import MenuBuilder from './menu';
 import { config } from '../configs/config';
+import { debounce } from 'lodash';
 
 
 console.log = Log.log;
@@ -39,8 +40,6 @@ let tray: Tray;
 let settingWindow: BrowserWindow | null = null;
 let logWindow: BrowserWindow | null = null;
 let setupWindow: BrowserWindow | any = null;
-let SettingMenu: any = null;
-let ServerWindowMenu: any = null;
 const appMenu = new MenuBuilder(eventEmitter)
 
 Log.hooks.push((message: any, transport) => {
@@ -92,7 +91,7 @@ i18nextMainBackend.on('initialized', () => {
 });
 
 let trayMenuItems: any = [];
-let appMenuItems: any = [];
+let appMenuItems: AppMenu[] = [];
 
 const RESOURCES_PATH = app.isPackaged
   ? path.join(process.resourcesPath, 'assets')
@@ -180,7 +179,6 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
       mainBindings(ipcMain, settingWindow, fs);
       settingWindow.on('closed', () => {
         settingWindow = null;
-        SettingMenu = null
       });
       Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
       break;
@@ -191,7 +189,6 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
       mainBindings(ipcMain, logWindow, fs);
       logWindow.on('closed', () => {
         logWindow = null;
-        ServerWindowMenu = null
       })
       Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
       break;
@@ -200,6 +197,11 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
       url = resolveHtmlPath('index.html', 'setup');
       setupWindow?.loadURL(url);
       mainBindings(ipcMain, setupWindow, fs);
+      if (process.platform === 'darwin') {
+        Menu.setApplicationMenu(Menu.buildFromTemplate([]));
+      } else {
+        setupWindow.removeMenu();
+      }
       setupWindow.on('closed', () => {
         setupWindow = null;
       })
@@ -212,12 +214,17 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
 const runServer = async () => {
   console.log('Run the Server...');
   try {
-    const envVal: any = getEnvApi();
+    const envVal: ServerConfig | undefined = getEnvApi();
+    const folderPath = getWebDirPath();
+    await clearDesktopConfig(folderPath);
 
     // Instantiate API and UI servers
     await desktopServer.start(
       { api: serverPath },
-      envVal,
+      {
+        ...(envVal || {}),
+        IS_DESKTOP_APP: true
+      },
       undefined,
       signal
     );
@@ -243,7 +250,7 @@ const restartServer = async () => {
   }, 1000)
 }
 
-const getEnvApi = () => {
+const getEnvApi = (): ServerConfig | undefined => {
   const setting: WebServer = LocalStore.getStore('config')
   return setting?.server;
 };
@@ -257,24 +264,14 @@ const SendMessageToSettingWindow = (type: string, data: any) => {
 
 const onInitApplication = () => {
  // check and set default config
-  LocalStore.setDefaultServerConfig();
-  createIntervalAutoUpdate()
-  trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
-  appMenuItems = appMenuItems.length ? appMenuItems : appMenu.defaultMenu();
-  tray = _initTray(trayMenuItems, getAssetPath('icons/icon.png'));
-  i18nextMainBackend.on('languageChanged', (lng) => {
-    if (i18nextMainBackend.isInitialized) {
-
+  const storeConfig:WebServer = LocalStore.getStore('config');
+  i18nextMainBackend.on('languageChanged', debounce((lng) => {
+    if (i18nextMainBackend.isInitialized && storeConfig.general?.setup) {
       trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
       updateTrayMenu('none', {}, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
       Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
     }
-  });
-  eventEmitter.on(EventLists.webServerStart, async () => {
-    updateTrayMenu('SERVER_START', { enabled: false }, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
-    isServerRun = true;
-    await runServer();
-  })
+  }, 250));
 
   eventEmitter.on(EventLists.webServerStop, async () => {
     await stopServer();
@@ -400,6 +397,7 @@ const onInitApplication = () => {
 
   eventEmitter.on(EventLists.SERVER_WINDOW, async () => {
     if (!logWindow) {
+      initTrayMenu()
       await createWindow('LOG_WINDOW');
     }
     const serverSetting = LocalStore.getStore('config');
@@ -419,7 +417,7 @@ const onInitApplication = () => {
   })
 
   eventEmitter.on(EventLists.OPEN_WEB, () => {
-    const envConfig = getEnvApi();
+    const envConfig: ServerConfig | undefined = getEnvApi();
     const url = `http://127.0.0.1:${envConfig?.PORT}`
     shell.openExternal(url)
   })
@@ -431,21 +429,57 @@ const onInitApplication = () => {
   eventEmitter.on(EventLists.SERVER_WINDOW_DEV, () => {
     logWindow?.webContents.toggleDevTools();
   })
+}
 
-  eventEmitter.emit(EventLists.SERVER_WINDOW);
+const initTrayMenu = () => {
+  const MAX_RETRIES = 2;
+  const retryInit = async (attempts: number = 0) => {
+    try {
+      LocalStore.setDefaultServerConfig();
+      createIntervalAutoUpdate()
+      trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
+      appMenuItems = appMenuItems.length ? appMenuItems : appMenu.defaultMenu();
+      tray = _initTray(trayMenuItems, getAssetPath('icons/icon.png'));
+
+      eventEmitter.on(EventLists.webServerStart, async () => {
+        updateTrayMenu('SERVER_START', { enabled: false }, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
+        isServerRun = true;
+        await runServer();
+      })
+
+      trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
+      updateTrayMenu('none', {}, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
+    } catch (error) {
+      if (attempts < MAX_RETRIES) {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        retryInit(attempts + 1)
+      }
+      console.error('Failed to initialize application:', error);
+      dialog.showErrorBox('Initialization Error', 'Failed to initialize application');
+    }
+  }
+  if (!tray) {
+    return retryInit(0)
+  }
 }
 
 (async () => {
   await app.whenReady()
   const storeConfig:WebServer = LocalStore.getStore('config');
+  onInitApplication();
   if (storeConfig?.general?.setup) {
-    onInitApplication();
+    eventEmitter.emit(EventLists.SERVER_WINDOW);
   } else {
     if (!setupWindow) {
       await createWindow('SETUP_WINDOW');
     }
     if (setupWindow) {
-      setupWindow?.show()
+      setupWindow?.show();
+      setupWindow?.webContents.once('did-finish-load', () => {
+        setTimeout(() => {
+          setupWindow?.webContents.send('languageSignal', storeConfig.general?.lang);
+        }, 50)
+      })
     }
   }
 })()
@@ -459,47 +493,44 @@ ipcMain.on('message', async (event, arg) => {
   event.reply('message', `${arg} World!`)
 })
 
+const getWebDirPath = () => {
+  const dirFiles = 'standalone/apps/web/.next/server/app/api';
+  const devDirFilesPath = path.join(__dirname, resourceDir.webServer, dirFiles);
+  const packDirFilesPath = path.join(process.resourcesPath, 'release', 'app', 'dist', dirFiles)
+  const diFilesPath = isPack ? packDirFilesPath : devDirFilesPath;
+  return diFilesPath;
+}
+
 ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
   switch (arg.type) {
     case SettingPageTypeMessage.saveSetting:
-      const existingConfig = getEnvApi();
-      LocalStore.updateConfigSetting({
-        server: arg.data
-      });
-      const dirFiles = 'standalone/apps/web/.next';
-      const devDirFilesPath = path.join(__dirname, resourceDir.webServer, dirFiles);
-      const packDirFilesPath = path.join(process.resourcesPath, 'release', 'app', 'dist', dirFiles)
-      const diFilesPath = isPack ? packDirFilesPath : devDirFilesPath;
-      await replaceConfig(
-        diFilesPath,
-        {
-          before: {
-            NEXT_PUBLIC_GAUZY_API_SERVER_URL: existingConfig?.NEXT_PUBLIC_GAUZY_API_SERVER_URL || config.NEXT_PUBLIC_GAUZY_API_SERVER_URL
-          },
-          after: {
-            NEXT_PUBLIC_GAUZY_API_SERVER_URL: arg.data.NEXT_PUBLIC_GAUZY_API_SERVER_URL || config.NEXT_PUBLIC_GAUZY_API_SERVER_URL
-          }
-        }
-      )
-      if (arg.isSetup) {
+      {
         LocalStore.updateConfigSetting({
-          general: {
-            setup: true
-          }
-        });
-        setupWindow?.close();
-        onInitApplication();
-        eventEmitter.emit(EventLists.SERVER_WINDOW);
-      } else {
-        event.sender.send(IPC_TYPES.SETTING_PAGE, {
-          type: SettingPageTypeMessage.mainResponse, data: {
-            status: true,
-            isServerRun: isServerRun
-          }
+          server: arg.data
         });
+        const diFilesPath = getWebDirPath();
+        await clearDesktopConfig(
+          diFilesPath
+        )
+        if (arg.isSetup) {
+          LocalStore.updateConfigSetting({
+            general: {
+              setup: true
+            }
+          });
+          setupWindow?.close();
+          eventEmitter.emit(EventLists.SERVER_WINDOW);
+        } else {
+          event.sender.send(IPC_TYPES.SETTING_PAGE, {
+            type: SettingPageTypeMessage.mainResponse, data: {
+              status: true,
+              isServerRun: isServerRun
+            }
+          });
+        }
+        break;
       }
-      break;
-    case SettingPageTypeMessage.checkUpdate:
+      case SettingPageTypeMessage.checkUpdate:
       updater.checkUpdate();
       break;
     case SettingPageTypeMessage.installUpdate:
@@ -523,7 +554,7 @@ ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
       LocalStore.updateConfigSetting({
         general: {
           autoUpdate: arg.data.autoUpdate,
-          updateCheckPeriode: arg.data.updateCheckPeriode
+          updateCheckPeriod: arg.data.updateCheckPeriod
         }
       })
       createIntervalAutoUpdate()
@@ -554,13 +585,18 @@ ipcMain.handle('current-theme', async () => {
   return setting?.general?.theme;;
 })
 
+ipcMain.handle('current-language', async (): Promise<string> => {
+  const setting: WebServer = LocalStore.getStore('config');
+  return setting?.general?.lang || 'en';
+})
+
 const createIntervalAutoUpdate = () => {
   if (intervalUpdate) {
     clearInterval(intervalUpdate)
   }
   const setting: WebServer = LocalStore.getStore('config');
-  if (setting.general?.autoUpdate && setting.general.updateCheckPeriode) {
-    const checkIntervalSecond = parseInt(setting.general.updateCheckPeriode);
+  if (setting.general?.autoUpdate && setting.general.updateCheckPeriod) {
+    const checkIntervalSecond = parseInt(setting.general.updateCheckPeriod);
     if (!Number.isNaN(checkIntervalSecond)) {
       const intervalMS = checkIntervalSecond * 60 * 1000;
       intervalUpdate = setInterval(() => {
diff --git a/apps/server-web/src/main/menu.ts b/apps/server-web/src/main/menu.ts
index cec72f148..e95f8f8ba 100644
--- a/apps/server-web/src/main/menu.ts
+++ b/apps/server-web/src/main/menu.ts
@@ -7,6 +7,7 @@ import { config } from '../configs/config';
 import { EventEmitter } from 'events';
 import { EventLists } from './helpers/constant';
 import i18n from 'i18next';
+import { AppMenu } from './helpers/interfaces';
 
 export default class MenuBuilder {
   eventEmitter: EventEmitter
@@ -15,7 +16,7 @@ export default class MenuBuilder {
     this.eventEmitter = eventEmitter
   }
 
-  defaultMenu() {
+  defaultMenu(): AppMenu[] {
     const isDarwin = process.platform === 'darwin';
     return [
       {
@@ -24,8 +25,7 @@ export default class MenuBuilder {
         submenu: [
           {
             id: 'MENU_APP_ABOUT',
-            label: `MENU_APP.ABOUT`,
-            selector: 'orderFrontStandardAboutPanel:',
+            label: `MENU_APP.APP_ABOUT`,
             click: () => {
               this.eventEmitter.emit(EventLists.gotoAbout)
             }
@@ -33,7 +33,7 @@ export default class MenuBuilder {
           { type: 'separator' },
           {
             id: 'MENU_APP_QUIT',
-            label: 'MENU_APP.QUIT',
+            label: 'MENU_APP.APP_QUIT',
             accelerator: isDarwin ? 'Command+Q' : 'Alt+F4',
             click: () => {
               app.quit();
@@ -43,18 +43,18 @@ export default class MenuBuilder {
       },
       {
         id: 'MENU_APP_WINDOW',
-        label: 'MENU_APP.WINDOW',
+        label: 'MENU_APP.APP_WINDOW',
         submenu: [
           {
             id: 'SUBMENU_SETTING',
-            label: 'MENU_APP.SUBMENU.SETTING',
+            label: 'MENU_APP.APP_SUBMENU.APP_SETTING',
             click: () => {
               this.eventEmitter.emit(EventLists.gotoSetting);
             }
           },
           {
             id: 'SUBMENU_SERVER',
-            label: 'MENU_APP.SUBMENU.SERVER_WINDOW',
+            label: 'MENU_APP.APP_SUBMENU.APP_SERVER_WINDOW',
             click: () => {
               this.eventEmitter.emit(EventLists.SERVER_WINDOW);
             }
@@ -63,18 +63,18 @@ export default class MenuBuilder {
       },
       {
         id: 'MENU_APP_HELP',
-        label: 'MENU_APP.HELP',
+        label: 'MENU_APP.APP_HELP',
         submenu: [
           {
             id: 'SUBMENU_LEARN_MORE',
-            label: 'MENU_APP.SUBMENU.LEARN_MORE',
+            label: 'MENU_APP.APP_SUBMENU.APP_LEARN_MORE',
             click() {
               shell.openExternal(config.COMPANY_SITE_LINK);
             },
           },
           {
             id: 'SUBMENU_DOC',
-            label: 'MENU_APP.SUBMENU.DOC',
+            label: 'MENU_APP.APP_SUBMENU.APP_DOC',
             click() {
               shell.openExternal(
                 config.COMPANY_GITHUB_LINK
@@ -85,18 +85,18 @@ export default class MenuBuilder {
       },
       {
         id: 'MENU_APP_DEV',
-        label: 'MENU_APP.DEV',
+        label: 'MENU_APP.APP_DEV',
         submenu: [
           {
             id: 'SUBMENU_SETTING_DEV',
-            label: 'MENU_APP.SUBMENU.SETTING_DEV',
+            label: 'MENU_APP.APP_SUBMENU.APP_SETTING_DEV',
             click: () => {
               this.eventEmitter.emit(EventLists.SETTING_WINDOW_DEV);
             },
           },
           {
             id: 'SUBMENU_SERVER_DEV',
-            label: 'MENU_APP.SUBMENU.SERVER_DEV',
+            label: 'MENU_APP.APP_SUBMENU.APP_SERVER_DEV',
             click: () => {
               this.eventEmitter.emit(EventLists.SERVER_WINDOW_DEV);
             },
diff --git a/apps/server-web/src/renderer/components/LanguageSelector.tsx b/apps/server-web/src/renderer/components/LanguageSelector.tsx
new file mode 100644
index 000000000..0cebc1a71
--- /dev/null
+++ b/apps/server-web/src/renderer/components/LanguageSelector.tsx
@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { SelectComponent } from './Select';
+import { useState } from 'react';
+import { ILanguages } from '../libs/interfaces';
+import { SettingPageTypeMessage } from '../../main/helpers/constant';
+
+export const SUPPORTED_LANGUAGES: ILanguages[] = [
+  { code: 'en', label: 'English' },
+  { code: 'bg', label: 'Bulgarian' },
+];
+
+type LanguageSelector = {
+  lang: string;
+};
+const LanguageSelector = ({ lang }: LanguageSelector) => {
+  const [langs] = useState<ILanguages[]>(SUPPORTED_LANGUAGES);
+  const { t } = useTranslation();
+
+  const changeLanguage = (data: ILanguages) => {
+    try {
+      window.electron.ipcRenderer.sendMessage('setting-page', {
+        type: SettingPageTypeMessage.langChange,
+        data: data.code,
+      });
+      setLng(data.code);
+    } catch (error) {
+      console.error('Failed to change language:', error);
+    }
+  };
+
+  const [lng, setLng] = useState<string>(lang);
+
+  const language = langs.find((lg) => lg.code === lng) || {
+    code: 'en',
+    label: 'English',
+  };
+  return (
+    <SelectComponent
+      items={langs.map((i) => ({
+        value: i.code,
+        label: `LANGUAGES.${i.code}`,
+      }))}
+      title={t('FORM.LABELS.LANGUAGES')}
+      defaultValue={language.code}
+      onValueChange={(val) => {
+        changeLanguage({ code: val });
+      }}
+      disabled={false}
+      value={language.code}
+    />
+  );
+};
+
+export default LanguageSelector;
diff --git a/apps/server-web/src/renderer/components/SideBar.tsx b/apps/server-web/src/renderer/components/SideBar.tsx
index fd4c80ebe..f0b94c3d7 100644
--- a/apps/server-web/src/renderer/components/SideBar.tsx
+++ b/apps/server-web/src/renderer/components/SideBar.tsx
@@ -1,22 +1,16 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ISidebarComponent } from '../libs/interfaces';
-import { SelectComponent } from './Select';
 import { ThemeToggler } from './Toggler';
+import LanguageSelector from './LanguageSelector';
 
 export function SideBar({
   children,
   menus,
   menuChange,
-  langs,
   lang,
-  onLangChange,
 }: ISidebarComponent) {
   const { t } = useTranslation();
-  const language = langs.find((lg) => lg.code === lang) || {
-    code: 'en',
-    label: 'English',
-  };
   return (
     <div className="min-h-screen flex flex-col flex-auto flex-shrink-0 antialiased text-gray-800">
       <div className="fixed flex flex-col top-0 left-0 w-1/4 h-full dark:bg-[#1c1e23] bg-gray-200">
@@ -43,19 +37,7 @@ export function SideBar({
         </div>
         <div className="flex items-center justify-center py-6 px-2">
           <div className="flex flex-col w-6/8 mr-5">
-            <SelectComponent
-              items={langs.map((i) => ({
-                value: i.code,
-                label: `LANGUAGES.${i.code}`,
-              }))}
-              title={t('FORM.LABELS.LANGUAGES')}
-              defaultValue={language.code}
-              onValueChange={(lang) => {
-                onLangChange({ code: lang });
-              }}
-              disabled={false}
-              value={language.code}
-            />
+            <LanguageSelector lang={lang} />
           </div>
 
           <div className="flex flex-col w-2/8">
diff --git a/apps/server-web/src/renderer/components/Updater.tsx b/apps/server-web/src/renderer/components/Updater.tsx
index eb70dd816..5e5d110b4 100644
--- a/apps/server-web/src/renderer/components/Updater.tsx
+++ b/apps/server-web/src/renderer/components/Updater.tsx
@@ -70,11 +70,11 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
   const onSelectPeriode = (value: string) => {
     props.changeAutoUpdate({
       autoUpdate: props.data.autoUpdate,
-      updateCheckPeriode: value,
+      updateCheckPeriod: value,
     });
     props.saveSettingUpdate({
       autoUpdate: props.data.autoUpdate,
-      updateCheckPeriode: value,
+      updateCheckPeriod: value,
     });
   };
 
@@ -123,11 +123,11 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
                     setOpen();
                     props.changeAutoUpdate({
                       autoUpdate: value,
-                      updateCheckPeriode: props.data.updateCheckPeriode,
+                      updateCheckPeriod: props.data.updateCheckPeriod,
                     });
                     props.saveSettingUpdate({
                       autoUpdate: value,
-                      updateCheckPeriode: props.data.updateCheckPeriode,
+                      updateCheckPeriod: props.data.updateCheckPeriod,
                     });
                   }}
                   checked={props.data.autoUpdate}
@@ -149,8 +149,8 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
                     ...i,
                     label: `FORM.LABELS.UPDATE_OPTIONS.${i.label}`,
                   }))}
-                  value={props.data.updateCheckPeriode}
-                  defaultValue={props.data.updateCheckPeriode}
+                  value={props.data.updateCheckPeriod}
+                  defaultValue={props.data.updateCheckPeriod}
                   disabled={!props.data.autoUpdate}
                   onValueChange={onSelectPeriode}
                 />
diff --git a/apps/server-web/src/renderer/libs/interfaces/i-components.ts b/apps/server-web/src/renderer/libs/interfaces/i-components.ts
index 607e7a8dd..fba435bbe 100644
--- a/apps/server-web/src/renderer/libs/interfaces/i-components.ts
+++ b/apps/server-web/src/renderer/libs/interfaces/i-components.ts
@@ -1,4 +1,4 @@
-import { IUpdaterStates, IUpdateSetting, ISideMenu, ISelectItems, IServerSetting, ILanguages } from './i-setting';
+import { IUpdaterStates, IUpdateSetting, ISideMenu, ISelectItems, IServerSetting } from './i-setting';
 
 type IToastComponent = {
   title: string;
@@ -51,8 +51,6 @@ type ISidebarComponent = {
   children: string | JSX.Element | JSX.Element[];
   menus: ISideMenu[];
   menuChange: (key: string) => void;
-  langs: ILanguages[];
-  onLangChange: (lang: any) => void;
   lang: string;
 };
 
diff --git a/apps/server-web/src/renderer/libs/interfaces/i-setting.ts b/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
index f09118e9e..d061ed869 100644
--- a/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
+++ b/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
@@ -40,12 +40,12 @@ interface IPopup {
 
 interface ILanguages {
   code: string;
-  label: string;
+  label?: string;
 }
 
 type IUpdateSetting = {
   autoUpdate: boolean;
-  updateCheckPeriode: string;
+  updateCheckPeriod: string;
 };
 
 type IAbout = {
diff --git a/apps/server-web/src/renderer/pages/Setting.tsx b/apps/server-web/src/renderer/pages/Setting.tsx
index 90b699ac7..c938f2e6d 100644
--- a/apps/server-web/src/renderer/pages/Setting.tsx
+++ b/apps/server-web/src/renderer/pages/Setting.tsx
@@ -6,14 +6,12 @@ import {
   ServerComponent,
   UpdaterComponent,
   AboutComponent,
-  GeneralComponent,
 } from '../components';
 import {
   IUpdaterStates,
   IUpdateSetting,
   IServerSetting,
   IPopup,
-  ILanguages,
   ISideMenu,
 } from '../libs/interfaces';
 import { useTranslation } from 'react-i18next';
@@ -40,20 +38,9 @@ export function Setting() {
 
   const [updateSetting, setUpdateSetting] = useState<IUpdateSetting>({
     autoUpdate: false,
-    updateCheckPeriode: '180',
+    updateCheckPeriod: '180',
   });
 
-  const [langs, setLangs] = useState<ILanguages[]>([
-    {
-      code: 'en',
-      label: 'English',
-    },
-    {
-      code: 'bg',
-      label: 'Bulgarian',
-    },
-  ]);
-
   const [lng, setLng] = useState<string>('en');
 
   const [updateStates, setUpdateState] = useState<IUpdaterStates>({
@@ -91,11 +78,6 @@ export function Setting() {
     setMenu(newMenu);
   };
 
-  const changeLanguage = (lang: ILanguages) => {
-    sendingMessageToMain(lang.code, SettingPageTypeMessage.langChange);
-    setLng(lang.code);
-  };
-
   const saveSettingUpdate = (data: IUpdateSetting) => {
     sendingMessageToMain(data, SettingPageTypeMessage.updateSetting);
   };
@@ -202,12 +184,6 @@ export function Setting() {
       sendingMessageToMain({}, SettingPageTypeMessage.showVersion);
       return <AboutComponent version={version} />;
     }
-
-    if (activeMenu() === 'general') {
-      return (
-        <GeneralComponent langs={langs} onChange={changeLanguage} lang={lng} />
-      );
-    }
     return <AboutComponent version={version} />;
   };
 
@@ -268,7 +244,7 @@ export function Setting() {
           setLng(arg.data.general.lang);
           setUpdateSetting({
             autoUpdate: arg.data.general.autoUpdate,
-            updateCheckPeriode: arg.data.general.updateCheckPeriode,
+            updateCheckPeriod: arg.data.general.updateCheckPeriod,
           });
           break;
         case SettingPageTypeMessage.mainResponse:
@@ -305,13 +281,7 @@ export function Setting() {
   }, []);
 
   return (
-    <SideBar
-      menus={menus}
-      menuChange={menuChange}
-      langs={langs}
-      lang={lng}
-      onLangChange={changeLanguage}
-    >
+    <SideBar menus={menus} menuChange={menuChange} lang={lng}>
       <MenuComponent />
     </SideBar>
   );
diff --git a/apps/server-web/src/renderer/pages/setup/Landing.tsx b/apps/server-web/src/renderer/pages/setup/Landing.tsx
index e683418ae..072b6ee06 100644
--- a/apps/server-web/src/renderer/pages/setup/Landing.tsx
+++ b/apps/server-web/src/renderer/pages/setup/Landing.tsx
@@ -1,18 +1,32 @@
 import { EverTeamsLogo } from '../../components/svgs/index';
 import { config } from '../../../configs/config';
 import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../../components/LanguageSelector';
+import { useEffect, useState } from 'react';
 type props = {
   nextAction: () => void;
 };
 const Landing = (props: props) => {
   const { t } = useTranslation();
+  const [defaultLang, setDefaultLang] = useState<string>('en');
+
+  const getCurrentLanguage = async () => {
+    try {
+      const lang = await window.electron.ipcRenderer.invoke('current-language');
+      setDefaultLang(lang);
+    } catch (error) {
+      console.error('Failed to get current language:', error);
+      setDefaultLang('en'); // Fallback to English
+    }
+  };
+
+  useEffect(() => {
+    getCurrentLanguage();
+  }, []);
   return (
     <div className="w-full">
       <div className="mb-6 ml-10">
-        <select className="dark:bg-gray-800 text-gray-700 dark:text-white py-2 px-4 rounded-lg border-2 dark:border-none">
-          <option>English</option>
-          {/* Add other language options here */}
-        </select>
+        <LanguageSelector lang={defaultLang} />
       </div>
 
       <div className="mb-8 w-full text-center">
diff --git a/apps/web/app/api/desktop-server/route.ts b/apps/web/app/api/desktop-server/route.ts
new file mode 100644
index 000000000..c9405224c
--- /dev/null
+++ b/apps/web/app/api/desktop-server/route.ts
@@ -0,0 +1,6 @@
+import { getDesktopConfig } from '@app/services/server/requests/desktop-source';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+	return NextResponse.json(await getDesktopConfig());
+}
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index b7d0ad636..016df0a8b 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -1,6 +1,6 @@
 import { JitsuOptions } from '@jitsu/jitsu-react/dist/useJitsu';
 import { I_SMTPRequest } from './interfaces/ISmtp';
-import { getNextPublicEnv } from './env';
+import { getNextPublicEnv, getServerRuntimeConfig } from './env';
 import enLanguage from '../locales/en.json';
 import { BG, CN, DE, ES, FR, IS, IT, NL, PL, PT, RU, SA, US } from 'country-flag-icons/react/1x1';
 import { ManualTimeReasons } from './interfaces/timer/IManualTimeReasons';
@@ -30,13 +30,20 @@ export const ACTIVE_TIMEZONE_COOKIE_NAME = 'auth-timezone';
 export const NO_TEAM_POPUP_SHOW_COOKIE_NAME = 'no-team-popup-show';
 export const ACTIVE_PROJECT_COOKIE_NAME = 'auth-active-project';
 
+export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';
+
 // Recaptcha
 export const RECAPTCHA_SITE_KEY = getNextPublicEnv(
 	'NEXT_PUBLIC_CAPTCHA_SITE_KEY',
 	process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY
 );
 export const RECAPTCHA_SECRET_KEY = process.env.CAPTCHA_SECRET_KEY;
-const basePath = process.env.GAUZY_API_SERVER_URL ? process.env.GAUZY_API_SERVER_URL : 'https://api.ever.team';
+let basePath = process.env.GAUZY_API_SERVER_URL ? process.env.GAUZY_API_SERVER_URL : 'https://api.ever.team';
+if (IS_DESKTOP_APP) {
+	const serverRuntimeConfig = getServerRuntimeConfig()
+	basePath = serverRuntimeConfig?.GAUZY_API_SERVER_URL || basePath;
+}
+
 export const GAUZY_API_SERVER_URL = basePath + '/api';
 
 export const GAUZY_API_BASE_SERVER_URL = getNextPublicEnv(
@@ -319,8 +326,6 @@ export const SLACK_CLIENT_SECRET = process.env.SLACK_CLIENT_SECRET;
 export const TWITTER_CLIENT_ID = process.env.TWITTER_CLIENT_ID;
 export const TWITTER_CLIENT_SECRET = process.env.TWITTER_CLIENT_SECRET;
 
-export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';
-
 // Add manual timer reason
 
 export const manualTimeReasons: ManualTimeReasons[] = [
diff --git a/apps/web/app/env.ts b/apps/web/app/env.ts
index 2de6fd64b..983803f66 100644
--- a/apps/web/app/env.ts
+++ b/apps/web/app/env.ts
@@ -1,3 +1,4 @@
+import getConfig from 'next/config';
 const NEXT_PUBLIC_ENVS: { value: Env } = { value: {} };
 
 type Env = Record<string, string | undefined>;
@@ -38,6 +39,17 @@ export function getNextPublicEnv<O extends Options<unknown>>(name: string, optio
 	};
 }
 
+export function getServerRuntimeConfig() {
+  try {
+    const { serverRuntimeConfig } = getConfig();
+    return {
+		GAUZY_API_SERVER_URL: serverRuntimeConfig.GAUZY_API_SERVER_URL,
+    };
+  } catch(e) {
+    console.log('skip get config on call from client');
+  }
+}
+
 export function setNextPublicEnv(envs: Env) {
 	if (envs) {
 		NEXT_PUBLIC_ENVS.value = {
diff --git a/apps/web/app/interfaces/IRuntimeServerConfig.ts b/apps/web/app/interfaces/IRuntimeServerConfig.ts
new file mode 100644
index 000000000..cff07e845
--- /dev/null
+++ b/apps/web/app/interfaces/IRuntimeServerConfig.ts
@@ -0,0 +1,5 @@
+export interface ServerRuntimeConfig {
+    GAUZY_API_SERVER_URL?: string;
+    NEXT_PUBLIC_GAUZY_API_SERVER_URL?: string;
+    [key: string]: any;
+}
diff --git a/apps/web/app/services/client/axios.ts b/apps/web/app/services/client/axios.ts
index eff23ac40..b1d4f20f2 100644
--- a/apps/web/app/services/client/axios.ts
+++ b/apps/web/app/services/client/axios.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { API_BASE_URL, APPLICATION_LANGUAGES_CODE, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL } from '@app/constants';
+import { API_BASE_URL, APPLICATION_LANGUAGES_CODE, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL, IS_DESKTOP_APP } from '@app/constants';
 import {
 	getAccessTokenCookie,
 	getActiveTeamIdCookie,
@@ -87,11 +87,29 @@ apiDirect.interceptors.response.use(
 
 type APIConfig = AxiosRequestConfig<any> & { tenantId?: string; directAPI?: boolean };
 
-function apiConfig(config?: APIConfig) {
+async function desktopServerOverride() {
+	if (typeof window !== 'undefined') {
+	  try {
+			const serverConfig = await api.get('/desktop-server');
+      return serverConfig?.data?.NEXT_PUBLIC_GAUZY_API_SERVER_URL;
+		} catch (error) {
+			return GAUZY_API_BASE_SERVER_URL
+		}
+  }
+  return GAUZY_API_BASE_SERVER_URL;
+}
+
+async function apiConfig(config?: APIConfig) {
 	const tenantId = getTenantIdCookie();
 	const organizationId = getOrganizationIdCookie();
 
 	let baseURL: string | undefined = GAUZY_API_BASE_SERVER_URL.value;
+
+  if (IS_DESKTOP_APP) { // dynamic api host while on desktop mode
+    const runtimeConfig =  await desktopServerOverride();
+    baseURL = runtimeConfig || GAUZY_API_BASE_SERVER_URL.value;
+  }
+
 	baseURL = baseURL ? `${baseURL}/api` : undefined;
 
 	apiDirect.defaults.baseURL = baseURL;
@@ -109,22 +127,22 @@ function apiConfig(config?: APIConfig) {
 	};
 }
 
-function get<T>(endpoint: string, config?: APIConfig) {
-	const { baseURL, headers } = apiConfig(config);
+async function get<T>(endpoint: string, config?: APIConfig) {
+	const { baseURL, headers } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	return baseURL && directAPI ? apiDirect.get<T>(endpoint, { ...config, headers }) : api.get<T>(endpoint);
 }
 
-function deleteApi<T>(endpoint: string, config?: APIConfig) {
-	const { baseURL, headers } = apiConfig(config);
+async function deleteApi<T>(endpoint: string, config?: APIConfig) {
+	const { baseURL, headers } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	return baseURL && directAPI ? apiDirect.delete<T>(endpoint, { ...config, headers }) : api.delete<T>(endpoint);
 }
 
-function post<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
-	const { baseURL, headers, tenantId, organizationId } = apiConfig(config);
+async function post<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
+	const { baseURL, headers, tenantId, organizationId } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	if (baseURL && directAPI && data && !(data instanceof FormData)) {
@@ -139,8 +157,8 @@ function post<T>(url: string, data?: Record<string, any> | FormData, config?: AP
 
 	return baseURL && directAPI ? apiDirect.post<T>(url, data, { ...config, headers }) : api.post<T>(url, data);
 }
-function put<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
-	const { baseURL, headers, tenantId, organizationId } = apiConfig(config);
+async function put<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
+	const { baseURL, headers, tenantId, organizationId } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	if (baseURL && directAPI && data && !(data instanceof FormData)) {
@@ -155,8 +173,8 @@ function put<T>(url: string, data?: Record<string, any> | FormData, config?: API
 
 	return baseURL && directAPI ? apiDirect.put<T>(url, data, { ...config, headers }) : api.put<T>(url, data);
 }
-function patch<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
-	const { baseURL, headers, tenantId, organizationId } = apiConfig(config);
+async function patch<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
+	const { baseURL, headers, tenantId, organizationId } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	if (baseURL && directAPI && data && !(data instanceof FormData)) {
diff --git a/apps/web/app/services/server/requests/desktop-source.ts b/apps/web/app/services/server/requests/desktop-source.ts
new file mode 100644
index 000000000..92d5f2c09
--- /dev/null
+++ b/apps/web/app/services/server/requests/desktop-source.ts
@@ -0,0 +1,16 @@
+import getConfig from 'next/config';
+import { ServerRuntimeConfig } from '@app/interfaces/IRuntimeServerConfig';
+import { GAUZY_API_SERVER_URL, GAUZY_API_BASE_SERVER_URL } from '@app/constants';
+
+export function getDesktopConfig():  Partial<ServerRuntimeConfig> {
+    try {
+        const { serverRuntimeConfig } = getConfig();
+        return serverRuntimeConfig;
+    } catch (error) {
+        console.log('skip get server runtime config');
+        return {
+            GAUZY_API_SERVER_URL,
+            NEXT_PUBLIC_GAUZY_API_SERVER_URL: GAUZY_API_BASE_SERVER_URL.value
+        };
+    }
+}
diff --git a/package.json b/package.json
index 4948aeb7a..3048c8ad2 100644
--- a/package.json
+++ b/package.json
@@ -81,12 +81,13 @@
 		"spell": "cspell . --config .cspell.json",
 		"spellcheck": "cspell .",
 		"config:electron": "yarn ts-node ./.scripts/electron.env.ts",
+		"config:electron:web:build": "yarn ts-node ./.scripts/configure.electron.ts",
 		"pack": "yarn ts-node .scripts/electron-package-utils/package-util.ts",
 		"pack:server-web": "yarn run pack --desktop=server-web",
 		"config:server-web": "yarn run config:electron -- --environment=prod --desktop=server-web",
 		"dev:server-web": "cross-env NODE_ENV=production yarn prepare:config:server-web && yarn build:web:desktop && yarn run prepare:server-web && yarn copy:build:web && yarn run start:server-web",
-		"build:web:desktop": "cross-env NEXT_BUILD_OUTPUT_TYPE=standalone NEXT_SHARP_PATH=/temp/node_modules/sharp yarn build:web",
-		"copy:build:web": "pwd && cp -r  apps/web/.next/standalone apps/server-web/release/app/dist && cp -r apps/web/.next/static apps/server-web/release/app/dist/standalone/apps/web/.next && cp -r apps/web/public apps/server-web/release/app/dist/standalone/apps/web/",
+		"build:web:desktop": "yarn config:electron:web:build -- --type=constant && cross-env NEXT_BUILD_OUTPUT_TYPE=standalone NEXT_SHARP_PATH=/tmp/node_modules/sharp yarn build:web",
+		"copy:build:web": "yarn ts-node .scripts/copy-web-build.ts && yarn config:electron:web:build -- --type=server",
 		"start:server-web": "cd apps/server-web && yarn run start",
 		"prepare:server-web": "cd apps/server-web && yarn run prepare:electron && yarn run build",
 		"pack:server-web:mac": "cd apps/server-web && yarn run pack:mac",

From 02df050cf3b177a6117aef7d3fc7ae95c3a04281 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Thu, 28 Nov 2024 22:16:58 +0200
Subject: [PATCH 11/12] [Feat]: Add Multi-Language Translations For Tasks,
 Shift Timing, and Confirmation Messages   (#3377)

* feat: Add multi-language translations for tasks and confirmation messages

* fix:coderabbitai
---
 .../[memberId]/components/AddTaskModal.tsx    | 36 ++++++++++---------
 .../[memberId]/components/EditTaskModal.tsx   |  4 +--
 .../calendar/table-time-sheet.tsx             |  6 ++--
 apps/web/locales/ar.json                      | 11 ++++++
 apps/web/locales/bg.json                      | 11 ++++++
 apps/web/locales/de.json                      | 11 ++++++
 apps/web/locales/en.json                      | 11 ++++++
 apps/web/locales/es.json                      | 11 ++++++
 apps/web/locales/fr.json                      | 11 ++++++
 apps/web/locales/he.json                      | 11 ++++++
 apps/web/locales/it.json                      | 11 ++++++
 apps/web/locales/nl.json                      | 11 ++++++
 apps/web/locales/pl.json                      | 11 ++++++
 apps/web/locales/pt.json                      | 12 +++++++
 apps/web/locales/ru.json                      | 11 ++++++
 apps/web/locales/zh.json                      | 11 ++++++
 16 files changed, 169 insertions(+), 21 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
index 2df35bfe9..3a13f5688 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -5,7 +5,7 @@ import { clsxm } from '@/app/utils';
 import { Modal } from '@/lib/components'
 import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features';
 import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
-import { useTranslations } from 'next-intl';
+import { TranslationHooks, useTranslations } from 'next-intl';
 import { ToggleButton } from './EditTaskModal';
 import { PlusIcon } from '@radix-ui/react-icons';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
@@ -45,8 +45,8 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
 
     const fields = [
         {
-            label: 'Link to Project',
-            placeholder: 'Select a project',
+            label: t('common.LINK_TO_PROJECT'),
+            placeholder: t('common.SELECT_A_PROJECT'),
             isRequired: true,
             valueKey: 'id',
             displayKey: 'name',
@@ -65,7 +65,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
             <div className="flex flex-col w-full gap-4 justify-start overflow-y-auto">
                 <div className=" w-full mr-[4%]">
                     <label className="block text-[#282048] dark:text-gray-400 font-medium mb-1">
-                        Task
+                        {t('sidebar.TASKS')}
                         <span className="text-[#de5505e1] ml-1">*</span>
                     </label>
                     <input
@@ -81,7 +81,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                 </div>
                 <div className=" w-full mr-[4%] flex items-center">
                     <label className="block text-[#282048] dark:text-gray-400  mb-1 px-2">
-                        Types
+                        {t('common.TYPES')}
                         <span className="text-[#de5505e1] ml-1">*</span>:
                     </label>
                     <CustomSelect
@@ -103,6 +103,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                 </div>
                 <div>
                     <OptimizedAccordion
+                        t={t}
                         dateRange={dateRange}
                         timeOptions={timeOptions}
                         handleFromChange={handleFromChange} />
@@ -139,7 +140,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                 </div>
 
                 <div className="w-full flex flex-col">
-                    <span className="text-[#282048] dark:text-gray-400 font-medium">Notes</span>
+                    <span className="text-[#282048] dark:text-gray-400 font-medium">{t('common.NOTES')}</span>
                     <textarea
                         value={notes}
                         onChange={(e) => setNotes(e.target.value)}
@@ -220,12 +221,13 @@ interface Shift {
     startTime: string;
     endTime: string;
     totalHours: string;
-    dateFrom: Date | string
+    dateFrom: Date | string,
 }
-const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
+const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions, t }: {
     dateRange: { from: Date | null };
     handleFromChange: (date: Date | null) => void;
     timeOptions: string[];
+    t: TranslationHooks
 }) => {
     const [shifts, setShifts] = React.useState<Shift[]>([
         { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },
@@ -294,13 +296,13 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
                         <AccordionTrigger className="flex flex-row-reverse justify-end h-10 p-1 items-center hover:no-underline">
                             <div className="flex items-center justify-between w-full">
                                 <label className="block text-[#282048] dark:text-gray-400 mb-1 px-2">
-                                    Date and Time
+                                    {t('common.DATE_AND_TIME')}
                                     <span className="text-[#de5505e1] ml-1">*</span>:
                                 </label>
                                 <span
                                     onClick={() => handleRemoveShift(index)}
                                     className="hover:underline font-normal text-primary dark:text-primary-light cursor-pointer">
-                                    Remove Period
+                                    {t('common.REMOVE_PERIOD')}
                                 </span>
                             </div>
                         </AccordionTrigger>
@@ -308,6 +310,7 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
                             <div className="flex flex-col gap-2">
 
                                 <ShiftManagement
+                                    t={t}
                                     value={element}
                                     index={index}
                                     onChange={handleShiftChange}
@@ -323,7 +326,7 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
                 <div className='bg-[#3826A6] dark:bg-primary-light p-[0.5] rounded text-white'>
                     <PlusIcon />
                 </div>
-                <span className='text-[#3826A6] dark:text-primary-light hover:underline'>Add Another Period</span>
+                <span className='text-[#3826A6] dark:text-primary-light hover:underline'>{t('common.ADD_ANOTHER_PERIOD')}</span>
             </button>
         </>
 
@@ -331,23 +334,24 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
 };
 
 const ShiftManagement = (
-    { onChange, value, index, timeOptions }: {
+    { onChange, value, index, timeOptions, t }: {
         onChange: (index: number, field: keyof Shift, value: string) => void,
-        value: Shift, index: number, timeOptions: string[]
+        value: Shift, index: number, timeOptions: string[],
+        t: TranslationHooks
     }) => {
     return (
 
         <>
             <div className="w-[212px]">
-                <span>Date</span>
+                <span>{t('manualTime.DATE')}</span>
                 <DatePickerFilter
-                    label={value.dateFrom ? value.dateFrom.toLocaleString() : 'Select Date'}
+                    label={value.dateFrom ? value.dateFrom.toLocaleString() : t('common.SELECT_DATE')}
                     date={value.dateFrom as Date}
                     setDate={(value) => onChange(index, 'dateFrom', value as any)}
                 />
             </div>
             <div className="flex flex-col w-full items-start gap-2">
-                <span className="font-medium">Shift Timing</span>
+                <span className="font-medium">{t('common.SHIFT_TIMING')}</span>
                 <div className="flex items-center w-full justify-between gap-4 mb-4">
                     <ShiftTimingSelect
                         label="Start"
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index 7e5274976..3c19327df 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -95,7 +95,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 				</div>
 				<div className="flex items-start flex-col justify-center gap-4">
 					<div>
-						<span className="text-[#282048] dark:text-gray-500 ">Task Time</span>
+						<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>
@@ -172,7 +172,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						</div>
 					</div>
 					<div className="w-full flex flex-col">
-						<span className="text-[#282048] dark:text-gray-400  ">Notes</span>
+						<span className="text-[#282048] dark:text-gray-400">{t('common.NOTES')}</span>
 						<textarea
 							value={notes}
 							onChange={(e) => setNotes(e.target.value)}
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index fb844453c..746940e0f 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -227,8 +227,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	return (
 		<div className="w-full dark:bg-dark--theme">
 			<AlertDialogConfirmation
-				title="Are you sure you want to delete this?"
-				description={`This action is irreversible. All related data will be lost.`}
+				title={t('common.DELETE_CONFIRMATION')}
+				description={t('common.IRREVERSIBLE_ACTION_WARNING')}
 				confirmText={t('common.DELETE')}
 				cancelText={t('common.CANCEL')}
 				isOpen={isDialogOpen}
@@ -533,7 +533,7 @@ export const StatusTask = ({ timesheet }: { timesheet: TimesheetLog }) => {
 		<>
 			<DropdownMenuSub>
 				<DropdownMenuSubTrigger>
-					<span>Change status</span>
+					<span>{t('common.CHANGE_STATUS')}</span>
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index b46388feb..166dfd0c0 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -1,6 +1,17 @@
 {
 	"TITLE": "إيفر تيمز",
 	"common": {
+		"DELETE_CONFIRMATION": "هل أنت متأكد أنك تريد الحذف؟",
+		"IRREVERSIBLE_ACTION_WARNING": "هذا الإجراء لا رجعة فيه. ستفقد جميع البيانات ذات الصلة.",
+		"SHIFT_TIMING": "توقيت العمل",
+		"ADD_ANOTHER_PERIOD": "إضافة فترة أخرى",
+		"REMOVE_PERIOD": "إزالة الفترة",
+		"DATE_AND_TIME": "التاريخ والوقت",
+		"NOTES": "ملاحظات",
+		"CHANGE_STATUS": "تغيير الحالة",
+		"TYPES": "أنواع",
+		"LINK_TO_PROJECT": "رابط إلى المشروع",
+		"SELECT_A_PROJECT": "اختر مشروعًا",
 		"ACCEPT": "قبول",
 		"ACCEPTED": "مقبول",
 		"REJECT": "رفض",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index f67870cdc..8ed9cd5d7 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Бюджет на проекта"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Сигурни ли сте, че искате да изтриете това?",
+		"IRREVERSIBLE_ACTION_WARNING": "Това действие е необратимо. Всички свързани данни ще бъдат изгубени.",
+		"SHIFT_TIMING": "Смяна на времето",
+		"ADD_ANOTHER_PERIOD": "Добави друг период",
+		"REMOVE_PERIOD": "Премахване на периода",
+		"DATE_AND_TIME": "Дата и час",
+		"NOTES": "Бележки",
+		"CHANGE_STATUS": "Промяна на състоянието",
+		"TYPES": "Типове",
+		"LINK_TO_PROJECT": "Връзка към проект",
+		"SELECT_A_PROJECT": "Изберете проект",
 		"ACCEPT": "Приемам",
 		"ACCEPTED": "Приет",
 		"REJECT": "Отхвърлям",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index 4eb10c048..1fb17dfb1 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Projektbudget"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Sind Sie sicher, dass Sie dies löschen möchten?",
+		"IRREVERSIBLE_ACTION_WARNING": "Diese Aktion ist irreversibel. Alle zugehörigen Daten gehen verloren.",
+		"SHIFT_TIMING": "Schichtzeiten",
+		"ADD_ANOTHER_PERIOD": "Weitere Periode hinzufügen",
+		"REMOVE_PERIOD": "Periode entfernen",
+		"DATE_AND_TIME": "Datum und Uhrzeit",
+		"NOTES": "Notizen",
+		"CHANGE_STATUS": "Status ändern",
+		"TYPES": "Typen",
+		"LINK_TO_PROJECT": "Projekt verlinken",
+		"SELECT_A_PROJECT": "Projekt auswählen",
 		"ACCEPT": "Akzeptieren",
 		"ACCEPTED": "Akzeptiert",
 		"REJECT": "Ablehnen",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index f9b336cb5..a8b7419c8 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Project Budget"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Are you sure you want to delete this?",
+		"IRREVERSIBLE_ACTION_WARNING": "This action is irreversible. All related data will be lost.",
+		"SHIFT_TIMING": "Shift Timing",
+		"ADD_ANOTHER_PERIOD": "Add Another Period",
+		"REMOVE_PERIOD": "Remove Period",
+		"DATE_AND_TIME": "Date and Time",
+		"NOTES": "Notes",
+		"CHANGE_STATUS": "Change Status",
+		"TYPES": "Types",
+		"LINK_TO_PROJECT": "Link to Project",
+		"SELECT_A_PROJECT": "Select a Project",
 		"ACCEPT": "Accept",
 		"ACCEPTED": "Accepted",
 		"REJECT": "Reject",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 48a1fb500..c5908f186 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Presupuesto del Proyecto"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "¿Estás seguro de que deseas eliminar esto?",
+		"IRREVERSIBLE_ACTION_WARNING": "Esta acción es irreversible. Todos los datos relacionados se perderán.",
+		"SHIFT_TIMING": "Horario de turno",
+		"ADD_ANOTHER_PERIOD": "Agregar otro período",
+		"REMOVE_PERIOD": "Eliminar período",
+		"DATE_AND_TIME": "Fecha y hora",
+		"NOTES": "Notas",
+		"CHANGE_STATUS": "Cambiar estado",
+		"TYPES": "Tipos",
+		"LINK_TO_PROJECT": "Vincular al proyecto",
+		"SELECT_A_PROJECT": "Seleccionar un proyecto",
 		"ACCEPT": "Aceptar",
 		"ACCEPTED": "Aceptado",
 		"REJECT": "Rechazar",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index df60e6395..47c2ca5b8 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Budget du projet"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Êtes-vous sûr de vouloir supprimer cela ?",
+		"IRREVERSIBLE_ACTION_WARNING": "Cette action est irréversible. Toutes les données associées seront perdues.",
+		"SHIFT_TIMING": "Temps de poste",
+		"ADD_ANOTHER_PERIOD": "Ajouter une autre période",
+		"REMOVE_PERIOD": "Supprimer la période",
+		"DATE_AND_TIME": "Date et heure",
+		"NOTES": "Notes",
+		"CHANGE_STATUS": "Changer le statut",
+		"TYPES": "Types",
+		"LINK_TO_PROJECT": "Lien vers le projet",
+		"SELECT_A_PROJECT": "Sélectionner un projet",
 		"ACCEPT": "Accepter",
 		"ACCEPTED": "Accepté",
 		"REJECT": "Rejeter",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 4eb9b0848..55664ac50 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "תקציב פרויקט"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "האם אתה בטוח שברצונך למחוק?",
+		"IRREVERSIBLE_ACTION_WARNING": "פעולה זו בלתי הפיכה. כל הנתונים הקשורים יימחקו.",
+		"SHIFT_TIMING": "זמן משמרת",
+		"ADD_ANOTHER_PERIOD": "הוסף תקופה נוספת",
+		"REMOVE_PERIOD": "הסר תקופה",
+		"DATE_AND_TIME": "תאריך ושעה",
+		"NOTES": "הערות",
+		"CHANGE_STATUS": "שנה מצב",
+		"TYPES": "סוגים",
+		"LINK_TO_PROJECT": "קישור לפרויקט",
+		"SELECT_A_PROJECT": "בחר פרויקט",
 		"ACCEPT": "קבל",
 		"ACCEPTED": "התקבל",
 		"REJECT": "דחה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 5413c4aa9..ac7482ff5 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Budget di progetto"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Sei sicuro di voler eliminare questo elemento?",
+		"IRREVERSIBLE_ACTION_WARNING": "Questa azione è irreversibile. Tutti i dati correlati andranno persi.",
+		"SHIFT_TIMING": "Orario di turno",
+		"ADD_ANOTHER_PERIOD": "Aggiungi un altro periodo",
+		"REMOVE_PERIOD": "Rimuovi periodo",
+		"DATE_AND_TIME": "Data e ora",
+		"NOTES": "Note",
+		"CHANGE_STATUS": "Cambia stato",
+		"TYPES": "Tipi",
+		"LINK_TO_PROJECT": "Collega al progetto",
+		"SELECT_A_PROJECT": "Seleziona un progetto",
 		"ACCEPT": "Accept",
 		"ACCEPTED": "Accepted",
 		"REJECT": "Reject",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 566273f74..72f376d36 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Projectbudget"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Weet u zeker dat u dit wilt verwijderen?",
+		"IRREVERSIBLE_ACTION_WARNING": "Deze actie is onomkeerbaar. Alle gerelateerde gegevens gaan verloren.",
+		"SHIFT_TIMING": "Werkrooster",
+		"ADD_ANOTHER_PERIOD": "Voeg een andere periode toe",
+		"REMOVE_PERIOD": "Verwijder periode",
+		"DATE_AND_TIME": "Datum en tijd",
+		"NOTES": "Notities",
+		"CHANGE_STATUS": "Wijzig status",
+		"TYPES": "Typen",
+		"LINK_TO_PROJECT": "Koppelen aan project",
+		"SELECT_A_PROJECT": "Selecteer een project",
 		"ACCEPT": "Accepteren",
 		"ACCEPTED": "Geaccepteerd",
 		"REJECT": "Afwijzen",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index d694fcdc5..709a8ab61 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Budżet projektu"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Czy na pewno chcesz to usunąć?",
+		"IRREVERSIBLE_ACTION_WARNING": "Ta akcja jest nieodwracalna. Wszystkie powiązane dane zostaną utracone.",
+		"SHIFT_TIMING": "Czas zmiany",
+		"ADD_ANOTHER_PERIOD": "Dodaj kolejny okres",
+		"REMOVE_PERIOD": "Usuń okres",
+		"DATE_AND_TIME": "Data i godzina",
+		"NOTES": "Notatki",
+		"CHANGE_STATUS": "Zmień status",
+		"TYPES": "Typy",
+		"LINK_TO_PROJECT": "Połącz z projektem",
+		"SELECT_A_PROJECT": "Wybierz projekt",
 		"ACCEPT": "Akceptuj",
 		"ACCEPTED": "Zaakceptowane",
 		"REJECT": "Odrzuć",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index a34170a2d..702a1254d 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -19,6 +19,18 @@
 		"PROJECT_BUDGET": "Orçamento do Projeto"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Tem certeza de que deseja excluir isso?",
+		"IRREVERSIBLE_ACTION_WARNING": "Esta ação é irreversível. Todos os dados relacionados serão perdidos.",
+		"SHIFT_TIMING": "Horário de turno",
+		"ADD_ANOTHER_PERIOD": "Adicionar outro período",
+		"REMOVE_PERIOD": "Remover período",
+		"DATE_AND_TIME": "Data e hora",
+		"NOTES": "Notas",
+		"CHANGE_STATUS": "Alterar status",
+		"TYPES": "Tipos",
+		"LINK_TO_PROJECT": "Vincular ao projeto",
+		"SELECT_A_PROJECT": "Selecione um projeto",
+		"TASK_TIME": "Tempo da tarefa",
 		"ACCEPT": "Aceitar",
 		"ACCEPTED": "Aceito",
 		"REJECT": "Rejeitar",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index fbb5d83c4..92dae73ff 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Бюджет проекта"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Вы уверены, что хотите удалить это?",
+		"IRREVERSIBLE_ACTION_WARNING": "Это действие необратимо. Все связанные данные будут потеряны.",
+		"SHIFT_TIMING": "График смен",
+		"ADD_ANOTHER_PERIOD": "Добавить еще один период",
+		"REMOVE_PERIOD": "Удалить период",
+		"DATE_AND_TIME": "Дата и время",
+		"NOTES": "Заметки",
+		"CHANGE_STATUS": "Изменить статус",
+		"TYPES": "Типы",
+		"LINK_TO_PROJECT": "Ссылка на проект",
+		"SELECT_A_PROJECT": "Выберите проект",
 		"ACCEPT": "Принять",
 		"ACCEPTED": "Принято",
 		"REJECT": "Отклонить",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 4445a5557..67a2e23c2 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "项目预算"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "您确定要删除此项吗？",
+		"IRREVERSIBLE_ACTION_WARNING": "此操作不可逆。所有相关数据将丢失。",
+		"SHIFT_TIMING": "班次时间",
+		"ADD_ANOTHER_PERIOD": "添加另一段时间",
+		"REMOVE_PERIOD": "移除时间段",
+		"DATE_AND_TIME": "日期和时间",
+		"NOTES": "备注",
+		"CHANGE_STATUS": "更改状态",
+		"TYPES": "类型",
+		"LINK_TO_PROJECT": "链接到项目",
+		"SELECT_A_PROJECT": "选择一个项目",
 		"ACCEPT": "接受",
 		"ACCEPTED": "已接受",
 		"REJECT": "拒绝",

From 0ae8dcb6d8379b47df252b8bae382895e6e7b8c9 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Thu, 28 Nov 2024 22:17:19 +0200
Subject: [PATCH 12/12] remove the dailyPlanHour popup from the soft flow
 (#3197)

---
 .../features/useStartStopTimerHandler.ts      | 41 +------------------
 .../components/shared/timer/timer-card.tsx    | 15 +------
 apps/web/lib/features/task/task-card.tsx      | 15 +------
 apps/web/lib/features/timer/timer.tsx         | 23 +----------
 4 files changed, 4 insertions(+), 90 deletions(-)

diff --git a/apps/web/app/hooks/features/useStartStopTimerHandler.ts b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
index 0968ea4b6..585ee4462 100644
--- a/apps/web/app/hooks/features/useStartStopTimerHandler.ts
+++ b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
@@ -22,12 +22,6 @@ export function useStartStopTimerHandler() {
 		openModal: openEnforcePlannedTaskSoftModal
 	} = useModal();
 
-	const {
-		isOpen: isDailyPlanWorkHoursModalOpen,
-		closeModal: dailyPlanWorkHoursCloseModal,
-		openModal: openAddDailyPlanWorkHoursModal
-	} = useModal();
-
 	const {
 		isOpen: isTasksEstimationHoursModalOpen,
 		closeModal: tasksEstimationHoursCloseModal,
@@ -98,21 +92,6 @@ export function useStartStopTimerHandler() {
 			}
 		};
 
-		/**
-		 * Handle missing working hour for a daily plan
-		 */
-		const handleMissingDailyPlanWorkHour = () => {
-			if (hasPlan) {
-				if (!hasWorkedHours) {
-					openAddDailyPlanWorkHoursModal();
-				} else {
-					startTimerOrAskEstimate();
-				}
-			} else {
-				startTimerOrAskEstimate();
-			}
-		};
-
 		/**
 		 * Handle missing estimation hours for tasks
 		 */
@@ -121,11 +100,7 @@ export function useStartStopTimerHandler() {
 				if (tasksEstimateHoursModalDate != currentDate) {
 					handleCheckSelectedTaskOnTodayPlan();
 				} else if (areAllTasksEstimated) {
-					if (dailyPlanEstimateHoursModalDate != currentDate) {
-						handleMissingDailyPlanWorkHour();
-					} else {
-						startTimerOrAskEstimate();
-					}
+					startTimerOrAskEstimate();
 				} else {
 					if (tasksEstimateHoursModalDate != currentDate) {
 						openAddTasksEstimationHoursModal();
@@ -180,16 +155,6 @@ export function useStartStopTimerHandler() {
 					}
 				} else if (tasksEstimateHoursModalDate != currentDate) {
 					handleMissingTasksEstimationHours();
-				} else if (dailyPlanEstimateHoursModalDate != currentDate) {
-					if (hasPlan) {
-						if (areAllTasksEstimated) {
-							handleMissingDailyPlanWorkHour();
-						} else {
-							startTimerOrAskEstimate();
-						}
-					} else {
-						startTimerOrAskEstimate();
-					}
 				} else {
 					startTimerOrAskEstimate();
 				}
@@ -201,7 +166,6 @@ export function useStartStopTimerHandler() {
 		hasPlan,
 		hasWorkedHours,
 		isActiveTaskPlaned,
-		openAddDailyPlanWorkHoursModal,
 		openAddTasksEstimationHoursModal,
 		openEnforcePlannedTaskModal,
 		openEnforcePlannedTaskSoftModal,
@@ -219,9 +183,6 @@ export function useStartStopTimerHandler() {
 			isEnforceTaskModalOpen,
 			enforceTaskCloseModal,
 			openEnforcePlannedTaskModal,
-			isDailyPlanWorkHoursModalOpen,
-			dailyPlanWorkHoursCloseModal,
-			openAddDailyPlanWorkHoursModal,
 			isTasksEstimationHoursModalOpen,
 			tasksEstimationHoursCloseModal,
 			openAddTasksEstimationHoursModal,
diff --git a/apps/web/components/shared/timer/timer-card.tsx b/apps/web/components/shared/timer/timer-card.tsx
index b2c3a840a..a2e77d2fd 100644
--- a/apps/web/components/shared/timer/timer-card.tsx
+++ b/apps/web/components/shared/timer/timer-card.tsx
@@ -6,12 +6,7 @@ import { useTimer } from '@app/hooks/features/useTimer';
 import { ProgressBar } from '@components/ui/progress-bar';
 import { PauseIcon } from '@components/ui/svgs/pause-icon';
 import { PlayIcon } from '@components/ui/svgs/play-icon';
-import {
-	AddTasksEstimationHoursModal,
-	AddDailyPlanWorkHourModal,
-	EnforcePlanedTaskModal,
-	SuggestDailyPlanModal
-} from 'lib/features/daily-plan';
+import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from 'lib/features/daily-plan';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 
@@ -79,14 +74,6 @@ const Timer = () => {
 				/>
 			)}
 
-			{hasPlan && (
-				<AddDailyPlanWorkHourModal
-					isOpen={modals.isDailyPlanWorkHoursModalOpen}
-					closeModal={modals.dailyPlanWorkHoursCloseModal}
-					plan={hasPlan}
-				/>
-			)}
-
 			{/**
 			 * Track time on planned task (REQUIRE PLAN)
 			 */}
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 35cf918e2..f23ee5a95 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -58,12 +58,7 @@ import { AddTaskToPlan } from '../daily-plan/add-task-to-plan';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import moment from 'moment';
 import { useStartStopTimerHandler } from '@app/hooks/features/useStartStopTimerHandler';
-import {
-	AddDailyPlanWorkHourModal,
-	AddTasksEstimationHoursModal,
-	EnforcePlanedTaskModal,
-	SuggestDailyPlanModal
-} from '../daily-plan';
+import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from '../daily-plan';
 import { SetAtom } from 'types';
 import { useFavoritesTask } from '@/app/hooks/features/useFavoritesTask';
 
@@ -451,14 +446,6 @@ function TimerButtonCall({
 				/>
 			)}
 
-			{hasPlan && (
-				<AddDailyPlanWorkHourModal
-					isOpen={modals.isDailyPlanWorkHoursModalOpen}
-					closeModal={modals.dailyPlanWorkHoursCloseModal}
-					plan={hasPlan}
-				/>
-			)}
-
 			{/**
 			 * Track time on planned task (REQUIRE PLAN)
 			 */}
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
index e4aced347..3ce63957c 100644
--- a/apps/web/lib/features/timer/timer.tsx
+++ b/apps/web/lib/features/timer/timer.tsx
@@ -15,12 +15,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { HotkeysEvent } from 'hotkeys-js';
 import { useCallback, useMemo } from 'react';
-import {
-	AddDailyPlanWorkHourModal,
-	AddTasksEstimationHoursModal,
-	EnforcePlanedTaskModal,
-	SuggestDailyPlanModal
-} from '../daily-plan';
+import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from '../daily-plan';
 import { useStartStopTimerHandler } from '@app/hooks/features/useStartStopTimerHandler';
 
 export function Timer({ className }: IClassName) {
@@ -168,14 +163,6 @@ export function Timer({ className }: IClassName) {
 					/>
 				)}
 
-				{hasPlan && (
-					<AddDailyPlanWorkHourModal
-						isOpen={modals.isDailyPlanWorkHoursModalOpen}
-						closeModal={modals.dailyPlanWorkHoursCloseModal}
-						plan={hasPlan}
-					/>
-				)}
-
 				{/**
 				 * Track time on planned task (REQUIRE PLAN)
 				 */}
@@ -268,14 +255,6 @@ export function MinTimerFrame({ className }: IClassName) {
 				/>
 			)}
 
-			{hasPlan && (
-				<AddDailyPlanWorkHourModal
-					isOpen={modals.isDailyPlanWorkHoursModalOpen}
-					closeModal={modals.dailyPlanWorkHoursCloseModal}
-					plan={hasPlan}
-				/>
-			)}
-
 			{/**
 			 * Track time on planned task (REQUIRE PLAN)
 			 */}