Added the corporate user balance to the User Card

src/components/UserCard.tsx

@@ -1,5 +1,5 @@
 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 {RadioGroup} from "@headlessui/react";
 import axios from "axios";
@@ -8,7 +8,7 @@ import moment from "moment";
 import {Divider} from "primereact/divider";
 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 Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
@@ -19,17 +19,15 @@ import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
 import {USER_TYPE_LABELS} from "@/resources/user";
 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 {
@@ -70,38 +68,15 @@ const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, 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(
-    user.type === "corporate"
-      ? user.corporateInformation?.companyInformation.userAmount
-      : undefined,
-  );
-  const [paymentValue, setPaymentValue] = useState(
-    user.type === "corporate"
-      ? user.corporateInformation?.payment?.value
-      : 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 [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
+	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : 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();
+	const {codes} = useCodes(user.id);
 
 	useEffect(() => {
 		if (users && users.length > 0) {
@@ -159,11 +111,8 @@ 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}`, {
@@ -191,9 +140,7 @@ const UserCard = ({
 								payment: {
 									value: paymentValue,
 									currency: paymentCurrency,
-                  ...(referralAgent === ""
+									...(referralAgent === "" ? {} : {commission: commissionValue}),
-                    ? {}
-                    : { commission: commissionValue }),
 								},
 						  }
 						: undefined,
@@ -207,34 +154,43 @@ const UserCard = ({
 			});
 	};
 
-  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,13 +273,10 @@ 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={{
@@ -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,15 +303,12 @@ 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={[
@@ -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,14 +423,11 @@ 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}) => (
 									<RadioGroup.Option value={status} key={status}>
 										{({checked}) => (
@@ -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,14 +461,11 @@ 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}) => (
 										<span
@@ -556,8 +475,7 @@ const UserCard = ({
 												!checked
 													? "bg-white border-mti-gray-platinum"
 													: "bg-mti-purple-light border-mti-purple-dark text-white",
-                      )}
+											)}>
-                    >
 											Male
 										</span>
 									)}
@@ -571,8 +489,7 @@ const UserCard = ({
 												!checked
 													? "bg-white border-mti-gray-platinum"
 													: "bg-mti-purple-light border-mti-purple-dark text-white",
-                      )}
+											)}>
-                    >
 											Female
 										</span>
 									)}
@@ -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,
@@ -683,11 +580,7 @@ const UserCard = ({
 										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,
@@ -719,11 +608,7 @@ const UserCard = ({
 										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>