Resource Page

src/app/private/[uid]/admin/home/resources/page.tsx

@@ -4,7 +4,7 @@ import { prisma } from "@server/db/client";
 const AdminResourcesPage = async () => {
   const resources = await prisma.resource.findMany();
 
-  return <DisplayResources showRole={true} resources={resources} />;
+  return <DisplayResources showRole={true} resources={resources} editable />;
 };
 
 export default AdminResourcesPage;

src/app/private/[uid]/chapter-leader/home/layout.tsx

@@ -13,13 +13,15 @@ const Layout = async ({ children }: LayoutProps) => {
       headerIcon={faHouse}
       showHorizontalLine={false}
     >
-      <TabButtons
-        queries={[
-          { segment: "home", name: "My Chapter" },
-          { segment: "home/resources", name: "resources" },
-        ]}
-      />
-      {children}
+      <div className="flex flex-col gap-y-6">
+        <TabButtons
+          queries={[
+            { segment: "home", name: "My Chapter" },
+            { segment: "home/resources", name: "resources" },
+          ]}
+        />
+        {children}
+      </div>
     </HeaderContainer>
   );
 };

src/app/private/[uid]/chapter-leader/home/resources/page.tsx

@@ -0,0 +1,17 @@
+import DisplayResources from "@components/DisplayResources";
+import { prisma } from "@server/db/client";
+
+const ChapterLeaderResourcesPage = async () => {
+  const resources = await prisma.resource.findMany({
+    where: {
+      access: {
+        has: "CHAPTER_LEADER",
+      },
+    },
+  });
+  return (
+    <DisplayResources showRole={false} resources={resources} editable={false} />
+  );
+};
+
+export default ChapterLeaderResourcesPage;

src/app/private/[uid]/user/home/layout.tsx

@@ -25,13 +25,15 @@ const Layout = async ({ children, params, joinChapter }: LayoutProps) => {
         headerIcon={faHouse}
         showHorizontalLine={false}
       >
-        <TabButtons
-          queries={[
-            { segment: "home", name: "My Chapter" },
-            { segment: "home/resources", name: "resources" },
-          ]}
-        />
-        {children}
+        <div className="flex flex-col gap-y-6">
+          <TabButtons
+            queries={[
+              { segment: "home", name: "My Chapter" },
+              { segment: "home/resources", name: "resources" },
+            ]}
+          />
+          {children}
+        </div>
       </HeaderContainer>
     );
   } else {

src/app/private/[uid]/user/home/resources/page.tsx

@@ -0,0 +1,17 @@
+import DisplayResources from "@components/DisplayResources";
+import { prisma } from "@server/db/client";
+
+const UserResourcesPage = async () => {
+  const resources = await prisma.resource.findMany({
+    where: {
+      access: {
+        isEmpty: true,
+      },
+    },
+  });
+  return (
+    <DisplayResources showRole={false} resources={resources} editable={false} />
+  );
+};
+
+export default UserResourcesPage;

src/components/DisplayResources.tsx

@@ -18,6 +18,7 @@ import { createResourceSchema } from "@api/resources/route.schema";
 interface IDisplayResources {
   resources: Resource[];
   showRole: boolean;
+  editable: boolean;
 }
 
 interface ResourceState extends Resource {
@@ -127,41 +128,43 @@ const DisplayResources = (props: IDisplayResources) => {
   }, [stateResources, setCanSubmit]);
 
   return (
-    <div>
-      <div className="flex justify-between">
-        <button
-          className="flex w-44 items-center justify-between rounded-xl border border-dark-teal px-4 py-2.5"
-          onClick={onAddResource}
-        >
-          <p className="text-base font-normal">Add resource</p>
-          <FontAwesomeIcon icon={faPlus} className="h-5 w-5" />
-        </button>
-        {edit ? (
+    <div className="flex flex-col gap-y-6">
+      {props.editable && (
+        <div className="flex justify-between">
           <button
-            className={`rounded-xl ${
-              canSubmit ? "bg-dark-teal" : "bg-[#A6A6A6]"
-            } px-6 py-2 text-white`}
-            onClick={onSaveResources}
-            disabled={!canSubmit}
+            className="flex w-44 items-center justify-between rounded-xl border border-dark-teal px-4 py-2.5"
+            onClick={onAddResource}
           >
-            Save
+            <p className="text-base font-normal">Add resource</p>
+            <FontAwesomeIcon icon={faPlus} className="h-5 w-5" />
           </button>
-        ) : (
-          <button
-            className="cursor-pointer text-dark-teal"
-            onClick={() => setEdit(true)}
-          >
-            <span className="mr-2 text-base font-normal">Edit</span>
-            <FontAwesomeIcon icon={faPencil} className="inline h-5 w-5" />
-          </button>
-        )}
-      </div>
+          {edit ? (
+            <button
+              className={`rounded-xl ${
+                canSubmit ? "bg-dark-teal" : "bg-[#A6A6A6]"
+              } px-6 py-2 text-white`}
+              onClick={onSaveResources}
+              disabled={!canSubmit}
+            >
+              Save
+            </button>
+          ) : (
+            <button
+              className="cursor-pointer text-dark-teal"
+              onClick={() => setEdit(true)}
+            >
+              <span className="mr-2 text-base font-normal">Edit</span>
+              <FontAwesomeIcon icon={faPencil} className="inline h-5 w-5" />
+            </button>
+          )}
+        </div>
+      )}
       {loading ? (
         <div className="flex h-full w-full flex-col items-center justify-center py-64">
           <Spinner />
         </div>
       ) : (
-        <div className="mt-6 grid items-start gap-6 self-stretch md:grid-cols-2 ">
+        <div className="grid items-start gap-6 self-stretch md:grid-cols-2 ">
           {stateResources
             .filter((resource) => resource.state !== "DELETED")
             .map((eachResource) => (

src/components/TabButtons.tsx

@@ -21,7 +21,7 @@ const TabButtons = ({ queries }: TabButtonsProps) => {
       <div className="flex gap-6">
         {queries.map(({ segment, name }, index) => {
           const isTabSelected =
-            pathName.includes(segment) || (urlSegment === null && index === 0);
+            pathName.endsWith(segment) || (urlSegment === null && index === 0);
 
           const base = pathName.match(
             new RegExp(

src/components/admin/DisplayChapter.tsx

@@ -66,8 +66,7 @@ const DisplayChapter = (props: DisplayChapterProps) => {
         dateCreated={chapter.dateCreated}
       />
       <CardGrid
-        column_count={2}
-        title={<div className=" text-xl font-bold">Executive Board</div>}
+        title={<div className="text-xl font-bold">Executive Board</div>}
         tiles={eboardMembers.map((user) => (
           <UserTile
             key={user.id}