[Feat] Daily plan date range | Filter

apps/mobile/app/components/Task/DetailsBlock/components/ManageAssignees.tsx

@@ -44,7 +44,7 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
 			memberList?.filter((member) =>
 				member.employee
 					? task?.members.map((item) => item.userId).includes(member.employee?.userId) &&
-					  member.employee?.isActive
+					member.employee?.isActive
 					: false
 			),
 		[memberList, task?.members]
@@ -55,7 +55,7 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
 			memberList?.filter((member) =>
 				member.employee
 					? !task?.members.map((item) => item.userId).includes(member.employee.userId) &&
-					  member.employee?.isActive
+					member.employee?.isActive
 					: false
 			),
 		[memberList, task?.members]
@@ -112,9 +112,8 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
 									<ProfileInfo
 										largerProfileInfo={true}
 										profilePicSrc={member?.employee?.user?.imageUrl}
-										names={`${member?.employee?.user?.firstName || ''} ${
-											member?.employee?.user?.lastName || ''
-										}`}
+										names={`${member?.employee?.user?.firstName || ''} ${member?.employee?.user?.lastName || ''
+											}`}
 									/>
 								</View>
 								<View pointerEvents="none">
@@ -136,9 +135,8 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
 									<ProfileInfo
 										largerProfileInfo={true}
 										profilePicSrc={member?.employee?.user?.imageUrl}
-										names={`${member?.employee?.user?.firstName || ''} ${
-											member?.employee?.user?.lastName || ''
-										}`}
+										names={`${member?.employee?.user?.firstName || ''} ${member?.employee?.user?.lastName || ''
+											}`}
 									/>
 								</View>
 							</TouchableOpacity>

apps/web/app/[locale]/permissions/component.tsx

@@ -66,11 +66,10 @@ const Permissions = () => {
 					<div className="flex flex-col w-[35%] overflow-scroll gap-2 mt-5">
 						{roles.map((role) => (
 							<div
-								className={`flex items-center justify-between w-full py-2 px-5 rounded-xl cursor-pointer ${
-									selectedRole && selectedRole.id === role.id
-										? 'bg-primary dark:bg-primary-light text-white'
-										: ''
-								}`}
+								className={`flex items-center justify-between w-full py-2 px-5 rounded-xl cursor-pointer ${selectedRole && selectedRole.id === role.id
+									? 'bg-primary dark:bg-primary-light text-white'
+									: ''
+									}`}
 								key={role?.id}
 								onClick={() => {
 									setSelectedRole(role);

apps/web/app/helpers/date.ts

@@ -121,6 +121,7 @@ export const tomorrowDate = moment().add(1, 'days').toDate();
 export const yesterdayDate = moment().subtract(1, 'days').toDate();
 
 export const formatDayPlanDate = (dateString: string | Date, format?: string) => {
+
 	if (dateString.toString().length > 10) {
 		dateString = dateString.toString().split('T')[0];
 	}

apps/web/app/hooks/features/useDailyPlan.ts

@@ -193,6 +193,7 @@ export function useDailyPlan() {
 	const ascSortedPlans =
 		profileDailyPlans.items &&
 		[...profileDailyPlans.items].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
 	const futurePlans = ascSortedPlans?.filter((plan) => {
 		const planDate = new Date(plan.date);
 		const today = new Date();

apps/web/app/hooks/index.ts

@@ -61,6 +61,7 @@ export * from './features/useTaskVersion';
 
 // Daily plan
 export * from './features/useDailyPlan';
+export * from './useFilterDateRange';
 
 export * from './features/useRefetchData';
 export * from './features/useRolePermissions';

apps/web/app/hooks/useFilterDateRange.ts

@@ -0,0 +1,56 @@
+import { IDailyPlan } from '@app/interfaces';
+import { dateRangeAllState, dateRangePastState, dateRangeState, filteredAllDataState, filteredDataState, filteredPastDataState, originalAllDataState, originalDataState, originalPastTaskDataState } from '@app/stores';
+import { useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+export function useFilterDateRange(itemsData: IDailyPlan[], dataType: 'future' | 'past' | 'all') {
+    const [dateAllPlan, setDateAllPlan] = useRecoilState(dateRangeAllState);
+    const [datePastPlan, setDatePastPlan] = useRecoilState(dateRangePastState);
+    const [dateFuture, setDateFuture] = useRecoilState(dateRangeState);
+
+    const [originalAllPlanData, setOriginalAllPlanData] = useRecoilState(originalAllDataState);
+    const [originalPastPlanData, setOriginalPastPlanData] = useRecoilState(originalPastTaskDataState);
+    const [originalFuturePlanData, setOriginalFuturePlanData] = useRecoilState(originalDataState);
+
+    const filteredAllPlanData = useRecoilValue(
+        filteredAllDataState
+    );
+    const filteredPastPanData = useRecoilValue(
+        filteredPastDataState
+
+    );
+    const filteredFuturePlanData = useRecoilValue(
+        filteredDataState
+
+    );
+
+    useEffect(() => {
+        if (!itemsData) return;
+        if (dataType === 'future') {
+            setOriginalFuturePlanData(itemsData);
+        }
+    }, [dateFuture, dataType, itemsData?.length, setOriginalFuturePlanData]);
+
+    useEffect(() => {
+        if (!itemsData) return;
+        if (dataType === 'all') {
+            setOriginalAllPlanData(itemsData);
+        }
+    }, [dateAllPlan, dataType, itemsData?.length, setOriginalAllPlanData]);
+
+    useEffect(() => {
+        if (!itemsData) return;
+        if (dataType === 'past') {
+            setOriginalPastPlanData(itemsData);
+        }
+    }, [datePastPlan, dataType, itemsData?.length, setOriginalPastPlanData]);
+
+    return {
+        originalFuturePlanData,
+        originalPastPlanData,
+        originalAllPlanData,
+        filteredFuturePlanData,
+        filteredPastPanData,
+        filteredAllPlanData, setDateAllPlan, setDateFuture, setDatePastPlan
+    };
+}

apps/web/app/interfaces/IDailyPlan.ts

@@ -16,11 +16,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',

apps/web/app/stores/daily-plan.ts

@@ -1,5 +1,7 @@
 import { atom, selector } from 'recoil';
 import { IDailyPlan, PaginationResponse } from '@app/interfaces';
+import { DateRange } from 'react-day-picker';
+import { addDays, } from 'date-fns';
 
 export const dailyPlanListState = atom<PaginationResponse<IDailyPlan>>({
 	key: 'dailyPlanListState',
@@ -44,3 +46,101 @@ export const activeDailyPlanState = selector<IDailyPlan | null>({
 		return dailyPlans.items.find((plan) => plan.id === activeId) || dailyPlans.items[0] || null;
 	}
 });
+
+const today = new Date();
+const oneWeekAgo = new Date();
+oneWeekAgo.setDate(today.getDate() - 7);
+
+export const dateRangeState = atom<DateRange | undefined>({
+	key: 'dateRangeState',
+	default: ({
+		from: oneWeekAgo,
+		to: addDays(today, 3),
+	}),
+})
+type daySelectionMode = 'single' | 'multiple' | 'range' | 'default';
+export const daySelectionModeState = atom<daySelectionMode | null>({
+	key: 'mode',
+	default: 'single',
+})
+
+export const dateRangeAllState = atom<DateRange | undefined>({
+	key: 'dateRangeAllState',
+	default: ({
+		from: oneWeekAgo,
+		to: addDays(today, 3),
+	}),
+})
+
+export const dateRangePastState = atom<DateRange | undefined>({
+	key: 'dateRangePastPlanState',
+	default: ({
+		from: oneWeekAgo,
+		to: addDays(today, 3),
+	}),
+})
+
+export const originalDataState = atom<IDailyPlan[]>({
+	key: 'originalDataState',
+	default: []
+})
+export const originalAllDataState = atom<IDailyPlan[]>({
+	key: 'originalAllDataState',
+	default: []
+})
+export const originalPastTaskDataState = atom<IDailyPlan[]>({
+	key: 'originalPastDataState',
+	default: []
+})
+
+function isDateInRange(itemDate: Date, from?: Date, to?: Date): boolean {
+	if (from && to) {
+		return itemDate >= from && itemDate <= to;
+	} else if (from) {
+		return itemDate >= from;
+	} else if (to) {
+		return itemDate <= to;
+	} else {
+		return true; // or false, depending on your default logic
+	}
+}
+export const filteredDataState = selector({
+	key: 'filteredDataState',
+	get: ({ get }) => {
+		const dateRange = get(dateRangeState);
+		const data = get(originalDataState);
+		if (!dateRange || !data.length) return data;
+		const { from, to } = dateRange;
+		return data.filter((plan) => {
+			const itemDate = new Date(plan.date);
+			return isDateInRange(itemDate, from, to);
+		});
+	},
+});
+
+export const filteredAllDataState = selector({
+	key: 'filteredAllDataState',
+	get: ({ get }) => {
+		const dateRange = get(dateRangeAllState);
+		const data = get(originalAllDataState);
+		if (!dateRange || !data.length) return data;
+		const { from, to } = dateRange;
+		return data.filter((plan) => {
+			const itemDate = new Date(plan.date);
+			return isDateInRange(itemDate, from, to);
+		});
+	},
+});
+export const filteredPastDataState = selector({
+	key: 'filteredPastDataState',
+	get: ({ get }) => {
+		const dateRange = get(dateRangePastState);
+		const data = get(originalPastTaskDataState);
+		if (!dateRange || !data.length) return data;
+		const { from, to } = dateRange;
+		return data.filter((plan) => {
+			const itemDate = new Date(plan.date); // Ensure you're using the correct date field
+			return isDateInRange(itemDate, from, to);
+		});
+	},
+});

apps/web/lib/components/alert-popup.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@components/ui/popover"
+
+
+interface IPopupConfirm {
+    buttonOpen: any,
+    open: boolean
+}
+/**
+ *
+ *
+ * @export
+ * @param {React.PropsWithChildren<IPopupConfirm>} { children, buttonOpen, open }
+ * @return {*}
+ */
+export function AlertPopup({ children, buttonOpen, open }: React.PropsWithChildren<IPopupConfirm>) {
+    return (
+        <Popover open={open}  >
+            <PopoverTrigger asChild>
+                {buttonOpen}
+            </PopoverTrigger>
+            <PopoverContent className="min-w-max bg-light--theme-light dark:bg-dark--theme-light outline-none dark:border-gray-600">
+                <div className="p-4 space-y-4">
+                    <div>
+                        <h4 className="text-lg font-semibold">Delete this plan</h4>
+                        <p className="text-sm text-gray-600">Are you sure you want to delete this plan?</p>
+                    </div>
+                    <div className="flex space-x-4">
+                        {children}
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}

apps/web/lib/components/index.ts

@@ -27,3 +27,4 @@ export * from './inputs/auth-code-input';
 
 export * from './services/recaptcha';
 export * from './copy-tooltip';
+export * from './alert-popup'

apps/web/lib/features/daily-plan/add-task-to-plan.tsx

@@ -38,21 +38,21 @@ export function AddTaskToPlan({
 	const onSubmit = useCallback(async () => {
 		newPlan
 			? createDailyPlan({
-					workTimePlanned: workTimePlanned,
-					taskId: task.id,
-					date: new Date(moment(date).format('YYYY-MM-DD')),
-					status: DailyPlanStatusEnum.OPEN,
-					tenantId: employee?.tenantId,
-					employeeId: employee?.employeeId,
-					organizationId: employee?.organizationId
-				}).then(() => {
-					closeModal();
-				})
+				workTimePlanned: workTimePlanned,
+				taskId: task.id,
+				date: new Date(moment(date).format('YYYY-MM-DD')),
+				status: DailyPlanStatusEnum.OPEN,
+				tenantId: employee?.tenantId,
+				employeeId: employee?.employeeId,
+				organizationId: employee?.organizationId
+			}).then(() => {
+				closeModal();
+			})
 			: addTaskToPlan({ employeeId: employee?.employeeId ?? '', taskId: task.id }, selectedPlan?.id ?? '').then(
-					() => {
-						closeModal();
-					}
-				);
+				() => {
+					closeModal();
+				}
+			);
 	}, [
 		addTaskToPlan,
 		closeModal,

apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx

@@ -194,12 +194,12 @@ function MembersList({
 									{(member?.employee?.user?.image?.thumbUrl ||
 										member?.employee?.user?.image?.fullUrl ||
 										member?.employee?.user?.imageUrl) &&
-									isValidUrl(
-										member?.employee?.user?.image?.thumbUrl ||
+										isValidUrl(
+											member?.employee?.user?.image?.thumbUrl ||
 											member?.employee?.user?.image?.fullUrl ||
 											member?.employee?.user?.imageUrl ||
 											''
-									) ? (
+										) ? (
 										<Avatar
 											size={36}
 											className="relative cursor-pointer dark:border-[0.25rem] dark:border-[#26272C]"