diff --git a/apps/web/lib/components/separator.tsx b/apps/web/lib/components/separator.tsx index 7c346140d..fb26b2f0c 100644 --- a/apps/web/lib/components/separator.tsx +++ b/apps/web/lib/components/separator.tsx @@ -7,8 +7,8 @@ export const VerticalSeparator = ({ className }: IClassName) => { export const HorizontalSeparator = ({ className }: IClassName) => { return ( -
-
+
+
); }; diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx index 5f2cff2b0..01c05d44a 100644 --- a/apps/web/lib/features/task/task-displays.tsx +++ b/apps/web/lib/features/task/task-displays.tsx @@ -9,9 +9,35 @@ type Props = { taskTitleClassName?: string; taskNumberClassName?: string; dash?: boolean; + showSize?: boolean; }; -export function TaskNameInfoDisplay({ task, className, taskTitleClassName, taskNumberClassName, dash = false }: Props) { +const taskSizeColor = { + 'x-large': { color: 'text-red-700', short: 'XXL' }, + large: { color: 'text-orange-700', short: 'XL' }, + medium: { color: 'text-yellow-500', short: 'M' }, + small: { color: 'text-blue-700', short: 'S' }, + tiny: { color: 'text-blue-500', short: 'XS' } +}; + +export function TaskNameInfoDisplay({ + task, + className, + taskTitleClassName, + taskNumberClassName, + dash = false, + showSize = false +}: Props) { + const size = + task && task?.size && ['x-large', 'large', 'medium', 'small', 'tiny'].includes(task?.size.toLowerCase()) + ? task?.size.toLowerCase() + : 'medium'; + + // @ts-expect-error + const color: string = taskSizeColor[size].color; + // @ts-expect-error + const short: string = taskSizeColor[size].short; + console.log(task?.size); return ( 60) || false}> @@ -29,7 +55,8 @@ export function TaskNameInfoDisplay({ task, className, taskTitleClassName, taskN #{task?.taskNumber} {dash && '-'} - {task?.title.slice(0, 90)} + {task?.title} + {showSize && {size && ' ' + short}} diff --git a/apps/web/lib/features/task/task-times.tsx b/apps/web/lib/features/task/task-times.tsx index 12e703c23..e3382025f 100644 --- a/apps/web/lib/features/task/task-times.tsx +++ b/apps/web/lib/features/task/task-times.tsx @@ -64,7 +64,7 @@ function TimeInfo({ <> {showDaily && (
- {t('common.TODAY')}: + {t('common.TODAY')}: {daily.h}h : {daily.m}m @@ -78,7 +78,7 @@ function TimeInfo({ // showDaily && ['text-sm'] )} > - {t('common.TOTAL')}: + {t('common.TOTAL')}: {total.h}h : {total.m}m @@ -101,10 +101,12 @@ function TimeBlockInfo({ }) { const { t } = useTranslation(); return ( -
+
{showDaily && (
- {t('common.TODAY')}: + + {t('common.WORKED_ON_TASK')} {t('common.TODAY')}: + {daily.h}h : {daily.m}m @@ -118,7 +120,9 @@ function TimeBlockInfo({ // showDaily && ['text-sm'] )} > - {t('common.TOTAL')}: + + {t('common.WORKED_ON_TASK')} {t('common.TOTAL')}: + {total.h}h : {total.m}m diff --git a/apps/web/lib/features/team-members-block-view.tsx b/apps/web/lib/features/team-members-block-view.tsx index 15ea1b023..4ca828133 100644 --- a/apps/web/lib/features/team-members-block-view.tsx +++ b/apps/web/lib/features/team-members-block-view.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { OT_Member } from '@app/interfaces'; import { Transition } from '@headlessui/react'; import { UserTeamBlock } from './team/user-team-block'; +import UserTeamCardSkeletonCard from '@components/shared/skeleton/UserTeamCardSkeleton'; interface Props { teamMembers: OT_Member[]; @@ -25,7 +26,7 @@ const TeamMembersBlockView: React.FC = ({ teamMembers: members, publicTea > {/* */} -
+
{members.map((member) => { return (
@@ -45,6 +46,25 @@ const TeamMembersBlockView: React.FC = ({ teamMembers: members, publicTea ); })}
+
+ + {new Array(3).fill(0).map((_, i) => { + return ( +
+ +
+ ); + })} + +
); }; diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx index 2d5e939bf..601e774a2 100644 --- a/apps/web/lib/features/team-members-table-view.tsx +++ b/apps/web/lib/features/team-members-table-view.tsx @@ -55,8 +55,6 @@ const TeamMembersTableView = ({ [] ); - const footerRows = React.useMemo(() => [], []); - const sortedTeamMembers: OT_Member[] = []; if (currentUser) { sortedTeamMembers.push(currentUser); @@ -64,15 +62,17 @@ const TeamMembersTableView = ({ sortedTeamMembers.push(...teamMembers); return ( - []} - data={sortedTeamMembers} - footerRows={footerRows} - noResultsMessage={{ - heading: 'No team members found', - content: 'Try adjusting your search or filter to find what you’re looking for.' - }} - /> + <> + []} + data={sortedTeamMembers} + noResultsMessage={{ + heading: 'No team members found', + content: 'Try adjusting your search or filter to find what you’re looking for.' + }} + /> + + ); }; @@ -81,10 +81,10 @@ function Invite() { const { openModal, isOpen, closeModal } = useModal(); return ( - <> +
- +
); } diff --git a/apps/web/lib/features/team-members.tsx b/apps/web/lib/features/team-members.tsx index eda098ff0..b5212fed2 100644 --- a/apps/web/lib/features/team-members.tsx +++ b/apps/web/lib/features/team-members.tsx @@ -18,12 +18,13 @@ type TeamMembersProps = { export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.CARDS }: TeamMembersProps) { const { user } = useAuthenticateUser(); const activeFilter = useRecoilValue(taskBlockFilterState); - const { activeTeam, teamsFetching } = useOrganizationTeams(); + const { activeTeam } = useOrganizationTeams(); + const { teamsFetching } = useOrganizationTeams(); + const members = activeTeam?.members || []; + + const blockViewMembers = + activeFilter == 'all' ? members : members.filter((m) => m.timerStatus == activeFilter) || []; - const members = - activeFilter == 'all' - ? activeTeam?.members || [] - : activeTeam?.members.filter((m) => m.timerStatus == activeFilter) || []; const currentUser = members.find((m) => m.employee.userId === user?.id); const $members = members.filter((member) => member.id !== currentUser?.id); const $teamsFetching = teamsFetching && members.length === 0; @@ -80,7 +81,7 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView. case view == IssuesView.BLOCKS: teamMembersView = (
- {/* Show user name, email and image */}
diff --git a/apps/web/lib/features/team/user-team-block/index.tsx b/apps/web/lib/features/team/user-team-block/index.tsx index 326f8fcc4..a98d3ec59 100644 --- a/apps/web/lib/features/team/user-team-block/index.tsx +++ b/apps/web/lib/features/team/user-team-block/index.tsx @@ -57,9 +57,9 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }: ); totalWork = ( -
- {t('common.TOTAL_TIME')}: - +
+ {t('common.TOTAL_WORKED_TODAY')}: + {h}h : {m}m
@@ -87,20 +87,19 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }: {/* flex */}
-
- - {/* total time */} + + {/* total time */} +
{totalWork} +
{menu}
- {/* more */} -
{menu}
@@ -109,7 +108,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }: @@ -124,7 +123,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }: memberInfo={memberInfo} task={memberInfo.memberTask} isAuthUser={memberInfo.isAuthUser} - className="2xl:w-48 3xl:w-[12rem] w-full lg:px-4 px-2 flex flex-col gap-y-[1.125rem] justify-center" + className=" w-full px-2 flex flex-col gap-y-[1.125rem] justify-center" isBlock={true} /> {/* today time */} @@ -135,7 +134,7 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }: edition={taskEdition} activeAuthTask={true} showTime={false} - className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64" + className="w-1/5" radial={true} />
diff --git a/apps/web/lib/features/team/user-team-block/task-info.tsx b/apps/web/lib/features/team/user-team-block/task-info.tsx index 3d8e73a5c..2438e9fba 100644 --- a/apps/web/lib/features/team/user-team-block/task-info.tsx +++ b/apps/web/lib/features/team/user-team-block/task-info.tsx @@ -29,17 +29,12 @@ export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props) } export function TaskBlockInfo({ className, memberInfo, edition, publicTeam }: Props) { - const task = edition.task; - return (
{/* task */}
{edition.task && ( - <> - -

{task?.size}

- + )} {!edition.task &&
--
}
@@ -74,6 +69,7 @@ function TaskDetailAndEdition({ edition, publicTeam }: Props) { onClick={publicTeam ? () => null : () => task && router.push(`/task/${task?.id}`)} >
setActiveFilter('all')} >

All members

-
{members?.length} -
+
setActiveFilter('idle')} >

Not working

-
{membersStatusNumber.idle} -
+
setActiveFilter('running')} >

Working

-
{membersStatusNumber.running} -
+
setActiveFilter('pause')} >

Paused

-
{membersStatusNumber.pause} -
+
setActiveFilter('online')} >

Online

-
{membersStatusNumber.online} -
+
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx index 81183b5ef..b92efd53f 100644 --- a/apps/web/pages/index.tsx +++ b/apps/web/pages/index.tsx @@ -45,7 +45,7 @@ function MainPage() { )} onClick={() => setView(IssuesView.CARDS)} > - +