Added the corporate user balance to the User Card

src/components/UserCard.tsx

@@ -1,15 +1,15 @@
 import useStats from "@/hooks/useStats";
-import { EMPLOYMENT_STATUS, User } from "@/interfaces/user";
+import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User} from "@/interfaces/user";
-import { groupBySession, averageScore } from "@/utils/stats";
+import {groupBySession, averageScore} from "@/utils/stats";
-import { RadioGroup } from "@headlessui/react";
+import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import moment from "moment";
-import { Divider } from "primereact/divider";
+import {Divider} from "primereact/divider";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import { BsFileEarmarkText, BsPencil, BsStar } from "react-icons/bs";
+import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
 import CountrySelect from "./Low/CountrySelect";
@@ -17,19 +17,17 @@ import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
 import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
-import { CURRENCIES } from "@/resources/paypal";
+import {CURRENCIES} from "@/resources/paypal";
+import useCodes from "@/hooks/useCodes";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
 	const today = moment(new Date());
 
-  if (today.add(1, "days").isAfter(momentDate))
+	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-    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(3, "days").isAfter(momentDate))
+	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
-    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";
 };
 
 interface Props {
@@ -65,43 +63,20 @@ const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
 	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
-const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
+const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
 	value: currency,
 	label,
 }));
 
-const UserCard = ({
+const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: Props) => {
-  user,
+	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
-  loggedInUser,
-  onClose,
-  onViewStudents,
-  onViewTeachers,
-  onViewCorporate,
-  disabled = false,
-  disabledFields = {},
-}: Props) => {
-  const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(
-    user.subscriptionExpirationDate,
-  );
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
-  const [position, setPosition] = useState<string | undefined>(
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-    user.type === "corporate"
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
-      ? user.demographicInformation?.position
-      : undefined,
-  );
-  const [passport_id, setPassportID] = useState<string | undefined>(
-    user.type === "student"
-      ? user.demographicInformation?.passport_id
-      : undefined,
-  );
 
-  const [referralAgent, setReferralAgent] = useState(
+	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
-    user.type === "corporate"
-      ? user.corporateInformation?.referralAgent
-      : undefined,
-  );
 	const [companyName, setCompanyName] = useState(
 		user.type === "corporate"
 			? user.corporateInformation?.companyInformation.name
@@ -109,41 +84,18 @@ const UserCard = ({
 			? user.agentInformation?.companyName
 			: undefined,
 	);
-  const [arabName, setArabName] = useState(
+	const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
-    user.type === "agent" ? user.agentInformation?.companyArabName : undefined,
-  );
 	const [commercialRegistration, setCommercialRegistration] = useState(
-    user.type === "agent"
+		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
-      ? user.agentInformation?.commercialRegistration
-      : undefined,
 	);
-  const [userAmount, setUserAmount] = useState(
+	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
-    user.type === "corporate"
+	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
-      ? user.corporateInformation?.companyInformation.userAmount
+	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
-      : undefined,
+	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
-  );
+	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
-  const [paymentValue, setPaymentValue] = useState(
+	const {stats} = useStats(user.id);
-    user.type === "corporate"
+	const {users} = useUsers();
-      ? user.corporateInformation?.payment?.value
+	const {codes} = useCodes(user.id);
-      : undefined,
-  );
-  const [paymentCurrency, setPaymentCurrency] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.payment?.currency
-      : "EUR",
-  );
-  const [monthlyDuration, setMonthlyDuration] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.monthlyDuration
-      : undefined,
-  );
-  const [commissionValue, setCommission] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.payment?.commission
-      : undefined,
-  );
-  const { stats } = useStats(user.id);
-  const { users } = useUsers();
 
 	useEffect(() => {
 		if (users && users.length > 0) {
@@ -159,14 +111,11 @@ const UserCard = ({
 
 	const updateUser = () => {
 		if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
-      return toast.error(
+			return toast.error("Please set a price for the user's package before updating!");
-        "Please set a price for the user's package before updating!",
+		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
-      );
-    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}`, {
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
 				...user,
 				subscriptionExpirationDate: expiryDate,
 				type,
@@ -191,9 +140,7 @@ const UserCard = ({
 								payment: {
 									value: paymentValue,
 									currency: paymentCurrency,
-                  ...(referralAgent === ""
+									...(referralAgent === "" ? {} : {commission: commissionValue}),
-                    ? {}
-                    : { commission: commissionValue }),
 								},
 						  }
 						: undefined,
@@ -203,38 +150,47 @@ const UserCard = ({
 				onClose(true);
 			})
 			.catch(() => {
-        toast.error("Something went wrong!", { toastId: "update-error" });
+				toast.error("Something went wrong!", {toastId: "update-error"});
 			});
 	};
 
-  return (
+	const generalProfileItems = [
-    <>
-      <ProfileSummary
-        user={user}
-        items={[
 		{
-            icon: (
+			icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-              <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: (
+			icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-              <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
-            ),
 			value: stats.length,
 			label: "Modules",
 		},
 		{
-            icon: (
+			icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-              <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",
 		},
-        ]}
+	];
-      />
+
+	const corporateProfileItems =
+		user.type === "corporate"
+			? [
+					{
+						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: codes.length,
+						label: "Users Used",
+					},
+					{
+						icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: user.corporateInformation.companyInformation.userAmount,
+						label: "Number of Users",
+					},
+			  ]
+			: [];
+
+	return (
+		<>
+			<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
 
 			{user.type === "agent" && (
 				<>
@@ -304,9 +260,7 @@ const UserCard = ({
 							disabled={disabled}
 						/>
 						<div className="flex flex-col gap-3 w-full lg:col-span-3">
-              <label className="font-normal text-base text-mti-gray-dim">
+							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
-                Pricing
-              </label>
 							<div className="w-full grid grid-cols-6 gap-2">
 								<Input
 									name="paymentValue"
@@ -319,17 +273,14 @@ const UserCard = ({
 								<Select
 									className={clsx(
 										"px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    disabled &&
+										disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-                      "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={CURRENCIES_OPTIONS}
-                  value={CURRENCIES_OPTIONS.find(
+									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
-                    (c) => c.value === paymentCurrency,
-                  )}
 									onChange={(value) => setPaymentCurrency(value?.value)}
 									menuPortalTarget={document?.body}
 									styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -341,11 +292,7 @@ const UserCard = ({
 										}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-                        ? "#D5D9F0"
-                        : state.isSelected
-                          ? "#7872BF"
-                          : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
@@ -356,19 +303,16 @@ const UserCard = ({
 					</div>
 					<div className="flex gap-3 w-full">
 						<div className="flex flex-col gap-3 w-8/12">
-              <label className="font-normal text-base text-mti-gray-dim">
+							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
-                Country Manager
-              </label>
 							{referralAgentLabel && (
 								<Select
 									className={clsx(
 										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    (!["developer", "admin"].includes(loggedInUser.type) ||
+										(!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager) &&
-                      disabledFields.countryManager) &&
 											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={[
-                    { value: "", label: "No referral" },
+										{value: "", label: "No referral"},
 										...users
 											.filter((u) => u.type === "agent")
 											.map((x) => ({
@@ -383,7 +327,7 @@ const UserCard = ({
 									menuPortalTarget={document?.body}
 									onChange={(value) => setReferralAgent(value?.value)}
 									styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -395,28 +339,19 @@ const UserCard = ({
 										}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-                        ? "#D5D9F0"
-                        : state.isSelected
-                          ? "#7872BF"
-                          : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
 									// editing country manager should only be available for dev/admin
-                  isDisabled={
+									isDisabled={!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager}
-                    !["developer", "admin"].includes(loggedInUser.type) ||
-                    disabledFields.countryManager
-                  }
 								/>
 							)}
 						</div>
 						<div className="flex flex-col gap-3 w-4/12">
 							{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
 								<>
-                  <label className="font-normal text-base text-mti-gray-dim">
+									<label className="font-normal text-base text-mti-gray-dim">Commission</label>
-                    Commission
-                  </label>
 									<Input
 										name="commissionValue"
 										onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
@@ -458,13 +393,8 @@ const UserCard = ({
 
 				<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">
+						<label className="font-normal text-base text-mti-gray-dim">Country</label>
-              Country
+						<CountrySelect disabled value={user.demographicInformation?.country} />
-            </label>
-            <CountrySelect
-              disabled
-              value={user.demographicInformation?.country}
-            />
 					</div>
 					<Input
 						type="tel"
@@ -484,11 +414,7 @@ const UserCard = ({
 						label="Passport/National ID"
 						onChange={() => null}
 						placeholder="Enter National ID or Passport number"
-            value={
+						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
-              user.type === "student"
-                ? user.demographicInformation?.passport_id
-                : undefined
-            }
 						disabled
 						required
 					/>
@@ -497,17 +423,14 @@ const UserCard = ({
 				<div className="flex flex-col md:flex-row gap-8 w-full">
 					{user.type !== "corporate" && (
 						<div className="relative flex flex-col gap-3 w-full">
-              <label className="font-normal text-base text-mti-gray-dim">
+							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
-                Employment Status
-              </label>
 							<RadioGroup
 								value={user.demographicInformation?.employment}
 								className="grid grid-cols-2 items-center gap-4 place-items-center"
-                disabled={disabled}
+								disabled={disabled}>
-              >
+								{EMPLOYMENT_STATUS.map(({status, label}) => (
-                {EMPLOYMENT_STATUS.map(({ status, label }) => (
 									<RadioGroup.Option value={status} key={status}>
-                    {({ checked }) => (
+										{({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",
@@ -515,8 +438,7 @@ const UserCard = ({
 													!checked
 														? "bg-white border-mti-gray-platinum"
 														: "bg-mti-purple-light border-mti-purple-dark text-white",
-                        )}
+												)}>
-                      >
 												{label}
 											</span>
 										)}
@@ -539,16 +461,13 @@ const UserCard = ({
 					)}
 					<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">
+							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
-                Gender
-              </label>
 							<RadioGroup
 								value={user.demographicInformation?.gender}
 								className="flex flex-row gap-4 justify-between"
-                disabled={disabled}
+								disabled={disabled}>
-              >
 								<RadioGroup.Option value="male">
-                  {({ checked }) => (
+									{({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",
@@ -556,14 +475,13 @@ const UserCard = ({
 												!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 }) => (
+									{({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",
@@ -571,14 +489,13 @@ const UserCard = ({
 												!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 }) => (
+									{({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",
@@ -586,8 +503,7 @@ const UserCard = ({
 												!checked
 													? "bg-white border-mti-gray-platinum"
 													: "bg-mti-purple-light border-mti-purple-dark text-white",
-                      )}
+											)}>
-                    >
 											Other
 										</span>
 									)}
@@ -596,20 +512,11 @@ const UserCard = ({
 						</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">
+								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
-                  Expiry Date
-                </label>
 								<Checkbox
 									isChecked={!!expiryDate}
-                  onChange={(checked) =>
+									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
-                    setExpiryDate(
+									disabled={disabled}>
-                      checked
-                        ? user.subscriptionExpirationDate || new Date()
-                        : null,
-                    )
-                  }
-                  disabled={disabled}
-                >
 									Enabled
 								</Checkbox>
 							</div>
@@ -618,12 +525,9 @@ const UserCard = ({
 									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
+										!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(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>
@@ -639,9 +543,7 @@ const UserCard = ({
 									filterDate={(date) =>
 										moment(date).isAfter(new Date()) &&
 										(loggedInUser.subscriptionExpirationDate
-                      ? moment(date).isBefore(
+											? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
-                          moment(loggedInUser.subscriptionExpirationDate),
-                        )
 											: true)
 									}
 									dateFormat="dd/MM/yyyy"
@@ -653,23 +555,18 @@ const UserCard = ({
 						</div>
 					</div>
 				</div>
-        {(loggedInUser.type === "developer" ||
+				{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
-          loggedInUser.type === "admin") && (
 					<>
 						<Divider className="w-full !m-0" />
 						<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">
+								<label className="font-normal text-base text-mti-gray-dim">Status</label>
-                  Status
-                </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={USER_STATUS_OPTIONS}
 									menuPortalTarget={document?.body}
 									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
-                  onChange={(value) =>
+									onChange={(value) => setStatus(value?.value as typeof user.status)}
-                    setStatus(value?.value as typeof user.status)
-                  }
 									styles={{
 										control: (styles) => ({
 											...styles,
@@ -680,14 +577,10 @@ const UserCard = ({
 												outline: "none",
 											},
 										}),
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-                        ? "#D5D9F0"
-                        : state.isSelected
-                          ? "#7872BF"
-                          : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
@@ -695,17 +588,13 @@ const UserCard = ({
 								/>
 							</div>
 							<div className="flex flex-col gap-3 w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
+								<label className="font-normal text-base text-mti-gray-dim">Type</label>
-                  Type
-                </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={USER_TYPE_OPTIONS}
 									menuPortalTarget={document?.body}
 									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
-                  onChange={(value) =>
+									onChange={(value) => setType(value?.value as typeof user.type)}
-                    setType(value?.value as typeof user.type)
-                  }
 									styles={{
 										control: (styles) => ({
 											...styles,
@@ -716,14 +605,10 @@ const UserCard = ({
 												outline: "none",
 											},
 										}),
-                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+										menuPortal: (base) => ({...base, zIndex: 9999}),
 										option: (styles, state) => ({
 											...styles,
-                      backgroundColor: state.isFocused
+											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-                        ? "#D5D9F0"
-                        : state.isSelected
-                          ? "#7872BF"
-                          : "white",
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
@@ -738,49 +623,26 @@ const UserCard = ({
 			<div className="flex gap-4 justify-between mt-4 w-full">
 				<div className="self-start flex gap-4 justify-start items-center w-full">
 					{onViewCorporate && ["student", "teacher"].includes(user.type) && (
-            <Button
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewCorporate}
-            >
 							View Corporate
 						</Button>
 					)}
 					{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
-            <Button
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewStudents}
-            >
 							View Students
 						</Button>
 					)}
 					{onViewTeachers && ["student", "corporate"].includes(user.type) && (
-            <Button
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
-              className="w-full max-w-[200px]"
-              variant="outline"
-              color="rose"
-              onClick={onViewTeachers}
-            >
 							View Teachers
 						</Button>
 					)}
 				</div>
 				<div className="self-end flex gap-4 w-full justify-end">
-          <Button
+					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
-            className="w-full max-w-[200px]"
-            variant="outline"
-            onClick={onClose}
-          >
 						Close
 					</Button>
-          <Button
+					<Button disabled={disabled} onClick={updateUser} className="w-full max-w-[200px]">
-            disabled={disabled}
-            onClick={updateUser}
-            className="w-full max-w-[200px]"
-          >
 						Update
 					</Button>
 				</div>