From 8c5f359748600a3b5d5acb6dea68d1ce3bfdd0b9 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Fri, 19 Jul 2024 10:12:08 +0200
Subject: [PATCH 1/3] [Feat] Display all data if no range date (#2763)

* feat: display all data if no range date

* fix: Select Date Range close By Itself on select one date

* fix:DeepScan errors

* feat: fix: display data by date range

* fix: display data by date range

---------

Co-authored-by: Cedric Karungu <ckarungu921@gmail.com>
---
 apps/web/app/hooks/features/useDailyPlan.ts   |  5 +-
 apps/web/app/hooks/useDateRange.ts            | 11 +++--
 apps/web/app/hooks/useFilterDateRange.ts      | 18 ++++++-
 apps/web/app/interfaces/IDailyPlan.ts         |  4 +-
 apps/web/app/stores/daily-plan.ts             | 48 ++++++++++++++----
 .../features/task/daily-plan/future-tasks.tsx | 14 ++++--
 .../features/task/daily-plan/past-tasks.tsx   | 12 +++--
 .../web/lib/features/task/task-date-range.tsx | 26 +++++++---
 apps/web/lib/features/task/task-filters.tsx   | 18 +++----
 apps/web/lib/features/task/task-status.tsx    | 30 ++++++------
 apps/web/lib/features/user-profile-plans.tsx  | 49 +++++++++++++++----
 11 files changed, 165 insertions(+), 70 deletions(-)

diff --git a/apps/web/app/hooks/features/useDailyPlan.ts b/apps/web/app/hooks/features/useDailyPlan.ts
index f0bf1de9d..434da0f59 100644
--- a/apps/web/app/hooks/features/useDailyPlan.ts
+++ b/apps/web/app/hooks/features/useDailyPlan.ts
@@ -33,6 +33,7 @@ type TodayPlanNotificationParams = {
 	canBeSeen: boolean;
 	alreadySeen: boolean;
 };
+export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 
 export function useDailyPlan() {
 	const [addTodayPlanTrigger, setAddTodayPlanTrigger] = useState<TodayPlanNotificationParams>({
@@ -65,6 +66,7 @@ export function useDailyPlan() {
 	const [dailyPlanFetching, setDailyPlanFetching] = useRecoilState(dailyPlanFetchingState);
 	const { firstLoadData: firstLoadDailyPlanData, firstLoad } = useFirstLoad();
 
+
 	useEffect(() => {
 		if (firstLoad) {
 			setDailyPlanFetching(loading);
@@ -76,8 +78,10 @@ export function useDailyPlan() {
 			if (response.data.items.length) {
 				const { items, total } = response.data;
 				setDailyPlan({ items, total });
+
 			}
 		});
+
 	}, [getAllQueryCall, setDailyPlan]);
 
 	const getMyDailyPlans = useCallback(() => {
@@ -294,7 +298,6 @@ export function useDailyPlan() {
 		[...profileDailyPlans.items].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
 	const currentUser = activeTeam?.members?.find((member) => member.employee.userId === user?.id);
-
 	useEffect(() => {
 		getMyDailyPlans();
 	}, [getMyDailyPlans]);
diff --git a/apps/web/app/hooks/useDateRange.ts b/apps/web/app/hooks/useDateRange.ts
index 38e3cec61..4c8cfd08e 100644
--- a/apps/web/app/hooks/useDateRange.ts
+++ b/apps/web/app/hooks/useDateRange.ts
@@ -1,17 +1,18 @@
-import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState } from "@app/stores";
-import { useRecoilState } from "recoil";
+import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState, getFirstAndLastDateState } from "@app/stores";
+import { useRecoilState, useRecoilValue } from "recoil";
 
 export const useDateRange = (tab: string | any) => {
+    const itemsDate = useRecoilValue(getFirstAndLastDateState);
     const [dateFuture, setDateFuture] = useRecoilState(dateRangeFuturePlanState);
     const [dateAllPlan, setDateAllPlan] = useRecoilState(dateRangeAllPlanState);
     const [datePastPlan, setDatePastPlan] = useRecoilState(dateRangePastPlanState);
     switch (tab) {
         case 'Future Tasks':
-            return { date: dateFuture, setDate: setDateFuture };
+            return { date: dateFuture, setDate: setDateFuture, data: itemsDate };
         case 'Past Tasks':
-            return { date: datePastPlan, setDate: setDatePastPlan };
+            return { date: datePastPlan, setDate: setDatePastPlan, data: itemsDate };
         case 'All Tasks':
         default:
-            return { date: dateAllPlan, setDate: setDateAllPlan };
+            return { date: dateAllPlan, setDate: setDateAllPlan, data: itemsDate };
     }
 }
diff --git a/apps/web/app/hooks/useFilterDateRange.ts b/apps/web/app/hooks/useFilterDateRange.ts
index 869d201bf..53828b897 100644
--- a/apps/web/app/hooks/useFilterDateRange.ts
+++ b/apps/web/app/hooks/useFilterDateRange.ts
@@ -1,8 +1,10 @@
 'use client';
 
+import { isTestDateRange } from '@app/helpers';
 import { IDailyPlan } from '@app/interfaces'
 import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState, filteredAllPlanDataState, filteredFuturePlanDataState, filteredPastPlanDataState, originalAllPlanState, originalFuturePlanState, originalPastPlanDataState } from '@app/stores';
 import { useEffect, useMemo } from 'react';
+import { DateRange } from 'react-day-picker';
 import { useRecoilState, useRecoilValue } from 'recoil';
 /**
  *custom filter the data with date range
@@ -37,7 +39,6 @@ export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'fu
     //         setOriginalAllPlanState(itemsDailyPlan);
     //     }
     // }, [itemsDailyPlan, dateFuture, datePastPlan, dateAllPlan, typeItems, setOriginalAllPlanState, setOriginalFuturePlanData, setOriginalAllPlanState]);
-
     const updateOriginalPlanData = useMemo(() => (data: IDailyPlan[]) => {
         switch (typeItems) {
             case 'future':
@@ -58,7 +59,7 @@ export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'fu
         if (!itemsDailyPlan) return;
         updateOriginalPlanData(itemsDailyPlan);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [updateOriginalPlanData, dateAllPlan, datePastPlan, dateFuture]);
+    }, [updateOriginalPlanData, dateAllPlan, datePastPlan, dateFuture, setDateAllPlan, setDatePastPlan, setDateFuture]);
 
     return {
         filteredAllPlanData,
@@ -72,3 +73,16 @@ export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'fu
         setDatePastPlan,
     }
 }
+
+
+export const filterDailyPlan = (date: DateRange, data: IDailyPlan[]) => {
+    if (!date || !data.length) return data;
+    const { from, to } = date;
+    if (!from && !to) {
+        return data
+    }
+    return data.filter((plan) => {
+        const itemDate = new Date(plan.date);
+        return isTestDateRange(itemDate, from, to);
+    });
+}
diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts
index 5d91cd89a..2af0ea650 100644
--- a/apps/web/app/interfaces/IDailyPlan.ts
+++ b/apps/web/app/interfaces/IDailyPlan.ts
@@ -23,11 +23,11 @@ export interface ICreateDailyPlan extends IDailyPlanBase, IRelationnalEmployee {
 	taskId?: ITeamTask['id'];
 }
 
-export interface IUpdateDailyPlan extends Partial<IDailyPlanBase>, Pick<ICreateDailyPlan, 'employeeId'> {}
+export interface IUpdateDailyPlan extends Partial<IDailyPlanBase>, Pick<ICreateDailyPlan, 'employeeId'> { }
 
 export interface IDailyPlanTasksUpdate
 	extends Pick<ICreateDailyPlan, 'taskId' | 'employeeId'>,
-		IBasePerTenantAndOrganizationEntity {}
+	IBasePerTenantAndOrganizationEntity { }
 
 export enum DailyPlanStatusEnum {
 	OPEN = 'open',
diff --git a/apps/web/app/stores/daily-plan.ts b/apps/web/app/stores/daily-plan.ts
index e28f6e1df..af57cd9da 100644
--- a/apps/web/app/stores/daily-plan.ts
+++ b/apps/web/app/stores/daily-plan.ts
@@ -1,12 +1,8 @@
 import { atom, RecoilState, selector } from 'recoil';
 import { IDailyPlan, PaginationResponse } from '@app/interfaces';
-import { addDays } from 'date-fns';
 import { DateRange } from 'react-day-picker';
 import { isTestDateRange } from '@app/helpers';
 
-const today = new Date();
-const oneWeekAgo = new Date();
-oneWeekAgo.setDate(today.getDate() - 7);
 
 export const dailyPlanListState = atom<PaginationResponse<IDailyPlan>>({
 	key: 'dailyPlanListState',
@@ -65,11 +61,20 @@ const createDailyPlanAtom = (key: string | any) => atom<IDailyPlan[]>({
 
 const createDateRangeAtom = (key: string | any) => atom<DateRange | undefined>({
 	key,
-	default: {
-		from: oneWeekAgo,
-		to: addDays(today, 3),
-	},
+	default: { from: undefined, to: undefined }
+});
+
+export const dataDailyPlanState = createDailyPlanAtom('originalPlanState');
+const getFirstAndLastDateSelector = (key: string | any) => selector({
+	key,
+	get: ({ get }) => {
+		const itemsData = get(dataDailyPlanState);
+		if (!itemsData?.length) return { from: null, to: null };
+		const sortedData = itemsData?.slice().sort((a, b) => new Date(a.date)?.getTime() - new Date(b?.date).getTime());
+		return { from: new Date(sortedData[0]?.date), to: new Date(sortedData[sortedData.length - 1]?.date) };
+	}
 });
+export const dateRangeDailyPlanState = createDateRangeAtom('dateRangeDailyPlanState')
 
 const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState: RecoilState<DateRange | undefined>, originalDataState: RecoilState<IDailyPlan[]>) => selector({
 	key,
@@ -78,6 +83,28 @@ const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState:
 		const data = get(originalDataState);
 		if (!dateRange || !data.length) return data;
 		const { from, to } = dateRange;
+		if (!from && !to) {
+			return data
+		}
+		return data.filter((plan) => {
+			const itemDate = new Date(plan.date);
+			return isTestDateRange(itemDate, from, to);
+		});
+	},
+});
+export const dataDailyPlanAllFilterState = createDailyPlanAtom('dataDailyPlanAllFilterState');
+export const dateRangeAllPlanState = createDateRangeAtom('dateRangeAllPlanState');
+
+export const setCreateFilteredDailyPlanDataSelector = () => selector({
+	key: 'dataDailyPlanAllFilter',
+	get: ({ get }) => {
+		const dateRange = get(dateRangeAllPlanState);
+		const data = get(dataDailyPlanAllFilterState);
+		if (!dateRange || !data.length) return data;
+		const { from, to } = dateRange;
+		if (!from && !to) {
+			return data
+		}
 		return data.filter((plan) => {
 			const itemDate = new Date(plan.date);
 			return isTestDateRange(itemDate, from, to);
@@ -87,8 +114,9 @@ const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState:
 
 export const dataDailyPlanCountFilterState = createDailyPlanCountFilterAtom('dataDailyPlanCountFilterState');
 export const dateRangePastPlanState = createDateRangeAtom('dateRangePastPlanState');
+
 export const dateRangeFuturePlanState = createDateRangeAtom('dateRangeFuturePlanState');
-export const dateRangeAllPlanState = createDateRangeAtom('dateRangeAllPlanState');
+export const dateRangeLimitState = createDateRangeAtom('startAndEndDateRange');
 
 export const originalFuturePlanState = createDailyPlanAtom('originalFuturePlanState');
 export const originalAllPlanState = createDailyPlanAtom('originalAllPlanState');
@@ -111,3 +139,5 @@ export const filteredAllPlanDataState = createFilteredDailyPlanDataSelector(
 	dateRangeAllPlanState,
 	originalAllPlanState
 );
+
+export const getFirstAndLastDateState = getFirstAndLastDateSelector('getFirstAndLastDateState');
diff --git a/apps/web/lib/features/task/daily-plan/future-tasks.tsx b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
index d235ca163..ec453f87f 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
@@ -10,20 +10,24 @@ import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import TaskBlockCard from '../task-block-card';
 import { clsxm } from '@app/utils';
 import { HorizontalSeparator } from 'lib/components';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { AlertPopup } from 'lib/components';
-import { useFilterDateRange } from '@app/hooks/useFilterDateRange';
+import { filterDailyPlan } from '@app/hooks/useFilterDateRange';
 import { IDailyPlan } from '@app/interfaces';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { useDateRange } from '@app/hooks/useDateRange';
 
 export function FutureTasks({ profile }: { profile: any }) {
 	const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan();
 	const canSeeActivity = useCanSeeActivityScreen();
 	const [popupOpen, setPopupOpen] = useState(false);
-	const { filteredFuturePlanData: filteredFuturePlanData } = useFilterDateRange(futurePlans, 'future');
-	const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0);
-	const [futureDailyPlanTasks, setFutureDailyPlanTasks] = useState<IDailyPlan[]>(filteredFuturePlanData);
 
+	const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0);
+	const { setDate, date } = useDateRange(window.localStorage.getItem('daily-plan-tab'));
+	const [futureDailyPlanTasks, setFutureDailyPlanTasks] = useState<IDailyPlan[]>(futurePlans);
+	useEffect(() => {
+		setFutureDailyPlanTasks(filterDailyPlan(date as any, futurePlans))
+	}, [date, setDate])
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
 
 	return (
diff --git a/apps/web/lib/features/task/daily-plan/past-tasks.tsx b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
index 412ef7d05..6fc9a3983 100644
--- a/apps/web/lib/features/task/daily-plan/past-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
@@ -8,18 +8,22 @@ import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import { HorizontalSeparator } from 'lib/components';
 import { clsxm } from '@app/utils';
 import TaskBlockCard from '../task-block-card';
-import { useFilterDateRange } from '@app/hooks/useFilterDateRange';
-import { useState } from 'react';
+import { filterDailyPlan } from '@app/hooks/useFilterDateRange';
+import { useEffect, useState } from 'react';
 import { IDailyPlan } from '@app/interfaces';
 import { DragDropContext, Draggable, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
+import { useDateRange } from '@app/hooks/useDateRange';
 
 export function PastTasks({ profile, currentTab = 'Past Tasks' }: { profile: any; currentTab?: FilterTabs }) {
 	const { pastPlans } = useDailyPlan();
 
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
-	const { filteredPastPlanData: filteredPastPlanData } = useFilterDateRange(pastPlans, 'past');
-	const [pastTasks, setPastTasks] = useState<IDailyPlan[]>(filteredPastPlanData);
+	const [pastTasks, setPastTasks] = useState<IDailyPlan[]>(pastPlans);
+	const { setDate, date } = useDateRange(window.localStorage.getItem('daily-plan-tab'));
 
+	useEffect(() => {
+		setPastTasks(filterDailyPlan(date as any, pastPlans))
+	}, [date, setDate])
 	return (
 		<div className="flex flex-col gap-6">
 			{pastTasks?.length > 0 ? (
diff --git a/apps/web/lib/features/task/task-date-range.tsx b/apps/web/lib/features/task/task-date-range.tsx
index 1f5c5d243..336816e29 100644
--- a/apps/web/lib/features/task/task-date-range.tsx
+++ b/apps/web/lib/features/task/task-date-range.tsx
@@ -2,7 +2,7 @@
 
 import React from "react"
 import { format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
+import { CalendarDays } from "lucide-react"
 import { cn } from "lib/utils"
 import { Button } from "@components/ui/button"
 import { Calendar } from "@components/ui/calendar"
@@ -13,34 +13,42 @@ import {
 } from "@components/ui/popover"
 import { DateRange } from "react-day-picker"
 import { SetterOrUpdater } from "recoil"
+import moment from "moment"
 
 interface ITaskDatePickerWithRange {
     className?: React.HTMLAttributes<HTMLDivElement>,
     date?: DateRange;
     onSelect?: SetterOrUpdater<DateRange | undefined>;
-    label?: string
+    label?: string,
+    data?: any,
 }
-
 export function TaskDatePickerWithRange({
     className,
     date,
     onSelect,
-    label
-
+    label,
+    data,
 }: ITaskDatePickerWithRange) {
+    const isDateDisabled = (dateToCheck: any) => {
+        const { from, to }: any = data;
+        const fromDate = new Date(moment(from)?.format('YYYY-MM-DD'));
+        const toDate = new Date(moment(to)?.format('YYYY-MM-DD'));
+        return dateToCheck < fromDate || dateToCheck > toDate;
+    };
+
     return (
         <div className={cn("grid gap-2", className)}>
             <Popover>
-                <PopoverTrigger asChild>
+                <PopoverTrigger asChild >
                     <Button
                         id="date"
                         variant={"outline"}
                         className={cn(
-                            "w-[250px] justify-start text-left font-normal",
+                            "w-[230px] justify-start text-left font-normal dark:bg-dark--theme-light rounded-xl  mt-4 mb-2 lg:mt-0 h-9",
                             !date && "text-muted-foreground"
                         )}
                     >
-                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        <CalendarDays className="mr-2 h-4 w-4" />
                         {date?.from ? (
                             date.to ? (
                                 <>
@@ -57,12 +65,14 @@ export function TaskDatePickerWithRange({
                 </PopoverTrigger>
                 <PopoverContent className="w-auto p-0" align="center">
                     <Calendar
+                        className="dark:bg-dark--theme"
                         initialFocus
                         mode={'range'}
                         defaultMonth={date?.from}
                         selected={date}
                         onSelect={onSelect}
                         numberOfMonths={2}
+                        disabled={isDateDisabled}
                     />
                 </PopoverContent>
             </Popover>
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index f098f23fc..5027dd22c 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -187,9 +187,9 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 					.every((k) => {
 						return k === 'label'
 							? intersection(
-									statusFilters[k],
-									task['tags'].map((item) => item.name)
-								).length === statusFilters[k].length
+								statusFilters[k],
+								task['tags'].map((item) => item.name)
+							).length === statusFilters[k].length
 							: statusFilters[k].includes(task[k]);
 					});
 			});
@@ -247,9 +247,9 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 				leaveFrom="transform scale-100 opacity-100"
 				leaveTo="transform scale-95 opacity-0 ease-out"
 				className="w-full"
-				ref={hook.outclickFilterCard.targetEl}
+				ref={hook.tab !== 'dailyplan' ? hook.outclickFilterCard.targetEl : null}
 			>
-				{/* {hook.filterType !== undefined && <Divider className="mt-4" />} */}
+				{hook.filterType !== undefined && <Divider className="mt-4" />}
 				{hook.filterType === 'status' && (
 					<TaskStatusFilter hook={hook} employeeId={profile.member?.employeeId || ''} />
 				)}
@@ -372,7 +372,7 @@ function InputFilters({ hook, profile }: Props) {
 		}
 
 	}, [tasks, members]);
- 
+
 	const osSpecificAssignTaskTooltipLabel = 'A';
 
 	return (
@@ -634,11 +634,11 @@ export function TaskStatusFilter({ hook, employeeId }: { hook: I_TaskFilter; emp
 	const [key, setKey] = useState(0);
 	const t = useTranslations();
 	const [dailyPlanTab, setDailyPlanTab] = useState(window.localStorage.getItem('daily-plan-tab') || 'Future Tasks');
-	const { date, setDate } = useDateRange(dailyPlanTab);
+	const { date, setDate, data } = useDateRange(dailyPlanTab);
 
 	useEffect(() => {
 		setDailyPlanTab(window.localStorage.getItem('daily-plan-tab') || 'Future Tasks');
-	}, [dailyPlanTab]);
+	}, [dailyPlanTab, date]);
 	return (
 		<div className="flex flex-col items-center mt-4 space-x-2 md:justify-between md:flex-row pt-2">
 			<div className="flex flex-wrap justify-center flex-1 space-x-3 md:justify-start">
@@ -672,7 +672,7 @@ export function TaskStatusFilter({ hook, employeeId }: { hook: I_TaskFilter; emp
 
 				{hook.tab === 'dailyplan' && <DailyPlanFilter employeeId={employeeId} />}
 				{['Future Tasks', 'Past Tasks', 'All Tasks'].includes(dailyPlanTab) && (
-					<TaskDatePickerWithRange date={date} onSelect={(range) => setDate(range)} label="Planned date" />
+					<TaskDatePickerWithRange data={data} date={date} onSelect={(range) => setDate(range)} label="Planned date" />
 				)}
 				<VerticalSeparator />
 
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index df23da5ab..72d78f1f1 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -775,18 +775,18 @@ export function TaskStatus({
 	isEpic
 }: PropsWithChildren<
 	TStatusItem &
-		IClassName & {
-			active?: boolean;
-			issueType?: 'status' | 'issue';
-			showIssueLabels?: boolean;
-			forDetails?: boolean;
-			titleClassName?: string;
-			cheched?: boolean;
-			sidebarUI?: boolean;
-			value?: string;
-			isVersion?: boolean;
-			isEpic?: boolean;
-		}
+	IClassName & {
+		active?: boolean;
+		issueType?: 'status' | 'issue';
+		showIssueLabels?: boolean;
+		forDetails?: boolean;
+		titleClassName?: string;
+		cheched?: boolean;
+		sidebarUI?: boolean;
+		value?: string;
+		isVersion?: boolean;
+		isEpic?: boolean;
+	}
 >) {
 	const { theme } = useTheme();
 	const readableColorHex = readableColor(backgroundColor || (theme === 'light' ? '#FFF' : '#000'));
@@ -839,8 +839,8 @@ export function TaskStatus({
 						style={
 							isVersion || isEpic
 								? {
-										color: theme === 'light' ? '#000' : '#FFF'
-									}
+									color: theme === 'light' ? '#000' : '#FFF'
+								}
 								: {}
 						}
 					>
@@ -996,7 +996,7 @@ export function StatusDropdown<T extends TStatusItem>({
 												sidebarUI && ['text-xs'],
 												'text-dark dark:text-white bg-[#F2F2F2] dark:bg-dark--theme-light',
 												forDetails &&
-													'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
+												'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
 												taskStatusClassName
 											)}
 											name={
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index 6f1c70bf2..0e6faa0f6 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -1,11 +1,12 @@
 'use client';
 import { useEffect, useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { useCanSeeActivityScreen, useDailyPlan, useUserProfilePage } from '@app/hooks';
 import { TaskCard } from './task/task-card';
 import { IDailyPlan } from '@app/interfaces';
 import { AlertPopup, Container, HorizontalSeparator, NoData, ProgressBar, VerticalSeparator } from 'lib/components';
 import { clsxm } from '@app/utils';
+import { dataDailyPlanState } from '@app/stores';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select';
@@ -19,9 +20,10 @@ import { IoCalendarOutline } from 'react-icons/io5';
 import ViewsHeaderTabs from './task/daily-plan/views-header-tabs';
 import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import TaskBlockCard from './task/task-block-card';
-import { useFilterDateRange } from '@app/hooks/useFilterDateRange';
+import { filterDailyPlan } from '@app/hooks/useFilterDateRange';
 import { handleDragAndDrop } from '@app/helpers/drag-and-drop';
 import { DragDropContext, Droppable, Draggable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
+import { useDateRange } from '@app/hooks/useDateRange';
 
 export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 type FilterOutstanding = 'ALL' | 'DATE';
@@ -43,9 +45,11 @@ export function UserProfilePlans() {
 	const [currentTab, setCurrentTab] = useState<FilterTabs>(defaultTab || 'Today Tasks');
 	const [currentOutstanding, setCurrentOutstanding] = useState<FilterOutstanding>(defaultOutstanding || 'ALL');
 
-	const { filteredFuturePlanData: filterFuturePlanData } = useFilterDateRange(futurePlans, 'future');
-	const { filteredPastPlanData: filterPastPlanData } = useFilterDateRange(pastPlans, 'past');
-	const { filteredAllPlanData: filterAllPlanData } = useFilterDateRange(sortedPlans, 'all');
+
+	const [currentDataDailyPlan, setCurrentDataDailyPlan] = useRecoilState(dataDailyPlanState)
+	const { setDate, date } = useDateRange(currentTab);
+
+
 
 	const screenOutstanding = {
 		ALL: <OutstandingAll profile={profile} />,
@@ -58,10 +62,27 @@ export function UserProfilePlans() {
 		'All Tasks': <AllPlans profile={profile} />,
 		Outstanding: <Outstanding filter={screenOutstanding[currentOutstanding]} />
 	};
+	const [filterFuturePlanData, setFilterFuturePlanData] = useState<IDailyPlan[]>(futurePlans);
+	const [filterPastPlanData, setFilteredPastPlanData] = useState<IDailyPlan[]>(pastPlans);
+	const [filterAllPlanData, setFilterAllPlanData] = useState<IDailyPlan[]>(sortedPlans);
+
 
 	useEffect(() => {
 		window.localStorage.setItem('daily-plan-tab', currentTab);
-	}, [currentTab]);
+		if (!currentDataDailyPlan) return;
+		if (currentTab === 'All Tasks') {
+			setCurrentDataDailyPlan(sortedPlans)
+			setFilterAllPlanData(filterDailyPlan(date as any, sortedPlans))
+		} else if (currentTab === 'Past Tasks') {
+			setCurrentDataDailyPlan(pastPlans)
+			setFilteredPastPlanData(filterDailyPlan(date as any, pastPlans))
+		} else if (currentTab === 'Future Tasks') {
+			setCurrentDataDailyPlan(futurePlans)
+			setFilterFuturePlanData(filterDailyPlan(date as any, futurePlans))
+		}
+
+	}, [currentTab, setCurrentDataDailyPlan, setDate, date]);
+
 
 	useEffect(() => {
 		window.localStorage.setItem('outstanding', currentOutstanding);
@@ -83,7 +104,10 @@ export function UserProfilePlans() {
 													'text-gray-500 flex gap-2 items-center',
 													currentTab == filter && 'text-blue-600 dark:text-white font-medium'
 												)}
-												onClick={() => setCurrentTab(filter as FilterTabs)}
+												onClick={() => {
+													setDate(undefined)
+													setCurrentTab(filter as FilterTabs)
+												}}
 											>
 												{filter}
 												<span
@@ -97,6 +121,7 @@ export function UserProfilePlans() {
 													{filter === 'Past Tasks' && filterPastPlanData?.length}
 													{filter === 'All Tasks' && filterAllPlanData?.length}
 													{filter === 'Outstanding' && outstandingPlans.length}
+
 												</span>
 											</div>
 										</div>
@@ -149,16 +174,20 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 	const { deleteDailyPlan, deleteDailyPlanLoading, sortedPlans, todayPlan } = useDailyPlan();
 	const [popupOpen, setPopupOpen] = useState(false);
 	const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0);
+	const { setDate, date } = useDateRange(currentTab);
 
 	filteredPlans = sortedPlans;
 	if (currentTab === 'Today Tasks') filteredPlans = todayPlan;
 
 	const canSeeActivity = useCanSeeActivityScreen();
-	const { filteredAllPlanData: filterAllPlanData } = useFilterDateRange(filteredPlans, 'all');
-	const filterPlans: IDailyPlan[] = currentTab === 'All Tasks' ? filterAllPlanData : filteredPlans;
+	// const { filteredAllPlanData: filterAllPlanData } = useFilterDateRange(filteredPlans, 'all');
+	// const filterPlans: IDailyPlan[] = currentTab === 'All Tasks' ?  : filteredPlans;
 	const view = useRecoilValue(dailyPlanViewHeaderTabs);
-	const [plans, setPlans] = useState<IDailyPlan[]>(filterPlans);
 
+	const [plans, setPlans] = useState<IDailyPlan[]>(filteredPlans);
+	useEffect(() => {
+		setPlans(filterDailyPlan(date as any, filteredPlans))
+	}, [date, setDate])
 	return (
 		<div className="flex flex-col gap-6">
 			{Array.isArray(plans) && plans?.length > 0 ? (

From dd315b3fa87a6290a1a707aa73032f2177621de8 Mon Sep 17 00:00:00 2001
From: Ruslan Konviser <evereq@gmail.com>
Date: Fri, 19 Jul 2024 10:13:54 +0200
Subject: [PATCH 2/3] [Feature] #2373 Task status order kanban settings (#2651)

* Mod1

feat: kanban board sort

* feat: feature settings sort

* feat: taskstatus drag

---------

Co-authored-by: Anishali2 <ansihali1221@gmail.com>
---
 apps/web/app/hooks/features/useTaskStatus.ts  |  6 +-
 .../app/services/client/api/task-status.ts    | 14 ++-
 apps/web/app/services/client/axios.ts         | 30 ++++--
 .../kanban/sort-tasks-status-settings.tsx     | 97 +++++++++++++++++++
 apps/web/lib/components/modal.tsx             |  9 +-
 apps/web/lib/settings/task-statuses-form.tsx  | 52 ++++++----
 apps/web/locales/ar.json                      |  1 +
 apps/web/locales/bg.json                      |  1 +
 apps/web/locales/de.json                      |  1 +
 apps/web/locales/en.json                      |  1 +
 apps/web/locales/es.json                      |  1 +
 apps/web/locales/fr.json                      |  1 +
 apps/web/locales/he.json                      |  1 +
 apps/web/locales/it.json                      |  1 +
 apps/web/locales/nl.json                      |  1 +
 apps/web/locales/pl.json                      |  1 +
 apps/web/locales/pt.json                      |  1 +
 apps/web/locales/ru.json                      |  1 +
 apps/web/locales/zh.json                      |  1 +
 19 files changed, 190 insertions(+), 31 deletions(-)
 create mode 100644 apps/web/components/pages/kanban/sort-tasks-status-settings.tsx

diff --git a/apps/web/app/hooks/features/useTaskStatus.ts b/apps/web/app/hooks/features/useTaskStatus.ts
index 185407407..596b9c9ce 100644
--- a/apps/web/app/hooks/features/useTaskStatus.ts
+++ b/apps/web/app/hooks/features/useTaskStatus.ts
@@ -5,7 +5,8 @@ import {
 	createTaskStatusAPI,
 	getTaskStatusList,
 	deleteTaskStatusAPI,
-	editTaskStatusAPI
+	editTaskStatusAPI,
+	editTaskStatusOrderAPI
 } from '@app/services/client/api';
 import { userState, taskStatusFetchingState, taskStatusListState, activeTeamIdState } from '@app/stores';
 import { useCallback, useEffect } from 'react';
@@ -23,6 +24,7 @@ export function useTaskStatus() {
 	const { loading: createTaskStatusLoading, queryCall: createQueryCall } = useQuery(createTaskStatusAPI);
 	const { loading: deleteTaskStatusLoading, queryCall: deleteQueryCall } = useQuery(deleteTaskStatusAPI);
 	const { loading: editTaskStatusLoading, queryCall: editQueryCall } = useQuery(editTaskStatusAPI);
+	const { loading: reOrderTaskStatusLoading, queryCall: reOrderQueryCall } = useQuery(editTaskStatusOrderAPI);
 
 	const [taskStatus, setTaskStatus] = useRecoilState(taskStatusListState);
 	const [taskStatusFetching, setTaskStatusFetching] = useRecoilState(taskStatusFetchingState);
@@ -114,6 +116,8 @@ export function useTaskStatus() {
 		taskStatusFetching,
 		firstLoadTaskStatusData,
 		createTaskStatus,
+		reOrderQueryCall,
+		reOrderTaskStatusLoading,
 		createTaskStatusLoading,
 		deleteTaskStatusLoading,
 		deleteTaskStatus,
diff --git a/apps/web/app/services/client/api/task-status.ts b/apps/web/app/services/client/api/task-status.ts
index cf4343e5e..692754bc2 100644
--- a/apps/web/app/services/client/api/task-status.ts
+++ b/apps/web/app/services/client/api/task-status.ts
@@ -1,7 +1,9 @@
 import { DeleteResponse, ITaskStatusCreate, ITaskStatusItemList, PaginationResponse } from '@app/interfaces';
-import { deleteApi, get, post, put } from '../axios';
+import { deleteApi, get, post, put, patch } from '../axios';
 import qs from 'qs';
 
+import { UUID } from 'crypto';
+
 export function createTaskStatusAPI(data: ITaskStatusCreate, tenantId?: string) {
 	return post<ITaskStatusCreate>('/task-statuses', data, {
 		tenantId
@@ -14,6 +16,16 @@ export function editTaskStatusAPI(id: string, data: ITaskStatusCreate, tenantId?
 	});
 }
 
+type ITaskStatusOrder = {
+	organizationId: UUID;
+	reorder: { id: string; order: number }[];
+};
+export function editTaskStatusOrderAPI(data: ITaskStatusOrder, tenantId?: string) {
+	return patch<ITaskStatusCreate>(`/task-statuses/reorder`, data, {
+		tenantId,
+		method: 'PATCH'
+	});
+}
 export function deleteTaskStatusAPI(id: string) {
 	return deleteApi<DeleteResponse>(`/task-statuses/${id}`);
 }
diff --git a/apps/web/app/services/client/axios.ts b/apps/web/app/services/client/axios.ts
index 5b4af5a0e..38be5aa32 100644
--- a/apps/web/app/services/client/axios.ts
+++ b/apps/web/app/services/client/axios.ts
@@ -1,6 +1,11 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { API_BASE_URL, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL } from '@app/constants';
-import { getAccessTokenCookie, getOrganizationIdCookie, getTenantIdCookie } from '@app/helpers/cookies';
+import {
+	getAccessTokenCookie,
+	getActiveTeamIdCookie,
+	getOrganizationIdCookie,
+	getTenantIdCookie
+} from '@app/helpers/cookies';
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
 const api = axios.create({
@@ -8,10 +13,9 @@ const api = axios.create({
 	withCredentials: true,
 	timeout: 60 * 1000
 });
-
 api.interceptors.request.use(
 	async (config: any) => {
-		const cookie = getAccessTokenCookie();
+		const cookie = getActiveTeamIdCookie();
 
 		if (cookie) {
 			config.headers['Authorization'] = `Bearer ${cookie}`;
@@ -23,7 +27,6 @@ api.interceptors.request.use(
 		Promise.reject(error);
 	}
 );
-
 api.interceptors.response.use(
 	(response: AxiosResponse) => response,
 	async (error: { response: AxiosResponse }) => {
@@ -128,7 +131,6 @@ 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);
 	const { directAPI = true } = config || {};
@@ -145,7 +147,23 @@ 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);
+	const { directAPI = true } = config || {};
+
+	if (baseURL && directAPI && data && !(data instanceof FormData)) {
+		if (!data.tenantId) {
+			data.tenantId = tenantId;
+		}
+
+		if (!data.organizationId) {
+			data.organizationId = organizationId;
+		}
+	}
+
+	return baseURL && directAPI ? apiDirect.patch<T>(url, data, { ...config, headers }) : api.patch<T>(url, data);
+}
 
-export { get, post, deleteApi, put };
+export { get, post, deleteApi, put, patch };
 
 export default api;
diff --git a/apps/web/components/pages/kanban/sort-tasks-status-settings.tsx b/apps/web/components/pages/kanban/sort-tasks-status-settings.tsx
new file mode 100644
index 000000000..d6410efe6
--- /dev/null
+++ b/apps/web/components/pages/kanban/sort-tasks-status-settings.tsx
@@ -0,0 +1,97 @@
+import { getOrganizationIdCookie } from '@app/helpers';
+import { useTaskStatus } from '@app/hooks';
+import { ITaskStatusItemList } from '@app/interfaces';
+import { taskStatusListState } from '@app/stores';
+import { Button } from '@components/ui/button';
+import { Spinner } from '@components/ui/loaders/spinner';
+import { ScrollArea } from '@components/ui/scroll-bar';
+import { SixSquareGridIcon } from 'assets/svg';
+import { useTranslations } from 'next-intl';
+import React, { useState } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import { useRecoilState } from 'recoil';
+
+const SortTasksStatusSettings = ({ arr, onClose }: { arr: ITaskStatusItemList[]; onClose: () => void }) => {
+	const [items, setItems] = useState(arr);
+	const [saveLoader, setSaveLoader] = useState(false);
+	const [saveCheck, setSaveCheck] = useState(false);
+	const organizationId = getOrganizationIdCookie();
+	const [_, setState] = useRecoilState(taskStatusListState);
+	const t = useTranslations();
+	const { reOrderQueryCall } = useTaskStatus();
+	const onDragEnd = (result: DropResult) => {
+		if (!result.destination) return; // dropped outside the list
+		const newItems = Array.from(items);
+		const [reorderedItem] = newItems.splice(result.source.index, 1);
+		newItems.splice(result.destination.index, 0, reorderedItem);
+		setItems(newItems);
+		setSaveCheck(true);
+	};
+	const saveOrder = async () => {
+		if (saveCheck) {
+			const data: any = {
+				organizationId,
+				reorder: items.map((item, index) => {
+					return {
+						id: item.id,
+						order: index
+					};
+				})
+			};
+			setSaveLoader(true);
+			await reOrderQueryCall(data);
+			setSaveLoader(false);
+			setState(data.reorder);
+			onClose();
+			setSaveCheck(false);
+		} else {
+			onClose();
+		}
+	};
+	return (
+		<div className="w-[600px] h-[700px] py-12 pr-2  bg-[#f2f2f2] dark:bg-[#191a20] rounded-lg flex flex-col justify-center items-center">
+			<h2 className="text-2xl font-bold text-center mb-4">{t('pages.settingsTeam.SORT_TASK_STATUSES')}</h2>
+			<ScrollArea className="h-[450px] pr-3">
+				<DragDropContext onDragEnd={onDragEnd}>
+					<Droppable droppableId="droppable">
+						{(provided) => (
+							<div {...provided.droppableProps} ref={provided.innerRef}>
+								<>
+									{items.map((item, index) => (
+										<Draggable key={item.id} draggableId={item.id} index={index}>
+											{(provided) => (
+												<div
+													className="py-2 text-base rounded-md w-80"
+													{...provided.draggableProps}
+													ref={provided.innerRef}
+												>
+													<div className="border flex justify-start items-center p-4 text-base rounded-md w-80">
+														<div {...provided.dragHandleProps}>
+															<SixSquareGridIcon className="w-6 h-6" />
+														</div>
+														<p className='capitalize'>{item.name?.split('-').join(' ')}</p>
+													</div>
+												</div>
+											)}
+										</Draggable>
+									))}
+									{provided.placeholder}
+								</>
+							</div>
+						)}
+					</Droppable>
+				</DragDropContext>
+			</ScrollArea>
+			<div className="absolute bottom-4 -right-20 flex w-80 space-x-2 mt-2">
+				<Button onClick={onClose} variant={'outline'} className="p-4 w-28 !h-14 border-none ">
+					{t('common.CANCEL')}
+				</Button>
+				<Button onClick={saveOrder} className="dark:text-white !h-14 space-x-2">
+					{t('common.SAVE')} {saveLoader && <Spinner dark={false} />}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default SortTasksStatusSettings;
diff --git a/apps/web/lib/components/modal.tsx b/apps/web/lib/components/modal.tsx
index 592e7bed1..c1af3fc71 100644
--- a/apps/web/lib/components/modal.tsx
+++ b/apps/web/lib/components/modal.tsx
@@ -45,15 +45,16 @@ export function Modal({
 				className="fixed inset-0 backdrop-brightness-90 backdrop-blur-sm z-[9999] w-full h-full"
 			>
 				<div ref={refDiv} className="absolute inset-0 flex items-center justify-center p-4 w-full">
-					<Dialog.Panel
+					<Dialog.Overlay
 						className={clsxm('flex justify-center items-center flex-col space-y-1 relative', className)}
 					>
 						{title && <Dialog.Title className={clsxm(titleClass)}>{title}</Dialog.Title>}
 						{description && <Dialog.Description>{description}</Dialog.Description>}
 						<div
 							onClick={closeModal}
-							className={`absolute ${alignCloseIcon ? 'right-2 top-3' : 'right-3 top-3'
-								}  md:right-2 md:top-3 cursor-pointer z-50`}
+							className={`absolute ${
+								alignCloseIcon ? 'right-2 top-3' : 'right-3 top-3'
+							}  md:right-2 md:top-3 cursor-pointer z-50`}
 						>
 							<Image
 								src={'/assets/svg/close.svg'}
@@ -64,7 +65,7 @@ export function Modal({
 							/>
 						</div>
 						{children}
-					</Dialog.Panel>
+					</Dialog.Overlay>
 				</div>
 			</Dialog>
 		</Transition>
diff --git a/apps/web/lib/settings/task-statuses-form.tsx b/apps/web/lib/settings/task-statuses-form.tsx
index d94dfabcc..415fceee0 100644
--- a/apps/web/lib/settings/task-statuses-form.tsx
+++ b/apps/web/lib/settings/task-statuses-form.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { useRefetchData, useTaskStatus } from '@app/hooks';
+import { useModal, useRefetchData, useTaskStatus } from '@app/hooks';
 import { IIcon, ITaskStatusItemList } from '@app/interfaces';
 import { userState } from '@app/stores';
 import { clsxm } from '@app/utils';
 import { Spinner } from '@components/ui/loaders/spinner';
 import { PlusIcon } from '@heroicons/react/20/solid';
-import { Button, ColorPicker, InputField, Text } from 'lib/components';
+import { Button, ColorPicker, InputField, Modal, Text } from 'lib/components';
 import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslations } from 'next-intl';
@@ -13,6 +13,7 @@ import { useRecoilState } from 'recoil';
 import { generateIconList } from './icon-items';
 import IconPopover from './icon-popover';
 import { StatusesListCard } from './list-card';
+import SortTasksStatusSettings from '@components/pages/kanban/sort-tasks-status-settings';
 
 type StatusForm = {
 	formOnly?: boolean;
@@ -114,9 +115,18 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 		},
 		[edit, createNew, formOnly, editTaskStatus, onCreated, user, reset, createTaskStatus, refetch]
 	);
+	const updateArray = taskStatus.slice();
+	const sortedArray =
+		Array.isArray(updateArray) && updateArray.length > 0
+			? updateArray.sort((a: any, b: any) => a.order - b.order)
+			: [];
+	const { isOpen, closeModal, openModal } = useModal();
 
 	return (
 		<>
+			<Modal isOpen={isOpen} closeModal={closeModal}>
+				<SortTasksStatusSettings onClose={closeModal} arr={sortedArray} />
+			</Modal>
 			<form className="w-full" onSubmit={handleSubmit(onSubmit)} autoComplete="off">
 				<div className="flex">
 					<div className="rounded-md m-h-64 p-[32px] pl-0 pr-0 flex gap-x-[2rem] flex-col sm:flex-row items-center sm:items-start">
@@ -127,20 +137,24 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 						)}
 
 						<div className="flex flex-col items-center sm:items-start">
-							{!createNew && !edit && (
-								<Button
-									variant="outline"
-									className="font-normal justify-center border-2 rounded-[10px] text-md w-[230px] gap-2 h-[46px]"
-									onClick={() => {
-										setEdit(null);
-										setCreateNew(true);
-									}}
-								>
-									<PlusIcon className=" font-normal w-[16px] h-[16px]" />
-									{t('pages.settingsTeam.CREATE_NEW_STATUS')}
+							<div className="flex">
+								{!createNew && !edit && (
+									<Button
+										variant="outline"
+										className="font-normal justify-center border-2 rounded-[10px] text-md w-[230px] gap-2 h-[46px]"
+										onClick={() => {
+											setEdit(null);
+											setCreateNew(true);
+										}}
+									>
+										<PlusIcon className=" font-normal w-[16px] h-[16px]" />
+										{t('pages.settingsTeam.CREATE_NEW_STATUS')}
+									</Button>
+								)}
+								<Button onClick={openModal} variant="outline" className="mx-2 rounded-[10px]">
+									Sort
 								</Button>
-							)}
-
+							</div>
 							{(createNew || edit) && (
 								<>
 									<Text className="flex-none flex-grow-0 mb-2 text-lg font-normal text-gray-400">
@@ -202,15 +216,15 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 								</>
 							)}
 
-							{!formOnly && taskStatus?.length > 0 && (
+							{!formOnly && taskStatus.length > 0 && (
 								<>
 									<Text className="flex-none flex-grow-0 text-gray-400 text-lg font-normal mb-[1rem] w-full mt-[2.4rem] text-center sm:text-left">
 										{t('pages.settingsTeam.LIST_OF_STATUSES')}
 									</Text>
 									<div className="flex flex-wrap justify-center w-full gap-3 sm:justify-start">
-										{loading && !taskStatus?.length && <Spinner dark={false} />}
-										{taskStatus && taskStatus?.length ? (
-											taskStatus.map((status) => (
+										{loading && <Spinner dark={false} />}
+										{!loading && sortedArray.length ? (
+											sortedArray.map((status) => (
 												<StatusesListCard
 													key={status.id}
 													statusTitle={status.name ? status.name?.split('-').join(' ') : ''}
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 2b7ff1272..f240c8951 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "إدارة المعينين",
 			"SEARCH_MEMBER": "البحث عن عضو",
 			"TASK_STATUSES": "حالات المهام",
+			"SORT_TASK_STATUSES": "فرز حالات المهام",
 			"TASK_PRIORITIES": "أولويات المهام",
 			"TASK_SIZES": "أحجام المهام",
 			"TASK_LABELS": "تصنيفات المهام",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 2186a167a..98ee52b97 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Управление на отговорници",
 			"SEARCH_MEMBER": "Търсене на член",
 			"TASK_STATUSES": "Статуси на задачи",
+			"SORT_TASK_STATUSES": "Сортиране на статуси на задачи",
 			"TASK_PRIORITIES": "Приоритети на задачи",
 			"TASK_SIZES": "Размери на задачи",
 			"TASK_LABELS": "Етикети на задачи",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index ca856b96d..fbf4b6bfa 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Zugewiesene verwalten",
 			"SEARCH_MEMBER": "Mitglied suchen",
 			"TASK_STATUSES": "Aufgabenstatus",
+			"SORT_TASK_STATUSES": "Aufgabenstatus sortieren",
 			"TASK_PRIORITIES": "Aufgabenprioritäten",
 			"TASK_SIZES": "Aufgabengrößen",
 			"TASK_LABELS": "Aufgabenlabels",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 07d45d2fb..81f888ea4 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Manage Assignees",
 			"SEARCH_MEMBER": "Search Member",
 			"TASK_STATUSES": "Task Statuses",
+			"SORT_TASK_STATUSES": "Sort Task Statuses",
 			"TASK_PRIORITIES": "Task Priorities",
 			"TASK_SIZES": "Task Sizes",
 			"TASK_LABELS": "Task Labels",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 818ac74d5..bcdfab492 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Administrar asignados",
 			"SEARCH_MEMBER": "Buscar miembro",
 			"TASK_STATUSES": "Estados de las tareas",
+			"SORT_TASK_STATUSES": "Ordenar estados de las tareas",
 			"TASK_PRIORITIES": "Prioridades de las tareas",
 			"TASK_SIZES": "Tamaños de las tareas",
 			"TASK_LABELS": "Etiquetas de las tareas",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 6cd5044e2..04222d68b 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Gérer les personnes assignées",
 			"SEARCH_MEMBER": "Rechercher un membre",
 			"TASK_STATUSES": "Statuts des tâches",
+			"SORT_TASK_STATUSES": "Trier les statuts des tâches",
 			"TASK_PRIORITIES": "Priorités des tâches",
 			"TASK_SIZES": "Tailles des tâches",
 			"TASK_LABELS": "Étiquettes des tâches",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index d89cfbb2d..1f75be567 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "נהל מוקצים",
 			"SEARCH_MEMBER": "חפש חבר",
 			"TASK_STATUSES": "סטטוסי משימה",
+			"SORT_TASK_STATUSES": "מיין סטטוסי משימה",
 			"TASK_PRIORITIES": "עדיפויות משימה",
 			"TASK_SIZES": "גדלי משימה",
 			"TASK_LABELS": "תוויות משימה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 3c7ff1fc9..8a332efec 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Gestisci Assegnatari",
 			"SEARCH_MEMBER": "Cerca Membro",
 			"TASK_STATUSES": "Stati del Compito",
+			"SORT_TASK_STATUSES": "Ordina gli Stati del Compito",
 			"TASK_PRIORITIES": "Priorità del Compito",
 			"TASK_SIZES": "Dimensioni del Compito",
 			"TASK_LABELS": "Etichette del Compito",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index f6b88f6da..557c8e470 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Toegewezenen beheren",
 			"SEARCH_MEMBER": "Lid zoeken",
 			"TASK_STATUSES": "Taakstatussen",
+			"SORT_TASK_STATUSES": "Sorteer taakstatussen",
 			"TASK_PRIORITIES": "Taakprioriteiten",
 			"TASK_SIZES": "Taakformaten",
 			"TASK_LABELS": "Taaklabels",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 21ec208c2..72797e308 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Zarządzaj Przydzielonymi",
 			"SEARCH_MEMBER": "Szukaj Członka",
 			"TASK_STATUSES": "Statusy Zadania",
+			"SORT_TASK_STATUSES": "Sortuj Statusy Zadania",
 			"TASK_PRIORITIES": "Priorytety Zadania",
 			"TASK_SIZES": "Rozmiary Zadania",
 			"TASK_LABELS": "Etykiety Zadania",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 3df8aeb73..34eb0cf9f 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Gerenciar Designados",
 			"SEARCH_MEMBER": "Procurar Membro",
 			"TASK_STATUSES": "Status de Tarefa",
+			"SORT_TASK_STATUSES": "Ordenar Status de Tarefa",
 			"TASK_PRIORITIES": "Prioridades de Tarefa",
 			"TASK_SIZES": "Tamanhos de Tarefa",
 			"TASK_LABELS": "Etiquetas de Tarefa",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 003e3c5fc..1efca274d 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "Управление назначенными",
 			"SEARCH_MEMBER": "Поиск участника",
 			"TASK_STATUSES": "Статусы задачи",
+			"SORT_TASK_STATUSES": "Сортировать статусы задачи",
 			"TASK_PRIORITIES": "Приоритеты задачи",
 			"TASK_SIZES": "Размеры задачи",
 			"TASK_LABELS": "Метки задачи",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index fe4fd5a16..c1ed90f27 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -357,6 +357,7 @@
 			"MANAGE_ASSIGNEES": "管理受分配者",
 			"SEARCH_MEMBER": "搜索成员",
 			"TASK_STATUSES": "任务状态",
+			"SORT_TASK_STATUSES": "排序任务状态",
 			"TASK_PRIORITIES": "任务优先级",
 			"TASK_SIZES": "任务大小",
 			"TASK_LABELS": "任务标签",

From f5e45af0266faa93506fee34de4e974dcfe35659 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Fri, 19 Jul 2024 10:14:40 +0200
Subject: [PATCH 3/3] fix: remove unecessary paddings / margings on home and
 team page (#2759)

* fix: remove unecessary paddings / margings on home and team page

* fix: fix broken views
---
 apps/web/app/[locale]/page-component.tsx      | 109 ++++++++----------
 .../app/[locale]/profile/[memberId]/page.tsx  |  13 +--
 apps/web/lib/layout/main-layout.tsx           |   4 +-
 3 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index e1b331bf5..dc4e771ad 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -7,9 +7,9 @@ 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, Divider } from 'lib/components';
+import { Breadcrumb, Card } from 'lib/components';
 import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
-import { Footer, MainLayout } from 'lib/layout';
+import { MainLayout } from 'lib/layout';
 import { IssuesView } from '@app/constants';
 import { useNetworkState } from '@uidotdev/usehooks';
 import Offline from '@components/pages/offline';
@@ -65,69 +65,56 @@ function MainPage() {
 	return (
 		<>
 			<div className="flex flex-col h-screen justify-between">
-				<div className="flex-grow">
-					<MainLayout className="h-auto" footerClassName={clsxm(' hidden')}>
-						<ChatwootWidget />
-						<div className="pt-3 h-[80vh]">
-							<ResizablePanelGroup direction="vertical">
-								{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
-								<ResizablePanel
-									defaultSize={50}
-									maxSize={48}
-									className={clsxm(
-										headerSize < 20 ? '!overflow-hidden' : '!overflow-visible',
-										'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
-									)}
-									onResize={(size) => setHeaderSize(size)}
-								>
-									<div className="bg-white sticky z-50 dark:bg-dark-high">
-										<div
-											className={clsxm(
-												'bg-white dark:bg-dark-high ',
-												!fullWidth && 'x-container'
-											)}
-										>
-											<div className="mx-8-container pt-9 !px-0 flex flex-row items-start justify-between ">
-												<div className="flex justify-center items-center gap-8 h-10">
-													<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-													<Breadcrumb paths={breadcrumb} className="text-sm" />
-												</div>
-												<div className="flex h-10 w-max items-center justify-center   gap-1">
-													<HeaderTabs linkAll={false} />
-												</div>
+				{/* <div className="flex-grow "> */}
+				<MainLayout className="h-full" footerClassName={clsxm('')}>
+					<ChatwootWidget />
+					<div className=" h-full">
+						<ResizablePanelGroup direction="vertical">
+							{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
+							<ResizablePanel
+								defaultSize={30}
+								maxSize={48}
+								className={clsxm(
+									headerSize < 20 ? '!overflow-hidden ' : '!overflow-visible',
+									'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
+								)}
+								onResize={(size) => setHeaderSize(size)}
+							>
+								<div className="bg-white sticky z-50 dark:bg-dark-high">
+									<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
+										<div className="mx-8-container pt-9 !px-0 flex flex-row items-start justify-between ">
+											<div className="flex justify-center items-center gap-8 h-10">
+												<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+												<Breadcrumb paths={breadcrumb} className="text-sm" />
 											</div>
-											<div className="mx-8-container mb-1">
-												<UnverifiedEmail />
-												<TeamInvitations />
-												<TeamOutstandingNotifications />
-												{isTeamMember ? (
-													<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
-												) : null}
+											<div className="flex h-10 w-max items-center justify-center  gap-1">
+												<HeaderTabs linkAll={false} />
 											</div>
-											<TeamMemberHeader view={view} />
 										</div>
+										<div className="mx-8-container mb-1">
+											<UnverifiedEmail />
+											<TeamInvitations />
+											<TeamOutstandingNotifications />
+											{isTeamMember ? (
+												<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
+											) : null}
+										</div>
+										<TeamMemberHeader view={view} />
 									</div>
-								</ResizablePanel>
-								<ResizableHandle withHandle />
-
-								{/* </Container> */}
-								<ResizablePanel
-									defaultSize={55}
-									maxSize={95}
-									className="!overflow-y-scroll custom-scrollbar"
-								>
-									<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
-								</ResizablePanel>
-							</ResizablePanelGroup>
-						</div>
-					</MainLayout>
-				</div>
-				<div className="bg-white dark:bg-transparent ">
-					<Divider />
-					<Footer
-						className={clsxm('justify-between w-full px-0  mx-auto', fullWidth ? 'px-8' : 'x-container')}
-					/>
-				</div>
+								</div>
+							</ResizablePanel>
+							<ResizableHandle withHandle />
+							{/* </Container> */}
+							<ResizablePanel
+								defaultSize={65}
+								maxSize={95}
+								className="!overflow-y-scroll custom-scrollbar"
+							>
+								<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
+							</ResizablePanel>
+						</ResizablePanelGroup>
+					</div>
+				</MainLayout>
 			</div>
 			<Analytics />
 		</>
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
index c44a3d619..e0afccf3c 100644
--- a/apps/web/app/[locale]/profile/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -13,7 +13,7 @@ import { TaskFilter, Timer, TimerStatus, UserProfileTask, getTimerStatusValue, u
 import { MainHeader, MainLayout } from 'lib/layout';
 import Link from 'next/link';
 import React, { useCallback, useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl'
+import { useTranslations } from 'next-intl';
 import stc from 'string-to-color';
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -105,15 +105,12 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 				<MainLayout showTimer={profileIsAuthUser && isTrackingEnabled}>
 					<ResizablePanelGroup direction="vertical">
 						<ResizablePanel
-							defaultSize={47}
-							maxSize={50}
+							defaultSize={30}
+							maxSize={48}
 							className={clsxm(headerSize < 20 ? '!overflow-hidden' : '!overflow-visible')}
 							onResize={(size) => setHeaderSize(size)}
 						>
-							<MainHeader
-								fullWidth={fullWidth}
-								className={clsxm(hookFilterType && ['pb-0'], 'pb-2', 'pt-20 sticky top-20 z-50')}
-							>
+							<MainHeader fullWidth={fullWidth} className={clsxm(hookFilterType && ['pb-0'], 'pb-2')}>
 								{/* Breadcrumb */}
 								<div className="flex items-center gap-8">
 									<Link href="/">
@@ -141,7 +138,7 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 							</MainHeader>
 						</ResizablePanel>
 						<ResizableHandle withHandle />
-						<ResizablePanel defaultSize={53} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
+						<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
 							{hook.tab == 'worked' && canSeeActivity && (
 								<Container fullWidth={fullWidth} className="py-8">
 									<div className={clsxm('flex justify-start items-center gap-4 mt-3')}>
diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
index 6f5ec8c2f..26aba60d5 100644
--- a/apps/web/lib/layout/main-layout.tsx
+++ b/apps/web/lib/layout/main-layout.tsx
@@ -30,7 +30,7 @@ export function MainLayout({
 }: Props) {
 	const fullWidth = useRecoilValue(fullWidthState);
 	return (
-		<div className="w-full ">
+		<div className="w-full h-full">
 			<style jsx global>
 				{`
 					:root {
@@ -70,7 +70,7 @@ export function MainLayout({
 				<div className={clsxm('lg:flex-1 lg:w-full ', childrenClassName)}>{children}</div>
 				<Container
 					fullWidth={fullWidth}
-					className={clsxm('w-full  px-8', fullWidth && '!mx-0', footerClassName)}
+					className={clsxm('w-full px-8', fullWidth && '!mx-0', footerClassName)}
 				>
 					<Divider />
 					<Footer className="justify-between w-full px-0  mx-auto" />