Company Name is now displayed on the Settings table, if available

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

@@ -2,7 +2,7 @@ import Button from "@/components/Low/Button";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {Type, User, userTypes} from "@/interfaces/user";
+import {Type, User, userTypes, CorporateUser} from "@/interfaces/user";
 import {Popover, Transition} from "@headlessui/react";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
@@ -19,6 +19,7 @@ import UserCard from "@/components/UserCard";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
+import {isCorporateUser} from '@/resources/user';
 
 const columnHelper = createColumnHelper<User>();
 
@@ -325,6 +326,15 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 			) as any,
 			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
+		columnHelper.accessor('corporateInformation.companyInformation.name', {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
+					<span>Company Name</span>
+					<SorterArrow name="companyName" />
+				</button>
+			) as any,
+			cell: (info) => info.getValue(),
+		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
@@ -378,6 +388,14 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return undefined;
 	};
 
+	const getCorporateName = (user: User) => {
+		if(isCorporateUser(user)) {
+			return user.corporateInformation?.companyInformation?.name
+		}
+
+		return '';
+	}
+
 	const sortFunction = (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
 			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
@@ -445,6 +463,18 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
 		}
 
+		if(sorter === 'companyName' || sorter === reverseString('companyName')) {
+			const aCorporateName = getCorporateName(a);
+			const bCorporateName = getCorporateName(b);
+			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 a.id.localeCompare(b.id);
 	};
 

src/resources/user.ts

@@ -1,4 +1,4 @@
-import {Type} from "@/interfaces/user";
+import {Type, User, CorporateUser} from "@/interfaces/user";
 
 export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	student: "Student",
@@ -8,3 +8,7 @@ export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	admin: "Admin",
 	developer: "Developer",
 };
+
+export function isCorporateUser(user: User): user is CorporateUser {
+	return (user as CorporateUser).corporateInformation !== undefined;
+  }