- Added more panels and lists;

- Added the ability to view more information on the user;
- Added the ability to update the user's expiry date

src/components/High/Layout.tsx

@@ -37,7 +37,7 @@ export default function Layout({user, children, className, navDisabled = false,
 				/>
 				<div
 					className={clsx(
-						"w-full min-h-full h-fit md:mr-8 bg-white shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 md:gap-12 relative overflow-hidden mt-2",
+						"w-full min-h-full h-fit md:mr-8 bg-white shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2",
 						className,
 					)}>
 					{children}

src/components/Low/CountrySelect.tsx

@@ -6,7 +6,8 @@ import countryCodes from "country-codes-list";
 
 interface Props {
 	value?: string;
-	onChange: (value: string) => void;
+	onChange?: (value: string) => void;
+	disabled?: boolean;
 }
 
 const mapCountries = (codes: string[]) => {
@@ -18,7 +19,7 @@ const mapCountries = (codes: string[]) => {
 	}));
 };
 
-export default function CountrySelect({value, onChange}: Props) {
+export default function CountrySelect({value, disabled = false, onChange}: Props) {
 	const [query, setQuery] = useState("");
 
 	const filteredCountries =
@@ -32,11 +33,11 @@ export default function CountrySelect({value, onChange}: Props) {
 
 	return (
 		<>
-			<Combobox value={value} onChange={onChange}>
+			<Combobox value={value} onChange={onChange} disabled={disabled}>
 				<div className="relative mt-1">
 					<div className="relative w-full cursor-default overflow-hidden ">
 						<Combobox.Input
-							className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+							className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white disabled:bg-mti-gray-platinum/40 rounded-full border border-mti-gray-platinum focus:outline-none"
 							onChange={(e) => setQuery(e.target.value)}
 							displayValue={(code: string) => {
 								const country = countries[code as unknown as keyof TCountries];

src/components/Modal.tsx

@@ -0,0 +1,50 @@
+import {Dialog, Transition} from "@headlessui/react";
+import {Fragment, ReactElement} from "react";
+
+interface Props {
+	isOpen: boolean;
+	onClose: () => void;
+	title?: string;
+	children?: ReactElement;
+}
+
+export default function Modal({isOpen, title, onClose, children}: Props) {
+	return (
+		<Transition appear show={isOpen} as={Fragment}>
+			<Dialog as="div" className="relative z-10" onClose={onClose}>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black bg-opacity-25" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 overflow-y-auto">
+					<div className="flex min-h-full items-center justify-center p-4 text-center">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+								{title && (
+									<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+										{title}
+									</Dialog.Title>
+								)}
+								{children}
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition>
+	);
+}

src/components/UserCard.tsx

@@ -0,0 +1,230 @@
+import useStats from "@/hooks/useStats";
+import {EMPLOYMENT_STATUS, User} from "@/interfaces/user";
+import {groupBySession, averageScore} from "@/utils/stats";
+import {RadioGroup} from "@headlessui/react";
+import axios from "axios";
+import clsx from "clsx";
+import moment from "moment";
+import {useState} from "react";
+import ReactDatePicker from "react-datepicker";
+import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
+import {toast} from "react-toastify";
+import Button from "./Low/Button";
+import Checkbox from "./Low/Checkbox";
+import CountrySelect from "./Low/CountrySelect";
+import Input from "./Low/Input";
+import ProfileSummary from "./ProfileSummary";
+
+const expirationDateColor = (date: Date) => {
+	const momentDate = moment(date);
+	const today = moment(new Date());
+
+	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
+	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
+	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
+};
+
+const UserCard = ({onClose, ...user}: User & {onClose: (reload?: boolean) => void}) => {
+	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
+	const {stats} = useStats(user.id);
+
+	const updateUser = () => {
+		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
+
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate})
+			.then(() => {
+				toast.success("User updated successfully!");
+				onClose(true);
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
+
+	return (
+		<>
+			<ProfileSummary
+				user={user}
+				items={[
+					{
+						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: Object.keys(groupBySession(stats)).length,
+						label: "Exams",
+					},
+					{
+						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: stats.length,
+						label: "Exercises",
+					},
+					{
+						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+						label: "Average Score",
+					},
+				]}
+			/>
+
+			<section className="flex flex-col gap-4 justify-between">
+				<div className="flex flex-col md:flex-row gap-8 w-full">
+					<Input
+						label="Name"
+						type="text"
+						name="name"
+						onChange={() => null}
+						placeholder="Enter your name"
+						defaultValue={user.name}
+						disabled
+					/>
+					<Input
+						label="E-mail Address"
+						type="email"
+						name="email"
+						onChange={() => null}
+						placeholder="Enter email address"
+						defaultValue={user.email}
+						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 disabled value={user.demographicInformation?.country} />
+					</div>
+					<Input
+						type="tel"
+						name="phone"
+						label="Phone number"
+						onChange={() => null}
+						placeholder="Enter phone number"
+						defaultValue={user.demographicInformation?.phone}
+						disabled
+					/>
+				</div>
+
+				<div className="flex flex-col md:flex-row gap-8 w-full">
+					<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={user.demographicInformation?.employment}
+							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={user.demographicInformation?.gender} 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">
+							<div className="flex justify-between items-center">
+								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+								<Checkbox
+									isChecked={!!expiryDate}
+									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : undefined)}>
+									Enabled
+								</Checkbox>
+							</div>
+							{!expiryDate && (
+								<div
+									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",
+										!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
+										"bg-white border-mti-gray-platinum",
+									)}>
+									{!expiryDate && "Unlimited"}
+									{expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
+								</div>
+							)}
+							{expiryDate && (
+								<ReactDatePicker
+									className={clsx(
+										"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"hover:border-mti-purple tooltip",
+										expirationDateColor(expiryDate),
+										"transition duration-300 ease-in-out",
+									)}
+									filterDate={(date) => moment(date).isAfter(new Date())}
+									dateFormat="dd/MM/yyyy"
+									selected={moment(expiryDate).toDate()}
+									onChange={(date) => setExpiryDate(date)}
+								/>
+							)}
+						</div>
+					</div>
+				</div>
+			</section>
+
+			<div className="flex gap-4 justify-end mt-4 w-full">
+				<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
+					Close
+				</Button>
+				<Button onClick={updateUser} className="w-full max-w-[200px]">
+					Update
+				</Button>
+			</div>
+		</>
+	);
+};
+
+export default UserCard;