278 lines
9.3 KiB
TypeScript
278 lines
9.3 KiB
TypeScript
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 {Divider} from "primereact/divider";
|
|
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";
|
|
};
|
|
|
|
interface Props {
|
|
user: User;
|
|
onClose: (reload?: boolean) => void;
|
|
onViewStudents?: () => void;
|
|
onViewTeachers?: () => void;
|
|
}
|
|
|
|
const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
|
|
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>
|
|
{user.corporateInformation && (
|
|
<>
|
|
<Divider className="w-full" />
|
|
<div className="flex flex-col md:flex-row gap-8 w-full">
|
|
<Input
|
|
label="Company Name"
|
|
type="text"
|
|
name="companyName"
|
|
onChange={() => null}
|
|
placeholder="Enter company name"
|
|
defaultValue={user.corporateInformation.companyInformation.name}
|
|
disabled
|
|
/>
|
|
<Input
|
|
label="Amount of Users"
|
|
type="number"
|
|
name="userAmount"
|
|
onChange={() => null}
|
|
placeholder="Enter amount of users"
|
|
defaultValue={user.corporateInformation.companyInformation.userAmount}
|
|
disabled
|
|
/>
|
|
</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">
|
|
{onViewStudents && (
|
|
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
|
|
View Students
|
|
</Button>
|
|
)}
|
|
{onViewTeachers && (
|
|
<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 onClick={updateUser} className="w-full max-w-[200px]">
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserCard;
|