Merge pull request #2093 from ever-co/feat/activity

Feat: Show Team Member Activity on Team Page
ever-co · Jan 16, 2024 · af70063 · af70063
2 parents a3bfe0c + ddefc40
commit af70063
Show file tree

Hide file tree

Showing 13 changed files with 298 additions and 137 deletions.
diff --git a/apps/web/app/hooks/features/useTimeDailyActivity.ts b/apps/web/app/hooks/features/useTimeDailyActivity.ts
@@ -9,7 +9,7 @@ import { useAuthenticateUser } from './useAuthenticateUser';
 import { getTimerDailyRequestAPI } from '@app/services/client/api';
 import { useUserProfilePage } from './useUserProfilePage';
 
-export function useTimeDailyActivity(type: string) {
+export function useTimeDailyActivity(type: string, id?: string) {
 	const profile = useUserProfilePage();
 	const { user } = useAuthenticateUser();
 	const [visitedApps, setVisitedApps] = useRecoilState(timeAppsState);
@@ -22,7 +22,7 @@ export function useTimeDailyActivity(type: string) {
 		({ title }: { title?: string }) => {
 			const todayStart = moment().startOf('day').toDate();
 			const todayEnd = moment().endOf('day').toDate();
-			const employeeId = profile.member?.employeeId ?? '';
+			const employeeId = id ?? profile.member?.employeeId ?? '';
 			if (profile.userProfile?.id === user?.id || user?.role?.name?.toUpperCase() == 'MANAGER') {
 				queryCall({
 					tenantId: user?.tenantId ?? '',

diff --git a/apps/web/app/hooks/features/useTimeSlot.ts b/apps/web/app/hooks/features/useTimeSlot.ts
@@ -9,7 +9,7 @@ import { useAuthenticateUser } from './useAuthenticateUser';
 import { deleteTimerLogsRequestAPI, getTimerLogsRequestAPI } from '@app/services/client/api';
 import { useUserProfilePage } from './useUserProfilePage';
 
-export function useTimeSlots() {
+export function useTimeSlots(id?: string) {
 	const { user } = useAuthenticateUser();
 	const [timeSlots, setTimeSlots] = useRecoilState(timeSlotsState);
 	const profile = useUserProfilePage();
@@ -20,12 +20,12 @@ export function useTimeSlots() {
 	const getTimeSlots = useCallback(() => {
 		const todayStart = moment().startOf('day').toDate();
 		const todayEnd = moment().endOf('day').toDate();
-		const employeeId = profile.member?.employeeId ?? '';
-		if (profile.userProfile?.id === user?.id || user?.role?.name?.toUpperCase() == 'MANAGER') {
+		const employeeId = id ? id : profile.member?.employeeId ;
+		if ( profile.userProfile?.id === user?.id || user?.role?.name?.toUpperCase() == 'MANAGER') {
 			queryCall({
 				tenantId: user?.tenantId ?? '',
 				organizationId: user?.employee.organizationId ?? '',
-				employeeId: employeeId,
+				employeeId: employeeId ?? '',
 				todayEnd,
 				todayStart
 			}).then((response) => {
@@ -36,6 +36,7 @@ export function useTimeSlots() {
 			});
 		}
 	}, [
+		id,
 		profile.member?.employeeId,
 		profile.userProfile?.id,
 		user?.id,

diff --git a/apps/web/app/interfaces/IScreenshoot.ts b/apps/web/app/interfaces/IScreenshoot.ts
@@ -10,5 +10,6 @@ export interface IScreenShootItem {
 	imageUrl: string;
 	percent: number | string;
 	showProgress?: boolean;
+	isTeamPage?: boolean
 	onShow: () => any;
 }
diff --git a/apps/web/lib/features/activity/apps.tsx b/apps/web/lib/features/activity/apps.tsx
@@ -3,12 +3,13 @@ import { AppVisitedSkeleton } from './components/app-visited-skeleton';
 import { groupAppsByHour } from '@app/helpers/array-data';
 import { useTranslations } from 'next-intl';
 import AppVisitedItem from './components/app-visited-Item';
-import { AppVisitedModal } from './components/app-visited-details';
+// import { AppVisitedModal } from './components/app-visited-details';
 
-export function AppsTab() {
-	const { visitedApps, loading } = useTimeDailyActivity('APP');
+export function AppsTab({ id}: {id?: string}) {
+	const { visitedApps, loading } = useTimeDailyActivity('APP', id);
 	const t = useTranslations();
 	const apps = groupAppsByHour(visitedApps);
+	console.log("INTO APP TAB");
 	return (
 		<div>
 			<div className="flex justify-end w-full">{/* TODO: Filters components */}</div>
@@ -28,13 +29,13 @@ export function AppsTab() {
 						<div>
 							{app.apps?.map((item, i) => (
 								<div key={i} className="w-full">
-									<AppVisitedModal>
+									{/* <AppVisitedModal> */}
 										<AppVisitedItem
 											app={item}
 											totalMilliseconds={app.totalMilliseconds}
 											type="APP"
 										/>
-									</AppVisitedModal>
+									{/* </AppVisitedModal> */}
 								</div>
 							))}
 						</div>

diff --git a/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx b/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
@@ -37,3 +37,38 @@ export const ScreenshootPerHour = ({
 		</div>
 	);
 };
+
+export const ScreenshootPerHourTeam = ({
+	timeSlots,
+	startedAt,
+	stoppedAt
+}: {
+	timeSlots: ITimerSlot[];
+	startedAt: string;
+	stoppedAt: string;
+}) => {
+	const { isOpen, closeModal, openModal } = useModal();
+	return (
+		<div className="p-4 my-4 rounded-md dark:bg-[#1E2025] border-[0.125rem] dark:border-[#FFFFFF0D]">
+			<h3 className="px-4">
+				{startedAt} - {stoppedAt}
+			</h3>
+			<div className="flex justify-start items-start flex-wrap ">
+				{timeSlots.map((el, i) => (
+					<div key={i} className={clsxm('min-w-[15rem] xl:w-1/6 p-4')}>
+						<ScreenshotItem
+							endTime={el.stoppedAt}
+							startTime={el.startedAt}
+							percent={el.percentage}
+							imageUrl={el.screenshots[0]?.thumbUrl}
+							onShow={() => openModal()}
+							idSlot={el.id}
+							isTeamPage
+						/>
+						<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={el} />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
diff --git a/apps/web/lib/features/activity/components/screenshot-item.tsx b/apps/web/lib/features/activity/components/screenshot-item.tsx
@@ -15,7 +15,8 @@ const ScreenshotItem = ({
 	percent,
 	startTime,
 	showProgress = true,
-	onShow
+	onShow,
+	isTeamPage = false
 }: IScreenShootItem) => {
 	const t = useTranslations();
 	const { deleteTimeSlots } = useTimeSlots();
@@ -24,7 +25,8 @@ const ScreenshotItem = ({
 		<div
 			className={clsxm(
 				'rounded-lg shadow-md hover:shadow-lg  border dark:border-[#26272C] dark:bg-[#191a20] overflow-hidden h-56 w-full',
-				!showProgress && '!h-48 dark:!bg-[#191a20]'
+				!showProgress && !isTeamPage && '!h-48 dark:!bg-[#191a20]',
+				isTeamPage && '!h-32'
 			)}
 		>
 			<div
@@ -44,7 +46,7 @@ const ScreenshotItem = ({
 					alt={`${new Date(startTime).toLocaleTimeString()} - ${new Date(endTime).toLocaleTimeString()}`}
 					width={400}
 					height={400}
-					className="w-full h-full"
+					className="w-full h-full object-cover"
 				/>
 			</div>
 			<div className={clsxm('w-full h-1/2 p-4 cursor-pointer', !showProgress && '!h-1/3')} onClick={onShow}>

diff --git a/apps/web/lib/features/activity/screenshoots.tsx b/apps/web/lib/features/activity/screenshoots.tsx
@@ -1,5 +1,5 @@
 import { ProgressBar } from 'lib/components';
-import { ScreenshootPerHour } from './components/screenshoots-per-hour';
+import { ScreenshootPerHour, ScreenshootPerHourTeam } from './components/screenshoots-per-hour';
 import { useTimeSlots } from '@app/hooks/features/useTimeSlot';
 import { groupDataByHour } from '@app/helpers/array-data';
 import { useTranslations } from 'next-intl';
@@ -47,3 +47,29 @@ export function ScreenshootTab() {
 		</div>
 	);
 }
+
+
+export function ScreenshootTeamTab({ id}: {id:string}) {
+	const { timeSlots, loading } = useTimeSlots(id);
+	const t = useTranslations();
+
+	return (
+		<div>
+			{groupDataByHour(timeSlots).map((hourData, i) => (
+				<ScreenshootPerHourTeam
+					key={i}
+					timeSlots={hourData.items}
+					startedAt={hourData.startedAt}
+					stoppedAt={hourData.stoppedAt}
+
+				/>
+			))}
+			{timeSlots.length < 1 && !loading && (
+				<div className="p-4 py-8 my-4 flex items-center justify-center rounded-md dark:bg-[#1E2025] border-[0.125rem] dark:border-[#FFFFFF0D]">
+					<h3>{t('timer.NO_SCREENSHOOT')}</h3>
+				</div>
+			)}
+			{loading && timeSlots.length < 1 && <ScreenshootSkeleton />}
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/activity/visited-sites.tsx b/apps/web/lib/features/activity/visited-sites.tsx
@@ -4,8 +4,8 @@ import { groupAppsByHour } from '@app/helpers/array-data';
 import { useTranslations } from 'next-intl';
 import AppVisitedItem from './components/app-visited-Item';
 
-export function VisitedSitesTab() {
-	const { visitedSites, loading } = useTimeDailyActivity('URL');
+export function VisitedSitesTab({ id }: { id?: string}) {
+	const { visitedSites, loading } = useTimeDailyActivity('URL', id);
 	const t = useTranslations();
 	const sites = groupAppsByHour(visitedSites);
 	return (

diff --git a/apps/web/lib/features/index.ts b/apps/web/lib/features/index.ts
@@ -25,6 +25,7 @@ export * from './team/teams-dropdown';
 export * from './team/team-item';
 export * from './unverified-email';
 export * from './team/team-invitations';
+export * from './team/user-team-card/task-skeleton';
 
 export * from './auth-user-task-input';
 export * from './user-nav-menu';

diff --git a/apps/web/lib/features/team-members-block-view.tsx b/apps/web/lib/features/team-members-block-view.tsx
@@ -4,7 +4,7 @@ import { Transition } from '@headlessui/react';
 import { UserTeamBlock } from './team/user-team-block';
 import { useRecoilValue } from 'recoil';
 import { taskBlockFilterState } from '@app/stores/task-filter';
-import { UserTeamCardSkeleton } from './team/user-team-card';
+import { UserTeamCardSkeleton } from './team/user-team-card/task-skeleton';
 
 interface Props {
 	teamMembers: OT_Member[];