ENCOA-316 ENCOA-317:

Refactor components to remove Layout wrapper and pass it in the App component , implemented a skeleton feedback while loading page and improved API calls related to Dashboard/User Profile

src/pages/entities/[id]/index.tsx

@@ -1,24 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
-import Layout from "@/components/High/Layout";
 import Select from "@/components/Low/Select";
 import Input from "@/components/Low/Input";
 import Checkbox from "@/components/Low/Checkbox";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import { useListSearch } from "@/hooks/useListSearch";
-import usePagination from "@/hooks/usePagination";
-import { Entity, EntityWithRoles, Role } from "@/interfaces/entity";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { EntityWithRoles, Role } from "@/interfaces/entity";
+import {  User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { getEntityWithRoles } from "@/utils/entities.be";
-import { convertToUsers, getGroup } from "@/utils/groups.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { checkAccess, doesEntityAllow, getTypesOfUser } from "@/utils/permissions";
+import { doesEntityAllow  } from "@/utils/permissions";
 import { getUserName, isAdmin } from "@/utils/users";
-import { filterAllowedUsers, getEntitiesUsers, getEntityUsers, getLinkedUsers, getSpecificUsers, getUsers } from "@/utils/users.be";
+import { filterAllowedUsers, getEntitiesUsers, getEntityUsers,  getUsers } from "@/utils/users.be";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
@@ -28,7 +24,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect,  useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import { CURRENCIES } from "@/resources/paypal";
 
@@ -37,11 +33,9 @@ import {
 	BsChevronLeft,
 	BsClockFill,
 	BsEnvelopeFill,
-	BsFillPersonVcardFill,
 	BsHash,
 	BsPerson,
 	BsPlus,
-	BsSquare,
 	BsStopwatchFill,
 	BsTag,
 	BsTrash,
@@ -344,7 +338,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-start justify-between">
@@ -555,7 +549,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 						searchFields={[["name"], ["email"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
 					/>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/entities/[id]/roles/[role].tsx

@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Checkbox from "@/components/Low/Checkbox";
 import Separator from "@/components/Low/Separator";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
@@ -152,7 +151,7 @@ interface Props {
 	disableEdit?: boolean
 }
 
-export default function Role({ user, entity, role, userCount, disableEdit }: Props) {
+export default function EntityRole({ user, entity, role, userCount, disableEdit }: Props) {
 	const [permissions, setPermissions] = useState(role.permissions)
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -240,7 +239,7 @@ export default function Role({ user, entity, role, userCount, disableEdit }: Pro
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-end justify-between">
@@ -388,7 +387,7 @@ export default function Role({ user, entity, role, userCount, disableEdit }: Pro
 						</div>
 					</section>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/entities/[id]/roles/index.tsx

@@ -1,42 +1,25 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
-import Layout from "@/components/High/Layout";
-import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import {useListSearch} from "@/hooks/useListSearch";
-import usePagination from "@/hooks/usePagination";
-import {Entity, EntityWithRoles, Role} from "@/interfaces/entity";
-import {GroupWithUsers, User} from "@/interfaces/user";
+import { EntityWithRoles, Role} from "@/interfaces/entity";
+import { User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
-import {USER_TYPE_LABELS} from "@/resources/user";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {getEntityWithRoles} from "@/utils/entities.be";
-import {convertToUsers, getGroup} from "@/utils/groups.be";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {checkAccess, doesEntityAllow, getTypesOfUser} from "@/utils/permissions";
-import {getUserName} from "@/utils/users";
-import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
+import { doesEntityAllow} from "@/utils/permissions";
+import {getEntityUsers} from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import {withIronSessionSsr} from "iron-session/next";
-import moment from "moment";
 import Head from "next/head";
 import Link from "next/link";
 import {useRouter} from "next/router";
 import {Divider} from "primereact/divider";
-import {useEffect, useMemo, useState} from "react";
 import {
 	BsChevronLeft,
-	BsClockFill,
-	BsEnvelopeFill,
-	BsFillPersonVcardFill,
 	BsPlus,
-	BsSquare,
-	BsStopwatchFill,
-	BsTag,
-	BsTrash,
-	BsX,
 } from "react-icons/bs";
 import {toast, ToastContainer} from "react-toastify";
 
@@ -133,7 +116,7 @@ export default function Home({user, entity, roles, users}: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-end justify-between">
@@ -152,7 +135,7 @@ export default function Home({user, entity, roles, users}: Props) {
 
 					<CardList list={roles} searchFields={[["label"]]} renderCard={renderCard} firstCard={canCreateRole ? firstCard : undefined} />
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/entities/create.tsx

@@ -1,19 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Input from "@/components/Low/Input";
-import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
 import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import { Entity, EntityWithRoles } from "@/interfaces/entity";
+import { Entity } from "@/interfaces/entity";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
-import { mapBy, redirect, serialize } from "@/utils";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { redirect, serialize } from "@/utils";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName } from "@/utils/users";
-import { getLinkedUsers, getUsers } from "@/utils/users.be";
+import {  getUsers } from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
@@ -26,7 +23,6 @@ import { useState } from "react";
 import { BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill } from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
 import { requestUser } from "@/utils/api";
-import { findAllowedEntities } from "@/utils/permissions";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
@@ -91,7 +87,7 @@ export default function Home({ user, users }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex gap-3 justify-between">
 						<div className="flex items-center gap-2">
@@ -178,7 +174,7 @@ export default function Home({ user, users }: Props) {
 						</button>
 					))}
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }

src/pages/entities/index.tsx

@@ -3,15 +3,12 @@ import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName, isAdmin } from "@/utils/users";
-import { convertToUsers, getGroupsForUser } from "@/utils/groups.be";
-import { countEntityUsers, getEntityUsers, getSpecificUsers, getUsers } from "@/utils/users.be";
-import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
+import { countEntityUsers, getEntityUsers } from "@/utils/users.be";
+import { findAllowedEntities } from "@/utils/permissions";
 import Link from "next/link";
-import { uniq } from "lodash";
 import { BsBank, BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
@@ -20,99 +17,126 @@ import Separator from "@/components/Low/Separator";
 import { requestUser } from "@/utils/api";
 import { mapBy, redirect, serialize } from "@/utils";
 
-type EntitiesWithCount = { entity: EntityWithRoles; users: User[]; count: number };
+type EntitiesWithCount = {
+  entity: EntityWithRoles;
+  users: User[];
+  count: number;
+};
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDs = mapBy(user.entities, 'id')
-	const entities = await getEntitiesWithRoles(["admin", "developer"].includes(user.type) ? undefined : entityIDs);
-	const allowedEntities = findAllowedEntities(user, entities, 'view_entities')
+  const entityIDs = mapBy(user.entities, "id");
+  const entities = await getEntitiesWithRoles(
+    ["admin", "developer"].includes(user.type) ? undefined : entityIDs
+  );
+  const allowedEntities = findAllowedEntities(user, entities, "view_entities");
 
-	const entitiesWithCount = await Promise.all(
-		allowedEntities.map(async (e) => ({
-			entity: e,
-			count: await countEntityUsers(e.id, { type: { $in: ["student", "teacher", "corporate", "mastercorporate"] } }),
-			users: await getEntityUsers(e.id, 5, { type: { $in: ["student", "teacher", "corporate", "mastercorporate"] } })
-		})),
-	);
+  const entitiesWithCount = await Promise.all(
+    allowedEntities.map(async (e) => ({
+      entity: e,
+      count: await countEntityUsers(e.id, {
+        type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
+      }),
+      users: await getEntityUsers(e.id, 5, {
+        type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
+      }),
+    }))
+  );
 
-	return {
-		props: serialize({ user, entities: entitiesWithCount }),
-	};
+  return {
+    props: serialize({ user, entities: entitiesWithCount }),
+  };
 }, sessionOptions);
 
 const SEARCH_FIELDS: string[][] = [["entity", "label"]];
 
 interface Props {
-	user: User;
-	entities: EntitiesWithCount[];
+  user: User;
+  entities: EntitiesWithCount[];
 }
 export default function Home({ user, entities }: Props) {
-	const renderCard = ({ entity, users, count }: EntitiesWithCount) => (
-		<Link
-			href={`/entities/${entity.id}`}
-			key={entity.id}
-			className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
-			<div className="flex flex-col gap-2 w-full">
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
-					{entity.label}
-				</span>
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Members</span>
-					<span className="bg-mti-purple-light/50 px-2">{count}{isAdmin(user) && ` / ${entity.licenses || 0}`}</span>
-				</span>
-				<span>
-					{users.map(getUserName).join(", ")}{' '}
-					{count > 5 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {count - 5} more</span> : ""}
-				</span>
-			</div>
-			<div className="w-fit">
-				<BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
-			</div>
-		</Link>
-	);
+  const renderCard = ({ entity, users, count }: EntitiesWithCount) => (
+    <Link
+      href={`/entities/${entity.id}`}
+      key={entity.id}
+      className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer"
+    >
+      <div className="flex flex-col gap-2 w-full">
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Entity
+          </span>
+          {entity.label}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Members
+          </span>
+          <span className="bg-mti-purple-light/50 px-2">
+            {count}
+            {isAdmin(user) && ` / ${entity.licenses || 0}`}
+          </span>
+        </span>
+        <span>
+          {users.map(getUserName).join(", ")}{" "}
+          {count > 5 ? (
+            <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">
+              and {count - 5} more
+            </span>
+          ) : (
+            ""
+          )}
+        </span>
+      </div>
+      <div className="w-fit">
+        <BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
+      </div>
+    </Link>
+  );
 
-	const firstCard = () => (
-		<Link
-			href={`/entities/create`}
-			className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
-			<BsPlus size={40} />
-			<span className="font-semibold">Create Entity</span>
-		</Link>
-	);
+  const firstCard = () => (
+    <Link
+      href={`/entities/create`}
+      className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"
+    >
+      <BsPlus size={40} />
+      <span className="font-semibold">Create Entity</span>
+    </Link>
+  );
 
-	return (
-		<>
-			<Head>
-				<title>Entities | EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<Layout user={user} className="!gap-4">
-				<section className="flex flex-col gap-4 w-full h-full">
-					<div className="flex flex-col gap-4">
-						<h2 className="font-bold text-2xl">Entities</h2>
-						<Separator />
-					</div>
+  return (
+    <>
+      <Head>
+        <title>Entities | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <section className="flex flex-col gap-4 w-full h-full">
+          <div className="flex flex-col gap-4">
+            <h2 className="font-bold text-2xl">Entities</h2>
+            <Separator />
+          </div>
 
-					<CardList<EntitiesWithCount>
-						list={entities}
-						searchFields={SEARCH_FIELDS}
-						renderCard={renderCard}
-						firstCard={["admin", "developer"].includes(user.type) ? firstCard : undefined}
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+          <CardList<EntitiesWithCount>
+            list={entities}
+            searchFields={SEARCH_FIELDS}
+            renderCard={renderCard}
+            firstCard={
+              ["admin", "developer"].includes(user.type) ? firstCard : undefined
+            }
+          />
+        </section>
+      </>
+    </>
+  );
 }