Added more fields to the corporate and showcased them in the UserCard

src/components/UserCard.tsx

@@ -15,6 +15,8 @@ import Checkbox from "./Low/Checkbox";
 import CountrySelect from "./Low/CountrySelect";
 import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
+import Select from "react-select";
+import useUsers from "@/hooks/useUsers";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
@@ -34,7 +36,9 @@ interface Props {
 
 const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
+	const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
 	const {stats} = useStats(user.id);
+	const {users} = useUsers();
 
 	const updateUser = () => {
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
@@ -241,6 +245,38 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 								placeholder="Enter amount of users"
 								defaultValue={user.corporateInformation?.companyInformation.userAmount}
 							/>
+
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Country Agent</label>
+								<Select
+									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+									options={[
+										{value: "", label: "No referral"},
+										...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+									]}
+									defaultValue={{
+										value: referralAgent,
+										label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent",
+									}}
+									onChange={(value) => setReferralAgent(value?.value)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
+											outline: "none",
+											":focus": {
+												outline: "none",
+											},
+										}),
+										option: (styles, state) => ({
+											...styles,
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+											color: state.isFocused ? "black" : styles.color,
+										}),
+									}}
+								/>
+							</div>
 						</div>
 					</>
 				)}

src/hooks/useUsers.tsx

@@ -10,7 +10,7 @@ export default function useUsers() {
 	const getData = () => {
 		setIsLoading(true);
 		axios
-			.get<User[]>("/api/users/list")
+			.get<User[]>("/api/users/list", {headers: {page: "register"}})
 			.then((response) => setUsers(response.data))
 			.finally(() => setIsLoading(false));
 	};

src/interfaces/user.ts

@@ -26,6 +26,8 @@ export interface CorporateInformation {
 		value: number;
 		currency: string;
 	};
+	monthlyDuration: number;
+	referralAgent?: string;
 	allowedUserAmount?: number;
 }
 

src/pages/(register)/RegisterCorporate.tsx

@@ -8,6 +8,8 @@ import {Divider} from "primereact/divider";
 import {useState} from "react";
 import {toast} from "react-toastify";
 import {KeyedMutator} from "swr";
+import Select from "react-select";
+import moment from "moment";
 
 interface Props {
 	isLoading: boolean;
@@ -16,14 +18,23 @@ interface Props {
 	sendEmailVerification: typeof sendEmailVerification;
 }
 
+const availableDurations = {
+	"1_month": {label: "1 Month", number: 1},
+	"3_months": {label: "3 Months", number: 3},
+	"6_months": {label: "6 Months", number: 6},
+	"12_months": {label: "12 Months", number: 12},
+};
+
 export default function RegisterCorporate({isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
 	const [name, setName] = useState("");
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [confirmPassword, setConfirmPassword] = useState("");
+	const [referralAgent, setReferralAgent] = useState<string | undefined>();
 
 	const [companyName, setCompanyName] = useState("");
 	const [companyUsers, setCompanyUsers] = useState(0);
+	const [subscriptionDuration, setSubscriptionDuration] = useState(1);
 
 	const {users} = useUsers();
 
@@ -50,12 +61,15 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
 				password,
 				type: "corporate",
 				profilePicture: "/defaultAvatar.png",
+				subscriptionExpirationDate: moment().add(1, "days").add(subscriptionDuration, "months").toISOString(),
 				corporateInformation: {
 					companyInformation: {
 						name: companyName,
 						userAmount: companyUsers,
 					},
+					referralAgent,
 					allowedUserAmount: companyUsers,
+					monthlyDuration: subscriptionDuration,
 				},
 			})
 			.then((response) => {
@@ -81,8 +95,11 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
 
 	return (
 		<form className="flex flex-col items-center gap-4 w-full" onSubmit={register}>
-			<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+			<div className="w-full flex gap-4">
-			<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
+				<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+				<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
+			</div>
+
 			<div className="w-full flex gap-4">
 				<Input
 					type="password"
@@ -110,6 +127,7 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
 					name="companyName"
 					onChange={(e) => setCompanyName(e)}
 					placeholder="Institution name"
+					label="Institution name"
 					defaultValue={companyName}
 					required
 				/>
@@ -123,6 +141,68 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
 				/>
 			</div>
 
+			<div className="w-full flex gap-4">
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Referral</label>
+					<Select
+						className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+						options={[
+							{value: "", label: "No referral"},
+							...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+						]}
+						defaultValue={{value: "", label: "No referral"}}
+						onChange={(value) => setReferralAgent(value?.value)}
+						styles={{
+							control: (styles) => ({
+								...styles,
+								paddingLeft: "4px",
+								border: "none",
+								outline: "none",
+								":focus": {
+									outline: "none",
+								},
+							}),
+							option: (styles, state) => ({
+								...styles,
+								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+								color: state.isFocused ? "black" : styles.color,
+							}),
+						}}
+					/>
+				</div>
+
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Subscription Duration</label>
+					<Select
+						className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+						options={Object.keys(availableDurations).map((value) => ({
+							value,
+							label: availableDurations[value as keyof typeof availableDurations].label,
+						}))}
+						defaultValue={{value: "1_month", label: availableDurations["1_month"].label}}
+						onChange={(value) =>
+							setSubscriptionDuration(value ? availableDurations[value.value as keyof typeof availableDurations].number : 1)
+						}
+						styles={{
+							control: (styles) => ({
+								...styles,
+								paddingLeft: "4px",
+								border: "none",
+								outline: "none",
+								":focus": {
+									outline: "none",
+								},
+							}),
+							option: (styles, state) => ({
+								...styles,
+								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+								color: state.isFocused ? "black" : styles.color,
+							}),
+						}}
+					/>
+				</div>
+			</div>
+
 			<Button
 				className="lg:mt-8 w-full"
 				color="purple"

src/pages/api/register.ts

@@ -104,7 +104,7 @@ async function registerCorporate(req: NextApiRequest, res: NextApiResponse) {
 				isFirstLogin: false,
 				focus: "academic",
 				type: "corporate",
-				subscriptionExpirationDate: null,
+				subscriptionExpirationDate: req.body.subscriptionExpirationDate || null,
 				status: "paymentDue",
 				registrationDate: new Date().toISOString(),
 			};

src/pages/api/users/list.ts

@@ -10,7 +10,7 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
+	if (!req.session.user && !req.headers["page"] && req.headers["page"] !== "register") {
 		res.status(401).json({ok: false});
 		return;
 	}

src/pages/login.tsx

@@ -84,8 +84,8 @@ export default function Login() {
 					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
 				</section>
 				<section className="h-full w-full flex flex-col items-center justify-center gap-2">
-					<div className="flex flex-col gap-2 items-center relative">
+					<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
-						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-64 absolute -top-36 lg:-top-64" />
+						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
 						<h1 className="font-bold text-2xl lg:text-4xl">Login to your account</h1>
 						<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
 					</div>

src/pages/register.tsx

@@ -36,7 +36,7 @@ export default function Register({code: queryCode}: {code: string}) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<main className="w-full h-[100vh] flex bg-white text-black">
+			<main className="w-full min-h-[100vh] h-full flex bg-white text-black">
 				<ToastContainer />
 				<section className="h-full w-fit min-w-fit relative hidden lg:flex">
 					<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
@@ -49,7 +49,7 @@ export default function Register({code: queryCode}: {code: string}) {
 					</div>
 					{!user && (
 						<>
-							<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-2/3">
+							<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-3/4">
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
 										<Tab