ever-co · evereq · Feb 19, 2024 · Feb 14, 2024 · Feb 16, 2024 · Feb 16, 2024
diff --git a/apps/web/app/[locale]/auth/passcode/page.tsx b/apps/web/app/[locale]/auth/passcode/page.tsx
@@ -10,7 +10,7 @@ import { AuthLayout } from 'lib/layout';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import stc from 'string-to-color';
 
@@ -122,7 +122,15 @@ function EmailScreen({ form, className }: { form: TAuthenticationPasscode } & IC
 
 function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } & IClassName) {
 	const t = useTranslations();
-
+	const inputsRef = useRef<Array<HTMLInputElement>>([]);
+	const resetForm = () => {
+		if (inputsRef.current) {
+			for (let i = 0; i < inputsRef.current.length; i++) {
+				inputsRef.current[i].value = '';
+			}
+			inputsRef.current[0].focus();
+		}
+	};
 	return (
 		<form className={className} onSubmit={form.handleCodeSubmit} autoComplete="off">
 			<Card className="w-full dark:bg-[#25272D]" shadow="custom">
@@ -133,15 +141,26 @@ function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } &
 
 					{/* Auth code input */}
 					<div className="w-full mt-5">
-						<Text className="text-xs font-normal text-gray-400">{t('pages.auth.INPUT_INVITE_CODE')}</Text>
+						<div className="flex justify-between">
+							<Text className="text-xs font-normal text-gray-400">
+								{t('pages.auth.INPUT_INVITE_CODE')}
+							</Text>
+							<Text
+								onClick={() => resetForm()}
+								className="text-xs font-normal cursor-pointer hover:underline text-gray-400"
+							>
+								{t('common.RESET')}
+							</Text>
+						</div>
 
 						<AuthCodeInputField
+							inputReference={inputsRef}
 							key={form.authScreen.screen}
 							allowedCharacters="alphanumeric"
 							length={6}
 							ref={form.inputCodeRef}
 							containerClassName="mt-[21px] w-full flex justify-between dark:bg-[#25272D]"
-							inputClassName="w-[40px] xs:w-[50px] dark:bg-[#25272D]"
+							inputClassName="w-[40px] xs:w-[50px] pl-[21px] dark:bg-[#25272D]"
 							defaultValue={form.formValues.code}
 							onChange={(code) => {
 								form.setFormValues((v) => ({ ...v, code }));

diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -73,7 +73,7 @@ const Kanban = () => {
 			<MainLayout showTimer={true}>
 				<div
 					className={
-						' overflow-auto fixed flex flex-col bg-white dark:bg-dark--theme  z-10 px-[32px] mx-[0px] w-full'
+						'overflow-auto fixed flex flex-col bg-white dark:bg-dark--theme  z-10 px-[32px] mx-[0px] w-full'
 					}
 				>
 					<div className="flex flex-row items-start justify-between mt-12">

diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
@@ -53,7 +53,7 @@ const poppins = Poppins({
 const LocaleLayout = ({ children, params: { locale }, pageProps }: Props) => {
 	// Validate that the incoming `locale` parameter is valid
 	if (!locales.includes(locale as any)) notFound();
-	const { isApiWork } = useCheckAPI();
+	const { isApiWork, loading } = useCheckAPI();
 	// Enable static rendering
 	// unstable_setRequestLocale(locale);
 
@@ -80,7 +80,7 @@ const LocaleLayout = ({ children, params: { locale }, pageProps }: Props) => {
 				<body className={clsx('flex h-full flex-col dark:bg-[#191A20]')}>
 					<RecoilRoot>
 						<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-							{isApiWork ? (
+							{isApiWork || loading ? (
 								<>
 									<AppState />
 									<JitsuRoot pageProps={pageProps}>{children}</JitsuRoot>

diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
@@ -38,7 +38,7 @@ const Team = () => {
 				<SettingsTeamSkeleton />
 			) : (
 				<MainLayout
-					className="items-start pb-1 h-screen "
+					className="items-start pb-1 h-screen overflow-hidden"
 					childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start"
 				>
 					<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">

diff --git a/apps/web/app/hooks/auth/useAuthenticationPasscode.ts b/apps/web/app/hooks/auth/useAuthenticationPasscode.ts
@@ -73,6 +73,17 @@ export function useAuthenticationPasscode() {
 	const verifySignInEmailConfirmRequest = async ({ email, code }: { email: string; code: string }) => {
 		signInEmailConfirmQueryCall(email, code)
 			.then((res) => {
+				const checkError: {
+					message: string;
+				} = res.data as any;
+				const isError = checkError.message === 'Unauthorized';
+				if (isError) {
+					setErrors({
+						code: 'Invalid code. Please try again.'
+					});
+				} else {
+					setErrors({});
+				}
 				const data = res.data as ISigninEmailConfirmResponse;
 				if (!data.workspaces) {
 					return;
@@ -166,12 +177,10 @@ export function useAuthenticationPasscode() {
 		e.preventDefault();
 		setErrors({});
 		const { errors, valid } = authFormValidate(['email', 'code'], formValues as any);
-
 		if (!valid) {
 			setErrors(errors);
 			return;
 		}
-
 		infiniteLoading.current = true;
 
 		verifySignInEmailConfirmRequest({

diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
@@ -11,7 +11,6 @@ export function useKanban() {
 	const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 	const taskStatusHook = useTaskStatus();
 	const { tasks, tasksFetching, updateTask } = useTeamTasks();
-
 	/**
 	 * format data for kanban board
 	 */

diff --git a/apps/web/app/hooks/useCheckAPI.ts b/apps/web/app/hooks/useCheckAPI.ts
@@ -5,7 +5,7 @@ import { useQuery } from './useQuery';
 import { getDefaultAPI } from '@app/services/client/api';
 
 export function useCheckAPI() {
-	const { queryCall } = useQuery(getDefaultAPI);
+	const { queryCall, loading } = useQuery(getDefaultAPI);
 	const [isApiWork, setIsApiWork] = React.useState(true);
 
 	const checkAPI = useCallback(() => {
@@ -23,6 +23,7 @@ export function useCheckAPI() {
 	}, [checkAPI]);
 
 	return {
-		isApiWork
+		isApiWork,
+		loading
 	};
 }
diff --git a/apps/web/components/ui/svgs/circular-progress.tsx b/apps/web/components/ui/svgs/circular-progress.tsx
@@ -15,7 +15,7 @@ export default function CircularProgress({
 		<>
 			<div
 				x-data="scrollProgress"
-				className="relative -rotate-90 inline-flex items-center justify-center overflow-hidden rounded-full"
+				className="relative max-h-12 h-12 w-12 max-w-12 min-w-12 max-w-12 -rotate-90 inline-flex items-center justify-center overflow-hidden rounded-full"
 			>
 				<svg className="w-12 h-12">
 					<circle

diff --git a/apps/web/lib/components/image-overlapper.tsx b/apps/web/lib/components/image-overlapper.tsx
@@ -44,7 +44,7 @@ export default function ImageOverlapper({
 						if (index < numberOfImagesDisplayed) {
 							return (
 								<Link href={`/profile/${image.id}`} className="relative w-[40px] h-[40px]" key={index}>
-									<Tooltip label={image.alt} placement="bottom-end">
+									<Tooltip label={image.alt}>
 										<Image
 											src={image.url}
 											alt={`${image.alt} avatar`}

diff --git a/apps/web/lib/components/inputs/auth-code-input.tsx b/apps/web/lib/components/inputs/auth-code-input.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { clsxm } from '@app/utils';
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { MutableRefObject, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { InputField } from './input';
 import { useTranslations } from 'next-intl';
 
 const allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;
 
 export type AuthCodeProps = {
+	inputReference?: MutableRefObject<HTMLInputElement[]>;
 	allowedCharacters?: (typeof allowedCharactersValues)[number];
 	ariaLabel?: string;
 	autoFocus?: boolean;
@@ -64,6 +65,7 @@ const propsMap: { [key: string]: InputProps } = {
 export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 	(
 		{
+			inputReference = null,
 			allowedCharacters = 'alphanumeric',
 			ariaLabel,
 			autoFocus = true,
@@ -87,8 +89,8 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 		if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {
 			throw new Error(t('errors.INVALID_ALLOWED_CHARACTER'));
 		}
-
-		const inputsRef = useRef<Array<HTMLInputElement>>([]);
+		const reference = useRef<HTMLInputElement[]>([]);
+		const inputsRef = inputReference || reference;
 		const inputProps = propsMap[allowedCharacters];
 		const validDefaultValue =
 			defaultValue && defaultValue.length === length && defaultValue.match(inputProps.pattern) ? true : false;
@@ -122,7 +124,6 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 			const res = inputsRef.current.map((input) => input.value).join('');
 			onChange && onChange(res);
 		};
-
 		const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 			const {
 				target: { value, nextElementSibling }
@@ -132,6 +133,7 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 
 			if (value.length > 1) {
 				e.target.value = value.charAt(0);
+
 				if (nextElementSibling !== null) {
 					(nextElementSibling as HTMLInputElement).focus();
 				}

diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
@@ -86,9 +86,24 @@ function Priority({ level }: { level: number }) {
 
 	return (
 		<>
-			<div className="flex flex-col">
+			<div
+				style={{
+					marginTop: -4.5 * level
+				}}
+				className="flex flex-col relative "
+			>
 				{numberArray.map((item: any, index: number) => {
-					return <PriorityIcon key={index} />;
+					return (
+						<span
+							key={index}
+							style={{
+								top: `${index * 4}px`
+							}}
+							className="absolute"
+						>
+							<PriorityIcon />
+						</span>
+					);
 				})}
 			</div>
 		</>
@@ -144,28 +159,43 @@ export default function Item(props: ItemProps) {
 			data-index={index}
 			aria-label={item.label}
 		>
-			<div className=" w-full justify-between h-40">
+			<div className="w-full justify-between h-fit">
 				<div className="w-full flex justify-between">
-					<span>{<TagList tags={[]} />}</span>
+					<span>{<TagList tags={item.tags} />}</span>
 					{menu}
 				</div>
 				<div className="w-full flex justify-between my-3">
-					<div className="flex items-center ">
+					<div className="flex items-center w-64">
 						{!taskEdition.editMode ? (
 							<>
-								<TaskIssueStatus
-									showIssueLabels={false}
-									task={item}
-									className="rounded-sm mr-1 h-6 w-6"
-								/>
-								<span className="text-grey text-normal mr-1">#{item.number}</span>
-								<Link
-									href={`/task/${item.id}`}
-									className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2"
-								>
-									{item.title}
+								<Link href={`/task/${item.id}`}>
+									<div className="w-64 relative overflow-hidden">
+										<span className="h-5 w-6 inline-block ">
+											<span className="absolute top-1">
+												<TaskIssueStatus
+													showIssueLabels={true}
+													task={item}
+													className="rounded-sm mr-1 h-6 w-6"
+												/>
+											</span>
+										</span>
+										<span className="text-grey text-normal mx-1">#{item.number}</span>
+										{item.title}
+										<span className="inline-block ml-1">
+											<Priority
+												level={
+													item.priority == 'Low'
+														? 1
+														: item.priority == 'Medium'
+														? 2
+														: item.priority == 'High'
+														? 3
+														: 4
+												}
+											/>
+										</span>
+									</div>
 								</Link>
-								<Priority level={1} />
 							</>
 						) : (
 							<div className="w-56">
@@ -209,7 +239,9 @@ export default function Item(props: ItemProps) {
 							</div>
 						)}
 					</div>
-					<ImageComponent images={taskAssignee} />
+					<div className="w-56 flex justify-end">
+						<ImageComponent radius={30} images={taskAssignee} />
+					</div>
 					{item.issueType && (
 						<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
 							<div

diff --git a/apps/web/lib/features/task/task-activity.tsx b/apps/web/lib/features/task/task-activity.tsx
@@ -26,8 +26,8 @@ export function TaskActivity({ task }: { task: ITeamTask }) {
 			shadow="bigger"
 		>
 			<div className="flex justify-between items-center gap-5 py-2 border-b border-b-[#00000014] dark:border-b-[#7B8089]">
-				<div className="flex items-center gap-2 my-2">
-					<h4 className="text-base">{'Timesheet'}</h4>
+				<div className="flex items-center gap-2 mb-2">
+					<h4 className="text-base font-semibold">{'Timesheet'}</h4>
 				</div>
 
 				<div className="flex items-center justify-end gap-2.5">
@@ -41,7 +41,9 @@ export function TaskActivity({ task }: { task: ITeamTask }) {
 				</div>
 			</div>
 			<div className={clsxm('flex flex-col max-h-80 gap-3', hidden && ['hidden'])}>
-				{groupedData.map((timesheet, i) => (
+				{groupedData.length < 1 ?
+					<p className="mx-auto ">There is no Activity</p> :
+				groupedData.map((timesheet, i) => (
 					<div
 						key={i}
 						className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]"

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -230,7 +230,6 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 									) : null}
 									<>{provided.placeholder}</>
 								</div>
-
 							</div>
 						)}
 					</Droppable>

diff --git a/apps/web/lib/layout/auth-layout.tsx b/apps/web/lib/layout/auth-layout.tsx
@@ -67,7 +67,7 @@ export function AuthLayout({ children, title, description, isAuthPage = true }:
 						</div>
 					</div>
 
-					<div className="self-end w-full h-1/3 bg-primary-mid p-9">
+					<div className="self-end w-full h-fit bg-primary-mid p-9">
 						<Text.Heading
 							as="h3"
 							className="text-white lg:text-lg xl:text-xl 2xl:text-3xl font-normal leading-[120%] px-9 text-ellipsis mb-5"

diff --git a/apps/web/lib/settings/sync.zone.tsx b/apps/web/lib/settings/sync.zone.tsx
@@ -47,7 +47,7 @@ export const RealTimePopup = ({ closeModal, open }: { closeModal: () => void; op
 			<div className="sm:w-[530px] w-[330px]">
 				<Card className="w-full" shadow="custom">
 					<div>
-						<p className="py-4 text-center">{t('alerts.ALERT_REMOVE_TEAM')}</p>
+						<p className="py-4 text-center">{t('alerts.REAL_TIME_ON_WORKING')}</p>
 						<div className="flex justify-center gap-2">
 							<Button
 								onClick={() => {
-Original file line number
+Diff line change
@@ Expand Up @@
     									) : null}
     									<>{provided.placeholder}</>
     								</div>
     							</div>
     						)}
     					</Droppable>
@@ Expand Down @@