diff --git a/src/pages/(admin)/CodeGenerator.tsx b/src/pages/(admin)/CodeGenerator.tsx
index 50774f53..6a75574f 100644
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -17,8 +17,9 @@ const USER_TYPE_PERMISSIONS: {[key in Type]: Type[]} = {
teacher: [],
agent: [],
corporate: ["student", "teacher"],
- admin: ["student", "teacher", "agent", "corporate", "admin"],
- developer: ["student", "teacher", "agent", "corporate", "admin", "developer"],
+ mastercorporate: ["student", "teacher", "corporate"],
+ admin: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+ developer: ["student", "teacher", "agent", "corporate", "admin", "developer","mastercorporate"],
};
export default function CodeGenerator({user}: {user: User}) {
diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx
index 5e28543d..ae36a5cd 100644
--- a/src/pages/(admin)/Lists/GroupList.tsx
+++ b/src/pages/(admin)/Lists/GroupList.tsx
@@ -86,7 +86,7 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
const filteredUsers = emailUsers.filter(
(x) =>
- ((user.type === "developer" || user.type === "admin" || user.type === "corporate") &&
+ ((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
(x?.type === "student" || x?.type === "teacher")) ||
(user.type === "teacher" && x?.type === "student"),
);
@@ -189,7 +189,7 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
);
};
-const filterTypes = ["corporate", "teacher"];
+const filterTypes = ["corporate", "teacher", "mastercorporate"];
export default function GroupList({user}: {user: User}) {
const [isCreating, setIsCreating] = useState(false);
@@ -197,10 +197,10 @@ export default function GroupList({user}: {user: User}) {
const [filterByUser, setFilterByUser] = useState(false);
const {users} = useUsers();
- const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined);
+ const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined, user?.type);
useEffect(() => {
- if (user && (user.type === "corporate" || user.type === "teacher")) {
+ if (user && (['corporate', 'teacher', 'mastercorporate'].includes(user.type))) {
setFilterByUser(true);
}
}, [user]);
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index 23b941a5..44bf67fd 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -1,650 +1,941 @@
import Button from "@/components/Low/Button";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers";
-import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
-import {Popover, Transition} from "@headlessui/react";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
+import { Popover, Transition } from "@headlessui/react";
+import {
+ createColumnHelper,
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
-import {capitalize, reverse} from "lodash";
+import { capitalize, reverse } from "lodash";
import moment from "moment";
-import {Fragment, useEffect, useState} from "react";
-import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
-import {toast} from "react-toastify";
-import {countries, TCountries} from "countries-list";
+import { Fragment, useEffect, useState } from "react";
+import {
+ BsArrowDown,
+ BsArrowDownUp,
+ BsArrowUp,
+ BsCheck,
+ BsCheckCircle,
+ BsEye,
+ BsFillExclamationOctagonFill,
+ BsPerson,
+ BsTrash,
+} from "react-icons/bs";
+import { toast } from "react-toastify";
+import { countries, TCountries } from "countries-list";
import countryCodes from "country-codes-list";
import Modal from "@/components/Modal";
import UserCard from "@/components/UserCard";
-import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
+import {
+ getUserCompanyName,
+ isAgentUser,
+ USER_TYPE_LABELS,
+} from "@/resources/user";
import useFilterStore from "@/stores/listFilterStore";
-import {useRouter} from "next/router";
-import {isCorporateUser} from "@/resources/user";
-import {useListSearch} from "@/hooks/useListSearch";
-import {getUserCorporate} from "@/utils/groups";
-import {asyncSorter} from "@/utils";
-import {exportListToExcel, UserListRow} from "@/utils/users";
+import { useRouter } from "next/router";
+import { isCorporateUser } from "@/resources/user";
+import { useListSearch } from "@/hooks/useListSearch";
+import { getUserCorporate } from "@/utils/groups";
+import { asyncSorter } from "@/utils";
+import { exportListToExcel, UserListRow } from "@/utils/users";
const columnHelper = createColumnHelper
();
-const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
+const searchFields = [
+ ["name"],
+ ["email"],
+ ["corporateInformation", "companyInformation", "name"],
+];
-const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
- const [companyName, setCompanyName] = useState("");
- const [isLoading, setIsLoading] = useState(false);
+const CompanyNameCell = ({
+ users,
+ user,
+ groups,
+}: {
+ user: User;
+ users: User[];
+ groups: Group[];
+}) => {
+ const [companyName, setCompanyName] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
- useEffect(() => {
- const name = getUserCompanyName(user, users, groups);
- setCompanyName(name);
- }, [user, users, groups]);
+ useEffect(() => {
+ const name = getUserCompanyName(user, users, groups);
+ setCompanyName(name);
+ }, [user, users, groups]);
- return isLoading ? Loading... : <>{companyName};
+ return isLoading ? (
+ Loading...
+ ) : (
+ <>{companyName}
+ );
};
export default function UserList({
- user,
- filters = [],
- renderHeader,
+ user,
+ filters = [],
+ renderHeader,
}: {
- user: User;
- filters?: ((user: User) => boolean)[];
- renderHeader?: (total: number) => JSX.Element;
+ user: User;
+ filters?: ((user: User) => boolean)[];
+ renderHeader?: (total: number) => JSX.Element;
}) {
- const [showDemographicInformation, setShowDemographicInformation] = useState(false);
- const [sorter, setSorter] = useState();
- const [displayUsers, setDisplayUsers] = useState([]);
- const [selectedUser, setSelectedUser] = useState();
+ const [showDemographicInformation, setShowDemographicInformation] =
+ useState(false);
+ const [sorter, setSorter] = useState();
+ const [displayUsers, setDisplayUsers] = useState([]);
+ const [selectedUser, setSelectedUser] = useState();
- const {users, reload} = useUsers();
- const {groups} = useGroups(user && (user?.type === "corporate" || user?.type === "teacher") ? user.id : undefined);
+ const { users, reload } = useUsers();
+ const { groups } = useGroups(
+ user && (['corporate', 'teacher', 'mastercorporate'].includes(user?.type))
+ ? user.id
+ : undefined
+ );
- const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
- const router = useRouter();
+ const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+ const router = useRouter();
- const expirationDateColor = (date: Date) => {
- const momentDate = moment(date);
- const today = moment(new Date());
+ const expirationDateColor = (date: Date) => {
+ const momentDate = moment(date);
+ const today = moment(new Date());
- if (today.isAfter(momentDate)) return "!text-mti-red-light font-bold line-through";
- if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
- if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
- if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
- };
+ if (today.isAfter(momentDate))
+ return "!text-mti-red-light font-bold line-through";
+ if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
+ if (today.add(2, "weeks").isAfter(momentDate))
+ return "!text-mti-rose-light";
+ if (today.add(1, "months").isAfter(momentDate))
+ return "!text-mti-orange-light";
+ };
- useEffect(() => {
- (async () => {
- if (user && users) {
- const filterUsers =
- user.type === "corporate" || user.type === "teacher"
- ? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
- : users;
+ useEffect(() => {
+ (async () => {
+ if (user && users) {
+ const filterUsers =
+ user.type === "corporate" || user.type === "teacher"
+ ? users.filter((u) =>
+ groups.flatMap((g) => g.participants).includes(u.id)
+ )
+ : users;
- const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
- const sortedUsers = await asyncSorter(filteredUsers, sortFunction);
+ const filteredUsers = filters.reduce(
+ (d, f) => d.filter(f),
+ filterUsers
+ );
+ const sortedUsers = await asyncSorter(
+ filteredUsers,
+ sortFunction
+ );
- setDisplayUsers([...sortedUsers]);
- }
- })();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [user, users, sorter, groups]);
+ setDisplayUsers([...sortedUsers]);
+ }
+ })();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [user, users, sorter, groups]);
- const deleteAccount = (user: User) => {
- if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
+ const deleteAccount = (user: User) => {
+ if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
+ return;
- axios
- .delete<{ok: boolean}>(`/api/user?id=${user.id}`)
- .then(() => {
- toast.success("User deleted successfully!");
- reload();
- })
- .catch(() => {
- toast.error("Something went wrong!", {toastId: "delete-error"});
- })
- .finally(reload);
- };
+ axios
+ .delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
+ .then(() => {
+ toast.success("User deleted successfully!");
+ reload();
+ })
+ .catch(() => {
+ toast.error("Something went wrong!", { toastId: "delete-error" });
+ })
+ .finally(reload);
+ };
- const updateAccountType = (user: User, type: Type) => {
- if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
+ const updateAccountType = (user: User, type: Type) => {
+ if (
+ !confirm(
+ `Are you sure you want to update ${
+ user.name
+ }'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
+ )
+ )
+ return;
- axios
- .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
- ...user,
- type,
- })
- .then(() => {
- toast.success("User type updated successfully!");
- reload();
- })
- .catch(() => {
- toast.error("Something went wrong!", {toastId: "update-error"});
- });
- };
+ axios
+ .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+ ...user,
+ type,
+ })
+ .then(() => {
+ toast.success("User type updated successfully!");
+ reload();
+ })
+ .catch(() => {
+ toast.error("Something went wrong!", { toastId: "update-error" });
+ });
+ };
- const verifyAccount = (user: User) => {
- axios
- .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
- ...user,
- isVerified: true,
- })
- .then(() => {
- toast.success("User verified successfully!");
- reload();
- })
- .catch(() => {
- toast.error("Something went wrong!", {toastId: "update-error"});
- });
- };
+ const verifyAccount = (user: User) => {
+ axios
+ .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+ ...user,
+ isVerified: true,
+ })
+ .then(() => {
+ toast.success("User verified successfully!");
+ reload();
+ })
+ .catch(() => {
+ toast.error("Something went wrong!", { toastId: "update-error" });
+ });
+ };
- const toggleDisableAccount = (user: User) => {
- if (
- !confirm(
- `Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
- user.name
- }'s account? This change is usually related to their payment state.`,
- )
- )
- return;
+ const toggleDisableAccount = (user: User) => {
+ if (
+ !confirm(
+ `Are you sure you want to ${
+ user.status === "disabled" ? "enable" : "disable"
+ } ${
+ user.name
+ }'s account? This change is usually related to their payment state.`
+ )
+ )
+ return;
- axios
- .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
- ...user,
- status: user.status === "disabled" ? "active" : "disabled",
- })
- .then(() => {
- toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
- reload();
- })
- .catch(() => {
- toast.error("Something went wrong!", {toastId: "update-error"});
- });
- };
+ axios
+ .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+ ...user,
+ status: user.status === "disabled" ? "active" : "disabled",
+ })
+ .then(() => {
+ toast.success(
+ `User ${
+ user.status === "disabled" ? "enabled" : "disabled"
+ } successfully!`
+ );
+ reload();
+ })
+ .catch(() => {
+ toast.error("Something went wrong!", { toastId: "update-error" });
+ });
+ };
- const SorterArrow = ({name}: {name: string}) => {
- if (sorter === name) return ;
- if (sorter === reverseString(name)) return ;
+ const SorterArrow = ({ name }: { name: string }) => {
+ if (sorter === name) return ;
+ if (sorter === reverseString(name)) return ;
- return ;
- };
+ return ;
+ };
- const actionColumn = ({row}: {row: {original: User}}) => {
- return (
-
- {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
- {!row.original.isVerified && PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
-
verifyAccount(row.original)}>
-
-
- )}
- {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
-
toggleDisableAccount(row.original)}>
- {row.original.status === "disabled" ? (
-
- ) : (
-
- )}
-
- )}
- {PERMISSIONS.deleteUser[row.original.type]?.includes(user.type) && (
-
deleteAccount(row.original)}>
-
-
- )}
-
+ {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {!row.original.isVerified &&
+ PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
+
verifyAccount(row.original)}
+ >
+
+
+ )}
+ {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
+
toggleDisableAccount(row.original)}
+ >
+ {row.original.status === "disabled" ? (
+
+ ) : (
+
+ )}
+
+ )}
+ {PERMISSIONS.deleteUser[row.original.type]?.includes(user.type) && (
+
deleteAccount(row.original)}
+ >
+
+
+ )}
+
(PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
- {getValue()}
-
- ),
- }),
- columnHelper.accessor("demographicInformation.country", {
- header: (
-
- ) as any,
- cell: (info) =>
- info.getValue()
- ? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
- countries[info.getValue() as unknown as keyof TCountries].name
- } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
- : "Not available",
- }),
- columnHelper.accessor("demographicInformation.phone", {
- header: (
-
- ) as any,
- cell: (info) => info.getValue() || "Not available",
- enableSorting: true,
- }),
- columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
- id: "employment",
- header: (
-
- ) as any,
- cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
- enableSorting: true,
- }),
- columnHelper.accessor("demographicInformation.gender", {
- header: (
-
- ) as any,
- cell: (info) => capitalize(info.getValue()) || "Not available",
- enableSorting: true,
- }),
- {
- header: (
- setShowDemographicInformation((prev) => !prev)}>
- Switch
-
- ),
- id: "actions",
- cell: actionColumn,
- },
- ];
+ const demographicColumns = [
+ columnHelper.accessor("name", {
+ header: (
+
+ ) as any,
+ cell: ({ row, getValue }) => (
+
+ PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
+ ? setSelectedUser(row.original)
+ : null
+ }
+ >
+ {getValue()}
+
+ ),
+ }),
+ columnHelper.accessor("demographicInformation.country", {
+ header: (
+
+ ) as any,
+ cell: (info) =>
+ info.getValue()
+ ? `${
+ countryCodes.findOne("countryCode" as any, info.getValue()).flag
+ } ${
+ countries[info.getValue() as unknown as keyof TCountries].name
+ } (+${
+ countryCodes.findOne("countryCode" as any, info.getValue())
+ .countryCallingCode
+ })`
+ : "Not available",
+ }),
+ columnHelper.accessor("demographicInformation.phone", {
+ header: (
+
+ ) as any,
+ cell: (info) => info.getValue() || "Not available",
+ enableSorting: true,
+ }),
+ columnHelper.accessor(
+ (x) =>
+ x.type === "corporate" || x.type === "mastercorporate"
+ ? x.demographicInformation?.position
+ : x.demographicInformation?.employment,
+ {
+ id: "employment",
+ header: (
+
+ ) as any,
+ cell: (info) =>
+ (info.row.original.type === "corporate"
+ ? info.getValue()
+ : capitalize(info.getValue())) || "Not available",
+ enableSorting: true,
+ }
+ ),
+ columnHelper.accessor("demographicInformation.gender", {
+ header: (
+
+ ) as any,
+ cell: (info) => capitalize(info.getValue()) || "Not available",
+ enableSorting: true,
+ }),
+ {
+ header: (
+ setShowDemographicInformation((prev) => !prev)}
+ >
+ Switch
+
+ ),
+ id: "actions",
+ cell: actionColumn,
+ },
+ ];
- const defaultColumns = [
- columnHelper.accessor("name", {
- header: (
-
- ) as any,
- cell: ({row, getValue}) => (
- (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
- {row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
-
- ),
- }),
- columnHelper.accessor("email", {
- header: (
-
- ) as any,
- cell: ({row, getValue}) => (
- (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
- {getValue()}
-
- ),
- }),
- columnHelper.accessor("type", {
- header: (
-
- ) as any,
- cell: (info) => USER_TYPE_LABELS[info.getValue()],
- }),
- columnHelper.accessor("corporateInformation.companyInformation.name", {
- header: (
-
- ) as any,
- cell: (info) => ,
- }),
- columnHelper.accessor("subscriptionExpirationDate", {
- header: (
-
- ) as any,
- cell: (info) => (
-
- {!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
-
- ),
- }),
- columnHelper.accessor("isVerified", {
- header: (
-
- ) as any,
- cell: (info) => (
-
- ),
- }),
- {
- header: (
- setShowDemographicInformation((prev) => !prev)}>
- Switch
-
- ),
- id: "actions",
- cell: actionColumn,
- },
- ];
+ const defaultColumns = [
+ columnHelper.accessor("name", {
+ header: (
+
+ ) as any,
+ cell: ({ row, getValue }) => (
+
+ PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
+ ? setSelectedUser(row.original)
+ : null
+ }
+ >
+ {row.original.type === "corporate"
+ ? row.original.corporateInformation?.companyInformation?.name ||
+ getValue()
+ : getValue()}
+
+ ),
+ }),
+ columnHelper.accessor("email", {
+ header: (
+
+ ) as any,
+ cell: ({ row, getValue }) => (
+
+ PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
+ ? setSelectedUser(row.original)
+ : null
+ }
+ >
+ {getValue()}
+
+ ),
+ }),
+ columnHelper.accessor("type", {
+ header: (
+
+ ) as any,
+ cell: (info) => USER_TYPE_LABELS[info.getValue()],
+ }),
+ columnHelper.accessor("corporateInformation.companyInformation.name", {
+ header: (
+
+ ) as any,
+ cell: (info) => (
+
+ ),
+ }),
+ columnHelper.accessor("subscriptionExpirationDate", {
+ header: (
+
+ ) as any,
+ cell: (info) => (
+
+ {!info.getValue()
+ ? "No expiry date"
+ : moment(info.getValue()).format("DD/MM/YYYY")}
+
+ ),
+ }),
+ columnHelper.accessor("isVerified", {
+ header: (
+
+ ) as any,
+ cell: (info) => (
+
+ ),
+ }),
+ {
+ header: (
+ setShowDemographicInformation((prev) => !prev)}
+ >
+ Switch
+
+ ),
+ id: "actions",
+ cell: actionColumn,
+ },
+ ];
- const reverseString = (str: string) => reverse(str.split("")).join("");
+ const reverseString = (str: string) => reverse(str.split("")).join("");
- const selectSorter = (previous: string | undefined, name: string) => {
- if (!previous) return name;
- if (previous === name) return reverseString(name);
+ const selectSorter = (previous: string | undefined, name: string) => {
+ if (!previous) return name;
+ if (previous === name) return reverseString(name);
- return undefined;
- };
+ return undefined;
+ };
- const sortFunction = async (a: User, b: User) => {
- if (sorter === "name" || sorter === reverseString("name"))
- return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+ const sortFunction = async (a: User, b: User) => {
+ if (sorter === "name" || sorter === reverseString("name"))
+ return sorter === "name"
+ ? a.name.localeCompare(b.name)
+ : b.name.localeCompare(a.name);
- if (sorter === "email" || sorter === reverseString("email"))
- return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);
+ if (sorter === "email" || sorter === reverseString("email"))
+ return sorter === "email"
+ ? a.email.localeCompare(b.email)
+ : b.email.localeCompare(a.email);
- if (sorter === "type" || sorter === reverseString("type"))
- return sorter === "type"
- ? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
- : userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);
+ if (sorter === "type" || sorter === reverseString("type"))
+ return sorter === "type"
+ ? userTypes.findIndex((t) => a.type === t) -
+ userTypes.findIndex((t) => b.type === t)
+ : userTypes.findIndex((t) => b.type === t) -
+ userTypes.findIndex((t) => a.type === t);
- if (sorter === "verification" || sorter === reverseString("verification"))
- return sorter === "verification"
- ? a.isVerified.toString().localeCompare(b.isVerified.toString())
- : b.isVerified.toString().localeCompare(a.isVerified.toString());
+ if (sorter === "verification" || sorter === reverseString("verification"))
+ return sorter === "verification"
+ ? a.isVerified.toString().localeCompare(b.isVerified.toString())
+ : b.isVerified.toString().localeCompare(a.isVerified.toString());
- if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
- if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
- if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
- if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
- if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
- if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
- return 0;
- }
+ if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
+ if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate)
+ return sorter === "expiryDate" ? -1 : 1;
+ if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
+ return sorter === "expiryDate" ? 1 : -1;
+ if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
+ return 0;
+ if (
+ moment(a.subscriptionExpirationDate).isAfter(
+ b.subscriptionExpirationDate
+ )
+ )
+ return sorter === "expiryDate" ? -1 : 1;
+ if (
+ moment(b.subscriptionExpirationDate).isAfter(
+ a.subscriptionExpirationDate
+ )
+ )
+ return sorter === "expiryDate" ? 1 : -1;
+ return 0;
+ }
- if (sorter === "country" || sorter === reverseString("country")) {
- if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
- if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
- if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;
+ if (sorter === "country" || sorter === reverseString("country")) {
+ if (
+ !a.demographicInformation?.country &&
+ b.demographicInformation?.country
+ )
+ return sorter === "country" ? -1 : 1;
+ if (
+ a.demographicInformation?.country &&
+ !b.demographicInformation?.country
+ )
+ return sorter === "country" ? 1 : -1;
+ if (
+ !a.demographicInformation?.country &&
+ !b.demographicInformation?.country
+ )
+ return 0;
- return sorter === "country"
- ? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
- : b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
- }
+ return sorter === "country"
+ ? a.demographicInformation!.country.localeCompare(
+ b.demographicInformation!.country
+ )
+ : b.demographicInformation!.country.localeCompare(
+ a.demographicInformation!.country
+ );
+ }
- if (sorter === "phone" || sorter === reverseString("phone")) {
- if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
- if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
- if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;
+ if (sorter === "phone" || sorter === reverseString("phone")) {
+ if (!a.demographicInformation?.phone && b.demographicInformation?.phone)
+ return sorter === "phone" ? -1 : 1;
+ if (a.demographicInformation?.phone && !b.demographicInformation?.phone)
+ return sorter === "phone" ? 1 : -1;
+ if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
+ return 0;
- return sorter === "phone"
- ? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
- : b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
- }
+ return sorter === "phone"
+ ? a.demographicInformation!.phone.localeCompare(
+ b.demographicInformation!.phone
+ )
+ : b.demographicInformation!.phone.localeCompare(
+ a.demographicInformation!.phone
+ );
+ }
- if (sorter === "employment" || sorter === reverseString("employment")) {
- const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
- const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
+ if (sorter === "employment" || sorter === reverseString("employment")) {
+ const aSortingItem =
+ a.type === "corporate" || a.type === "mastercorporate"
+ ? a.demographicInformation?.position
+ : a.demographicInformation?.employment;
+ const bSortingItem =
+ b.type === "corporate" || b.type === "mastercorporate"
+ ? b.demographicInformation?.position
+ : b.demographicInformation?.employment;
- if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
- if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
- if (!aSortingItem && !bSortingItem) return 0;
+ if (!aSortingItem && bSortingItem)
+ return sorter === "employment" ? -1 : 1;
+ if (aSortingItem && !bSortingItem)
+ return sorter === "employment" ? 1 : -1;
+ if (!aSortingItem && !bSortingItem) return 0;
- return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
- }
+ return sorter === "employment"
+ ? aSortingItem!.localeCompare(bSortingItem!)
+ : bSortingItem!.localeCompare(aSortingItem!);
+ }
- if (sorter === "gender" || sorter === reverseString("gender")) {
- if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
- if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
- if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;
+ if (sorter === "gender" || sorter === reverseString("gender")) {
+ if (!a.demographicInformation?.gender && b.demographicInformation?.gender)
+ return sorter === "employment" ? -1 : 1;
+ if (a.demographicInformation?.gender && !b.demographicInformation?.gender)
+ return sorter === "employment" ? 1 : -1;
+ if (
+ !a.demographicInformation?.gender &&
+ !b.demographicInformation?.gender
+ )
+ return 0;
- return sorter === "gender"
- ? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
- : b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
- }
+ return sorter === "gender"
+ ? a.demographicInformation!.gender.localeCompare(
+ b.demographicInformation!.gender
+ )
+ : b.demographicInformation!.gender.localeCompare(
+ a.demographicInformation!.gender
+ );
+ }
- if (sorter === "companyName" || sorter === reverseString("companyName")) {
- const aCorporateName = getUserCompanyName(a, users, groups);
- const bCorporateName = getUserCompanyName(b, users, groups);
- if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
- if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
- if (!aCorporateName && !bCorporateName) return 0;
+ if (sorter === "companyName" || sorter === reverseString("companyName")) {
+ const aCorporateName = getUserCompanyName(a, users, groups);
+ const bCorporateName = getUserCompanyName(b, users, groups);
+ if (!aCorporateName && bCorporateName)
+ return sorter === "companyName" ? -1 : 1;
+ if (aCorporateName && !bCorporateName)
+ return sorter === "companyName" ? 1 : -1;
+ if (!aCorporateName && !bCorporateName) return 0;
- return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
- }
+ return sorter === "companyName"
+ ? aCorporateName.localeCompare(bCorporateName)
+ : bCorporateName.localeCompare(aCorporateName);
+ }
- return a.id.localeCompare(b.id);
- };
+ return a.id.localeCompare(b.id);
+ };
- const {rows: filteredRows, renderSearch} = useListSearch(searchFields, displayUsers);
+ const { rows: filteredRows, renderSearch } = useListSearch(
+ searchFields,
+ displayUsers
+ );
- const table = useReactTable({
- data: filteredRows,
- columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
- getCoreRowModel: getCoreRowModel(),
- });
+ const table = useReactTable({
+ data: filteredRows,
+ columns: (!showDemographicInformation
+ ? defaultColumns
+ : demographicColumns) as any,
+ getCoreRowModel: getCoreRowModel(),
+ });
- const downloadExcel = () => {
- const csv = exportListToExcel(filteredRows, users, groups);
+ const downloadExcel = () => {
+ const csv = exportListToExcel(filteredRows, users, groups);
- const element = document.createElement("a");
- const file = new Blob([csv], {type: "text/csv"});
- element.href = URL.createObjectURL(file);
- element.download = "users.csv";
- document.body.appendChild(element);
- element.click();
- document.body.removeChild(element);
- };
+ const element = document.createElement("a");
+ const file = new Blob([csv], { type: "text/csv" });
+ element.href = URL.createObjectURL(file);
+ element.download = "users.csv";
+ document.body.appendChild(element);
+ element.click();
+ document.body.removeChild(element);
+ };
- const viewStudentFilter = (x: User) => x.type === "student";
- const viewTeacherFilter = (x: User) => x.type === "teacher";
- const belongsToAdminFilter = (x: User) => {
- if (!selectedUser) return false;
- return groups
- .filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
- .flatMap((g) => g.participants)
- .includes(x.id);
- };
+ const viewStudentFilter = (x: User) => x.type === "student";
+ const viewTeacherFilter = (x: User) => x.type === "teacher";
+ const belongsToAdminFilter = (x: User) => {
+ if (!selectedUser) return false;
+ return groups
+ .filter(
+ (g) =>
+ g.admin === selectedUser.id ||
+ g.participants.includes(selectedUser.id)
+ )
+ .flatMap((g) => g.participants)
+ .includes(x.id);
+ };
- const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x);
- const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x);
+ const viewStudentFilterBelongsToAdmin = (x: User) =>
+ x.type === "student" && belongsToAdminFilter(x);
+ const viewTeacherFilterBelongsToAdmin = (x: User) =>
+ x.type === "teacher" && belongsToAdminFilter(x);
- const renderUserCard = (selectedUser: User) => {
- const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
- const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
- return (
-
-
0
- ? () => {
- appendUserFilters({
- id: "view-students",
- filter: viewStudentFilter,
- });
- appendUserFilters({
- id: "belongs-to-admin",
- filter: belongsToAdminFilter,
- });
+ const renderUserCard = (selectedUser: User) => {
+ const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
+ const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
+ return (
+
+ 0
+ ? () => {
+ appendUserFilters({
+ id: "view-students",
+ filter: viewStudentFilter,
+ });
+ appendUserFilters({
+ id: "belongs-to-admin",
+ filter: belongsToAdminFilter,
+ });
- router.push("/list/users");
- }
- : undefined
- }
- onViewTeachers={
- (selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
- ? () => {
- appendUserFilters({
- id: "view-teachers",
- filter: viewTeacherFilter,
- });
- appendUserFilters({
- id: "belongs-to-admin",
- filter: belongsToAdminFilter,
- });
+ router.push("/list/users");
+ }
+ : undefined
+ }
+ onViewTeachers={
+ (selectedUser.type === "corporate" ||
+ selectedUser.type === "student") &&
+ teachersFromAdmin.length > 0
+ ? () => {
+ appendUserFilters({
+ id: "view-teachers",
+ filter: viewTeacherFilter,
+ });
+ appendUserFilters({
+ id: "belongs-to-admin",
+ filter: belongsToAdminFilter,
+ });
- router.push("/list/users");
- }
- : undefined
- }
- onViewCorporate={
- selectedUser.type === "teacher" || selectedUser.type === "student"
- ? () => {
- appendUserFilters({
- id: "view-corporate",
- filter: (x: User) => x.type === "corporate",
- });
- appendUserFilters({
- id: "belongs-to-admin",
- filter: (x: User) =>
- groups
- .filter((g) => g.participants.includes(selectedUser.id))
- .flatMap((g) => [g.admin, ...g.participants])
- .includes(x.id),
- });
+ router.push("/list/users");
+ }
+ : undefined
+ }
+ onViewCorporate={
+ selectedUser.type === "teacher" || selectedUser.type === "student"
+ ? () => {
+ appendUserFilters({
+ id: "view-corporate",
+ filter: (x: User) => x.type === "corporate",
+ });
+ appendUserFilters({
+ id: "belongs-to-admin",
+ filter: (x: User) =>
+ groups
+ .filter((g) => g.participants.includes(selectedUser.id))
+ .flatMap((g) => [g.admin, ...g.participants])
+ .includes(x.id),
+ });
- router.push("/list/users");
- }
- : undefined
- }
- onClose={(shouldReload) => {
- setSelectedUser(undefined);
- if (shouldReload) reload();
- }}
- user={selectedUser}
- />
-
- );
- };
+ router.push("/list/users");
+ }
+ : undefined
+ }
+ onClose={(shouldReload) => {
+ setSelectedUser(undefined);
+ if (shouldReload) reload();
+ }}
+ user={selectedUser}
+ />
+
-
setSelectedUser(undefined)}>
- {selectedUser && renderUserCard(selectedUser)}
-
-
-
- {renderSearch()}
-
-
-
-
- {table.getHeaderGroups().map((headerGroup) => (
-
- {headerGroup.headers.map((header) => (
- |
- {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
- |
- ))}
-
- ))}
-
-
- {table.getRowModel().rows.map((row) => (
-
- {row.getVisibleCells().map((cell) => (
- |
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
- |
- ))}
-
- ))}
-
-
-
-
+
setSelectedUser(undefined)}
+ >
+ {selectedUser && renderUserCard(selectedUser)}
+
+
+
+ {renderSearch()}
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ |
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ |
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ ))}
+
+ ))}
+
+
+
+
Payment Record
- {(user.type === "developer" || user.type === "admin" || user.type === "agent" || user.type === "corporate") && (
+ {(["developer", "admin", "agent", "corporate", "mastercorporate"].includes(user.type)) && (