From 1be1d7cc3a9d5f695da42f0d158f3b2c23fe9c72 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 22 Jan 2025 19:27:09 +0200
Subject: [PATCH] [Feat]: Add new API endpoint for daily time log report charts
 (#3533)

* feat: implement time tracking analytics improvements

* fix: code rabbit

* fix: code rabbit

* refactor: improve report activity state management

- Move report activity state to global store using timeLogsRapportChartState
- Remove local state management in useReportActivity hook
- Improve error handling and data reset logic
- Add better error logging
- Simplify state updates and data flow

* feat: Add input validation for required fields.
---
 .../dashboard/app-url/[teamId]/page.tsx       |  68 +++++
 .../app/[locale]/dashboard/app-url/page.tsx   |  11 -
 .../components/dashboard-header.tsx           |   2 +-
 .../[teamId]/components/date-range-picker.tsx | 234 ++++++++++++++++++
 .../components/team-stats-chart.tsx           |   9 +-
 .../components/team-stats-grid.tsx            |   2 +-
 .../components/team-stats-table.tsx           |   0
 .../{ => [teamId]}/data/mock-data.ts          |   0
 .../team-dashboard/{ => [teamId]}/page.tsx    |  11 +-
 .../components/date-range-picker.tsx          | 218 ----------------
 .../time-log/report/daily-chart/route.ts      |  56 +++++
 .../app/hooks/features/useReportActivity.ts   |  52 ++++
 apps/web/app/interfaces/timer/ITimerLog.ts    |  31 +++
 .../services/client/api/timer/timer-log.ts    |  55 +++-
 .../app/services/server/requests/timesheet.ts |  41 ++-
 apps/web/app/stores/time-logs.ts              |   3 +-
 apps/web/components/app-sidebar.tsx           |  25 +-
 apps/web/components/ui/export-dialog.tsx      |  43 ++++
 apps/web/lib/features/task/task-filters.tsx   |   6 +-
 apps/web/lib/features/task/task-input.tsx     |  22 +-
 20 files changed, 615 insertions(+), 274 deletions(-)
 create mode 100644 apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx
 delete mode 100644 apps/web/app/[locale]/dashboard/app-url/page.tsx
 rename apps/web/app/[locale]/dashboard/team-dashboard/{ => [teamId]}/components/dashboard-header.tsx (98%)
 create mode 100644 apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/date-range-picker.tsx
 rename apps/web/app/[locale]/dashboard/team-dashboard/{ => [teamId]}/components/team-stats-chart.tsx (93%)
 rename apps/web/app/[locale]/dashboard/team-dashboard/{ => [teamId]}/components/team-stats-grid.tsx (97%)
 rename apps/web/app/[locale]/dashboard/team-dashboard/{ => [teamId]}/components/team-stats-table.tsx (100%)
 rename apps/web/app/[locale]/dashboard/team-dashboard/{ => [teamId]}/data/mock-data.ts (100%)
 rename apps/web/app/[locale]/dashboard/team-dashboard/{ => [teamId]}/page.tsx (91%)
 delete mode 100644 apps/web/app/[locale]/dashboard/team-dashboard/components/date-range-picker.tsx
 create mode 100644 apps/web/app/api/timesheet/time-log/report/daily-chart/route.ts
 create mode 100644 apps/web/app/hooks/features/useReportActivity.ts
 create mode 100644 apps/web/components/ui/export-dialog.tsx

diff --git a/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx b/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx
new file mode 100644
index 000000000..21d63ede0
--- /dev/null
+++ b/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx
@@ -0,0 +1,68 @@
+"use client"
+import { fullWidthState } from '@/app/stores/fullWidth';
+import { withAuthentication } from '@/lib/app/authenticator';
+import { MainLayout } from '@/lib/layout';
+import { cn } from '@/lib/utils';
+import { useOrganizationTeams } from '@app/hooks/features/useOrganizationTeams';
+import { useAtomValue } from 'jotai';
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+import React, { useMemo } from 'react';
+import { ArrowLeftIcon } from '@radix-ui/react-icons';
+import { useRouter } from 'next/navigation';
+import { Breadcrumb, Container } from '@/lib/components';
+
+ function AppUrls() {
+	const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
+	const router = useRouter();
+	const t = useTranslations();
+	const fullWidth = useAtomValue(fullWidthState);
+	const paramsUrl = useParams<{ locale: string }>();
+	const currentLocale = paramsUrl?.locale;
+
+
+	const breadcrumbPath = useMemo(
+		() => [
+			{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+			{ title: activeTeam?.name || '', href: '/' },
+			{ title: 'Apps & URLs', href: `/${currentLocale}/dashboard/app-url` }
+		],
+		[activeTeam?.name, currentLocale, t]
+	);
+
+  if (!activeTeam) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <p className="text-gray-500">Team not found</p>
+      </div>
+    );
+  }
+
+	return (
+		<MainLayout
+			className="items-start pb-1 !overflow-hidden w-full"
+			childrenClassName="w-full"
+			showTimer={isTrackingEnabled}
+			mainHeaderSlot={
+				<div className="flex flex-col py-4 bg-gray-100 dark:bg-dark--theme">
+					<Container fullWidth={fullWidth} className={cn('flex gap-4 items-center w-full')}>
+						<div className="flex items-center pt-6 w-full dark:bg-dark--theme">
+							<button
+								onClick={() => router.back()}
+								className="p-1 rounded-full transition-colors hover:bg-gray-100"
+							>
+								<ArrowLeftIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+                </button>
+              <Breadcrumb paths={breadcrumbPath} className="text-sm" />
+						</div>
+					</Container>
+				</div>
+			}
+		></MainLayout>
+	);
+}
+
+export default withAuthentication(AppUrls, {
+	displayName: 'Apps & URLs',
+	showPageSkeleton: true
+});
diff --git a/apps/web/app/[locale]/dashboard/app-url/page.tsx b/apps/web/app/[locale]/dashboard/app-url/page.tsx
deleted file mode 100644
index fd86ca5ad..000000000
--- a/apps/web/app/[locale]/dashboard/app-url/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-function AppUrls() {
-  return (
-    <div>
-
-    </div>
-  )
-}
-
-export default AppUrls
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/components/dashboard-header.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
similarity index 98%
rename from apps/web/app/[locale]/dashboard/team-dashboard/components/dashboard-header.tsx
rename to apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
index ff2b73248..7e96cffbf 100644
--- a/apps/web/app/[locale]/dashboard/team-dashboard/components/dashboard-header.tsx
+++ b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
@@ -14,7 +14,7 @@ export function DashboardHeader() {
 		<div className="flex justify-between items-center">
 			<h1 className="text-2xl font-semibold">Team Dashboard</h1>
 			<div className="flex gap-4 items-center">
-				<DateRangePicker />
+				<DateRangePicker  />
 				<Select defaultValue="filter">
 					<SelectTrigger className="w-[100px]">
 						<SelectValue placeholder="Filter" />
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/date-range-picker.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/date-range-picker.tsx
new file mode 100644
index 000000000..f23fe85de
--- /dev/null
+++ b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/date-range-picker.tsx
@@ -0,0 +1,234 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+	format,
+	startOfWeek,
+	endOfWeek,
+	startOfMonth,
+	endOfMonth,
+	subDays,
+	subWeeks,
+	subMonths,
+	isSameMonth,
+	isSameYear,
+	isEqual
+} from 'date-fns';
+import { DateRange } from 'react-day-picker';
+import { useTranslations } from 'next-intl';
+
+interface DateRangePickerProps {
+	className?: string;
+	onDateRangeChange?: (range: DateRange | undefined) => void;
+}
+
+export function DateRangePicker({ className, onDateRangeChange }: DateRangePickerProps) {
+	const t=useTranslations();
+	const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+		from: new Date(),
+		to: new Date()
+	});
+	const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+	const [currentMonth, setCurrentMonth] = React.useState<Date>(new Date());
+
+  const handleDateRangeChange = (range: DateRange | undefined) => {
+     try {
+         setDateRange(range);
+         onDateRangeChange?.(range);
+     } catch (error) {
+       console.error('Error handling date range change:', error);
+     }
+     };
+
+	const predefinedRanges = [
+		{
+			label: t('common.TODAY'),
+			action: () => {
+				const today = new Date();
+				handleDateRangeChange({ from: today, to: today });
+			},
+			isSelected: (range: DateRange | undefined) => {
+				if (!range?.from || !range?.to) return false;
+				const today = new Date();
+				return isEqual(range.from, today) && isEqual(range.to, today);
+			}
+		},
+		{
+			label: t('common.YESTERDAY'),
+			action: () => {
+				const yesterday = subDays(new Date(), 1);
+				handleDateRangeChange({ from: yesterday, to: yesterday });
+			},
+			isSelected: (range: DateRange | undefined) => {
+				if (!range?.from || !range?.to) return false;
+				const yesterday = subDays(new Date(), 1);
+				return isEqual(range.from, yesterday) && isEqual(range.to, yesterday);
+			}
+		},
+		{
+			label: t('common.THIS_WEEK'),
+			action: () => {
+				const today = new Date();
+				handleDateRangeChange({
+					from: startOfWeek(today, { weekStartsOn: 1 }),
+					to: endOfWeek(today, { weekStartsOn: 1 })
+				});
+			},
+			isSelected: (range: DateRange | undefined) => {
+				if (!range?.from || !range?.to) return false;
+				const today = new Date();
+				const weekStart = startOfWeek(today, { weekStartsOn: 1 });
+				const weekEnd = endOfWeek(today, { weekStartsOn: 1 });
+				return isEqual(range.from, weekStart) && isEqual(range.to, weekEnd);
+			}
+		},
+		{
+			label: t('common.LAST_WEEK'),
+			action: () => {
+				const lastWeek = subWeeks(new Date(), 1);
+				handleDateRangeChange({
+					from: startOfWeek(lastWeek, { weekStartsOn: 1 }),
+					to: endOfWeek(lastWeek, { weekStartsOn: 1 })
+				});
+			},
+			isSelected: (range: DateRange | undefined) => {
+				if (!range?.from || !range?.to) return false;
+				const lastWeek = subWeeks(new Date(), 1);
+				const weekStart = startOfWeek(lastWeek, { weekStartsOn: 1 });
+				const weekEnd = endOfWeek(lastWeek, { weekStartsOn: 1 });
+				return isEqual(range.from, weekStart) && isEqual(range.to, weekEnd);
+			}
+		},
+		{
+			label:t('common.THIS_MONTH'),
+			action: () => {
+				const today = new Date();
+				handleDateRangeChange({
+					from: startOfMonth(today),
+					to: endOfMonth(today)
+				});
+			},
+			isSelected: (range: DateRange | undefined) => {
+				if (!range?.from || !range?.to) return false;
+				const today = new Date();
+				const monthStart = startOfMonth(today);
+				const monthEnd = endOfMonth(today);
+				return isEqual(range.from, monthStart) && isEqual(range.to, monthEnd);
+			}
+		},
+		{
+			label: t('common.LAST_MONTH'),
+			action: () => {
+				const lastMonth = subMonths(new Date(), 1);
+				handleDateRangeChange({
+					from: startOfMonth(lastMonth),
+					to: endOfMonth(lastMonth)
+				});
+			},
+			isSelected: (range: DateRange | undefined) => {
+				if (!range?.from || !range?.to) return false;
+				const lastMonth = subMonths(new Date(), 1);
+				const monthStart = startOfMonth(lastMonth);
+				const monthEnd = endOfMonth(lastMonth);
+				return isEqual(range.from, monthStart) && isEqual(range.to, monthEnd);
+			}
+		}
+	];
+
+	const formatDateRange = (range: DateRange) => {
+		if (!range.from) return 'Select date range';
+		if (!range.to) return format(range.from, 'd MMM yyyy');
+
+		if (isSameYear(range.from, range.to)) {
+			if (isSameMonth(range.from, range.to)) {
+				return `${format(range.from, 'd')} - ${format(range.to, 'd MMM yyyy')}`;
+			}
+			return `${format(range.from, 'd MMM')} - ${format(range.to, 'd MMM yyyy')}`;
+		}
+		return `${format(range.from, 'd MMM yyyy')} - ${format(range.to, 'd MMM yyyy')}`;
+	};
+
+	return (
+		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					className={cn(
+						'justify-between gap-2 px-3 py-2 min-w-[240px] text-center flex items-center',
+						!dateRange && 'text-muted-foreground',
+						className
+					)}
+				>
+					{dateRange ? formatDateRange(dateRange) : t('common.SELECT')}
+					<ChevronDown className="w-4 h-4" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				onClick={(e) => e.stopPropagation()}
+				onMouseDown={(e) => e.stopPropagation()}
+				onChange={(e) => e.stopPropagation()}
+				className="p-0 w-auto"
+				align="center"
+			>
+				<div className="flex flex-row-reverse">
+					<div className="p-1 space-y-1 border-l max-w-36">
+						{predefinedRanges.map((range) => (
+							<Button
+								key={range.label}
+								variant={range.isSelected(dateRange) ? 'default' : 'ghost'}
+								className={cn(
+									'justify-start w-full font-normal dark:text-gray-100',
+									range.isSelected(dateRange) &&
+										'bg-primary text-primary-foreground hover:bg-primary/90'
+								)}
+								onClick={() => {
+									range.action();
+								}}
+							>
+								{range.label}
+							</Button>
+						))}
+					</div>
+					<div className="p-1">
+						<Calendar
+							className="min-w-[240px]"
+							mode="range"
+							selected={dateRange}
+							onSelect={handleDateRangeChange}
+							numberOfMonths={2}
+							month={currentMonth}
+							onMonthChange={setCurrentMonth}
+							showOutsideDays={false}
+							fixedWeeks
+							ISOWeek
+							initialFocus
+						/>
+					</div>
+				</div>
+				<div className="flex gap-2 justify-end p-1 border-t">
+					<Button
+						variant="outline"
+						onClick={() => {
+							handleDateRangeChange(undefined);
+							setIsPopoverOpen(false);
+						}}
+					>
+						{t('common.CLEAR')}
+					</Button>
+					<Button
+						onClick={() => {
+							setIsPopoverOpen(false);
+						}}
+					>
+						{t('common.APPLY')}
+					</Button>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-chart.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-chart.tsx
similarity index 93%
rename from apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-chart.tsx
rename to apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-chart.tsx
index 941c667fd..b61178661 100644
--- a/apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-chart.tsx
+++ b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-chart.tsx
@@ -32,13 +32,14 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
 export function TeamStatsChart() {
 	return (
 		<div className="flex flex-col">
-			<div className="h-[300px] w-full">
+			<div className="h-[250px] w-full">
 				<ResponsiveContainer width="100%" height="100%">
-					<LineChart data={chartData} margin={{ top: 20, right: 0, bottom: 20, left: 0 }}>
+					<LineChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
 						<CartesianGrid
-							vertical={true}
+							strokeDasharray="3 3"
 							horizontal={true}
-							className="stroke-gray-200"
+							className="stroke-gray-200 dark:stroke-gray-700"
+							vertical={true}
 						/>
 						<XAxis
 							dataKey="date"
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-grid.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-grid.tsx
similarity index 97%
rename from apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-grid.tsx
rename to apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-grid.tsx
index 42dc713b9..f2803adc5 100644
--- a/apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-grid.tsx
+++ b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-grid.tsx
@@ -48,7 +48,7 @@ export function TeamStatsGrid() {
 					<Card key={stat.title} className="p-6">
 						<div className="flex flex-col">
 							<span className="text-sm font-medium text-gray-500">{stat.title}</span>
-							<span className={`text-2xl font-semibold mt-2 ${stat.color || "text-gray-900"}`}>
+							<span className={`text-2xl font-semibold mt-2 ${stat.color || "text-gray-900 dark:text-white"}`}>
 								{stat.value}
 							</span>
 							{stat.progress && (
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-table.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
similarity index 100%
rename from apps/web/app/[locale]/dashboard/team-dashboard/components/team-stats-table.tsx
rename to apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/data/mock-data.ts b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/data/mock-data.ts
similarity index 100%
rename from apps/web/app/[locale]/dashboard/team-dashboard/data/mock-data.ts
rename to apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/data/mock-data.ts
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/page.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx
similarity index 91%
rename from apps/web/app/[locale]/dashboard/team-dashboard/page.tsx
rename to apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx
index 4de204a6b..b95f030fa 100644
--- a/apps/web/app/[locale]/dashboard/team-dashboard/page.tsx
+++ b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx
@@ -29,7 +29,7 @@ function TeamDashboard() {
 		() => [
 			{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
 			{ title: activeTeam?.name || '', href: '/' },
-			{ title: 'team-dashboard', href: `/${currentLocale}/dashboard/team-dashboard` }
+			{ title: 'Team-Dashboard', href: `/${currentLocale}/dashboard/team-dashboard` }
 		],
 		[activeTeam?.name, currentLocale, t]
 	);
@@ -42,16 +42,16 @@ function TeamDashboard() {
 			mainHeaderSlot={
 				<div className="flex flex-col py-4 bg-gray-100 dark:bg-dark--theme">
 					<Container fullWidth={fullWidth} className={cn('flex flex-col gap-4 w-full')}>
-						<div className="flex pt-6 w-full dark:bg-dark--theme">
+						<div className="flex items-center pt-6 dark:bg-dark--theme">
 							<button
 								onClick={() => router.back()}
 								className="p-1 rounded-full transition-colors hover:bg-gray-100"
 							>
 								<ArrowLeftIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-							</button>{' '}
+							</button>
 							<Breadcrumb paths={breadcrumbPath} className="text-sm" />
 						</div>
-						<div className="flex flex-col gap-4 px-6 pt-4 w-full">
+						<div className="flex flex-col gap-4 px-4 pt-4 w-full">
 							<DashboardHeader />
 							<TeamStatsGrid />
 							<Card className="p-6 w-full">
@@ -60,8 +60,7 @@ function TeamDashboard() {
 						</div>
 					</Container>
 				</div>
-			}
-		>
+			}>
 			<Container fullWidth={fullWidth} className={cn('flex flex-col gap-8 py-6 w-full')}>
 				<Card className="p-6 w-full">
 					<TeamStatsTable />
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/components/date-range-picker.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/components/date-range-picker.tsx
deleted file mode 100644
index fe2255649..000000000
--- a/apps/web/app/[locale]/dashboard/team-dashboard/components/date-range-picker.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronDown } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, subDays, subWeeks, subMonths, isSameMonth, isSameYear, isEqual } from "date-fns";
-import { DateRange } from "react-day-picker";
-
-interface DateRangePickerProps {
-  className?: string;
-  onDateRangeChange?: (range: DateRange | undefined) => void;
-}
-
-export function DateRangePicker({ className, onDateRangeChange }: DateRangePickerProps) {
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
-    from: new Date(),
-    to: new Date(),
-  });
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-  const [currentMonth, setCurrentMonth] = React.useState<Date>(new Date());
-
-  const handleDateRangeChange = (range: DateRange | undefined) => {
-    setDateRange(range);
-    onDateRangeChange?.(range);
-  };
-
-  const predefinedRanges = [
-    {
-      label: "Today",
-      action: () => {
-        const today = new Date();
-        handleDateRangeChange({ from: today, to: today });
-      },
-      isSelected: (range: DateRange | undefined) => {
-        if (!range?.from || !range?.to) return false;
-        const today = new Date();
-        return isEqual(range.from, today) && isEqual(range.to, today);
-      }
-    },
-    {
-      label: "Yesterday",
-      action: () => {
-        const yesterday = subDays(new Date(), 1);
-        handleDateRangeChange({ from: yesterday, to: yesterday });
-      },
-      isSelected: (range: DateRange | undefined) => {
-        if (!range?.from || !range?.to) return false;
-        const yesterday = subDays(new Date(), 1);
-        return isEqual(range.from, yesterday) && isEqual(range.to, yesterday);
-      }
-    },
-    {
-      label: "Current Week",
-      action: () => {
-        const today = new Date();
-        handleDateRangeChange({
-          from: startOfWeek(today, { weekStartsOn: 1 }),
-          to: endOfWeek(today, { weekStartsOn: 1 })
-        });
-      },
-      isSelected: (range: DateRange | undefined) => {
-        if (!range?.from || !range?.to) return false;
-        const today = new Date();
-        const weekStart = startOfWeek(today, { weekStartsOn: 1 });
-        const weekEnd = endOfWeek(today, { weekStartsOn: 1 });
-        return isEqual(range.from, weekStart) && isEqual(range.to, weekEnd);
-      }
-    },
-    {
-      label: "Last Week",
-      action: () => {
-        const lastWeek = subWeeks(new Date(), 1);
-        handleDateRangeChange({
-          from: startOfWeek(lastWeek, { weekStartsOn: 1 }),
-          to: endOfWeek(lastWeek, { weekStartsOn: 1 })
-        });
-      },
-      isSelected: (range: DateRange | undefined) => {
-        if (!range?.from || !range?.to) return false;
-        const lastWeek = subWeeks(new Date(), 1);
-        const weekStart = startOfWeek(lastWeek, { weekStartsOn: 1 });
-        const weekEnd = endOfWeek(lastWeek, { weekStartsOn: 1 });
-        return isEqual(range.from, weekStart) && isEqual(range.to, weekEnd);
-      }
-    },
-    {
-      label: "Current Month",
-      action: () => {
-        const today = new Date();
-        handleDateRangeChange({
-          from: startOfMonth(today),
-          to: endOfMonth(today)
-        });
-      },
-      isSelected: (range: DateRange | undefined) => {
-        if (!range?.from || !range?.to) return false;
-        const today = new Date();
-        const monthStart = startOfMonth(today);
-        const monthEnd = endOfMonth(today);
-        return isEqual(range.from, monthStart) && isEqual(range.to, monthEnd);
-      }
-    },
-    {
-      label: "Last Month",
-      action: () => {
-        const lastMonth = subMonths(new Date(), 1);
-        handleDateRangeChange({
-          from: startOfMonth(lastMonth),
-          to: endOfMonth(lastMonth)
-        });
-      },
-      isSelected: (range: DateRange | undefined) => {
-        if (!range?.from || !range?.to) return false;
-        const lastMonth = subMonths(new Date(), 1);
-        const monthStart = startOfMonth(lastMonth);
-        const monthEnd = endOfMonth(lastMonth);
-        return isEqual(range.from, monthStart) && isEqual(range.to, monthEnd);
-      }
-    },
-  ];
-
-  const formatDateRange = (range: DateRange) => {
-    if (!range.from) return "Select date range";
-    if (!range.to) return format(range.from, "d MMM yyyy");
-
-    if (isSameYear(range.from, range.to)) {
-      if (isSameMonth(range.from, range.to)) {
-        return `${format(range.from, "d")} - ${format(range.to, "d MMM yyyy")}`;
-      }
-      return `${format(range.from, "d MMM")} - ${format(range.to, "d MMM yyyy")}`;
-    }
-    return `${format(range.from, "d MMM yyyy")} - ${format(range.to, "d MMM yyyy")}`;
-  };
-
-  return (
-    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn(
-            "justify-between gap-2 px-3 py-2 min-w-[240px]",
-            !dateRange && "text-muted-foreground",
-            className
-          )}
-        >
-          {dateRange ? formatDateRange(dateRange) : "Select date range"}
-          <ChevronDown className="w-4 h-4" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        onClick={(e) => e.stopPropagation()}
-        onMouseDown={(e) => e.stopPropagation()}
-        onChange={(e) => e.stopPropagation()}
-        className="p-0 w-auto"
-        align="center"
-      >
-        <div className="flex flex-row-reverse">
-          <div className="p-3 space-y-3 border-l max-w-40">
-            {predefinedRanges.map((range) => (
-              <Button
-                key={range.label}
-                variant={range.isSelected(dateRange) ? "default" : "ghost"}
-                className={cn(
-                  "justify-start w-full font-normal",
-                  range.isSelected(dateRange) && "bg-primary text-primary-foreground hover:bg-primary/90"
-                )}
-                onClick={() => {
-                  range.action();
-                }}
-              >
-                {range.label}
-              </Button>
-            ))}
-          </div>
-          <div className="p-3">
-            <Calendar
-              mode="range"
-              selected={dateRange}
-              onSelect={handleDateRangeChange}
-              numberOfMonths={2}
-              month={currentMonth}
-              onMonthChange={setCurrentMonth}
-              showOutsideDays={false}
-              fixedWeeks
-              ISOWeek
-              initialFocus
-            />
-          </div>
-        </div>
-        <div className="flex gap-2 justify-end p-3 border-t">
-          <Button
-            variant="outline"
-            onClick={() => {
-              handleDateRangeChange(undefined);
-              setIsPopoverOpen(false);
-            }}
-          >
-            Clear
-          </Button>
-          <Button
-            onClick={() => {
-              setIsPopoverOpen(false);
-            }}
-          >
-            Apply
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/web/app/api/timesheet/time-log/report/daily-chart/route.ts b/apps/web/app/api/timesheet/time-log/report/daily-chart/route.ts
new file mode 100644
index 000000000..88d1d0a0d
--- /dev/null
+++ b/apps/web/app/api/timesheet/time-log/report/daily-chart/route.ts
@@ -0,0 +1,56 @@
+import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
+import { NextResponse } from 'next/server';
+import { getTimeLogReportDailyChartRequest } from '@app/services/server/requests';
+
+export async function GET(req: Request) {
+    const res = new NextResponse();
+    const { searchParams } = new URL(req.url);
+
+    // Get all required parameters from the URL
+    const activityLevelStart = searchParams.get('activityLevel[start]');
+    const activityLevelEnd = searchParams.get('activityLevel[end]');
+    const organizationId = searchParams.get('organizationId');
+    const tenantId = searchParams.get('tenantId');
+    const startDate = searchParams.get('startDate');
+    const endDate = searchParams.get('endDate');
+    const timeZone = searchParams.get('timeZone');
+    const groupBy = searchParams.get('groupBy');
+
+    // Validate required parameters
+    if (!startDate || !endDate || !organizationId || !tenantId) {
+        return NextResponse.json(
+            {
+                error: 'Missing required parameters: startDate, endDate, organizationId, and tenantId are required'
+            },
+            { status: 400 }
+        );
+    }
+
+    // Authenticate the request
+    const { $res, user, access_token } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        // Make the request to get daily chart data
+        const { data } = await getTimeLogReportDailyChartRequest({
+            activityLevel: {
+                start: parseInt(activityLevelStart || '0'),
+                end: parseInt(activityLevelEnd || '100')
+            },
+            organizationId,
+            tenantId,
+            startDate,
+            endDate,
+            timeZone: timeZone || 'Etc/UTC',
+            groupBy: groupBy || 'date'
+        }, access_token);
+
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error fetching daily chart data:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch daily chart data' },
+            { status: 500 }
+        );
+    }
+}
diff --git a/apps/web/app/hooks/features/useReportActivity.ts b/apps/web/app/hooks/features/useReportActivity.ts
new file mode 100644
index 000000000..5ff23209a
--- /dev/null
+++ b/apps/web/app/hooks/features/useReportActivity.ts
@@ -0,0 +1,52 @@
+import { useCallback, useEffect } from 'react';
+import { ITimeLogReportDailyChartProps } from '@/app/interfaces/timer/ITimerLog';
+import { getTimeLogReportDailyChart } from '@/app/services/client/api/timer/timer-log';
+import { useAuthenticateUser } from './useAuthenticateUser';
+import { useQuery } from '../useQuery';
+import { useAtom } from 'jotai';
+import { timeLogsRapportChartState } from '@/app/stores';
+
+type UseReportActivityProps = Omit<ITimeLogReportDailyChartProps, 'organizationId' | 'tenantId'>;
+
+
+
+export function useReportActivity(props: UseReportActivityProps) {
+    const { user } = useAuthenticateUser();
+    const [rapportChartActivity, setRapportChartActivity] = useAtom(timeLogsRapportChartState);
+    const { loading: loadingTimeLogReportDailyChart, queryCall: queryTimeLogReportDailyChart } = useQuery(getTimeLogReportDailyChart);
+
+    const fetchReportActivity = useCallback(async () => {
+        if (!user) {
+            return;
+        }
+        try {
+            const { data } = await queryTimeLogReportDailyChart({
+                ...props,
+                organizationId: user?.employee.organizationId,
+                tenantId: user?.tenantId ?? ''
+            });
+
+            if (data) {
+                setRapportChartActivity(data);
+            } else {
+                setRapportChartActivity([]);
+            }
+
+        } catch (err) {
+            console.error('Failed to fetch activity report:', err);
+            setRapportChartActivity([]);
+        }
+    }, [user, queryTimeLogReportDailyChart, props, setRapportChartActivity]);
+
+
+    useEffect(() => {
+        if (user) {
+            fetchReportActivity();
+        }
+    }, [user, fetchReportActivity]);
+
+    return {
+        loadingTimeLogReportDailyChart,
+        rapportChartActivity
+    };
+}
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index a5c932fc2..9e8958a45 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -157,3 +157,34 @@ export interface UpdateTimesheet extends Pick<
     > {
     isBillable: boolean;
 }
+
+export interface ITimerValue {
+    TRACKED: number;
+    MANUAL: number;
+    IDLE: number;
+    RESUMED: number;
+}
+
+export interface ITimerDailyLog {
+    date: string;
+    value: ITimerValue;
+}
+
+export interface ITimeLogReportDailyChartProps {
+    activityLevel: {
+        start: number;
+        end: number;
+    };
+    start: number;
+    end: number;
+    organizationId: string;
+    tenantId: string;
+    startDate: string;
+    endDate: string;
+    timeZone?: string;
+    projectIds?: string[],
+	employeeIds?: string[],
+    logType?: string[],
+    teamIds?:string[],
+    groupBy?: string;
+}
diff --git a/apps/web/app/services/client/api/timer/timer-log.ts b/apps/web/app/services/client/api/timer/timer-log.ts
index 4e658918a..0325b5df2 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,4 +1,4 @@
-import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus, UpdateTimesheet } from '@app/interfaces';
+import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus, UpdateTimesheet, ITimerDailyLog, ITimeLogReportDailyChartProps } from '@app/interfaces';
 import { get, deleteApi, put, post } from '../../axios';
 import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
@@ -155,3 +155,56 @@ export function updateTimesheetFromAPi(params: UpdateTimesheet) {
 		throw new Error('Failed to create timesheet log');
 	}
 }
+
+const getDefaultTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+export function getTimeLogReportDailyChart({
+    activityLevel,
+    organizationId,
+    tenantId,
+    startDate,
+    endDate,
+    timeZone = getDefaultTimezone(),
+    groupBy,
+    projectIds = [],
+    employeeIds = [],
+    logType = [],
+    teamIds = []
+}: ITimeLogReportDailyChartProps) {
+    const baseParams = {
+        'activityLevel[start]': activityLevel.start.toString(),
+        'activityLevel[end]': activityLevel.end.toString(),
+        organizationId,
+        tenantId,
+        startDate,
+        endDate,
+        timeZone,
+        ...(groupBy && { groupBy })
+    };
+
+	if (!organizationId || !tenantId || !startDate || !endDate) {
+		throw new Error('Required parameters missing: organizationId, tenantId, startDate, and endDate are required');
+	}
+	if (activityLevel.start < 0 || activityLevel.end > 100 || activityLevel.start >= activityLevel.end) {
+		throw new Error('Invalid activity level range');
+	}
+
+    const addArrayParams = (params: Record<string, string>, key: string, values: string[]) => {
+        values.forEach((value, index) => {
+            params[`${key}[${index}]`] = value;
+        });
+    };
+
+    const queryParams = { ...baseParams };
+    if (projectIds.length) addArrayParams(queryParams, 'projectIds', projectIds);
+    if (employeeIds.length) addArrayParams(queryParams, 'employeeIds', employeeIds);
+    if (logType.length) addArrayParams(queryParams, 'logType', logType);
+    if (teamIds.length) addArrayParams(queryParams, 'teamIds', teamIds);
+
+    const queryString = new URLSearchParams(queryParams).toString();
+
+    return get<ITimerDailyLog[]>(
+        `/timesheet/time-log/report/daily-chart?${queryString}`,
+        { tenantId }
+    );
+}
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index ef39e6abc..f2eed8ad8 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,7 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { TimesheetLog, UpdateTimesheet, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
+import { ITimerDailyLog, TimesheetLog, UpdateTimesheet, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
 import { IUpdateTimesheetStatus } from '@/app/interfaces';
 
 export type TTasksTimesheetStatisticsParams = {
@@ -69,7 +69,7 @@ type ITimesheetProps = {
 	startDate: string;
 	endDate: string;
 	timeZone?: string;
-}
+};
 
 export function getTaskTimesheetRequest(params: ITimesheetProps, bearer_token: string) {
 	const queries = qs.stringify(params);
@@ -78,14 +78,14 @@ export function getTaskTimesheetRequest(params: ITimesheetProps, bearer_token: s
 		method: 'GET',
 		bearer_token,
 		tenantId: params.tenantId
-	})
+	});
 }
 
 type IDeleteTimesheetProps = {
 	organizationId: string;
 	tenantId: string;
-	logIds?: string[]
-}
+	logIds?: string[];
+};
 
 export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer_token: string) {
 	const { logIds = [] } = params;
@@ -97,18 +97,16 @@ export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer
 	});
 }
 
-
 export function updateStatusTimesheetRequest(params: IUpdateTimesheetStatus, bearer_token: string) {
 	return serverFetch<UpdateTimesheetStatus[]>({
 		path: '/timesheet/status',
 		method: 'PUT',
 		body: { ...params },
 		bearer_token,
-		tenantId: params.tenantId,
-	})
+		tenantId: params.tenantId
+	});
 }
 
-
 export function createTimesheetRequest(params: UpdateTimesheet, bearer_token: string) {
 	return serverFetch<TimesheetLog>({
 		path: '/timesheet/time-log',
@@ -116,7 +114,7 @@ export function createTimesheetRequest(params: UpdateTimesheet, bearer_token: st
 		body: { ...params },
 		bearer_token,
 		tenantId: params.tenantId
-	})
+	});
 }
 
 export function updateTimesheetRequest(params: UpdateTimesheet, bearer_token: string) {
@@ -128,3 +126,26 @@ export function updateTimesheetRequest(params: UpdateTimesheet, bearer_token: st
 		tenantId: params.tenantId
 	});
 }
+
+export interface ITimeLogReportDailyChartProps {
+	activityLevel: {
+		start: number;
+		end: number;
+	};
+	organizationId: string;
+	tenantId: string;
+	startDate: string;
+	endDate: string;
+	timeZone?: string;
+	groupBy?: string;
+}
+
+export function getTimeLogReportDailyChartRequest(params: ITimeLogReportDailyChartProps, bearer_token: string) {
+	const queries = qs.stringify(params);
+	return serverFetch<ITimerDailyLog[]>({
+		path: `/timesheet/time-log/report/daily-chart?${queries}`,
+		method: 'GET',
+		bearer_token,
+		tenantId: params.tenantId
+	});
+}
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 514fc7e89..29357afb3 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog, UpdateTimesheetStatus } from '../interfaces';
+import { IProject, ITeamTask, ITimerDailyLog, OT_Member, TimesheetFilterByDays, TimesheetLog, UpdateTimesheetStatus } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -22,3 +22,4 @@ export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
 export const timesheetUpdateStatus = atom<UpdateTimesheetStatus[]>([])
 export const timesheetUpdateState = atom<TimesheetLog | null>(null)
 export const selectTimesheetIdState = atom<TimesheetLog[]>([])
+export const timeLogsRapportChartState = atom<ITimerDailyLog[]>([]);
diff --git a/apps/web/components/app-sidebar.tsx b/apps/web/components/app-sidebar.tsx
index edd6ac2d4..64e9c2c84 100644
--- a/apps/web/components/app-sidebar.tsx
+++ b/apps/web/components/app-sidebar.tsx
@@ -96,10 +96,21 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
 		navMain: [
 			{
 				title: t('sidebar.DASHBOARD'),
-				url: '/',
+				url: '#',
 				icon: LayoutDashboard,
-				isActive: true,
-				label: 'dashboard'
+				label: 'dashboard',
+				items: [
+					{
+						title: 'Team Dashboard',
+						url: `/dashboard/team-dashboard/${user?.id}?name=${encodeURIComponent(username || '')}`,
+						label: 'team dashboard'
+					},
+					{
+						title: 'Apps & URLs',
+						url: `/dashboard/app-url/${user?.id}?name=${encodeURIComponent(username || '')}`,
+						label: 'apps-urls'
+					}
+				]
 			},
 			{
 				title: t('sidebar.FAVORITES'),
@@ -121,20 +132,20 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
 											)}
 											asChild
 										>
-											<span className="flex items-center justify-between w-full min-w-fit">
+											<span className="flex justify-between items-center w-full min-w-fit">
 												<Link href={`/task/${task?.id}`} className="flex items-center">
 													{task && (
 														// Show task issue and task number
 														<TaskIssueStatus
 															showIssueLabels={false}
-															className={cn('w-full px-2 flex items-center gap-1 mr-1')}
+															className={cn('flex gap-1 items-center px-2 mr-1 w-full')}
 															task={task}
 														/>
 													)}
-													<span className={cn('font-normal flex items-center')}>
+													<span className={cn('flex items-center font-normal')}>
 														<small
 															className={cn(
-																'text-gray-300 text-nowrap whitespace-nowrap text-xs mr-1 font-normal'
+																'mr-1 text-xs font-normal text-gray-300 whitespace-nowrap text-nowrap'
 															)}
 														>
 															#{task?.taskNumber}
diff --git a/apps/web/components/ui/export-dialog.tsx b/apps/web/components/ui/export-dialog.tsx
new file mode 100644
index 000000000..9a829a727
--- /dev/null
+++ b/apps/web/components/ui/export-dialog.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { CheckCircle2 } from "lucide-react";
+
+interface ExportDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onDownload: () => void;
+}
+
+export function ExportDialog({ isOpen, onClose, onDownload }: ExportDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader className="flex flex-col items-center gap-y-4">
+          <CheckCircle2 className="h-12 w-12 text-primary" />
+          <DialogTitle className="text-xl text-center">Export Successful!</DialogTitle>
+          <DialogDescription className="text-center">
+            Your export is complete. Click below to download your file.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="flex flex-col sm:flex-row gap-3 sm:gap-2">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={onDownload}>
+            Download
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index be78ae406..30c3f2b0e 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -267,7 +267,7 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 		<div className="relative z-10 w-full">
 			<div
 				className={clsxm(
-					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse lg:flex-nowrap',
+					'flex flex-col flex-wrap-reverse justify-between items-center w-full xs:flex-row lg:flex-nowrap',
 					className
 				)}
 			>
@@ -393,7 +393,7 @@ function InputFilters({ hook, profile }: Props) {
 /* It's a function that returns a nav element. */
 function TabsNav({ hook }: { hook: I_TaskFilter }) {
 	return (
-		<nav className="flex items-center justify-center w-full -mb-1 space-x-1 md:justify-start md:space-x-4 md:mt-0">
+		<nav className="flex justify-center items-center -mb-1 space-x-1 w-full md:justify-start md:space-x-4 md:mt-0">
 			{hook.tabs.map((item, i) => {
 				const active = item.tab === hook.tab;
 
@@ -445,7 +445,7 @@ export function TaskStatusFilter({ hook, employeeId }: { hook: I_TaskFilter; emp
 	}, [dailyPlanTab, date]);
 	return (
 		<div className="flex flex-col items-center pt-2 mt-4 space-x-2 md:justify-between md:flex-row">
-			<div className="flex flex-wrap justify-center flex-1 space-x-3 md:justify-start">
+			<div className="flex flex-wrap flex-1 justify-center space-x-3 md:justify-start">
 				<TaskStatusDropdown
 					key={key + 1}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('status', values || [])}
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index 8e4fa090c..dd7f06b67 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -354,7 +354,7 @@ export function TaskInput(props: Props) {
 			}}
 			trailingNode={
 				/* Showing the spinner when the task is being updated. */
-				<div className="flex items-center justify-center h-full p-2">
+				<div className="flex justify-center items-center p-2 h-full">
 					{props.task ? (
 						(updateLoading || props.inputLoader) && <SpinnerLoader size={25} />
 					) : (
@@ -527,7 +527,7 @@ function TaskCard({
 									className={'dark:bg-[#1B1D22]'}
 								/>
 
-								<div className="flex justify-start gap-2">
+								<div className="flex gap-2 justify-start">
 									<ActiveTaskStatusDropdown
 										className="lg:min-w-[170px]"
 										taskStatusClassName="h-7 text-xs"
@@ -634,7 +634,7 @@ function TaskCard({
 							className="py-2 text-xs cursor-pointer input-border"
 							onClick={() => datas.setFilter && datas.setFilter('open')}
 						>
-							<div className={clsxm('w-4 h-4 rounded-full opacity-50 bg-green-300')} />
+							<div className={clsxm('w-4 h-4 bg-green-300 rounded-full opacity-50')} />
 							<span
 								className={clsxm(
 									datas.filter === 'open' && ['text-primary dark:text-primary-light font-semibold']
@@ -662,7 +662,7 @@ function TaskCard({
 
 				<Divider className="mt-4" />
 				{/* Task list */}
-				<ul className={assignTaskPopup ? 'py-6 max-h-[40vh] overflow-y-auto' : 'py-6 max-h-56 overflow-y-auto'}>
+				<ul className={assignTaskPopup ? 'overflow-y-auto py-6 max-h-[40vh]' : 'overflow-y-auto py-6 max-h-56'}>
 					{forParentChildRelationship && (
 						<LazyRender items={data || []}>
 							{(task, i) => {
@@ -761,9 +761,9 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 			)}
 		>
 			<Combobox multiple={true}>
-				<div className="relative h-full my-auto">
-					<div className=" w-full h-full cursor-default overflow-hidden rounded-lg text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
-						<Combobox.Button className=" h-full hover:transition-all flex justify-between w-40 items-center">
+				<div className="relative my-auto h-full">
+					<div className="overflow-hidden w-full h-full text-left rounded-lg cursor-default  focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
+						<Combobox.Button className="flex justify-between items-center w-40 h-full  hover:transition-all">
 							<div
 								className={cn(
 									'flex gap-1 items-center  !text-default dark:!text-white',
@@ -798,8 +798,8 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 									}
 									value={authMember}
 								>
-									<span className={`absolute inset-y-0 left-0 flex items-center pl-3 `}>
-										<CheckIcon className="h-5 w-5" aria-hidden="true" />
+									<span className={`flex absolute inset-y-0 left-0 items-center pl-3`}>
+										<CheckIcon className="w-5 h-5" aria-hidden="true" />
 									</span>
 									{authMember.employee.fullName}
 								</Combobox.Option>
@@ -833,8 +833,8 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 										value={member}
 									>
 										{assignees.current.map((el) => el.id).includes(member.employee.id) && (
-											<span className={`absolute inset-y-0 left-0 flex items-center pl-3 `}>
-												<CheckIcon className="h-5 w-5" aria-hidden="true" />
+											<span className={`flex absolute inset-y-0 left-0 items-center pl-3`}>
+												<CheckIcon className="w-5 h-5" aria-hidden="true" />
 											</span>
 										)}