Release

apps/web/app/[locale]/kanban/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { KanbanTabs } from '@app/constants';
-import { useOrganizationTeams } from '@app/hooks';
+import { useAuthenticateUser, useModal, useOrganizationTeams } from '@app/hooks';
 import { useKanban } from '@app/hooks/features/useKanban';
 import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton';
 import { withAuthentication } from 'lib/app/authenticator';
@@ -17,9 +17,12 @@ import { clsxm } from '@app/utils';
 import HeaderTabs from '@components/pages/main/header-tabs';
 import { AddIcon, SearchNormalIcon, SettingFilterIcon, PeoplesIcon } from 'assets/svg';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@components/ui/select';
+import { InviteFormModal } from 'lib/features/team/invite/invite-form-modal';
+import { userTimezone } from '@app/helpers';
 
 const Kanban = () => {
 	const { data } = useKanban();
+
 	const { activeTeam } = useOrganizationTeams();
 	const t = useTranslations();
 	const params = useParams<{ locale: string }>();
@@ -47,6 +50,9 @@ const Kanban = () => {
 		{ name: t('common.YESTERDAY'), value: KanbanTabs.YESTERDAY },
 		{ name: t('common.TOMORROW'), value: KanbanTabs.TOMORROW }
 	];
+	const { user } = useAuthenticateUser();
+	const { openModal, isOpen, closeModal } = useModal();
+	const timezone = userTimezone();
 
 	return (
 		<>
@@ -67,7 +73,10 @@ const Kanban = () => {
 							{t('common.KANBAN')} {t('common.BOARD')}
 						</h1>
 						<div className="flex w-fit items-center space-x-2">
-							<strong className="text-gray-400">08:00 ( UTC +04:30 )</strong>
+							<strong className="text-gray-400">
+								{`(`}
+								{timezone.split('(')[1]}
+							</strong>
 							<div className="mt-1">
 								<Separator />
 							</div>
@@ -76,7 +85,10 @@ const Kanban = () => {
 								<Separator />
 							</div>
 
-							<button className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white">
+							<button
+								onClick={openModal}
+								className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
+							>
 								{/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
 								<AddIcon className="w-6 h-6 text-foreground" />
 							</button>
@@ -180,6 +192,7 @@ const Kanban = () => {
 					)}
 				</div>
 			</MainLayout>
+			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);
 };

apps/web/app/[locale]/page-component.tsx

@@ -78,7 +78,7 @@ function MainPage() {
 					<TeamInvitations />
 				</MainHeader>
 
-				<div className={`z-50 bg-white dark:bg-[#191A20] pt-5 ${view !== IssuesView.CARDS ? 'pb-7' : ''}`}>
+				<div className={`z-50 bg-white dark:bg-[#191A20] pt-5 ${view == IssuesView.TABLE ? 'pb-7' : ''}`}>
 					<Container fullWidth={fullWidth}>
 						{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
 						{view === IssuesView.CARDS && isTeamMember ? (

apps/web/app/[locale]/settings/personal/page.tsx

@@ -11,7 +11,7 @@ const Personal = () => {
 	const t = useTranslations();
 
 	return (
-		<>
+		<div className="overflow-auto pb-16">
 			<Link href={'/settings/team'} className="w-full">
 				<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
 					Go to Team settings
@@ -43,7 +43,7 @@ const Personal = () => {
 			>
 				<DangerZone />
 			</Accordian>
-		</>
+		</div>
 	);
 };
 export default withAuthentication(Personal, { displayName: 'Personal' });

apps/web/app/[locale]/settings/team/page.tsx

@@ -23,7 +23,7 @@ const Team = () => {
 	const { isTeamMember, activeTeam } = useOrganizationTeams();
 	const { isTeamManager } = useIsMemberManager(user);
 	return (
-		<>
+		<div className="overflow-auto pb-16">
 			{isTeamMember ? (
 				<>
 					<Link href={'/settings/personal'} className="w-full">
@@ -110,7 +110,7 @@ const Team = () => {
 					</Card>
 				</div>
 			)}
-		</>
+		</div>
 	);
 };
 

apps/web/components/ui/svgs/circular-progress.tsx

@@ -44,7 +44,7 @@ export default function CircularProgress({
 					className="absolute text-xs font-normal text-black dark:text-white rotate-90"
 					x-text={`${percentage}%`}
 				>
-					{percentage}H
+					{percentage}%{' '}
 				</span>
 			</div>
 		</>

apps/web/lib/components/auto-complete-dropdown.tsx

@@ -59,6 +59,10 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 			if (event.key === 'Enter' && handleAddNew && useHandleKeyUp) {
 				handleAddNew(query);
 			}
+
+			if (event.key === 'Escape') {
+				handleAddNew(query);
+			}
 		},
 		[query, handleAddNew, useHandleKeyUp]
 	);
@@ -70,7 +74,7 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 					placeholder={placeholder}
 					onChange={(event) => setQuery(event.target.value)}
 					className={clsxm(
-						'input-border',
+						'input-border ',
 						'w-full flex justify-between rounded-[0.625rem] px-3 py-2 text-sm items-center bg-transparent',
 						'bg-light--theme-light dark:bg-dark--theme-light outline-none',
 						'font-normal',
@@ -97,9 +101,9 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 						)}
 					>
 						<Card
-							shadow="custom"
+							shadow="bigger"
 							className="md:px-4 py-4 rounded-[12px]"
-							style={{ boxShadow: '0px 14px 39px rgba(0, 0, 0, 0.12)' }}
+							style={{ boxShadow: '0px 14px 39px rgba(0, 0, 0, 0.15)' }}
 						>
 							{/* This should only show when New item needs to be created */}
 							{query && handleAddNew && (

apps/web/lib/components/image-overlapper.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link';
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
 import Image from 'next/image';
-import { Tooltip } from 'lib/components';
+import Link from 'next/link';
 import Skeleton from 'react-loading-skeleton';
-
+import { Tooltip } from './tooltip';
 export interface ImageOverlapperProps {
 	id: string;
 	url: string;
@@ -18,56 +18,81 @@ export default function ImageOverlapper({
 	radius?: number;
 	displayImageCount?: number;
 }) {
-	const imageRadius = radius;
+	// Split the array into two arrays based on the display number
+	const firstArray = images.slice(0, displayImageCount);
+	const widthCalculate = images.slice(0, 5);
+	const secondArray = images.slice(displayImageCount);
+	const isMoreThanDisplay = images.length > displayImageCount;
 	const imageLength = images.length;
-	const numberOfImagesDisplayed = displayImageCount;
-	const totalLength = (imageLength + 1) * imageRadius;
-
-	const stackImages = (index: number, length: number) => {
-		const total_length = (length + 1) * imageRadius;
-		return {
-			zIndex: (index + 1).toString(),
-			right: `calc(${total_length - imageRadius * (index + 2)}px)`
-		};
-	};
 
+	if (imageLength == 0) {
+		return <Skeleton height={40} width={40} borderRadius={100} className="rounded-full dark:bg-[#353741]" />;
+	}
 	return (
-		<div className="relative ">
-			{imageLength > 0 ? (
-				<div
-					className="flex h-fit flex-row justify-end items-center relative"
-					style={{
-						width: `${totalLength}px`
-					}}
-				>
-					{images.map((image: ImageOverlapperProps, index: number) => {
-						if (index < numberOfImagesDisplayed) {
-							return (
-								<Link href={`/profile/${image.id}`} className="relative w-[40px] h-[40px]" key={index}>
-									<Tooltip label={image.alt}>
-										<Image
-											src={image.url}
-											alt={`${image.alt} avatar`}
-											fill={true}
-											className="absolute rounded-full border-2 border-white"
-											style={stackImages(index, imageLength)}
-										/>
-									</Tooltip>
-								</Link>
-							);
-						}
-					})}
-					{images.length > numberOfImagesDisplayed && (
+		<div
+			style={{
+				width:
+					imageLength == 1 ? 40 : isMoreThanDisplay ? widthCalculate.length * 33 : widthCalculate.length * 35
+			}}
+			className="relative "
+		>
+			{firstArray.map((image, index) => (
+				<Link key={index} href={`/profile/${image.id}`}>
+					<div
+						className="absolute hover:!z-20 transition-all hover:scale-110"
+						style={{ zIndex: index + 1, left: index * 30, top: isMoreThanDisplay ? -8 : -16 }}
+					>
+						<Tooltip label={image.alt} placement="top">
+							<Image
+								src={image.url}
+								alt={`${image.alt} avatar`}
+								width={80}
+								height={80}
+								style={{ borderRadius: radius }}
+								className="!h-10 !w-10 border-2 border-white"
+							/>
+						</Tooltip>
+					</div>
+				</Link>
+			))}
+			{secondArray.length > 0 && (
+				<Popover>
+					<PopoverTrigger>
 						<div
-							className="flex flex-row text-sm text-[#282048] dark:text-white font-semibold items-center justify-center absolute h-[40px] w-[40px] rounded-full border-2 border-[#0000001a] dark:border-white bg-white dark:bg-[#191A20]"
-							style={stackImages(numberOfImagesDisplayed, imageLength)}
+							style={{
+								top: isMoreThanDisplay ? -8 : -16,
+								borderRadius: radius
+							}}
+							className="flex absolute left-28 z-[6] flex-row text-sm text-[#282048] dark:text-white font-semibold items-center justify-center !h-10 !w-10 border-2 border-[#0000001a] dark:border-white bg-white dark:bg-[#191A20]"
 						>
-							{imageLength - numberOfImagesDisplayed < 100 ? imageLength - numberOfImagesDisplayed : 99}+
+							{secondArray.length < 100 ? secondArray.length : 99}+
+						</div>
+					</PopoverTrigger>
+					<PopoverContent className="!p-0 bg-white dark:bg-dark--theme max-h-40 overflow-y-auto ">
+						<div className="flex flex-col space-y-2 m-2">
+							{secondArray.map((image: ImageOverlapperProps, index: number) => {
+								return (
+									<Link
+										href={`/profile/${image.id}`}
+										className="relative hover:bg-gray-300 hover:dark:bg-[#24262c] p-1 rounded-md"
+										key={index}
+									>
+										<div className="flex items-center">
+											<Image
+												src={image.url}
+												alt={`${image.alt} avatar`}
+												width={80}
+												height={80}
+												className="!h-10 !w-10 rounded-full border-2 border-white"
+											/>
+											<p className="ml-2">{image.alt}</p>
+										</div>
+									</Link>
+								);
+							})}
 						</div>
-					)}
-				</div>
-			) : (
-				<Skeleton height={40} width={40} borderRadius={100} className="rounded-full dark:bg-[#353741]" />
+					</PopoverContent>
+				</Popover>
 			)}
 		</div>
 	);