diff --git a/apps/web/app/hooks/features/useTimeDailyActivity.ts b/apps/web/app/hooks/features/useTimeDailyActivity.ts index 7b2fa9251..dff66b892 100644 --- 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 index cb919849a..949c95aed 100644 --- 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 index d0418bcc2..fd30efe8d 100644 --- 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 index 8bbb5845f..c83eca996 100644 --- 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 (
{/* TODO: Filters components */}
@@ -28,13 +29,13 @@ export function AppsTab() {
{app.apps?.map((item, i) => (
- + {/* */} - + {/* */}
))}
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 ad2a173b2..1d4dfc476 100644 --- 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 = ({
); }; + +export const ScreenshootPerHourTeam = ({ + timeSlots, + startedAt, + stoppedAt +}: { + timeSlots: ITimerSlot[]; + startedAt: string; + stoppedAt: string; +}) => { + const { isOpen, closeModal, openModal } = useModal(); + return ( +
+

+ {startedAt} - {stoppedAt} +

+
+ {timeSlots.map((el, i) => ( +
+ openModal()} + idSlot={el.id} + isTeamPage + /> + +
+ ))} +
+
+ ); +}; diff --git a/apps/web/lib/features/activity/components/screenshot-item.tsx b/apps/web/lib/features/activity/components/screenshot-item.tsx index c976108d9..6c69cb488 100644 --- 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 = ({
diff --git a/apps/web/lib/features/activity/screenshoots.tsx b/apps/web/lib/features/activity/screenshoots.tsx index 4c9db24c4..0c45e14b2 100644 --- 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() {
); } + + +export function ScreenshootTeamTab({ id}: {id:string}) { + const { timeSlots, loading } = useTimeSlots(id); + const t = useTranslations(); + + return ( +
+ {groupDataByHour(timeSlots).map((hourData, i) => ( + + ))} + {timeSlots.length < 1 && !loading && ( +
+

{t('timer.NO_SCREENSHOOT')}

+
+ )} + {loading && timeSlots.length < 1 && } +
+ ); +} diff --git a/apps/web/lib/features/activity/visited-sites.tsx b/apps/web/lib/features/activity/visited-sites.tsx index 5738cd177..b38a32506 100644 --- 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 index 07b6641b1..5fc67fb4d 100644 --- 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 index 5ecad073e..94b623e09 100644 --- 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[]; diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx index b661d0d4d..dc1f88829 100644 --- a/apps/web/lib/features/team/user-team-card/index.tsx +++ b/apps/web/lib/features/team/user-team-card/index.tsx @@ -1,9 +1,11 @@ +'use client'; + import { secondsToTime } from '@app/helpers'; import { useCollaborative, useTMCardTaskEdit, useTaskStatistics, useTeamMemberCard } from '@app/hooks'; import { IClassName, IOrganizationTeamList } from '@app/interfaces'; import { timerSecondsState } from '@app/stores'; import { clsxm } from '@app/utils'; -import { Card, HorizontalSeparator, InputField, Text, Tooltip, VerticalSeparator } from 'lib/components'; +import { Card, HorizontalSeparator, InputField, Text, VerticalSeparator } from 'lib/components'; import { DraggerIcon } from 'lib/components/svgs'; import { TaskTimes, TodayWorkedTime } from 'lib/features'; import { useTranslations } from 'next-intl'; @@ -12,36 +14,8 @@ import { TaskEstimateInfo } from './task-estimate'; import { TaskInfo } from './task-info'; import { UserInfo } from './user-info'; import { UserTeamCardMenu } from './user-team-card-menu'; - -export function UserTeamCardHeader() { - const t = useTranslations(); - return ( -
- {/*
  • {t('common.STATUS')}
    • */} -
    {t('common.NAME')}
    -
    -
    {t('common.TASK')}
    -
    - -
    - {t('task.taskTableHead.TASK_WORK.TITLE')} -
    - {t('common.TASK')} -
    -     -
    -
    {t('common.ESTIMATE')}
    -
    - -
    - {t('task.taskTableHead.TOTAL_WORK.TITLE')} -
    - {t('common.TODAY')} -
    -     -
    - ); -} +import React from 'react'; +import UserTeamActivity from './user-team-card-activity'; type IUserTeamCard = { active?: boolean; @@ -62,10 +36,10 @@ export function UserTeamCard({ member, publicTeam = false, draggable = false, - onDragStart, - onDragEnd, - onDragEnter, - onDragOver, + onDragStart = () => null, + onDragEnd = () => null, + onDragEnter = () => null, + onDragOver = () => null, currentExit = false }: IUserTeamCard) { const t = useTranslations(); @@ -76,6 +50,7 @@ export function UserTeamCard({ const seconds = useRecoilValue(timerSecondsState); const { activeTaskTotalStat, addSeconds } = useTaskStatistics(seconds); + const [showActivity, setShowActivity] = React.useState(false); let totalWork = <>; if (memberInfo.isAuthUser) { @@ -127,7 +102,7 @@ export function UserTeamCard({ ); } - -export function UserTeamCardSkeleton() { - return ( -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - ); -} - -export function InviteUserTeamSkeleton() { - return ( -
    -
    -
    -
    -
    -
    -
    -
    - ); -} diff --git a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx new file mode 100644 index 000000000..186766258 --- /dev/null +++ b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx @@ -0,0 +1,71 @@ +import { Tooltip } from 'lib/components'; +import { useTranslations } from 'next-intl'; + +export function UserTeamCardSkeleton() { + return ( +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + ); +} + +export function InviteUserTeamSkeleton() { + return ( +
    +
    +
    +
    +
    +
    +
    +
    + ); +} + +export function UserTeamCardHeader() { + const t = useTranslations(); + return ( +
    + {/*
  • {t('common.STATUS')}
    • */} +
    {t('common.NAME')}
    +
    +
    {t('common.TASK')}
    +
    + +
    + {t('task.taskTableHead.TASK_WORK.TITLE')} +
    + {t('common.TASK')} +
    +     +
    +
    {t('common.ESTIMATE')}
    +
    + +
    + {t('task.taskTableHead.TOTAL_WORK.TITLE')} +
    + {t('common.TODAY')} +
    +     +
    + ); +} diff --git a/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx b/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx new file mode 100644 index 000000000..7dca90bdb --- /dev/null +++ b/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx @@ -0,0 +1,83 @@ +import { Transition } from '@headlessui/react'; +import { HorizontalSeparator, ProgressBar } from 'lib/components'; +import React from 'react'; +import { useTimeSlots } from '@app/hooks/features/useTimeSlot'; +import { useTranslations } from 'next-intl'; +import { OT_Member } from '@app/interfaces'; +import { Tab } from '@headlessui/react'; +import { ActivityFilters } from '@app/constants'; +import { clsxm } from '@app/utils'; +import { ScreenshootTeamTab } from 'lib/features/activity/screenshoots'; +import { AppsTab } from 'lib/features/activity/apps'; +import { VisitedSitesTab } from 'lib/features/activity/visited-sites'; + +const UserTeamActivity = ({ member, showActivity }: { member: OT_Member | undefined; showActivity: boolean }) => { + const id = member?.employeeId ?? ''; + const { timeSlots } = useTimeSlots(id); + const t = useTranslations(); + + const activityPercent = timeSlots.reduce((acc, el) => acc + el.percentage, 0) / timeSlots.length; + return ( + +
    + +

    Activity for Today

    +
    +
    +
    + {t('timer.TIME_ACTIVITY')} +

    {activityPercent ? activityPercent.toFixed(2): "00"} %

    + +
    + +
    +
    + + + {Object.values(ActivityFilters) + .filter((el) => el !== 'Tasks') + .map((filter: string) => ( + + clsxm( + 'w-full rounded-lg py-2.5 text-sm font-medium leading-5', + ' focus:outline-none focus:ring-2', + selected + ? 'bg-white dark:bg-dark text-blue-700 shadow' + : ' hover:bg-white/[0.50]' + ) + } + > + {filter} + + ))} + + + + + + + + + + + + + +
    +
    +
    +     + ); +}; + +export default UserTeamActivity;