From 0e96d24a10fa7a49a86463fc674d955924f58215 Mon Sep 17 00:00:00 2001
From: ganning127 <ganningxu@gmail.com>
Date: Sat, 19 Jul 2025 14:13:35 -0700
Subject: [PATCH 1/3] support adding author roles

---
 airavata-research-portal/src/App.tsx          |  19 --
 .../src/components/add/ConfirmRepoDetails.tsx | 190 +++++++++---------
 .../src/components/home/ResourceCard.tsx      |  31 +--
 .../components/resources/ResourceDetails.tsx  |  17 +-
 .../Requests/CreateResourceRequest.tsx        |   5 +-
 .../src/interfaces/ResourceAuthor.ts          |  12 ++
 .../src/interfaces/ResourceType.ts            |  12 +-
 7 files changed, 144 insertions(+), 142 deletions(-)
 create mode 100644 airavata-research-portal/src/interfaces/ResourceAuthor.ts

diff --git a/airavata-research-portal/src/App.tsx b/airavata-research-portal/src/App.tsx
index 4df295780..7e9a503a6 100644
--- a/airavata-research-portal/src/App.tsx
+++ b/airavata-research-portal/src/App.tsx
@@ -1,22 +1,3 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing,
- *  software distributed under the License is distributed on an
- *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- *  KIND, either express or implied. See the License for the
- *  specific language governing permissions and limitations
- *  under the License.
- */
-
 import {useColorMode} from "./components/ui/color-mode";
 import {Route, Routes, useLocation, useNavigate} from "react-router";
 import Home from "./components/home";
diff --git a/airavata-research-portal/src/components/add/ConfirmRepoDetails.tsx b/airavata-research-portal/src/components/add/ConfirmRepoDetails.tsx
index 360eda2f9..8ad90c96e 100644
--- a/airavata-research-portal/src/components/add/ConfirmRepoDetails.tsx
+++ b/airavata-research-portal/src/components/add/ConfirmRepoDetails.tsx
@@ -1,10 +1,11 @@
-import { PrivacyEnum } from "@/interfaces/PrivacyEnum";
-import { CreateResourceRequest } from "@/interfaces/Requests/CreateResourceRequest";
+import {PrivacyEnum} from "@/interfaces/PrivacyEnum";
+import {CreateResourceRequest} from "@/interfaces/Requests/CreateResourceRequest";
 import api from "@/lib/api";
-import { CONTROLLER } from "@/lib/controller";
+import {CONTROLLER} from "@/lib/controller";
 import {
   Button,
   Code,
+  createListCollection,
   Field,
   HStack,
   Input,
@@ -13,11 +14,10 @@ import {
   Text,
   Textarea,
   VStack,
-  createListCollection,
 } from "@chakra-ui/react";
-import { toaster } from "../ui/toaster";
-import { useNavigate } from "react-router";
-import { useState } from "react";
+import {toaster} from "../ui/toaster";
+import {useNavigate} from "react-router";
+import {useState} from "react";
 
 const privacyOptions = createListCollection({
   items: Object.keys(PrivacyEnum).map((key) => ({
@@ -27,10 +27,10 @@ const privacyOptions = createListCollection({
 });
 
 export const ConfirmRepoDetails = ({
-  createResourceRequest,
-  setCreateResourceRequest,
-  githubUrl,
-}: {
+                                     createResourceRequest,
+                                     setCreateResourceRequest,
+                                     githubUrl,
+                                   }: {
   createResourceRequest: CreateResourceRequest;
   setCreateResourceRequest: (data: CreateResourceRequest) => void;
   githubUrl: string;
@@ -42,8 +42,8 @@ export const ConfirmRepoDetails = ({
     try {
       setLoading(true);
       await api.post(
-        `${CONTROLLER.resources}/repository?githubUrl=${githubUrl}`,
-        createResourceRequest
+          `${CONTROLLER.resources}/repository?githubUrl=${githubUrl}`,
+          createResourceRequest
       );
 
       toaster.create({
@@ -52,7 +52,7 @@ export const ConfirmRepoDetails = ({
         type: "success",
       });
       navigate(
-        "/resources?resourceTypes=REPOSITORY%2CNOTEBOOK%2CDATASET%2CMODEL"
+          "/resources?resourceTypes=REPOSITORY%2CNOTEBOOK%2CDATASET%2CMODEL"
       );
     } catch (error) {
       console.error("Error adding repository:", error);
@@ -66,87 +66,89 @@ export const ConfirmRepoDetails = ({
     }
   };
 
+  console.log(createResourceRequest);
+
   return (
-    <>
-      <VStack gap={4}>
-        <Text>
-          To make any changes, please modify the <Code>cybershuttle.yml</Code>{" "}
-          file in your GitHub repository.
-        </Text>
-        <Field.Root disabled>
-          <Field.Label>Repository Name</Field.Label>
-          <Input value={createResourceRequest.name} />
-        </Field.Root>
-        <Field.Root disabled>
-          <Field.Label>Repository URL</Field.Label>
-          <Input value={githubUrl} />
-        </Field.Root>
-        <Field.Root disabled>
-          <Field.Label>Description</Field.Label>
-          <Textarea maxH="5lh" value={createResourceRequest.description} />
-        </Field.Root>
-        <Field.Root disabled>
-          <Field.Label>Tags</Field.Label>
-          <HStack flexWrap={"wrap"} gap={2}>
-            {createResourceRequest.tags.map((tag) => (
-              <Code key={tag} colorScheme="blue">
-                {tag}
-              </Code>
-            ))}
-          </HStack>
-        </Field.Root>
-        <Field.Root disabled>
-          <Field.Label>Authors</Field.Label>
-          <HStack flexWrap={"wrap"} gap={2}>
-            {createResourceRequest.authors.map((author) => (
-              <Code key={author} colorScheme="blue">
-                {author}
-              </Code>
-            ))}
-          </HStack>
-        </Field.Root>
-        <Field.Root>
-          <Select.Root
-            value={[createResourceRequest.privacy]} // ✅ value must be an array
-            onValueChange={(value) => {
-              console.log(value);
-              setCreateResourceRequest({
-                ...createResourceRequest,
-                privacy: value.value[0] as PrivacyEnum, // ✅ value is a string[]
-              });
-            }}
-            collection={privacyOptions}
-            width="full"
-            disabled={true}
-          >
-            <Select.HiddenSelect />
-            <Select.Label>Privacy</Select.Label>
-            <Select.Control width="full">
-              <Select.Trigger width="full">
-                <Select.ValueText placeholder="Select privacy" width="full" />
-              </Select.Trigger>
-              <Select.IndicatorGroup>
-                <Select.Indicator />
-              </Select.IndicatorGroup>
-            </Select.Control>
-            <Portal>
-              <Select.Positioner>
-                <Select.Content width="full">
-                  {privacyOptions.items.map((item) => (
-                    <Select.Item item={item} key={item.value} width="full">
-                      {item.label}
-                    </Select.Item>
-                  ))}
-                </Select.Content>
-              </Select.Positioner>
-            </Portal>
-          </Select.Root>
-        </Field.Root>
+      <>
+        <VStack gap={4}>
+          <Text>
+            To make any changes, please modify the <Code>cybershuttle.yml</Code>{" "}
+            file in your GitHub repository.
+          </Text>
+          <Field.Root disabled>
+            <Field.Label>Repository Name</Field.Label>
+            <Input value={createResourceRequest.name}/>
+          </Field.Root>
+          <Field.Root disabled>
+            <Field.Label>Repository URL</Field.Label>
+            <Input value={githubUrl}/>
+          </Field.Root>
+          <Field.Root disabled>
+            <Field.Label>Description</Field.Label>
+            <Textarea maxH="5lh" value={createResourceRequest.description}/>
+          </Field.Root>
+          <Field.Root disabled>
+            <Field.Label>Tags</Field.Label>
+            <HStack flexWrap={"wrap"} gap={2}>
+              {createResourceRequest.tags.map((tag) => (
+                  <Code key={tag} colorScheme="blue">
+                    {tag}
+                  </Code>
+              ))}
+            </HStack>
+          </Field.Root>
+          <Field.Root disabled>
+            <Field.Label>Authors</Field.Label>
+            <VStack alignItems={'flex-start'} flexWrap={"wrap"} gap={2}>
+              {createResourceRequest.authors.map((author) => (
+                  <Code key={author.authorId + author.role} colorScheme="blue">
+                    {author.authorId} ({author.role})
+                  </Code>
+              ))}
+            </VStack>
+          </Field.Root>
+          <Field.Root>
+            <Select.Root
+                value={[createResourceRequest.privacy]}
+                onValueChange={(value) => {
+                  console.log(value);
+                  setCreateResourceRequest({
+                    ...createResourceRequest,
+                    privacy: value.value[0] as PrivacyEnum,
+                  });
+                }}
+                collection={privacyOptions}
+                width="full"
+                disabled={true}
+            >
+              <Select.HiddenSelect/>
+              <Select.Label>Privacy</Select.Label>
+              <Select.Control width="full">
+                <Select.Trigger width="full">
+                  <Select.ValueText placeholder="Select privacy" width="full"/>
+                </Select.Trigger>
+                <Select.IndicatorGroup>
+                  <Select.Indicator/>
+                </Select.IndicatorGroup>
+              </Select.Control>
+              <Portal>
+                <Select.Positioner>
+                  <Select.Content width="full">
+                    {privacyOptions.items.map((item) => (
+                        <Select.Item item={item} key={item.value} width="full">
+                          {item.label}
+                        </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Positioner>
+              </Portal>
+            </Select.Root>
+          </Field.Root>
 
-        <Button w="full" loading={loading} onClick={onSubmit}>
-          Add Repository
-        </Button>
-      </VStack>
-    </>
+          <Button w="full" loading={loading} onClick={onSubmit}>
+            Add Repository
+          </Button>
+        </VStack>
+      </>
   );
 };
diff --git a/airavata-research-portal/src/components/home/ResourceCard.tsx b/airavata-research-portal/src/components/home/ResourceCard.tsx
index 6846a1909..fa8c399b1 100644
--- a/airavata-research-portal/src/components/home/ResourceCard.tsx
+++ b/airavata-research-portal/src/components/home/ResourceCard.tsx
@@ -20,7 +20,7 @@
 import {ModelResource, Resource} from "@/interfaces/ResourceType";
 import {Tag} from "@/interfaces/TagType";
 import {isValidImaage, resourceTypeToColor} from "@/lib/util";
-import {Avatar, Badge, Box, Card, HStack, Image, Text,} from "@chakra-ui/react";
+import {Avatar, Badge, Box, Card, HStack, Image, Text, VStack,} from "@chakra-ui/react";
 import {ResourceTypeBadge} from "../resources/ResourceTypeBadge";
 import {ResourceTypeEnum} from "@/interfaces/ResourceTypeEnum";
 import {ModelCardButton} from "../models/ModelCardButton";
@@ -40,7 +40,6 @@ export const ResourceCard = ({
   removeOnUnStar?: boolean;
 }) => {
   const [hideCard, setHideCard] = useState(false);
-  const author = resource.authors[0];
 
   const isValidImage = isValidImaage(resource.headerImage);
 
@@ -122,18 +121,22 @@ export const ResourceCard = ({
             </Card.Body>
 
             <Card.Footer justifyContent="space-between" pt={4}>
-              {author && (
-                  <HStack>
-                    <Avatar.Root shape="full" size="sm">
-                      <Avatar.Fallback name={author}/>
-                      <Avatar.Image src={author}/>
-                    </Avatar.Root>
-
-                    <Box>
-                      <Text fontWeight="bold">{author}</Text>
-                    </Box>
-                  </HStack>
-              )}
+              <VStack alignItems={'flex-start'}>
+                {resource.authors.map(author => (
+                        <HStack>
+                          <Avatar.Root shape="full" size="xs">
+                            <Avatar.Fallback name={author.authorId}/>
+                            <Avatar.Image src={author.authorId}/>
+                          </Avatar.Root>
+
+                          <Box>
+                            <Text fontWeight="bold" fontSize={'sm'}>{author.authorId}</Text>
+                          </Box>
+                        </HStack>
+                    )
+                )}
+              </VStack>
+
 
               {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.MODEL && (
                   <ModelCardButton model={resource as ModelResource}/>
diff --git a/airavata-research-portal/src/components/resources/ResourceDetails.tsx b/airavata-research-portal/src/components/resources/ResourceDetails.tsx
index fdb3c4a35..b293a5e56 100644
--- a/airavata-research-portal/src/components/resources/ResourceDetails.tsx
+++ b/airavata-research-portal/src/components/resources/ResourceDetails.tsx
@@ -54,6 +54,7 @@ import {CONTROLLER} from "@/lib/controller";
 import {DatasetSpecificDetails} from "../datasets/DatasetSpecificDetails";
 import {ResourceOptions} from "@/components/resources/ResourceOptions.tsx";
 import {toaster} from "@/components/ui/toaster.tsx";
+import {ResourceAuthor} from "@/interfaces/ResourceAuthor.ts";
 
 async function getResource(id: string) {
   const response = await api.get(`${CONTROLLER.resources}/public/${id}`);
@@ -171,20 +172,20 @@ const ResourceDetails = () => {
                 ))}
               </HStack>
 
-              <HStack mt={8}>
-                {resource.authors.map((author: string) => {
+              <HStack mt={8} wrap={'wrap'}>
+                {resource.authors.map((author: ResourceAuthor) => {
                   return (
-                      <HStack key={author}>
-                        <Avatar.Root shape="full" size="xl">
-                          <Avatar.Fallback name={author}/>
-                          <Avatar.Image src={author}/>
+                      <HStack>
+                        <Avatar.Root shape="full" size="xs">
+                          <Avatar.Fallback name={author.authorId}/>
+                          <Avatar.Image src={author.authorId}/>
                         </Avatar.Root>
 
                         <Box>
-                          <Text fontWeight="bold">{author}</Text>
+                          <Text fontWeight="bold" fontSize={'sm'}>{author.authorId}</Text>
                         </Box>
                       </HStack>
-                  );
+                  )
                 })}
               </HStack>
             </Box>
diff --git a/airavata-research-portal/src/interfaces/Requests/CreateResourceRequest.tsx b/airavata-research-portal/src/interfaces/Requests/CreateResourceRequest.tsx
index 21b027f4d..d8b95b3be 100644
--- a/airavata-research-portal/src/interfaces/Requests/CreateResourceRequest.tsx
+++ b/airavata-research-portal/src/interfaces/Requests/CreateResourceRequest.tsx
@@ -1,10 +1,11 @@
-import { PrivacyEnum } from "../PrivacyEnum";
+import {PrivacyEnum} from "../PrivacyEnum";
+import {ResourceAuthor} from "@/interfaces/ResourceAuthor.ts";
 
 export interface CreateResourceRequest {
   name: string;
   description: string;
   tags: string[];
   headerImage: string;
-  authors: string[];
+  authors: ResourceAuthor[];
   privacy: PrivacyEnum;
 }
diff --git a/airavata-research-portal/src/interfaces/ResourceAuthor.ts b/airavata-research-portal/src/interfaces/ResourceAuthor.ts
new file mode 100644
index 000000000..05de6f1d7
--- /dev/null
+++ b/airavata-research-portal/src/interfaces/ResourceAuthor.ts
@@ -0,0 +1,12 @@
+export interface ResourceAuthor {
+  authorId: string;
+  role: AuthorRoleEnum;
+}
+
+enum AuthorRoleEnum {
+  PRIMARY,
+  SECONDARY,
+  TERTIARY,
+  QUATERNARY,
+  QUINARY
+}
diff --git a/airavata-research-portal/src/interfaces/ResourceType.ts b/airavata-research-portal/src/interfaces/ResourceType.ts
index 32d4f697a..f1b03272e 100644
--- a/airavata-research-portal/src/interfaces/ResourceType.ts
+++ b/airavata-research-portal/src/interfaces/ResourceType.ts
@@ -1,7 +1,9 @@
-import { PrivacyEnum } from "./PrivacyEnum";
-import { ResourceTypeEnum } from "./ResourceTypeEnum";
-import { StatusEnum } from "./StatusEnum";
-import { Tag } from "./TagType";
+import {PrivacyEnum} from "./PrivacyEnum";
+import {ResourceTypeEnum} from "./ResourceTypeEnum";
+import {StatusEnum} from "./StatusEnum";
+import {Tag} from "./TagType";
+import {ResourceAuthor} from "@/interfaces/ResourceAuthor.ts";
+
 // import { User } from "./UserType";
 
 export interface Resource {
@@ -9,7 +11,7 @@ export interface Resource {
   name: string;
   description: string;
   headerImage: string;
-  authors: string[];
+  authors: ResourceAuthor[];
   tags: Tag[];
   status: StatusEnum;
   privacy: PrivacyEnum;

From 34d41d03b082cc28bacf79b985edf61aa7b9e104 Mon Sep 17 00:00:00 2001
From: ganning127 <ganningxu@gmail.com>
Date: Sat, 9 Aug 2025 23:34:25 -0400
Subject: [PATCH 2/3] saving changes

---
 .../resources/RequestResourceVerification.tsx |  63 ++++
 .../components/resources/ResourceDetails.tsx  | 305 +++++++++---------
 .../resources/ResourceTypeBadge.tsx           |  31 +-
 .../resources/ResourceVerification.tsx        |  75 +++++
 .../ResourceVerificationActivity.ts           |  48 +++
 5 files changed, 356 insertions(+), 166 deletions(-)
 create mode 100644 airavata-research-portal/src/components/resources/RequestResourceVerification.tsx
 create mode 100644 airavata-research-portal/src/components/resources/ResourceVerification.tsx
 create mode 100644 airavata-research-portal/src/interfaces/ResourceVerificationActivity.ts

diff --git a/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx b/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx
new file mode 100644
index 000000000..1ae0348aa
--- /dev/null
+++ b/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx
@@ -0,0 +1,63 @@
+import { Resource } from "@/interfaces/ResourceType";
+import { Button, Dialog, useDialog, CloseButton } from "@chakra-ui/react";
+import { MdOutlineVerifiedUser } from "react-icons/md";
+
+export const RequestResourceVerification = ({
+  resource,
+  onRequestSubmitted,
+}: {
+  resource: Resource;
+  onRequestSubmitted?: () => void;
+}) => {
+  const dialog = useDialog();
+
+  const onSubmitForVerification = async () => {
+    console.log("Submitting resource for verification:", resource.id);
+    dialog.setOpen(false);
+    onRequestSubmitted?.();
+  };
+
+  return (
+    <>
+      <Dialog.RootProvider size="sm" value={dialog}>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Resource Verification</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              When you submit <b>{resource.name}</b> for verification, the
+              Airavata team will review it to ensure it meets the necessary
+              safety standards. This process may take some time, and you will be
+              notified once the verification is complete.
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button
+                width="100%"
+                colorPalette="yellow"
+                onClick={onSubmitForVerification}
+              >
+                Submit
+              </Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.RootProvider>
+
+      <Button
+        size="2xs"
+        colorPalette={"yellow"}
+        onClick={() => {
+          dialog.setOpen(true);
+        }}
+      >
+        <MdOutlineVerifiedUser />
+        Request Verification
+      </Button>
+    </>
+  );
+};
diff --git a/airavata-research-portal/src/components/resources/ResourceDetails.tsx b/airavata-research-portal/src/components/resources/ResourceDetails.tsx
index 7bd0b1766..0ea38ba0d 100644
--- a/airavata-research-portal/src/components/resources/ResourceDetails.tsx
+++ b/airavata-research-portal/src/components/resources/ResourceDetails.tsx
@@ -17,7 +17,7 @@
  *  under the License.
  */
 
-import {useLocation, useNavigate, useParams} from "react-router";
+import { useLocation, useNavigate, useParams } from "react-router";
 import {
   Avatar,
   Badge,
@@ -33,8 +33,8 @@ import {
   Spinner,
   Text,
 } from "@chakra-ui/react";
-import {useEffect, useState} from "react";
-import {BiArrowBack} from "react-icons/bi";
+import { useEffect, useState } from "react";
+import { BiArrowBack } from "react-icons/bi";
 import api from "@/lib/api";
 import {
   DatasetResource,
@@ -43,20 +43,21 @@ import {
   RepositoryResource,
   Resource,
 } from "@/interfaces/ResourceType";
-import {Tag} from "@/interfaces/TagType";
-import {isValidImaage, resourceTypeToColor} from "@/lib/util";
-import {ResourceTypeBadge} from "./ResourceTypeBadge";
-import {ResourceTypeEnum} from "@/interfaces/ResourceTypeEnum";
-import {ModelSpecificBox} from "../models/ModelSpecificBox";
-import {NotebookSpecificDetails} from "../notebooks/NotebookSpecificDetails";
-import {RepositorySpecificDetails} from "../repositories/RepositorySpecificDetails";
-import {CONTROLLER} from "@/lib/controller";
-import {DatasetSpecificDetails} from "../datasets/DatasetSpecificDetails";
-import {ResourceOptions} from "@/components/resources/ResourceOptions.tsx";
-import {toaster} from "@/components/ui/toaster.tsx";
-import {PrivacyEnum} from "@/interfaces/PrivacyEnum.ts";
-import {PrivateResourceTooltip} from "@/components/resources/PrivateResourceTooltip.tsx";
-import {useAuth} from "react-oidc-context";
+import { Tag } from "@/interfaces/TagType";
+import { isValidImaage, resourceTypeToColor } from "@/lib/util";
+import { ResourceTypeBadge } from "./ResourceTypeBadge";
+import { ResourceTypeEnum } from "@/interfaces/ResourceTypeEnum";
+import { ModelSpecificBox } from "../models/ModelSpecificBox";
+import { NotebookSpecificDetails } from "../notebooks/NotebookSpecificDetails";
+import { RepositorySpecificDetails } from "../repositories/RepositorySpecificDetails";
+import { CONTROLLER } from "@/lib/controller";
+import { DatasetSpecificDetails } from "../datasets/DatasetSpecificDetails";
+import { ResourceOptions } from "@/components/resources/ResourceOptions.tsx";
+import { toaster } from "@/components/ui/toaster.tsx";
+import { PrivacyEnum } from "@/interfaces/PrivacyEnum.ts";
+import { PrivateResourceTooltip } from "@/components/resources/PrivateResourceTooltip.tsx";
+import { useAuth } from "react-oidc-context";
+import { ResourceVerification } from "./ResourceVerification";
 
 async function getResource(id: string) {
   const response = await api.get(`${CONTROLLER.resources}/public/${id}`);
@@ -64,11 +65,11 @@ async function getResource(id: string) {
 }
 
 const ResourceDetails = () => {
-  const {id} = useParams();
+  const { id } = useParams();
   const [resource, setResource] = useState<Resource | null>(null);
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
-  const {state} = useLocation();
+  const { state } = useLocation();
   const auth = useAuth();
   useEffect(() => {
     if (!id || auth.isLoading) return;
@@ -82,8 +83,8 @@ const ResourceDetails = () => {
         toaster.create({
           title: "Resource not found",
           description: `id: ${id}`,
-          type: "error"
-        })
+          type: "error",
+        });
       } finally {
         setLoading(false);
       }
@@ -94,9 +95,9 @@ const ResourceDetails = () => {
 
   if (loading) {
     return (
-        <Center my={8}>
-          <Spinner/>
-        </Center>
+      <Center my={8}>
+        <Spinner />
+      </Center>
     );
   } else if (!resource) {
     return null;
@@ -106,143 +107,147 @@ const ResourceDetails = () => {
 
   const goToResources = () => {
     navigate(
-        "/resources?resourceTypes=REPOSITORY%2CNOTEBOOK%2CDATASET%2CMODEL"
-    )
-  }
+      "/resources?resourceTypes=REPOSITORY%2CNOTEBOOK%2CDATASET%2CMODEL"
+    );
+  };
 
   return (
-      <>
-        <Container maxW="breakpoint-lg" mx="auto" p={4} mt={16}>
-          <Box>
-            <Button
-                variant="plain"
-                p={0}
-                onClick={goToResources}
-            >
-              <HStack
-                  alignItems="center"
-                  mb={4}
-                  display="inline-flex"
-                  _hover={{
-                    bg: "gray.300",
-                  }}
-                  p={1}
-                  rounded="md"
-              >
-                <Icon>
-                  <BiArrowBack/>
-                </Icon>
-                Back
-              </HStack>
-            </Button>
-          </Box>
-
-          <HStack
-              alignItems={"flex-start"}
+    <>
+      <Container maxW="breakpoint-lg" mx="auto" p={4} mt={16}>
+        <Box>
+          <Button variant="plain" p={0} onClick={goToResources}>
+            <HStack
+              alignItems="center"
               mb={4}
-              gap={8}
-              justifyContent="space-between"
-          >
-            <Box w={'full'}>
-              <ResourceTypeBadge type={resource.type}/>
-
-              <HStack mt={2} justifyContent={'space-between'} alignItems={'center'} flexWrap={'wrap'}>
-                <Heading as="h1" size="4xl">
-                  {resource.name}
-                </Heading>
-
-                <HStack>
-                  {resource.privacy === PrivacyEnum.PRIVATE &&
-                      <PrivateResourceTooltip/>
-                  }
-                  <ResourceOptions
-                      resource={resource}
-                      onDeleteSuccess={goToResources}
-                      deleteable={true}
-                      onUnStarSuccess={() => {
-                      }}
-                  />
-                </HStack>
-
-              </HStack>
-
-              <HStack mt={2}>
-                {resource.tags.map((tag: Tag) => (
-                    <Badge
-                        key={tag.id}
-                        size="lg"
-                        rounded="md"
-                        colorPalette={resourceTypeToColor(resource.type)}
-                    >
-                      {tag.value}
-                    </Badge>
-                ))}
-              </HStack>
+              display="inline-flex"
+              _hover={{
+                bg: "gray.300",
+              }}
+              p={1}
+              rounded="md"
+            >
+              <Icon>
+                <BiArrowBack />
+              </Icon>
+              Back
+            </HStack>
+          </Button>
+        </Box>
+
+        <HStack
+          alignItems={"flex-start"}
+          mb={4}
+          gap={8}
+          justifyContent="space-between"
+        >
+          <Box w={"full"}>
+            <HStack gap={2} flexWrap="wrap">
+              <ResourceTypeBadge type={resource.type} />
+              <ResourceVerification
+                resource={resource}
+                setResource={setResource}
+              />
+            </HStack>
+            <HStack
+              mt={1}
+              justifyContent={"space-between"}
+              alignItems={"center"}
+              flexWrap={"wrap"}
+            >
+              <Heading as="h1" size="4xl">
+                {resource.name}
+              </Heading>
 
-              <HStack mt={8}>
-                {resource.authors.map((author: string) => {
-                  return (
-                      <HStack key={author}>
-                        <Avatar.Root shape="full" size="xl">
-                          <Avatar.Fallback name={author}/>
-                          <Avatar.Image src={author}/>
-                        </Avatar.Root>
-
-                        <Box>
-                          <Text fontWeight="bold">{author}</Text>
-                        </Box>
-                      </HStack>
-                  );
-                })}
+              <HStack>
+                {resource.privacy === PrivacyEnum.PRIVATE && (
+                  <PrivateResourceTooltip />
+                )}
+                <ResourceOptions
+                  resource={resource}
+                  onDeleteSuccess={goToResources}
+                  deleteable={true}
+                  onUnStarSuccess={() => {}}
+                />
               </HStack>
-            </Box>
-
-            <Box>
-              {validImage && (
-                  <Image
-                      src={resource.headerImage}
-                      alt="Notebook Header"
-                      rounded="md"
-                      maxW="300px"
-                  />
-              )}
-            </Box>
-          </HStack>
-
-          <Separator my={6}/>
-          <Box>
-            <Heading fontWeight="bold" size="2xl">
-              About
-            </Heading>
+            </HStack>
 
-            <Text>{resource.description}</Text>
+            <HStack mt={2}>
+              {resource.tags.map((tag: Tag) => (
+                <Badge
+                  key={tag.id}
+                  size="lg"
+                  rounded="md"
+                  colorPalette={resourceTypeToColor(resource.type)}
+                >
+                  {tag.value}
+                </Badge>
+              ))}
+            </HStack>
+
+            <HStack mt={8}>
+              {resource.authors.map((author: string) => {
+                return (
+                  <HStack key={author}>
+                    <Avatar.Root shape="full" size="xl">
+                      <Avatar.Fallback name={author} />
+                      <Avatar.Image src={author} />
+                    </Avatar.Root>
+
+                    <Box>
+                      <Text fontWeight="bold">{author}</Text>
+                    </Box>
+                  </HStack>
+                );
+              })}
+            </HStack>
           </Box>
 
-          <Separator my={8}/>
-
           <Box>
-            {(resource.type as ResourceTypeEnum) ===
-                ResourceTypeEnum.REPOSITORY && (
-                    <RepositorySpecificDetails
-                        repository={resource as RepositoryResource}
-                    />
-                )}
-
-            {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.DATASET && (
-                <DatasetSpecificDetails dataset={resource as DatasetResource}/>
-            )}
-
-            {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.MODEL && (
-                <ModelSpecificBox model={resource as ModelResource}/>
+            {validImage && (
+              <Image
+                src={resource.headerImage}
+                alt="Notebook Header"
+                rounded="md"
+                maxW="300px"
+              />
             )}
-
-            {(resource.type as ResourceTypeEnum) ===
-                ResourceTypeEnum.NOTEBOOK && (
-                    <NotebookSpecificDetails notebook={resource as NotebookResource}/>
-                )}
           </Box>
-        </Container>
-      </>
+        </HStack>
+
+        <Separator my={6} />
+        <Box>
+          <Heading fontWeight="bold" size="2xl">
+            About
+          </Heading>
+
+          <Text>{resource.description}</Text>
+        </Box>
+
+        <Separator my={8} />
+
+        <Box>
+          {(resource.type as ResourceTypeEnum) ===
+            ResourceTypeEnum.REPOSITORY && (
+            <RepositorySpecificDetails
+              repository={resource as RepositoryResource}
+            />
+          )}
+
+          {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.DATASET && (
+            <DatasetSpecificDetails dataset={resource as DatasetResource} />
+          )}
+
+          {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.MODEL && (
+            <ModelSpecificBox model={resource as ModelResource} />
+          )}
+
+          {(resource.type as ResourceTypeEnum) ===
+            ResourceTypeEnum.NOTEBOOK && (
+            <NotebookSpecificDetails notebook={resource as NotebookResource} />
+          )}
+        </Box>
+      </Container>
+    </>
   );
 };
 
diff --git a/airavata-research-portal/src/components/resources/ResourceTypeBadge.tsx b/airavata-research-portal/src/components/resources/ResourceTypeBadge.tsx
index 9ca15e131..a334446e0 100644
--- a/airavata-research-portal/src/components/resources/ResourceTypeBadge.tsx
+++ b/airavata-research-portal/src/components/resources/ResourceTypeBadge.tsx
@@ -1,5 +1,5 @@
-import {resourceTypeToColor} from "@/lib/util";
-import {Badge} from "@chakra-ui/react";
+import { resourceTypeToColor } from "@/lib/util";
+import { Badge } from "@chakra-ui/react";
 
 interface ResourceTypeBadgeProps {
   type: string;
@@ -8,20 +8,19 @@ interface ResourceTypeBadgeProps {
 }
 
 export const ResourceTypeBadge = ({
-                                    type,
-                                    ...props
-                                  }: ResourceTypeBadgeProps) => {
+  type,
+  ...props
+}: ResourceTypeBadgeProps) => {
   return (
-      <Badge
-          colorPalette={resourceTypeToColor(type)}
-          fontWeight="bold"
-          size="xs"
-          px="2"
-          py="1"
-          borderRadius="md"
-          {...props}
-      >
-        {type}
-      </Badge>
+    <Badge
+      colorPalette={resourceTypeToColor(type)}
+      fontWeight="bold"
+      px="2"
+      py="1"
+      borderRadius="md"
+      {...props}
+    >
+      {type}
+    </Badge>
   );
 };
diff --git a/airavata-research-portal/src/components/resources/ResourceVerification.tsx b/airavata-research-portal/src/components/resources/ResourceVerification.tsx
new file mode 100644
index 000000000..2c6536b40
--- /dev/null
+++ b/airavata-research-portal/src/components/resources/ResourceVerification.tsx
@@ -0,0 +1,75 @@
+import { Resource } from "@/interfaces/ResourceType";
+import { StatusEnum } from "@/interfaces/StatusEnum";
+import { isResourceOwner } from "@/lib/util";
+import { Badge } from "@chakra-ui/react";
+import { MdOutlineVerifiedUser } from "react-icons/md";
+import { useAuth } from "react-oidc-context";
+import { Tooltip } from "../ui/tooltip";
+import { RequestResourceVerification } from "./RequestResourceVerification";
+import { toaster } from "../ui/toaster";
+
+export const ResourceVerification = ({
+  resource,
+  setResource,
+}: {
+  resource: Resource;
+  setResource: (resource: Resource) => void;
+}) => {
+  const auth = useAuth();
+  const isAuthor = isResourceOwner(
+    auth.user?.profile?.email || "INVALID",
+    resource
+  );
+
+  return (
+    <>
+      {resource.status === StatusEnum.VERIFIED && (
+        <Badge
+          colorPalette="green"
+          fontWeight="bold"
+          px="2"
+          py="1"
+          borderRadius="md"
+        >
+          <MdOutlineVerifiedUser />
+          Verified
+        </Badge>
+      )}
+
+      {isAuthor && resource.status === StatusEnum.PENDING && (
+        <Tooltip content="The pending status is only visible to this resource's authors. It indicates that the resource is pending verification by the Airavata team.">
+          <Badge
+            colorPalette="yellow"
+            fontWeight="bold"
+            px="2"
+            py="1"
+            borderRadius="md"
+          >
+            <MdOutlineVerifiedUser />
+            Pending Verification
+          </Badge>
+        </Tooltip>
+      )}
+
+      {isAuthor && resource.status === StatusEnum.NONE && (
+        <>
+          <RequestResourceVerification
+            resource={resource}
+            onRequestSubmitted={() => {
+              setResource({
+                ...resource,
+                status: StatusEnum.PENDING,
+              } as Resource);
+              toaster.create({
+                title: "Verification Requested",
+                description:
+                  "Your request for resource verification has been submitted.",
+                type: "info",
+              });
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/airavata-research-portal/src/interfaces/ResourceVerificationActivity.ts b/airavata-research-portal/src/interfaces/ResourceVerificationActivity.ts
new file mode 100644
index 000000000..b5d366498
--- /dev/null
+++ b/airavata-research-portal/src/interfaces/ResourceVerificationActivity.ts
@@ -0,0 +1,48 @@
+import { Resource } from "./ResourceType";
+import { StatusEnum } from "./StatusEnum";
+
+export interface ResourceVerificationActivity {
+  /**
+   * The unique identifier for the activity, generated as a UUID.
+   */
+  id: string;
+
+  /**
+   * The resource associated with this verification activity.
+   * Note: The @JsonBackReference in the backend means this property
+   * might be excluded from the JSON to prevent circular dependencies.
+   * If so, you might want to make this optional (e.g., `resource?: Resource`).
+   */
+  resource?: Resource;
+
+  /**
+   * The ID of the user who performed the activity (e.g., an admin or author).
+   */
+  userId: string;
+
+  /**
+   * The status of the verification activity.
+   */
+  status: StatusEnum;
+
+  /**
+   * An optional message associated with the activity, like a reason for rejection.
+   */
+  message?: string;
+
+  /**
+   * The timestamp when the record was created (ISO 8601 format).
+   */
+  createdAt: string;
+
+  /**
+   * The timestamp when the record was last updated (ISO 8601 format).
+   */
+  updatedAt: string;
+}
+
+
+
+
+
+

From 980041df71c3fa4bb9b2908063720536c662d644 Mon Sep 17 00:00:00 2001
From: ganning127 <ganningxu@gmail.com>
Date: Sun, 10 Aug 2025 13:07:00 -0400
Subject: [PATCH 3/3] frontend support for resource approval

---
 .vscode/settings.json                         |   9 +
 airavata-research-portal/.env.example         |   1 +
 airavata-research-portal/src/App.tsx          | 119 +++++----
 .../src/components/home/ResourceCard.tsx      | 249 ++++++++++--------
 .../resources/RequestResourceVerification.tsx |  70 +++--
 .../components/resources/ResourceDetails.tsx  |  31 ++-
 .../resources/ResourceVerification.tsx        |  20 ++
 .../resources/VerificationActivities.tsx      | 108 ++++++++
 .../admin/PendingResourcesSection.tsx         |  44 ++++
 .../resources/admin/VerificationControls.tsx  | 136 ++++++++++
 .../src/layouts/NavBar.tsx                    | 171 ++++++------
 .../src/lib/controller.ts                     |   3 +-
 airavata-research-portal/src/lib/util.ts      |  31 ++-
 13 files changed, 729 insertions(+), 263 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 airavata-research-portal/src/components/resources/VerificationActivities.tsx
 create mode 100644 airavata-research-portal/src/components/resources/admin/PendingResourcesSection.tsx
 create mode 100644 airavata-research-portal/src/components/resources/admin/VerificationControls.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..74f751a93
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "[typescript]": {
+      "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file
diff --git a/airavata-research-portal/.env.example b/airavata-research-portal/.env.example
index 317e2248b..ea13fd78b 100644
--- a/airavata-research-portal/.env.example
+++ b/airavata-research-portal/.env.example
@@ -3,3 +3,4 @@ VITE_APP_URL=http://localhost:5173
 VITE_API_VERSION=v1
 VITE_CLIENT_ID=
 VITE_OPENID_CONFIG_URL=
+VITE_ADMIN_EMAILS=
diff --git a/airavata-research-portal/src/App.tsx b/airavata-research-portal/src/App.tsx
index 7e9a503a6..b1ae6bde9 100644
--- a/airavata-research-portal/src/App.tsx
+++ b/airavata-research-portal/src/App.tsx
@@ -1,27 +1,32 @@
-import {useColorMode} from "./components/ui/color-mode";
-import {Route, Routes, useLocation, useNavigate} from "react-router";
+import { useColorMode } from "./components/ui/color-mode";
+import { Route, Routes, useLocation, useNavigate } from "react-router";
 import Home from "./components/home";
-import {Models} from "./components/models";
-import {Datasets} from "./components/datasets";
+import { Models } from "./components/models";
+import { Datasets } from "./components/datasets";
 import ResourceDetails from "./components/resources/ResourceDetails";
 import Notebooks from "./components/notebooks";
 import Repositories from "./components/repositories";
-import {Login} from "./components/auth/UserLoginPage";
+import { Login } from "./components/auth/UserLoginPage";
 import ProtectedComponent from "./components/auth/ProtectedComponent";
-import {AuthProvider, AuthProviderProps} from "react-oidc-context";
-import {useEffect, useState} from "react";
+import { AuthProvider, AuthProviderProps } from "react-oidc-context";
+import { useEffect, useState } from "react";
 import NavBarFooterLayout from "./layouts/NavBarFooterLayout";
-import {CybershuttleLanding} from "./components/home/CybershuttleLanding";
-import {APP_REDIRECT_URI, CLIENT_ID, OPENID_CONFIG_URL,} from "./lib/constants";
-import {WebStorageStateStore} from "oidc-client-ts";
-import {Resources} from "./components/resources";
-import {UserSet} from "./components/auth/UserSet";
-import {Toaster} from "./components/ui/toaster";
-import {Events} from "./components/events";
-import {AddRepoMaster} from "./components/add/AddRepoMaster";
-import {Add} from "./components/add";
-import {AddProjectMaster} from "./components/add/AddProjectMaster";
-import {StarredResourcesPage} from "@/components/resources/StarredResourcesPage.tsx";
+import { CybershuttleLanding } from "./components/home/CybershuttleLanding";
+import {
+  APP_REDIRECT_URI,
+  CLIENT_ID,
+  OPENID_CONFIG_URL,
+} from "./lib/constants";
+import { WebStorageStateStore } from "oidc-client-ts";
+import { Resources } from "./components/resources";
+import { UserSet } from "./components/auth/UserSet";
+import { Toaster } from "./components/ui/toaster";
+import { Events } from "./components/events";
+import { AddRepoMaster } from "./components/add/AddRepoMaster";
+import { Add } from "./components/add";
+import { AddProjectMaster } from "./components/add/AddProjectMaster";
+import { StarredResourcesPage } from "@/components/resources/StarredResourcesPage.tsx";
+import { PendingResourcesSection } from "./components/resources/admin/PendingResourcesSection";
 
 function App() {
   const colorMode = useColorMode();
@@ -55,7 +60,7 @@ function App() {
             userinfo_endpoint: data.userinfo_endpoint,
             jwks_uri: data.jwks_uri,
           },
-          userStore: new WebStorageStateStore({store: window.localStorage}),
+          userStore: new WebStorageStateStore({ store: window.localStorage }),
           automaticSilentRenew: true,
         };
 
@@ -73,42 +78,50 @@ function App() {
   }
 
   return (
-      <>
-        <AuthProvider
-            {...oidcConfig}
-            onSigninCallback={() => {
-              navigate(location.search, {replace: true});
-            }}
-        >
-          <Toaster/>
-          <UserSet/>
-          <Routes>
-            {/* Public Route */}
-            <Route element={<NavBarFooterLayout/>}>
-              <Route path="/" element={<CybershuttleLanding/>}/>
-              <Route path="/login" element={<Login/>}/>
-              <Route path="/resources" element={<Resources/>}/>
-              <Route path="/events" element={<Events/>}/>
-              <Route path="/resources/datasets" element={<Datasets/>}/>
-              <Route path="/resources/notebooks" element={<Notebooks/>}/>
-              <Route path="/resources/repositories" element={<Repositories/>}/>
-              <Route path="/resources/models" element={<Models/>}/>
-              <Route path="/resources/:type/:id" element={<ResourceDetails/>}/>
-            </Route>
+    <>
+      <AuthProvider
+        {...oidcConfig}
+        onSigninCallback={() => {
+          navigate(location.search, { replace: true });
+        }}
+      >
+        <Toaster />
+        <UserSet />
+        <Routes>
+          {/* Public Route */}
+          <Route element={<NavBarFooterLayout />}>
+            <Route path="/" element={<CybershuttleLanding />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/resources" element={<Resources />} />
+            <Route path="/events" element={<Events />} />
+            <Route path="/resources/datasets" element={<Datasets />} />
+            <Route path="/resources/notebooks" element={<Notebooks />} />
+            <Route path="/resources/repositories" element={<Repositories />} />
+            <Route path="/resources/models" element={<Models />} />
+            <Route path="/resources/:type/:id" element={<ResourceDetails />} />
+          </Route>
 
-            {/* Protected Routes with Layout */}
+          {/* Protected Routes with Layout */}
+          <Route
+            element={<ProtectedComponent Component={NavBarFooterLayout} />}
+          >
             <Route
-                element={<ProtectedComponent Component={NavBarFooterLayout}/>}
-            >
-              <Route path="/resources/starred" element={<StarredResourcesPage/>}/>
-              <Route path="/sessions" element={<Home/>}/>
-              <Route path="/add" element={<Add/>}/>
-              <Route path="/add/repo" element={<AddRepoMaster/>}/>
-              <Route path="/add/project" element={<AddProjectMaster/>}/>
-            </Route>
-          </Routes>
-        </AuthProvider>
-      </>
+              path="/resources/starred"
+              element={<StarredResourcesPage />}
+            />
+            <Route path="/sessions" element={<Home />} />
+            <Route path="/add" element={<Add />} />
+            <Route path="/add/repo" element={<AddRepoMaster />} />
+            <Route path="/add/project" element={<AddProjectMaster />} />
+
+            <Route
+              path="/admin/pending-resources"
+              element={<PendingResourcesSection />}
+            />
+          </Route>
+        </Routes>
+      </AuthProvider>
+    </>
   );
 }
 
diff --git a/airavata-research-portal/src/components/home/ResourceCard.tsx b/airavata-research-portal/src/components/home/ResourceCard.tsx
index 208c79961..f1f5208ca 100644
--- a/airavata-research-portal/src/components/home/ResourceCard.tsx
+++ b/airavata-research-portal/src/components/home/ResourceCard.tsx
@@ -17,25 +17,38 @@
  *  under the License.
  */
 
-import {ModelResource, Resource} from "@/interfaces/ResourceType";
-import {Tag} from "@/interfaces/TagType";
-import {isValidImaage, resourceTypeToColor} from "@/lib/util";
-import {Avatar, Badge, Box, Card, HStack, Image, Text, VStack,} from "@chakra-ui/react";
-import {ResourceTypeBadge} from "../resources/ResourceTypeBadge";
-import {ResourceTypeEnum} from "@/interfaces/ResourceTypeEnum";
-import {ModelCardButton} from "../models/ModelCardButton";
-import {useState} from "react";
-import {Link} from 'react-router';
-import {ResourceOptions} from "@/components/resources/ResourceOptions.tsx";
-import {PrivacyEnum} from "@/interfaces/PrivacyEnum.ts";
-import {PrivateResourceTooltip} from "@/components/resources/PrivateResourceTooltip.tsx";
+import { ModelResource, Resource } from "@/interfaces/ResourceType";
+import { Tag } from "@/interfaces/TagType";
+import { isValidImaage, resourceTypeToColor } from "@/lib/util";
+import {
+  Avatar,
+  Badge,
+  Box,
+  Card,
+  Flex,
+  HStack,
+  Image,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { ResourceTypeBadge } from "../resources/ResourceTypeBadge";
+import { ResourceTypeEnum } from "@/interfaces/ResourceTypeEnum";
+import { ModelCardButton } from "../models/ModelCardButton";
+import { useState } from "react";
+import { Link } from "react-router";
+import { ResourceOptions } from "@/components/resources/ResourceOptions.tsx";
+import { PrivacyEnum } from "@/interfaces/PrivacyEnum.ts";
+import { PrivateResourceTooltip } from "@/components/resources/PrivateResourceTooltip.tsx";
+import { StatusEnum } from "@/interfaces/StatusEnum";
+import { MdOutlineVerifiedUser } from "react-icons/md";
+import { ResourceAuthor } from "@/interfaces/ResourceAuthor";
 
 export const ResourceCard = ({
-                               resource,
-                               size = "sm",
-                               deletable = true,
-                               removeOnUnStar = false,
-                             }: {
+  resource,
+  size = "sm",
+  deletable = true,
+  removeOnUnStar = false,
+}: {
   resource: Resource;
   size?: "sm" | "md" | "lg";
   deletable?: boolean;
@@ -49,110 +62,130 @@ export const ResourceCard = ({
 
   const linkToWithType = `${resource.type}/${resource.id}`;
 
-  const link = '/resources/' + linkToWithType;
+  const link = "/resources/" + linkToWithType;
   const hideCardCallback = () => {
     setHideCard(true);
-  }
+  };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const dummyOnUnStarSuccess = (_: string) => {
-  }
+  const dummyOnUnStarSuccess = (_: string) => {};
 
   const content = (
-      <Card.Root
-          overflow="hidden"
-          size={size}
-      >
-        {isValidImage && (
-            <Box position="relative" width="full">
-              <ResourceTypeBadge
-                  type={resource.type}
-                  position="absolute"
-                  top="2"
-                  left="2"
-                  zIndex="1"
-                  boxShadow="md"
-              />
-
-              {/* Full-width Image */}
-              <Image
-                  src={resource.headerImage}
-                  alt={resource.name}
-                  width="100%" // Ensure full width
-                  height="200px"
-                  objectFit="cover"
-              />
-            </Box>
-        )}
-
-        <Card.Header>
-          <HStack justifyContent={'space-between'} alignItems={'center'} flexWrap={'wrap'}>
-            <Card.Title>{resource.name}</Card.Title>
-
-            <HStack alignItems={'center'}>
-              {resource.privacy === PrivacyEnum.PRIVATE &&
-                  <PrivateResourceTooltip/>
+    <Card.Root overflow="hidden" size={size}>
+      {isValidImage && (
+        <Box position="relative" width="full">
+          <ResourceTypeBadge
+            type={resource.type}
+            position="absolute"
+            top="2"
+            left="2"
+            zIndex="1"
+            boxShadow="md"
+          />
+
+          {/* Full-width Image */}
+          <Image
+            src={resource.headerImage}
+            alt={resource.name}
+            width="100%" // Ensure full width
+            height="200px"
+            objectFit="cover"
+          />
+        </Box>
+      )}
+
+      <Card.Header>
+        <HStack
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          flexWrap={"wrap"}
+        >
+          <Card.Title>
+            <Text>{resource.name}</Text>
+          </Card.Title>
+
+          <HStack alignItems={"center"}>
+            {resource.privacy === PrivacyEnum.PRIVATE && (
+              <PrivateResourceTooltip />
+            )}
+            <ResourceOptions
+              deleteable={deletable}
+              resource={resource}
+              onDeleteSuccess={hideCardCallback}
+              onUnStarSuccess={
+                removeOnUnStar ? hideCardCallback : dummyOnUnStarSuccess
               }
-              <ResourceOptions deleteable={deletable} resource={resource} onDeleteSuccess={hideCardCallback}
-                               onUnStarSuccess={removeOnUnStar ? hideCardCallback : dummyOnUnStarSuccess}/>
-            </HStack>
+            />
           </HStack>
-        </Card.Header>
+        </HStack>
+      </Card.Header>
 
-        <Link to={link} target={"_blank"}>
-          <Box
-              _hover={{bg: resourceTypeToColor(resource.type) + ".100"}}
-          >
-            <Card.Body gap="2">
+      <Link to={link} target={"_blank"}>
+        <Box _hover={{ bg: resourceTypeToColor(resource.type) + ".100" }}>
+          <Card.Body gap="2">
+            <Flex gap={1} alignItems="center">
               {!isValidImage && (
-                  <Box>
-                    <ResourceTypeBadge type={resource.type}/>
-                  </Box>
+                <ResourceTypeBadge type={resource.type} size="xs" />
               )}
 
-              {/* Card Content */}
-              <HStack flexWrap="wrap">
-                {resource.tags.map((tag: Tag) => (
-                    <Badge
-                        key={tag.id}
-                        size="md"
-                        rounded="md"
-                        colorPalette={resourceTypeToColor(resource.type)}
-                    >
-                      {tag.value}
-                    </Badge>
-                ))}
-              </HStack>
-              <Text color="fg.muted" lineClamp={2}>
-                {resource.description}
-              </Text>
-            </Card.Body>
-
-            <Card.Footer justifyContent="space-between" pt={4}>
-              <VStack alignItems={'flex-start'}>
-                {resource.authors.map(author => (
-                        <HStack>
-                          <Avatar.Root shape="full" size="xs">
-                            <Avatar.Fallback name={author.authorId}/>
-                            <Avatar.Image src={author.authorId}/>
-                          </Avatar.Root>
-
-                          <Box>
-                            <Text fontWeight="bold" fontSize={'sm'}>{author.authorId}</Text>
-                          </Box>
-                        </HStack>
-                    )
-                )}
-              </VStack>
-
-
-              {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.MODEL && (
-                  <ModelCardButton model={resource as ModelResource}/>
+              {resource.status === StatusEnum.VERIFIED && (
+                <Badge
+                  colorPalette="green"
+                  fontWeight="bold"
+                  px="2"
+                  py="1"
+                  borderRadius="md"
+                  size="xs"
+                >
+                  <MdOutlineVerifiedUser />
+                  Verified
+                </Badge>
               )}
-            </Card.Footer>
-          </Box>
-        </Link>
-      </Card.Root>
+            </Flex>
+
+            {/* Card Content */}
+            <HStack flexWrap="wrap">
+              {resource.tags.map((tag: Tag) => (
+                <Badge
+                  key={tag.id}
+                  size="md"
+                  rounded="md"
+                  colorPalette={resourceTypeToColor(resource.type)}
+                >
+                  {tag.value}
+                </Badge>
+              ))}
+            </HStack>
+            <Text color="fg.muted" lineClamp={2}>
+              {resource.description}
+            </Text>
+          </Card.Body>
+
+          <Card.Footer justifyContent="space-between" pt={4}>
+            <VStack alignItems={"flex-start"}>
+              {resource.authors.map((author: ResourceAuthor) => (
+                <HStack key={author.authorId}>
+                  <Avatar.Root shape="full" size="xs">
+                    <Avatar.Fallback name={author.authorId} />
+                    <Avatar.Image src={author.authorId} />
+                  </Avatar.Root>
+
+                  <Box>
+                    <Text fontWeight="bold" fontSize={"sm"}>
+                      {author.authorId}
+                    </Text>
+                  </Box>
+                </HStack>
+              ))}
+            </VStack>
+
+            {(resource.type as ResourceTypeEnum) === ResourceTypeEnum.MODEL && (
+              <ModelCardButton model={resource as ModelResource} />
+            )}
+          </Card.Footer>
+        </Box>
+      </Link>
+    </Card.Root>
   );
 
   // if (clickable) {
diff --git a/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx b/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx
index 1ae0348aa..b75c77151 100644
--- a/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx
+++ b/airavata-research-portal/src/components/resources/RequestResourceVerification.tsx
@@ -1,6 +1,11 @@
 import { Resource } from "@/interfaces/ResourceType";
-import { Button, Dialog, useDialog, CloseButton } from "@chakra-ui/react";
+import api from "@/lib/api";
+import { CONTROLLER } from "@/lib/controller";
+import { Button, Dialog, useDialog, CloseButton, Text } from "@chakra-ui/react";
+import { useState } from "react";
 import { MdOutlineVerifiedUser } from "react-icons/md";
+import { StatusEnum } from "@/interfaces/StatusEnum";
+import { IoMdClose } from "react-icons/io";
 
 export const RequestResourceVerification = ({
   resource,
@@ -9,10 +14,15 @@ export const RequestResourceVerification = ({
   resource: Resource;
   onRequestSubmitted?: () => void;
 }) => {
+  const [verificationRequestLoading, setVerificationRequestLoading] =
+    useState(false);
   const dialog = useDialog();
 
   const onSubmitForVerification = async () => {
     console.log("Submitting resource for verification:", resource.id);
+    setVerificationRequestLoading(true);
+    await api.post(`${CONTROLLER.resources}/${resource.id}/verify`);
+    setVerificationRequestLoading(false);
     dialog.setOpen(false);
     onRequestSubmitted?.();
   };
@@ -27,10 +37,24 @@ export const RequestResourceVerification = ({
               <Dialog.Title>Resource Verification</Dialog.Title>
             </Dialog.Header>
             <Dialog.Body>
-              When you submit <b>{resource.name}</b> for verification, the
-              Airavata team will review it to ensure it meets the necessary
-              safety standards. This process may take some time, and you will be
-              notified once the verification is complete.
+              {resource.status === StatusEnum.NONE && (
+                <Text>
+                  When you submit <b>{resource.name}</b> for verification, the
+                  Airavata team will review it to ensure it meets the necessary
+                  safety standards. This process may take some time, and you
+                  will be notified once the verification is complete.
+                </Text>
+              )}
+
+              {resource.status === StatusEnum.REJECTED && (
+                <Text>
+                  Unfortunately, we found issues with <b>{resource.name}</b>{" "}
+                  that prevents it from being verified by our team. Please find
+                  our comments on the resource details page. After you have made
+                  those changes, you may re-submit this resource for
+                  verification.
+                </Text>
+              )}
             </Dialog.Body>
             <Dialog.Footer>
               <Button
@@ -48,16 +72,32 @@ export const RequestResourceVerification = ({
         </Dialog.Positioner>
       </Dialog.RootProvider>
 
-      <Button
-        size="2xs"
-        colorPalette={"yellow"}
-        onClick={() => {
-          dialog.setOpen(true);
-        }}
-      >
-        <MdOutlineVerifiedUser />
-        Request Verification
-      </Button>
+      {resource.status === StatusEnum.NONE && (
+        <Button
+          size="2xs"
+          colorPalette={"yellow"}
+          onClick={() => {
+            dialog.setOpen(true);
+          }}
+          loading={verificationRequestLoading}
+        >
+          <MdOutlineVerifiedUser />
+          Request Verification
+        </Button>
+      )}
+
+      {resource.status === StatusEnum.REJECTED && (
+        <Button
+          size="2xs"
+          colorPalette={"red"}
+          onClick={() => {
+            dialog.setOpen(true);
+          }}
+        >
+          <IoMdClose />
+          Verification Rejected
+        </Button>
+      )}
     </>
   );
 };
diff --git a/airavata-research-portal/src/components/resources/ResourceDetails.tsx b/airavata-research-portal/src/components/resources/ResourceDetails.tsx
index 1ddd72e18..64a685dc6 100644
--- a/airavata-research-portal/src/components/resources/ResourceDetails.tsx
+++ b/airavata-research-portal/src/components/resources/ResourceDetails.tsx
@@ -44,7 +44,7 @@ import {
   Resource,
 } from "@/interfaces/ResourceType";
 import { Tag } from "@/interfaces/TagType";
-import { isValidImaage, resourceTypeToColor } from "@/lib/util";
+import { isAdmin, isValidImaage, resourceTypeToColor } from "@/lib/util";
 import { ResourceTypeBadge } from "./ResourceTypeBadge";
 import { ResourceTypeEnum } from "@/interfaces/ResourceTypeEnum";
 import { ModelSpecificBox } from "../models/ModelSpecificBox";
@@ -59,6 +59,8 @@ import { PrivateResourceTooltip } from "@/components/resources/PrivateResourceTo
 import { useAuth } from "react-oidc-context";
 import { ResourceVerification } from "./ResourceVerification";
 import { ResourceAuthor } from "@/interfaces/ResourceAuthor.ts";
+import { VerificationControls } from "./admin/VerificationControls";
+import { VerificationActivities } from "./VerificationActivities";
 
 async function getResource(id: string) {
   const response = await api.get(`${CONTROLLER.resources}/public/${id}`);
@@ -72,6 +74,7 @@ const ResourceDetails = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
   const auth = useAuth();
+
   useEffect(() => {
     if (!id || auth.isLoading) return;
 
@@ -112,6 +115,8 @@ const ResourceDetails = () => {
     );
   };
 
+  const isAdminUser = isAdmin(auth.user?.profile.email || "");
+
   return (
     <>
       <Container maxW="breakpoint-lg" mx="auto" p={4} mt={16}>
@@ -142,12 +147,20 @@ const ResourceDetails = () => {
           justifyContent="space-between"
         >
           <Box w={"full"}>
-            <HStack gap={2} flexWrap="wrap">
-              <ResourceTypeBadge type={resource.type} />
-              <ResourceVerification
-                resource={resource}
-                setResource={setResource}
-              />
+            <HStack justifyContent="space-between" w="full">
+              <HStack gap={2} flexWrap="wrap">
+                <ResourceTypeBadge type={resource.type} />
+                <ResourceVerification
+                  resource={resource}
+                  setResource={setResource}
+                />
+              </HStack>
+              {isAdminUser && (
+                <VerificationControls
+                  resource={resource}
+                  setResource={setResource}
+                />
+              )}
             </HStack>
             <HStack
               mt={1}
@@ -188,7 +201,7 @@ const ResourceDetails = () => {
             <HStack mt={8} wrap={"wrap"}>
               {resource.authors.map((author: ResourceAuthor) => {
                 return (
-                  <HStack>
+                  <HStack key={author.authorId}>
                     <Avatar.Root shape="full" size="xs">
                       <Avatar.Fallback name={author.authorId} />
                       <Avatar.Image src={author.authorId} />
@@ -217,6 +230,8 @@ const ResourceDetails = () => {
           </Box>
         </HStack>
 
+        <VerificationActivities resource={resource} />
+
         <Separator my={6} />
         <Box>
           <Heading fontWeight="bold" size="2xl">
diff --git a/airavata-research-portal/src/components/resources/ResourceVerification.tsx b/airavata-research-portal/src/components/resources/ResourceVerification.tsx
index 2c6536b40..c8f486b63 100644
--- a/airavata-research-portal/src/components/resources/ResourceVerification.tsx
+++ b/airavata-research-portal/src/components/resources/ResourceVerification.tsx
@@ -51,6 +51,26 @@ export const ResourceVerification = ({
         </Tooltip>
       )}
 
+      {isAuthor && resource.status === StatusEnum.REJECTED && (
+        <Tooltip content="The rejected status is only visible to this resource's authors. Please see below for details.">
+          <RequestResourceVerification
+            resource={resource}
+            onRequestSubmitted={() => {
+              setResource({
+                ...resource,
+                status: StatusEnum.PENDING,
+              } as Resource);
+              toaster.create({
+                title: "Verification Requested",
+                description:
+                  "Your request for resource verification has been submitted.",
+                type: "info",
+              });
+            }}
+          />
+        </Tooltip>
+      )}
+
       {isAuthor && resource.status === StatusEnum.NONE && (
         <>
           <RequestResourceVerification
diff --git a/airavata-research-portal/src/components/resources/VerificationActivities.tsx b/airavata-research-portal/src/components/resources/VerificationActivities.tsx
new file mode 100644
index 000000000..c6b10ddbc
--- /dev/null
+++ b/airavata-research-portal/src/components/resources/VerificationActivities.tsx
@@ -0,0 +1,108 @@
+import { Resource } from "@/interfaces/ResourceType";
+import { ResourceVerificationActivity } from "@/interfaces/ResourceVerificationActivity";
+import api from "@/lib/api";
+import { CONTROLLER } from "@/lib/controller";
+import { getStatusColor, isAdmin, isResourceOwner } from "@/lib/util";
+import {
+  Box,
+  Flex,
+  Heading,
+  Table,
+  Spinner,
+  Text,
+  Badge,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { IoEyeOffOutline } from "react-icons/io5";
+import { useAuth } from "react-oidc-context";
+import { toaster } from "../ui/toaster";
+import { StatusEnum } from "@/interfaces/StatusEnum";
+
+export const VerificationActivities = ({
+  resource,
+}: {
+  resource: Resource;
+}) => {
+  const [activities, setActivities] = useState<ResourceVerificationActivity[]>(
+    []
+  );
+  const [loading, setLoading] = useState(false);
+  const auth = useAuth();
+  const userEmail = auth.user?.profile?.email || "";
+
+  if (!isResourceOwner(userEmail, resource) && !isAdmin(userEmail)) {
+    return null;
+  }
+
+  useEffect(() => {
+    async function getData() {
+      try {
+        setLoading(true);
+        const response = await api.get(
+          `${CONTROLLER.resources}/${resource.id}/verification-activities`
+        );
+        setActivities(response.data);
+      } catch (error) {
+        toaster.create({
+          title: "Failed to load verification activities",
+          description: "Please try again later.",
+          type: "error",
+        });
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    getData();
+  }, [resource]);
+
+  return (
+    <Box bg="gray.100" p={4} rounded="md">
+      <Flex alignItems="center" gap={2}>
+        <Heading fontWeight="bold" size="xl">
+          Verification Activities
+        </Heading>
+        <IoEyeOffOutline size={24} />
+      </Flex>
+      <Text fontSize="sm" color="gray.700">
+        This section is only visible to this resource's authors and
+        administrators.
+      </Text>
+
+      {loading && <Spinner />}
+
+      <Table.Root>
+        <Table.Caption>
+          Total {activities.length} verification activities
+        </Table.Caption>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader>Initiating User</Table.ColumnHeader>
+            <Table.ColumnHeader>Created At</Table.ColumnHeader>
+            <Table.ColumnHeader>Verification Status</Table.ColumnHeader>
+            <Table.ColumnHeader>Comments</Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {activities.map((activity: ResourceVerificationActivity) => (
+            <Table.Row key={activity.id}>
+              <Table.Cell>{activity.userId}</Table.Cell>
+              <Table.Cell>
+                {new Date(activity.createdAt).toLocaleString()}
+              </Table.Cell>
+              <Table.Cell>
+                <Badge
+                  colorPalette={getStatusColor(activity.status as StatusEnum)}
+                >
+                  {activity.status}
+                </Badge>
+              </Table.Cell>
+              <Table.Cell>{activity.message}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Box>
+  );
+};
diff --git a/airavata-research-portal/src/components/resources/admin/PendingResourcesSection.tsx b/airavata-research-portal/src/components/resources/admin/PendingResourcesSection.tsx
new file mode 100644
index 000000000..03bd6feac
--- /dev/null
+++ b/airavata-research-portal/src/components/resources/admin/PendingResourcesSection.tsx
@@ -0,0 +1,44 @@
+import { ResourceCard } from "@/components/home/ResourceCard";
+import { toaster } from "@/components/ui/toaster";
+import { Resource } from "@/interfaces/ResourceType";
+import api from "@/lib/api";
+import { CONTROLLER } from "@/lib/controller";
+import { Container, SimpleGrid, Spinner } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+export const PendingResourcesSection = () => {
+  const [loading, setLoading] = useState(false);
+  const [pendingResources, setPendingResources] = useState<Resource[]>([]);
+
+  useEffect(() => {
+    // Fetch pending resources from the API
+    async function fetchPendingResources() {
+      try {
+        setLoading(true);
+        const response = await api.get(`${CONTROLLER.admin}/resources/pending`);
+        setPendingResources(response.data);
+      } catch (error) {
+        toaster.create({
+          title: "Failed to load pending resources",
+          description: "Please try again later.",
+          type: "error",
+        });
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchPendingResources();
+  }, []);
+
+  return (
+    <Container maxW="container.lg" mt={8}>
+      {loading && <Spinner />}
+      <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4} mt={4}>
+        {pendingResources.map((resource) => (
+          <ResourceCard key={resource.id} resource={resource} size="md" />
+        ))}
+      </SimpleGrid>
+    </Container>
+  );
+};
diff --git a/airavata-research-portal/src/components/resources/admin/VerificationControls.tsx b/airavata-research-portal/src/components/resources/admin/VerificationControls.tsx
new file mode 100644
index 000000000..7bac15040
--- /dev/null
+++ b/airavata-research-portal/src/components/resources/admin/VerificationControls.tsx
@@ -0,0 +1,136 @@
+import { toaster } from "@/components/ui/toaster";
+import { Resource } from "@/interfaces/ResourceType";
+import { StatusEnum } from "@/interfaces/StatusEnum";
+import api from "@/lib/api";
+import { CONTROLLER } from "@/lib/controller";
+import {
+  Button,
+  HStack,
+  Dialog,
+  useDialog,
+  Text,
+  Textarea,
+  CloseButton,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+export const VerificationControls = ({
+  resource,
+  setResource,
+}: {
+  resource: Resource;
+  setResource: (resource: Resource) => void;
+}) => {
+  const [verifyLoading, setVerifyLoading] = useState(false);
+  const [rejectLoading, setRejectLoading] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  const dialog = useDialog();
+
+  if (!resource || resource.status !== StatusEnum.PENDING) {
+    return null; // Only show controls for resources pending verification
+  }
+
+  const onSubmitVerify = async () => {
+    try {
+      setVerifyLoading(true);
+      const response = await api.post(
+        `${CONTROLLER.admin}/resources/${resource.id}/verify`
+      );
+      setResource(response.data);
+    } catch {
+      toaster.create({
+        title: "Error verifying resource",
+        type: "error",
+      });
+    } finally {
+      setVerifyLoading(false);
+    }
+  };
+
+  const onSubmitForVerification = async () => {
+    if (!rejectReason.trim()) {
+      toaster.create({
+        title: "Rejection reason is required",
+        type: "error",
+      });
+      return;
+    }
+
+    try {
+      setRejectLoading(true);
+      const response = await api.post(
+        `${CONTROLLER.admin}/resources/${resource.id}/reject`,
+        rejectReason
+      );
+      setResource(response.data);
+      dialog.setOpen(false);
+    } catch {
+      toaster.create({
+        title: "Error rejecting resource",
+        type: "error",
+      });
+    } finally {
+      setRejectLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <HStack gap={2} mt={4}>
+        <Button
+          size="xs"
+          colorPalette="red"
+          onClick={() => dialog.setOpen(true)}
+        >
+          Reject
+        </Button>
+
+        <Button
+          size="xs"
+          colorPalette="green"
+          loading={verifyLoading}
+          onClick={onSubmitVerify}
+        >
+          Verify
+        </Button>
+      </HStack>
+
+      <Dialog.RootProvider size="sm" value={dialog}>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Reject Resource</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Text>
+                Please provide a reason for rejecting the resource{" "}
+                <b>{resource.name}</b>.
+              </Text>
+              <Textarea
+                mt={2}
+                placeholder="Enter rejection reason"
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                rows={4}
+              />
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button
+                width="100%"
+                colorPalette="red"
+                onClick={onSubmitForVerification}
+                loading={rejectLoading}
+              >
+                Reject
+              </Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.RootProvider>
+    </>
+  );
+};
diff --git a/airavata-research-portal/src/layouts/NavBar.tsx b/airavata-research-portal/src/layouts/NavBar.tsx
index ea53c1996..833594731 100644
--- a/airavata-research-portal/src/layouts/NavBar.tsx
+++ b/airavata-research-portal/src/layouts/NavBar.tsx
@@ -32,37 +32,49 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import ApacheAiravataLogo from "../assets/airavata-logo.png";
-import {Link, useNavigate} from "react-router";
-import {RxHamburgerMenu} from "react-icons/rx";
-import {IoClose} from "react-icons/io5";
-import {UserMenu} from "@/components/auth/UserMenu";
-import {useAuth} from "react-oidc-context";
+import { Link, useNavigate } from "react-router";
+import { RxHamburgerMenu } from "react-icons/rx";
+import { IoClose, IoEyeOffOutline } from "react-icons/io5";
+import { UserMenu } from "@/components/auth/UserMenu";
+import { useAuth } from "react-oidc-context";
+import { isAdmin } from "@/lib/util";
 
 const NAV_CONTENT = [
   {
     title: "Catalog",
     url: "/resources?resourceTypes=REPOSITORY%2CNOTEBOOK%2CDATASET%2CMODEL",
     needsAuth: false,
+    isAdminOnly: false,
   },
   {
     title: "Sessions",
     url: "/sessions",
     needsAuth: true,
+    isAdminOnly: false,
   },
   {
     title: "Add",
     url: "/add",
     needsAuth: true,
+    isAdminOnly: false,
   },
   {
     title: "Starred",
     url: "/resources/starred",
     needsAuth: true,
+    isAdminOnly: false,
   },
   {
     title: "Events",
     url: "/events",
     needsAuth: false,
+    isAdminOnly: false,
+  },
+  {
+    title: "Pending",
+    url: "/admin/pending-resources",
+    needsAuth: true,
+    isAdminOnly: true,
   },
   // {
   //   title: "Datasets",
@@ -85,94 +97,105 @@ const NAV_CONTENT = [
 interface NavLinkProps extends ButtonProps {
   title: string;
   url: string;
+  isAdminOnly: boolean;
 }
 
 const NavBar = () => {
-  const {open, onToggle} = useDisclosure();
+  const { open, onToggle } = useDisclosure();
   const navigate = useNavigate();
   const auth = useAuth();
 
   const filteredNavContent = NAV_CONTENT.filter((item) => {
-    if (item.needsAuth) {
+    if (item.isAdminOnly && !isAdmin(auth.user?.profile?.email || "")) {
+      return false;
+    } else if (item.needsAuth) {
       return auth.isAuthenticated;
     }
-    return true; // Show all items that do not require authentication
+    return true;
   });
 
-  const NavLink = ({title, url, ...props}: NavLinkProps) => (
-      <Button
-          variant="plain"
-          px={2}
-          _hover={{bg: "gray.200"}}
-          onClick={() => {
-            navigate(url);
-            onToggle();
-          }}
-          {...props}
-      >
-        <Text color="gray.700" fontSize="md" textAlign="left">
-          {title}
-        </Text>
-      </Button>
+  const NavLink = ({ title, url, isAdminOnly, ...props }: NavLinkProps) => (
+    <Button
+      variant="plain"
+      px={2}
+      _hover={{ bg: "gray.200" }}
+      color={isAdminOnly ? "blue.400" : "gray.700"}
+      onClick={() => {
+        navigate(url);
+        onToggle();
+      }}
+      {...props}
+    >
+      <Text fontSize="md" textAlign="left">
+        {title}
+      </Text>
+      {isAdminOnly && <IoEyeOffOutline size={16} title="Admin Only" />}
+    </Button>
   );
 
   return (
-      <Box position="sticky" top="0" zIndex="1000" bg="white" boxShadow="sm">
-        <Flex align="center" p={4}>
-          {/* Hamburger Menu (Mobile Only) */}
-          <IconButton
-              aria-label="Toggle Navigation"
-              display={{base: "inline-flex", md: "none"}}
-              onClick={onToggle}
-              variant="ghost"
-              mr={2}
-          >
-            {open ? <IoClose size={24}/> : <RxHamburgerMenu size={24}/>}
-          </IconButton>
+    <Box position="sticky" top="0" zIndex="1000" bg="white" boxShadow="sm">
+      <Flex align="center" p={4}>
+        {/* Hamburger Menu (Mobile Only) */}
+        <IconButton
+          aria-label="Toggle Navigation"
+          display={{ base: "inline-flex", md: "none" }}
+          onClick={onToggle}
+          variant="ghost"
+          mr={2}
+        >
+          {open ? <IoClose size={24} /> : <RxHamburgerMenu size={24} />}
+        </IconButton>
 
-          {/* Logo */}
-          <Link to="/">
-            <Image src={ApacheAiravataLogo} alt="Logo" boxSize="30px"/>
-          </Link>
+        {/* Logo */}
+        <Link to="/">
+          <Image src={ApacheAiravataLogo} alt="Logo" boxSize="30px" />
+        </Link>
 
-          {/* Desktop Nav Links */}
-          <HStack ml={4} display={{base: "none", md: "flex"}}>
-            {filteredNavContent.map((item) => (
-                <NavLink key={item.title} title={item.title} url={item.url}/>
-            ))}
-          </HStack>
+        {/* Desktop Nav Links */}
+        <HStack ml={4} display={{ base: "none", md: "flex" }}>
+          {filteredNavContent.map((item) => (
+            <NavLink
+              key={item.title}
+              title={item.title}
+              url={item.url}
+              isAdminOnly={item.isAdminOnly}
+            />
+          ))}
+        </HStack>
 
-          <Spacer/>
+        <Spacer />
 
-          {/* User Profile */}
-          <UserMenu/>
-        </Flex>
+        {/* User Profile */}
+        <UserMenu />
+      </Flex>
 
-        {/* Mobile Nav Links (Collapse) */}
-        <Collapsible.Root open={open}>
-          <Collapsible.Content>
-            <Stack
-                direction="column"
-                bg="white"
-                px={4}
-                pb={4}
-                spaceY={2}
-                display={{md: "none"}}
-            >
-              {filteredNavContent.map((item) => (
-                  <Box key={item.title} w="100%">
-                    <NavLink
-                        key={item.title}
-                        title={item.title}
-                        url={item.url}
-                        width="100%"
-                    />
-                  </Box>
-              ))}
-            </Stack>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      </Box>
+      {/* Mobile Nav Links (Collapse) */}
+      <Collapsible.Root open={open}>
+        <Collapsible.Content>
+          <Stack
+            direction="column"
+            bg="white"
+            px={4}
+            pb={4}
+            spaceY={2}
+            display={{ md: "none" }}
+          >
+            {filteredNavContent.map((item) => (
+              <Box key={item.title} w="100%">
+                <NavLink
+                  key={item.title}
+                  title={item.title}
+                  url={item.url}
+                  isAdminOnly={item.isAdminOnly}
+                  width="100%"
+                />
+              </Box>
+            ))}
+          </Stack>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </Box>
   );
 };
 
diff --git a/airavata-research-portal/src/lib/controller.ts b/airavata-research-portal/src/lib/controller.ts
index d4657b187..45a4b67b8 100644
--- a/airavata-research-portal/src/lib/controller.ts
+++ b/airavata-research-portal/src/lib/controller.ts
@@ -22,4 +22,5 @@ export const CONTROLLER = {
   hub: "/hub",
   resources: "/resources",
   sessions: "/sessions",
-}
\ No newline at end of file
+  admin: "/admin"
+}
diff --git a/airavata-research-portal/src/lib/util.ts b/airavata-research-portal/src/lib/util.ts
index 9cfb333ad..e8b226f8a 100644
--- a/airavata-research-portal/src/lib/util.ts
+++ b/airavata-research-portal/src/lib/util.ts
@@ -1,5 +1,6 @@
-import {Resource} from "@/interfaces/ResourceType.ts";
-import {ProjectType} from "@/interfaces/ProjectType.tsx";
+import { Resource } from "@/interfaces/ResourceType.ts";
+import { ProjectType } from "@/interfaces/ProjectType.tsx";
+import { StatusEnum } from "@/interfaces/StatusEnum";
 
 export const resourceTypeToColor = (type: string) => {
   if (type === "NOTEBOOK") {
@@ -29,15 +30,37 @@ export const getGithubOwnerAndRepo = (url: string) => {
   if (match) {
     const owner = match[1];
     const repo = match[2].replace(/\.git$/, "");
-    return {owner, repo};
+    return { owner, repo };
   }
   return null;
 }
 
 export const isResourceOwner = (userEmail: string, resource: Resource) => {
-  return resource.authors.includes(userEmail);
+  return resource.authors
+    .map((author) => author.authorId.toLowerCase())
+    .includes(userEmail);
 }
 
 export const isProjectOwner = (userEmail: string, project: ProjectType) => {
   return project.ownerId.toLowerCase() === userEmail.toLowerCase();
+}
+
+export const isAdmin = (userEmail: string) => {
+  const adminEmails = import.meta.env.VITE_ADMIN_EMAILS?.split(",") || [];
+  return adminEmails.map((email: string) => email.toLowerCase()).includes(userEmail.toLowerCase());
+}
+
+export const getStatusColor = (status: StatusEnum) => {
+  switch (status) {
+    case StatusEnum.VERIFIED:
+      return "green";
+    case StatusEnum.REJECTED:
+      return "red";
+    case StatusEnum.PENDING:
+      return "yellow";
+    case StatusEnum.NONE:
+      return "gray";
+    default:
+      return "gray";
+  }
 }
\ No newline at end of file