feat: Auto-complete email domain and pre-fill name based on email or …

…existing employee data (#2930)

apps/web/lib/features/team/invite/invite-form-modal.tsx

@@ -6,7 +6,7 @@ import { IInviteEmail } from '@app/interfaces';
 import { AxiosError } from 'axios';
 import { isEmail, isNotEmpty } from 'class-validator';
 import { BackButton, Button, Card, InputField, Modal, Text } from 'lib/components';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { InviteEmailDropdown } from './invite-email-dropdown';
 
@@ -21,6 +21,8 @@ export function InviteFormModal({ open, closeModal }: { open: boolean; closeModa
 	const { workingEmployees } = useEmployee();
 	const [currentOrgEmails, setCurrentOrgEmails] = useState<IInviteEmail[]>([]);
 	const { activeTeam } = useOrganizationTeams();
+	const nameInputRef = useRef<HTMLInputElement>(null);
+
 
 	useEffect(() => {
 		if (activeTeam?.members) {
@@ -38,9 +40,21 @@ export function InviteFormModal({ open, closeModal }: { open: boolean; closeModa
 	}, [workingEmployees, workingEmployees.length, activeTeam]);
 
 	const handleAddNew = (email: string) => {
+
+		if (!email.includes('@')) {
+			email = `${email}@gmail.com`;
+		}
+
 		const newItem = { title: email, name: '' };
 		setSelectedEmail(newItem);
+
 		setCurrentOrgEmails([...currentOrgEmails, newItem]);
+		const extractedName = email.split('@')[0];
+		if (nameInputRef.current) {
+			nameInputRef.current.value = extractedName;
+			nameInputRef.current.focus();
+			nameInputRef.current.select();
+		}
 	};
 
 	const handleSubmit = useCallback(
@@ -99,6 +113,7 @@ export function InviteFormModal({ open, closeModal }: { open: boolean; closeModa
 							/>
 
 							<InputField
+								ref={nameInputRef}
 								type="text"
 								name="name"
 								placeholder={t('form.TEAM_MEMBER_NAME_PLACEHOLDER')}

apps/web/lib/features/user-profile-plans.tsx

@@ -41,17 +41,15 @@ type FilterOutstanding = 'ALL' | 'DATE';
 
 export function UserProfilePlans() {
 	const t = useTranslations();
-	const defaultTab =
-		typeof window !== 'undefined'
-			? (window.localStorage.getItem('daily-plan-tab') as FilterTabs) || null
-			: 'Today Tasks';
 
 	const profile = useUserProfilePage();
 	const { todayPlan, futurePlans, pastPlans, outstandingPlans, sortedPlans, profileDailyPlans } = useDailyPlan();
 	const fullWidth = useRecoilValue(fullWidthState);
-	const [currentTab, setCurrentTab] = useState<FilterTabs>(defaultTab || 'Today Tasks');
 	const [currentOutstanding, setCurrentOutstanding] = useLocalStorageState<FilterOutstanding>('outstanding', 'ALL');
 
+	const [currentTab, setCurrentTab] = useLocalStorageState<FilterTabs>('daily-plan-tab', 'Today Tasks');
+
+
 	const [currentDataDailyPlan, setCurrentDataDailyPlan] = useRecoilState(dataDailyPlanState);
 	const { setDate, date } = useDateRange(currentTab);