From 344551ae5e925859357ba7397dade85f3c895a95 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Thu, 5 Dec 2024 11:52:22 +0200
Subject: [PATCH 1/3] fix: Screenshot Details Card shiw twice

---
 .../components/screenshoots-per-hour.tsx      | 13 +++++++++--
 .../components/screenshot-details.tsx         | 22 +++++++++----------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx b/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
index 1a617c2f8..55f511b84 100644
--- a/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
+++ b/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
@@ -1,8 +1,11 @@
+"use client"
+
 import { ITimerSlot } from '@app/interfaces/timer/ITimerSlot';
 import { clsxm } from '@app/utils';
 import ScreenshotDetailsModal from './screenshot-details';
 import { useModal } from '@app/hooks';
 import ScreenshotItem from './screenshot-item';
+import React, { useCallback } from 'react';
 
 export const ScreenshootPerHour = ({
 	timeSlots,
@@ -14,6 +17,12 @@ export const ScreenshootPerHour = ({
 	stoppedAt: string;
 }) => {
 	const { isOpen, closeModal, openModal } = useModal();
+	const [selectedElement, setSelectedELement]= React.useState<ITimerSlot | null>(null)
+
+	const openScreenModal = useCallback((el: ITimerSlot) => {
+		setSelectedELement(el)
+		openModal()
+	}, [openModal])
 	return (
 		<div className="p-4 my-4 rounded-md dark:bg-[#1E2025] border-[0.125rem] dark:border-[#FFFFFF0D]">
 			<h3 className="px-4">
@@ -27,12 +36,12 @@ export const ScreenshootPerHour = ({
 							startTime={el.startedAt}
 							percent={el.percentage}
 							imageUrl={el.screenshots[0]?.thumbUrl}
-							onShow={() => openModal()}
+							onShow={() => openScreenModal(el)}
 							idSlot={el.id}
 						/>
-						<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={el} />
 					</div>
 				))}
+				<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={selectedElement!} />
 			</div>
 		</div>
 	);
diff --git a/apps/web/lib/features/activity/components/screenshot-details.tsx b/apps/web/lib/features/activity/components/screenshot-details.tsx
index 240890c51..e31939e12 100644
--- a/apps/web/lib/features/activity/components/screenshot-details.tsx
+++ b/apps/web/lib/features/activity/components/screenshot-details.tsx
@@ -12,7 +12,7 @@ const ScreenshotDetailsModal = ({
 }: {
 	open: boolean;
 	closeModal: () => void;
-	slot: ITimerSlot;
+	slot?: ITimerSlot;
 }) => {
 	const t = useTranslations();
 	return (
@@ -24,14 +24,14 @@ const ScreenshotDetailsModal = ({
 		>
 			<div className="w-full p-4 overflow-x-auto">
 				<h1 className="py-2 font-semibold text-lg">
-					{new Date(slot.startedAt).toLocaleTimeString()} - {new Date(slot.stoppedAt).toLocaleTimeString()}
+					{slot ? new Date(slot?.startedAt).toLocaleTimeString() + '-' +  new Date(slot?.stoppedAt).toLocaleTimeString(): null}
 				</h1>
-				<ProgressBar progress={slot.percentage + '%'} width={'100%'} />
+				<ProgressBar progress={slot?.percentage + '%'} width={'100%'} />
 				<p className="font-semibold py-1">
-					{slot.percentage} {t('timer.PERCENT_OF_MINUTES')}
+					{slot?.percentage} {t('timer.PERCENT_OF_MINUTES')}
 				</p>
 				<div className="my-2 flex w-full overflow-x-auto">
-					{slot.screenshots.map((screenshot, i) => (
+					{slot?.screenshots.map((screenshot, i) => (
 						<div key={i} className="w-1/3 min-w-[20rem] p-2">
 							<Tooltip
 								label={screenshot.description}
@@ -40,8 +40,8 @@ const ScreenshotDetailsModal = ({
 								labelContainerClassName="w-full"
 							>
 								<ScreenshotItem
-									idSlot={slot.id}
-									endTime={slot.stoppedAt}
+									idSlot={slot?.id}
+									endTime={slot?.stoppedAt}
 									startTime={screenshot.recordedAt}
 									imageUrl={screenshot.thumbUrl}
 									percent={0}
@@ -68,24 +68,24 @@ const ScreenshotDetailsModal = ({
 						<p>
 							<span className="font-semibold mx-2">{t('timer.KEYBOARD')}</span>
 							<span>
-								{t('timer.TIMES')} : {slot.keyboard} {slot.keyboardPercentage}%
+								{t('timer.TIMES')} : {slot?.keyboard} {slot?.keyboardPercentage}%
 							</span>
 						</p>
 						<p>
 							<span className="font-semibold mx-2">{t('timer.MOUSE')}</span>
 							<span>
-								{t('timer.TIMES')} : {slot.mouse} {slot.mousePercentage}%
+								{t('timer.TIMES')} : {slot?.mouse} {slot?.mousePercentage}%
 							</span>
 						</p>
 						<p className="rounded-lg px-1 mb-1 text-white ">
-							{slot.isActive ? (
+							{slot?.isActive ? (
 								<span className=" bg-green-600 rounded-lg px-2 m-1">{t('timer.ACTIVE')}</span>
 							) : (
 								<span className=" bg-red-600 rounded-lg px-2 m-1">{t('timer.INACTIVE')}</span>
 							)}
 						</p>
 						<p>
-							{slot.isArchived ? (
+							{slot?.isArchived ? (
 								<span className=" bg-gray-600 rounded-lg px-2 m-1">{t('timer.ARCHIVED')}</span>
 							) : (
 								<span className=" bg-blue-600 rounded-lg px-2 m-1">{t('timer.NOT_ARCHIVED')}</span>

From 373519efe91fb6877d79c01a57222d01607c57ac Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Thu, 5 Dec 2024 12:23:25 +0200
Subject: [PATCH 2/3] fix: dark theme

---
 .../lib/features/activity/components/screenshot-details.tsx   | 2 +-
 apps/web/lib/features/activity/components/screenshot-item.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/lib/features/activity/components/screenshot-details.tsx b/apps/web/lib/features/activity/components/screenshot-details.tsx
index e31939e12..aa7305cd9 100644
--- a/apps/web/lib/features/activity/components/screenshot-details.tsx
+++ b/apps/web/lib/features/activity/components/screenshot-details.tsx
@@ -20,7 +20,7 @@ const ScreenshotDetailsModal = ({
 			isOpen={open}
 			title="Screenshots detail"
 			closeModal={closeModal}
-			className="bg-white dark:bg-[#343434d4] p-4 rounded-lg lg:w-[60vw] xl:w-[50vw] 2xl:w-[40vw] m-8"
+			className="bg-white dark:border-[#26272C] dark:bg-[#191a20] dark:border p-4 rounded-lg lg:w-[60vw] xl:w-[50vw] 2xl:w-[40vw] m-8"
 		>
 			<div className="w-full p-4 overflow-x-auto">
 				<h1 className="py-2 font-semibold text-lg">
diff --git a/apps/web/lib/features/activity/components/screenshot-item.tsx b/apps/web/lib/features/activity/components/screenshot-item.tsx
index 64657bf62..a64fde709 100644
--- a/apps/web/lib/features/activity/components/screenshot-item.tsx
+++ b/apps/web/lib/features/activity/components/screenshot-item.tsx
@@ -24,7 +24,7 @@ const ScreenshotItem = ({
 	return (
 		<div
 			className={clsxm(
-				'rounded-lg shadow-md hover:shadow-lg  dark:border-[#26272C] dark:bg-[#191a20] overflow-hidden h-56 w-full',
+				'rounded-lg shadow-md hover:shadow-lg  dark:border-[#26272C] dark:bg-[#191a20] dark:border overflow-hidden h-56 w-full',
 				!showProgress && !isTeamPage && '!h-48 dark:!bg-[#191a20]',
 				isTeamPage && '!h-32'
 			)}
@@ -50,7 +50,7 @@ const ScreenshotItem = ({
 				/>
 			</div>
 			<div
-				className={clsxm('w-full h-1/2 p-4 cursor-pointer bg-white', !showProgress && '!h-1/3')}
+				className={clsxm('w-full h-1/2 p-4 cursor-pointer bg-white dark:bg-[#191a20]', !showProgress && '!h-1/3')}
 				onClick={onShow}
 			>
 				{showProgress ? (

From 9c1e9dfac6f348588cfe447b6f1f615ae476f2eb Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Thu, 5 Dec 2024 12:36:17 +0200
Subject: [PATCH 3/3] fix: coderrabit suggestions

---
 .../activity/components/screenshoots-per-hour.tsx        | 2 +-
 .../features/activity/components/screenshot-details.tsx  | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx b/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
index 55f511b84..7220d7c62 100644
--- a/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
+++ b/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
@@ -41,7 +41,7 @@ export const ScreenshootPerHour = ({
 						/>
 					</div>
 				))}
-				<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={selectedElement!} />
+				<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={selectedElement} />
 			</div>
 		</div>
 	);
diff --git a/apps/web/lib/features/activity/components/screenshot-details.tsx b/apps/web/lib/features/activity/components/screenshot-details.tsx
index aa7305cd9..9b9a0014d 100644
--- a/apps/web/lib/features/activity/components/screenshot-details.tsx
+++ b/apps/web/lib/features/activity/components/screenshot-details.tsx
@@ -4,6 +4,7 @@ import { Modal, ProgressBar, Tooltip } from 'lib/components';
 import { ITimerSlot } from '@app/interfaces/timer/ITimerSlot';
 import ScreenshotItem from './screenshot-item';
 import { useTranslations } from 'next-intl';
+import React from 'react';
 
 const ScreenshotDetailsModal = ({
 	open,
@@ -12,7 +13,7 @@ const ScreenshotDetailsModal = ({
 }: {
 	open: boolean;
 	closeModal: () => void;
-	slot?: ITimerSlot;
+	slot?: ITimerSlot| null;
 }) => {
 	const t = useTranslations();
 	return (
@@ -20,13 +21,13 @@ const ScreenshotDetailsModal = ({
 			isOpen={open}
 			title="Screenshots detail"
 			closeModal={closeModal}
-			className="bg-white dark:border-[#26272C] dark:bg-[#191a20] dark:border p-4 rounded-lg lg:w-[60vw] xl:w-[50vw] 2xl:w-[40vw] m-8"
+			className="bg-white dark:border-[#26272C] dark:bg-[#191a20] dark:border p-4 rounded-lg lg:w-[60vw] xl:w-[50vw] 2xl:w-[40vw]"
 		>
 			<div className="w-full p-4 overflow-x-auto">
 				<h1 className="py-2 font-semibold text-lg">
 					{slot ? new Date(slot?.startedAt).toLocaleTimeString() + '-' +  new Date(slot?.stoppedAt).toLocaleTimeString(): null}
 				</h1>
-				<ProgressBar progress={slot?.percentage + '%'} width={'100%'} />
+				<ProgressBar progress={slot ? `${slot.percentage}%` : '0%'} width={'100%'} />
 				<p className="font-semibold py-1">
 					{slot?.percentage} {t('timer.PERCENT_OF_MINUTES')}
 				</p>
@@ -98,4 +99,4 @@ const ScreenshotDetailsModal = ({
 	);
 };
 
-export default ScreenshotDetailsModal;
+export default React.memo(ScreenshotDetailsModal);