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 01/10] 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 02/10] 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 03/10] 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 04/10] 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 05/10] 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 06/10] [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 07/10] 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 08/10] [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>

From 0f851f834803e233682bde93f5a812508e60e504 Mon Sep 17 00:00:00 2001
From: "Gloire Mutaliko (Salva)"
 <86450367+GloireMutaliko21@users.noreply.github.com>
Date: Sat, 13 Jul 2024 17:39:41 +0200
Subject: [PATCH 09/10] [Improvement] How to add task to 'Daily Plan' (#2718)

* refact: create daily plan not require plannedTime popup

* fix: loading state and some daily plan translations
---
 apps/web/lib/features/task/task-card.tsx | 71 +++++++++++++++++++++---
 apps/web/locales/ar.json                 |  7 +++
 apps/web/locales/bg.json                 |  7 +++
 apps/web/locales/de.json                 |  7 +++
 apps/web/locales/en.json                 |  7 +++
 apps/web/locales/es.json                 |  7 +++
 apps/web/locales/fr.json                 |  7 +++
 apps/web/locales/he.json                 |  7 +++
 apps/web/locales/it.json                 |  7 +++
 apps/web/locales/nl.json                 |  7 +++
 apps/web/locales/pl.json                 |  7 +++
 apps/web/locales/pt.json                 |  7 +++
 apps/web/locales/ru.json                 |  7 +++
 apps/web/locales/zh.json                 |  7 +++
 14 files changed, 154 insertions(+), 8 deletions(-)

diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 0f093fce5..192c035fd 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { secondsToTime } from '@app/helpers';
+import { secondsToTime, tomorrowDate } from '@app/helpers';
 import {
 	I_TeamMemberCardHook,
 	I_UserProfilePage,
+	useAuthenticateUser,
 	useCanSeeActivityScreen,
 	useDailyPlan,
 	useModal,
@@ -17,6 +18,7 @@ import {
 } from '@app/hooks';
 import ImageComponent, { ImageOverlapperProps } from 'lib/components/image-overlapper';
 import {
+	DailyPlanStatusEnum,
 	IClassName,
 	IDailyPlan,
 	IDailyPlanMode,
@@ -39,7 +41,7 @@ import {
 } from 'lib/components';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useTransition } from 'react';
 import { SetterOrUpdater, useRecoilValue } from 'recoil';
 import { TaskEstimateInfo } from '../team/user-team-card/task-estimate';
 import { TimerButton } from '../timer/timer-button';
@@ -53,6 +55,7 @@ import { SixSquareGridIcon, ThreeCircleOutlineVerticalIcon } from 'assets/svg';
 import { CreateDailyPlanFormModal } from '../daily-plan/create-daily-plan-form-modal';
 import { AddTaskToPlan } from '../daily-plan/add-task-to-plan';
 import { AddWorkTimeAndEstimatesToPlan } from '../daily-plan/plans-work-time-and-estimate';
+import { ReloadIcon } from '@radix-ui/react-icons';
 
 type Props = {
 	active?: boolean;
@@ -632,7 +635,41 @@ export function PlanTask({
 	employeeId?: string;
 	chooseMember?: boolean;
 }) {
+	const t = useTranslations();
+	const [isPending, startTransition] = useTransition();
 	const { closeModal, isOpen, openModal } = useModal();
+	const { createDailyPlan } = useDailyPlan();
+	const { user } = useAuthenticateUser();
+
+	const handleOpenModal = () => {
+		if (planMode === 'custom') {
+			openModal();
+		} else if (planMode === 'today') {
+			startTransition(() => {
+				createDailyPlan({
+					workTimePlanned: 0,
+					taskId,
+					date: new Date(),
+					status: DailyPlanStatusEnum.OPEN,
+					tenantId: user?.tenantId ?? '',
+					employeeId: employeeId,
+					organizationId: user?.employee.organizationId
+				});
+			});
+		} else {
+			startTransition(() => {
+				createDailyPlan({
+					workTimePlanned: 0,
+					taskId,
+					date: tomorrowDate,
+					status: DailyPlanStatusEnum.OPEN,
+					tenantId: user?.tenantId ?? '',
+					employeeId: employeeId,
+					organizationId: user?.employee.organizationId
+				});
+			});
+		}
+	};
 
 	return (
 		<>
@@ -641,7 +678,7 @@ export function PlanTask({
 					'font-normal whitespace-nowrap transition-all',
 					'hover:font-semibold hover:transition-all cursor-pointer'
 				)}
-				onClick={openModal}
+				onClick={handleOpenModal}
 			>
 				<CreateDailyPlanFormModal
 					open={isOpen}
@@ -651,15 +688,32 @@ export function PlanTask({
 					employeeId={employeeId}
 					chooseMember={chooseMember}
 				/>
-				{planMode === 'today' && 'Plan for today'}
-				{planMode === 'tomorow' && 'Plan for tomorow'}
-				{planMode === 'custom' && 'Plan for some day'}
+				{planMode === 'today' && (
+					<span>
+						{isPending ? (
+							<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+						) : (
+							t('dailyPlan.PLAN_FOR_TODAY')
+						)}
+					</span>
+				)}
+				{planMode === 'tomorow' && (
+					<span>
+						{isPending ? (
+							<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
+						) : (
+							t('dailyPlan.PLAN_FOR_TOMORROW')
+						)}
+					</span>
+				)}
+				{planMode === 'custom' && t('dailyPlan.PLAN_FOR_SOME_DAY')}
 			</span>
 		</>
 	);
 }
 
 export function AddTaskToPlanComponent({ task, employee }: { task: ITeamTask; employee?: OT_Member }) {
+	const t = useTranslations();
 	const { closeModal, isOpen, openModal } = useModal();
 	return (
 		<span
@@ -670,12 +724,13 @@ export function AddTaskToPlanComponent({ task, employee }: { task: ITeamTask; em
 			onClick={openModal}
 		>
 			<AddTaskToPlan closeModal={closeModal} open={isOpen} task={task} employee={employee} />
-			Add this task to a plan
+			{t('dailyPlan.ADD_TASK_TO_PLAN')}
 		</span>
 	);
 }
 
 export function RemoveTaskFromPlan({ task, plan, member }: { task: ITeamTask; member?: OT_Member; plan?: IDailyPlan }) {
+	const t = useTranslations();
 	const { removeTaskFromPlan } = useDailyPlan();
 	const data: IDailyPlanTasksUpdate = { taskId: task.id, employeeId: member?.employeeId };
 	const onClick = () => {
@@ -689,7 +744,7 @@ export function RemoveTaskFromPlan({ task, plan, member }: { task: ITeamTask; me
 			)}
 			onClick={onClick}
 		>
-			Remove from this plan
+			{t('dailyPlan.REMOVE_FROM_THIS_PLAN')}
 		</span>
 	);
 }
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 275746bf7..17e85f377 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "يرجى تأكيد رغبتك في إغلاق المهمة"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "خطة اليوم",
+		"PLAN_FOR_TOMORROW": "خطة الغد",
+		"PLAN_FOR_SOME_DAY": "خطة ليوم ما",
+		"ADD_TASK_TO_PLAN": "أضف هذه المهمة إلى الخطة",
+		"REMOVE_FROM_THIS_PLAN": "إزالة من هذه الخطة"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "أدخل اسمك",
 		"FIRST_NAME_PLACEHOLDER": "الاسم الأول",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index f15a00a01..3b43adbba 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Моля, потвърдете ако искате да затворите задачата"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "План за днес",
+		"PLAN_FOR_TOMORROW": "План за утре",
+		"PLAN_FOR_SOME_DAY": "План за някой ден",
+		"ADD_TASK_TO_PLAN": "Добави тази задача към плана",
+		"REMOVE_FROM_THIS_PLAN": "Премахни от този план"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Въведете името си",
 		"FIRST_NAME_PLACEHOLDER": "Собствено име",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index b3d00d4df..1ce0d9d1e 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Bitte bestätigen Sie, ob Sie die Aufgabe schließen möchten"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plan für heute",
+		"PLAN_FOR_TOMORROW": "Plan für morgen",
+		"PLAN_FOR_SOME_DAY": "Plan für irgendeinen Tag",
+		"ADD_TASK_TO_PLAN": "Diese Aufgabe zum Plan hinzufügen",
+		"REMOVE_FROM_THIS_PLAN": "Aus diesem Plan entfernen"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Ihren Namen eingeben",
 		"FIRST_NAME_PLACEHOLDER": "Vorname",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 0c4a99a67..1dc28e54d 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Please confirm if you want to close the task"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plan for today",
+		"PLAN_FOR_TOMORROW": "Plan for tomorrow",
+		"PLAN_FOR_SOME_DAY": "Plan for some day",
+		"ADD_TASK_TO_PLAN": "Add this task to a plan",
+		"REMOVE_FROM_THIS_PLAN": "Remove from this plan"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Enter your name",
 		"FIRST_NAME_PLACEHOLDER": "First Name",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 7c3770da4..257403ef4 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Por favor, confirma si deseas cerrar la tarea"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plan para hoy",
+		"PLAN_FOR_TOMORROW": "Plan para mañana",
+		"PLAN_FOR_SOME_DAY": "Plan para algún día",
+		"ADD_TASK_TO_PLAN": "Agregar esta tarea a un plan",
+		"REMOVE_FROM_THIS_PLAN": "Eliminar de este plan"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Ingresa tu nombre",
 		"FIRST_NAME_PLACEHOLDER": "Nombre",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index f3d2bef22..27c226ab1 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Veuillez confirmer si vous voulez fermer la tâche"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plan pour aujourd'hui",
+		"PLAN_FOR_TOMORROW": "Plan pour demain",
+		"PLAN_FOR_SOME_DAY": "Plan pour une date",
+		"ADD_TASK_TO_PLAN": "Ajouter cette tâche au plan",
+		"REMOVE_FROM_THIS_PLAN": "Retirer de ce plan"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Entrez votre nom",
 		"FIRST_NAME_PLACEHOLDER": "Prénom",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index d4297fb2c..17de57399 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "אנא אשר אם ברצונך לסגור את המשימה"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "תוכנית להיום",
+		"PLAN_FOR_TOMORROW": "תוכנית למחר",
+		"PLAN_FOR_SOME_DAY": "תוכנית ליום כלשהו",
+		"ADD_TASK_TO_PLAN": "הוסף משימה זו לתוכנית",
+		"REMOVE_FROM_THIS_PLAN": "הסר מתוכנית זו"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "הכנס את השם שלך",
 		"FIRST_NAME_PLACEHOLDER": "שם פרטי",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 49d89bf20..93262916f 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Conferma se desideri chiudere il compito"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Piano per oggi",
+		"PLAN_FOR_TOMORROW": "Piano per domani",
+		"PLAN_FOR_SOME_DAY": "Piano per un giorno",
+		"ADD_TASK_TO_PLAN": "Aggiungi questa attività al piano",
+		"REMOVE_FROM_THIS_PLAN": "Rimuovi da questo piano"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Inserisci il tuo nome",
 		"FIRST_NAME_PLACEHOLDER": "Nome",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 0a6737d18..fad47a7c3 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Bevestig als u de taak wilt sluiten"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plan voor vandaag",
+		"PLAN_FOR_TOMORROW": "Plan voor morgen",
+		"PLAN_FOR_SOME_DAY": "Plan voor een dag",
+		"ADD_TASK_TO_PLAN": "Voeg deze taak toe aan een plan",
+		"REMOVE_FROM_THIS_PLAN": "Verwijder uit dit plan"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Voer uw naam in",
 		"FIRST_NAME_PLACEHOLDER": "Voornaam",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index ce374a6fc..1ec6b4080 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Potwierdź, czy chcesz zamknąć zadanie"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plan na dzisiaj",
+		"PLAN_FOR_TOMORROW": "Plan na jutro",
+		"PLAN_FOR_SOME_DAY": "Plan na pewien dzień",
+		"ADD_TASK_TO_PLAN": "Dodaj tę zadanie do planu",
+		"REMOVE_FROM_THIS_PLAN": "Usuń z tego planu"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Wprowadź swoje imię",
 		"FIRST_NAME_PLACEHOLDER": "Imię",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index ae6f71e89..fef612fbe 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Por favor, confirme se deseja fechar a tarefa"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "Plano para hoje",
+		"PLAN_FOR_TOMORROW": "Plano para amanhã",
+		"PLAN_FOR_SOME_DAY": "Plano para algum dia",
+		"ADD_TASK_TO_PLAN": "Adicionar esta tarefa ao plano",
+		"REMOVE_FROM_THIS_PLAN": "Remover deste plano"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Digite seu nome",
 		"FIRST_NAME_PLACEHOLDER": "Primeiro Nome",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index da861c74b..51c727994 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "Пожалуйста, подтвердите, что вы хотите закрыть задачу"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "План на сегодня",
+		"PLAN_FOR_TOMORROW": "План на завтра",
+		"PLAN_FOR_SOME_DAY": "План на какой-то день",
+		"ADD_TASK_TO_PLAN": "Добавить эту задачу в план",
+		"REMOVE_FROM_THIS_PLAN": "Убрать из этого плана"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "Введите ваше имя",
 		"FIRST_NAME_PLACEHOLDER": "Имя",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index b114c82f9..64d4ea750 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -572,6 +572,13 @@
 		},
 		"CONFIRM_CLOSE_TASK": "请确认您是否要关闭此任务"
 	},
+	"dailyPlan": {
+		"PLAN_FOR_TODAY": "今日计划",
+		"PLAN_FOR_TOMORROW": "明日计划",
+		"PLAN_FOR_SOME_DAY": "未来计划",
+		"ADD_TASK_TO_PLAN": "添加此任务到计划",
+		"REMOVE_FROM_THIS_PLAN": "从计划中移除"
+	},
 	"form": {
 		"NAME_PLACEHOLDER": "输入您的姓名",
 		"FIRST_NAME_PLACEHOLDER": "名",

From d77cf390d9b34641b9dd47c42987bcad3db260dd Mon Sep 17 00:00:00 2001
From: "Gloire Mutaliko (Salva)"
 <86450367+GloireMutaliko21@users.noreply.github.com>
Date: Sat, 13 Jul 2024 17:39:50 +0200
Subject: [PATCH 10/10] [Feature] 'Plan's' views UI (#2721)

* feat: render daily plan view tabs

* feat: daily plan colum and tile view

* style: outstanding input filter

* fix: typos, components naming etc

* fix: typos, components naming etc
---
 apps/web/app/stores/header-tabs.ts            |   5 +
 apps/web/lib/components/image-overlapper.tsx  | 119 +++++++-------
 apps/web/lib/components/kanban-card.tsx       |   4 +-
 .../features/task/daily-plan/future-tasks.tsx |  63 ++++---
 .../task/daily-plan/outstanding-all.tsx       |  99 ++++++-----
 .../task/daily-plan/outstanding-date.tsx      |  60 ++++---
 .../features/task/daily-plan/past-tasks.tsx   |  57 +++++--
 .../task/daily-plan/task-estimated-count.tsx  |  68 ++++----
 .../task/daily-plan/views-header-tabs.tsx     |  47 ++++++
 .../web/lib/features/task/task-block-card.tsx | 155 ++++++++++++++++++
 apps/web/lib/features/user-profile-plans.tsx  | 131 ++++++++-------
 11 files changed, 555 insertions(+), 253 deletions(-)
 create mode 100644 apps/web/lib/features/task/daily-plan/views-header-tabs.tsx
 create mode 100644 apps/web/lib/features/task/task-block-card.tsx

diff --git a/apps/web/app/stores/header-tabs.ts b/apps/web/app/stores/header-tabs.ts
index 3b5d13f08..b5bfd189d 100644
--- a/apps/web/app/stores/header-tabs.ts
+++ b/apps/web/app/stores/header-tabs.ts
@@ -10,3 +10,8 @@ export const allTeamsHeaderTabs = atom<IssuesView>({
 	key: 'allTeamsHeaderTabs',
 	default: IssuesView.CARDS
 });
+
+export const dailyPlanViewHeaderTabs = atom<IssuesView>({
+	key: 'dailyPlanViewHeaderTabs',
+	default: IssuesView.CARDS
+});
diff --git a/apps/web/lib/components/image-overlapper.tsx b/apps/web/lib/components/image-overlapper.tsx
index ddd510b97..7f5223b7b 100644
--- a/apps/web/lib/components/image-overlapper.tsx
+++ b/apps/web/lib/components/image-overlapper.tsx
@@ -6,7 +6,7 @@ import { ITeamTask, ITimerStatus } from '@app/interfaces';
 import Skeleton from 'react-loading-skeleton';
 import { Tooltip } from './tooltip';
 import { ScrollArea } from '@components/ui/scroll-bar';
-import { RiUserFill, RiUserAddFill } from "react-icons/ri";
+import { RiUserFill, RiUserAddFill } from 'react-icons/ri';
 import { useModal } from '@app/hooks';
 import { Modal, Divider } from 'lib/components';
 import { useOrganizationTeams } from '@app/hooks';
@@ -14,7 +14,7 @@ import { useTranslations } from 'next-intl';
 import { TaskAssignButton } from '../../lib/features/task/task-assign-button';
 import { clsxm } from '@app/utils';
 import { TaskAvatars } from 'lib/features';
-import { FaCheck } from "react-icons/fa6";
+import { FaCheck } from 'react-icons/fa6';
 import TeamMember from 'lib/components/team-member';
 import { IEmployee } from '@app/interfaces';
 
@@ -42,7 +42,7 @@ export default function ImageOverlapper({
 	arrowData = null,
 	hasActiveMembers = false,
 	assignTaskButtonCall = false,
-	hasInfo = '',
+	hasInfo = ''
 }: {
 	images: ImageOverlapperProps[];
 	radius?: number;
@@ -56,11 +56,11 @@ export default function ImageOverlapper({
 	hasInfo?: string;
 }) {
 	// Split the array into two arrays based on the display number
-	const firstArray = images.slice(0, displayImageCount);
-	const widthCalculate = images.slice(0, 5);
-	const secondArray = images.slice(displayImageCount);
-	const isMoreThanDisplay = images.length > displayImageCount;
-	const imageLength = images.length;
+	const firstArray = images?.slice(0, displayImageCount);
+	const widthCalculate = images?.slice(0, 5);
+	const secondArray = images?.slice(displayImageCount);
+	const isMoreThanDisplay = images?.length > displayImageCount;
+	const imageLength = images?.length;
 	const { isOpen, openModal, closeModal } = useModal();
 	const { activeTeam } = useOrganizationTeams();
 	const allMembers = activeTeam?.members || [];
@@ -82,13 +82,12 @@ export default function ImageOverlapper({
 			const updatedUnassign = unassignedMembers.filter((el: IEmployee) => el.id != member.id);
 			setUnassignedMembers(updatedUnassign);
 		}
-
-	}
+	};
 
 	const onCLickValidate = () => {
 		setValidate(!validate);
 		closeModal();
-	}
+	};
 
 	const hasMembers = item?.members?.length > 0;
 	const membersList = { assignedMembers, unassignedMembers };
@@ -100,59 +99,56 @@ export default function ImageOverlapper({
 	if ((!hasMembers && item) || hasActiveMembers || assignTaskButtonCall) {
 		return (
 			<div className="relative">
-				{hasInfo.length > 0 && showInfo &&
-					(<div className="flex w-[200px] justify-center items-center rounded-[3px] text-[12px] absolute left-[-80px] top-[-45px]">
+				{hasInfo.length > 0 && showInfo && (
+					<div className="flex w-[200px] justify-center items-center rounded-[3px] text-[12px] absolute left-[-80px] top-[-45px]">
 						<div className="relative bg-black text-white rounded-[3px]">
 							<span className="text-center p-[6px] z-10">{hasInfo}</span>
 							<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0 border-t-[10px] border-t-black border-r-[10px] border-r-transparent border-l-[10px] border-l-transparent"></div>
 						</div>
 					</div>
-					)}
-				{
-					iconType ? (
-						<TaskAssignButton
-							onClick={openModal}
-							disabled={arrowData?.activeTaskStatus ? arrowData?.disabled : arrowData?.task.status === 'closed'}
-							className={clsxm('h-9 w-9', arrowData?.className)}
-							iconClassName={arrowData?.iconClassName}
-						/>
-
-					) : (
-						<>
-							{
-								!hasMembers ?
-									(
-										<div
-											className="flex items-center justify-center rounded-full border-2 border-dashed border-[#6b7280] cursor-pointer"
-											style={{ width: diameter, height: diameter }}>
-											<RiUserFill
-												fill={"#6b7280"}
-												className="w-6 h-6 cursor-pointer  stroke-[#c46060]"
-												onClick={openModal}
-												style={{ width: diameter / 2, height: diameter / 2 }}
-												onMouseOver={() => setShowInfo(true)}
-												onMouseOut={() => setShowInfo(false)}
-											/>
-										</div>
-									)
-									:
-									(
-										<div className="flex items-center justify-center rounded-full border-2 border-dashed border-[#6b7280] cursor-pointer"
-											style={{ width: diameter, height: diameter }}>
-											<RiUserAddFill
-												fill={"#6b7280"}
-												className="w-6 h-6 cursor-pointer  stroke-[#c46060]"
-												onClick={openModal}
-												style={{ width: diameter / 2, height: diameter / 2 }}
-												onMouseOver={() => setShowInfo(true)}
-												onMouseOut={() => setShowInfo(false)}
-											/>
-										</div>
-									)
-							}
-
-						</>)
-				}
+				)}
+				{iconType ? (
+					<TaskAssignButton
+						onClick={openModal}
+						disabled={
+							arrowData?.activeTaskStatus ? arrowData?.disabled : arrowData?.task.status === 'closed'
+						}
+						className={clsxm('h-9 w-9', arrowData?.className)}
+						iconClassName={arrowData?.iconClassName}
+					/>
+				) : (
+					<>
+						{!hasMembers ? (
+							<div
+								className="flex items-center justify-center rounded-full border-2 border-dashed border-[#6b7280] cursor-pointer"
+								style={{ width: diameter, height: diameter }}
+							>
+								<RiUserFill
+									fill={'#6b7280'}
+									className="w-6 h-6 cursor-pointer  stroke-[#c46060]"
+									onClick={openModal}
+									style={{ width: diameter / 2, height: diameter / 2 }}
+									onMouseOver={() => setShowInfo(true)}
+									onMouseOut={() => setShowInfo(false)}
+								/>
+							</div>
+						) : (
+							<div
+								className="flex items-center justify-center rounded-full border-2 border-dashed border-[#6b7280] cursor-pointer"
+								style={{ width: diameter, height: diameter }}
+							>
+								<RiUserAddFill
+									fill={'#6b7280'}
+									className="w-6 h-6 cursor-pointer  stroke-[#c46060]"
+									onClick={openModal}
+									style={{ width: diameter / 2, height: diameter / 2 }}
+									onMouseOver={() => setShowInfo(true)}
+									onMouseOut={() => setShowInfo(false)}
+								/>
+							</div>
+						)}
+					</>
+				)}
 
 				<div>
 					<Modal
@@ -184,7 +180,7 @@ export default function ImageOverlapper({
 
 						<div className="sticky top-[100%] h-[60px] w-[100%]">
 							<Divider className="mt-4" />
-							<div className='flex -space-x-3.5 overflow-hidden flex-center mt-[5px] items-center sm:justify-between'>
+							<div className="flex -space-x-3.5 overflow-hidden flex-center mt-[5px] items-center sm:justify-between">
 								<TaskAvatars task={{ members: assignedMembers }} limit={3} />
 								<div className="flex px-4 h-fit">
 									<button
@@ -194,7 +190,8 @@ export default function ImageOverlapper({
 										  h-12 gap-1 items-center"
 										onClick={() => {
 											onCLickValidate();
-										}}>
+										}}
+									>
 										<FaCheck size={17} fill="#ffffff" />
 										{t('common.CONFIRM')}
 									</button>
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
index 0410fac13..98b38a2d9 100644
--- a/apps/web/lib/components/kanban-card.tsx
+++ b/apps/web/lib/components/kanban-card.tsx
@@ -24,7 +24,7 @@ function getStyle(provided: DraggableProvided, style: any) {
 	};
 }
 
-function setCommentIconColor(commentType: 'tagged' | 'untagged') {
+export function setCommentIconColor(commentType: 'tagged' | 'untagged') {
 	let style;
 
 	if (commentType === 'tagged') {
@@ -77,7 +77,7 @@ export function TagList({ tags }: { tags: Tag[] }) {
 	);
 }
 
-function Priority({ level }: { level: ITaskPriority }) {
+export function Priority({ level }: { level: ITaskPriority }) {
 	const levelSmallCase = level.toString().toLowerCase();
 	const levelIntoNumber =
 		levelSmallCase === 'low' ? 1 : levelSmallCase === 'medium' ? 2 : levelSmallCase === 'high' ? 3 : 4;
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 5cb66f6bf..ff4af85e1 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
@@ -5,13 +5,20 @@ 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 { useRecoilValue } from 'recoil';
+import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
+import TaskBlockCard from '../task-block-card';
+import { clsxm } from '@app/utils';
+import { HorizontalSeparator } from 'lib/components';
 import { useState } from 'react';
 import { AlertPopup } from 'lib/components';
 
 export function FutureTasks({ profile }: { profile: any }) {
 	const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan();
 	const canSeeActivity = useCanSeeActivityScreen();
-	const [popupOpen, setPopupOpen] = useState(false)
+	const [popupOpen, setPopupOpen] = useState(false);
+
+	const view = useRecoilValue(dailyPlanViewHeaderTabs);
 
 	return (
 		<div className="flex flex-col gap-6">
@@ -25,11 +32,14 @@ export function FutureTasks({ profile }: { profile: any }) {
 						<AccordionItem
 							value={plan.date.toString().split('T')[0]}
 							key={plan.id}
-							className="dark:border-slate-600"
+							className="dark:border-slate-600 !border-none"
 						>
-							<AccordionTrigger className="hover:no-underline">
-								<div className="text-lg">
-									{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+								<div className="flex items-center justify-between gap-3 w-full">
+									<div className="text-lg min-w-max">
+										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+									</div>
+									<HorizontalSeparator />
 								</div>
 							</AccordionTrigger>
 							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme">
@@ -37,22 +47,33 @@ export function FutureTasks({ profile }: { profile: any }) {
 								<PlanHeader plan={plan} planMode="Outstanding" />
 
 								{/* Plan tasks list */}
-								<ul className="flex flex-col gap-2 pb-[1.5rem]">
-									{plan.tasks?.map((task) => (
-										<TaskCard
-											key={`${task.id}${plan.id}`}
-											isAuthUser={true}
-											activeAuthTask={true}
-											viewType={'dailyplan'}
-											task={task}
-											profile={profile}
-											type="HORIZONTAL"
-											taskBadgeClassName={`rounded-sm`}
-											taskTitleClassName="mt-[0.0625rem]"
-											plan={plan}
-											planMode="Future Tasks"
-										/>
-									))}
+								<ul
+									className={clsxm(
+										view === 'CARDS' && 'flex-col',
+										view === 'TABLE' && 'flex-wrap',
+										'flex gap-2 pb-[1.5rem]',
+										view === 'BLOCKS' && 'overflow-x-scroll'
+									)}
+								>
+									{plan.tasks?.map((task) =>
+										view === 'CARDS' ? (
+											<TaskCard
+												key={`${task.id}${plan.id}`}
+												isAuthUser={true}
+												activeAuthTask={true}
+												viewType={'dailyplan'}
+												task={task}
+												profile={profile}
+												type="HORIZONTAL"
+												taskBadgeClassName={`rounded-sm`}
+												taskTitleClassName="mt-[0.0625rem]"
+												plan={plan}
+												planMode="Future Tasks"
+											/>
+										) : (
+											<TaskBlockCard key={task.id} task={task} />
+										)
+									)}
 								</ul>
 
 								{/* Delete Plan */}
diff --git a/apps/web/lib/features/task/daily-plan/outstanding-all.tsx b/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
index b6619791e..c0ca5b92d 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
@@ -1,50 +1,65 @@
 import { EmptyPlans } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
 import { useDailyPlan } from '@app/hooks';
-import { TaskEstimatedcount } from '.';
+import { TaskEstimatedCount } from '.';
+import { useRecoilValue } from 'recoil';
+import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
+import TaskBlockCard from '../task-block-card';
+import { clsxm } from '@app/utils';
 
 interface OutstandingAll {
-    profile: any,
+	profile: any;
 }
 export function OutstandingAll({ profile }: OutstandingAll) {
-    const { outstandingPlans } = useDailyPlan();
-    const displayedTaskId = new Set();
-    return (
-        <div className="flex flex-col gap-6">
-            <TaskEstimatedcount outstandingPlans={outstandingPlans} />
-            {outstandingPlans?.length > 0 ? (
-                <>
-                    {outstandingPlans?.map((plan) => (
-                        <>
-                            {/* <PlanHeader plan={plan} planMode="Outstanding" /> */}
-                            <ul className="flex flex-col gap-2">
-                                {plan?.tasks?.map((task) => {
-                                    //If the task is already displayed, skip it
-                                    if (displayedTaskId.has(task.id)) { return null; }
-                                    // Add the task to the Set to avoid displaying it again
-                                    displayedTaskId.add(task.id);
-                                    return <TaskCard
-                                        key={`${task.id}${plan.id}`}
-                                        isAuthUser={true}
-                                        activeAuthTask={true}
-                                        viewType={'dailyplan'}
-                                        task={task}
-                                        profile={profile}
-                                        type="HORIZONTAL"
-                                        taskBadgeClassName={`rounded-sm`}
-                                        taskTitleClassName="mt-[0.0625rem]"
-                                        planMode="Outstanding"
-                                    />
-                                }
-                                )}
-                            </ul>
-                        </>
-                    ))}
-                </>
-
-            ) : (
-                <EmptyPlans planMode="Outstanding" />
-            )}
-        </div>
-    );
+	const { outstandingPlans } = useDailyPlan();
+	const view = useRecoilValue(dailyPlanViewHeaderTabs);
+	const displayedTaskId = new Set();
+	return (
+		<div className="flex flex-col gap-6">
+			<TaskEstimatedCount outstandingPlans={outstandingPlans} />
+			{outstandingPlans?.length > 0 ? (
+				<>
+					{outstandingPlans?.map((plan) => (
+						<>
+							{/* <PlanHeader plan={plan} planMode="Outstanding" /> */}
+							<ul
+								className={clsxm(
+									view === 'CARDS' && 'flex-col',
+									view === 'TABLE' || (view === 'BLOCKS' && 'flex-wrap'),
+									'flex gap-2 pb-[1.5rem]'
+								)}
+							>
+								{plan?.tasks?.map((task) => {
+									//If the task is already displayed, skip it
+									if (displayedTaskId.has(task.id)) {
+										return null;
+									}
+									// Add the task to the Set to avoid displaying it again
+									displayedTaskId.add(task.id);
+									return view === 'CARDS' ? (
+										<TaskCard
+											key={`${task.id}${plan.id}`}
+											isAuthUser={true}
+											activeAuthTask={true}
+											viewType={'dailyplan'}
+											task={task}
+											profile={profile}
+											type="HORIZONTAL"
+											taskBadgeClassName={`rounded-sm`}
+											taskTitleClassName="mt-[0.0625rem]"
+											planMode="Outstanding"
+										/>
+									) : (
+										<TaskBlockCard key={task.id} task={task} />
+									);
+								})}
+							</ul>
+						</>
+					))}
+				</>
+			) : (
+				<EmptyPlans planMode="Outstanding" />
+			)}
+		</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 8ff8e07fd..9eaa232ac 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
@@ -3,12 +3,18 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@c
 import { EmptyPlans, PlanHeader } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
 import { useDailyPlan } from '@app/hooks';
+import { HorizontalSeparator } from 'lib/components';
+import TaskBlockCard from '../task-block-card';
+import { clsxm } from '@app/utils';
+import { useRecoilValue } from 'recoil';
+import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 
 interface IOutstandingFilterDate {
-	profile: any
+	profile: any;
 }
 export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 	const { outstandingPlans } = useDailyPlan();
+	const view = useRecoilValue(dailyPlanViewHeaderTabs);
 	return (
 		<div className="flex flex-col gap-6">
 			{outstandingPlans?.length > 0 ? (
@@ -21,11 +27,14 @@ export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 						<AccordionItem
 							value={plan.date.toString().split('T')[0]}
 							key={plan.id}
-							className="dark:border-slate-600"
+							className="dark:border-slate-600 !border-none"
 						>
-							<AccordionTrigger className="hover:no-underline">
-								<div className="text-lg">
-									{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+								<div className="flex items-center justify-between gap-3 w-full">
+									<div className="text-lg min-w-max">
+										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+									</div>
+									<HorizontalSeparator />
 								</div>
 							</AccordionTrigger>
 							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
@@ -33,21 +42,32 @@ export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 								<PlanHeader plan={plan} planMode="Outstanding" />
 
 								{/* Plan tasks list */}
-								<ul className="flex flex-col gap-2">
-									{plan.tasks?.map((task) => (
-										<TaskCard
-											key={`${task.id}${plan.id}`}
-											isAuthUser={true}
-											activeAuthTask={true}
-											viewType={'dailyplan'}
-											task={task}
-											profile={profile}
-											type="HORIZONTAL"
-											taskBadgeClassName={`rounded-sm`}
-											taskTitleClassName="mt-[0.0625rem]"
-											planMode="Outstanding"
-										/>
-									))}
+								<ul
+									className={clsxm(
+										view === 'CARDS' && 'flex-col',
+										view === 'TABLE' && 'flex-wrap',
+										'flex gap-2 pb-[1.5rem]',
+										view === 'BLOCKS' && 'overflow-x-scroll'
+									)}
+								>
+									{plan.tasks?.map((task) =>
+										view === 'CARDS' ? (
+											<TaskCard
+												key={`${task.id}${plan.id}`}
+												isAuthUser={true}
+												activeAuthTask={true}
+												viewType={'dailyplan'}
+												task={task}
+												profile={profile}
+												type="HORIZONTAL"
+												taskBadgeClassName={`rounded-sm`}
+												taskTitleClassName="mt-[0.0625rem]"
+												planMode="Outstanding"
+											/>
+										) : (
+											<TaskBlockCard key={task.id} task={task} />
+										)
+									)}
 								</ul>
 							</AccordionContent>
 						</AccordionItem>
diff --git a/apps/web/lib/features/task/daily-plan/past-tasks.tsx b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
index 07a358e95..249f3ebdd 100644
--- a/apps/web/lib/features/task/daily-plan/past-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
@@ -3,9 +3,16 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@c
 import { EmptyPlans, PlanHeader } from 'lib/features/user-profile-plans';
 import { TaskCard } from '../task-card';
 import { useDailyPlan } from '@app/hooks';
+import { useRecoilValue } from 'recoil';
+import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
+import { HorizontalSeparator } from 'lib/components';
+import { clsxm } from '@app/utils';
+import TaskBlockCard from '../task-block-card';
 
 export function PastTasks({ profile }: { profile: any }) {
 	const { pastPlans } = useDailyPlan();
+
+	const view = useRecoilValue(dailyPlanViewHeaderTabs);
 	return (
 		<div className="flex flex-col gap-6">
 			{pastPlans?.length > 0 ? (
@@ -18,11 +25,14 @@ export function PastTasks({ profile }: { profile: any }) {
 						<AccordionItem
 							value={plan.date.toString().split('T')[0]}
 							key={plan.id}
-							className="dark:border-slate-600"
+							className="dark:border-slate-600 !border-none"
 						>
-							<AccordionTrigger className="hover:no-underline">
-								<div className="text-lg">
-									{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+								<div className="flex items-center justify-between gap-3 w-full">
+									<div className="text-lg min-w-max">
+										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+									</div>
+									<HorizontalSeparator />
 								</div>
 							</AccordionTrigger>
 							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
@@ -30,20 +40,31 @@ export function PastTasks({ profile }: { profile: any }) {
 								<PlanHeader plan={plan} planMode="Outstanding" />
 
 								{/* Plan tasks list */}
-								<ul className="flex flex-col gap-2">
-									{plan.tasks?.map((task) => (
-										<TaskCard
-											key={`${task.id}${plan.id}`}
-											isAuthUser={true}
-											activeAuthTask={true}
-											viewType={'dailyplan'}
-											task={task}
-											profile={profile}
-											type="HORIZONTAL"
-											taskBadgeClassName={`rounded-sm`}
-											taskTitleClassName="mt-[0.0625rem]"
-										/>
-									))}
+								<ul
+									className={clsxm(
+										view === 'CARDS' && 'flex-col',
+										view === 'TABLE' && 'flex-wrap',
+										'flex gap-2 pb-[1.5rem]',
+										view === 'BLOCKS' && 'overflow-x-scroll'
+									)}
+								>
+									{plan.tasks?.map((task) =>
+										view === 'CARDS' ? (
+											<TaskCard
+												key={`${task.id}${plan.id}`}
+												isAuthUser={true}
+												activeAuthTask={true}
+												viewType={'dailyplan'}
+												task={task}
+												profile={profile}
+												type="HORIZONTAL"
+												taskBadgeClassName={`rounded-sm`}
+												taskTitleClassName="mt-[0.0625rem]"
+											/>
+										) : (
+											<TaskBlockCard key={task.id} task={task} />
+										)
+									)}
 								</ul>
 							</AccordionContent>
 						</AccordionItem>
diff --git a/apps/web/lib/features/task/daily-plan/task-estimated-count.tsx b/apps/web/lib/features/task/daily-plan/task-estimated-count.tsx
index c7b4de1e2..811f7cbf7 100644
--- a/apps/web/lib/features/task/daily-plan/task-estimated-count.tsx
+++ b/apps/web/lib/features/task/daily-plan/task-estimated-count.tsx
@@ -1,44 +1,44 @@
 import { secondsToTime } from '@app/helpers';
 import { IDailyPlan } from '@app/interfaces';
-import { VerticalSeparator } from 'lib/components'
-import React from 'react'
+import { VerticalSeparator } from 'lib/components';
 
-interface ITaskEstimatedcount {
-    outstandingPlans: any[]
+interface ITaskEstimatedCount {
+	outstandingPlans: any[];
 }
-export function TaskEstimatedcount({ outstandingPlans }: ITaskEstimatedcount) {
-    const element = outstandingPlans?.map((plan: IDailyPlan) => plan.tasks?.map((task) => task));
-    const { timesEstemated, totalTasks } = estimatedTotalTime(element || []);
-    const { h: hour, m: minute } = secondsToTime((timesEstemated || 0));
-    return (
-        <div className='flex space-x-10'>
-            <div className='flex space-x-2'>
-                <span className='text-slate-600'>Estimated:</span>
-                <span className='text-slate-900 font-semibold text-[12px]'>{hour}h{minute}m</span>
-            </div>
-            <VerticalSeparator className="border-slate-400" />
-            <div className='flex space-x-2'>
-                <span className='text-slate-600'>Total tasks:</span>
-                <span className='text-slate-900 font-semibold text-[12px]'>{totalTasks}</span>
-            </div>
-        </div>
-    )
+export function TaskEstimatedCount({ outstandingPlans }: ITaskEstimatedCount) {
+	const element = outstandingPlans?.map((plan: IDailyPlan) => plan.tasks?.map((task) => task));
+	const { timesEstimated, totalTasks } = estimatedTotalTime(element || []);
+	const { h: hour, m: minute } = secondsToTime(timesEstimated || 0);
+	return (
+		<div className="flex space-x-10">
+			<div className="flex space-x-2">
+				<span className="text-slate-600">Estimated:</span>
+				<span className="text-slate-900 font-semibold text-[12px]">
+					{hour}h{minute}m
+				</span>
+			</div>
+			<VerticalSeparator className="border-slate-400" />
+			<div className="flex space-x-2">
+				<span className="text-slate-600">Total tasks:</span>
+				<span className="text-slate-900 font-semibold text-[12px]">{totalTasks}</span>
+			</div>
+		</div>
+	);
 }
 
-
 export function estimatedTotalTime(data: any) {
-    // Flatten the data and reduce to calculate the sum of estimates without duplicates
-    const uniqueTasks = data.flat().reduce((acc: any, task: any) => {
-        if (!acc[task.id]) {
-            acc[task.id] = task.estimate;
-        }
-        return acc;
-    }, {});
+	// Flatten the data and reduce to calculate the sum of estimates without duplicates
+	const uniqueTasks = data.flat().reduce((acc: any, task: any) => {
+		if (!acc[task.id]) {
+			acc[task.id] = task.estimate;
+		}
+		return acc;
+	}, {});
 
-    // Calculate the total of estimates
-    const timesEstemated = Object.values(uniqueTasks)?.reduce((total: number, estimate: any) => total + estimate, 0);
-    // Calculate the total of tasks
-    const totalTasks = Object.values(uniqueTasks)?.length;
+	// Calculate the total of estimates
+	const timesEstimated = Object.values(uniqueTasks)?.reduce((total: number, estimate: any) => total + estimate, 0);
+	// Calculate the total of tasks
+	const totalTasks = Object.values(uniqueTasks)?.length;
 
-    return { timesEstemated, totalTasks };
+	return { timesEstimated, totalTasks };
 }
diff --git a/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx b/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx
new file mode 100644
index 000000000..6f18de4ac
--- /dev/null
+++ b/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx
@@ -0,0 +1,47 @@
+import { IssuesView } from '@app/constants';
+import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
+import { clsxm } from '@app/utils';
+import { QueueListIcon, Squares2X2Icon, TableCellsIcon } from '@heroicons/react/20/solid';
+import { Tooltip } from 'lib/components';
+import { DottedLanguageObjectStringPaths, useTranslations } from 'next-intl';
+import { useRecoilState } from 'recoil';
+
+export default function ViewsHeaderTabs() {
+	const t = useTranslations();
+	const options = [
+		{ label: 'CARDS', icon: QueueListIcon, view: IssuesView.CARDS },
+		{ label: 'TABLE', icon: TableCellsIcon, view: IssuesView.TABLE },
+		{ label: 'BLOCKS', icon: Squares2X2Icon, view: IssuesView.BLOCKS }
+	];
+
+	const [view, setView] = useRecoilState(dailyPlanViewHeaderTabs);
+
+	return (
+		<div className="flex items-center gap-1">
+			{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>
+			))}
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/task/task-block-card.tsx b/apps/web/lib/features/task/task-block-card.tsx
new file mode 100644
index 000000000..3b6c7544b
--- /dev/null
+++ b/apps/web/lib/features/task/task-block-card.tsx
@@ -0,0 +1,155 @@
+import { ITeamTask } from '@app/interfaces';
+import { TaskAllStatusTypes } from './task-all-status-type';
+import MenuKanbanCard from '@components/pages/kanban/menu-kanban-card';
+import { TaskInput } from './task-input';
+import { useRecoilState } from 'recoil';
+import { activeTeamTaskId } from '@app/stores';
+import Link from 'next/link';
+import { useAuthenticateUser, useOrganizationTeams, useTaskStatistics, useTeamMemberCard } from '@app/hooks';
+import ImageComponent, { ImageOverlapperProps } from '../../components/image-overlapper';
+import { TaskIssueStatus } from './task-issue';
+import { Priority, setCommentIconColor } from 'lib/components/kanban-card';
+import CircularProgress from '@components/ui/svgs/circular-progress';
+import { HorizontalSeparator } from 'lib/components';
+import { TaskStatus } from '@app/constants';
+import { secondsToTime } from '@app/helpers';
+
+interface TaskItemProps {
+	task: ITeamTask;
+}
+
+export default function TaskBlockCard(props: TaskItemProps) {
+	const { task } = props;
+	const [activeTask, setActiveTask] = useRecoilState(activeTeamTaskId);
+	const { activeTeam } = useOrganizationTeams();
+	const { user } = useAuthenticateUser();
+	const { getEstimation } = useTaskStatistics(0);
+	const members = activeTeam?.members || [];
+	const currentUser = members.find((m) => m.employee.userId === user?.id);
+
+	let totalWorkedTasksTimer = 0;
+	activeTeam?.members?.forEach((member) => {
+		const totalWorkedTasks = member?.totalWorkedTasks?.find((i) => i.id === task?.id) || null;
+		if (totalWorkedTasks) {
+			totalWorkedTasksTimer += totalWorkedTasks.duration;
+		}
+	});
+
+	const memberInfo = useTeamMemberCard(currentUser);
+
+	const taskAssignee: ImageOverlapperProps[] = task.members?.map((member: any) => {
+		return {
+			id: member.user.id,
+			url: member.user.imageUrl,
+			alt: member.user.firstName
+		};
+	});
+
+	const progress = getEstimation(null, task, totalWorkedTasksTimer || 1, task.estimate || 0);
+
+	const currentMember = activeTeam?.members.find((member) => member.id === memberInfo.member?.id || task?.id);
+
+	const { h, m, s } = secondsToTime(
+		(currentMember?.totalWorkedTasks &&
+			currentMember?.totalWorkedTasks?.length &&
+			currentMember?.totalWorkedTasks
+				.filter((t) => t.id === task?.id)
+				.reduce((previousValue, currentValue) => previousValue + currentValue.duration, 0)) ||
+			0
+	);
+
+	return (
+		<div className="flex flex-col my-2.5 rounded-2xl bg-white dark:bg-dark--theme-light p-4 relative">
+			<div className="w-full justify-between h-fit">
+				<div className="w-full flex justify-between">
+					<span className="!w-64">
+						<TaskAllStatusTypes className="justify-start" task={task} showStatus={false} />
+					</span>
+					<span>
+						<MenuKanbanCard member={currentMember} item={task} />
+					</span>
+				</div>
+				<div className="w-full flex justify-between my-3">
+					<div className="flex items-center w-64">
+						{activeTask?.id == task.id ? (
+							<>
+								<div className="w-56">
+									<TaskInput
+										task={task}
+										initEditMode={true}
+										keepOpen={true}
+										showCombobox={false}
+										autoFocus={true}
+										autoInputSelectText={true}
+										onTaskClick={(e) => {
+											// TODO: implement
+											console.log(e);
+										}}
+										onEnterKey={() => {
+											setActiveTask({ id: '' });
+										}}
+									/>
+								</div>
+							</>
+						) : (
+							<Link href={`/task/${task.id}`}>
+								<div className="w-64 relative overflow-hidden">
+									{task.issueType && (
+										<span className="h-5 w-6 inline-block ">
+											<span className="absolute top-1">
+												<TaskIssueStatus
+													showIssueLabels={false}
+													type="HORIZONTAL"
+													task={task}
+													className="rounded-sm mr-1 h-6 w-6 !p-0 flex justify-center items-center"
+												/>
+											</span>
+										</span>
+									)}
+									<span className="text-grey text-normal mx-1">#{task.number}</span>
+									{task.title}
+									<span className="inline-block ml-1">
+										{task.priority && <Priority level={task.priority} />}
+									</span>
+								</div>
+							</Link>
+						)}
+					</div>
+
+					<CircularProgress percentage={progress} />
+				</div>
+				<div className="my-2">
+					<HorizontalSeparator />
+				</div>
+				<div className="w-full h-10 flex items-center justify-between">
+					<div>
+						{task.status === TaskStatus.INPROGRESS ? (
+							<div className="flex items-center gap-2">
+								<small className="text-grey text-xs text-normal">Live:</small>
+								<p className="text-[#219653] font-medium text-sm">
+									{h}h : {m}m : {s}s
+								</p>
+							</div>
+						) : (
+							<div className="flex items-center gap-2">
+								<small className="text-grey text-xs text-normal">Worked:</small>
+								<p className="text-black dark:text-white font-medium w-20 text-sm">
+									{h}h : {m}m : {s}s
+								</p>
+							</div>
+						)}
+					</div>
+					<ImageComponent radius={30} images={taskAssignee} item={task} />
+					{task.issueType && (
+						<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-[1] bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
+							<div
+								className="w-3.5 h-3.5 rounded-full"
+								style={setCommentIconColor(task.issueType as any)}
+							></div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index f8063b8c4..9154e1f8a 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -5,19 +5,21 @@ import { useRecoilValue } from 'recoil';
 import { useCanSeeActivityScreen, useDailyPlan, useUserProfilePage } from '@app/hooks';
 import { TaskCard } from './task/task-card';
 import { IDailyPlan } from '@app/interfaces';
-import { AlertPopup, Container, NoData, ProgressBar, VerticalSeparator } from 'lib/components';
+import { AlertPopup, Container, HorizontalSeparator, 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';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/ui/select"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select';
 import { formatDayPlanDate, formatIntegerToHour } from '@app/helpers';
 import { EditPenBoxIcon, CheckCircleTickIcon as TickSaveIcon } from 'assets/svg';
-import { ReaderIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { ReaderIcon, ReloadIcon, StarIcon } from '@radix-ui/react-icons';
 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";
-
+import { IoCalendarOutline } from 'react-icons/io5';
+import ViewsHeaderTabs from './task/daily-plan/views-header-tabs';
+import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
+import TaskBlockCard from './task/task-block-card';
 
 type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 type FilterOutstanding = 'ALL' | 'DATE';
@@ -28,7 +30,10 @@ export function UserProfilePlans() {
 			? (window.localStorage.getItem('daily-plan-tab') as FilterTabs) || null
 			: 'Today Tasks';
 
-	const defaultOutstanding = typeof window !== 'undefined' ? (window.localStorage.getItem('outstanding') as FilterOutstanding) || 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();
@@ -37,11 +42,10 @@ export function UserProfilePlans() {
 	const [currentTab, setCurrentTab] = useState<FilterTabs>(defaultTab || 'Today Tasks');
 	const [currentOutstanding, setCurrentOutstanding] = useState<FilterOutstanding>(defaultOutstanding || 'ALL');
 
-
 	const screenOutstanding = {
-		'ALL': <OutstandingAll profile={profile} />,
-		"DATE": <OutstandingFilterDate profile={profile} />
-	}
+		ALL: <OutstandingAll profile={profile} />,
+		DATE: <OutstandingFilterDate profile={profile} />
+	};
 	const tabsScreens = {
 		'Today Tasks': <AllPlans profile={profile} currentTab={currentTab} />,
 		'Future Tasks': <FutureTasks profile={profile} />,
@@ -50,11 +54,8 @@ export function UserProfilePlans() {
 		Outstanding: <Outstanding filter={screenOutstanding[currentOutstanding]} />
 	};
 
-
-
 	useEffect(() => {
 		window.localStorage.setItem('daily-plan-tab', currentTab);
-
 	}, [currentTab]);
 
 	useEffect(() => {
@@ -67,7 +68,7 @@ export function UserProfilePlans() {
 				<>
 					{profileDailyPlans?.items?.length > 0 ? (
 						<div>
-							<div className='w-full mt-10 mb-5 items-center flex justify-between'>
+							<div className="w-full mt-10 mb-5 items-start flex justify-between">
 								<div className={clsxm('flex justify-start items-center gap-4 ')}>
 									{Object.keys(tabsScreens).map((filter, i) => (
 										<div key={i} className="flex cursor-pointer justify-start items-center gap-4">
@@ -96,25 +97,30 @@ export function UserProfilePlans() {
 										</div>
 									))}
 								</div>
-								{currentTab === 'Outstanding' && (
-									<Select onValueChange={(value) => {
-										setCurrentOutstanding(value as FilterOutstanding)
-									}}>
-										<SelectTrigger className="w-[120px] h-9">
-											<SelectValue placeholder="Filter" />
-										</SelectTrigger>
-										<SelectContent className='cursor-pointer'>
-											{Object.keys(screenOutstanding).map((item, index) => (
-												<SelectItem key={index} value={item}>
-													<div className='flex items-center space-x-1'>
-														{item == 'DATE' && <IoCalendarOutline />}
-														<span className='capitalize'>{item}</span>
-													</div>
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								)}
+								<div className="flex flex-col items-end gap-2">
+									<ViewsHeaderTabs />
+									{currentTab === 'Outstanding' && (
+										<Select
+											onValueChange={(value) => {
+												setCurrentOutstanding(value as FilterOutstanding);
+											}}
+										>
+											<SelectTrigger className="w-[120px] h-9 dark:border-dark--theme-light dark:bg-dark-high">
+												<SelectValue placeholder="Filter" />
+											</SelectTrigger>
+											<SelectContent className="cursor-pointer dark:bg-dark--theme-light border-none dark:border-dark--theme-light">
+												{Object.keys(screenOutstanding).map((item, index) => (
+													<SelectItem key={index} value={item}>
+														<div className="flex items-center space-x-1">
+															{item == 'DATE' ? <IoCalendarOutline /> : <StarIcon />}
+															<span className="capitalize">{item}</span>
+														</div>
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									)}
+								</div>
 							</div>
 							{tabsScreens[currentTab]}
 						</div>
@@ -131,13 +137,15 @@ 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)
+	const [popupOpen, setPopupOpen] = useState(false);
 
 	filteredPlans = sortedPlans;
 	if (currentTab === 'Today Tasks') filteredPlans = todayPlan;
 
 	const canSeeActivity = useCanSeeActivityScreen();
 
+	const view = useRecoilValue(dailyPlanViewHeaderTabs);
+
 	return (
 		<div className="flex flex-col gap-6">
 			{filteredPlans?.length > 0 ? (
@@ -154,11 +162,14 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 						<AccordionItem
 							value={plan.date.toString().split('T')[0]}
 							key={plan.id}
-							className="dark:border-slate-600"
+							className="dark:border-slate-600 !border-none"
 						>
-							<AccordionTrigger className="hover:no-underline">
-								<div className="text-lg">
-									{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+							<AccordionTrigger className="!min-w-full text-start hover:no-underline">
+								<div className="flex items-center justify-between gap-3 w-full">
+									<div className="text-lg min-w-max">
+										{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
+									</div>
+									<HorizontalSeparator />
 								</div>
 							</AccordionTrigger>
 							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme">
@@ -166,22 +177,33 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 								<PlanHeader plan={plan} planMode={currentTab} />
 
 								{/* Plan tasks list */}
-								<ul className="flex flex-col gap-2 pb-[1.5rem]">
-									{plan.tasks?.map((task) => (
-										<TaskCard
-											key={`${task.id}${plan.id}`}
-											isAuthUser={true}
-											activeAuthTask={true}
-											viewType={'dailyplan'}
-											task={task}
-											profile={profile}
-											type="HORIZONTAL"
-											taskBadgeClassName={`rounded-sm`}
-											taskTitleClassName="mt-[0.0625rem]"
-											planMode={currentTab === 'Today Tasks' ? 'Today Tasks' : undefined}
-											plan={plan}
-										/>
-									))}
+								<ul
+									className={clsxm(
+										view === 'CARDS' && 'flex-col',
+										view === 'TABLE' && 'flex-wrap',
+										'flex gap-2 pb-[1.5rem]',
+										view === 'BLOCKS' && 'overflow-x-scroll'
+									)}
+								>
+									{plan.tasks?.map((task) =>
+										view === 'CARDS' ? (
+											<TaskCard
+												key={`${task.id}${plan.id}`}
+												isAuthUser={true}
+												activeAuthTask={true}
+												viewType={'dailyplan'}
+												task={task}
+												profile={profile}
+												type="HORIZONTAL"
+												taskBadgeClassName={`rounded-sm`}
+												taskTitleClassName="mt-[0.0625rem]"
+												planMode={currentTab === 'Today Tasks' ? 'Today Tasks' : undefined}
+												plan={plan}
+											/>
+										) : (
+											<TaskBlockCard key={task.id} task={task} />
+										)
+									)}
 								</ul>
 
 								{/* Delete Plan */}
@@ -223,7 +245,6 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 														Cancel
 													</Button>
 												</AlertPopup>
-
 											</div>
 										) : (
 											<></>