745 lines
26 KiB
TypeScript
745 lines
26 KiB
TypeScript
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
|
|
import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type, Stat} 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 {Divider} from "primereact/divider";
|
|
import {useEffect, useState} from "react";
|
|
import ReactDatePicker from "react-datepicker";
|
|
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";
|
|
import CountrySelect from "./Low/CountrySelect";
|
|
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 {CURRENCIES} from "@/resources/paypal";
|
|
import useCodes from "@/hooks/useCodes";
|
|
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
|
|
import {PERMISSIONS} from "@/constants/userPermissions";
|
|
import {PermissionType} from "@/interfaces/permissions";
|
|
import usePermissions from "@/hooks/usePermissions";
|
|
|
|
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";
|
|
};
|
|
|
|
interface Props {
|
|
user: User;
|
|
loggedInUser: User;
|
|
onClose: (reload?: boolean) => void;
|
|
onViewStudents?: () => void;
|
|
onViewTeachers?: () => void;
|
|
onViewCorporate?: () => void;
|
|
maxUserAmount?: number;
|
|
disabled?: boolean;
|
|
disabledFields?: {
|
|
countryManager?: boolean;
|
|
};
|
|
}
|
|
|
|
const USER_STATUS_OPTIONS = [
|
|
{
|
|
value: "active",
|
|
label: "Active",
|
|
},
|
|
{
|
|
value: "disabled",
|
|
label: "Disabled",
|
|
},
|
|
{
|
|
value: "paymentDue",
|
|
label: "Payment Due",
|
|
},
|
|
];
|
|
|
|
const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
|
|
value: type,
|
|
label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
|
|
}));
|
|
|
|
const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
|
|
value: currency,
|
|
label,
|
|
}));
|
|
|
|
const UserCard = ({
|
|
user,
|
|
loggedInUser,
|
|
maxUserAmount,
|
|
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>(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : undefined,
|
|
);
|
|
const [studentID, setStudentID] = useState<string | undefined>(user.type === "student" ? user.studentID : undefined);
|
|
|
|
const [referralAgent, setReferralAgent] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.referralAgent : undefined,
|
|
);
|
|
const [companyName, setCompanyName] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate"
|
|
? user.corporateInformation?.companyInformation.name
|
|
: user.type === "agent"
|
|
? user.agentInformation?.companyName
|
|
: undefined,
|
|
);
|
|
const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
|
|
const [commercialRegistration, setCommercialRegistration] = useState(
|
|
user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
|
|
);
|
|
const [userAmount, setUserAmount] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.companyInformation.userAmount : undefined,
|
|
);
|
|
const [paymentValue, setPaymentValue] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.value : undefined,
|
|
);
|
|
const [paymentCurrency, setPaymentCurrency] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.currency : "EUR",
|
|
);
|
|
const [monthlyDuration, setMonthlyDuration] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.monthlyDuration : undefined,
|
|
);
|
|
const [commissionValue, setCommission] = useState(
|
|
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.commission : undefined,
|
|
);
|
|
const {data: stats} = useFilterRecordsByUser<Stat[]>(user.id);
|
|
const {users} = useUsers();
|
|
const {codes} = useCodes(user.id);
|
|
const {permissions} = usePermissions(loggedInUser.id);
|
|
|
|
useEffect(() => {
|
|
if (users && users.length > 0) {
|
|
if (!referralAgent) {
|
|
setReferralAgentLabel("No manager");
|
|
return;
|
|
}
|
|
|
|
const agent = users.find((x) => x.id === referralAgent);
|
|
setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
|
|
}
|
|
}, [users, referralAgent]);
|
|
|
|
const updateUser = () => {
|
|
if (user.type === "corporate" || (user.type === "mastercorporate" && (!paymentValue || paymentValue < 0)))
|
|
return toast.error("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;
|
|
|
|
axios
|
|
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
|
|
...user,
|
|
subscriptionExpirationDate: expiryDate,
|
|
studentID,
|
|
type,
|
|
status,
|
|
agentInformation:
|
|
type === "agent"
|
|
? {
|
|
companyName,
|
|
commercialRegistration,
|
|
arabName,
|
|
}
|
|
: undefined,
|
|
corporateInformation:
|
|
type === "corporate"
|
|
? {
|
|
referralAgent,
|
|
monthlyDuration,
|
|
companyInformation: {
|
|
name: companyName,
|
|
userAmount,
|
|
},
|
|
payment: {
|
|
value: paymentValue,
|
|
currency: paymentCurrency,
|
|
...(referralAgent === "" ? {} : {commission: commissionValue}),
|
|
},
|
|
}
|
|
: undefined,
|
|
})
|
|
.then(() => {
|
|
toast.success("User updated successfully!");
|
|
onClose(true);
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", {toastId: "update-error"});
|
|
});
|
|
};
|
|
|
|
const generalProfileItems = [
|
|
{
|
|
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: "Modules",
|
|
},
|
|
{
|
|
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",
|
|
},
|
|
];
|
|
|
|
const corporateProfileItems =
|
|
user.type === "corporate" || user.type === "mastercorporate"
|
|
? [
|
|
{
|
|
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",
|
|
},
|
|
]
|
|
: [];
|
|
|
|
const updateUserPermission = PERMISSIONS.updateUser[user.type] as {
|
|
list: Type[];
|
|
perm: PermissionType;
|
|
};
|
|
return (
|
|
<>
|
|
<ProfileSummary
|
|
user={user}
|
|
items={user.type === "corporate" || user.type === "mastercorporate" ? corporateProfileItems : generalProfileItems}
|
|
/>
|
|
|
|
{user.type === "agent" && (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
|
|
<Input
|
|
label="Company Name (Arabic)"
|
|
type="text"
|
|
name="arabName"
|
|
onChange={setArabName}
|
|
placeholder="Enter their company's name in arabic"
|
|
defaultValue={arabName}
|
|
required
|
|
disabled={disabled}
|
|
/>
|
|
<Input
|
|
label="Company Name (English)"
|
|
type="text"
|
|
name="companyName"
|
|
onChange={setCompanyName}
|
|
placeholder="Enter their company's name in english"
|
|
defaultValue={companyName}
|
|
required
|
|
disabled={disabled}
|
|
/>
|
|
<Input
|
|
label="Commercial Registration"
|
|
type="text"
|
|
name="commercialRegistration"
|
|
onChange={setCommercialRegistration}
|
|
placeholder="Enter commercial registration"
|
|
defaultValue={commercialRegistration}
|
|
required
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
<Divider className="w-full !m-0" />
|
|
</>
|
|
)}
|
|
{(user.type === "corporate" || user.type === "mastercorporate") && (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
|
|
<Input
|
|
label="Corporate Name"
|
|
type="text"
|
|
name="companyName"
|
|
onChange={setCompanyName}
|
|
placeholder="Enter corporate name"
|
|
defaultValue={companyName}
|
|
disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
|
|
/>
|
|
<Input
|
|
label="Number of Users"
|
|
type="number"
|
|
name="userAmount"
|
|
max={maxUserAmount}
|
|
onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
|
|
placeholder="Enter number of users"
|
|
defaultValue={userAmount}
|
|
disabled={
|
|
disabled ||
|
|
checkAccess(
|
|
loggedInUser,
|
|
getTypesOfUser(["developer", "admin", ...((user.type === "corporate" ? ["mastercorporate"] : []) as Type[])]),
|
|
)
|
|
}
|
|
/>
|
|
<Input
|
|
label="Monthly Duration"
|
|
type="number"
|
|
name="monthlyDuration"
|
|
onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
|
|
placeholder="Enter monthly duration"
|
|
defaultValue={monthlyDuration}
|
|
disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
|
|
/>
|
|
<div className="flex flex-col gap-3 w-full lg:col-span-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
|
|
<div className="w-full grid grid-cols-6 gap-2">
|
|
<Input
|
|
name="paymentValue"
|
|
onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
|
|
type="number"
|
|
defaultValue={paymentValue || 0}
|
|
className="col-span-3"
|
|
disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
|
|
/>
|
|
<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 && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
|
|
)}
|
|
options={CURRENCIES_OPTIONS}
|
|
value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
|
|
onChange={(value) => setPaymentCurrency(value?.value)}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({...base, zIndex: 9999}),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
isDisabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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">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",
|
|
(checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager) &&
|
|
"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
|
|
)}
|
|
options={[
|
|
{value: "", label: "No referral"},
|
|
...users
|
|
.filter((u) => u.type === "agent")
|
|
.map((x) => ({
|
|
value: x.id,
|
|
label: `${x.name} - ${x.email}`,
|
|
})),
|
|
]}
|
|
defaultValue={{
|
|
value: referralAgent,
|
|
label: referralAgentLabel,
|
|
}}
|
|
menuPortalTarget={document?.body}
|
|
onChange={(value) => setReferralAgent(value?.value)}
|
|
styles={{
|
|
menuPortal: (base) => ({...base, zIndex: 9999}),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
// editing country manager should only be available for dev/admin
|
|
isDisabled={checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || 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">Commission</label>
|
|
<Input
|
|
name="commissionValue"
|
|
onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
|
|
type="number"
|
|
defaultValue={commissionValue || 0}
|
|
className="col-span-3"
|
|
disabled={disabled || loggedInUser.type === "agent"}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Divider className="w-full !m-0" />
|
|
</>
|
|
)}
|
|
<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>
|
|
|
|
{user.type === "student" && (
|
|
<div className="flex flex-col md:flex-row gap-8 w-full">
|
|
<Input
|
|
type="text"
|
|
name="passport_id"
|
|
label="Passport/National ID"
|
|
onChange={() => null}
|
|
placeholder="Enter National ID or Passport number"
|
|
value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
|
|
disabled
|
|
required
|
|
/>
|
|
<Input
|
|
type="text"
|
|
name="studentID"
|
|
label="Student ID"
|
|
onChange={setStudentID}
|
|
placeholder="Enter Student ID"
|
|
disabled={!checkAccess(loggedInUser, getTypesOfUser(["teacher", "agent", "student"]), permissions, "editStudent")}
|
|
value={studentID}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col md:flex-row gap-8 w-full">
|
|
{user.type !== "corporate" && user.type !== "mastercorporate" && (
|
|
<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"
|
|
disabled={disabled}>
|
|
{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>
|
|
)}
|
|
{(user.type === "corporate" || user.type === "mastercorporate") && (
|
|
<Input
|
|
name="position"
|
|
onChange={setPosition}
|
|
type="text"
|
|
label="Position"
|
|
defaultValue={position}
|
|
placeholder="CEO, Head of Marketing..."
|
|
disabled
|
|
required
|
|
/>
|
|
)}
|
|
<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"
|
|
disabled={disabled}>
|
|
<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() : null)}
|
|
disabled={
|
|
disabled || (!["admin", "developer"].includes(loggedInUser.type) && !!loggedInUser.subscriptionExpirationDate)
|
|
}>
|
|
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()) &&
|
|
(loggedInUser.subscriptionExpirationDate
|
|
? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
|
|
: true)
|
|
}
|
|
dateFormat="dd/MM/yyyy"
|
|
selected={moment(expiryDate).toDate()}
|
|
onChange={(date) => setExpiryDate(date)}
|
|
disabled={disabled}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{checkAccess(
|
|
loggedInUser,
|
|
["developer", "admin", "corporate", "mastercorporate"],
|
|
permissions,
|
|
user.type === "teacher" ? "editTeacher" : user.type === "student" ? "editStudent" : undefined,
|
|
) && (
|
|
<>
|
|
<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">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.filter((x) => {
|
|
if (checkAccess(loggedInUser, ["admin", "developer"])) return true;
|
|
return x.value !== "paymentDue";
|
|
})}
|
|
menuPortalTarget={document?.body}
|
|
value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
|
|
onChange={(value) => setStatus(value?.value as typeof user.status)}
|
|
styles={{
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
menuPortal: (base) => ({...base, zIndex: 9999}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
isDisabled={disabled}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">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.filter((x) => {
|
|
if (x.value === "student")
|
|
return checkAccess(
|
|
loggedInUser,
|
|
["developer", "admin", "corporate", "mastercorporate"],
|
|
permissions,
|
|
"editStudent",
|
|
);
|
|
|
|
if (x.value === "teacher")
|
|
return checkAccess(
|
|
loggedInUser,
|
|
["developer", "admin", "corporate", "mastercorporate"],
|
|
permissions,
|
|
"editTeacher",
|
|
);
|
|
|
|
if (x.value === "corporate")
|
|
return checkAccess(loggedInUser, ["developer", "admin", "mastercorporate"], permissions, "editCorporate");
|
|
|
|
return checkAccess(loggedInUser, ["developer", "admin"]);
|
|
})}
|
|
menuPortalTarget={document?.body}
|
|
value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
|
|
onChange={(value) => setType(value?.value as typeof user.type)}
|
|
styles={{
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
menuPortal: (base) => ({...base, zIndex: 9999}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
isDisabled={disabled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
|
|
<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 className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
|
|
View Corporate
|
|
</Button>
|
|
)}
|
|
{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
|
|
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
|
|
View Students
|
|
</Button>
|
|
)}
|
|
{onViewTeachers && ["student", "corporate"].includes(user.type) && (
|
|
<Button 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 className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
disabled={disabled || !checkAccess(loggedInUser, updateUserPermission.list, permissions, updateUserPermission.perm)}
|
|
onClick={updateUser}
|
|
className="w-full max-w-[200px]">
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserCard;
|