From 0337cceeb822affa00dbd9b6850c45d66a1002ad Mon Sep 17 00:00:00 2001
From: GloireMutaliko21 <mufunyig@gmail.com>
Date: Sat, 29 Jun 2024 20:05:25 +0200
Subject: [PATCH 1/8] feat: manager notification for outstanding users tasks

---
 .../team/team-outstanding-notifications.tsx   | 82 ++++++++++++++++++-
 1 file changed, 78 insertions(+), 4 deletions(-)

diff --git a/apps/web/lib/features/team/team-outstanding-notifications.tsx b/apps/web/lib/features/team/team-outstanding-notifications.tsx
index afd691602..7b792cc94 100644
--- a/apps/web/lib/features/team/team-outstanding-notifications.tsx
+++ b/apps/web/lib/features/team/team-outstanding-notifications.tsx
@@ -8,20 +8,27 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 export function TeamOutstandingNotifications() {
-	const { getEmployeeDayPlans, outstandingPlans } = useDailyPlan();
+	const { getAllDayPlans, dailyPlan, getEmployeeDayPlans, outstandingPlans } = useDailyPlan();
 
 	const { user } = useAuthenticateUser();
 
 	useEffect(() => {
+		getAllDayPlans();
 		getEmployeeDayPlans(user?.employee.id || '');
-	}, [getEmployeeDayPlans, user?.employee.id]);
+	}, [getAllDayPlans, getEmployeeDayPlans, user?.employee.id]);
+
+	console.log(dailyPlan);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4">
 			{outstandingPlans && outstandingPlans.length > 0 && (
 				<UserOutstandingNotification outstandingTasks={outstandingPlans} user={user} />
 			)}
-		</>
+
+			{dailyPlan.items && dailyPlan.items.length > 0 && (
+				<ManagerOutstandingUsersNotification outstandingTasks={dailyPlan.items} />
+			)}
+		</div>
 	);
 }
 
@@ -93,3 +100,70 @@ function UserOutstandingNotification({ outstandingTasks, user }: { outstandingTa
 		</>
 	);
 }
+
+function ManagerOutstandingUsersNotification({ outstandingTasks }: { outstandingTasks: IDailyPlan[] }) {
+	const t = useTranslations();
+
+	// Notification will be displayed 6 hours after the user closed it
+	const REAPPEAR_INTERVAL = 6 * 60 * 60 * 1000; // 6 hours in milliseconds;
+	const DISMISSAL_TIMESTAMP_KEY = 'manager-saw-outstanding-notif';
+
+	const [visible, setVisible] = useState(false);
+
+	const employeeWithOutstanding = outstandingTasks.map((plan) => plan.employee);
+
+	useEffect(() => {
+		const checkNotification = () => {
+			const alreadySeen = window && parseInt(window?.localStorage.getItem(DISMISSAL_TIMESTAMP_KEY) || '0', 10);
+			const currentTime = new Date().getTime();
+
+			if (!alreadySeen || currentTime - alreadySeen > REAPPEAR_INTERVAL) {
+				setVisible(true);
+			}
+		};
+
+		checkNotification();
+		const intervalId = setInterval(checkNotification, REAPPEAR_INTERVAL);
+		return () => clearInterval(intervalId);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const onClose = () => {
+		window && window?.localStorage.setItem(DISMISSAL_TIMESTAMP_KEY, new Date().getTime().toString());
+		setVisible(false);
+	};
+	return (
+		<>
+			{visible && (
+				<div className="rounded-2xl dark:border-dark--theme-light border py-2 px-6 flex justify-between items-center text-xs mb-2">
+					<div>
+						{t('pages.home.OUTSTANDING_NOTIFICATIONS.SUBJECT')} {employeeWithOutstanding?.length}{' '}
+						{t('pages.home.OUTSTANDING_NOTIFICATIONS.USER_LABEL')}{' '}
+						<span className="font-medium">
+							{t('pages.home.OUTSTANDING_NOTIFICATIONS.OUTSTANDING_VIEW')}
+						</span>
+					</div>
+					<div className="flex items-center gap-5">
+						<div>
+							{/* <Link
+								href={`/profile/${user?.id}?name=${name || ''}`}
+								className="bg-primary text-white py-2 px-4 flex gap-2 items-center rounded-xl"
+								onClick={() => {
+									onClose();
+									window && window.localStorage.setItem('task-tab', 'dailyplan');
+									window && window.localStorage.setItem('daily-plan-tab', 'Outstanding');
+								}}
+							>
+								<EyeOpenIcon />
+								<span>{t('pages.home.OUTSTANDING_NOTIFICATIONS.VIEW_BUTTON')}</span>
+							</Link> */}
+						</div>
+						<Tooltip label={t('common.CLOSE')}>
+							<Cross2Icon className="text-xl cursor-pointer" onClick={onClose} />
+						</Tooltip>
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

From 0c27dd785944671509d251837f8ce39531361290 Mon Sep 17 00:00:00 2001
From: GloireMutaliko21 <mufunyig@gmail.com>
Date: Tue, 9 Jul 2024 18:43:55 +0200
Subject: [PATCH 2/8] feat: outstanding users notification for manager

---
 .../web/app/services/client/api/daily-plan.ts |  2 +-
 .../team/team-outstanding-notifications.tsx   | 82 +++++++++++++------
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/apps/web/app/services/client/api/daily-plan.ts b/apps/web/app/services/client/api/daily-plan.ts
index e405a3b80..a99f1596e 100644
--- a/apps/web/app/services/client/api/daily-plan.ts
+++ b/apps/web/app/services/client/api/daily-plan.ts
@@ -14,7 +14,7 @@ export function getAllDayPlansAPI() {
 	const organizationId = getOrganizationIdCookie();
 	const tenantId = getTenantIdCookie();
 
-	const relations = ['employee', 'tasks'];
+	const relations = ['employee', 'tasks', 'employee.user'];
 
 	const obj = {
 		'where[organizationId]': organizationId,
diff --git a/apps/web/lib/features/team/team-outstanding-notifications.tsx b/apps/web/lib/features/team/team-outstanding-notifications.tsx
index 7b792cc94..c172d1ccb 100644
--- a/apps/web/lib/features/team/team-outstanding-notifications.tsx
+++ b/apps/web/lib/features/team/team-outstanding-notifications.tsx
@@ -1,16 +1,21 @@
 'use client';
 import { useAuthenticateUser, useDailyPlan } from '@app/hooks';
-import { IDailyPlan, IUser } from '@app/interfaces';
+import { IDailyPlan, IEmployee, IUser } from '@app/interfaces';
 import { Cross2Icon, EyeOpenIcon } from '@radix-ui/react-icons';
 import { Tooltip } from 'lib/components';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
+interface IEmployeeWithOutstanding {
+	employeeId: string | undefined;
+	employee: IEmployee | undefined;
+}
+
 export function TeamOutstandingNotifications() {
 	const { getAllDayPlans, dailyPlan, getEmployeeDayPlans, outstandingPlans } = useDailyPlan();
 
-	const { user } = useAuthenticateUser();
+	const { isTeamManager, user } = useAuthenticateUser();
 
 	useEffect(() => {
 		getAllDayPlans();
@@ -25,7 +30,7 @@ export function TeamOutstandingNotifications() {
 				<UserOutstandingNotification outstandingTasks={outstandingPlans} user={user} />
 			)}
 
-			{dailyPlan.items && dailyPlan.items.length > 0 && (
+			{dailyPlan.items && dailyPlan.items.length > 0 && isTeamManager && (
 				<ManagerOutstandingUsersNotification outstandingTasks={dailyPlan.items} />
 			)}
 		</div>
@@ -106,15 +111,46 @@ function ManagerOutstandingUsersNotification({ outstandingTasks }: { outstanding
 
 	// Notification will be displayed 6 hours after the user closed it
 	const REAPPEAR_INTERVAL = 6 * 60 * 60 * 1000; // 6 hours in milliseconds;
-	const DISMISSAL_TIMESTAMP_KEY = 'manager-saw-outstanding-notif';
+	const MANAGER_DISMISSAL_TIMESTAMP_KEY = 'manager-saw-outstanding-notif';
 
 	const [visible, setVisible] = useState(false);
 
-	const employeeWithOutstanding = outstandingTasks.map((plan) => plan.employee);
+	const employeeWithOutstanding = outstandingTasks
+		.filter((plan) => !plan.date?.toString()?.startsWith(new Date()?.toISOString().split('T')[0]))
+
+		.filter((plan) => {
+			const planDate = new Date(plan.date);
+			const today = new Date();
+			today.setHours(23, 59, 59, 0);
+			return planDate.getTime() <= today.getTime();
+		})
+		.map((plan) => ({
+			...plan,
+			tasks: plan.tasks?.filter((task) => task.status !== 'completed')
+		}))
+		.filter((plan) => plan.tasks?.length && plan.tasks.length > 0)
+		.map((plan) => ({ employeeId: plan.employeeId, employee: plan.employee }));
+
+	const uniqueEmployees: IEmployeeWithOutstanding[] = employeeWithOutstanding.reduce(
+		(acc: IEmployeeWithOutstanding[], current) => {
+			const existingEmployee = acc.find((emp) => emp.employeeId === current.employeeId);
+
+			if (!existingEmployee) {
+				acc.push({
+					employeeId: current.employeeId,
+					employee: current.employee
+				});
+			}
+
+			return acc;
+		},
+		[]
+	);
 
 	useEffect(() => {
 		const checkNotification = () => {
-			const alreadySeen = window && parseInt(window?.localStorage.getItem(DISMISSAL_TIMESTAMP_KEY) || '0', 10);
+			const alreadySeen =
+				window && parseInt(window?.localStorage.getItem(MANAGER_DISMISSAL_TIMESTAMP_KEY) || '0', 10);
 			const currentTime = new Date().getTime();
 
 			if (!alreadySeen || currentTime - alreadySeen > REAPPEAR_INTERVAL) {
@@ -129,35 +165,29 @@ function ManagerOutstandingUsersNotification({ outstandingTasks }: { outstanding
 	}, []);
 
 	const onClose = () => {
-		window && window?.localStorage.setItem(DISMISSAL_TIMESTAMP_KEY, new Date().getTime().toString());
+		window && window?.localStorage.setItem(MANAGER_DISMISSAL_TIMESTAMP_KEY, new Date().getTime().toString());
 		setVisible(false);
 	};
 	return (
 		<>
 			{visible && (
-				<div className="rounded-2xl dark:border-dark--theme-light border py-2 px-6 flex justify-between items-center text-xs mb-2">
+				<div className="rounded-2xl dark:border-dark--theme-light border py-4 px-6 flex justify-between items-center text-xs mb-2">
 					<div>
-						{t('pages.home.OUTSTANDING_NOTIFICATIONS.SUBJECT')} {employeeWithOutstanding?.length}{' '}
-						{t('pages.home.OUTSTANDING_NOTIFICATIONS.USER_LABEL')}{' '}
-						<span className="font-medium">
-							{t('pages.home.OUTSTANDING_NOTIFICATIONS.OUTSTANDING_VIEW')}
+						{t('pages.home.OUTSTANDING_NOTIFICATIONS.SUBJECT')} {uniqueEmployees?.length} team member(s)
+						with unconpleted tasks, please see{' '}
+						<span>
+							{uniqueEmployees?.map((em) => (
+								<Link
+									href={`/profile/${em.employee?.user?.id}?name=${em.employee?.user?.name || em.employee?.user?.firstName || em.employee?.user?.lastName || em.employee?.user?.username}`}
+									key={em.employeeId}
+									className="text-primary font-semibold underline"
+								>
+									{em.employee?.fullName},{' '}
+								</Link>
+							))}
 						</span>
 					</div>
 					<div className="flex items-center gap-5">
-						<div>
-							{/* <Link
-								href={`/profile/${user?.id}?name=${name || ''}`}
-								className="bg-primary text-white py-2 px-4 flex gap-2 items-center rounded-xl"
-								onClick={() => {
-									onClose();
-									window && window.localStorage.setItem('task-tab', 'dailyplan');
-									window && window.localStorage.setItem('daily-plan-tab', 'Outstanding');
-								}}
-							>
-								<EyeOpenIcon />
-								<span>{t('pages.home.OUTSTANDING_NOTIFICATIONS.VIEW_BUTTON')}</span>
-							</Link> */}
-						</div>
 						<Tooltip label={t('common.CLOSE')}>
 							<Cross2Icon className="text-xl cursor-pointer" onClick={onClose} />
 						</Tooltip>

From e334946b77403d5b21b90a3b9384d2deed99abf7 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Tue, 9 Jul 2024 21:40:27 +0200
Subject: [PATCH 3/8] feat: collapse the invitations accordion when there is no
 one

---
 apps/web/app/[locale]/settings/team/page.tsx | 10 +++++++---
 apps/web/lib/components/accordian.tsx        |  5 +++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
index 9044cd372..1fcee8c6d 100644
--- a/apps/web/app/[locale]/settings/team/page.tsx
+++ b/apps/web/app/[locale]/settings/team/page.tsx
@@ -5,8 +5,8 @@ import { Card } from 'lib/components';
 
 import { DangerZoneTeam, TeamAvatar, TeamSettingForm } from 'lib/settings';
 
-import { useIsMemberManager, useOrganizationTeams } from '@app/hooks';
-import { userState } from '@app/stores';
+import { useIsMemberManager, useOrganizationTeams, useTeamInvitations } from '@app/hooks';
+import { fetchingTeamInvitationsState, userState } from '@app/stores';
 import NoTeam from '@components/pages/main/no-team';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
@@ -26,6 +26,9 @@ const Team = () => {
 	const [user] = useRecoilState(userState);
 	const { isTeamMember, activeTeam } = useOrganizationTeams();
 	const { isTeamManager } = useIsMemberManager(user);
+	const { teamInvitations } = useTeamInvitations();
+	const [isFetchingTeamInvitations] = useRecoilState(fetchingTeamInvitationsState);
+
 	return (
 		<div className="overflow-hidden pb-16">
 			{isTeamMember ? (
@@ -49,10 +52,11 @@ const Team = () => {
 					</InteractionObserverVisible>
 
 					{/* Invitations */}
-					{isTeamManager ? (
+					{isTeamManager && !isFetchingTeamInvitations ? (
 						<InteractionObserverVisible id="invitations" setActiveSection={setActiveTeam}>
 							<Accordian
 								title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
+								defaultOpen={teamInvitations.length ? true : false}
 								className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							>
 								<InvitationSetting />
diff --git a/apps/web/lib/components/accordian.tsx b/apps/web/lib/components/accordian.tsx
index e0c4ab48f..47602ee1f 100644
--- a/apps/web/lib/components/accordian.tsx
+++ b/apps/web/lib/components/accordian.tsx
@@ -8,14 +8,15 @@ interface isProps {
 	className: string;
 	isDanger?: boolean;
 	id?: string;
+	defaultOpen?: boolean;
 }
-export const Accordian = ({ children, title, className, isDanger, id }: isProps) => {
+export const Accordian = ({ children, title, className, isDanger, id, defaultOpen = true }: isProps) => {
 	return (
 		<div className="w-full" id={id}>
 			<div
 				className={`rounded-2xl p-2 ${className} shadow-[0px 14px 34px rgba(0, 0, 0, 0.05)] bg-light--theme-light dark:bg-dark--theme-light`}
 			>
-				<Disclosure defaultOpen>
+				<Disclosure defaultOpen={defaultOpen}>
 					{({ open }) => (
 						<>
 							<Disclosure.Button className="flex w-full justify-between rounded-lg px-4 py-2 text-left text-sm font-medium  hover:bg-white items-center pt-[0.15rem] pb-0 h-[3.81rem] bg-light--theme-light dark:bg-dark--theme-light">

From 057c9397431d7687dd1f059d246f7c2c1116dc2a Mon Sep 17 00:00:00 2001
From: Serge Muhundu <sergemuhundu2@gmail.com>
Date: Wed, 10 Jul 2024 15:40:36 +0100
Subject: [PATCH 4/8] Fix target sdk version

---
 apps/mobile/app.template.json | 183 +++++++++++++++++-----------------
 1 file changed, 93 insertions(+), 90 deletions(-)

diff --git a/apps/mobile/app.template.json b/apps/mobile/app.template.json
index a69f6c58c..f48f6bce9 100644
--- a/apps/mobile/app.template.json
+++ b/apps/mobile/app.template.json
@@ -1,91 +1,94 @@
-{"name": "$EXPO_PROJECT_SLUG",
-"displayName": "$EXPO_PROJECT_NAME",
-"expo": {
-  "name": "$EXPO_PROJECT_NAME",
-  "slug": "$EXPO_PROJECT_SLUG",
-  "version": "0.1.0",
-  "orientation": "portrait",
-  "icon": "./assets/images/ever-teams-logo.png",
-  "splash": {
-    "image": "./assets/images/splash-ever-teams.png",
-    "resizeMode": "cover",
-    "backgroundColor": "#ffffff"
-  },
-  "owner": "$EXPO_PROJECT_OWNER",
-  "updates": {
-    "fallbackToCacheTimeout": 0,
-    "url": "https://u.expo.dev/$EXPO_PROJECT_ID"
-  },
-  "jsEngine": "hermes",
-  "assetBundlePatterns": ["**/*"],
-  "plugins": [
-    [
-      "expo-media-library",
-      {
-        "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
-        "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
-        "isAccessMediaLocationEnabled": true
-      }
-    ],
-    "sentry-expo",
-    [
-      "expo-build-properties",
-      {
-        "android": {
-          "enableProguardInReleaseBuilds": true,
-          "extraProguardRules": "-keep public class com.horcrux.svg.** {*;}",
-          "allowBackup": false
-        }
-      }
-    ]
-  ],
-  "android": {
-    "icon": "./assets/images/app-icon-android-legacy-ever-teams.png",
-    "package": "ever.team",
-    "adaptiveIcon": {
-      "foregroundImage": "./assets/images/app-icon-android-adaptive-foreground-ever.png",
-      "backgroundImage": "./assets/images/app-icon-android-adaptive-background.png"
-    },
-    "splash": {
-      "image": "./assets/images/splash-ever-teams.png",
-      "resizeMode": "cover",
-      "backgroundColor": "#ffffff"
-    },
-    "permissions": [
-      "android.permission.READ_EXTERNAL_STORAGE",
-      "android.permission.WRITE_EXTERNAL_STORAGE",
-      "android.permission.ACCESS_MEDIA_LOCATION"
-    ]
-  },
-  "ios": {
-    "icon": "./assets/images/app-icon-ios-ever-teams.png",
-    "supportsTablet": true,
-    "bundleIdentifier": "co.ever.teams",
-    "splash": {
-      "image": "./assets/images/splash-ever-teams.png",
-      "tabletImage": "./assets/images/splash-logo-ever-teams-ios-tablet.png",
-      "resizeMode": "cover",
-      "backgroundColor": "#ffffff"
-    },
-    "infoPlist": {
-      "NSCameraUsageDescription": "This app uses the camera to scan barcodes on event tickets.",
-      "NSPhotoLibraryUsageDescription": "Allow $(PRODUCT_NAME) to access your photos.",
-      "NSPhotoLibraryAddUsageDescription": "Allow $(PRODUCT_NAME) to save photos."
-    }
-  },
-  "web": {
-    "favicon": "./assets/images/app-icon-web-favicon.png",
-    "splash": {
-      "image": "./assets/images/splash-logo-web-ever-teams.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    }
-  },
-  "extra": {
-    "eas": {
-      "projectId": "$EXPO_PROJECT_ID"
-    }
-  },
-  "runtimeVersion": "exposdk:48.0.0"
-}
+{
+	"name": "$EXPO_PROJECT_SLUG",
+	"displayName": "$EXPO_PROJECT_NAME",
+	"expo": {
+		"name": "$EXPO_PROJECT_NAME",
+		"slug": "$EXPO_PROJECT_SLUG",
+		"version": "0.1.0",
+		"orientation": "portrait",
+		"icon": "./assets/images/ever-teams-logo.png",
+		"splash": {
+			"image": "./assets/images/splash-ever-teams.png",
+			"resizeMode": "cover",
+			"backgroundColor": "#ffffff"
+		},
+		"owner": "$EXPO_PROJECT_OWNER",
+		"updates": {
+			"fallbackToCacheTimeout": 0,
+			"url": "https://u.expo.dev/$EXPO_PROJECT_ID"
+		},
+		"jsEngine": "hermes",
+		"assetBundlePatterns": ["**/*"],
+		"plugins": [
+			[
+				"expo-media-library",
+				{
+					"photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
+					"savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
+					"isAccessMediaLocationEnabled": true
+				}
+			],
+			"sentry-expo",
+			[
+				"expo-build-properties",
+				{
+					"android": {
+						"enableProguardInReleaseBuilds": true,
+						"extraProguardRules": "-keep public class com.horcrux.svg.** {*;}",
+						"allowBackup": false,
+						"minSdkVersion": 23,
+						"targetSdkVersion": 34
+					}
+				}
+			]
+		],
+		"android": {
+			"icon": "./assets/images/app-icon-android-legacy-ever-teams.png",
+			"package": "ever.team",
+			"adaptiveIcon": {
+				"foregroundImage": "./assets/images/app-icon-android-adaptive-foreground-ever.png",
+				"backgroundImage": "./assets/images/app-icon-android-adaptive-background.png"
+			},
+			"splash": {
+				"image": "./assets/images/splash-ever-teams.png",
+				"resizeMode": "cover",
+				"backgroundColor": "#ffffff"
+			},
+			"permissions": [
+				"android.permission.READ_EXTERNAL_STORAGE",
+				"android.permission.WRITE_EXTERNAL_STORAGE",
+				"android.permission.ACCESS_MEDIA_LOCATION"
+			]
+		},
+		"ios": {
+			"icon": "./assets/images/app-icon-ios-ever-teams.png",
+			"supportsTablet": true,
+			"bundleIdentifier": "co.ever.teams",
+			"splash": {
+				"image": "./assets/images/splash-ever-teams.png",
+				"tabletImage": "./assets/images/splash-logo-ever-teams-ios-tablet.png",
+				"resizeMode": "cover",
+				"backgroundColor": "#ffffff"
+			},
+			"infoPlist": {
+				"NSCameraUsageDescription": "This app uses the camera to scan barcodes on event tickets.",
+				"NSPhotoLibraryUsageDescription": "Allow $(PRODUCT_NAME) to access your photos.",
+				"NSPhotoLibraryAddUsageDescription": "Allow $(PRODUCT_NAME) to save photos."
+			}
+		},
+		"web": {
+			"favicon": "./assets/images/app-icon-web-favicon.png",
+			"splash": {
+				"image": "./assets/images/splash-logo-web-ever-teams.png",
+				"resizeMode": "contain",
+				"backgroundColor": "#ffffff"
+			}
+		},
+		"extra": {
+			"eas": {
+				"projectId": "$EXPO_PROJECT_ID"
+			}
+		},
+		"runtimeVersion": "exposdk:48.0.0"
+	}
 }

From 2779c5ced5301b27a90783f604f494b5e28a171a Mon Sep 17 00:00:00 2001
From: GloireMutaliko21 <mufunyig@gmail.com>
Date: Thu, 11 Jul 2024 03:49:26 +0200
Subject: [PATCH 5/8] fix: resizable components hidden tabs and filters on
 profile page

---
 apps/web/app/[locale]/profile/[memberId]/page.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
index 6a500ece2..3e3dd3ebf 100644
--- a/apps/web/app/[locale]/profile/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -29,6 +29,8 @@ export type FilterTab = 'Tasks' | 'Screenshots' | 'Apps' | 'Visited Sites';
 const Profile = React.memo(function ProfilePage({ params }: { params: { memberId: string } }) {
 	const profile = useUserProfilePage();
 
+	const [headerSize, setHeaderSize] = useState(10);
+
 	const { user } = useAuthenticateUser();
 	const { isTrackingEnabled, activeTeam, activeTeamManagers } = useOrganizationTeams();
 	const members = activeTeam?.members;
@@ -102,7 +104,12 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 			) : (
 				<MainLayout showTimer={profileIsAuthUser && isTrackingEnabled}>
 					<ResizablePanelGroup direction="vertical">
-						<ResizablePanel defaultSize={47} maxSize={50}>
+						<ResizablePanel
+							defaultSize={47}
+							maxSize={50}
+							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')}

From 00ac26b3057c98e3071800d74abac74d5b0e4fba Mon Sep 17 00:00:00 2001
From: "Gloire Mutaliko (Salva)"
 <86450367+GloireMutaliko21@users.noreply.github.com>
Date: Fri, 12 Jul 2024 18:41:05 +0200
Subject: [PATCH 6/8] [Feature] All Teams management (#2699)

* feat: load managed teams item for connected user

* feat: initialize page for all teams views

* feat: load users in different teams

* feat: all teams management, find active task for each user for specific team

* fix: missing typos cspelling

* refact: all teams page folder and files structure

* feat: all teams management block view

* feat: filter on all teams by user status

* feat: empty set component on filter

* fix: cspelling typos
---
 apps/web/app/[locale]/all-teams/component.tsx |  65 +++++++++
 apps/web/app/[locale]/all-teams/page.tsx      |   5 +
 apps/web/app/helpers/plan-day-badge.ts        |   3 +-
 .../features/useOrganizationTeamManagers.ts   |  44 +++++++
 apps/web/app/interfaces/IOrganizationTeam.ts  |   6 +
 apps/web/app/stores/all-teams.ts              |   7 +
 apps/web/app/stores/header-tabs.ts            |   5 +
 .../pages/all-teams/header-tabs.tsx           |  46 +++++++
 .../features/all-teams-members-block-view.tsx |  38 ++++++
 .../features/all-teams-members-card-view.tsx  |  44 +++++++
 apps/web/lib/features/all-teams-members.tsx   |  49 +++++++
 .../all-teams/all-team-members-filter.tsx     | 124 ++++++++++++++++++
 .../users-teams-block/member-block.tsx        |  79 +++++++++++
 .../all-teams/users-teams-block/user-info.tsx |   8 ++
 .../user-team-active-task-times.tsx           |  37 ++++++
 .../user-team-active-task.tsx                 |  41 ++++++
 .../user-team-task-estimate.tsx               |  37 ++++++
 .../user-team-today-worked.tsx                |  33 +++++
 .../users-teams-card/member-infos.tsx         |   8 ++
 .../all-teams/users-teams-card/user-card.tsx  |  92 +++++++++++++
 .../user-team-active-task-times.tsx           |  30 +++++
 .../user-team-active-task.tsx                 |  35 +++++
 .../user-team-task-estimate.tsx               |  29 ++++
 .../user-team-today-worked.tsx                |  12 ++
 apps/web/lib/features/team/team-item.tsx      |  41 ++++++
 .../team/team-outstanding-notifications.tsx   |   4 +-
 apps/web/lib/features/team/teams-dropdown.tsx |   8 +-
 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 +
 40 files changed, 964 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/app/[locale]/all-teams/component.tsx
 create mode 100644 apps/web/app/[locale]/all-teams/page.tsx
 create mode 100644 apps/web/app/hooks/features/useOrganizationTeamManagers.ts
 create mode 100644 apps/web/app/stores/all-teams.ts
 create mode 100644 apps/web/components/pages/all-teams/header-tabs.tsx
 create mode 100644 apps/web/lib/features/all-teams-members-block-view.tsx
 create mode 100644 apps/web/lib/features/all-teams-members-card-view.tsx
 create mode 100644 apps/web/lib/features/all-teams-members.tsx
 create mode 100644 apps/web/lib/features/all-teams/all-team-members-filter.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-block/member-block.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-block/user-info.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-block/user-team-active-task-times.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-block/user-team-active-task.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-block/user-team-task-estimate.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-block/user-team-today-worked.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx
 create mode 100644 apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx

diff --git a/apps/web/app/[locale]/all-teams/component.tsx b/apps/web/app/[locale]/all-teams/component.tsx
new file mode 100644
index 000000000..544c4f9b4
--- /dev/null
+++ b/apps/web/app/[locale]/all-teams/component.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useRecoilValue } from 'recoil';
+import { fullWidthState } from '@app/stores/fullWidth';
+import { withAuthentication } from 'lib/app/authenticator';
+import { Breadcrumb, Container } from 'lib/components';
+import { MainHeader, MainLayout } from 'lib/layout';
+import { useOrganizationAndTeamManagers } from '@app/hooks/features/useOrganizationTeamManagers';
+import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import TeamMemberHeader from 'lib/features/team-member-header';
+import { IssuesView } from '@app/constants';
+import { HeaderTabs } from '@components/pages/all-teams/header-tabs';
+import { allTeamsHeaderTabs } from '@app/stores/header-tabs';
+import AllTeamsMembers from 'lib/features/all-teams-members';
+import { MemberFilter } from 'lib/features/all-teams/all-team-members-filter';
+
+function AllTeamsPage() {
+	const t = useTranslations();
+	const fullWidth = useRecoilValue(fullWidthState);
+	const view = useRecoilValue(allTeamsHeaderTabs);
+	const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
+
+	const breadcrumb = [
+		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+		{ title: t('common.ALL_TEAMS'), href: '/all-teams' }
+	];
+
+	/* If the user is not a manager in any team or if he's
+        manager in only one team, then redirect him to the home page
+    */
+	if (userManagedTeams.length < 2) return <RedirectUser />;
+
+	return (
+		<MainLayout className="items-start">
+			<MainHeader fullWidth={fullWidth} className={'pb-2 pt-10 sticky top-20 z-50'}>
+				{/* Breadcrumb */}
+				<div className="flex flex-row items-start justify-between mb-5">
+					<Breadcrumb paths={breadcrumb} className="text-sm" />
+					<div className="flex flex-col gap-2 items-end">
+						<div className="flex h-10 w-max items-center justify-center gap-1">
+							<HeaderTabs />
+						</div>
+						<MemberFilter />
+					</div>
+				</div>
+				<TeamMemberHeader view={IssuesView.CARDS} />
+			</MainHeader>
+			<Container fullWidth={fullWidth} className="flex py-10 pt-20">
+				<AllTeamsMembers teams={filteredTeams} view={view} />
+			</Container>
+		</MainLayout>
+	);
+}
+
+function RedirectUser() {
+	const router = useRouter();
+	useEffect(() => {
+		router.push('/');
+	}, [router]);
+	return <></>;
+}
+
+export default withAuthentication(AllTeamsPage, { displayName: 'AllManagedTeams' });
diff --git a/apps/web/app/[locale]/all-teams/page.tsx b/apps/web/app/[locale]/all-teams/page.tsx
new file mode 100644
index 000000000..7eb229d44
--- /dev/null
+++ b/apps/web/app/[locale]/all-teams/page.tsx
@@ -0,0 +1,5 @@
+import AllTeamsPage from './component';
+
+export default function Page() {
+	return <AllTeamsPage />;
+}
diff --git a/apps/web/app/helpers/plan-day-badge.ts b/apps/web/app/helpers/plan-day-badge.ts
index b40497c5d..e5d9322da 100644
--- a/apps/web/app/helpers/plan-day-badge.ts
+++ b/apps/web/app/helpers/plan-day-badge.ts
@@ -16,7 +16,8 @@ export const planBadgeContent = (plans: IDailyPlan[], taskId: ITeamTask['id']):
 		if (otherPlansWithTask.length > 0) {
 			return 'Planned';
 		} else {
-			return `Planned ${formatDayPlanDate(plan.date, 'DD MMM YYYY')}`;
+			return `${formatDayPlanDate(plan.date, 'DD MMM YYYY')}`;
+			// return `Planned ${formatDayPlanDate(plan.date, 'DD MMM YYYY')}`;
 		}
 		// The task does not exist in any plan
 	} else {
diff --git a/apps/web/app/hooks/features/useOrganizationTeamManagers.ts b/apps/web/app/hooks/features/useOrganizationTeamManagers.ts
new file mode 100644
index 000000000..edaab309e
--- /dev/null
+++ b/apps/web/app/hooks/features/useOrganizationTeamManagers.ts
@@ -0,0 +1,44 @@
+import { useRecoilValue } from 'recoil';
+import { useAuthenticateUser } from './useAuthenticateUser';
+import { useOrganizationTeams } from './useOrganizationTeams';
+import { filterValue } from '@app/stores/all-teams';
+
+export function useOrganizationAndTeamManagers() {
+	const { user } = useAuthenticateUser();
+	const { teams } = useOrganizationTeams();
+	const { value: filtered } = useRecoilValue(filterValue);
+
+	const userManagedTeams = teams.filter((team) =>
+		team.members.some((member) => member.employee?.user?.id === user?.id && member.role?.name === 'MANAGER')
+	);
+
+	const filteredTeams =
+		filtered === 'all'
+			? userManagedTeams
+			: filtered === 'pause'
+				? userManagedTeams.map((team) => ({
+						...team,
+						members: team.members.filter((member) => member.timerStatus === 'pause')
+					}))
+				: filtered === 'running'
+					? userManagedTeams.map((team) => ({
+							...team,
+							members: team.members.filter((member) => member.timerStatus === 'running')
+						}))
+					: filtered === 'suspended'
+						? userManagedTeams.map((team) => ({
+								...team,
+								members: team.members.filter((member) => member.timerStatus === 'suspended')
+							}))
+						: filtered === 'invited'
+							? userManagedTeams.map((team) => ({
+									...team,
+									members: team.members.filter((member) => member.employee.acceptDate)
+								}))
+							: userManagedTeams;
+
+	return {
+		userManagedTeams,
+		filteredTeams
+	};
+}
diff --git a/apps/web/app/interfaces/IOrganizationTeam.ts b/apps/web/app/interfaces/IOrganizationTeam.ts
index 2c12fa8e9..fdb5e455a 100644
--- a/apps/web/app/interfaces/IOrganizationTeam.ts
+++ b/apps/web/app/interfaces/IOrganizationTeam.ts
@@ -109,6 +109,12 @@ export interface OT_Role {
 	isSystem: boolean;
 }
 
+export interface ITeamsMembersFilter {
+	label: string;
+	value: ITimerStatusEnum | 'all' | 'invited';
+	bg: string;
+}
+
 export enum RoleNameEnum {
 	SUPER_ADMIN = 'SUPER_ADMIN',
 	ADMIN = 'ADMIN',
diff --git a/apps/web/app/stores/all-teams.ts b/apps/web/app/stores/all-teams.ts
new file mode 100644
index 000000000..3a9db262b
--- /dev/null
+++ b/apps/web/app/stores/all-teams.ts
@@ -0,0 +1,7 @@
+import { ITeamsMembersFilter } from '@app/interfaces';
+import { atom } from 'recoil';
+
+export const filterValue = atom<ITeamsMembersFilter>({
+	key: 'allTeamsFilterValue',
+	default: { label: 'All', value: 'all', bg: 'transparent' }
+});
diff --git a/apps/web/app/stores/header-tabs.ts b/apps/web/app/stores/header-tabs.ts
index 72f9d1f04..3b5d13f08 100644
--- a/apps/web/app/stores/header-tabs.ts
+++ b/apps/web/app/stores/header-tabs.ts
@@ -5,3 +5,8 @@ export const headerTabs = atom<IssuesView>({
 	key: 'headerTabs',
 	default: IssuesView.CARDS
 });
+
+export const allTeamsHeaderTabs = atom<IssuesView>({
+	key: 'allTeamsHeaderTabs',
+	default: IssuesView.CARDS
+});
diff --git a/apps/web/components/pages/all-teams/header-tabs.tsx b/apps/web/components/pages/all-teams/header-tabs.tsx
new file mode 100644
index 000000000..b3042ced4
--- /dev/null
+++ b/apps/web/components/pages/all-teams/header-tabs.tsx
@@ -0,0 +1,46 @@
+import { DottedLanguageObjectStringPaths, useTranslations } from 'next-intl';
+import { useRecoilState } from 'recoil';
+import { QueueListIcon, Squares2X2Icon } from '@heroicons/react/20/solid';
+import { IssuesView } from '@app/constants';
+import { allTeamsHeaderTabs } from '@app/stores/header-tabs';
+import { Tooltip } from 'lib/components';
+import { clsxm } from '@app/utils';
+
+export function HeaderTabs() {
+	const t = useTranslations();
+	const options = [
+		{ label: 'TEAMS', icon: QueueListIcon, view: IssuesView.CARDS },
+		{ label: 'COMBINE', icon: Squares2X2Icon, view: IssuesView.BLOCKS }
+	];
+
+	const [view, setView] = useRecoilState(allTeamsHeaderTabs);
+
+	return (
+		<>
+			{options.map(({ label, icon: Icon, view: optionView }) => (
+				<Tooltip
+					key={label}
+					label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
+					placement="top-start"
+				>
+					<button
+						className={clsxm(
+							'rounded-md p-2 text-gray-700 dark:text-gray-300',
+							view === optionView && 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+						)}
+						onClick={() => {
+							setView(optionView);
+						}}
+					>
+						<Icon
+							className={clsxm(
+								'w-5 h-5 inline text-gray-600 dark:text-gray-400',
+								view === optionView && 'dark:text-white text-gray-800'
+							)}
+						/>
+					</button>
+				</Tooltip>
+			))}
+		</>
+	);
+}
diff --git a/apps/web/lib/features/all-teams-members-block-view.tsx b/apps/web/lib/features/all-teams-members-block-view.tsx
new file mode 100644
index 000000000..7c6935d64
--- /dev/null
+++ b/apps/web/lib/features/all-teams-members-block-view.tsx
@@ -0,0 +1,38 @@
+import { IOrganizationTeamList, OT_Member } from '@app/interfaces';
+import UserTeamBlockCard from './all-teams/users-teams-block/member-block';
+
+interface Employee extends OT_Member {
+	teams: { team: IOrganizationTeamList; activeTaskId?: string | null }[];
+}
+
+export default function AllTeamsMembersBlockView({ teams }: { teams: IOrganizationTeamList[] }) {
+	const employees: Employee[] = teams.flatMap((team) =>
+		team.members.map((member) => ({
+			...member,
+			teams: [{ team, activeTaskId: member.activeTaskId }]
+		}))
+	);
+
+	const groupedEmployees: Record<string, Employee> = employees.reduce(
+		(acc, employee) => {
+			if (!acc[employee.employeeId]) {
+				acc[employee.employeeId] = { ...employee, teams: [] };
+			}
+			acc[employee.employeeId].teams.push(...employee.teams);
+			return acc;
+		},
+		{} as Record<string, Employee>
+	);
+
+	const employeesArray: Employee[] = Object.values(groupedEmployees);
+
+	return (
+		<>
+			{employeesArray.length > 0 ? (
+				employeesArray.map((employee) => <UserTeamBlockCard key={employee.id} member={employee} />)
+			) : (
+				<div className="text-center font-medium w-full">There is no member for filtered value</div>
+			)}
+		</>
+	);
+}
diff --git a/apps/web/lib/features/all-teams-members-card-view.tsx b/apps/web/lib/features/all-teams-members-card-view.tsx
new file mode 100644
index 000000000..e9f8e47e6
--- /dev/null
+++ b/apps/web/lib/features/all-teams-members-card-view.tsx
@@ -0,0 +1,44 @@
+import { IOrganizationTeamList } from '@app/interfaces';
+import UserTeamCard from './all-teams/users-teams-card/user-card';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
+import { HorizontalSeparator } from 'lib/components';
+
+export default function TeamsMembersCardView({ teams }: { teams: IOrganizationTeamList[] }) {
+	return (
+		<div className="flex flex-col gap-5 w-full">
+			<Accordion type="multiple" className="text-sm flex flex-col gap-5" defaultValue={teams.map((t) => t.name)}>
+				{teams.map((team) => {
+					return (
+						<AccordionItem key={team.id} value={team.name} className="dark:border-slate-600 !border-none">
+							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+								<div className="flex items-center justify-between gap-3 w-full">
+									<span className="font-medium min-w-max">
+										{team.name} ({team.members.length})
+									</span>
+									<HorizontalSeparator />
+									{/* <MinusCircledIcon /> */}
+								</div>
+							</AccordionTrigger>
+
+							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme flex flex-col gap-2 mt-4">
+								{team.members.length > 0 ? (
+									team.members.map((member) => {
+										return <UserTeamCard key={`${member.id}${team.id}`} member={member} />;
+									})
+								) : (
+									<div className="text-center font-medium">
+										There is no member for filtered value in the team{' '}
+										<span className="text-primary font-semibold dark:text-primary-light">
+											{' '}
+											{team.name}
+										</span>
+									</div>
+								)}
+							</AccordionContent>
+						</AccordionItem>
+					);
+				})}
+			</Accordion>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/all-teams-members.tsx b/apps/web/lib/features/all-teams-members.tsx
new file mode 100644
index 000000000..a08034089
--- /dev/null
+++ b/apps/web/lib/features/all-teams-members.tsx
@@ -0,0 +1,49 @@
+import { useRecoilValue } from 'recoil';
+import { IssuesView } from '@app/constants';
+import { IOrganizationTeamList } from '@app/interfaces';
+import { fullWidthState } from '@app/stores/fullWidth';
+import { Container } from 'lib/components';
+import UserTeamCardSkeletonCard from '@components/shared/skeleton/UserTeamCardSkeleton';
+import InviteUserTeamCardSkeleton from '@components/shared/skeleton/InviteTeamCardSkeleton';
+import { UserCard } from '@components/shared/skeleton/TeamPageSkeleton';
+import TeamsMembersCardView from './all-teams-members-card-view';
+import AllTeamsMembersBlockView from './all-teams-members-block-view';
+
+export default function AllTeamsMembers({
+	teams,
+	view = IssuesView.CARDS
+}: {
+	teams: IOrganizationTeamList[];
+	view: IssuesView;
+}) {
+	const fullWidth = useRecoilValue(fullWidthState);
+	let teamsMembersView;
+
+	switch (true) {
+		case teams.length === 0:
+			teamsMembersView = (
+				<Container fullWidth={fullWidth}>
+					<div className="hidden lg:block">
+						<UserTeamCardSkeletonCard />
+						<InviteUserTeamCardSkeleton />
+					</div>
+					<div className="block lg:hidden">
+						<UserCard />
+						<UserCard />
+						<UserCard />
+					</div>
+				</Container>
+			);
+			break;
+		case view === IssuesView.CARDS:
+			teamsMembersView = <TeamsMembersCardView teams={teams} />;
+			break;
+		case view === IssuesView.BLOCKS:
+			teamsMembersView = <AllTeamsMembersBlockView teams={teams} />;
+			break;
+		default:
+			teamsMembersView = <TeamsMembersCardView teams={teams} />;
+	}
+
+	return teamsMembersView;
+}
diff --git a/apps/web/lib/features/all-teams/all-team-members-filter.tsx b/apps/web/lib/features/all-teams/all-team-members-filter.tsx
new file mode 100644
index 000000000..8d1daa057
--- /dev/null
+++ b/apps/web/lib/features/all-teams/all-team-members-filter.tsx
@@ -0,0 +1,124 @@
+import { ITeamsMembersFilter } from '@app/interfaces';
+import { filterValue } from '@app/stores/all-teams';
+import { clsxm } from '@app/utils';
+import { Listbox, Transition } from '@headlessui/react';
+import { ChevronDownIcon, CircleIcon } from 'assets/svg';
+import { Card, Tooltip } from 'lib/components';
+import { Fragment, PropsWithChildren } from 'react';
+import { useRecoilState } from 'recoil';
+
+export function MemberFilterOption({
+	children,
+	label,
+	active = true,
+	checked = false,
+	showIcon = true,
+	icon,
+	bg
+}: PropsWithChildren<{
+	label: string;
+	active?: boolean;
+	checked?: boolean;
+	showIcon?: boolean;
+	icon?: React.ReactNode;
+	bg?: string;
+}>) {
+	return (
+		<div
+			className={clsxm(
+				'dark:bg-dark--theme-light rounded-xl px-3 py-1 flex items-center justify-between w-full min-w-[170px]'
+			)}
+			style={{ backgroundColor: bg }}
+		>
+			<div className={clsxm('flex items-center space-x-1 whitespace-nowrap text-ellipsis dark:text-white')}>
+				{checked ? (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						width="20px"
+						height="20px"
+						className={`dark:fill-white`}
+					>
+						<path d="M9 19.4L3.3 13.7 4.7 12.3 9 16.6 20.3 5.3 21.7 6.7z" />
+					</svg>
+				) : (
+					<>{showIcon && active && icon}</>
+				)}
+				<div className={`capitalize text-ellipsis`}>{label}</div>
+			</div>
+			{children}
+		</div>
+	);
+}
+
+export function MemberFilter() {
+	const options: ITeamsMembersFilter[] = [
+		{ label: 'All', value: 'all', bg: 'transparent' },
+		{ label: 'Working now', value: 'running', bg: '#1f973d33' },
+		{ label: 'Paused', value: 'pause', bg: '#e58484' },
+		{ label: 'Off', value: 'suspended', bg: '#6b7280' },
+		{ label: 'Invited', value: 'invited', bg: '#d1ad5b' }
+	];
+	const [value, setValue] = useRecoilState(filterValue);
+
+	return (
+		<Tooltip label="Filter" placement="auto" enabled={true}>
+			<div className="relative">
+				<Listbox value={value} onChange={(v) => setValue(v)}>
+					{({ open }) => {
+						return (
+							<>
+								<Listbox.Button as="div" className="cursor-pointer">
+									<MemberFilterOption
+										label={value.label}
+										icon={
+											<span>
+												<CircleIcon className="h-4 w-4" />
+											</span>
+										}
+										bg={value.bg}
+									>
+										<ChevronDownIcon className={clsxm('h-5 w-5 text-default dark:text-white')} />
+									</MemberFilterOption>
+								</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-12 z-40 min-w-min outline-none mt-1')}
+								>
+									<Listbox.Options className="outline-none ">
+										<Card
+											shadow="bigger"
+											className="p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5"
+										>
+											{options.map((item) => (
+												<Listbox.Option key={item.value} value={item} as={Fragment}>
+													<li className="cursor-pointer outline-none relative">
+														<MemberFilterOption
+															label={item.label}
+															bg={item.bg}
+															icon={
+																<span>
+																	<CircleIcon className="h-4 w-4" />
+																</span>
+															}
+														/>
+													</li>
+												</Listbox.Option>
+											))}
+										</Card>
+									</Listbox.Options>
+								</Transition>
+							</>
+						);
+					}}
+				</Listbox>
+			</div>
+		</Tooltip>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-block/member-block.tsx b/apps/web/lib/features/all-teams/users-teams-block/member-block.tsx
new file mode 100644
index 000000000..c2cffe9ae
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-block/member-block.tsx
@@ -0,0 +1,79 @@
+import { useTimer } from '@app/hooks';
+import { IOrganizationTeamList, ITimerStatusEnum, OT_Member } from '@app/interfaces';
+import { clsxm } from '@app/utils';
+import { Card, HorizontalSeparator } from 'lib/components';
+import { getTimerStatusValue } from 'lib/features/timer/timer-status';
+import { useMemo } from 'react';
+import MemberBoxInfo from './user-info';
+import { BlockCardMemberTodayWorked } from './user-team-today-worked';
+import UserTeamActiveBlockTaskInfo from './user-team-active-task';
+import UserTeamActiveTaskTimesBlock from './user-team-active-task-times';
+import UserTeamActiveTaskEstimateBlock from './user-team-task-estimate';
+
+const cardColorType = {
+	running: ' border-green-300',
+	idle: ' border-[#F5BEBE]',
+	online: ' border-green-300',
+	pause: ' border-[#EFCF9E]',
+	suspended: ' border-[#DCD6D6]'
+};
+
+interface Member extends OT_Member {
+	teams: { team: IOrganizationTeamList; activeTaskId?: string | null }[];
+}
+
+export default function UserTeamBlockCard({ member }: { member: Member }) {
+	const { timerStatus } = useTimer();
+
+	const timerStatusValue: ITimerStatusEnum = useMemo(() => {
+		return getTimerStatusValue(timerStatus, member, true);
+	}, [timerStatus, member]);
+
+	return (
+		<div className={clsxm('border-2 border-transparent')}>
+			<Card
+				shadow="bigger"
+				className={clsxm('relative items-center py-3 !px-4 dark:bg-[#1E2025] min-h-[7rem]', [
+					'dark:border border-t-[6px] dark:border-t-[6px] max-w-[370px]',
+					cardColorType[timerStatusValue]
+				])}
+			>
+				<div className="flex items-center justify-between py-2 w-full">
+					<MemberBoxInfo member={member} />
+					{/* total time  */}
+					<div className="flex items-center justify-end w-2/5 gap-1">
+						<BlockCardMemberTodayWorked member={member} />
+						{/* <div className="w-2 right-2">{menu}</div> */}
+					</div>
+				</div>
+
+				<HorizontalSeparator />
+
+				<>
+					{member.teams.map((team) => (
+						<div key={member.employeeId}>
+							<>
+								<div className="my-3 font-semibold">{team.team.name}</div>
+								<UserTeamActiveBlockTaskInfo member={member} activeTaskId={team.activeTaskId || ''} />
+
+								<HorizontalSeparator />
+								<div className="w-full flex justify-between items-center py-2">
+									<div className="flex justify-start items-center">
+										<UserTeamActiveTaskTimesBlock
+											member={member}
+											activeTaskId={team.activeTaskId || ''}
+										/>
+									</div>
+									<UserTeamActiveTaskEstimateBlock
+										member={member}
+										activeTaskId={team.activeTaskId || ''}
+									/>
+								</div>
+							</>
+						</div>
+					))}
+				</>
+			</Card>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-block/user-info.tsx b/apps/web/lib/features/all-teams/users-teams-block/user-info.tsx
new file mode 100644
index 000000000..5910c8b5a
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-block/user-info.tsx
@@ -0,0 +1,8 @@
+import { useTeamMemberCard } from '@app/hooks';
+import { OT_Member } from '@app/interfaces';
+import { UserBoxInfo } from 'lib/features/team/user-team-block/user-info';
+
+export default function MemberBoxInfo({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+	return <UserBoxInfo memberInfo={memberInfo} publicTeam={false} />;
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-block/user-team-active-task-times.tsx b/apps/web/lib/features/all-teams/users-teams-block/user-team-active-task-times.tsx
new file mode 100644
index 000000000..5a1cf6ae8
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-block/user-team-active-task-times.tsx
@@ -0,0 +1,37 @@
+import { useTeamMemberCard, useTeamTasks } from '@app/hooks';
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { TaskTimes } from 'lib/features/task/task-times';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamActiveTaskTimesBlock({
+	member,
+	activeTaskId
+}: {
+	member: OT_Member;
+	activeTaskId: string;
+}) {
+	const memberInfo = useTeamMemberCard(member);
+
+	const { getTaskById } = useTeamTasks();
+
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+
+	useEffect(() => {
+		getTaskById(activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<TaskTimes
+			activeAuthTask={true}
+			memberInfo={memberInfo}
+			task={activeTask}
+			isAuthUser={memberInfo.isAuthUser}
+			className=" w-full  px-2 flex flex-col gap-y-[1.125rem] justify-center"
+			isBlock={true}
+		/>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-block/user-team-active-task.tsx b/apps/web/lib/features/all-teams/users-teams-block/user-team-active-task.tsx
new file mode 100644
index 000000000..aa8126348
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-block/user-team-active-task.tsx
@@ -0,0 +1,41 @@
+import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { TaskBlockInfo } from 'lib/features/team/user-team-block/task-info';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamActiveBlockTaskInfo({
+	member,
+	activeTaskId
+}: {
+	member: OT_Member;
+	activeTaskId: string;
+}) {
+	const memberInfo = useTeamMemberCard(member);
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+	const taskEdition = useTMCardTaskEdit(activeTask);
+
+	const { getTaskById } = useTeamTasks();
+
+	useEffect(() => {
+		getTaskById(activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<>
+			{activeTask?.id ? (
+				<TaskBlockInfo
+					edition={taskEdition}
+					memberInfo={memberInfo}
+					className=" w-full px-1 py-2 overflow-hidden"
+					publicTeam={false}
+				/>
+			) : (
+				<div className="w-full text-start px-6 font-medium text-sm">No active task</div>
+			)}
+		</>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-block/user-team-task-estimate.tsx b/apps/web/lib/features/all-teams/users-teams-block/user-team-task-estimate.tsx
new file mode 100644
index 000000000..e5334182d
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-block/user-team-task-estimate.tsx
@@ -0,0 +1,37 @@
+import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { TaskEstimateInfo } from 'lib/features/team/user-team-card/task-estimate';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamActiveTaskEstimateBlock({
+	member,
+	activeTaskId
+}: {
+	member: OT_Member;
+	activeTaskId: string;
+}) {
+	const memberInfo = useTeamMemberCard(member);
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+	const taskEdition = useTMCardTaskEdit(activeTask);
+
+	const { getTaskById } = useTeamTasks();
+
+	useEffect(() => {
+		getTaskById(activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<TaskEstimateInfo
+			memberInfo={memberInfo}
+			edition={taskEdition}
+			activeAuthTask={true}
+			showTime={false}
+			className="w-1/5"
+			radial={true}
+		/>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-block/user-team-today-worked.tsx b/apps/web/lib/features/all-teams/users-teams-block/user-team-today-worked.tsx
new file mode 100644
index 000000000..dbe12596a
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-block/user-team-today-worked.tsx
@@ -0,0 +1,33 @@
+import { secondsToTime } from '@app/helpers';
+import { useTaskStatistics, useTeamMemberCard } from '@app/hooks';
+import { OT_Member } from '@app/interfaces';
+import { timerSecondsState } from '@app/stores';
+import { clsxm } from '@app/utils';
+import { Text } from 'lib/components';
+import { useTranslations } from 'next-intl';
+import { useRecoilValue } from 'recoil';
+
+export function BlockCardMemberTodayWorked({ member }: { member: OT_Member }) {
+	const t = useTranslations();
+	const memberInfo = useTeamMemberCard(member);
+
+	const seconds = useRecoilValue(timerSecondsState);
+	const { activeTaskTotalStat, addSeconds } = useTaskStatistics(seconds);
+
+	const { h, m } = secondsToTime(
+		((member?.totalTodayTasks &&
+			member?.totalTodayTasks.reduce(
+				(previousValue, currentValue) => previousValue + currentValue.duration,
+				0
+			)) ||
+			activeTaskTotalStat?.duration ||
+			0) + addSeconds
+	);
+
+	return (
+		<div className={clsxm('flex space-x-2 items-center justify-center  font-normal flex-col mr-4')}>
+			<span className="text-xs text-gray-500 text-center	capitalize">{t('common.TOTAL_WORKED_TODAY')}</span>
+			<Text className="text-sm">{memberInfo.isAuthUser ? `${h}h : ${m}m` : `0h : 0m`}</Text>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx b/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx
new file mode 100644
index 000000000..a43b32dfd
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx
@@ -0,0 +1,8 @@
+import { useTeamMemberCard } from '@app/hooks';
+import { OT_Member } from '@app/interfaces';
+import { UserInfo } from 'lib/features/team/user-team-card/user-info';
+
+export default function MemberInfo({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+	return <UserInfo memberInfo={memberInfo} className="2xl:w-[20.625rem] w-1/4" publicTeam={false} />;
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
new file mode 100644
index 000000000..3957a7797
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
@@ -0,0 +1,92 @@
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { clsxm } from '@app/utils';
+import { Transition } from '@headlessui/react';
+import { SixSquareGridIcon } from 'assets/svg';
+import { Card, VerticalSeparator } from 'lib/components';
+import MemberInfo from './member-infos';
+import UserTeamActiveTaskInfo from './user-team-active-task';
+import UserTeamActiveTaskTimes from './user-team-active-task-times';
+import UserTeamActiveTaskEstimate from './user-team-task-estimate';
+import UserTeamActiveTaskTodayWorked from './user-team-today-worked';
+import { UserTeamCardMenu } from 'lib/features/team/user-team-card/user-team-card-menu';
+import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamCard({ member }: { member: OT_Member }) {
+	return (
+		<Transition
+			show={true}
+			enter="transition-opacity duration-75"
+			enterFrom="opacity-0"
+			enterTo="opacity-100"
+			leave="transition-opacity duration-150"
+			leaveFrom="opacity-100"
+			leaveTo="opacity-0"
+		>
+			<Card
+				shadow="bigger"
+				className={clsxm(
+					'sm:block hidden transition-all dark:bg-[#1E2025] min-h-[7rem] !py-4',
+					'dark:border border border-transparent dark:border-[#FFFFFF14]'
+				)}
+			>
+				<div className="flex m-0 relative items-center">
+					<div className="absolute left-0 cursor-pointer">
+						<SixSquareGridIcon className="w-2  text-[#CCCCCC] dark:text-[#4F5662]" />
+					</div>
+					{/* User information */}
+					<div className="relative">
+						<MemberInfo member={member} />
+					</div>
+
+					<VerticalSeparator />
+
+					{/* Task information */}
+					<div className="flex justify-between items-center flex-1 min-w-[40%]">
+						<UserTeamActiveTaskInfo member={member} />
+					</div>
+
+					<VerticalSeparator className="ml-2" />
+
+					{/* Task worked Times */}
+					<UserTeamActiveTaskTimes member={member} />
+
+					<VerticalSeparator />
+
+					{/* Task estimate Info */}
+					<UserTeamActiveTaskEstimate member={member} />
+
+					<VerticalSeparator />
+
+					<UserTeamActiveTaskTodayWorked member={member} />
+
+					{/* Card Menu */}
+					<div className="absolute hidden right-2">
+						<UserActiveTaskMenu member={member} />
+					</div>
+				</div>
+			</Card>
+		</Transition>
+	);
+}
+
+function UserActiveTaskMenu({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+	const taskEdition = useTMCardTaskEdit(activeTask);
+
+	const { getTaskById } = useTeamTasks();
+
+	useEffect(() => {
+		getTaskById(member.activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+	return (
+		<>
+			<UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />
+		</>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx
new file mode 100644
index 000000000..53545b014
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx
@@ -0,0 +1,30 @@
+import { useTeamMemberCard, useTeamTasks } from '@app/hooks';
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { TaskTimes } from 'lib/features/task/task-times';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamActiveTaskTimes({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+
+	const { getTaskById } = useTeamTasks();
+
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+
+	useEffect(() => {
+		getTaskById(member.activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<TaskTimes
+			activeAuthTask={true}
+			memberInfo={memberInfo}
+			task={activeTask}
+			isAuthUser={memberInfo.isAuthUser}
+			className="2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4 px-2 flex flex-col gap-y-[1.125rem] justify-center"
+		/>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
new file mode 100644
index 000000000..ded3e360e
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
@@ -0,0 +1,35 @@
+import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { TaskInfo } from 'lib/features/team/user-team-card/task-info';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamActiveTaskInfo({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+	const taskEdition = useTMCardTaskEdit(activeTask);
+
+	const { getTaskById } = useTeamTasks();
+
+	useEffect(() => {
+		getTaskById(member.activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<>
+			{activeTask?.id ? (
+				<TaskInfo
+					edition={{ ...taskEdition, task: activeTask }}
+					memberInfo={memberInfo}
+					className="flex-1 lg:px-4 px-2 overflow-y-hidden"
+					publicTeam={false}
+				/>
+			) : (
+				<div className="w-full text-start px-6">--</div>
+			)}
+		</>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx
new file mode 100644
index 000000000..e61f1702e
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx
@@ -0,0 +1,29 @@
+import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
+import { ITeamTask, OT_Member } from '@app/interfaces';
+import { TaskEstimateInfo } from 'lib/features/team/user-team-card/task-estimate';
+import { useEffect, useState } from 'react';
+
+export default function UserTeamActiveTaskEstimate({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
+	const taskEdition = useTMCardTaskEdit(activeTask);
+
+	const { getTaskById } = useTeamTasks();
+
+	useEffect(() => {
+		getTaskById(member.activeTaskId || '')
+			.then((response) => setActiveTask(response.data))
+			.catch((_) => console.log(_));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<TaskEstimateInfo
+			memberInfo={memberInfo}
+			edition={taskEdition}
+			activeAuthTask={true}
+			className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64"
+		/>
+	);
+}
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx
new file mode 100644
index 000000000..c2319e801
--- /dev/null
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx
@@ -0,0 +1,12 @@
+import { useTeamMemberCard } from '@app/hooks';
+import { OT_Member } from '@app/interfaces';
+import { TodayWorkedTime } from 'lib/features/task/task-times';
+
+export default function UserTeamActiveTaskTodayWorked({ member }: { member: OT_Member }) {
+	const memberInfo = useTeamMemberCard(member);
+	return (
+		<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem]">
+			<TodayWorkedTime isAuthUser={memberInfo.isAuthUser} className="" memberInfo={memberInfo} />
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/team/team-item.tsx b/apps/web/lib/features/team/team-item.tsx
index 98373b8da..636a64557 100644
--- a/apps/web/lib/features/team/team-item.tsx
+++ b/apps/web/lib/features/team/team-item.tsx
@@ -152,3 +152,44 @@ export function TeamItem({
 		</div>
 	);
 }
+
+export function AllTeamItem({ title, count }: { title: string; count: number }) {
+	return (
+		<Link href="/all-teams">
+			<div
+				className={clsxm('flex items-center justify-start space-x-2 text-sm', 'cursor-pointer mb-4 max-w-full')}
+			>
+				<div>
+					<div
+						className={clsxm(
+							'w-[27px] h-[27px]',
+							'flex justify-center items-center',
+							'rounded-full text-xs text-default dark:text-white',
+							'shadow-md'
+						)}
+					>
+						{imgTitle(title)}
+					</div>
+				</div>
+				<div className="flex gap-1">
+					<span
+						className={clsxm(
+							'text-normal md:max-w-[100px]',
+							'whitespace-nowrap text-ellipsis overflow-hidden'
+						)}
+					>
+						{title}
+					</span>
+					<span
+						className={clsxm('text-normal')}
+						style={{
+							marginLeft: 0
+						}}
+					>
+						{count ? `(${count})` : ''}
+					</span>
+				</div>
+			</div>
+		</Link>
+	);
+}
diff --git a/apps/web/lib/features/team/team-outstanding-notifications.tsx b/apps/web/lib/features/team/team-outstanding-notifications.tsx
index c172d1ccb..991e45736 100644
--- a/apps/web/lib/features/team/team-outstanding-notifications.tsx
+++ b/apps/web/lib/features/team/team-outstanding-notifications.tsx
@@ -22,8 +22,6 @@ export function TeamOutstandingNotifications() {
 		getEmployeeDayPlans(user?.employee.id || '');
 	}, [getAllDayPlans, getEmployeeDayPlans, user?.employee.id]);
 
-	console.log(dailyPlan);
-
 	return (
 		<div className="flex flex-col gap-4">
 			{outstandingPlans && outstandingPlans.length > 0 && (
@@ -174,7 +172,7 @@ function ManagerOutstandingUsersNotification({ outstandingTasks }: { outstanding
 				<div className="rounded-2xl dark:border-dark--theme-light border py-4 px-6 flex justify-between items-center text-xs mb-2">
 					<div>
 						{t('pages.home.OUTSTANDING_NOTIFICATIONS.SUBJECT')} {uniqueEmployees?.length} team member(s)
-						with unconpleted tasks, please see{' '}
+						with uncompleted tasks, please see{' '}
 						<span>
 							{uniqueEmployees?.map((em) => (
 								<Link
diff --git a/apps/web/lib/features/team/teams-dropdown.tsx b/apps/web/lib/features/team/teams-dropdown.tsx
index a4ac5bdb8..65d8a4a6b 100644
--- a/apps/web/lib/features/team/teams-dropdown.tsx
+++ b/apps/web/lib/features/team/teams-dropdown.tsx
@@ -7,12 +7,14 @@ import { PlusIcon } from '@heroicons/react/24/solid';
 import { Button, Dropdown, Tooltip } from 'lib/components';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateTeamModal } from './create-team-modal';
-import { TeamItem, mapTeamItems } from './team-item';
+import { AllTeamItem, TeamItem, mapTeamItems } from './team-item';
 import { useTranslations } from 'next-intl';
+import { useOrganizationAndTeamManagers } from '@app/hooks/features/useOrganizationTeamManagers';
 
 export const TeamsDropDown = ({ publicTeam }: { publicTeam?: boolean }) => {
 	const { user } = useAuthenticateUser();
 	const { teams, activeTeam, setActiveTeam } = useOrganizationTeams();
+	const { userManagedTeams } = useOrganizationAndTeamManagers();
 	const { timerStatus, stopTimer } = useTimer();
 	const t = useTranslations();
 	const { toast } = useToast();
@@ -72,6 +74,10 @@ export const TeamsDropDown = ({ publicTeam }: { publicTeam?: boolean }) => {
 				// loading={teamsFetching} // TODO: Enable loading in future when we implement better data fetching library like TanStack
 				publicTeam={publicTeam}
 			>
+				{userManagedTeams.length > 1 && (
+					<AllTeamItem title={t('common.ALL_TEAMS')} count={userManagedTeams.length} />
+				)}
+
 				{!publicTeam && (
 					<Tooltip
 						enabled={!user?.isEmailVerified}
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 031e4d8ba..275746bf7 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -11,6 +11,8 @@
 		"CARDS": "بطاقات",
 		"TABLE": "جدول",
 		"KANBAN": "كانبان",
+		"TEAMS": "فرق",
+		"COMBINE": "دمج",
 		"TOMORROW": "غدا",
 		"YESTERDAY": "أمس",
 		"INVITE": "دعوة",
@@ -93,6 +95,7 @@
 		"DESCRIPTION": "وصف",
 		"CHILD_ISSUE_TASK": "تحديد القضية الفرعية",
 		"CREATE_TEAM": "إنشاء فريق جديد",
+		"ALL_TEAMS": "جميع الفرق",
 		"VERIFY_ACCOUNT_MSG": "يرجى التحقق من حسابك قبل البدء في استخدام التطبيق",
 		"CREATE_ROLE": "إنشاء دور",
 		"CREATE": "إنشاء",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index a9eb65082..f15a00a01 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -12,6 +12,8 @@
 		"VERIFY": "провери",
 		"INVITE": "Покани",
 		"KANBAN": "Канбан",
+		"TEAMS": "Екипи",
+		"COMBINE": "Комбиниране",
 		"CARDS": "Карти",
 		"TABLE": "Таблица",
 		"INVITED": "Поканен",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Описание",
 		"CHILD_ISSUE_TASK": "Избери детски проблем",
 		"CREATE_TEAM": "Създаване на нов отбор",
+		"ALL_TEAMS": "Всички екипи",
 		"VERIFY_ACCOUNT_MSG": "Моля, потвърдете профила си, преди да започнете да използвате приложението",
 		"CREATE_ROLE": "Създаване на роля",
 		"CREATE": "Създаване",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index 3920c8d1b..b3d00d4df 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -10,6 +10,8 @@
 		"CARDS": "Karten",
 		"TABLE": "Tabelle",
 		"KANBAN": "Kanban",
+		"TEAMS": "Teams",
+		"COMBINE": "Kombinieren",
 		"YESTERDAY": "Gestern",
 		"REJECTED": "Abgelehnt",
 		"VERIFY": "Verifizieren",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Beschreibung",
 		"CHILD_ISSUE_TASK": "Untergeordnetes Ticket auswählen",
 		"CREATE_TEAM": "Neues Team erstellen",
+		"ALL_TEAMS": "Alle Teams",
 		"VERIFY_ACCOUNT_MSG": "Bitte verifizieren Sie Ihr Konto, bevor Sie die App nutzen",
 		"CREATE_ROLE": "Rolle erstellen",
 		"CREATE": "Erstellen",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 955d35e9d..0c4a99a67 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -13,6 +13,8 @@
 		"CARDS": "Cards",
 		"TABLE": "Table",
 		"KANBAN": "Kanban",
+		"TEAMS": "Teams",
+		"COMBINE": "Combine",
 		"INVITE": "Invite",
 		"INVITED": "Invited",
 		"EXPIRE": "Expire",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Description",
 		"CHILD_ISSUE_TASK": "Select Child Issue",
 		"CREATE_TEAM": "Create New Team",
+		"ALL_TEAMS": "All Teams",
 		"VERIFY_ACCOUNT_MSG": "Please Verify your account before start using the app",
 		"CREATE_ROLE": "Create Role",
 		"CREATE": "Create",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index a11845ac9..7c3770da4 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -13,6 +13,8 @@
 		"CARDS": "Tarjetas",
 		"TABLE": "Tabla",
 		"KANBAN": "Kanban",
+		"TEAMS": "Equipos",
+		"COMBINE": "Combinar",
 		"INVITE": "Invitar",
 		"INVITED": "Invitado",
 		"EXPIRE": "Expira",
@@ -94,6 +96,7 @@
 		"DESCRIPTION": "Descripción",
 		"CHILD_ISSUE_TASK": "Seleccionar problema secundario",
 		"CREATE_TEAM": "Crear nuevo equipo",
+		"ALL_TEAMS": "Todos los equipos",
 		"VERIFY_ACCOUNT_MSG": "Verifica tu cuenta antes de empezar a usar la aplicación",
 		"CREATE_ROLE": "Crear rol",
 		"CREATE": "Crear",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 575f3ab38..f3d2bef22 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -14,6 +14,8 @@
 		"CARDS": "Cartes",
 		"KANBAN": "Kanban",
 		"TABLE": "Tableau",
+		"TEAMS": "Équipes",
+		"COMBINE": "Combiné",
 		"INVITED": "Invité",
 		"EXPIRE": "Expirer",
 		"EXPIRED": "Expiré",
@@ -93,6 +95,7 @@
 		"DESCRIPTION": "Description",
 		"CHILD_ISSUE_TASK": "Sélectionner un problème enfant",
 		"CREATE_TEAM": "Créer une nouvelle équipe",
+		"ALL_TEAMS": "Toutes les équipes",
 		"VERIFY_ACCOUNT_MSG": "Veuillez vérifier votre compte avant de commencer à utiliser l'application",
 		"CREATE_ROLE": "Créer un rôle",
 		"CREATE": "Créer",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 482415d4e..d4297fb2c 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -12,6 +12,8 @@
 		"CARDS": "כרטיסים",
 		"KANBAN": "קאנבאן",
 		"TABLE": "טבלה",
+		"TEAMS": "קבוצות",
+		"COMBINE": "לשלב",
 		"VERIFY": "אמת",
 		"INVITE": "הזמן",
 		"INVITED": "הוזמן",
@@ -91,6 +93,7 @@
 		"DESCRIPTION": "תיאור",
 		"CHILD_ISSUE_TASK": "בחר בעיה ילדה",
 		"CREATE_TEAM": "צור צוות חדש",
+		"ALL_TEAMS": "כל הקבוצות",
 		"VERIFY_ACCOUNT_MSG": "אנא אמת את החשבון שלך לפני שתתחיל להשתמש באפליקציה",
 		"CREATE_ROLE": "צור תפקיד",
 		"CREATE": "צור",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 6a74c2a4e..49d89bf20 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -13,6 +13,8 @@
 		"CARDS": "Carte",
 		"KANBAN": "Kanban",
 		"TABLE": "Tabella",
+		"TEAMS": "Squadre",
+		"COMBINE": "Combinare",
 		"INVITE": "Invita",
 		"INVITED": "Invitato",
 		"EXPIRE": "Scade",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Descrizione",
 		"CHILD_ISSUE_TASK": "Seleziona Problema Figlio",
 		"CREATE_TEAM": "Crea Nuovo Team",
+		"ALL_TEAMS": "Tutti i team",
 		"VERIFY_ACCOUNT_MSG": "Verifica il tuo account prima di iniziare ad utilizzare l'app",
 		"CREATE_ROLE": "Crea Ruolo",
 		"CREATE": "Crea",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 379580428..0a6737d18 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -11,6 +11,8 @@
 		"CARDS": "Kaarten",
 		"TABLE": "Tafel",
 		"KANBAN": "Kanban",
+		"TEAMS": "Teams",
+		"COMBINE": "Combineren",
 		"REJECTED": "Afgewezen",
 		"VERIFY": "verifiëren",
 		"INVITE": "Uitnodigen",
@@ -93,6 +95,7 @@
 		"DESCRIPTION": "Beschrijving",
 		"CHILD_ISSUE_TASK": "Selecteer onderliggend probleem",
 		"CREATE_TEAM": "Nieuw team maken",
+		"ALL_TEAMS": "Alle teams",
 		"VERIFY_ACCOUNT_MSG": "Verifieer uw account voordat u de app gaat gebruiken",
 		"CREATE_ROLE": "Rol maken",
 		"CREATE": "Maken",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 2c338afe1..ce374a6fc 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -14,6 +14,8 @@
 		"CARDS": "Karty",
 		"KANBAN": "Kanban",
 		"TABLE": "Tabela",
+		"TEAMS": "Zespoły",
+		"COMBINE": "Łączyć",
 		"INVITED": "Zaproszony",
 		"EXPIRE": "Wygasa",
 		"EXPIRED": "Wygasło",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Opis",
 		"CHILD_ISSUE_TASK": "Wybierz zadanie podrzędne",
 		"CREATE_TEAM": "Utwórz nowy zespół",
+		"ALL_TEAMS": "Wszystkie zespoły",
 		"VERIFY_ACCOUNT_MSG": "Zweryfikuj swoje konto przed rozpoczęciem korzystania z aplikacji",
 		"CREATE_ROLE": "Utwórz rolę",
 		"CREATE": "Utwórz",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index fbf63bcfd..ae6f71e89 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -16,6 +16,8 @@
 		"CARDS": "Cartões",
 		"KANBAN": "Kanban",
 		"TABLE": "Tabela",
+		"TEAMS": "Equipes",
+		"COMBINE": "Combinar",
 		"EXPIRED": "Expirado",
 		"REQUEST": "Solicitar",
 		"REQUESTED": "Solicitado",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Descrição",
 		"CHILD_ISSUE_TASK": "Selecionar Problema Filho",
 		"CREATE_TEAM": "Criar Nova Equipe",
+		"ALL_TEAMS": "Todos os times",
 		"VERIFY_ACCOUNT_MSG": "Por favor, verifique sua conta antes de começar a usar o aplicativo",
 		"CREATE_ROLE": "Criar Função",
 		"CREATE": "Criar",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 060ea4d32..da861c74b 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -14,6 +14,8 @@
 		"CARDS": "Карты",
 		"TABLE": "Таблица",
 		"KANBAN": "Канбан",
+		"TEAMS": "Команды",
+		"COMBINE": "Объединить",
 		"INVITED": "Приглашено",
 		"EXPIRE": "Истекает",
 		"EXPIRED": "Истекло",
@@ -92,6 +94,7 @@
 		"DESCRIPTION": "Описание",
 		"CHILD_ISSUE_TASK": "Выбрать дочерний вопрос",
 		"CREATE_TEAM": "Создать новую команду",
+		"ALL_TEAMS": "Все команды",
 		"VERIFY_ACCOUNT_MSG": "Пожалуйста, подтвердите свою учетную запись перед началом использования приложения",
 		"CREATE_ROLE": "Создать роль",
 		"CREATE": "Создать",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index d9d68c603..b114c82f9 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -12,6 +12,8 @@
 		"CARDS": "卡片",
 		"TABLE": "表格",
 		"KANBAN": "看板",
+		"TEAMS": "团队",
+		"COMBINE": "组合",
 		"VERIFY": "验证",
 		"INVITE": "邀请",
 		"INVITED": "已邀请",
@@ -93,6 +95,7 @@
 		"DESCRIPTION": "描述",
 		"CHILD_ISSUE_TASK": "选择子议题",
 		"CREATE_TEAM": "创建新团队",
+		"ALL_TEAMS": "所有团队",
 		"VERIFY_ACCOUNT_MSG": "使用应用前请先验证您的账户",
 		"CREATE_ROLE": "创建角色",
 		"CREATE": "创建",

From b3ed4d05a155c29d7c61184480808f310ba64a77 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 12 Jul 2024 18:41:27 +0200
Subject: [PATCH 7/8] chore(deps): bump fast-loops from 1.1.3 to 1.1.4 in
 /apps/mobile (#2707)

Bumps [fast-loops](https://github.com/robinweser/fast-loops) from 1.1.3 to 1.1.4.
- [Commits](https://github.com/robinweser/fast-loops/commits)

---
updated-dependencies:
- dependency-name: fast-loops
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apps/mobile/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/yarn.lock b/apps/mobile/yarn.lock
index 59df746a7..03cbdb298 100644
--- a/apps/mobile/yarn.lock
+++ b/apps/mobile/yarn.lock
@@ -6910,9 +6910,9 @@ fast-levenshtein@^2.0.6:
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fast-loops@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
-  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.4.tgz#61bc77d518c0af5073a638c6d9d5c7683f069ce2"
+  integrity sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg==
 
 fast-xml-parser@^4.0.12:
   version "4.3.2"

From 4be0660ec8e8d3688e6e387c2cb49d96a351ca1f Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Sat, 13 Jul 2024 11:51:32 +0200
Subject: [PATCH 8/8] [Feat] Daily plan | delete (#2700)

* fix/dailyplan/deleteplan

* fix: dailyplan deleteplan

* fix: Typos & errors

* fix: cspell Error

* fix: daily plan delete  today and future task

---------

Co-authored-by: Cedric Karungu <ckarungu921@gmail.com>
---
 apps/web/lib/components/alert-popup.tsx       | 40 ++++++++++++
 apps/web/lib/components/index.ts              |  1 +
 .../features/task/daily-plan/future-tasks.tsx | 46 +++++++++++---
 .../task/daily-plan/outstanding-date.tsx      |  4 +-
 .../features/task/daily-plan/outstanding.tsx  |  6 +-
 apps/web/lib/features/user-profile-plans.tsx  | 61 +++++++++++++------
 apps/web/lib/features/user-profile-tasks.tsx  | 18 +++---
 7 files changed, 133 insertions(+), 43 deletions(-)
 create mode 100644 apps/web/lib/components/alert-popup.tsx

diff --git a/apps/web/lib/components/alert-popup.tsx b/apps/web/lib/components/alert-popup.tsx
new file mode 100644
index 000000000..73442f787
--- /dev/null
+++ b/apps/web/lib/components/alert-popup.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@components/ui/popover"
+
+
+interface IConfirmPopup {
+    buttonOpen: any,
+    open: boolean
+}
+/**
+ *
+ *
+ * @export
+ * @param {React.PropsWithChildren<IConfirmPopup>} { children, buttonOpen, open }
+ * @return {*}
+ */
+export function AlertPopup({ children, buttonOpen, open }: React.PropsWithChildren<IConfirmPopup>) {
+    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>
+    )
+}
diff --git a/apps/web/lib/components/index.ts b/apps/web/lib/components/index.ts
index f5f1215e6..90dfd5b2b 100644
--- a/apps/web/lib/components/index.ts
+++ b/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'
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 303aeedbe..5cb66f6bf 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
@@ -5,10 +5,13 @@ import { TaskCard } from '../task-card';
 import { Button } from '@components/ui/button';
 import { useCanSeeActivityScreen, useDailyPlan } from '@app/hooks';
 import { ReloadIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import { AlertPopup } from 'lib/components';
 
 export function FutureTasks({ profile }: { profile: any }) {
 	const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan();
 	const canSeeActivity = useCanSeeActivityScreen();
+	const [popupOpen, setPopupOpen] = useState(false)
 
 	return (
 		<div className="flex flex-col gap-6">
@@ -55,17 +58,40 @@ export function FutureTasks({ profile }: { profile: any }) {
 								{/* Delete Plan */}
 								{canSeeActivity ? (
 									<div className="flex justify-end">
-										<Button
-											disabled={deleteDailyPlanLoading}
-											onClick={() => deleteDailyPlan(plan.id ?? '')}
-											variant="destructive"
-											className="p-7 py-6 font-normal rounded-xl text-md"
+										<AlertPopup
+											open={popupOpen}
+											buttonOpen={
+												//button open popup
+												<Button
+													onClick={() => setPopupOpen(true)}
+													variant="outline"
+													className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+												>
+													Delete this plan
+												</Button>
+											}
 										>
-											{deleteDailyPlanLoading && (
-												<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
-											)}
-											Delete this plan
-										</Button>
+											{/*button confirm*/}
+											<Button
+												disabled={deleteDailyPlanLoading}
+												onClick={() => deleteDailyPlan(plan.id ?? '')}
+												variant="destructive"
+												className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
+											>
+												{deleteDailyPlanLoading && (
+													<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+												)}
+												Delete
+											</Button>
+											{/*button cancel*/}
+											<Button
+												onClick={() => setPopupOpen(false)}
+												variant="outline"
+												className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+											>
+												Cancel
+											</Button>
+										</AlertPopup>
 									</div>
 								) : (
 									<></>
diff --git a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
index ce94aeb5b..8ff8e07fd 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
@@ -4,10 +4,10 @@ import { EmptyPlans, PlanHeader } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
 import { useDailyPlan } from '@app/hooks';
 
-interface IOutstandingFieltreDate {
+interface IOutstandingFilterDate {
 	profile: any
 }
-export function OutstandingFieltreDate({ profile }: IOutstandingFieltreDate) {
+export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 	const { outstandingPlans } = useDailyPlan();
 	return (
 		<div className="flex flex-col gap-6">
diff --git a/apps/web/lib/features/task/daily-plan/outstanding.tsx b/apps/web/lib/features/task/daily-plan/outstanding.tsx
index b1b441281..61c3a6898 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding.tsx
@@ -1,6 +1,6 @@
 interface IOutstanding {
-	filtre?: any;
+	filter?: any;
 }
-export function Outstanding({ filtre }: IOutstanding) {
-	return (<>{filtre}</>);
+export function Outstanding({ filter }: IOutstanding) {
+	return (<>{filter}</>);
 }
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index b7c799b7d..f8063b8c4 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { useCanSeeActivityScreen, useDailyPlan, useUserProfilePage } from '@app/hooks';
 import { TaskCard } from './task/task-card';
 import { IDailyPlan } from '@app/interfaces';
-import { Container, NoData, ProgressBar, VerticalSeparator } from 'lib/components';
+import { AlertPopup, Container, NoData, ProgressBar, VerticalSeparator } from 'lib/components';
 import { clsxm } from '@app/utils';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
@@ -13,14 +13,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { formatDayPlanDate, formatIntegerToHour } from '@app/helpers';
 import { EditPenBoxIcon, CheckCircleTickIcon as TickSaveIcon } from 'assets/svg';
 import { ReaderIcon, ReloadIcon } from '@radix-ui/react-icons';
-import { OutstandingAll, PastTasks, Outstanding, OutstandingFieltreDate } from './task/daily-plan';
+import { OutstandingAll, PastTasks, Outstanding, OutstandingFilterDate } from './task/daily-plan';
 import { FutureTasks } from './task/daily-plan/future-tasks';
 import { Button } from '@components/ui/button';
 import { IoCalendarOutline } from "react-icons/io5";
 
 
 type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
-type FiltreOutstanding = 'ALL' | 'DATE';
+type FilterOutstanding = 'ALL' | 'DATE';
 
 export function UserProfilePlans() {
 	const defaultTab =
@@ -28,26 +28,26 @@ export function UserProfilePlans() {
 			? (window.localStorage.getItem('daily-plan-tab') as FilterTabs) || null
 			: 'Today Tasks';
 
-	const defaultOutstanding = typeof window !== 'undefined' ? (window.localStorage.getItem('outstanding') as FiltreOutstanding) || null : 'ALL';
+	const defaultOutstanding = typeof window !== 'undefined' ? (window.localStorage.getItem('outstanding') as FilterOutstanding) || null : 'ALL';
 
 	const profile = useUserProfilePage();
 	const { todayPlan, futurePlans, pastPlans, outstandingPlans, sortedPlans, profileDailyPlans } = useDailyPlan();
 	const fullWidth = useRecoilValue(fullWidthState);
 
 	const [currentTab, setCurrentTab] = useState<FilterTabs>(defaultTab || 'Today Tasks');
-	const [currentOutstanding, setCurrentOutstanding] = useState<FiltreOutstanding>(defaultOutstanding || 'ALL');
+	const [currentOutstanding, setCurrentOutstanding] = useState<FilterOutstanding>(defaultOutstanding || 'ALL');
 
 
 	const screenOutstanding = {
 		'ALL': <OutstandingAll profile={profile} />,
-		"DATE": <OutstandingFieltreDate profile={profile} />
+		"DATE": <OutstandingFilterDate profile={profile} />
 	}
 	const tabsScreens = {
 		'Today Tasks': <AllPlans profile={profile} currentTab={currentTab} />,
 		'Future Tasks': <FutureTasks profile={profile} />,
 		'Past Tasks': <PastTasks profile={profile} />,
 		'All Tasks': <AllPlans profile={profile} />,
-		Outstanding: <Outstanding filtre={screenOutstanding[currentOutstanding]} />
+		Outstanding: <Outstanding filter={screenOutstanding[currentOutstanding]} />
 	};
 
 
@@ -98,7 +98,7 @@ export function UserProfilePlans() {
 								</div>
 								{currentTab === 'Outstanding' && (
 									<Select onValueChange={(value) => {
-										setCurrentOutstanding(value as FiltreOutstanding)
+										setCurrentOutstanding(value as FilterOutstanding)
 									}}>
 										<SelectTrigger className="w-[120px] h-9">
 											<SelectValue placeholder="Filter" />
@@ -131,6 +131,7 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 	// Filter plans
 	let filteredPlans: IDailyPlan[] = [];
 	const { deleteDailyPlan, deleteDailyPlanLoading, sortedPlans, todayPlan } = useDailyPlan();
+	const [popupOpen, setPopupOpen] = useState(false)
 
 	filteredPlans = sortedPlans;
 	if (currentTab === 'Today Tasks') filteredPlans = todayPlan;
@@ -188,17 +189,41 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 									<>
 										{canSeeActivity ? (
 											<div className="flex justify-end">
-												<Button
-													disabled={deleteDailyPlanLoading}
-													onClick={() => deleteDailyPlan(plan.id ?? '')}
-													variant="destructive"
-													className="p-7 py-6 font-normal rounded-xl text-md"
+												<AlertPopup
+													open={popupOpen}
+													buttonOpen={
+														//button open popup
+														<Button
+															onClick={() => setPopupOpen(true)}
+															variant="outline"
+															className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+														>
+															Delete this plan
+														</Button>
+													}
 												>
-													{deleteDailyPlanLoading && (
-														<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
-													)}
-													Delete this plan
-												</Button>
+													{/*button confirm*/}
+													<Button
+														disabled={deleteDailyPlanLoading}
+														onClick={() => deleteDailyPlan(plan.id ?? '')}
+														variant="destructive"
+														className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
+													>
+														{deleteDailyPlanLoading && (
+															<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+														)}
+														Delete
+													</Button>
+													{/*button cancel*/}
+													<Button
+														onClick={() => setPopupOpen(false)}
+														variant="outline"
+														className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+													>
+														Cancel
+													</Button>
+												</AlertPopup>
+
 											</div>
 										) : (
 											<></>
diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx
index 027b545fa..2de5c3a7a 100644
--- a/apps/web/lib/features/user-profile-tasks.tsx
+++ b/apps/web/lib/features/user-profile-tasks.tsx
@@ -63,11 +63,10 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 						isAuthUser={profile.isAuthUser}
 						activeAuthTask={true}
 						profile={profile}
-						taskBadgeClassName={`	${
-							profile.activeUserTeamTask?.issueType === 'Bug'
-								? '!px-[0.3312rem] py-[0.2875rem]'
-								: '!px-[0.375rem] py-[0.375rem]'
-						} rounded-sm`}
+						taskBadgeClassName={`	${profile.activeUserTeamTask?.issueType === 'Bug'
+							? '!px-[0.3312rem] py-[0.2875rem]'
+							: '!px-[0.375rem] py-[0.375rem]'
+							} rounded-sm`}
 						taskTitleClassName="mt-[0.0625rem]"
 					/>
 				)}
@@ -94,11 +93,10 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 									activeAuthTask={false}
 									viewType={tabFiltered.tab === 'unassigned' ? 'unassign' : 'default'}
 									profile={profile}
-									taskBadgeClassName={`${
-										task.issueType === 'Bug'
-											? '!px-[0.3312rem] py-[0.2875rem]'
-											: '!px-[0.375rem] py-[0.375rem]'
-									} rounded-sm`}
+									taskBadgeClassName={`${task.issueType === 'Bug'
+										? '!px-[0.3312rem] py-[0.2875rem]'
+										: '!px-[0.375rem] py-[0.375rem]'
+										} rounded-sm`}
 									taskTitleClassName="mt-[0.0625rem]"
 								/>
 							</li>