Release

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 />
 		</>

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')}>

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]);

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,

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 };
     }
 }

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);
+    });
+}

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',

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}`);
 }