Merged develop into feature-payment-corporate-id

src/hooks/useListSearch.tsx

@@ -0,0 +1,48 @@
+import {useState, useMemo} from 'react';
+import Input from "@/components/Low/Input";
+
+/*fields example = [
+    ['id'],
+    ['companyInformation', 'companyInformation', 'name']
+]*/
+
+
+const getFieldValue = (fields: string[], data: any): string => {
+    if(fields.length === 0) return data;
+    const [key, ...otherFields] = fields;
+
+    if(data[key]) return getFieldValue(otherFields, data[key]);
+    return data;
+}
+
+export const useListSearch = (fields: string[][], rows: any[]) => {
+    const [text, setText] = useState('');
+
+    const renderSearch = () => (
+        <Input
+            label="Search"
+            type="text"
+            name="search"
+            onChange={setText}
+            placeholder="Enter search text"
+            value={text}
+        />
+    )
+
+    const updatedRows = useMemo(() => {
+        const searchText = text.toLowerCase();
+        return rows.filter((row) => {
+            return fields.some((fieldsKeys) => {
+                const value = getFieldValue(fieldsKeys, row);
+                if(typeof value === 'string') {
+                    return value.toLowerCase().includes(searchText);
+                }
+            })
+        })
+    }, [fields, rows, text])
+
+    return {
+        rows: updatedRows,
+        renderSearch,
+    }
+}

src/pages/(admin)/Lists/UserList.tsx

@@ -2,7 +2,7 @@ import Button from "@/components/Low/Button";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {Type, User, userTypes} from "@/interfaces/user";
+import {Type, User, userTypes, CorporateUser} from "@/interfaces/user";
 import {Popover, Transition} from "@headlessui/react";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
@@ -19,9 +19,15 @@ import UserCard from "@/components/UserCard";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
+import {isCorporateUser} from '@/resources/user';
+import { useListSearch } from "@/hooks/useListSearch";
 
 const columnHelper = createColumnHelper<User>();
-
+const searchFields = [
+	['name'],
+	['email'],
+	['corporateInformation', 'companyInformation', 'name'],
+];
 export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
@@ -325,6 +331,15 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 			) as any,
 			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
+		columnHelper.accessor('corporateInformation.companyInformation.name', {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
+					<span>Company Name</span>
+					<SorterArrow name="companyName" />
+				</button>
+			) as any,
+			cell: (info) => getCorporateName(info.row.original),
+		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
@@ -378,6 +393,14 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return undefined;
 	};
 
+	const getCorporateName = (user: User) => {
+		if(isCorporateUser(user)) {
+			return user.corporateInformation?.companyInformation?.name
+		}
+
+		return '';
+	}
+
 	const sortFunction = (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
 			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
@@ -445,11 +468,28 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
 		}
 
+		if(sorter === 'companyName' || sorter === reverseString('companyName')) {
+			const aCorporateName = getCorporateName(a);
+			const bCorporateName = getCorporateName(b);
+			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
+			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
+			if (!aCorporateName && !bCorporateName) return 0;
+
+			return sorter === "companyName"
+				? aCorporateName.localeCompare(bCorporateName)
+				: bCorporateName.localeCompare(aCorporateName);			
+		}
+
 		return a.id.localeCompare(b.id);
 	};
 
+	const { rows: filteredRows, renderSearch } = useListSearch(
+		searchFields,
+		displayUsers,
+	)
+
 	const table = useReactTable({
-		data: displayUsers,
+		data: filteredRows,
 		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
 		getCoreRowModel: getCoreRowModel(),
 	});
@@ -532,30 +572,33 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					)}
 				</>
 			</Modal>
-			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-				<thead>
-					{table.getHeaderGroups().map((headerGroup) => (
-						<tr key={headerGroup.id}>
-							{headerGroup.headers.map((header) => (
-								<th className="py-4 px-4 text-left" key={header.id}>
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-								</th>
-							))}
-						</tr>
-					))}
-				</thead>
-				<tbody className="px-2">
-					{table.getRowModel().rows.map((row) => (
-						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-							{row.getVisibleCells().map((cell) => (
-								<td className="px-4 py-2 items-center w-fit" key={cell.id}>
-									{flexRender(cell.column.columnDef.cell, cell.getContext())}
-								</td>
-							))}
-						</tr>
-					))}
-				</tbody>
-			</table>
+			<div className="w-full flex flex-col gap-2">
+				{renderSearch()}
+				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+					<thead>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<th className="py-4 px-4 text-left" key={header.id}>
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</th>
+								))}
+							</tr>
+						))}
+					</thead>
+					<tbody className="px-2">
+						{table.getRowModel().rows.map((row) => (
+							<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<td className="px-4 py-2 items-center w-fit" key={cell.id}>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
 		</div>
 	);
 }

src/pages/payment-record.tsx

@@ -62,28 +62,21 @@ const columnHelper = createColumnHelper<Payment>();
 
 const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
 	const [corporate, setCorporate] = useState<CorporateUser>();
-	const [price, setPrice] = useState<number>(0);
-	const [currency, setCurrency] = useState<string>("EUR");
-	const [commission, setCommission] = useState<number>(0);
-	const [referralAgent, setReferralAgent] = useState<AgentUser>();
 	const [date, setDate] = useState<Date>(new Date());
 
 	const {users} = useUsers();
 
-	useEffect(() => {
-		if (!corporate) return setReferralAgent(undefined);
-		if (!corporate.corporateInformation?.referralAgent) return setReferralAgent(undefined);
+	const price = corporate?.corporateInformation?.payment?.value || 0;
+	const commission = corporate?.corporateInformation?.payment?.commission || 0;
+	const currency = corporate?.corporateInformation?.payment?.currency || 'EUR';
 
-		const referralAgent = users.find((u) => u.id === corporate.corporateInformation.referralAgent);
-		setReferralAgent(referralAgent as AgentUser | undefined);
-	}, [corporate, users]);
+	const referralAgent = useMemo(() => {
+		if(corporate?.corporateInformation?.referralAgent) {
+			return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
+		}
 
-	useEffect(() => {
-		const payment = corporate?.corporateInformation?.payment;
-
-		setPrice(payment?.value || 0);
-		setCurrency(payment?.currency || "EUR");
-	}, [corporate]);
+		return undefined;
+	}, [corporate?.corporateInformation?.referralAgent, users]);
 
 	const submit = () => {
 		axios
@@ -91,7 +84,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 				corporate: corporate?.id,
 				agent: referralAgent?.id,
 				agentCommission: commission,
-				agentValue: toFixedNumber((commission / 100) * price, 2),
+				agentValue: toFixedNumber((commission! / 100) * price!, 2),
 				currency,
 				value: price,
 				isPaid: false,
@@ -146,16 +139,18 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 					<div className="w-full grid grid-cols-5 gap-2">
 						<Input
 							name="paymentValue"
-							onChange={(e) => setPrice(e ? parseInt(e) : 0)}
+							onChange={() => {}}
 							type="number"
 							value={price}
+							defaultValue={0}
 							className="col-span-3"
+							disabled
 						/>
 						<Select
 							className="px-4 col-span-2 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={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
 							defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
-							onChange={(value) => setCurrency(value?.value || "EUR")}
+							onChange={() => {}}
 							value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
 							styles={{
 								control: (styles) => ({
@@ -173,6 +168,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 									color: state.isFocused ? "black" : styles.color,
 								}),
 							}}
+							isDisabled
 						/>
 					</div>
 				</div>
@@ -180,13 +176,20 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 					<div className="flex gap-4 w-full">
 						<div className="flex flex-col w-full gap-3">
 							<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
-							<Input name="commission" onChange={(e) => setCommission(e ? parseInt(e) : 0)} type="number" defaultValue={0} />
+							<Input
+								name="commission"
+								onChange={() => {}}
+								type="number"
+								defaultValue={0}
+								value={commission}
+								disabled
+							/>
 						</div>
 						<div className="flex flex-col w-full gap-3">
 							<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
 							<Input
 								name="commissionValue"
-								value={`${(commission / 100) * price} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
+								value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
 								onChange={() => null}
 								type="text"
 								defaultValue={0}

src/pages/profile.tsx

@@ -50,27 +50,32 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Home() {
-	const [bio, setBio] = useState("");
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
+interface Props {
+	user: User;
+	mutateUser: Function,
+}
+
+function UserProfile({
+	user,
+	mutateUser,
+}: Props) {
+	const [bio, setBio] = useState(user.bio || '');
+	const [name, setName] = useState(user.name || '');
+	const [email, setEmail] = useState(user.email || '');
 	const [password, setPassword] = useState("");
 	const [newPassword, setNewPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
-	const [profilePicture, setProfilePicture] = useState("");
+	const [profilePicture, setProfilePicture] = useState(user.profilePicture);
 
-	const [country, setCountry] = useState<string>();
-	const [phone, setPhone] = useState<string>();
-	const [gender, setGender] = useState<Gender>();
-	const [employment, setEmployment] = useState<EmploymentStatus>();
-	const [position, setPosition] = useState<string>();
-	const [companyName, setCompanyName] = useState<string>("");
-	const [commercialRegistration, setCommercialRegistration] = useState<string>("");
+	const [country, setCountry] = useState<string>(user.demographicInformation?.country || '');
+	const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || '');
+	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
+	const [employment, setEmployment] = useState<EmploymentStatus | undefined>(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [companyName, setCompanyName] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.companyName : undefined);
+	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.commercialRegistration : undefined);
 
 	const profilePictureInput = useRef(null);
-
-	const {user, mutateUser} = useUser({redirectTo: "/login"});
-
 	const expirationDateColor = (date: Date) => {
 		const momentDate = moment(date);
 		const today = moment(new Date());
@@ -80,24 +85,6 @@ export default function Home() {
 		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 	};
 
-	useEffect(() => {
-		if (user) {
-			setName(user.name);
-			setEmail(user.email);
-			setBio(user.bio);
-			setProfilePicture(user.profilePicture);
-			setCountry(user.demographicInformation?.country);
-			setPhone(user.demographicInformation?.phone);
-			setGender(user.demographicInformation?.gender);
-			setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
-			setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-			if(user.type === 'agent') {
-				setCompanyName(user.agentInformation?.companyName)
-				setCommercialRegistration(user.agentInformation?.commercialRegistration)
-			}
-		}
-	}, [user]);
-
 	const convertBase64 = (file: File) => {
 		return new Promise((resolve, reject) => {
 			const fileReader = new FileReader();
@@ -159,6 +146,258 @@ export default function Home() {
 		setIsLoading(false);
 	};
 
+	return (
+		<Layout user={user}>
+			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
+				<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
+				<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
+					<div className="flex flex-col gap-8 w-full md:w-2/3">
+						<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
+						<form className="flex flex-col items-center gap-6 w-full">
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								<Input
+									label="Name"
+									type="text"
+									name="name"
+									onChange={(e) => setName(e)}
+									placeholder="Enter your name"
+									defaultValue={name}
+									required
+								/>
+								<Input
+									label="E-mail Address"
+									type="email"
+									name="email"
+									onChange={(e) => setEmail(e)}
+									placeholder="Enter email address"
+									defaultValue={email}
+									required
+								/>
+							</div>
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								<Input
+									label="Old Password"
+									type="password"
+									name="password"
+									onChange={(e) => setPassword(e)}
+									placeholder="Enter your password"
+									required
+								/>
+								<Input
+									label="New Password"
+									type="password"
+									name="newPassword"
+									onChange={(e) => setNewPassword(e)}
+									placeholder="Enter your new password (optional)"
+								/>
+							</div>
+
+							{user.type === "agent" && (
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+									<Input
+										label="Corporate Name"
+										type="text"
+										name="companyName"
+										onChange={() => null}
+										placeholder="Enter corporate name"
+										defaultValue={companyName}
+										disabled
+									/>
+									<Input
+										label="Commercial Registration"
+										type="text"
+										name="commercialRegistration"
+										onChange={() => null}
+										placeholder="Enter commercial registration"
+										defaultValue={commercialRegistration}
+										disabled
+									/>
+								</div>
+							)}
+
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								<div className="flex flex-col gap-3 w-full">
+									<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+									<CountrySelect value={country} onChange={setCountry} />
+								</div>
+								<Input
+									type="tel"
+									name="phone"
+									label="Phone number"
+									onChange={(e) => setPhone(e)}
+									placeholder="Enter phone number"
+									defaultValue={phone}
+									required
+								/>
+							</div>
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								{user.type === "corporate" && (
+									<Input
+										name="position"
+										onChange={setPosition}
+										defaultValue={position}
+										type="text"
+										label="Position"
+										placeholder="CEO, Head of Marketing..."
+										required
+									/>
+								)}
+								{user.type !== "corporate" && (
+									<div className="relative flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
+										<RadioGroup
+											value={employment}
+											onChange={setEmployment}
+											className="grid grid-cols-2 items-center gap-4 place-items-center">
+											{EMPLOYMENT_STATUS.map(({status, label}) => (
+												<RadioGroup.Option value={status} key={status}>
+													{({checked}) => (
+														<span
+															className={clsx(
+																"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																"transition duration-300 ease-in-out",
+																!checked
+																	? "bg-white border-mti-gray-platinum"
+																	: "bg-mti-purple-light border-mti-purple-dark text-white",
+															)}>
+															{label}
+														</span>
+													)}
+												</RadioGroup.Option>
+											))}
+										</RadioGroup>
+									</div>
+								)}
+								<div className="flex flex-col gap-8 w-full">
+									<div className="relative flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+										<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
+											<RadioGroup.Option value="male">
+												{({checked}) => (
+													<span
+														className={clsx(
+															"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+															"transition duration-300 ease-in-out",
+															!checked
+																? "bg-white border-mti-gray-platinum"
+																: "bg-mti-purple-light border-mti-purple-dark text-white",
+														)}>
+														Male
+													</span>
+												)}
+											</RadioGroup.Option>
+											<RadioGroup.Option value="female">
+												{({checked}) => (
+													<span
+														className={clsx(
+															"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+															"transition duration-300 ease-in-out",
+															!checked
+																? "bg-white border-mti-gray-platinum"
+																: "bg-mti-purple-light border-mti-purple-dark text-white",
+														)}>
+														Female
+													</span>
+												)}
+											</RadioGroup.Option>
+											<RadioGroup.Option value="other">
+												{({checked}) => (
+													<span
+														className={clsx(
+															"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+															"transition duration-300 ease-in-out",
+															!checked
+																? "bg-white border-mti-gray-platinum"
+																: "bg-mti-purple-light border-mti-purple-dark text-white",
+														)}>
+														Other
+													</span>
+												)}
+											</RadioGroup.Option>
+										</RadioGroup>
+									</div>
+									<div className="flex flex-col gap-3">
+										<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
+										<Link
+											href="/payment"
+											className={clsx(
+												"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												!user.subscriptionExpirationDate
+													? "!bg-mti-green-ultralight !border-mti-green-light"
+													: expirationDateColor(user.subscriptionExpirationDate),
+												"bg-white border-mti-gray-platinum",
+											)}>
+											{!user.subscriptionExpirationDate && "Unlimited"}
+											{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+										</Link>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+					<div className="flex flex-col gap-6 w-48">
+						<div
+							className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
+							onClick={() => (profilePictureInput.current as any)?.click()}>
+							<div className="relative overflow-hidden h-48 w-48 rounded-full">
+								<div
+									className={clsx(
+										"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
+										"transition ease-in-out duration-300",
+									)}>
+									<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
+								</div>
+								<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
+							</div>
+							<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
+							<span
+								onClick={() => (profilePictureInput.current as any)?.click()}
+								className="cursor-pointer text-mti-purple-light text-sm">
+								Change picture
+							</span>
+							<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
+						</div>
+						{user.type === 'agent' && (
+							<div className="flag items-center h-fit">
+								<img
+									alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
+									src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
+									width="320"
+								/>
+							</div>
+						)}
+					</div>
+				</div>
+				<div className="flex flex-col gap-4 mt-8 mb-20">
+					<span className="text-lg font-bold">Bio</span>
+					<textarea
+						className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+						onChange={(e) => setBio(e.target.value)}
+						defaultValue={bio}
+						placeholder="Write your text here..."
+					/>
+				</div>
+
+				<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+					<Link href="/" className="max-w-[200px] self-end w-full">
+						<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
+							Back
+						</Button>
+					</Link>
+					<Button color="purple" className="max-w-[200px] self-end w-full" onClick={updateUser} disabled={isLoading}>
+						Save Changes
+					</Button>
+				</div>
+			</section>
+		</Layout>
+	);
+}
+
+
+export default function Home() {
+	const {user, mutateUser } = useUser({redirectTo: "/login"});
+
 	return (
 		<>
 			<Head>
@@ -171,252 +410,9 @@ export default function Home() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			{user && (
-				<Layout user={user}>
-					<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
-						<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
-						<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
-							<div className="flex flex-col gap-8 w-full md:w-2/3">
-								<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
-								<form className="flex flex-col items-center gap-6 w-full">
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										<Input
-											label="Name"
-											type="text"
-											name="name"
-											onChange={(e) => setName(e)}
-											placeholder="Enter your name"
-											defaultValue={name}
-											required
-										/>
-										<Input
-											label="E-mail Address"
-											type="email"
-											name="email"
-											onChange={(e) => setEmail(e)}
-											placeholder="Enter email address"
-											defaultValue={email}
-											required
-										/>
-									</div>
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										<Input
-											label="Old Password"
-											type="password"
-											name="password"
-											onChange={(e) => setPassword(e)}
-											placeholder="Enter your password"
-											required
-										/>
-										<Input
-											label="New Password"
-											type="password"
-											name="newPassword"
-											onChange={(e) => setNewPassword(e)}
-											placeholder="Enter your new password (optional)"
-										/>
-									</div>
-
-									{user.type === "agent" && (
-										<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
-											<Input
-												label="Corporate Name"
-												type="text"
-												name="companyName"
-												onChange={() => null}
-												placeholder="Enter corporate name"
-												defaultValue={companyName}
-												disabled
-											/>
-											<Input
-												label="Commercial Registration"
-												type="text"
-												name="commercialRegistration"
-												onChange={() => null}
-												placeholder="Enter commercial registration"
-												defaultValue={commercialRegistration}
-												disabled
-											/>
-										</div>
-									)}
-
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										<div className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-											<CountrySelect value={country} onChange={setCountry} />
-										</div>
-										<Input
-											type="tel"
-											name="phone"
-											label="Phone number"
-											onChange={(e) => setPhone(e)}
-											placeholder="Enter phone number"
-											defaultValue={phone}
-											required
-										/>
-									</div>
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										{user.type === "corporate" && (
-											<Input
-												name="position"
-												onChange={setPosition}
-												defaultValue={position}
-												type="text"
-												label="Position"
-												placeholder="CEO, Head of Marketing..."
-												required
-											/>
-										)}
-										{user.type !== "corporate" && (
-											<div className="relative flex flex-col gap-3 w-full">
-												<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
-												<RadioGroup
-													value={employment}
-													onChange={setEmployment}
-													className="grid grid-cols-2 items-center gap-4 place-items-center">
-													{EMPLOYMENT_STATUS.map(({status, label}) => (
-														<RadioGroup.Option value={status} key={status}>
-															{({checked}) => (
-																<span
-																	className={clsx(
-																		"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																		"transition duration-300 ease-in-out",
-																		!checked
-																			? "bg-white border-mti-gray-platinum"
-																			: "bg-mti-purple-light border-mti-purple-dark text-white",
-																	)}>
-																	{label}
-																</span>
-															)}
-														</RadioGroup.Option>
-													))}
-												</RadioGroup>
-											</div>
-										)}
-										<div className="flex flex-col gap-8 w-full">
-											<div className="relative flex flex-col gap-3 w-full">
-												<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
-												<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
-													<RadioGroup.Option value="male">
-														{({checked}) => (
-															<span
-																className={clsx(
-																	"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																	"transition duration-300 ease-in-out",
-																	!checked
-																		? "bg-white border-mti-gray-platinum"
-																		: "bg-mti-purple-light border-mti-purple-dark text-white",
-																)}>
-																Male
-															</span>
-														)}
-													</RadioGroup.Option>
-													<RadioGroup.Option value="female">
-														{({checked}) => (
-															<span
-																className={clsx(
-																	"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																	"transition duration-300 ease-in-out",
-																	!checked
-																		? "bg-white border-mti-gray-platinum"
-																		: "bg-mti-purple-light border-mti-purple-dark text-white",
-																)}>
-																Female
-															</span>
-														)}
-													</RadioGroup.Option>
-													<RadioGroup.Option value="other">
-														{({checked}) => (
-															<span
-																className={clsx(
-																	"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																	"transition duration-300 ease-in-out",
-																	!checked
-																		? "bg-white border-mti-gray-platinum"
-																		: "bg-mti-purple-light border-mti-purple-dark text-white",
-																)}>
-																Other
-															</span>
-														)}
-													</RadioGroup.Option>
-												</RadioGroup>
-											</div>
-											<div className="flex flex-col gap-3">
-												<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
-												<Link
-													href="/payment"
-													className={clsx(
-														"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-														"transition duration-300 ease-in-out",
-														!user.subscriptionExpirationDate
-															? "!bg-mti-green-ultralight !border-mti-green-light"
-															: expirationDateColor(user.subscriptionExpirationDate),
-														"bg-white border-mti-gray-platinum",
-													)}>
-													{!user.subscriptionExpirationDate && "Unlimited"}
-													{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-												</Link>
-											</div>
-										</div>
-									</div>
-								</form>
-							</div>
-							<div className="flex flex-col gap-6 w-48">
-								<div
-									className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
-									onClick={() => (profilePictureInput.current as any)?.click()}>
-									<div className="relative overflow-hidden h-48 w-48 rounded-full">
-										<div
-											className={clsx(
-												"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
-												"transition ease-in-out duration-300",
-											)}>
-											<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
-										</div>
-										<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
-									</div>
-									<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
-									<span
-										onClick={() => (profilePictureInput.current as any)?.click()}
-										className="cursor-pointer text-mti-purple-light text-sm">
-										Change picture
-									</span>
-									<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
-								</div>
-								{user.type === 'agent' && (
-									<div className="flag items-center h-fit">
-										<img
-											alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
-											src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
-											width="320"
-										/>
-									</div>
-								)}
-							</div>
-						</div>
-						<div className="flex flex-col gap-4 mt-8 mb-20">
-							<span className="text-lg font-bold">Bio</span>
-							<textarea
-								className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
-								onChange={(e) => setBio(e.target.value)}
-								defaultValue={bio}
-								placeholder="Write your text here..."
-							/>
-						</div>
-
-						<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-							<Link href="/" className="max-w-[200px] self-end w-full">
-								<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
-									Back
-								</Button>
-							</Link>
-							<Button color="purple" className="max-w-[200px] self-end w-full" onClick={updateUser} disabled={isLoading}>
-								Save Changes
-							</Button>
-						</div>
-					</section>
-				</Layout>
-			)}
+			{user && <UserProfile user={user} mutateUser={mutateUser} /> }
 		</>
 	);
+				
+
 }

src/resources/user.ts

@@ -1,4 +1,4 @@
-import {Type} from "@/interfaces/user";
+import {Type, User, CorporateUser} from "@/interfaces/user";
 
 export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	student: "Student",
@@ -8,3 +8,7 @@ export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	admin: "Admin",
 	developer: "Developer",
 };
+
+export function isCorporateUser(user: User): user is CorporateUser {
+	return (user as CorporateUser).corporateInformation !== undefined;
+  }