[Refactor] Profile page | Implement the new design for visited sites tab

apps/web/app/helpers/date.ts

@@ -78,7 +78,6 @@ export function differenceBetweenHours(startedAt: Date, stoppedAt: Date): number
 	return 0;
 }
 
-
 /**
  * Converts a given date string to a time string in the format HH:mm.
  *
@@ -91,7 +90,7 @@ export function differenceBetweenHours(startedAt: Date, stoppedAt: Date): number
  * @returns {string} The formatted time string
  */
 export const formatTimeFromDate = (date: string | Date | undefined) => {
-	if (!date) return "";
+	if (!date) return '';
 	const dateObject = date instanceof Date ? date : new Date(date);
 	const hours = dateObject.getHours().toString().padStart(2, '0');
 	const minutes = dateObject.getMinutes().toString().padStart(2, '0');
@@ -109,9 +108,7 @@ export const formatTimeFromDate = (date: string | Date | undefined) => {
  * @param {Date | string} date - The date input, which can be either a Date object or a string.
  * @returns {Date} The corresponding Date object.
  */
-export const toDate = (date: Date | string) =>
-	(date instanceof Date ? date : new Date(date));
-
+export const toDate = (date: Date | string) => (date instanceof Date ? date : new Date(date));
 
 export function convertMsToTime(milliseconds: number) {
 	let seconds = Math.floor(milliseconds / 1000);
@@ -176,7 +173,6 @@ export const tomorrowDate = moment().add(1, 'days').toDate();
 
 export const yesterdayDate = moment().subtract(1, 'days').toDate();
 
-
 export const formatDayPlanDate = (dateString: string | Date, format?: string) => {
 	if (dateString.toString().length > 10) {
 		dateString = dateString.toString().split('T')[0];
@@ -261,7 +257,7 @@ export const getGreeting = (t: TranslationHooks) => {
 		MORNING_START: 5,
 		AFTERNOON_START: 12,
 		EVENING_START: 18
-	} as const
+	} as const;
 	const currentHour = new Date().getHours();
 
 	if (currentHour >= GREETING_TIMES.MORNING_START && currentHour < GREETING_TIMES.AFTERNOON_START) {
@@ -271,7 +267,7 @@ export const getGreeting = (t: TranslationHooks) => {
 	} else {
 		return t('pages.timesheet.GREETINGS.GOOD_EVENING');
 	}
-}
+};
 
 export const formatDate = (dateStr: string | Date): string => {
 	try {
@@ -280,8 +276,7 @@ export const formatDate = (dateStr: string | Date): string => {
 		console.error('Invalid date format:', error);
 		return '';
 	}
-}
-
+};
 
 export function toLocal(date: string | Date | moment.Moment): moment.Moment {
 	const localDate = moment(date);

apps/web/lib/features/activity/apps.tsx

@@ -1,8 +1,8 @@
 import { useTimeDailyActivity } from '@app/hooks/features/useTimeDailyActivity';
-import { AppVisitedSkeleton } from './components/app-visited-skeleton';
+import { VisitedItemSkeleton } from './components/visited-item-skeleton';
 import { groupAppsByHour } from '@app/helpers/array-data';
 import { useTranslations } from 'next-intl';
-import AppVisitedItem from './components/app-visited-Item';
+import VisitedItem from './components/visited-Item';
 import { useMemo } from 'react';
 // import { AppVisitedModal } from './components/app-visited-details';
 
@@ -49,7 +49,7 @@ export function AppsTab() {
 							{app?.apps?.map((item, i) => (
 								<div key={i} className="w-full">
 									{/* <AppVisitedModal> */}
-									<AppVisitedItem app={item} totalMilliseconds={app?.totalMilliseconds} type="APP" />
+									<VisitedItem app={item} totalMilliseconds={app?.totalMilliseconds} type="APP" />
 									{/* </AppVisitedModal> */}
 								</div>
 							))}
@@ -63,8 +63,8 @@ export function AppsTab() {
 				)}
 				{loading && visitedApps?.length < 1 && (
 					<>
-						<AppVisitedSkeleton />
-						<AppVisitedSkeleton />
+						<VisitedItemSkeleton />
+						<VisitedItemSkeleton />
 					</>
 				)}
 			</div>

apps/web/lib/features/activity/components/app-visited-Item.tsx → apps/web/lib/features/activity/components/visited-Item.tsx

@@ -4,7 +4,7 @@ import { ProgressBar } from 'lib/components';
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
-const AppVisitedItem = ({
+const VisitedItem = ({
 	app,
 	totalMilliseconds,
 	type
@@ -49,9 +49,12 @@ const AppVisitedItem = ({
 				</p>
 				<ProgressBar backgroundColor="black" progress={percent + '%'} width={`75%`} />
 			</div>
-			<p style={{ flexBasis: itemCellsWidth['time-spent-in-hours'] }} className="">{`${h}:${m}:${s}`}</p>
+			<p
+				style={{ flexBasis: itemCellsWidth['time-spent-in-hours'] }}
+				className=""
+			>{`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`}</p>
 		</div>
 	);
 };
 
-export default AppVisitedItem;
+export default VisitedItem;

apps/web/lib/features/activity/components/app-visited-skeleton.tsx → apps/web/lib/features/activity/components/visited-item-skeleton.tsx

@@ -1,4 +1,4 @@
-export function AppVisitedSkeleton() {
+export function VisitedItemSkeleton() {
 	return (
 		<div className=" dark:bg-[#26272C]  p-4 py-6 animate-pulse rounded-md flex justify-between items-center my-2">
 			<div className="w-1/4 p-2">

apps/web/lib/features/activity/visited-sites.tsx

@@ -1,51 +1,80 @@
 import { useTimeDailyActivity } from '@app/hooks/features/useTimeDailyActivity';
-import { AppVisitedSkeleton } from './components/app-visited-skeleton';
+import { VisitedItemSkeleton } from './components/visited-item-skeleton';
 import { groupAppsByHour } from '@app/helpers/array-data';
 import { useTranslations } from 'next-intl';
-import AppVisitedItem from './components/app-visited-Item';
-import React from 'react';
+import VisitedItem from './components/visited-Item';
+import { useMemo } from 'react';
+// import { AppVisitedModal } from './components/app-visited-details';
 
-export const VisitedSitesTab = React.memo(function VisitedSitesT() {
-	const { visitedSites, loading } = useTimeDailyActivity('URL');
+export function VisitedSitesTab() {
+	const { visitedSites, loading } = useTimeDailyActivity('SITE');
 	const t = useTranslations();
-	const sites = groupAppsByHour(visitedSites);
+	const sites = groupAppsByHour(visitedSites ?? []);
+
+	const headers = useMemo(
+		() => [
+			{
+				title: t('timer.VISITED_SITES'),
+				width: '20%'
+			},
+			{
+				title: t('timer.VISITED_DATES'),
+				width: '25%'
+			},
+			{
+				title: t('timer.PERCENT_USED'),
+				width: '40%'
+			},
+			{
+				title: t('timer.TIME_SPENT_IN_HOURS'),
+				width: '15%'
+			}
+		],
+		[t]
+	);
 	return (
 		<div>
 			<div className="flex justify-end w-full">{/* TODO: Filters components */}</div>
-			<header className="bg-gray-200 dark:bg-[#26272C] rounded-md p-4 flex items-center justify-between">
-				<h3 className="text-lg font-semibold flex-1">{t('timer.APPS')}</h3>
-				<h3 className="text-lg text-center font-semibold  2xl:w-56 3xl:w-64">{t('timer.VISITED_DATES')}</h3>
-				<h3 className="text-lg text-center font-semibold flex-1">{t('timer.PERCENT_USED')}</h3>
-				<h3 className="text-lg font-semibold  2xl:w-52 3xl:w-64 text-end">{t('timer.TIME_SPENT_IN_HOURS')}</h3>
-			</header>
-			<section>
-				{sites.map((site, i) => (
-					<div
-						key={i}
-						className="border shadow-lg  rounded-md my-4 p-4 dark:border-[#FFFFFF0D] bg-white dark:bg-[#1B1D22]"
-					>
-						<h3>{site.hour}</h3>
-						<div>
-							{site.apps?.map((item, i) => (
-								<div key={i} className="w-full">
-									<AppVisitedItem app={item} totalMilliseconds={site.totalMilliseconds} type="SITE" />
-								</div>
-							))}
+			<div className="w-full space-y-6">
+				<header className="bg-gray-200 dark:bg-[#26272C] rounded-[1rem] px-6 h-14 flex items-center">
+					{headers.map((header, i) => (
+						<div style={{ flexBasis: header.width }} key={i} className="border font-medium">
+							{header.title}
+						</div>
+					))}
+				</header>
+				<section className="space-y-6">
+					{sites?.map((site, i) => (
+						<div
+							key={i}
+							className="rounded-[1rem] p-[3px] bg-[linear-gradient(90deg,_rgba(185,147,230,1)_0%,_rgba(110,176,236,1)_100%)]"
+						>
+							<div className=" p-6 rounded-[1rem] bg-white dark:bg-[#26272C]">
+								{site?.apps?.map((item, i) => (
+									<div key={i} className="w-full">
+										<VisitedItem
+											app={item}
+											totalMilliseconds={site?.totalMilliseconds}
+											type="SITE"
+										/>
+									</div>
+								))}
+							</div>
 						</div>
+					))}
+				</section>
+				{visitedSites?.length < 1 && !loading && (
+					<div className="hover:dark:bg-[#26272C] border dark:border-[#26272C] dark:bg-[#191a20] p-4 py-16 rounded-md flex justify-center items-center my-2">
+						<p className="text-center">{t('timer.NO_VISITED_SITE_MESSAGE')}</p>
 					</div>
-				))}
-			</section>
-			{visitedSites.length < 1 && !loading && (
-				<div className="hover:dark:bg-[#26272C] border dark:border-[#26272C] dark:bg-[#191a20] p-4 py-16 rounded-md flex justify-center items-center my-2">
-					<p className="text-lg text-center">{t('timer.THERE_IS_NO_APPS_VISITED')}</p>
-				</div>
-			)}
-			{loading && visitedSites.length < 1 && (
-				<>
-					<AppVisitedSkeleton />
-					<AppVisitedSkeleton />
-				</>
-			)}
+				)}
+				{loading && visitedSites?.length < 1 && (
+					<>
+						<VisitedItemSkeleton />
+						<VisitedItemSkeleton />
+					</>
+				)}
+			</div>
 		</div>
 	);
-});
+}

apps/web/locales/ar.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "ابدأ العمل",
 			"TIMER_RUNNING": "المؤقت قيد التشغيل بالفعل",
 			"WARNING_PLAN_ESTIMATION": "رجى تصحيح ساعات العمل المخطط لها أو إعادة تقدير المهمة (المهام)"
-		}
+		},
+		"VISITED_SITES": "المواقع التي تمت زيارتها",
+		"NO_VISITED_SITE_MESSAGE": "لا يوجد مواقع تمت زيارتها"
 	},
 	"task": {
 		"TITLE": "المهمة",

apps/web/locales/bg.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "Започнете работа",
 			"TIMER_RUNNING": "Таймерът вече работи",
 			"WARNING_PLAN_ESTIMATION": "Моля, коригирайте планираните работни часове или преоценете задачата(ите) "
-		}
+		},
+		"VISITED_SITES": "Посетени сайтове",
+		"NO_VISITED_SITE_MESSAGE": "Няма посетени сайтове"
 	},
 	"task": {
 		"TITLE": "Задача",

apps/web/locales/de.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "Mit der Arbeit beginnen",
 			"TIMER_RUNNING": "Der Timer läuft bereits",
 			"WARNING_PLAN_ESTIMATION": "Bitte korrigieren Sie die geplanten Arbeitsstunden oder schätzen Sie die Aufgabe(n) neu ein."
-		}
+		},
+		"VISITED_SITES": "Besuchte Seiten",
+		"NO_VISITED_SITE_MESSAGE": "Es gibt keine besuchten Seiten"
 	},
 	"task": {
 		"TITLE": "Aufgabe",

apps/web/locales/en.json

@@ -713,7 +713,9 @@
 			"START_WORKING_BUTTON": "Start working",
 			"TIMER_RUNNING": "The timer is already running",
 			"WARNING_PLAN_ESTIMATION": "Please correct planned work hours or  re-estimate task(s)"
-		}
+		},
+		"VISITED_SITES": "Visited sites",
+		"NO_VISITED_SITE_MESSAGE": "There are no visited sites"
 	},
 	"task": {
 		"TITLE": "Task",

apps/web/locales/es.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "Empezar a trabajar",
 			"TIMER_RUNNING": "El temporizador ya está en ejecución",
 			"WARNING_PLAN_ESTIMATION": "Por favor, corrija las horas de trabajo previstas o reevalúe la(s) tarea(s)"
-		}
+		},
+		"VISITED_SITES": "Sitios visitados",
+		"NO_VISITED_SITE_MESSAGE": "No hay sitios visitados"
 	},
 	"task": {
 		"TITLE": "Tarea",

apps/web/locales/fr.json

@@ -712,7 +712,9 @@
 		"ACTIVE": "Actif",
 		"INACTIVE": "Inactif",
 		"ARCHIVED": "Archivé",
-		"NOT_ARCHIVED": "Non archivé"
+		"NOT_ARCHIVED": "Non archivé",
+		"VISITED_SITES": "Sites visités",
+		"NO_VISITED_SITE_MESSAGE": "Il n'y a pas de sites visités"
 	},
 	"task": {
 		"TITLE": "Tâche",

apps/web/locales/he.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "התחל לעבוד",
 			"TIMER_RUNNING": "הטיימר כבר פועל",
 			"WARNING_PLAN_ESTIMATION": "נא לתקן את שעות העבודה המתוכננות או להעריך מחדש את המשימות"
-		}
+		},
+		"VISITED_SITES": "אתרים שביקרת בהם",
+		"NO_VISITED_SITE_MESSAGE": "אין אתרים שביקרת בהם"
 	},
 	"task": {
 		"TITLE": "משימה",

apps/web/locales/it.json

@@ -712,7 +712,9 @@
 		"ACTIVE": "Attivo",
 		"INACTIVE": "Inattivo",
 		"ARCHIVED": "Archiviato",
-		"NOT_ARCHIVED": "Non archiviato"
+		"NOT_ARCHIVED": "Non archiviato",
+		"VISITED_SITES": "Siti visitati",
+		"NO_VISITED_SITE_MESSAGE": "Non ci sono siti visitati"
 	},
 	"task": {
 		"TITLE": "Compito",

apps/web/locales/nl.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "Begin met werken",
 			"TIMER_RUNNING": "De timer loopt al",
 			"WARNING_PLAN_ESTIMATION": "Corrigeer de geplande werkuren of schat de taak(en) opnieuw in"
-		}
+		},
+		"VISITED_SITES": "Bezochte sites",
+		"NO_VISITED_SITE_MESSAGE": "Er zijn geen bezochte sites"
 	},
 	"task": {
 		"TITLE": "Taak",

apps/web/locales/pl.json

@@ -712,7 +712,9 @@
 		"ACTIVE": "Aktywny",
 		"INACTIVE": "Nieaktywny",
 		"ARCHIVED": "Zarchiwizowany",
-		"NOT_ARCHIVED": "Niezarchiwizowany"
+		"NOT_ARCHIVED": "Niezarchiwizowany",
+		"VISITED_SITES": "Odwiedzone strony",
+		"NO_VISITED_SITE_MESSAGE": "Brak odwiedzonych stron"
 	},
 	"task": {
 		"TITLE": "Zadanie",

apps/web/locales/pt.json

@@ -713,7 +713,9 @@
 		"ACTIVE": "Ativo",
 		"INACTIVE": "Inativo",
 		"ARCHIVED": "Arquivado",
-		"NOT_ARCHIVED": "Não arquivado"
+		"NOT_ARCHIVED": "Não arquivado",
+		"VISITED_SITES": "Sites visitados",
+		"NO_VISITED_SITE_MESSAGE": "Não há sites visitados"
 	},
 	"task": {
 		"TITLE": "Tarefa",

apps/web/locales/ru.json

@@ -712,7 +712,9 @@
 		"ACTIVE": "Активно",
 		"INACTIVE": "Неактивно",
 		"ARCHIVED": "Архивировано",
-		"NOT_ARCHIVED": "Не архивировано"
+		"NOT_ARCHIVED": "Не архивировано",
+		"VISITED_SITES": "Посещенные сайты",
+		"NO_VISITED_SITE_MESSAGE": "Нет посещенных сайтов"
 	},
 	"task": {
 		"TITLE": "Задача",

apps/web/locales/zh.json

@@ -712,7 +712,9 @@
 			"START_WORKING_BUTTON": "开始工作",
 			"TIMER_RUNNING": "计时器已经在运行",
 			"WARNING_PLAN_ESTIMATION": "请更正计划工时或重新估算任务工时"
-		}
+		},
+		"VISITED_SITES": "访问过的网站",
+		"NO_VISITED_SITE_MESSAGE": "没有访问过的网站"
 	},
 	"task": {
 		"TITLE": "任务",