Added the ability to change the status and type of a user

src/components/UserCard.tsx

@@ -29,14 +29,18 @@ const expirationDateColor = (date: Date) => {
 
 interface Props {
 	user: User;
+	loggedInUser: User;
 	onClose: (reload?: boolean) => void;
 	onViewStudents?: () => void;
 	onViewTeachers?: () => void;
 }
 
-const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
+const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
+	const [type, setType] = useState(user.type);
+	const [status, setStatus] = useState(user.status);
+
 	const {stats} = useStats(user.id);
 	const {users} = useUsers();
 
@@ -44,7 +48,7 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 		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})
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate, type, status})
 			.then(() => {
 				toast.success("User updated successfully!");
 				onClose(true);
@@ -216,7 +220,12 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 										expirationDateColor(expiryDate),
 										"transition duration-300 ease-in-out",
 									)}
-									filterDate={(date) => moment(date).isAfter(new Date())}
+									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)}
@@ -225,6 +234,38 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 						</div>
 					</div>
 				</div>
+				{(loggedInUser.type === "developer" || loggedInUser.type === "owner") && (
+					<>
+						<Divider className="w-full" />
+						<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
+									defaultValue={user.status}
+									onChange={(e) => setStatus(e.target.value as typeof user.status)}
+									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+									<option value="active">Active</option>
+									<option value="disabled">Disabled</option>
+									<option value="paymentDue">Payment Due</option>
+								</select>
+							</div>
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Type</label>
+								<select
+									defaultValue={user.type}
+									onChange={(e) => setType(e.target.value as typeof user.type)}
+									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+									<option value="student">Student</option>
+									<option value="teacher">Teacher</option>
+									<option value="corporate">Corporate</option>
+									<option value="agent">Country Agent</option>
+									<option value="owner">Owner</option>
+									<option value="developer">Developer</option>
+								</select>
+							</div>
+						</div>
+					</>
+				)}
 				{user.type === "corporate" && (
 					<>
 						<Divider className="w-full" />

src/dashboards/Corporate.tsx

@@ -250,6 +250,7 @@ export default function CorporateDashboard({user}: Props) {
 					{selectedUser && (
 						<div className="w-full flex flex-col gap-8">
 							<UserCard
+								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
 									if (shouldReload) reload();

src/dashboards/Owner.tsx

@@ -292,6 +292,7 @@ export default function OwnerDashboard({user}: Props) {
 					{selectedUser && (
 						<div className="w-full flex flex-col gap-8">
 							<UserCard
+								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
 									if (shouldReload) reload();

src/dashboards/Teacher.tsx

@@ -317,6 +317,7 @@ export default function TeacherDashboard({user}: Props) {
 					{selectedUser && (
 						<div className="w-full flex flex-col gap-8">
 							<UserCard
+								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
 									if (shouldReload) reload();

src/pages/(admin)/Lists/UserList.tsx

@@ -453,6 +453,7 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
 					{selectedUser && (
 						<div className="w-full flex flex-col gap-8">
 							<UserCard
+								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
 									if (shouldReload) reload();