Merge pull request #2086 from ever-co/develop

Release

.gitignore

@@ -72,3 +72,5 @@ Thumbs.db
 
 # Local Netlify folder
 .netlify
+
+/.nx

apps/web/app/api/timer/daily/route.ts

@@ -22,7 +22,8 @@ export async function GET(req: Request) {
 		todayEnd: endDate,
 		todayStart: startDate,
 		type,
-		bearer_token: access_token
+		bearer_token: access_token,
+		activityLevel: { start: 0, end: 100 }
 	});
 
 	return $res(data);

apps/web/app/hooks/features/useTimeDailyActivity.ts

@@ -3,14 +3,15 @@
 import { useCallback, useEffect } from 'react';
 import { useQuery } from '../useQuery';
 import { useRecoilState } from 'recoil';
-import { timeAppsState } from '@app/stores/time-slot';
+import { timeAppsState, timeVisitedSitesState } from '@app/stores/time-slot';
 import moment from 'moment';
 import { useAuthenticateUser } from './useAuthenticateUser';
 import { getTimerDailyRequestAPI } from '@app/services/client/api';
 
 export function useTimeDailyActivity(type: string) {
 	const { user } = useAuthenticateUser();
 	const [visitedApps, setVisitedApps] = useRecoilState(timeAppsState);
+	const [visitedSites, setVisitedSites] = useRecoilState(timeVisitedSitesState);
 
 	const { loading, queryCall } = useQuery(getTimerDailyRequestAPI);
 
@@ -28,19 +29,20 @@ export function useTimeDailyActivity(type: string) {
 		})
 			.then((response) => {
 				if (response.data) {
-					console.log(response.data);
-					setVisitedApps(response.data);
+					if (type == 'APP') setVisitedApps(response.data);
+					else setVisitedSites(response.data);
 				}
 			})
 			.catch((err) => console.log(err));
-	}, [queryCall, setVisitedApps, user, type]);
+	}, [queryCall, setVisitedApps, setVisitedSites, user, type]);
 
 	useEffect(() => {
 		getVisitedApps();
 	}, [user, getVisitedApps]);
 
 	return {
 		visitedApps,
+		visitedSites,
 		getVisitedApps,
 		loading
 	};

apps/web/app/hooks/features/useTimeSlot.ts

@@ -8,7 +8,7 @@ import moment from 'moment';
 import { useAuthenticateUser } from './useAuthenticateUser';
 import { deleteTimerLogsRequestAPI, getTimerLogsRequestAPI } from '@app/services/client/api';
 
-export function useTimeSlots(ids?: string[]) {
+export function useTimeSlots() {
 	const { user } = useAuthenticateUser();
 	const [timeSlots, setTimeSlots] = useRecoilState(timeSlotsState);
 
@@ -26,13 +26,14 @@ export function useTimeSlots(ids?: string[]) {
 			todayStart
 		}).then((response) => {
 			if (response.data) {
-				setTimeSlots(response.data.timeSlots);
+				// @ts-expect-error
+				setTimeSlots(response.data[0].timeSlots);
 			}
 		});
 	}, [queryCall, setTimeSlots, user]);
 
-	const deleteTimeSlots = useCallback(() => {
-		if (ids?.length) {
+	const deleteTimeSlots = useCallback(
+		(ids: string[]) => {
 			queryDeleteCall({
 				tenantId: user?.tenantId ?? '',
 				organizationId: user?.employee.organizationId ?? '',
@@ -41,8 +42,9 @@ export function useTimeSlots(ids?: string[]) {
 				const updatedSlots = timeSlots.filter((el) => (!ids?.includes(el.id) ? el : null));
 				setTimeSlots(updatedSlots);
 			});
-		}
-	}, [queryDeleteCall, setTimeSlots, ids, timeSlots, user]);
+		},
+		[queryDeleteCall, setTimeSlots, timeSlots, user]
+	);
 
 	useEffect(() => {
 		getTimeSlots();

apps/web/app/interfaces/IScreenshoot.ts

@@ -4,6 +4,7 @@ export interface IScreenshootPerHour {
 }
 
 export interface IScreenShootItem {
+	idSlot: string;
 	startTime: Date | string;
 	endTime: Date | string;
 	imageUrl: string;

apps/web/app/interfaces/timer/ITimerApp.ts

@@ -1,3 +1,5 @@
+import { IEmployee } from '../IEmployee';
+
 export interface ITimerApps {
 	sessions: string;
 	duration: string;
@@ -6,3 +8,28 @@ export interface ITimerApps {
 	time: string;
 	title: string;
 }
+
+export interface IDetailTimerSite {
+	id: string;
+	createdAt: Date | string;
+	updatedAt: Date | string;
+	deletedAt: string;
+	isActive: boolean;
+	isArchived: boolean;
+	tenantId: string;
+	organizationId: string;
+	title: string;
+	description: string;
+	metaData: object;
+	date: string;
+	time: string;
+	duration: string;
+	type: string;
+	source: string;
+	recordedAt: Date | null;
+	employeeId: string;
+	projectId: string;
+	timeSlotId: string;
+	taskId: string;
+	employee: IEmployee;
+}

apps/web/app/services/client/api/activity/time-slots.ts

@@ -27,7 +27,7 @@ export async function getTimerLogsRequestAPI({
 		? `/timesheet/statistics/time-slots?${query.toString()}`
 		: `/timer/slots?${query.toString()}`;
 
-	return get<ITimerSlotDataRequest>(endpoint);
+	return get<ITimerSlotDataRequest | ITimerSlotDataRequest[]>(endpoint);
 }
 
 export async function deleteTimerLogsRequestAPI({

apps/web/app/services/server/requests/timer/daily.ts

@@ -8,7 +8,8 @@ export function getEmployeeDailyRequest({
 	todayEnd,
 	todayStart,
 	employeeId,
-	type
+	type,
+	activityLevel
 }: {
 	bearer_token: string;
 	tenantId: string;
@@ -17,15 +18,19 @@ export function getEmployeeDailyRequest({
 	todayStart: Date;
 	employeeId: string;
 	type: string;
+	activityLevel: { start: number; end: number };
 }) {
 	const params = {
 		tenantId: tenantId,
 		organizationId: organizationId,
 		'employeeIds[0]': employeeId,
 		startDate: todayStart.toISOString(),
 		endDate: todayEnd.toISOString(),
-		'types[0]': type
+		'types[0]': type,
+		'activityLevel[start]': activityLevel.start.toString(),
+		'activityLevel[end]': activityLevel.end.toString()
 	};
+
 	const query = new URLSearchParams(params);
 	return serverFetch<ITimerSlotDataRequest>({
 		path: `/timesheet/activity/daily?${query.toString()}`,

apps/web/app/services/server/requests/timer/timer-slot.ts

@@ -20,8 +20,8 @@ export function getEmployeeTimeSlotsRequest({
 		tenantId: tenantId,
 		organizationId: organizationId,
 		employeeId,
-		todayEnd: todayEnd.toISOString(),
-		todayStart: todayStart.toISOString()
+		startDate: todayEnd.toISOString(),
+		endDate: todayStart.toISOString()
 	};
 	const query = new URLSearchParams(params);
 	return serverFetch<ITimerSlotDataRequest>({

apps/web/app/stores/time-slot.ts

@@ -11,3 +11,8 @@ export const timeAppsState = atom<ITimerApps[]>({
 	key: 'timeAppsState',
 	default: []
 });
+
+export const timeVisitedSitesState = atom<ITimerApps[]>({
+	key: 'timeVisitedSiteState',
+	default: []
+});

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

@@ -27,7 +27,7 @@ export function AppsTab() {
 						<div>
 							{app.apps?.map((item, i) => (
 								<div key={i} className="w-full">
-									<AppVisitedItem app={item} totalMilliseconds={app.totalMilliseconds} />
+									<AppVisitedItem app={item} totalMilliseconds={app.totalMilliseconds} type="APP"/>
 								</div>
 							))}
 						</div>

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

@@ -1,14 +1,25 @@
 import { formatDateString, secondsToTime } from '@app/helpers';
 import { ITimerApps } from '@app/interfaces/timer/ITimerApp';
 import { ProgressBar } from 'lib/components';
+import Link from 'next/link';
 import React from 'react';
 
-const AppVisitedItem = ({ app, totalMilliseconds }: { app: ITimerApps; totalMilliseconds: number }) => {
+const AppVisitedItem = ({
+	app,
+	totalMilliseconds,
+	type
+}: {
+	app: ITimerApps;
+	totalMilliseconds: number;
+	type: string;
+}) => {
 	const { h, m, s } = secondsToTime(+app.duration);
 	const percent = ((+app.duration * 100) / totalMilliseconds).toFixed(2);
 	return (
 		<div className="hover:dark:bg-[#26272C] border dark:border-[#26272C] bg-gray-200 dark:bg-[#191a20] p-4 rounded-md flex justify-between apps-center my-2">
-			<p className="text-lg flex-1">{app.title}</p>
+			<p className="text-lg flex-1">
+				{type == 'SITE' ? <Link href={app.title}>{app.title}</Link> : <span>{app.title}</span>}
+			</p>
 			<p className="text-lg text-center 2xl:w-56 3xl:w-64">
 				{formatDateString(new Date(app.date).toISOString())} - {app.time}
 			</p>

apps/web/lib/features/activity/components/screenshoots-per-hour.tsx

@@ -28,6 +28,7 @@ export const ScreenshootPerHour = ({
 							percent={el.percentage}
 							imageUrl={el.screenshots[0]?.thumbUrl}
 							onShow={() => openModal()}
+							idSlot={el.id}
 						/>
 						<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={el} />
 					</div>

apps/web/lib/features/activity/components/screenshot-details.tsx

@@ -31,16 +31,17 @@ const ScreenshotDetailsModal = ({
 				<p className="font-semibold py-1">
 					{slot.percentage} {t('timer.PERCENT_OF_MINUTES')}
 				</p>
-				<div className="my-2 flex overflow-x-auto">
+				<div className="my-2 flex w-full overflow-x-auto">
 					{slot.screenshots.map((screenshot, i) => (
-						<div key={i} className="w-1/3 p-2">
+						<div key={i} className="w-1/3 min-w-[20rem] p-2">
 							<Tooltip
 								label={screenshot.description}
 								placement="left-start"
 								type="VERTICAL"
 								labelContainerClassName="w-full"
 							>
 								<ScreenshotItem
+									idSlot={slot.id}
 									endTime={slot.stoppedAt}
 									startTime={screenshot.recordedAt}
 									imageUrl={screenshot.thumbUrl}
@@ -62,6 +63,37 @@ const ScreenshotDetailsModal = ({
 						</div>
 					))}
 				</div>
+				<div>
+					<h4 className="text-lg font-semibold">{t('timer.OTHER_DETAILS')}</h4>
+					<div className="flex gap-2">
+						<p>
+							<span className="font-semibold mx-2">{t('timer.KEYBOARD')}</span>
+							<span>
+								{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}%
+							</span>
+						</p>
+						<p className="rounded-lg px-1 mb-1 text-white ">
+							{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 ? (
+								<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>
+							)}
+						</p>
+					</div>
+				</div>
 			</div>
 		</Modal>
 	);