V.0.3.0 (#28)

* Up Version to 0.3.0 as 2 new features are added

* Updated profile,signout/signin with skeleton loading

* Refactored code

* Added Admin Page & Navlink to Admin Page

* Overhauled Q&A for document upload components & api routes

* Added SweetAlert2 Package

* Added API route for getting user public collections requests

* Update route return error & removed redundant API Calls

* Added handles for buttons and fetching of data

* Upgraded Next.js from 13 to 14 & packages

* Added api route methods for management & refactored code

* Update API route to retrieve user profile data from public schema

* Updated Admin page with menu and pages data

* Removed unused import & updated delete func fetch with correct API endpoint

* Updated API routes naming convention

* Added toast promise for indexing

* Bunch of fixes & added API routes handles for admin sub pages

* Created Backend API route for indexing of user uploaded documents

* Aligned requests to API parameters

* Aligned requests to API parameters

* Fixed logic error in checking valid token

* Updated Python Packages

* Updated Indexer API Router

* Alignment with updated API Routes

* Removed postprocessing scores in search

* Updated search section with back button

* Added redirect to unauthorized page for admin page and api routes

* Added API Router for deleting collections via asyncpg in pgvecottr 'vecs' Schema

* Update middleware to skip is-admin api route

* Added API Route and functions to delete single and multiple user collections

* Updated HF Spaces Metadata

* Updated Sync to HF Hub with new space URL

.github/workflows/sync-to-hugging-face-hub.yml

@@ -21,4 +21,4 @@ jobs:
       - name: Push to hub
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
-        run: git push https://khronoz:$HF_TOKEN@huggingface.co/spaces/khronoz/Smart-Retrieval-API main
+        run: git push https://JTCSmartRetrieval:$HF_TOKEN@huggingface.co/spaces/SmartRetrieval/Smart-Retrieval-Demo-API main

README.md

@@ -1,5 +1,5 @@
 ---
-title: Smart Retrieval API
+title: Smart Retrieval Demo API
 emoji: 📝
 colorFrom: blue
 colorTo: indigo

backend/backend/app/api/routers/chat.py

@@ -34,7 +34,7 @@ class _Message(BaseModel):
 
 class _ChatData(BaseModel):
     messages: List[_Message]
-    document: str
+    collection_id: str
 
 
 # custom prompt template to be used by chat engine
@@ -72,11 +72,11 @@ async def chat(
     data: _ChatData = Depends(json_to_model(_ChatData)),
 ):
     logger = logging.getLogger("uvicorn")
-    # get the document set selected from the request body
-    document_set = data.document
-    logger.info(f"Document Set: {document_set}")
+    # get the collection_id from the request body
+    collection_id = data.collection_id
+    logger.info(f"Chat -> Collection ID: {collection_id}")
     # get the index for the selected document set
-    index = get_index(collection_name=document_set)
+    index = get_index(collection_name=collection_id)
     # check preconditions and get last message
     if len(data.messages) == 0:
         raise HTTPException(

backend/backend/app/api/routers/collections.py

@@ -0,0 +1,107 @@
+import logging
+import os
+import uuid
+from typing import List
+
+import asyncpg
+from asyncpg.exceptions import PostgresError
+from fastapi import APIRouter, Body, Depends, HTTPException
+from pydantic import BaseModel
+
+from backend.app.utils import auth
+
+
+class _CollectionIds(BaseModel):
+    collection_ids: List[str]
+
+
+collections_router = r = APIRouter(dependencies=[Depends(auth.validate_user)])
+
+logger = logging.getLogger("uvicorn")
+
+schema_name = "vecs"
+
+"""
+This router is for deleting collections functionality.
+"""
+
+
+def is_valid_uuidv4(uuid_str: str) -> bool:
+    try:
+        val = uuid.UUID(uuid_str, version=4)
+    except ValueError:
+        return False
+    return str(val) == uuid_str
+
+
+async def drop_table(conn, collection_id):
+    try:
+        await conn.execute(
+            f'DROP TABLE IF EXISTS "{schema_name}"."{collection_id}" CASCADE'
+        )
+        return True
+    except PostgresError as e:
+        logger.error(f"Failed to drop table {collection_id}: {e}")
+        return False
+
+
+@r.post("/delete/single")
+async def delete_single(collection_id: str):
+    # Log the received collection_id
+    logger.info(f"Delete Collection: {collection_id}")
+
+    # Validate the collection_id to ensure it's a valid UUIDv4
+    if not is_valid_uuidv4(collection_id):
+        logger.error(f"Invalid collection_id: {collection_id}")
+        raise HTTPException(status_code=400, detail="Invalid collection_id format")
+
+    # Try to connect to the PostgreSQL database
+    db_url: str = os.environ.get("POSTGRES_CONNECTION_STRING")
+    if not db_url:
+        logger.error("POSTGRES_CONNECTION_STRING environment variable not set")
+        raise HTTPException(status_code=500, detail="Database configuration error")
+
+    try:
+        conn = await asyncpg.connect(dsn=db_url)
+        result = await drop_table(conn, collection_id)
+    except Exception as e:
+        logger.error(f"Failed to connect to the database: {e}")
+        raise HTTPException(status_code=500, detail="Failed to connect to the database")
+    finally:
+        await conn.close()
+
+    logger.debug(f"Delete Collection {collection_id}: {result}")
+    return {collection_id: result}
+
+
+@r.post("/delete/multiple")
+async def delete_multiple(collection_ids: _CollectionIds = Body(...)):
+    # Log the received collection_ids
+    logger.info(f"Delete Collections: {collection_ids.collection_ids}")
+
+    # Validate the collection_ids to ensure they are valid UUIDv4s
+    for collection_id in collection_ids.collection_ids:
+        if not is_valid_uuidv4(collection_id):
+            logger.error(f"Invalid collection_id: {collection_id}")
+            raise HTTPException(status_code=400, detail="Invalid collection_id format")
+
+    # Try to connect to the PostgreSQL database
+    db_url: str = os.environ.get("POSTGRES_CONNECTION_STRING")
+    if not db_url:
+        logger.error("POSTGRES_CONNECTION_STRING environment variable not set")
+        raise HTTPException(status_code=500, detail="Database configuration error")
+
+    results = {}
+    try:
+        conn = await asyncpg.connect(dsn=db_url)
+        for collection_id in collection_ids.collection_ids:
+            async with conn.transaction():
+                results[collection_id] = await drop_table(conn, collection_id)
+    except Exception as e:
+        logger.error(f"Failed to connect to the database: {e}")
+        raise HTTPException(status_code=500, detail="Failed to connect to the database")
+    finally:
+        await conn.close()
+
+    logger.debug(f"Delete Collections: {results}")
+    return results

backend/backend/app/api/routers/indexer.py

@@ -0,0 +1,73 @@
+import logging
+import os
+import tempfile
+from typing import List
+
+from fastapi import APIRouter, Depends, Form, File, HTTPException, UploadFile
+from fastapi.responses import JSONResponse
+
+from backend.app.utils import auth, index
+
+# Initialize the logger
+logger = logging.getLogger("uvicorn")
+
+# Initialize the API Router with dependencies
+indexer_router = r = APIRouter(dependencies=[Depends(auth.validate_user)])
+
+"""
+This router is for indexing of user uploaded documents functionality.
+A list of files is received by the router and stored in a temporary directory.
+The uploaded documents are indexed and stored in the vecs database.
+"""
+
+
+@r.post("")
+async def indexer(
+    collection_id: str = Form(...),
+    files: List[UploadFile] = File(...),
+    user=Depends(auth.validate_user),
+):
+    logger.info(f"Indexer -> Collection ID: {collection_id}")
+    logger.info(
+        f"User {user} is uploading {len(files)} files to collection {collection_id}"
+    )
+
+    try:
+        with tempfile.TemporaryDirectory() as temp_dir:
+            logger.info(f"Created temporary directory at {temp_dir}")
+
+            file_paths = []
+
+            for file in files:
+                contents = await file.read()
+                file_path = os.path.join(temp_dir, file.filename)
+                with open(file_path, "wb") as f:
+                    f.write(contents)
+                file_paths.append(file_path)
+                logger.info(f"Saved file: {file.filename} at {file_path}")
+
+            # Call indexing function with the directory and collection_id
+            if len(file_paths) == 0:
+                raise HTTPException(
+                    status_code=400, detail="No files uploaded for indexing"
+                )
+            if collection_id is None:
+                raise HTTPException(
+                    status_code=400, detail="No collection ID provided for indexing"
+                )
+            if index.index_uploaded_files(temp_dir, collection_id):
+                logger.info("Files uploaded and indexed successfully.")
+                return JSONResponse(
+                    status_code=200,
+                    content={
+                        "status": "Files uploaded and indexed successfully",
+                        "filenames": [file.filename for file in files],
+                    },
+                )
+            else:
+                raise HTTPException(
+                    status_code=500, detail="Failed to upload and index files"
+                )
+    except Exception as e:
+        logger.error(f"Failed to upload and index files: {str(e)}")
+        raise HTTPException(status_code=500, detail="Failed to upload and index files.")

backend/backend/app/api/routers/query.py

@@ -17,6 +17,7 @@ query_router = r = APIRouter(dependencies=[Depends(auth.validate_user)])
 This router is for query functionality which consist of query engine.
 The query engine is used to query the index.
 There is no chat memory used here, every query is independent of each other.
+// Currently Depreciated - Not used in the current version of the application
 """
 
 
@@ -27,7 +28,7 @@ class _Message(BaseModel):
 
 class _ChatData(BaseModel):
     messages: List[_Message]
-    document: str
+    collection_id: str
 
 
 @r.post("")
@@ -38,11 +39,11 @@ async def query(
     data: _ChatData = Depends(json_to_model(_ChatData)),
 ):
     logger = logging.getLogger("uvicorn")
-    # get the document set selected from the request body
-    document_set = data.document
-    logger.info(f"Document Set: {document_set}")
+    # get the collection_id selected from the request body
+    collection_id = data.collection_id
+    logger.info(f"Collection ID: {collection_id}")
     # get the index for the selected document set
-    index = get_index(collection_name=document_set)
+    index = get_index(collection_name=collection_id)
     # check preconditions and get last message which is query
     if len(data.messages) == 0:
         raise HTTPException(

backend/backend/app/api/routers/search.py

@@ -1,7 +1,7 @@
 import logging
 import re
 
-from fastapi import APIRouter, Depends, HTTPException, Request, status
+from fastapi import APIRouter, Depends, HTTPException, status
 from llama_index.postprocessor import SimilarityPostprocessor
 from llama_index.retrievers import VectorIndexRetriever
 
@@ -20,16 +20,15 @@ Instead it returns the relevant information from the index.
 
 @r.get("")
 async def search(
-    request: Request,
     query: str = None,
-    docSelected: str = None,
+    collection_id: str = None,
 ):
     # query = request.query_params.get("query")
     logger = logging.getLogger("uvicorn")
-    logger.info(f"Document Set: {docSelected} | Search: {query}")
+    logger.info(f"Document Set: {collection_id} | Search: {query}")
     # get the index for the selected document set
-    index = get_index(collection_name=docSelected)
-    if query is None or docSelected is None:
+    index = get_index(collection_name=collection_id)
+    if query is None or collection_id is None:
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail="No search info/document set provided",
@@ -62,6 +61,9 @@ async def search(
 
     logger.info(f"Filtered Search results similarity score: {filtered_results_scores}")
 
+    # Skip postprocessing for now
+    filtered_results = query_results
+
     response = []
     id = 1
     for node in filtered_results:
@@ -72,7 +74,9 @@ async def search(
         data = {}
         data["id"] = id
         data["file_name"] = node_metadata["file_name"]
-        data["page_no"] = node_metadata["page_label"]
+        data["page_no"] = (
+            node_metadata["page_label"] if "page_label" in node_metadata else "N/A"
+        )
         cleaned_text = re.sub(
             "^_+ | _+$", "", node_dict["text"]
         )  # remove leading and trailing underscores

backend/backend/app/utils/auth.py

@@ -75,12 +75,12 @@ def get_user_from_JWT(token: str):
     if payload is not None:
         user_id = payload["sub"]
         # Try to get the user from the database using the user_id
-        response = supabase.table("users").select("*").eq("id", user_id).execute()
+        response = supabase.table("users").select("id").eq("id", user_id).execute()
         # print(response.data)
         if len(response.data) == 0:
             return False
         else:
-            return True
+            return response.data[0]["id"]
     else:
         return False
 
@@ -109,7 +109,7 @@ async def validate_user(
                     )
                 else:
                     logger.info("Validated API key successfully!")
-                    return None
+                    return "Authenticated via API Key"
             else:
                 auth_token = (
                     auth_token.strip()
@@ -125,16 +125,17 @@ async def validate_user(
                         "Supabase JWT Secret is not set in Backend Service!"
                     )
                 if not isBearer:
-                    return (
+                    raise ValueError(
                         "Invalid token scheme. Please use the format 'Bearer [token]'"
                     )
                 # Verify the JWT token is valid
-                if verify_jwt(jwtoken=jwtoken):
-                    return "Invalid token. Please provide a valid token."
+                if verify_jwt(jwtoken=jwtoken) is False:
+                    raise ValueError("Invalid token. Please provide a valid token.")
                 # Check if the user exists in the database
-                if get_user_from_JWT(token=jwtoken):
+                user = get_user_from_JWT(token=jwtoken)
+                if user:
                     logger.info("Validated User's Auth Token successfully!")
-                    return None
+                    return user
                 else:
                     raise ValueError("User does not exist in the database!")
         else:

backend/backend/app/utils/contants.py

@@ -34,7 +34,7 @@ EMBED_MODEL_DIMENSIONS = 384  # MiniLM-L6-v2 uses 384 dimensions
 DEF_EMBED_MODEL_DIMENSIONS = (
     1536  # Default embedding model dimensions used by OpenAI text-embedding-ada-002
 )
-EMBED_BATCH_SIZE = 100  # batch size for openai embeddings
+EMBED_BATCH_SIZE = 10  # batch size for openai embeddings
 
 # Prompt Helper Constants
 # set maximum input size

backend/backend/app/utils/index.py

@@ -126,7 +126,7 @@ def create_index():
         collection_names = os.listdir(DATA_DIR)
         # to create each folder as a collection in local storage
         for collection_name in collection_names:
-            logger.info(f"Checking if [{collection_names}] index exists locally...")
+            logger.info(f"Checking if [{collection_name}] index exists locally...")
             # build the new data directory
             new_data_dir = os.path.join(DATA_DIR, collection_name)
             # build the new storage directory
@@ -137,7 +137,7 @@ def create_index():
                 or len(os.listdir(new_storage_dir))
                 < 4  # 4 files should be present if using simplevectorstore
             ):
-                logger.info(f"Creating [{collection_names}] index")
+                logger.info(f"Creating [{collection_name}] index")
                 # load the documents and create the index
                 try:
                     documents = SimpleDirectoryReader(
@@ -194,7 +194,7 @@ def create_index():
             logger.info(f"Finished creating [{collection_name}] vector store")
 
 
-def load_existing_index(collection_name="PSSCOC"):
+def load_existing_index(collection_name):
     # load the existing index
     if USE_LOCAL_VECTOR_STORE:
         # create the storage directory
@@ -237,6 +237,75 @@ def load_existing_index(collection_name="PSSCOC"):
         return index
 
 
+# Index the files in the tempfile data directory and store the index in local storage or Supabase
+def index_uploaded_files(data_dir, collection_name):
+    # if use local vector store, create & store the index locally
+    if USE_LOCAL_VECTOR_STORE:
+        logger.info(f"Checking if [{collection_name}] index exists locally...")
+        # build the new storage directory
+        new_storage_dir = os.path.join(STORAGE_DIR, collection_name)
+        # check if storage folder and index files already exists
+        if (
+            not os.path.exists(new_storage_dir)
+            or len(os.listdir(new_storage_dir))
+            < 4  # 4 files should be present if using simplevectorstore
+        ):
+            logger.info(f"Creating [{collection_name}] index")
+            # load the documents and create the index
+            try:
+                documents = SimpleDirectoryReader(
+                    input_dir=data_dir, recursive=True
+                ).load_data()
+            except ValueError as e:
+                logger.error(f"{e}")
+                return False
+            index = VectorStoreIndex.from_documents(
+                documents=documents,
+                service_context=service_context,
+                show_progress=True,
+            )
+            # store it for later
+            index.storage_context.persist(STORAGE_DIR)
+            logger.info(f"Finished creating new index. Stored in {STORAGE_DIR}")
+            return True
+        else:
+            # do nothing
+            logger.info(f"Index already exist at {STORAGE_DIR}...")
+            return True
+    # else, create & store the index in Supabase pgvector
+    else:
+        # check if remote storage already exists
+        logger.info(f"Checking if [{collection_name}] index exists in Supabase...")
+        # set the dimension based on the LLM model used
+        dimension = (
+            EMBED_MODEL_DIMENSIONS if USE_LOCAL_LLM else DEF_EMBED_MODEL_DIMENSIONS
+        )
+        # create the vector store, will create the collection if it does not exist
+        vector_store = SupabaseVectorStore(
+            postgres_connection_string=os.getenv("POSTGRES_CONNECTION_STRING"),
+            collection_name=collection_name,
+            dimension=dimension,
+        )
+        # create the storage context
+        storage_context = StorageContext.from_defaults(vector_store=vector_store)
+        logger.info(f"Creating [{collection_name}] index")
+        # load the documents and create the index
+        try:
+            documents = SimpleDirectoryReader(
+                input_dir=data_dir, recursive=True
+            ).load_data()
+        except ValueError as e:
+            logger.error(f"{e}")
+            return False
+        index = VectorStoreIndex.from_documents(
+            documents=documents,
+            storage_context=storage_context,
+            show_progress=True,
+        )
+        logger.info(f"Finished creating [{collection_name}] vector store")
+        return True
+
+
 def get_index(collection_name):
     # load the index from storage
     index = load_existing_index(collection_name)

backend/backend/main.py

@@ -9,8 +9,10 @@ from torch.cuda import is_available as is_cuda_available
 
 from backend.app.api.routers.chat import chat_router
 from backend.app.api.routers.healthcheck import healthcheck_router
+from backend.app.api.routers.indexer import indexer_router
 from backend.app.api.routers.query import query_router
 from backend.app.api.routers.search import search_router
+from backend.app.api.routers.collections import collections_router
 
 load_dotenv()
 
@@ -60,6 +62,8 @@ app.include_router(chat_router, prefix="/api/chat")
 app.include_router(query_router, prefix="/api/query")
 app.include_router(search_router, prefix="/api/search")
 app.include_router(healthcheck_router, prefix="/api/healthcheck")
+app.include_router(indexer_router, prefix="/api/indexer")
+app.include_router(collections_router, prefix="/api/collections")
 
 
 # Redirect to the /docs endpoint

backend/pyproject.toml

@@ -20,6 +20,8 @@ doc2docx = "^0.2.4"
 supabase = "^2.4.0"
 pyjwt = "^2.8.0"
 vecs = "^0.4.3"
+python-multipart = "^0.0.9"
+asyncpg = "^0.29.0"
 
 [tool.poetry.group.dev]
 optional = true

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/app/admin/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import AdminSection from "@/app/components/admin-section";
+
+export default function Query() {
+
+    return (
+        <AdminSection />
+    );
+}

frontend/app/api/admin/collections-requests/approve/route.ts

@@ -0,0 +1,43 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// POST request to approve the user's public collections request status in the database (Used by admin)
+export async function POST(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collection_id from the request body
+    const { collection_id, is_make_public } = await request?.json();
+
+    // Update the user's public collections request data in the database, set is_pending = false
+    const { data: updatedUserPubCollectionsReq, error: updatedUserPubCollReqErr } = await supabase
+        .from('public_collections_requests')
+        .update({ is_pending: false, is_approved: true })
+        .eq('collection_id', collection_id);
+
+    if (updatedUserPubCollReqErr) {
+        console.error('Error updating user public collections request data in database:', updatedUserPubCollReqErr.message);
+        return NextResponse.json({ error: updatedUserPubCollReqErr.message }, { status: 500 });
+    }
+
+    // Update the user's collections data in the database, set is_public = true
+    console.log('is_public:', is_make_public);
+    const { data: updatedUserPubCollections, error: updatedUserPubCollErr } = await supabase
+        .from('collections')
+        .update({ is_public: is_make_public})
+        .eq('collection_id', collection_id);
+
+    if (updatedUserPubCollErr) {
+        console.error('Error updating user public collections data in database:', updatedUserPubCollErr.message);
+        return NextResponse.json({ error: updatedUserPubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('Admin: User Public Collections Requests:', userPubCollectionsReq);
+    // console.log('Admin: User Public Collections:', userPubCollections);
+
+    return NextResponse.json({ updatedUserPubCollectionsReq, updatedUserPubCollections });
+}

frontend/app/api/admin/collections-requests/reject/route.ts

@@ -0,0 +1,30 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// POST request to reject the user's public collections request status in the database (Used by admin)
+export async function POST(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collection_id from the request body
+    const { collection_id } = await request?.json();
+
+    // Update the user's public collections request data in the database, set is_pending = false
+    const { data: updatedUserPubCollectionsReq, error: updatedUserPubCollErr } = await supabase
+        .from('public_collections_requests')
+        .update({ is_pending: false, is_approved: false})
+        .eq('collection_id', collection_id);
+
+    if (updatedUserPubCollErr) {
+        console.error('Error updating user public collections request data in database:', updatedUserPubCollErr.message);
+        return NextResponse.json({ error: updatedUserPubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('User Public Collections Requests:', userPubCollectionsReq);
+
+    return NextResponse.json({ updatedUserPubCollectionsReq });
+}

frontend/app/api/admin/collections-requests/route.ts

@@ -0,0 +1,26 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the public collections requests data from the database
+    const { data: pubCollectionsReq, error: pubCollErr } = await supabase
+        .from('public_collections_requests')
+        .select('collection_id, is_make_public, is_pending, is_approved, created_at, updated_at, collections (collection_id, id, display_name, description, is_public, users (id, name, email))')
+        .eq('is_pending', true);
+
+    if (pubCollErr) {
+        console.error('Error fetching public collection request data from database:', pubCollErr.message);
+        return NextResponse.json({ error: pubCollErr.message }, { status: 500 });
+    }
+
+    console.log('Collections Request:', pubCollectionsReq);
+
+    return NextResponse.json({ pubCollectionsReq: pubCollectionsReq });
+}

frontend/app/api/admin/collections/route.ts

@@ -0,0 +1,26 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// GET request to retrieve the collections data from the database
+export async function GET(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collections requests data from the database
+    const { data: collections, error: collErr } = await supabase
+        .from('collections')
+        .select('collection_id, id, display_name, description, is_public, created_at, users (id, name, email)');
+
+    if (collErr) {
+        console.error('Error fetching collections data from database:', collErr.message);
+        return NextResponse.json({ error: collErr.message }, { status: 500 });
+    }
+
+    // console.log('Collections:', collections);
+
+    return NextResponse.json({ collections: collections });
+}

frontend/app/api/admin/is-admin/route.ts

@@ -0,0 +1,52 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// GET request to retrieve the users data from the database
+export async function GET(request: NextRequest) {
+    // Retrieve the session token from the request cookies
+    const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
+
+    // Create a new Supabase client
+    const supabaseAuth = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'next_auth' } },
+    );
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the user's ID from the session token
+    const { data: sessionData, error: sessionError } = await supabaseAuth
+        .from('sessions')
+        .select('userId')
+        .eq('sessionToken', session?.value)
+        .single();
+
+    const userId = sessionData?.userId;
+
+    if (sessionError) {
+        console.error('Error fetching session from database:', sessionError.message);
+        return NextResponse.json({ error: sessionError.message }, { status: 500 });
+    }
+
+    // Ensure user is an admin
+    const { data: userData, error: userError } = await supabase
+        .from('users')
+        .select('id, admins (id)')
+        .eq('id', userId)
+        .single();
+
+    if (userError) {
+        console.error('Error fetching user data from database:', userError.message);
+        return NextResponse.json({ error: userError.message }, { status: 500 });
+    }
+
+    // console.log('userData:', userData);
+    const isAdmin = userData?.admins.length > 0;
+
+    return NextResponse.json({ isAdmin: isAdmin });
+}

frontend/app/api/admin/users/demote/route.ts

@@ -0,0 +1,28 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// POST request to demote a user to a normal user
+export async function POST(request: NextRequest) {
+    // Create a new Supabase client
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the user id from the request body
+    const { id } = await request?.json();
+
+    const { data: updatedAdminsData, error: updateAdminsError } = await supabase
+        .from('admins')
+        .delete()
+        .eq('id', id);
+
+    if (updateAdminsError) {
+        console.error('Error removing admin from database:', updateAdminsError.message);
+        return NextResponse.json({ error: updateAdminsError.message }, { status: 500 });
+    }
+
+    return NextResponse.json({ updatedAdminsData });
+}

frontend/app/api/admin/users/promote/route.ts

@@ -0,0 +1,27 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// POST request to promote a user to an admin
+export async function POST(request: NextRequest) {
+    // Create a new Supabase client
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the user id from the request body
+    const { id } = await request?.json();
+
+    const { data: updatedAdminsData, error: updateAdminsError } = await supabase
+        .from('admins')
+        .insert({ id: id })
+
+    if (updateAdminsError) {
+        console.error('Error inserting admin to database:', updateAdminsError.message);
+        return NextResponse.json({ error: updateAdminsError.message }, { status: 500 });
+    }
+
+    return NextResponse.json({ updatedAdminsData });
+}

frontend/app/api/admin/users/route.ts

@@ -0,0 +1,26 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// GET request to retrieve the users data from the database
+export async function GET(request: NextRequest) {
+    // Create a new Supabase client
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    const { data: usersData, error: usersError } = await supabase
+        .from('users')
+        .select('id, name, email, admins (id)');
+
+    if (usersError) {
+        console.error('Error fetching users data from database:', usersError.message);
+        return NextResponse.json({ error: usersError.message }, { status: 500 });
+    }
+
+    // console.log('usersData:', usersData);
+
+    return NextResponse.json({ users: usersData });
+}

frontend/app/api/profile/route.ts

@@ -1,21 +1,26 @@
 import { createClient } from '@supabase/supabase-js';
 import { NextRequest, NextResponse } from "next/server";
 
+// GET request to retrieve the user's profile data
 export async function GET(request: NextRequest) {
-    const { pathname, origin } = request.nextUrl;
-    const signinPage = new URL('/sign-in', origin);
     // Retrieve the session token from the request cookies
     const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
 
     // Create a new Supabase client
-    const supabase = createClient(
+    const supabaseAuth = createClient(
         process.env.SUPABASE_URL ?? '',
         process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
         { db: { schema: 'next_auth' } },
     );
 
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
     // Retrieve the user's ID from the session token
-    const { data: sessionData, error: sessionError } = await supabase
+    const { data: sessionData, error: sessionError } = await supabaseAuth
         .from('sessions')
         .select('userId')
         .eq('sessionToken', session?.value)
@@ -25,7 +30,7 @@ export async function GET(request: NextRequest) {
 
     if (sessionError) {
         console.error('Error fetching session from database:', sessionError.message);
-        return NextResponse.redirect(signinPage.href, { status: 302 });
+        return NextResponse.json({ error: sessionError.message }, { status: 500 });
     }
 
     // Retrieve the user's profile data
@@ -37,10 +42,126 @@ export async function GET(request: NextRequest) {
 
     if (userError) {
         console.error('Error fetching user data from database:', userError.message);
-        return NextResponse.redirect(signinPage.href, { status: 302 });
+        return NextResponse.json({ error: userError.message }, { status: 500 });
     }
 
-    // console.log('userData:', userData);
+    console.log('userData:', userData);
 
     return NextResponse.json({ userData: userData });
 }
+
+// PUT request to update the user's profile data
+export async function PUT(request: NextRequest) {
+    // Retrieve the session token from the request cookies
+    const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
+
+    // Retrieve the user's data from the request body
+    const { userId, name, email, image } = await request.json();
+
+    // Create a new Supabase client
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Update the user's profile data
+    const { data: updatedUserData, error: updateError } = await supabase
+        .from('users')
+        .update({ name, email, image })
+        .eq('id', userId);
+
+    if (updateError) {
+        console.error('Error updating user data in database:', updateError.message);
+        return NextResponse.json({ error: updateError.message }, { status: 500 });
+    }
+
+    // console.log('updatedUserData:', updatedUserData);
+
+    return NextResponse.json({ updatedUserData });
+}
+
+// DELETE request to delete the user's profile & all data
+export async function DELETE(request: NextRequest) {
+    // Create a new Supabase client
+    const supabaseAuth = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'next_auth' } },
+    );
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the user's ID from the request body
+    const { userId } = await request?.json();
+
+    // Retrieve the authorization token from the request headers
+    let authorization = request.headers.get('Authorization');
+
+    // Public API key
+    let api_key = null;
+
+    // If no session, use the public API key
+    if (authorization === null || authorization === undefined || authorization.includes('undefined')) {
+        console.log('No authorization token found, using public API key');
+        api_key = process.env.BACKEND_API_KEY as string;
+        authorization = null; // Clear the authorization token
+    }
+
+    // Fetch the collection_ids of the user's collections from the collections table in public schema
+    const { data: collectionIds, error: collectionError } = await supabase
+        .from('collections')
+        .select('collection_id')
+        .eq('id', userId);
+
+    if (collectionError) {
+        console.error('Error fetching user collections from database:', collectionError.message);
+        return NextResponse.json({ error: collectionError.message }, { status: 500 });
+    }
+
+    // Convert collectionIds to an array of strings with only the collection_id values
+    const collectionIdsArray = collectionIds.map((collection: any) => collection.collection_id);
+
+    console.log('collectionIdsArray:', collectionIdsArray);
+
+    // Log the request body before sending the POST request
+    console.log('Request Body:', JSON.stringify({ collection_ids: collectionIdsArray }));
+
+    // Delete the user's collection data from vecs schema via POST request to Backend API
+    const deleteVecsResponse = await fetch(`${process.env.DELETE_MULTI_COLLECTION_API}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': authorization,
+            'X-API-Key': api_key,
+        } as any,
+        body: JSON.stringify({ collection_ids: collectionIdsArray }), // Send collection IDs as an array
+    });
+
+    if (!deleteVecsResponse.ok) {
+        console.error('Error deleting', collectionIdsArray, 'from vecs schema:', deleteVecsResponse.statusText);
+        return NextResponse.json({ error: deleteVecsResponse.statusText }, { status: deleteVecsResponse.status });
+    }
+
+    // Delete the user's profile data from users table in next_auth schema (and all related data via cascaded delete for tables in both publicand next_auth schema)
+    const { data: deletedUserData, error: deleteError } = await supabaseAuth
+        .from('users')
+        .delete()
+        .eq('id', userId)
+
+    // TODO: Delete the user's vector collection from the vecs schema
+
+    if (deleteError) {
+        console.error('Error deleting user data from database:', deleteError.message);
+        return NextResponse.json({ error: deleteError.message }, { status: 500 });
+    }
+
+    console.log('deletedUserData:', deletedUserData, 'collectionIds:', collectionIdsArray, 'deleteVecsResponse:', deleteVecsResponse);
+
+    return NextResponse.json({ deletedUserData });
+}

frontend/app/api/public/collections/route.ts

@@ -0,0 +1,26 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+   // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collections id and data from the database where is_public = true
+    const { data: publicCollections, error: pubCollErr } = await supabase
+        .from('collections')
+        .select('collection_id, display_name, description, created_at')
+        .eq('is_public', true);
+
+    if (pubCollErr) {
+        console.error('Error fetching public collection data from database:', pubCollErr.message);
+        return NextResponse.json({ error: pubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('publicCollections:', publicCollections);
+
+    return NextResponse.json({ publicCollections: publicCollections });
+}

frontend/app/api/user/collections-requests/route.ts

@@ -0,0 +1,133 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// GET request to retrieve the user's public collections requests data from the database
+export async function GET(request: NextRequest) {
+    // Retrieve the session token from the request cookies
+    const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
+
+    // Create a new Supabase client
+    const supabaseAuth = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'next_auth' } },
+    );
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the user's ID from the session token
+    const { data: sessionData, error: sessionError } = await supabaseAuth
+        .from('sessions')
+        .select('userId')
+        .eq('sessionToken', session?.value)
+        .single();
+
+    const userId = sessionData?.userId;
+
+    if (sessionError) {
+        console.error('Error fetching session from database:', sessionError.message);
+        return NextResponse.json({ error: sessionError.message }, { status: 500 });
+    }
+
+    // Retrieve the user's collections and public collections requests data via inner join from the database
+    const { data: userPubCollectionsReq, error: userPubCollErr } = await supabase
+        .from('collections')
+        .select('collection_id, display_name, description, is_public, created_at, public_collections_requests (collection_id, is_make_public, is_pending, is_approved, created_at, updated_at)')
+        .eq('id', userId);
+
+    if (userPubCollErr) {
+        console.error('Error fetching user public collections requests data from database:', userPubCollErr.message);
+        return NextResponse.json({ error: userPubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('User Public Collections Requests:', userPubCollectionsReq.map(item => item.public_collections_requests));
+
+    return NextResponse.json({ userPubCollectionsReq: userPubCollectionsReq });
+}
+
+// POST request to insert the user's public collections request data into the database if not exist (Used by user)
+export async function POST(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collection_id from the request body
+    const { collection_id, is_make_public } = await request?.json();
+
+    // Insert the user's public collections request data into the database
+    const { data: newUserPubCollectionsReq, error: newUserPubCollErr } = await supabase
+        .from('public_collections_requests')
+        .insert([{ collection_id, is_make_public }]);
+
+    if (newUserPubCollErr) {
+        console.error('Error inserting user public collections request data into database:', newUserPubCollErr.message);
+        return NextResponse.json({ error: newUserPubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('User Public Collections Requests:', userPubCollectionsReq);
+
+    return NextResponse.json({ newUserPubCollectionsReq });
+}
+
+// PUT request to update the user's public collections request data in the database (Used by user)
+export async function PUT(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collection_id from the request body
+    const { collection_id, is_make_public } = await request?.json();
+
+    // Update the user's public collections request data in the database, set is_pending = true
+    const { data: updatedUserPubCollectionsReq, error: updatedUserPubCollErr } = await supabase
+        .from('public_collections_requests')
+        .update({ is_make_public: is_make_public, is_pending: true, is_approved: false })
+        .eq('collection_id', collection_id);
+
+    if (updatedUserPubCollErr) {
+        console.error('Error updating user public collections request data in database:', updatedUserPubCollErr.message);
+        return NextResponse.json({ error: updatedUserPubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('User Public Collections Requests:', userPubCollectionsReq);
+
+    return NextResponse.json({ updatedUserPubCollectionsReq });
+}
+
+// DELETE request to delete the user's public collections request data from the database
+export async function DELETE(request: NextRequest) {
+    // Create a new Supabase client
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the collection_id from the request body
+    const { collection_id } = await request?.json();
+
+    // Delete the user's public collections request data from the database
+    const { data: deletedUserPubCollectionsReq, error: deletedUserPubCollErr } = await supabase
+        .from('public_collections_requests')
+        .delete()
+        .eq('collection_id', collection_id);
+
+    if (deletedUserPubCollErr) {
+        console.error('Error deleting user public collections request data from database:', deletedUserPubCollErr.message);
+        return NextResponse.json({ error: deletedUserPubCollErr.message }, { status: 500 });
+    }
+
+    // console.log('User Public Collections Requests:', userPubCollectionsReq);
+
+    return NextResponse.json({ deletedUserPubCollectionsReq });
+}

frontend/app/api/user/collections/route.ts

@@ -0,0 +1,183 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from "next/server";
+
+// GET request to retrieve the user's collections data from the database
+export async function GET(request: NextRequest) {
+    const { pathname, origin } = request.nextUrl;
+    const signinPage = new URL('/sign-in', origin);
+    // Retrieve the session token from the request cookies
+    const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
+
+    // Create a new Supabase client
+    const supabaseAuth = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'next_auth' } },
+    );
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the user's ID from the session token
+    const { data: sessionData, error: sessionError } = await supabaseAuth
+        .from('sessions')
+        .select('userId')
+        .eq('sessionToken', session?.value)
+        .single();
+
+    const userId = sessionData?.userId;
+
+    if (sessionError) {
+        console.error('Error fetching session from database:', sessionError.message);
+        return NextResponse.redirect(signinPage.href, { status: 302 });
+    }
+
+    // Retrieve the user's collections id and data from the database
+    const { data: userCollections, error: userCollErr } = await supabase
+        .from('collections')
+        .select('collection_id, display_name, description, created_at')
+        .eq('id', userId);
+
+    if (userCollErr) {
+        console.error('Error fetching user collection data from database:', userCollErr.message);
+        return NextResponse.redirect(signinPage.href, { status: 302 });
+    }
+
+    return NextResponse.json({ userCollections: userCollections });
+}
+
+// POST request to insert the user's collection data into the database
+export async function POST(request: NextRequest) {
+    // Create a new Supabase client
+    const supabaseAuth = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'next_auth' } },
+    );
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the session token from the request cookies
+    const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
+
+    // Retrieve the collection data from the request body
+    const { display_name, description } = await request?.json();
+
+    // Retrieve the user's ID from the session token
+    const { data: sessionData, error: sessionError } = await supabaseAuth
+        .from('sessions')
+        .select('userId')
+        .eq('sessionToken', session?.value)
+        .single();
+
+    const userId = sessionData?.userId;
+
+    if (sessionError) {
+        console.error('Error fetching session from database:', sessionError.message);
+        return NextResponse.json({ error: sessionError.message }, { status: 500 });
+    }
+
+    // Insert the collection data into the database and return the data
+    const { data: insertData, error: insertError } = await supabase
+        .from('collections')
+        .insert([{ id: userId, display_name, description }])
+        .select('collection_id');
+
+    if (insertError) {
+        console.error('Error inserting user collection data into database:', insertError.message);
+        return NextResponse.json({ error: insertError.message }, { status: 500 });
+    }
+
+    console.log('Collection data inserted:', insertData);
+
+    return NextResponse.json({ message: 'Collection data inserted successfully.', collectionId: insertData[0].collection_id });
+}
+
+// DELETE request to delete the user's collection data from the database
+export async function DELETE(request: NextRequest) {
+    // Create a new Supabase client
+    const supabaseAuth = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'next_auth' } },
+    );
+
+    const supabase = createClient(
+        process.env.SUPABASE_URL ?? '',
+        process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+        { db: { schema: 'public' } },
+    );
+
+    // Retrieve the session token from the request cookies
+    const session = request.cookies.get('next-auth.session-token') || request.cookies.get('__Secure-next-auth.session-token');
+
+    // Retrieve the authorization token from the request headers
+    let authorization = request.headers.get('Authorization');
+
+    // Public API key
+    let api_key = null;
+
+    // If no session, use the public API key
+    if (authorization === null || authorization === undefined || authorization.includes('undefined')) {
+        console.log('No authorization token found, using public API key');
+        api_key = process.env.BACKEND_API_KEY as string;
+        authorization = null; // Clear the authorization token
+    }
+
+    // Retrieve the collection_id from the request body
+    const { collection_id } = await request?.json();
+
+    // Retrieve the user's ID from the session token
+    const { data: sessionData, error: sessionError } = await supabaseAuth
+        .from('sessions')
+        .select('userId')
+        .eq('sessionToken', session?.value)
+        .single();
+
+    const userId = sessionData?.userId;
+
+    if (sessionError) {
+        console.error('Error fetching session from database:', sessionError.message);
+        return NextResponse.json({ error: sessionError.message }, { status: 500 });
+    }
+
+    // Delete the vector collection from the vecs schema via POST request to Backend API
+    const deleteVecsResponse = await fetch(`${process.env.DELETE_SINGLE_COLLECTION_API}?collection_id=${collection_id}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': authorization,
+            'X-API-Key': api_key,
+        } as any,
+        body: JSON.stringify({ collection_id: collection_id }),
+    });
+
+    if (!deleteVecsResponse.ok) {
+        console.error('Error deleting', collection_id, 'from vecs schema:', deleteVecsResponse.statusText);
+        return NextResponse.json({ error: deleteVecsResponse.statusText }, { status: deleteVecsResponse.status });
+    }
+
+    
+    // Delete the collection data from the database
+    const { data: deleteData, error: deleteError } = await supabase
+        .from('collections')
+        .delete()
+        .eq('id', userId)
+        .eq('collection_id', collection_id);
+
+    if (deleteError) {
+        console.error('Error deleting', collection_id, ' from database:', deleteError.message);
+        return NextResponse.json({ error: deleteError.message }, { status: 500 });
+    }
+
+    console.log('Delete', collection_id, ':', deleteData, 'deleteVecsResponse:', deleteVecsResponse);
+
+    return NextResponse.json({ message: 'Collection data deleted successfully.' });
+}

frontend/app/components/admin-section.tsx

@@ -0,0 +1,47 @@
+// admin-section.tsx
+"use client";
+
+import { useState } from "react";
+import { AdminMenu, AdminCollectionsRequests, AdminManageCollections, AdminManageUsers } from "@/app/components/ui/admin";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const AdminSection: React.FC = () => {
+  const [showNewRequest, setShowNewRequest] = useState<boolean>(true);
+  const [showUsers, setShowUsers] = useState<boolean>(false);
+  const [showCollections, setShowCollections] = useState<boolean>(false);
+
+  return (
+    <div className="max-w-5xl w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit shadow-xl space-y-4 px-4 pb-4 pt-4">
+      {/* Toast Container */}
+      <ToastContainer />
+
+      {/* Menu Section */}
+      <AdminMenu
+        showUsers={showUsers}
+        setShowUsers={setShowUsers}
+        showNewRequest={showNewRequest}
+        setShowNewRequest={setShowNewRequest}
+        showCollections={showCollections}
+        setShowCollections={setShowCollections}
+      />
+
+      {/* New Requests Section */}
+      {showNewRequest ? (
+        <AdminCollectionsRequests />
+      ) : null}
+
+      {/* Public Collections Section */}
+      {showCollections ? (
+        <AdminManageCollections />
+      ) : null}
+
+      {/* Users Section */}
+      {showUsers ? (
+        <AdminManageUsers />
+      ) : null}
+    </div>
+  );
+};
+
+export default AdminSection;

frontend/app/components/chat-section.tsx

@@ -2,15 +2,16 @@
 
 import { useChat } from "ai/react";
 import { ChatInput, ChatMessages } from "@/app/components/ui/chat";
-import ChatSelection from "./ui/chat/chat-selection";
-import AutofillQuestion from "@/app/components/ui/autofill-prompt/autofill-prompt-dialog";
+import { ChatSelection } from "@/app/components/ui/chat";
+import { AutofillQuestion } from "@/app/components/ui/autofill-prompt";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 
 export default function ChatSection() {
   const { data: session } = useSession();
   const supabaseAccessToken = session?.supabaseAccessToken;
-  const [docSelected, setDocSelected] = useState<string>('');
+  const [collSelectedId, setCollSelectedId] = useState<string>('');
+  const [collSelectedName, setCollSelectedName] = useState<string>('');
   const {
     messages,
     input,
@@ -27,13 +28,13 @@ export default function ChatSection() {
     },
     body: {
       // Add the selected document to the request body
-      document: docSelected,
+      collection_id: collSelectedId,
     },
   });
 
   return (
     <div className="space-y-4 max-w-5xl w-full relative">
-      {docSelected ?
+      {collSelectedId ?
         (
           <>
             <ChatMessages
@@ -43,11 +44,13 @@ export default function ChatSection() {
               stop={stop}
             />
             <AutofillQuestion
-              docSelected={docSelected}
+              collSelectedId={collSelectedId}
+              collSelectedName={collSelectedName}
               messages={messages}
               isLoading={isLoading}
               handleSubmit={handleSubmit}
               handleInputChange={handleInputChange}
+              handleCollIdSelect={setCollSelectedId}
               input={input}
             />
             <ChatInput
@@ -60,8 +63,10 @@ export default function ChatSection() {
         )
         :
         <ChatSelection
-          docSelected={docSelected}
-          handleDocSelect={setDocSelected}
+          collSelectedId={collSelectedId}
+          collSelectedName={collSelectedName}
+          handleCollIdSelect={setCollSelectedId}
+          handleCollNameSelect={setCollSelectedName}
         />
       }
     </div>

frontend/app/components/header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from 'next/image';
-import { Home, InfoIcon, MessageCircle, Search, FileQuestion, Menu, X, User2, LogOut, LogIn } from 'lucide-react';
+import { Home, InfoIcon, MessageCircle, Search, FileQuestion, Menu, X, User2, LogOut, LogIn, SlidersHorizontal } from 'lucide-react';
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { useMedia } from 'react-use';
@@ -12,6 +12,7 @@ import { MobileMenu } from '@/app/components/ui/mobilemenu';
 import { IconSpinner } from '@/app/components/ui/icons';
 import { useSession, signOut } from 'next-auth/react';
 import { usePathname } from 'next/navigation';
+import { Skeleton } from "@nextui-org/react";
 
 const MobileMenuItems = [
   {
@@ -41,6 +42,14 @@ const MobileMenuItems = [
   },
 ];
 
+const AdminMenuItems = [
+  {
+    href: '/admin',
+    icon: <SlidersHorizontal className="mr-2 h-5 w-5" />,
+    label: 'Admin',
+  },
+];
+
 export default function Header() {
   const isLargeScreen = useMedia('(min-width: 1024px)', false);
   const [mounted, setMounted] = useState(false);
@@ -51,6 +60,8 @@ export default function Header() {
   const encodedPath = encodeURIComponent(currentPath);
   // Add callbackUrl params to the signinPage URL
   const signinPage = "/sign-in?callbackUrl=" + encodedPath;
+  // Check if the user is an admin
+  const [isAdmin, setIsAdmin] = useState(false);
 
   // Get user session for conditional rendering of user profile and logout buttons and for fetching the API status
   const { data: session, status } = useSession()
@@ -91,9 +102,22 @@ export default function Header() {
     }
   }
 
+  const checkAdminRole = async () => {
+    const response = await fetch('/api/admin/is-admin');
+    if (!response.ok) {
+      console.error('Failed to fetch admin data');
+      return;
+    }
+    const data = await response.json();
+    setIsAdmin(data.isAdmin);
+    console.log('Admin role fetched successfully! Data:', data);
+  };
+
+  const newMobileMenuItems = isAdmin ? [...MobileMenuItems, ...AdminMenuItems] : MobileMenuItems;
 
   useEffect(() => {
     setMounted(true);
+    checkAdminRole();
   }, [session]);
 
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -183,6 +207,14 @@ export default function Header() {
                 Search
               </div>
             </HeaderNavLink>
+            {isAdmin &&
+              <HeaderNavLink href="/admin" title='Admin'>
+                <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
+                  <SlidersHorizontal className="mr-1 h-4 w-4" />
+                  Admin
+                </div>
+              </HeaderNavLink>
+            }
           </div>
           <div className="flex items-center ml-auto">
             {/* Status Page Button/Indicator */}
@@ -220,48 +252,51 @@ export default function Header() {
               )}
             </button>
 
-            <span className="lg:text-lg font-nunito ml-2 mr-2"> </span>
+            <span className="lg:text-lg font-nunito ml-6"></span>
 
             {/* Conditionally render the user profile and logout buttons based on the user's authentication status */}
-            {status === 'loading' ? (
-              <div className="flex items-center ml-2 mr-2 text-xl transition duration-300 ease-in-out transform hover:scale-125">
-                <IconSpinner className="mr-2 animate-spin" />
-              </div>
-            ) : session ? (
+            {session ? (
               <>
-                {/* User Profile Button */}
-                <HeaderNavLink href="/profile" title='Profile'>
-                  <div className="flex items-center ml-2 mr-2 text-xl transition duration-300 ease-in-out transform hover:scale-125">
-                    <User2 className="mr-1 h-5 w-5" />
+                <Skeleton isLoaded={status === 'authenticated'} className="rounded-md p-1">
+                  <div className="flex items-center">
+                    {/* User Profile Button */}
+                    <HeaderNavLink href="/profile" title='Profile'>
+                      <div className="flex items-center mr-6 text-xl transition duration-300 ease-in-out transform hover:scale-125">
+                        <User2 className="mr-1 h-5 w-5" />
+                      </div>
+                    </HeaderNavLink>
+                    {/* Sign Out Button */}
+                    <button title='Sign Out'
+                      onClick={
+                        async () => {
+                          await signOut();
+                        }
+                      }>
+                      <div className="flex items-center text-xl transition duration-300 ease-in-out transform hover:scale-125">
+                        <LogOut className="mr-1 h-5 w-5" />
+                      </div>
+                    </button>
                   </div>
-                </HeaderNavLink>
-
-                {/* Sign Out Button */}
-                <button title='Sign Out'
-                  onClick={
-                    async () => {
-                      await signOut();
-                    }
-                  }>
-                  <div className="flex items-center ml-2 text-xl transition duration-300 ease-in-out transform hover:scale-125">
-                    <LogOut className="mr-1 h-5 w-5" />
-                  </div>
-                </button>
+                </Skeleton>
               </>
             ) : (
-              <HeaderNavLink href={signinPage} title='Sign In'>
-                <div className="flex items-center ml-2 transition duration-300 ease-in-out transform hover:scale-125">
-                  <LogIn className="mr-1 h-5 w-5" />
-                  Sign In
+              <Skeleton isLoaded={status !== 'loading'} className="rounded-md p-2">
+                <div className="flex items-center">
+                  <HeaderNavLink href={signinPage} title='Sign In'>
+                    <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-110">
+                      <LogIn className="mr-1 h-5 w-5" />
+                      Sign In
+                    </div>
+                  </HeaderNavLink>
                 </div>
-              </HeaderNavLink>
+              </Skeleton>
             )}
           </div>
         </div >
 
         {/* Mobile menu component */}
         < MobileMenu isOpen={isMobileMenuOpen} onClose={() => setMobileMenuOpen(false)
-        } logoSrc={logo} items={MobileMenuItems} />
+        } logoSrc={logo} items={newMobileMenuItems} />
       </nav >
     </div >
   );

frontend/app/components/profile-section.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { Skeleton } from "@nextui-org/react";
+import Image from 'next/image';
+import { User2, SlidersHorizontal, Info, Trash, RefreshCcw } from 'lucide-react';
+import { HeaderNavLink } from '@/app/components/ui/navlink';
+import Swal from 'sweetalert2';
+import { useSession } from 'next-auth/react';
+
+const ProfileSection: React.FC = () => {
+  const [userId, setUserId] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [imageURL, setImageURL] = useState('');
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [initialProfileData, setInitialProfileData] = useState({ name: '', email: '', imageURL: '' });
+  const { data: session, status } = useSession();
+  const supabaseAccessToken = session?.supabaseAccessToken;
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+  };
+
+  const handleImageURLChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setImageURL(event.target.value);
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!isProfileChanged()) {
+      console.log('No changes detected, not submitting the form');
+      return;
+    }
+
+    Swal.fire({
+      title: 'Are you sure?',
+      text: 'Do you want to update your profile data? This action cannot be undone!',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#4caf50',
+      cancelButtonColor: '#b91c1c',
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No',
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        // Update the profile data in the database
+        if (await updateProfileData()) {
+          // Show a success message after updating the profile data
+          Swal.fire({
+            title: 'Profile Updated!',
+            text: 'Your profile data has been updated successfully.',
+            icon: 'success',
+            confirmButtonColor: '#4caf50',
+          });
+        } else {
+          // Show an error message if the profile data update failed
+          Swal.fire({
+            title: 'Error!',
+            text: 'Failed to update your profile data. Please try again later. (Check Console for more details)',
+            icon: 'error',
+            confirmButtonColor: '#4caf50',
+          });
+        }
+      }
+    });
+  };
+
+  const handleDeleteProfile = () => {
+    Swal.fire({
+      title: 'Are you sure?',
+      text: 'Do you want to delete your profile & data? This action cannot be undone, and your data will be deleted forever!',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#4caf50',
+      cancelButtonColor: '#b91c1c',
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No',
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        // Delete the profile data from the database
+        if (await deleteProfileData()) {
+          // Show a success message after deleting the profile data
+          Swal.fire({
+            title: 'Profile Deleted!',
+            text: 'Your profile data has been deleted successfully. You will be redirected to the home page.',
+            icon: 'success',
+            confirmButtonColor: '#4caf50',
+          });
+          // Redirect to the home page after deleting the profile data
+          window.location.href = '/';
+        } else {
+          // Show an error message if the profile data deletion failed
+          Swal.fire({
+            title: 'Error!',
+            text: 'Failed to delete your profile data. Please try again later. (Check Console for more details)',
+            icon: 'error',
+            confirmButtonColor: '#4caf50',
+          });
+        }
+      }
+    });
+  };
+
+  const handleResetProfile = () => {
+    setName(initialProfileData.name);
+    setEmail(initialProfileData.email);
+    setImageURL(initialProfileData.imageURL);
+  }
+
+  const checkAdminRole = async () => {
+    const response = await fetch('/api/admin/is-admin');
+    if (!response.ok) {
+      console.error('Failed to fetch admin data');
+      return;
+    }
+    const data = await response.json();
+    setIsAdmin(data.isAdmin);
+    console.log('Admin role fetched successfully! Data:', data);
+  };
+
+  // Update the profile data in the database, via PUT request
+  const updateProfileData = async () => {
+    const response = await fetch('/api/profile', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        userId: userId,
+        name: name,
+        email: email,
+        image: imageURL,
+      }),
+    });
+    if (!response.ok) {
+      console.error('Failed to update profile data:', response.statusText);
+      return false;
+    }
+    console.log('Profile data updated successfully!');
+    // Update initial profile data to the new data
+    setInitialProfileData({ name, email, imageURL });
+    return true;
+  };
+
+  // Fetch the profile data from the database, via GET request
+  const fetchProfileData = async () => {
+    const response = await fetch('/api/profile');
+    if (!response.ok) {
+      console.error('Failed to fetch profile data');
+      return;
+    }
+    const data = await response.json();
+    const userData = data.userData;
+    setUserId(userData.id);
+    setName(userData.name);
+    setEmail(userData.email);
+    setImageURL(userData.image);
+    setInitialProfileData({ name: userData.name, email: userData.email, imageURL: userData.image });
+    setIsLoaded(true);
+    console.log('Profile data fetched successfully! Data:', userData);
+  };
+
+  // Delete the profile data from the database, via DELETE request
+  const deleteProfileData = async () => {
+    const response = await fetch('/api/profile', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${supabaseAccessToken}`, // Add the Supabase access token in the Authorization header
+      },
+      body: JSON.stringify({
+        userId: userId,
+      }),
+    });
+    if (!response.ok) {
+      console.error('Failed to delete profile data:', response.text);
+      return false;
+    }
+    console.log('Profile data deleted successfully!');
+    Swal.fire({
+      title: 'Profile Deleted!',
+      text: 'Your profile data has been deleted successfully.',
+      icon: 'success',
+      confirmButtonColor: '#4caf50',
+    });
+    return true;
+  };
+
+  useEffect(() => {
+    fetchProfileData();
+    checkAdminRole();
+  }, []);
+
+  const isProfileChanged = () => {
+    return (
+      name !== initialProfileData.name ||
+      email !== initialProfileData.email ||
+      imageURL !== initialProfileData.imageURL
+    );
+  };
+
+  return (
+    <div className="rounded-xl shadow-xl p-4 max-w-5xl w-full bg-white dark:bg-zinc-700/30">
+      <div className="space-y-2 p-4">
+        <div className="flex flex-col w-full justify-center gap-4">
+          <div className="flex justify-between items-center">
+            <div className='flex flex-col'>
+              <h1 className='flex font-bold text-2xl mb-4'>Profile</h1>
+              <Skeleton isLoaded={isLoaded} className='rounded-full w-20'>
+                {imageURL ? <Image className="rounded-full" src={imageURL} alt={name} width={84} height={84} priority={true} /> : <User2 size={84} />}
+              </Skeleton>
+            </div>
+            <div className="flex flex-col gap-4 justify-between">
+              {isAdmin ? (
+                <HeaderNavLink href="/admin" title='Admin Page'>
+                  <button className="flex flex-grow justify-center items-center bg-blue-500 text-white rounded-md px-5 py-3 transition duration-300 ease-in-out transform hover:scale-105">
+                    <SlidersHorizontal className="mr-1 h-5 w-5" />
+                    Admin Page
+                  </button>
+                </HeaderNavLink>
+              ) : null}
+              <button
+                className="flex flex-grow justify-center items-center font-bold bg-red-500 text-white rounded-md px-5 py-3 transition duration-300 ease-in-out transform hover:scale-105"
+                onClick={handleDeleteProfile}
+              >
+                <Trash className="mr-1 h-5 w-5" />
+                Delete Account & Data
+              </button>
+            </div>
+          </div>
+          <form onSubmit={handleSubmit} className='flex flex-col gap-4 max-w-2xl'>
+            <label className="flex flex-col">
+              <span className='mb-2'>Name:</span>
+              <Skeleton isLoaded={isLoaded} className="rounded-lg">
+                <input className='h-10 rounded-lg w-full bg-gray-300 dark:bg-zinc-700/65 border px-2' type="text" value={name} onChange={handleNameChange} />
+              </Skeleton>
+            </label>
+            <label className="flex flex-col">
+              <span className='mb-2'>Email:</span>
+              <Skeleton isLoaded={isLoaded} className="rounded-lg">
+                <input className='h-10 rounded-lg w-full bg-gray-300 dark:bg-zinc-700/65 border px-2' type="email" value={email} onChange={handleEmailChange} />
+              </Skeleton>
+            </label>
+            <label className="flex flex-col">
+              <span className='mb-2'>Image URL:</span>
+              <Skeleton isLoaded={isLoaded} className="rounded-lg">
+                <textarea className='h-14 rounded-lg w-full bg-gray-300 dark:bg-zinc-700/65 border px-2' value={imageURL} onChange={handleImageURLChange} />
+              </Skeleton>
+              <span className='flex items-center text-sm text-gray-500 dark:text-gray-400'>
+                <Info className='h-4 w-4 mr-1' />
+                GoogleUserContent, Imgur, Gravatar URLs allowed.
+              </span>
+            </label>
+            <div className="flex justify-evenly gap-4">
+              <button type="button" onClick={handleResetProfile} className="flex flex-grow justify-center items-center bg-red-500 font-bold text-white rounded-md px-5 py-3 transition duration-300 ease-in-out transform hover:scale-105">
+                <RefreshCcw className="mr-1 h-5 w-5" />
+                Reset
+              </button>
+              <button type="submit" disabled={!isProfileChanged()} className="flex flex-grow justify-center items-center text-l disabled:bg-transparent disabled:border disabled:border-gray-500 disabled:text-gray-500 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105 disabled:hover:scale-100">Save</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSection;

frontend/app/components/query-section.tsx

@@ -3,13 +3,20 @@
 import { useChat } from "ai/react";
 import { ChatInput, ChatMessages } from "@/app/components/ui/chat";
 import { AutofillQuestion } from "./ui/autofill-prompt";
+import { QueryMenu, QuerySelection, QueryDocumentUpload, QueryCollectionManage } from "./ui/query";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function QuerySection() {
     const { data: session } = useSession();
     const supabaseAccessToken = session?.supabaseAccessToken;
-    const [docSelected, setDocSelected] = useState<string>('');
+    const [collSelectedId, setCollSelectedId] = useState<string>('');
+    const [collSelectedName, setCollSelectedName] = useState<string>('');
+    const [showChat, setShowChat] = useState<boolean>(true);
+    const [showUpload, setShowUpload] = useState<boolean>(false);
+    const [showManage, setShowManage] = useState<boolean>(false);
     const {
         messages,
         input,
@@ -19,46 +26,78 @@ export default function QuerySection() {
         reload,
         stop,
     } = useChat({
-        api: process.env.NEXT_PUBLIC_QUERY_API,
+        api: process.env.NEXT_PUBLIC_CHAT_API,
         headers: {
             // Add the access token to the request headers
             'Authorization': `Bearer ${supabaseAccessToken}`,
         },
         body: {
             // Add the selected document to the request body
-            document: docSelected,
+            collection_id: collSelectedId,
         },
     });
 
     return (
-        <div className="space-y-4 max-w-5xl w-full">
-            {/* <ChatMessages
-                messages={messages}
-                isLoading={isLoading}
-                reload={reload}
-                stop={stop}
-            />
-            <AutofillQuestion
-                docSelected="PSSCOC"
-                messages={messages}
-                isLoading={isLoading}
-                handleSubmit={handleSubmit}
-                handleInputChange={handleInputChange}
-                input={input}
+        <div className="max-w-5xl w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit shadow-xl space-y-4 px-4 pb-4">
+            {/* Toast Container */}
+            <ToastContainer />
+
+            {/* Menu Section */}
+            <QueryMenu
+                showUpload={showUpload}
+                setShowUpload={setShowUpload}
+                showChat={showChat}
+                setShowChat={setShowChat}
+                showManage={showManage}
+                setShowManage={setShowManage}
+                setCollSelectedId={setCollSelectedId}
             />
-            <ChatInput
-                input={input}
-                handleSubmit={handleSubmit}
-                handleInputChange={handleInputChange}
-                isLoading={isLoading}
-            /> */}
 
-            {/* Maintenance Page */}
-            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-center" role="alert">
-                <strong className="font-bold">A new feature is coming your way!</strong>
-                <br />
-                <span className="block sm:inline">The Q&A Page is currently undergoing upgrades. Please check back later.</span>
-            </div>
+            {/* Document Selection/Chat Section */}
+            {showChat ?
+                (collSelectedId ?
+                    <>
+                        {/* Chat Section */}
+                        <ChatMessages
+                            messages={messages}
+                            isLoading={isLoading}
+                            reload={reload}
+                            stop={stop}
+                        />
+                        <AutofillQuestion
+                            collSelectedId={collSelectedId}
+                            collSelectedName={collSelectedName}
+                            messages={messages}
+                            isLoading={isLoading}
+                            handleSubmit={handleSubmit}
+                            handleInputChange={handleInputChange}
+                            handleCollIdSelect={setCollSelectedId}
+                            input={input}
+                        />
+                        <ChatInput
+                            input={input}
+                            handleSubmit={handleSubmit}
+                            handleInputChange={handleInputChange}
+                            isLoading={isLoading}
+                        />
+                    </>
+                    :
+                    (
+                        <QuerySelection
+                            collSelectedId={collSelectedId}
+                            collSelectedName={collSelectedName}
+                            handleCollIdSelect={setCollSelectedId}
+                            handleCollNameSelect={setCollSelectedName}
+                        />))
+                : null
+            }
+
+            {/* Document Upload Section */}
+            {showUpload ? <QueryDocumentUpload /> : null}
+
+            {/* Document Manage Section */}
+            {showManage ? <QueryCollectionManage /> : null}
+
         </div>
     );
 }

frontend/app/components/search-section.tsx

@@ -9,7 +9,8 @@ const SearchSection: React.FC = () => {
   const [query, setQuery] = useState("");
   const { searchResults, isLoading, handleSearch } = useSearch();
   const [searchButtonPressed, setSearchButtonPressed] = useState(false);
-  const [docSelected, setDocSelected] = useState<string>('');
+  const [collSelectedId, setCollSelectedId] = useState<string>('');
+  const [collSelectedName, setCollSelectedName] = useState<string>('');
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setQuery(e.target.value);
@@ -19,16 +20,16 @@ const SearchSection: React.FC = () => {
   const handleSearchSubmit = (e: FormEvent) => {
     e.preventDefault();
     setSearchButtonPressed(true);
-    handleSearch(query, docSelected);
+    handleSearch(query, collSelectedId);
   };
 
   return (
     <div className="space-y-4 max-w-5xl w-full">
-      {docSelected ? (
+      {collSelectedId ? (
         <>
-          <h2 className="text-lg text-center font-semibold mb-4">Searching in {docSelected}</h2>
           <SearchInput
-            docSelected={docSelected}
+            collSelectedId={collSelectedId}
+            collSelectedName={collSelectedName}
             query={query}
             isLoading={isLoading}
             results={searchResults}
@@ -36,12 +37,14 @@ const SearchSection: React.FC = () => {
             onSearchSubmit={handleSearchSubmit}
           />
           <AutofillSearchQuery
-            docSelected={docSelected}
+            collSelectedId={collSelectedId}
+            collSelectedName={collSelectedName}
             query={query}
             isLoading={isLoading}
             results={searchResults}
             onInputChange={handleInputChange}
             onSearchSubmit={handleSearchSubmit}
+            handleCollIdSelect={setCollSelectedId}
           />
           <SearchResults
             query={query}
@@ -52,8 +55,10 @@ const SearchSection: React.FC = () => {
         </>
       ) : (
         <SearchSelection
-          docSelected={docSelected}
-          handleDocSelect={setDocSelected}
+          collSelectedId={collSelectedId}
+          collSelectedName={collSelectedName}
+          handleCollIdSelect={setCollSelectedId}
+          handleCollNameSelect={setCollSelectedName}
         />
       )}
     </div>

frontend/app/components/ui/admin/admin-collections-requests.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { Eye, EyeOff, X, Check, RefreshCw } from 'lucide-react';
+import { IconSpinner } from '@/app/components/ui/icons';
+import { toast } from 'react-toastify';
+import Swal from 'sweetalert2';
+
+export default function AdminCollectionsRequests() {
+    const [userRequests, setUserRequests] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [isRefreshed, setIsRefreshed] = useState<boolean>(true); // Track whether the data has been refreshed
+
+    // Fetch userRequest requests from the server
+    const fetchRequests = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/admin/collections-requests',
+                {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Cache-Control': 'no-cache', // Disable cache to get the latest data
+                    },
+                }
+            );
+            if (!response.ok) {
+                console.error('Error fetching userRequest requests:', response.statusText)
+                toast.error('Error fetching userRequest requests:', {
+                    position: "top-right",
+                    closeOnClick: true,
+                });
+                setLoading(false);
+                return false;
+            }
+            const data = await response.json();
+            setUserRequests(data.pubCollectionsReq);
+            console.log('Collection Requests:', data.pubCollectionsReq);
+        } catch (error) {
+            console.error('Error fetching userRequest requests:', error);
+            toast.error('Error fetching userRequest requests:', {
+                position: "top-right",
+                closeOnClick: true,
+            });
+            setLoading(false);
+            return false;
+        }
+        setLoading(false);
+        return true;
+    };
+
+    useEffect(() => {
+        // Fetch userRequest requests from the server
+        fetchRequests();
+    }, []);
+
+    // Handle reject collection request
+    const handleReject = async (collectionId: string) => {
+        // Show confirmation dialog
+        Swal.fire({
+            title: 'Reject Request',
+            text: "Are you sure you want to reject this collection request?",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // if user confirms, send request to server
+                fetch(`/api/admin/collections-requests/reject`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        collection_id: collectionId,
+                    }),
+                }).then(async (response) => {
+                    if (!response.ok) {
+                        console.error('Error rejecting collection request:', response.statusText);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Error rejecting collection request. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                        return;
+                    }
+                    const data = await response.json();
+                    console.log('Collection Request Rejected:', data);
+                    // Show success dialog
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Collection request has been rejected successfully.',
+                        icon: 'success',
+                        confirmButtonColor: '#4caf50',
+                    });
+                    // Remove approved request from the list
+                    setUserRequests(userRequests.filter((userRequest) => userRequest.collection_id !== collectionId));
+                }).catch((error) => {
+                    console.error('Error rejecting collection request:', error);
+                    // Show error dialog
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'Error rejecting collection request. Please try again later. (Check Console for more details)',
+                        icon: 'error',
+                        confirmButtonColor: '#4caf50',
+                    });
+                });
+            }
+        });
+    }
+
+    // Handle approve collection request
+    const handleApprove = async (collectionId: string, is_make_public: boolean) => {
+        // Show confirmation dialog
+        Swal.fire({
+            title: 'Approve Request',
+            text: "Are you sure you want to approve this collection request?",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // if user confirms, send request to server
+                fetch(`/api/admin/collections-requests/approve`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        collection_id: collectionId,
+                        is_make_public: is_make_public,
+                    }),
+                }).then(async (response) => {
+                    if (!response.ok) {
+                        console.error('Error approving collection request:', response.statusText);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Error approving collection request. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                        return;
+                    }
+                    const data = await response.json();
+                    console.log('Collection Request Approved:', data);
+                    // Show success dialog
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Collection request has been approved successfully.',
+                        icon: 'success',
+                        confirmButtonColor: '#4caf50',
+                    });
+                    // Remove approved request from the list
+                    setUserRequests(userRequests.filter((userRequest) => userRequest.collection_id !== collectionId));
+                }).catch((error) => {
+                    console.error('Error approving collection request:', error);
+                    // Show error dialog
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'Error approving collection request. Please try again later. (Check Console for more details)',
+                        icon: 'error',
+                        confirmButtonColor: '#4caf50',
+                    });
+                });
+            }
+        });
+    }
+
+    const handleRefresh = async () => {
+        setIsRefreshed(false);
+        const timer = setInterval(() => {
+            // Timer to simulate a spinner while refreshing data
+            setIsRefreshed(true);
+        }, 1000); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
+        // Display a toast notification
+        if (await fetchRequests()) {
+            toast('Data refreshed successfully!', {
+                type: 'success',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        else {
+            toast('Error refreshing data. Please try again later.', {
+                type: 'error',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        return () => clearInterval(timer); // Cleanup the timer on complete
+    }
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl">
+            <div className="rounded-lg pt-5 pr-5 pl-5 flex h-[50vh] flex-col overflow-y-auto pb-4">
+                <h1 className='text-center font-bold text-xl mb-4'>New Collection Requests</h1>
+                <div className="flex items-center justify-start gap-2 mb-4">
+                    {/* Refresh Data button */}
+                    <button onClick={handleRefresh}
+                        className="flex items-center justify-center hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
+                        title='Refresh Data'
+                    >
+                        {isRefreshed ? <RefreshCw className='w-5 h-5' /> : <RefreshCw className='w-5 h-5 animate-spin' />}
+                    </button>
+                </div>
+                {loading ? (
+                    <IconSpinner className='w-10 h-10 mx-auto my-auto animate-spin' />
+                ) : userRequests.length === 0 ? (
+                    <div className="mx-auto my-auto text-center text-lg text-gray-500 dark:text-gray-400">No New Requests.</div>
+                ) : (
+                    <div className="relative overflow-x-auto rounded-lg">
+                        <table className="w-full text-xl text-left rtl:text-right text-gray-500 dark:text-gray-400 p-4">
+                            <thead className="text-sm text-center text-gray-700 uppercase bg-gray-400 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="px-6 py-3">Display Name</th>
+                                    <th scope="col" className="px-6 py-3">Description</th>
+                                    <th scope="col" className="px-6 py-3">Current Visibility</th>
+                                    <th scope="col" className="px-6 py-3">Requestor Name</th>
+                                    <th scope="col" className="px-6 py-3">Requested Visibility</th>
+                                    <th scope="col" className="px-6 py-3">Requested</th>
+                                    <th scope="col" className="px-6 py-3">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {userRequests.map((userRequest, index) => (
+                                    <tr className="text-sm text-center item-center bg-gray-100 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" key={index}>
+                                        {/* Render table rows */}
+                                        <td className="px-6 py-3">{userRequest.collections.display_name}</td>
+                                        <td className="px-6 py-3">{userRequest.collections.description}</td>
+                                        <td className="px-6 py-3">{userRequest.collections.is_public ? <span className='flex justify-center items-center'><Eye className='w-4 h-4 mr-1' /> Public</span> : <span className='flex justify-center items-center'><EyeOff className='w-4 h-4 mr-1' /> Private</span>}</td>
+                                        <td className="px-6 py-3">{userRequest.collections.users.name}</td>
+                                        <td className="px-6 py-3">{userRequest.is_make_public ? <span className='flex justify-center items-center'><Eye className='w-4 h-4 mr-1' /> Public</span> : <span className='flex justify-center items-center'><EyeOff className='w-4 h-4 mr-1' /> Private</span>}</td>
+                                        <td className="px-6 py-3">{new Date(userRequest.created_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true })}</td>
+                                        <td className="px-6 py-3 w-full flex flex-wrap justify-between gap-2">
+                                            {/* Approved or Reject Status */}
+                                            <button onClick={() => handleApprove(userRequest.collection_id, userRequest.is_make_public)}
+                                                title='Approve'
+                                                className="flex flex-grow justify-center items-center text-sm disabled:bg-gray-500 bg-green-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-green-500/40"
+                                            >
+                                                <span className='flex items-center'>
+                                                    <Check className='w-4 h-4 mr-1' />
+                                                    <span>Approve</span>
+                                                </span>
+                                            </button>
+                                            <button onClick={() => handleReject(userRequest.collection_id)}
+                                                title='Reject'
+                                                className="flex flex-grow justify-center items-center text-sm disabled:bg-gray-500 bg-red-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-red-500/40"
+                                            >
+                                                <span className='flex items-center'>
+                                                    <X className='w-4 h-4 mr-1' />
+                                                    <span>Reject</span>
+                                                </span>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/admin/admin-manage-collections.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { Eye, EyeOff, RefreshCw } from 'lucide-react';
+import { IconSpinner } from '@/app/components/ui/icons';
+import { toast } from 'react-toastify';
+import Swal from 'sweetalert2';
+
+export default function AdminManageCollections() {
+    const [collectionsData, setCollectionsData] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [isRefreshed, setIsRefreshed] = useState<boolean>(true); // Track whether the data has been refreshed
+
+    // Fetch collection requests from the server
+    const fetchCollections = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/admin/collections',
+                {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Cache-Control': 'no-cache', // Disable cache to get the latest data
+                    },
+                }
+            );
+            if (!response.ok) {
+                console.error('Error fetching collections:', response.statusText)
+                toast.error('Error fetching collections:', {
+                    position: "top-right",
+                    closeOnClick: true,
+                });
+                setLoading(false);
+                return false;
+            }
+            const data = await response.json();
+            // Sort the collections by created date in descending order (oldest first)
+            const sortedData = data.collections.sort((a: any, b: any) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+            setCollectionsData(sortedData);
+            console.log('Collections:', sortedData);
+        } catch (error) {
+            console.error('Error fetching collections:', error);
+            toast.error('Error fetching collections:', {
+                position: "top-right",
+                closeOnClick: true,
+            });
+            setLoading(false);
+            return false;
+        }
+        setLoading(false);
+        return true;
+    };
+
+    useEffect(() => {
+        // Fetch collections from the server
+        fetchCollections();
+    }, []);
+
+    // Handle make private a collection
+    const handleMakePrivate = async (collectionId: string) => {
+        // Show confirmation dialog
+        Swal.fire({
+            title: 'Private Request Confirmation',
+            text: "Are you sure you want to make this collection Private?",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // if user confirms, send request to server
+                fetch(`/api/admin/collections-requests/reject`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        collection_id: collectionId,
+                    }),
+                }).then(async (response) => {
+                    if (!response.ok) {
+                        console.error('Error setting collection Private:', response.statusText);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Error setting collection Private. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                        return;
+                    }
+                    const data = await response.json();
+                    console.log('Collection Set to Private Success:', data);
+                    // Show success dialog
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Collection has been set to Private successfully.',
+                        icon: 'success',
+                        confirmButtonColor: '#4caf50',
+                    });
+                    // Refresh the collections data
+                    fetchCollections();
+                }).catch((error) => {
+                    console.error('Error setting collection Private:', error);
+                    // Show error dialog
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'Error setting collection Private. Please try again later. (Check Console for more details)',
+                        icon: 'error',
+                        confirmButtonColor: '#4caf50',
+                    });
+                });
+            }
+        });
+    }
+
+    // Handle make public a collection
+    const handleMakePublic = async (collectionId: string) => {
+        // Show confirmation dialog
+        Swal.fire({
+            title: 'Public Request Confirmation',
+            text: "Are you sure you want to make this collection Public?",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // if user confirms, send request to server
+                fetch(`/api/admin/collections-requests/approve`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        collection_id: collectionId,
+                    }),
+                }).then(async (response) => {
+                    if (!response.ok) {
+                        console.error('Error setting collection Public:', response.statusText);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Error setting collection Public. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                        return;
+                    }
+                    const data = await response.json();
+                    console.log('Collection Set to Public Success:', data);
+                    // Show success dialog
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Collection has been set to Public successfully.',
+                        icon: 'success',
+                        confirmButtonColor: '#4caf50',
+                    });
+                    // Remove approved request from the list
+                    setCollectionsData(collectionsData.filter((collection) => collection.collection_id !== collectionId));
+                }).catch((error) => {
+                    console.error('Error setting collection Public:', error);
+                    // Show error dialog
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'Error setting collection Public. Please try again later. (Check Console for more details)',
+                        icon: 'error',
+                        confirmButtonColor: '#4caf50',
+                    });
+                });
+            }
+        });
+    }
+
+    const handleRefresh = async () => {
+        setIsRefreshed(false);
+        const timer = setInterval(() => {
+            // Timer to simulate a spinner while refreshing data
+            setIsRefreshed(true);
+        }, 1000); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
+        // Display a toast notification
+        if (await fetchCollections()) {
+            toast('Data refreshed successfully!', {
+                type: 'success',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        else {
+            toast('Error refreshing data. Please try again later.', {
+                type: 'error',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        return () => clearInterval(timer); // Cleanup the timer on complete
+    }
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl">
+            <div className="rounded-lg pt-5 pr-5 pl-5 flex h-[50vh] flex-col overflow-y-auto pb-4">
+                <h1 className='text-center font-bold text-xl mb-4'>Manage Collections</h1>
+                <div className="flex items-center justify-start gap-2 mb-4">
+                    {/* Refresh Data button */}
+                    <button onClick={handleRefresh}
+                        className="flex items-center justify-center hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
+                        title='Refresh Data'
+                    >
+                        {isRefreshed ? <RefreshCw className='w-5 h-5' /> : <RefreshCw className='w-5 h-5 animate-spin' />}
+                    </button>
+                </div>
+                {loading ? (
+                    <IconSpinner className='w-10 h-10 mx-auto my-auto animate-spin' />
+                ) : collectionsData.length === 0 ? (
+                    <div className="mx-auto my-auto text-center text-lg text-gray-500 dark:text-gray-400">No Collections Found.</div>
+                ) : (
+                    <div className="relative overflow-x-auto rounded-lg">
+                        <table className="w-full text-xl text-left rtl:text-right text-gray-500 dark:text-gray-400 p-4">
+                            <thead className="text-sm text-center text-gray-700 uppercase bg-gray-400 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="px-6 py-3">Display Name</th>
+                                    <th scope="col" className="px-6 py-3">Description</th>
+                                    <th scope="col" className="px-6 py-3">Current Visibility</th>
+                                    <th scope="col" className="px-6 py-3">Created</th>
+                                    <th scope="col" className="px-6 py-3">Owner</th>
+                                    <th scope="col" className="px-6 py-3">Email</th>
+                                    <th scope="col" className="px-6 py-3">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {collectionsData.map((collection, index) => (
+                                    <tr className="text-sm text-center item-center bg-gray-100 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" key={index}>
+                                        {/* Render table rows */}
+                                        <td className="px-6 py-3">{collection.display_name}</td>
+                                        <td className="px-6 py-3">{collection.description}</td>
+                                        <td className="px-6 py-3">{collection.is_public ? <span className='flex justify-center items-center'><Eye className='w-4 h-4 mr-1' /> Public</span> : <span className='flex justify-center items-center'><EyeOff className='w-4 h-4 mr-1' /> Private</span>}</td>
+                                        <td className="px-6 py-3">{new Date(collection.created_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true })}</td>
+                                        <td className="px-6 py-3">{collection.users.name}</td>
+                                        <td className="px-6 py-3">{collection.users.email}</td>
+                                        <td className="px-6 py-3 w-full">
+                                            <div className="flex justify-center items-center gap-2">
+                                                {/* Set Public or Private Status */}
+                                                {collection.is_public ? (
+                                                    <button onClick={() => handleMakePrivate(collection.collection_id)}
+                                                        title='Set Private'
+                                                        className="flex flex-grow justify-center items-center text-sm bg-blue-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-blue-500/40"
+                                                    >
+                                                        <span className='flex items-center'>
+                                                            <EyeOff className='w-4 h-4 mr-1' />
+                                                            <span>Set Private</span>
+                                                        </span>
+                                                    </button>
+                                                ) : (
+                                                    <button onClick={() => handleMakePublic(collection.collection_id)}
+                                                        title='Set Public'
+                                                        className="flex flex-grow justify-center items-center text-sm bg-blue-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-blue-500/40"
+                                                    >
+                                                        <span className='flex items-center'>
+                                                            <Eye className='w-4 h-4 mr-1' />
+                                                            <span>Set Public</span>
+                                                        </span>
+                                                    </button>
+                                                )}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/admin/admin-manage-users.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { RefreshCw, UserCheck, UserX } from "lucide-react";
+import { IconSpinner } from "@/app/components/ui/icons";
+import Swal from "sweetalert2";
+
+export default function AdminManageUsers() {
+    const [users, setUsers] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [isRefreshed, setIsRefreshed] = useState<boolean>(true); // Track whether the data has been refreshed
+
+    // Fetch the users from the database
+    const fetchUsers = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/admin/users',
+                {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Cache-Control': 'no-cache', // Disable cache to get the latest data
+                    },
+                }
+            );
+            if (!response.ok) {
+                console.error('Error fetching users:', response.statusText)
+                toast.error('Error fetching users:', {
+                    position: "top-right",
+                    closeOnClick: true,
+                });
+                setLoading(false);
+                return false;
+            }
+            const data = await response.json();
+            console.log('Users:', data.users);
+            // Retrieve the necessary data from the response
+            const formattedUsers = data.users.map((user: any) => ({
+                id: user.id,
+                name: user.name,
+                email: user.email,
+                isAdmin: user.admins.length > 0,
+            }));
+            setUsers(formattedUsers);
+        } catch (error) {
+            console.error('Error fetching users:', error);
+            toast.error('Error fetching users:', {
+                position: "top-right",
+                closeOnClick: true,
+            });
+            setLoading(false);
+            return false;
+        }
+        setLoading(false);
+        return true;
+    };
+
+    // On component mount, fetch the users from the database
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    // Handle to promote the user to admin status
+    const handlePromote = async (userId: string) => {
+        // Display a confirmation dialog
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "You are about to promote this user to admin status.",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                try {
+                    const response = await fetch('/api/admin/users/promote', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Cache-Control': 'no-cache', // Disable cache to get the latest data
+                        },
+                        body: JSON.stringify({
+                            id: userId
+                        }),
+                    });
+                    if (!response.ok) {
+                        console.error('Error promoting user:', response.statusText);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Error promoting user. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                        return;
+                    }
+                    // Show success dialog
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'User promoted successfully!',
+                        icon: 'success',
+                        confirmButtonColor: '#4caf50',
+                    });
+                    // Refresh the data
+                    fetchUsers();
+                } catch (error) {
+                    console.error('Error promoting user:', error);
+                    // Show error dialog
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'Error promoting user. Please try again later. (Check Console for more details)',
+                        icon: 'error',
+                        confirmButtonColor: '#4caf50',
+                    });
+                }
+            }
+        });
+    }
+
+    // Handle to demote the user from admin status
+    const handleDemote = async (userId: string) => {
+        // Display a confirmation dialog
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "You are about to demote this user from admin status.",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                try {
+                    const response = await fetch('/api/admin/users/demote', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Cache-Control': 'no-cache', // Disable cache to get the latest data
+                        },
+                        body: JSON.stringify({
+                            id: userId
+                        }),
+                    });
+                    if (!response.ok) {
+                        console.error('Error demoting user:', response.statusText);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Error demoting user. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                        return;
+                    }
+                    // Show success dialog
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'User demoted successfully!',
+                        icon: 'success',
+                        confirmButtonColor: '#4caf50',
+                    });
+                    // Refresh the data
+                    fetchUsers();
+                } catch (error) {
+                    console.error('Error demoting user:', error);
+                    // Show error dialog
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'Error demoting user. Please try again later. (Check Console for more details)',
+                        icon: 'error',
+                        confirmButtonColor: '#4caf50',
+                    });
+                }
+            }
+        });
+    }
+
+    // Handle to refresh the data
+    const handleRefresh = async () => {
+        setIsRefreshed(false);
+        const timer = setInterval(() => {
+            // Timer to simulate a spinner while refreshing data
+            setIsRefreshed(true);
+        }, 1000); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
+        // Display a toast notification
+        if (await fetchUsers()) {
+            toast('Data refreshed successfully!', {
+                type: 'success',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        else {
+            toast('Error refreshing data. Please try again later.', {
+                type: 'error',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        return () => clearInterval(timer); // Cleanup the timer on complete
+    }
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl">
+            <div className="rounded-lg pt-5 pr-5 pl-5 flex h-[50vh] flex-col overflow-y-auto pb-4">
+                <h1 className='text-center font-bold text-xl mb-4'>Manage Users</h1>
+                <div className="flex items-center justify-start gap-2 mb-4">
+                    {/* Refresh Data button */}
+                    <button onClick={handleRefresh}
+                        className="flex items-center justify-center hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
+                        title='Refresh Data'
+                    >
+                        {isRefreshed ? <RefreshCw className='w-5 h-5' /> : <RefreshCw className='w-5 h-5 animate-spin' />}
+                    </button>
+                </div>
+                {loading ? (
+                    <IconSpinner className='w-10 h-10 mx-auto my-auto animate-spin' />
+                ) : users.length === 0 ? (
+                    <div className="mx-auto my-auto text-center text-lg text-gray-500 dark:text-gray-400">No Users Found.</div>
+                ) : (
+                    <div className="relative overflow-x-auto rounded-lg">
+                        <table className="w-full text-xl text-left rtl:text-right text-gray-500 dark:text-gray-400 p-4">
+                            <thead className="text-sm text-center text-gray-700 uppercase bg-gray-400 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="px-6 py-3">Name</th>
+                                    <th scope="col" className="px-6 py-3">Email</th>
+                                    <th scope="col" className="px-6 py-3">Level</th>
+                                    <th scope="col" className="px-6 py-3">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {users.map((user, index) => (
+                                    <tr className="text-sm text-center item-center bg-gray-100 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" key={index}>
+                                        {/* Render table rows */}
+                                        <td className="px-6 py-3">{user.name}</td>
+                                        <td className="px-6 py-3">{user.email}</td>
+                                        <td className="px-6 py-3 font-bold">{user.isAdmin ? "Admin" : "User"}</td>
+                                        <td className="px-6 py-3 w-full flex flex-wrap justify-between gap-2">
+                                            {/* Promote/Demute Admin Status */}
+                                            {user.isAdmin ? (
+                                                <button onClick={() => handleDemote(user.id)}
+                                                    title='Demote User'
+                                                    className="flex flex-grow justify-center items-center text-sm disabled:bg-gray-500 bg-red-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-red-500/40"
+                                                >
+                                                    <span className='flex items-center'>
+                                                        <UserX className='w-4 h-4 mr-1' />
+                                                        <span>Demote</span>
+                                                    </span>
+                                                </button>) : (
+                                                <button onClick={() => handlePromote(user.id)}
+                                                    title='Promote User'
+                                                    className="flex flex-grow justify-center items-center text-sm disabled:bg-gray-500 bg-green-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-green-500/40"
+                                                >
+                                                    <span className='flex items-center'>
+                                                        <UserCheck className='w-4 h-4 mr-1' />
+                                                        <span>Promote</span>
+                                                    </span>
+                                                </button>
+                                            )
+                                            }
+
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/admin/admin-menu.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ListChecks, Users2, LibrarySquare } from 'lucide-react';
+import { AdminMenuHandler } from '@/app/components/ui/admin/admin.interface';
+
+export default function Admin(
+    props: Pick<AdminMenuHandler, "showUsers" | "setShowUsers" | "showNewRequest" | "setShowNewRequest" | "showCollections" | "setShowCollections">,
+) {
+    const handleShowRequestsTab = () => {
+        props.setShowNewRequest(true);
+        props.setShowUsers(false);
+        props.setShowCollections(false);
+    }
+    const handleShowUsersTab = () => {
+        props.setShowUsers(true);
+        props.setShowNewRequest(false);
+        props.setShowCollections(false);
+    }
+
+    const handleShowCollectionsTab = () => {
+        props.setShowCollections(true);
+        props.setShowNewRequest(false);
+        props.setShowUsers(false);
+    }
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit shadow-xl">
+            <div className="flex rounded-lg px-4 py-2 text-center items-center overflow-y-auto">
+                <button
+                    className={`flex text-center items-center text-l ${props.showNewRequest ? 'text-blue-500' : ''} bg-transparent px-4 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105`}
+                    onClick={() => handleShowRequestsTab()}
+                    title='New Requests'
+                >
+                    <ListChecks className="mr-1 h-5 w-5" />
+                    New Requests
+                </button>
+                <button
+                    className={`flex text-center items-center text-l ${props.showCollections ? 'text-blue-500' : ''} bg-transparent px-4 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105`}
+                    onClick={() => handleShowCollectionsTab()}
+                    title='Collections'
+                >
+                    <LibrarySquare className="mr-1 h-5 w-5" />
+                    Collections
+                </button>
+                <button
+                    className={`flex text-center items-center text-l ${props.showUsers ? 'text-blue-500' : ''} bg-transparent px-4 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105`}
+                    onClick={() => handleShowUsersTab()}
+                    title='Users'
+                >
+                    <Users2 className="mr-1 h-5 w-5" />
+                    Users
+                </button>
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/admin/admin.interface.ts

@@ -0,0 +1,8 @@
+export interface AdminMenuHandler {
+  showNewRequest: boolean,
+  setShowNewRequest: (showNewRequest: boolean) => void,
+  showUsers: boolean,
+  setShowUsers: (showUsers: boolean) => void,
+  showCollections: boolean,
+  setShowCollections: (showCollections: boolean) => void,
+}

frontend/app/components/ui/admin/index.ts

@@ -0,0 +1,11 @@
+import AdminMenu from './admin-menu';
+import AdminManageUsers from './admin-manage-users';
+import AdminCollectionsRequests from './admin-collections-requests';
+import AdminManageCollections from './admin-manage-collections';
+
+export {
+    AdminMenu,
+    AdminCollectionsRequests,
+    AdminManageCollections,
+    AdminManageUsers
+};

frontend/app/components/ui/autofill-prompt/autofill-prompt-dialog.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
 import { QuestionsBankProp, psscocQuestionsBank, eirQuestionsBank } from "@/app/components/ui/autofill-prompt/autofill-prompt.interface";
 import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
+import { Undo2 } from "lucide-react";
 
 export default function AutofillQuestion(
   props: Pick<
     ChatHandler,
-    "docSelected" | "messages" | "isLoading" | "handleSubmit" | "handleInputChange" | "input"
+    "collSelectedId" | "collSelectedName" | "messages" | "isLoading" | "handleSubmit" | "handleInputChange" | "input" | "handleCollIdSelect"
   >,
 ) {
   // Keep track of whether to show the overlay
@@ -31,12 +32,16 @@ export default function AutofillQuestion(
   // Randomly select a subset of 3-4 questions
   useEffect(() => {
     // Select the questions bank based on the document set selected
-    if (props.docSelected === "EIR") {
+    if (props.collSelectedName === "EIR") {
       setQuestionsBank(eirQuestionsBank);
     }
-    else {
+    else if (props.collSelectedName === "PSSCOC") {
       setQuestionsBank(psscocQuestionsBank);
     }
+    else {
+      // Do nothing and return
+      return;
+    }
     // Shuffle the questionsBank array
     const shuffledQuestions = shuffleArray(questionsBank);
     // Get a random subset of 3-4 questions
@@ -46,7 +51,7 @@ export default function AutofillQuestion(
     setTimeout(() => {
       setRandomQuestions(selectedQuestions);
     }, 300);
-  }, [questionsBank, props.docSelected]);
+  }, [questionsBank, props.collSelectedName]);
 
 
   // Hide overlay when there are messages
@@ -59,34 +64,34 @@ export default function AutofillQuestion(
     }
   }, [props.messages, props.input]);
 
-  // Automatically advance to the next question after a delay
-  useEffect(() => {
-    const timer = setInterval(() => {
-      if (currentQuestionIndex < randomQuestions.length - 1) {
-        setCurrentQuestionIndex((prevIndex) => prevIndex + 1);
-      }
-      else {
-        clearInterval(timer); // Stop the timer when all questions have been displayed
-      }
-    }, 100); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
-
-    return () => clearInterval(timer); // Cleanup the timer on component unmount
-  }, [currentQuestionIndex, randomQuestions]);
-
   // Handle autofill questions click
   const handleAutofillQuestionClick = (questionInput: string) => {
     props.handleInputChange({ target: { name: "message", value: questionInput } } as React.ChangeEvent<HTMLInputElement>);
   };
 
+  // Handle back button click
+  const handleBackButtonClick = () => {
+    props.handleCollIdSelect("");
+  };
+
   return (
     <>
       {showOverlay && (
         <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0">
-          <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col divide-y overflow-y-auto pb-4">
-            <h2 className="text-lg text-center font-semibold mb-4">How can I help you with {props.docSelected} today?</h2>
-            {randomQuestions.map((question, index) => (
-              <ul>
-                <li key={index} className={`p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer ${index <= currentQuestionIndex ? 'opacity-100 duration-500' : 'opacity-0'}`}>
+          <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col overflow-y-auto pb-4">
+            <div className="flex items-center justify-center mb-4 gap-2">
+              <h2 className="text-lg text-center font-semibold">How can I help you with {props.collSelectedName} today?</h2>
+              <button
+                title="Go Back"
+                onClick={handleBackButtonClick}
+                className="hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
+              >
+                <Undo2 className="w-6 h-6" />
+              </button>
+            </div>
+            <ul>
+              {randomQuestions.map((question, index) => (
+                <li key={index} className="p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer">
                   <button
                     className="text-blue-500 w-full text-left"
                     onClick={() => handleAutofillQuestionClick(question.title)}
@@ -94,8 +99,8 @@ export default function AutofillQuestion(
                     {question.title}
                   </button>
                 </li>
-              </ul>
-            ))}
+              ))}
+            </ul>
           </div>
         </div>
       )}

frontend/app/components/ui/autofill-prompt/autofill-search-prompt-dialog.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
 import { QuestionsBankProp, psscocQuestionsBank, eirQuestionsBank } from "@/app/components/ui/autofill-prompt/autofill-prompt.interface";
 import { SearchHandler } from "@/app/components/ui/search/search.interface";
+import { Undo2 } from "lucide-react";
 
 export default function AutofillSearchQuery(
   props: Pick<
     SearchHandler,
-    "docSelected" | "query" | "isLoading" | "onSearchSubmit" | "onInputChange" | "results" | "searchButtonPressed"
+    "collSelectedId" | "collSelectedName" | "query" | "isLoading" | "onSearchSubmit" | "onInputChange" | "results" | "searchButtonPressed" | "handleCollIdSelect"
   >,
 ) {
   // Keep track of whether to show the overlay
@@ -31,12 +32,16 @@ export default function AutofillSearchQuery(
   // Randomly select a subset of 3-4 questions
   useEffect(() => {
     // Select the questions bank based on the document set selected
-    if (props.docSelected === "EIR") {
+    if (props.collSelectedName === "EIR") {
       setQuestionsBank(eirQuestionsBank);
     }
-    else {
+    else if (props.collSelectedName === "PSSCOC") {
       setQuestionsBank(psscocQuestionsBank);
     }
+    else {
+      // Do nothing and return
+      return;
+    }
     // Shuffle the questionsBank array
     const shuffledQuestions = shuffleArray(questionsBank);
     // Get a random subset of 3-4 questions
@@ -46,7 +51,7 @@ export default function AutofillSearchQuery(
     setTimeout(() => {
       setRandomQuestions(selectedQuestions);
     }, 300);
-  }, [questionsBank, props.docSelected]);
+  }, [questionsBank, props.collSelectedName]);
 
 
   // Hide overlay when there are query
@@ -59,20 +64,6 @@ export default function AutofillSearchQuery(
     }
   }, [props.results, props.query]);
 
-  // Automatically advance to the next question after a delay
-  useEffect(() => {
-    const timer = setInterval(() => {
-      if (currentQuestionIndex < randomQuestions.length - 1) {
-        setCurrentQuestionIndex((prevIndex) => prevIndex + 1);
-      }
-      else {
-        clearInterval(timer); // Stop the timer when all questions have been displayed
-      }
-    }, 100); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
-
-    return () => clearInterval(timer); // Cleanup the timer on component unmount
-  }, [currentQuestionIndex, randomQuestions]);
-
   // Handle autofill questions click
   const handleAutofillQuestionClick = (questionInput: string) => {
     if (props.onInputChange) {
@@ -80,16 +71,29 @@ export default function AutofillSearchQuery(
     }
   };
 
+    // Handle back button click
+    const handleBackButtonClick = () => {
+      props.handleCollIdSelect("");
+    };
+
   return (
     <>
       {showOverlay && (
         <div className="relative mx-auto">
-          <div className="rounded-lg pt-5 pr-10 pl-10 flex flex-col divide-y overflow-y-auto pb-4 bg-white dark:bg-zinc-700/30 shadow-xl">
-            <h2 className="text-lg text-center font-semibold mb-4">How can I help with {props.docSelected} today?</h2>
-            {/* {dialogMessage && <p className="text-center text-sm text-gray-500 mb-4">{dialogMessage}</p>} */}
-            {randomQuestions.map((question, index) => (
-              <ul>
-                <li key={index} className={`p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer ${index <= currentQuestionIndex ? 'opacity-100 duration-500' : 'opacity-0'}`}>
+          <div className="rounded-lg pt-5 pr-10 pl-10 flex flex-col overflow-y-auto pb-4 bg-white dark:bg-zinc-700/30 shadow-xl">
+          <div className="flex items-center justify-center mb-4 gap-2">
+              <h2 className="text-lg text-center font-semibold">How can I help you with {props.collSelectedName} today?</h2>
+              <button
+                title="Go Back"
+                onClick={handleBackButtonClick}
+                className="hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
+              >
+                <Undo2 className="w-6 h-6" />
+              </button>
+            </div>
+            <ul>
+              {randomQuestions.map((question, index) => (
+                <li key={index} className="p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer">
                   <button
                     className="text-blue-500 w-full text-left"
                     onClick={() => handleAutofillQuestionClick(question.title)}
@@ -97,8 +101,8 @@ export default function AutofillSearchQuery(
                     {question.title}
                   </button>
                 </li>
-              </ul>
-            ))}
+              ))}
+            </ul>
           </div>
         </div>
       )}

frontend/app/components/ui/chat/chat-selection.tsx

@@ -2,53 +2,67 @@
 
 import { useState, useEffect } from 'react';
 import { ChatHandler } from '@/app/components/ui/chat';
-
-const DocumentSet = [
-    'PSSCOC',
-    'EIR',
-    // Add More Document Set as needed
-];
+import { IconSpinner } from '@/app/components/ui/icons';
 
 export default function ChatSelection(
-    props: Pick<ChatHandler, "docSelected" | "handleDocSelect">,
+    props: Pick<ChatHandler, "collSelectedId" | "collSelectedName" | "handleCollIdSelect" | "handleCollNameSelect">,
 ) {
-    const [currentDocumentIndex, setCurrentDocumentIndex] = useState(0);
+    const [publicCollections, setPublicCollections] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true); // Loading state
 
-    const handleDocumentSetChange = (documentSet: string) => {
-        props.handleDocSelect(documentSet);
+    const handleCollectionSelect = (collectionId: string, displayName: string) => {
+        props.handleCollIdSelect(collectionId);
+        props.handleCollNameSelect(displayName);
     };
 
-    // Automatically advance to the next document set after a delay
+    // Retrieve the public collection sets from the database
+    const getPublicCollections = async () => {
+        setIsLoading(true); // Set loading state to true
+        // Fetch the public collection sets from the API
+        const response = await fetch('/api/public/collections', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Cache-Control': 'no-cache', // Disable caching
+            },
+        });
+
+        if (!response.ok) {
+            console.error("Error fetching public collections:", response.statusText);
+            return;
+        }
+
+        const data = await response.json();
+        // Sort the collections by created date in descending order (oldest first)
+        const sortedPublicCollections = data.publicCollections.sort((a: any, b: any) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+        setPublicCollections(sortedPublicCollections);
+        setIsLoading(false); // Set loading state to false
+    }
+
+    // On component mount, retrieve the public collection sets from the database
     useEffect(() => {
-        const timer = setInterval(() => {
-            if (currentDocumentIndex < DocumentSet.length - 1) {
-                setCurrentDocumentIndex((prevIndex) => prevIndex + 1);
-            }
-            else {
-                clearInterval(timer); // Stop the timer when all document set have been displayed
-            }
-        }, 100); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
-
-        return () => clearInterval(timer); // Cleanup the timer on component unmount
-    }, [currentDocumentIndex, DocumentSet]);
+        getPublicCollections();
+    }, []);
+
+    // console.log('publicCollections:', publicCollections);
 
     return (
         <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0">
-            <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col divide-y overflow-y-auto pb-4">
+            <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col overflow-y-auto pb-4">
                 <h2 className="text-lg text-center font-semibold mb-4">Select Document Set to Chat with:</h2>
-                {/* <p className="text-center text-sm text-gray-500 mb-4">{dialogMessage}</p> */}
-                {DocumentSet.map((title, index) => (
-                    <ul>
-                        <li key={index} className={`p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer ${index <= currentDocumentIndex ? 'opacity-100 duration-500' : 'opacity-0'}`}>
-                            <button
-                                className="text-blue-500 w-full text-left"
-                                onClick={() => handleDocumentSetChange(title)}
-                            >
-                                {title}
-                            </button>
-                        </li>
-                    </ul>
-                ))}
+                {isLoading ? (
+                    <IconSpinner className='w-10 h-10 mx-auto my-auto animate-spin' />
+                ) : publicCollections.length === 0 ? (<div className="mx-auto my-auto text-center text-lg text-gray-500 dark:text-gray-400">No collections found.</div>)
+                    : publicCollections.map((collection, index) => (
+                        <ul key={index}>
+                            <li className="p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer">
+                                <button className="text-blue-500 w-full text-left" onClick={() => handleCollectionSelect(collection.collection_id, collection.display_name)}>
+                                    <div>{collection.display_name}</div>
+                                    <div className="text-sm text-gray-500">{collection.description}</div>
+                                </button>
+                            </li>
+                        </ul>
+                    ))}
             </div>
         </div>
     );

frontend/app/components/ui/chat/chat.interface.ts

@@ -5,8 +5,10 @@ export interface Message {
 }
 
 export interface ChatHandler {
-  docSelected: string;
-  handleDocSelect: (doc: string) => void;
+  collSelectedId: string;
+  collSelectedName: string;
+  handleCollIdSelect: (collection_id: string) => void;
+  handleCollNameSelect: (display_name: string) => void;
   messages: Message[];
   input: string;
   isLoading: boolean;

frontend/app/components/ui/chat/use-copy-to-clipboard.tsx

@@ -23,7 +23,8 @@ export function useCopyToClipboard({
 
     const showToastMessage = () => {
       toast.success("Message copied to clipboard!", {
-        position: "top-center",
+        position: "top-right",
+        closeOnClick: true,
       });
     };
 

frontend/app/components/ui/query/index.ts

@@ -0,0 +1,6 @@
+import QuerySelection from "./query-selection";
+import QueryDocumentUpload from "./query-document-upload";
+import QueryMenu from "./query-menu";
+import QueryCollectionManage from "./query-manage";
+
+export { QueryMenu, QuerySelection, QueryDocumentUpload, QueryCollectionManage };

frontend/app/components/ui/query/query-document-upload.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { useState, useRef } from 'react';
+import { toast } from 'react-toastify';
+import Swal from 'sweetalert2';
+import { AlertTriangle } from "lucide-react";
+import { IconSpinner } from '@/app/components/ui/icons';
+import { useSession } from "next-auth/react";
+
+export default function QueryDocumentUpload() {
+    const [files, setFiles] = useState<File[]>([]);
+    const [displayName, setDisplayName] = useState('');
+    const [description, setDescription] = useState('');
+    const [displayNameError, setDisplayNameError] = useState(false);
+    const [descriptionError, setDescriptionError] = useState(false);
+    const [fileError, setFileError] = useState(false);
+    const [fileErrorMsg, setFileErrorMsg] = useState('');
+    const [isLoading, setisLoading] = useState(false);
+    const indexerApi = process.env.NEXT_PUBLIC_INDEXER_API;
+    const { data: session } = useSession();
+    const supabaseAccessToken = session?.supabaseAccessToken;
+
+    const MAX_FILES = 10; // Maximum number of files allowed
+    const MAX_TOTAL_SIZE = 15 * 1024 * 1024; // Maximum total size allowed (15 MB in bytes)
+    // The total size of all selected files should not exceed this value
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFiles = event.target.files;
+        if (selectedFiles) {
+            const fileList = Array.from(selectedFiles);
+
+            // Check if the total number of files exceeds the maximum allowed
+            if (fileList.length > MAX_FILES) {
+                // Show toast notification
+                toast.error(`You can only upload a maximum of ${MAX_FILES} files.`, {
+                    position: "top-right",
+                    autoClose: 5000,
+                    hideProgressBar: false,
+                    closeOnClick: true,
+                    pauseOnHover: true,
+                });
+                setFileError(true);
+                setFileErrorMsg(`You can only upload a maximum of ${MAX_FILES} files.`);
+                return;
+            }
+
+            // Calculate the total size of selected files
+            const totalSize = fileList.reduce((acc, file) => acc + file.size, 0);
+
+            // Check if the total size exceeds the maximum allowed
+            if (totalSize > MAX_TOTAL_SIZE) {
+                // Show toast notification
+                toast.error(`Total size of selected files exceeds the maximum allowed (${MAX_TOTAL_SIZE} bytes).`, {
+                    position: "top-right",
+                });
+                setFileError(true);
+                setFileErrorMsg(`Total size of selected files exceeds the maximum allowed (${MAX_TOTAL_SIZE} bytes).`);
+                return;
+            }
+
+            // Check if the file types are allowed
+            const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/plain'];
+            const invalidFiles = fileList.filter(file => !allowedTypes.includes(file.type));
+            if (invalidFiles.length) {
+                // Show toast notification
+                toast.error(`Invalid file type(s) selected!`, {
+                    position: "top-right",
+                });
+                setFileError(true);
+                setFileErrorMsg(`Invalid file type(s) selected!`);
+                return;
+            }
+
+            // Update the state with the selected files
+            setFiles(fileList);
+        }
+    };
+
+    const handleDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setDescription(event.target.value);
+        setDescriptionError(false);
+    };
+
+    const handleDisplayNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setDisplayName(event.target.value);
+        setDisplayNameError(false);
+    };
+
+    const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        // Perform validation and submit logic here
+        console.log("Display Name:", displayName);
+        console.log("Description:", description);
+        console.log("Files:", files);
+        // Ensure that the required fields are not empty
+        if (!displayName.trim()) {
+            setDisplayNameError(true);
+            console.log("Display Name is required!");
+        }
+        if (!description.trim()) {
+            setDescriptionError(true);
+            console.log("Description is required!");
+        }
+        if (!files.length) {
+            setFileError(true);
+            setFileErrorMsg("Please select a file to upload!");
+            console.log("Please select a file to upload!");
+        }
+        if (!displayName.trim() || !description.trim() || !files.length) {
+            // Show toast notification
+            toast.error("Please fill in all required fields!", {
+                position: "top-right",
+                closeOnClick: true,
+            });
+        }
+        else {
+            setisLoading(true);
+            // Show confirmation dialog
+            Swal.fire({
+                title: 'Are you sure?',
+                text: "You are about to upload and index your documents. Ensure that there are no sensitive/secret documents! Do you want to proceed?",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#4caf50',
+                cancelButtonColor: '#b91c1c',
+                confirmButtonText: 'Yes',
+                cancelButtonText: 'No',
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    // Perform the upload and indexing logic
+                    console.log("Uploading and indexing documents...");
+                    // Make a POST request to the API with the form data to save to the database
+                    fetch('/api/user/collections', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            display_name: displayName,
+                            description: description,
+                        }),
+                    })
+                        .then(async response => {
+                            if (response.ok) {
+                                // Get the response data
+                                const data = await response.json();
+                                console.log('Insert New Collection Results:', data);
+                                // Show success dialog
+                                Swal.fire({
+                                    title: 'Success!',
+                                    text: 'Documents uploaded successfully! The documents will be indexed shortly. Do not leave this page until the indexing is completed!',
+                                    icon: 'success',
+                                    confirmButtonColor: '#4caf50',
+                                });
+                                // Show toast loading notification
+                                const toastId = toast.loading('Uploading and Indexing Documents...');
+                                // Create a new FormData object
+                                const formData = new FormData();
+                                // Append the collection_id to the FormData object
+                                formData.append('collection_id', data.collectionId);
+                                // Append each file to the FormData object
+                                files.forEach((file, index) => {
+                                    formData.append('files', file);
+                                });
+                                // Make a POST request to the Backend Indexer API with the files data to upload and index
+                                fetch(`${indexerApi}`, {
+                                    method: 'POST',
+                                    headers: {
+                                        // Add the access token to the request headers
+                                        'Authorization': `Bearer ${supabaseAccessToken}`,
+                                    },
+                                    body: formData,
+                                })
+                                    .then(async response => {
+                                        if (response.ok) {
+                                            // Get the response data
+                                            const data = await response.json();
+                                            console.log('Indexer Results:', data);
+                                            setisLoading(false);
+                                            // Update toast notification
+                                            toast.update(toastId, {
+                                                render: 'Documents uploaded and indexed successfully! 🎉',
+                                                type: 'success',
+                                                className: 'rotateY animated',
+                                                autoClose: 5000,
+                                                closeButton: true,
+                                                isLoading: false
+                                            });
+                                            // Reset the form fields
+                                            setDisplayName('');
+                                            setDescription('');
+                                            setFiles([]);
+                                        } else {
+                                            const data = await response.json();
+                                            // Log to console
+                                            console.error('Error uploading and indexing documents:', data.error);
+                                            setisLoading(false);
+                                            // Update toast notification
+                                            toast.update(toastId, {
+                                                render: 'Failed to upload and index documents! 😢 (Check Console for details)',
+                                                type: 'error',
+                                                className: 'rotateY animated',
+                                                autoClose: 5000,
+                                                closeButton: true,
+                                                isLoading: false
+                                            });
+                                        }
+                                    })
+                                    .catch(error => {
+                                        console.error('Error uploading and indexing documents:', error);
+                                        setisLoading(false);
+                                        // Update toast notification
+                                        toast.update(toastId, {
+                                            render: 'Failed to upload and index documents! 😢 (Check Console for details)',
+                                            type: 'error',
+                                            className: 'rotateY animated',
+                                            autoClose: 5000,
+                                            closeButton: true,
+                                            isLoading: false
+                                        });
+                                    });
+                            } else {
+                                const data = await response.json();
+                                // Log to console
+                                console.error('Error uploading and indexing documents:', data.error);
+                                // Show error dialog
+                                Swal.fire({
+                                    title: 'Error!',
+                                    text: 'Failed to upload and index documents. Please try again later. (Check Console for more details)',
+                                    icon: 'error',
+                                    confirmButtonColor: '#4caf50',
+                                });
+                                setisLoading(false);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error uploading and indexing documents:', error);
+                            // Show error dialog
+                            Swal.fire({
+                                title: 'Error!',
+                                text: 'Failed to upload and index documents. Please try again later. (Check Console for more details)',
+                                icon: 'error',
+                                confirmButtonColor: '#4caf50',
+                            });
+                            setisLoading(false);
+                        });
+                }
+                else {
+                    setisLoading(false);
+                }
+            });
+        }
+    };
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl">
+            <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col divide-y overflow-y-auto">
+                <form onSubmit={handleSubmit} className="flex flex-col w-full justify-center gap-4">
+                    <h2 className="text-lg text-center font-semibold mb-4">Upload & Index Your Own Document Set:</h2>
+                    {/* Warning Banner */}
+                    <div className="flex flex-col bg-red-100 border border-orange-400 text-orange-600 px-4 py-3 rounded text-center items-center" role="alert">
+                        <AlertTriangle />
+                        <div className="flex text-center items-center font-bold">
+                            WARNING
+                        </div>
+                        <div className="flex">Smart Retrieval is still in the demo stage, avoid uploading sensitive/secret documents.</div>
+                    </div>
+                    <div className={`flex flex-col ${displayNameError ? 'has-error' : ''}`}>
+                        <label htmlFor="displayName" title='Display Name' className='mb-2'>Display Name:</label>
+                        <input
+                            type="text"
+                            id="displayName"
+                            title='Display Name'
+                            value={displayName}
+                            onChange={handleDisplayNameChange}
+                            className={`h-10 rounded-lg w-full border px-2 bg-gray-300 dark:bg-zinc-700/65 ${displayNameError ? 'border-red-500 ' : ''}`}
+                        />
+                        {displayNameError && <p className="text-red-500 text-sm pl-1 pt-1">Display Name is required!</p>}
+                    </div>
+                    <div className={`flex flex-col ${descriptionError ? 'has-error' : ''}`}>
+                        <label htmlFor="collectionName" title='Description' className='mb-2'>Description:</label>
+                        <input
+                            type="text"
+                            id="description"
+                            title='Description'
+                            value={description}
+                            onChange={handleDescriptionChange}
+                            className={`h-10 rounded-lg w-full border px-2 bg-gray-300 dark:bg-zinc-700/65 ${descriptionError ? 'border-red-500' : ''}`}
+                        />
+                        {descriptionError && <p className="text-red-500 text-sm pl-1 pt-1">Description is required!</p>}
+                    </div>
+                    <div className='flex flex-col'>
+                        <label htmlFor="fileUpload" title='Select Files' className='mb-2'>Select Files:</label>
+                        <input
+                            type="file"
+                            id="fileUpload"
+                            title='Select Files'
+                            multiple
+                            accept=".pdf,.doc,.docx,.xls,xlsx,.txt"
+                            onChange={handleFileChange}
+                            className={`h-12 rounded-lg w-full bg-gray-300 dark:bg-zinc-700/65 border px-2 py-2 ${fileError ? 'border-red-500' : ''}`}
+                        />
+                        {fileError && <p className="text-red-500 text-sm pl-1 pt-1">{fileErrorMsg}</p>}
+                    </div>
+                    <div className="flex flex-col gap-4">
+                        <button
+                            disabled={isLoading}
+                            type="submit"
+                            title='Submit'
+                            className="text-center items-center text-l disabled:bg-orange-400 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105 disabled:hover:scale-100">
+                            {isLoading ? <IconSpinner className="animate-spin h-5 w-5 mx-auto" /> : "Submit"}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/query/query-manage.tsx

@@ -0,0 +1,575 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { List, Table, Trash, Eye, EyeOff, RefreshCw } from 'lucide-react';
+import Swal from 'sweetalert2';
+import { toast } from 'react-toastify';
+import { IconSpinner } from '@/app/components/ui/icons';
+import { useSession } from 'next-auth/react';
+
+export default function QueryCollectionManage() {
+    const [userCollections, setUserCollections] = useState<any[]>([]);
+    const [tableView, setTableView] = useState<boolean>(false); // Track whether to show the table view
+    const [isRefreshed, setIsRefreshed] = useState<boolean>(true); // Track whether the data has been refreshed
+    const [isLoading, setIsLoading] = useState<boolean>(true); // Track whether the data is loading
+    const { data: session, status } = useSession();
+    const supabaseAccessToken = session?.supabaseAccessToken;
+
+    // Retrieve the user's collections and public collections requests data from the database
+    const getUserCollectionsandRequests = async () => {
+        setIsLoading(true);
+        // Fetch the user's public collection requests from the API
+        fetch('/api/user/collections-requests'
+            , {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Cache-Control': 'no-cache', // Disable caching
+                },
+            }
+        )
+            .then((response) => response.json())
+            .then((data) => {
+                const publicCollectionsRequests = data.userPubCollectionsReq;
+                // console.log('Public Collections Requests:', publicCollectionsRequests);
+                // Sort the collections by created date in descending order (oldest first)
+                publicCollectionsRequests.sort((a: any, b: any) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+                // Extract the collection data from the public collections requests
+                const updatedCollections = publicCollectionsRequests.map((collection: any) => {
+                    // Check if the collection has any public collection requests
+                    if (collection.public_collections_requests.length === 0) {
+                        // If not, return the collection data with no other details
+                        return {
+                            collection_id: collection.collection_id,
+                            display_name: collection.display_name,
+                            description: collection.description,
+                            isPublic: collection.is_public,
+                            // Convert the date to a readable format in the user's locale and timezone e.g. "2022-01-01T12:00:00" => "1 Jan, 2022, 12:00:00 PM"
+                            created_at: new Date(collection.created_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }),
+                        };
+                    }
+                    else {
+                        // If the collection has public collection requests, return the collection data with the request status and dates
+                        return {
+                            collection_id: collection.collection_id,
+                            display_name: collection.display_name,
+                            description: collection.description,
+                            created_at: new Date(collection.created_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }),
+                            isPublic: collection.is_public,
+                            requestType: collection.public_collections_requests[0].is_make_public ? 'Public' : 'Private',
+                            requestStatus: collection.public_collections_requests[0].is_pending ? '⏳Pending' : collection.public_collections_requests[0].is_approved ? '✅Approved' : '❌Rejected',
+                            requestDate: new Date(collection.public_collections_requests[0].created_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }),
+                            updatedRequestDate: new Date(collection.public_collections_requests[0].updated_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }),
+                        };
+                    }
+                });
+                // Update the userCollections state with the fetched data
+                setUserCollections(updatedCollections);
+                setIsLoading(false);
+            })
+            .catch((error) => {
+                console.error("Error fetching user public collection requests:", error);
+                setIsLoading(false);
+                return false;
+            });
+        return true;
+    }
+
+
+    // Fetch the user's collections and public collections requests data from the database on component mount
+    useEffect(() => {
+        getUserCollectionsandRequests();
+    }, []);
+
+    // Function to toggle between list and table views
+    const toggleView = () => {
+        setTableView((prevValue) => !prevValue);
+    };
+
+    // Function to handle requesting to be public or private
+    const handleRequest = (collectionId: string, isPublic: boolean) => {
+        // Implement request logic here
+        console.log(`Requesting to set ${isPublic ? 'be Public' : 'be Private'} for collection with ID: ${collectionId}`);
+        // Display a confirmation dialog
+        Swal.fire({
+            title: 'Request Confirmation',
+            text: `Are you sure you want to request to ${isPublic ? 'make this collection Public (available to other users in "Chat/Search")' : 'make this collection Private (remove from "Chat/Search")'}?`,
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Check if there is an existing request for the collection
+                const existingRequest = userCollections.find((collection) => collection.collection_id === collectionId)?.requestStatus;
+                const existingRequestType = userCollections.find((collection) => collection.collection_id === collectionId)?.requestType;
+                // If an existing request is found, Make a POST request to the API & display a confirmation dialog
+                if (existingRequest) {
+                    // Display a confirmation dialog if there is an existing request
+                    Swal.fire({
+                        title: 'Existing Request Found',
+                        text: `Existing Request with Status: ${existingRequest} for Type: ${existingRequestType}. Do you want to proceed with this new request?`,
+                        icon: 'question',
+                        showCancelButton: true,
+                        confirmButtonText: 'Yes',
+                        cancelButtonText: 'No',
+                        confirmButtonColor: '#4caf50',
+                        cancelButtonColor: '#b91c1c',
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            // If confirm, make a put request to the API & display a success/error message
+                            fetch('/api/user/collections-requests',
+                                {
+                                    method: 'PUT',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                        'Cache-Control': 'no-cache', // Disable caching
+                                    },
+                                    body: JSON.stringify({ collection_id: collectionId, is_make_public: isPublic }),
+                                }
+                            )
+                                .then(async response => {
+                                    if (response.ok) {
+                                        // Show success dialog
+                                        console.log('Request sent successfully:', response.statusText);
+                                        Swal.fire({
+                                            title: 'Request Sent',
+                                            text: `Your request to ${isPublic ? 'make this collection Public' : 'make this collection Private'} has been sent successfully.`,
+                                            icon: 'success',
+                                            confirmButtonText: 'OK',
+                                            confirmButtonColor: '#4caf50',
+                                        });
+                                        // Refresh the userCollections state after the request is sent
+                                        getUserCollectionsandRequests();
+                                    } else {
+                                        const data = await response.json();
+                                        // Log to console
+                                        console.error('Error sending request:', data.error);
+                                        // Show error dialog
+                                        Swal.fire({
+                                            title: 'Request Failed',
+                                            text: 'An error occurred while sending the request. Please try again later. (Check Console for more details)',
+                                            icon: 'error',
+                                            confirmButtonText: 'OK',
+                                            confirmButtonColor: '#4caf50',
+                                        });
+                                    }
+                                })
+                                .catch(error => {
+                                    console.error('Error sending request:', error);
+                                    // Show error dialog
+                                    Swal.fire({
+                                        title: 'Error!',
+                                        text: 'Failed to send request. Please try again later. (Check Console for more details)',
+                                        icon: 'error',
+                                        confirmButtonColor: '#4caf50',
+                                    });
+                                });
+                        }
+                    });
+                }
+                // If there is no existing request, make a POST request to the API & display a success/error message
+                else {
+                    fetch('/api/user/collections-requests',
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Cache-Control': 'no-cache', // Disable caching
+                            },
+                            body: JSON.stringify({ collection_id: collectionId, is_make_public: isPublic }),
+                        }
+                    )
+                        .then(async response => {
+                            if (response.ok) {
+                                // Show success dialog
+                                console.log('Request sent successfully:', response.statusText);
+                                Swal.fire({
+                                    title: 'Request Sent',
+                                    text: `Your request to ${isPublic ? 'make this collection Public' : 'make this collection Private'} has been sent successfully.`,
+                                    icon: 'success',
+                                    confirmButtonText: 'OK',
+                                    confirmButtonColor: '#4caf50',
+                                });
+                                // Refresh the userCollections state after the request is sent
+                                getUserCollectionsandRequests();
+                            } else {
+                                const data = await response.json();
+                                // Log to console
+                                console.error('Error sending request:', data.error);
+                                // Show error dialog
+                                Swal.fire({
+                                    title: 'Request Failed',
+                                    text: 'An error occurred while sending the request. Please try again later. (Check Console for more details)',
+                                    icon: 'error',
+                                    confirmButtonText: 'OK',
+                                    confirmButtonColor: '#4caf50',
+                                });
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error sending request:', error);
+                            // Show error dialog
+                            Swal.fire({
+                                title: 'Error!',
+                                text: 'Failed to send request. Please try again later. (Check Console for more details)',
+                                icon: 'error',
+                                confirmButtonColor: '#4caf50',
+                            });
+                        });
+                }
+            }
+        });
+    };
+
+    // Function to handle cancelling a request
+    const handleCancelRequest = (collectionId: string, isPublic: boolean) => {
+        // Implement cancel request logic here
+        console.log(`Cancelling request for collection with ID: ${collectionId}`);
+        // Display a confirmation dialog
+        Swal.fire({
+            title: 'Cancel Request Confirmation',
+            text: `Are you sure you want to cancel the request to ${isPublic ? 'make this collection Private' : 'make this collection Public'}?`,
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Make a delete request to the API & display a success/error message
+                fetch('/api/user/collections-requests',
+                    {
+                        method: 'DELETE',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Cache-Control': 'no-cache', // Disable caching
+                        },
+                        body: JSON.stringify({ collection_id: collectionId }),
+                    }
+                )
+                    .then(async response => {
+                        if (response.ok) {
+                            // Show success dialog
+                            console.log('Request cancelled successfully:', response.statusText);
+                            Swal.fire({
+                                title: 'Request Cancelled',
+                                text: `Your request to ${isPublic ? 'make this collection Private' : 'make this collection Public'} has been cancelled successfully.`,
+                                icon: 'success',
+                                confirmButtonText: 'OK',
+                                confirmButtonColor: '#4caf50',
+                            });
+                            // Refresh the userCollections state after the request is sent
+                            getUserCollectionsandRequests();
+                        } else {
+                            const data = await response.json();
+                            // Log to console
+                            console.error('Error cancelling request:', data.error);
+                            // Show error dialog
+                            Swal.fire({
+                                title: 'Request Cancellation Failed',
+                                text: 'An error occurred while cancelling the request. Please try again later. (Check Console for more details)',
+                                icon: 'error',
+                                confirmButtonText: 'OK',
+                                confirmButtonColor: '#4caf50',
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error cancelling request:', error);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Failed to upload and index document set. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                    });
+            }
+        });
+    };
+
+    // Function to handle deleting a collection
+    const handleDelete = (collectionId: string, isPublic: boolean) => {
+        // Implement delete logic here
+        console.log(`Deleting collection with ID: ${collectionId}`);
+        // Display a confirmation dialog
+        Swal.fire({
+            title: 'Delete Confirmation',
+            text: `Are you sure you want to delete this collection? This action cannot be undone!`,
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No',
+            confirmButtonColor: '#4caf50',
+            cancelButtonColor: '#b91c1c',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // If the user confirms the delete, make a delete request to the API, display a success/error message
+                fetch('/api/user/collections',
+                    {
+                        method: 'DELETE',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Cache-Control': 'no-cache', // Disable caching
+                            'Authorization': `Bearer ${supabaseAccessToken}`, // Add the access token to the request headers
+                        },
+                        body: JSON.stringify({ collection_id: collectionId }),
+                    }
+                )
+                    .then(async response => {
+                        if (response.ok) {
+                            // If the delete request is successful, display a success message
+                            console.log('Collection deleted successfully:', response.statusText);
+                            Swal.fire({
+                                title: 'Collection Deleted!',
+                                text: 'Your collection has been deleted successfully.',
+                                icon: 'success',
+                                confirmButtonColor: '#4caf50',
+                            });
+                            // Refresh the userCollections state after the request is sent
+                            getUserCollectionsandRequests();
+                        } else {
+                            const data = await response.json();
+                            // Log to console
+                            console.error('Error deleting collection:', data.error);
+                            // Show error dialog
+                            Swal.fire({
+                                title: 'Error!',
+                                text: 'Failed to delete collection. Please try again later. (Check Console for more details)',
+                                icon: 'error',
+                                confirmButtonColor: '#4caf50',
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error uploading and indexing document set:', error);
+                        // Show error dialog
+                        Swal.fire({
+                            title: 'Error!',
+                            text: 'Failed to delete collection. Please try again later. (Check Console for more details)',
+                            icon: 'error',
+                            confirmButtonColor: '#4caf50',
+                        });
+                    });
+            }
+        });
+    };
+
+    const handleRefresh = async () => {
+        setIsRefreshed(false);
+        const timer = setInterval(() => {
+            // Timer to simulate a spinner while refreshing data
+            setIsRefreshed(true);
+        }, 1000); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
+        // Display a toast notification
+        if (await getUserCollectionsandRequests()) {
+            toast('Data refreshed successfully!', {
+                type: 'success',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        else {
+            toast('Error refreshing data. Please try again later.', {
+                type: 'error',
+                position: 'top-right',
+                autoClose: 3000,
+                closeOnClick: true,
+                pauseOnHover: true,
+            });
+        }
+        return () => clearInterval(timer); // Cleanup the timer on complete
+    }
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl">
+            <div className="rounded-lg pt-5 pr-5 pl-5 flex h-[50vh] flex-col overflow-y-auto pb-4">
+                <h2 className="text-lg text-center font-semibold mb-4">Manage Your Collections:</h2>
+                <div className="flex justify-between mb-2 mx-2">
+                    {/* Refresh Data button */}
+                    <button onClick={handleRefresh}
+                        className="flex items-center justify-center hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
+                        title='Refresh Data'
+                    >
+                        {isRefreshed ? <RefreshCw className='w-5 h-5' /> : <RefreshCw className='w-5 h-5 animate-spin' />}
+                    </button>
+                    {/* Button to toggle between list and table views */}
+                    <button onClick={toggleView} className="flex items-center text-center text-sm text-gray-500 underline gap-2 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10">
+                        {tableView ? <Table /> : <List />}
+                        {tableView ? 'Table View' : 'List View'}
+                    </button>
+                </div>
+                {/* Render list or table view based on the tableView state */}
+                {isLoading ? (
+                    <IconSpinner className='w-10 h-10 mx-auto my-auto animate-spin' />
+                ) : userCollections.length === 0 ? (
+                    <div className="mx-auto my-auto text-center text-lg text-gray-500 dark:text-gray-400">No collections found.</div>
+                ) : tableView ? (
+                    <div className="relative overflow-x-auto rounded-lg">
+                        <table className="w-full text-xl text-left rtl:text-right text-gray-500 dark:text-gray-400 p-4">
+                            <thead className="text-sm text-center text-gray-700 uppercase bg-gray-400 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="px-6 py-3">Display Name</th>
+                                    <th scope="col" className="px-6 py-3">Description</th>
+                                    <th scope="col" className="px-6 py-3">Created</th>
+                                    <th scope="col" className="px-6 py-3">Current Visibility</th>
+                                    <th scope="col" className="px-6 py-3">Request Status</th>
+                                    <th scope="col" className="px-6 py-3">Requested</th>
+                                    <th scope="col" className="px-6 py-3">Request Updated</th>
+                                    <th scope="col" className="px-6 py-3">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {userCollections.map((collection, index) => (
+                                    <tr className="text-sm text-center item-center bg-gray-100 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" key={index}>
+                                        {/* Render table rows */}
+                                        <td className="px-6 py-3">{collection.display_name}</td>
+                                        <td className="px-6 py-3">{collection.description}</td>
+                                        <td className="px-6 py-3">{collection.created_at}</td>
+                                        <td className="px-6 py-3">{collection.isPublic ? <div className='flex items-center'><Eye className='w-4 h-4 mr-1' /> Public</div> : <div className='flex items-center'><EyeOff className='w-4 h-4 mr-1' /> Private</div>}</td>
+                                        <td className="px-6 py-3">
+                                            <div>
+                                                <span className={
+                                                    `text-nowrap ${collection.requestStatus === '⏳Pending' ? 'text-orange-400 ' :
+                                                        collection.requestStatus === '✅Approved' ? 'text-green-500' :
+                                                            collection.requestStatus === '❌Rejected' ? 'text-red-500' : ''}`
+                                                }>
+                                                    {collection.requestStatus}
+                                                </span>
+                                            </div>
+                                        </td>
+                                        <td className="px-6 py-3">{collection.requestDate}</td>
+                                        <td className="px-6 py-3">{collection.updatedRequestDate}</td>
+                                        <td className="px-6 py-3 w-full">
+                                            <div className='flex flex-col justify-between gap-2'>
+                                                {/* Conditional rendering button based on request status */}
+                                                {collection.requestStatus === '⏳Pending' ? (
+                                                    <button onClick={() => handleCancelRequest(collection.collection_id, collection.isPublic)}
+                                                        title='Cancel Request'
+                                                        className="flex flex-grow justify-center text-center items-center text-xs lg:text-sm bg-orange-400 text-white px-1 py-1 lg:px-3 lg:py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-orange-500/40"
+                                                    >
+                                                        Cancel Request
+                                                    </button>
+                                                ) :
+                                                    collection.isPublic ? (
+                                                        <button onClick={() => handleRequest(collection.collection_id, false)}
+                                                            disabled={collection.requestStatus === '⏳Pending'}
+                                                            title='Set Private'
+                                                            className="flex flex-grow justify-center text-center items-center text-sm disabled:bg-gray-500 bg-blue-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-blue-500/40"
+                                                        >
+                                                            <EyeOff className='w-5 h-5 mr-1' />
+                                                            Set Private
+                                                        </button>
+                                                    ) : (
+                                                        <button onClick={() => handleRequest(collection.collection_id, true)}
+                                                            disabled={collection.requestStatus === '⏳Pending'}
+                                                            title='Set Public'
+                                                            className="flex flex-grow justify-center text-center items-center text-sm disabled:bg-gray-500 bg-blue-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-blue-500/40"
+                                                        >
+                                                            <Eye className='w-5 h-5 mr-1' />
+                                                            Set Public
+                                                        </button>
+                                                    )}
+                                                {/* Conditional rendering of delete button based on current visibility of collection, only private collection can be deleted */}
+                                                {!collection.isPublic && (
+                                                    <button onClick={() => handleDelete(collection.collection_id, true)}
+                                                        title='Delete'
+                                                        className="flex flex-grow justify-center text-center items-center text-sm disabled:bg-gray-500 bg-red-500 text-white px-3 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-red-500/40"
+                                                    >
+                                                        <Trash className='w-4 h-4 mr-1' />
+                                                        Delete
+                                                    </button>
+                                                )}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                ) : (
+                    <ul className={`transition duration-500 ease-in-out transform ${!isLoading ? "" : "animate-pulse"}`}>
+                        {userCollections.map((collection, index) => (
+                            <li key={index} className="p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg overflow-y-auto">
+                                {/* Render list items */}
+                                <div className="flex items-center justify-between">
+                                    <div className='justify-start'>
+                                        <div className='text-xs lg:text-base text-blue-500'>{collection.display_name}</div>
+                                        <div className="text-xs lg:text-sm text-gray-500">{collection.description}</div>
+                                        <div className="border-b border-zinc-500/30 dark:border-white my-2"></div> {/* Divider */}
+                                        <div className="text-xs lg:text-sm"><span className='font-bold'>Created: </span>{collection.created_at}</div>
+                                        <div className='flex items-center text-xs lg:text-sm'><span className='font-bold'>Current Visibility: </span>{collection.isPublic ? <span className='flex text-center items-center'><Eye className='w-4 h-4 mx-1' />Public</span> : <span className='flex text-center items-center'><EyeOff className='w-4 h-4 mx-1' />Private</span>}</div>
+
+                                        {/* Render request status and dates */}
+                                        {collection.requestStatus && (
+                                            <div className='flex flex-col items-start text-xs lg:text-sm'>
+                                                <div><span className='font-bold'>Request Type: </span>{collection.requestType}</div>
+                                                <div>
+                                                    <span className='font-bold'>Request Status: </span>
+                                                    <span className={
+                                                        `${collection.requestStatus === '⏳Pending' ? 'text-orange-400' :
+                                                            collection.requestStatus === '✅Approved' ? 'text-green-500' :
+                                                                collection.requestStatus === '❌Rejected' ? 'text-red-500' : ''}`
+                                                    }>
+                                                        {collection.requestStatus}
+                                                    </span>
+                                                </div>
+                                                <div><span className='font-bold'>Requested: </span>{collection.requestDate}</div>
+                                                <div><span className='font-bold'>Request Updated: </span>{collection.updatedRequestDate}</div>
+                                            </div>
+                                        )}
+                                    </div>
+                                    {/* Manage section */}
+                                    <div className="flex flex-col justify-between gap-2">
+                                        {/* Conditional rendering button based on request status */}
+                                        {collection.requestStatus === '⏳Pending' ? (
+                                            <button onClick={() => handleCancelRequest(collection.collection_id, collection.isPublic)}
+                                                title='Cancel Request'
+                                                className="flex flex-grow text-center items-center justify-center text-xs lg:text-sm bg-orange-400 text-white px-1 py-1 lg:px-3 lg:py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-orange-500/40"
+                                            >
+                                                Cancel Request
+                                            </button>
+                                        ) :
+                                            collection.isPublic ? (
+                                                <button onClick={() => handleRequest(collection.collection_id, false)}
+                                                    title='Set Private'
+                                                    className="flex flex-grow text-center items-center justify-center text-xs lg:text-sm bg-blue-500 text-white px-1 py-1 lg:px-3 lg:py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-blue-500/40"
+                                                >
+                                                    <EyeOff className='w-4 h-4 mr-1' />
+                                                    <span>Set Private</span>
+                                                </button>
+                                            ) : (
+                                                <button onClick={() => handleRequest(collection.collection_id, true)}
+                                                    title='Set Public'
+                                                    className="flex flex-grow text-center items-center justify-center text-xs lg:text-sm bg-blue-500 text-white px-1 py-1 lg:px-3 lg:py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-blue-500/40"
+                                                >
+                                                    <Eye className='w-4 h-4 mr-1' />
+                                                    <span>Set Public</span>
+                                                </button>
+                                            )}
+                                        {/* Conditional rendering of delete button based on current visibility of collection, only private collection can be deleted */}
+                                        {!collection.isPublic && (
+                                            <button onClick={() => handleDelete(collection.collection_id, true)}
+                                                title='Delete'
+                                                className="flex flex-grow text-center items-center justify-center text-xs lg:text-sm bg-red-500 text-white px-2 py-2 lg:px-3 lg:py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:bg-red-500/40"
+                                            >
+                                                <Trash className='w-4 h-4 mr-1' />
+                                                <span>Delete</span>
+                                            </button>
+                                        )}
+                                    </div>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/query/query-menu.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { MessageCircle, Upload, FileCog } from 'lucide-react';
+import { QueryMenuHandler } from '@/app/components/ui/query/query.interface';
+
+export default function QueryMenu(
+    props: Pick<QueryMenuHandler, "showUpload" | "setShowUpload" | "showChat" | "setShowChat" | "showManage" | "setShowManage" | "setCollSelectedId">,
+) {
+    const handleShowChatTab = () => {
+        props.setShowChat(true);
+        props.setShowUpload(false);
+        props.setShowManage(false);
+        props.setCollSelectedId('');
+    }
+    const handleShowUploadTab = () => {
+        props.setShowUpload(true);
+        props.setShowChat(false);
+        props.setShowManage(false);
+        props.setCollSelectedId('');
+    }
+
+    const handleShowManageTab = () => {
+        props.setShowManage(true);
+        props.setShowUpload(false);
+        props.setShowChat(false);
+        props.setCollSelectedId('');
+    }
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit shadow-xl">
+            <div className="flex rounded-lg px-4 py-2 text-center items-center overflow-y-auto">
+                <button
+                    className={`flex text-center items-center text-l ${props.showChat ? 'text-blue-500' : ''} bg-transparent px-4 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105`}
+                    onClick={() => handleShowChatTab()}
+                    title='Chat'
+                >
+                    <MessageCircle className="mr-1 h-5 w-5" />
+                    Chat
+                </button>
+                <button
+                    className={`flex text-center items-center text-l ${props.showUpload ? 'text-blue-500' : ''} bg-transparent px-4 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105`}
+                    onClick={() => handleShowUploadTab()}
+                    title='Upload'
+                >
+                    <Upload className="mr-1 h-5 w-5" />
+                    Upload
+                </button>
+                <button
+                    className={`flex text-center items-center text-l ${props.showManage ? 'text-blue-500' : ''} bg-transparent px-4 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105`}
+                    onClick={() => handleShowManageTab()}
+                    title='Manage'
+                >
+                    <FileCog className="mr-1 h-5 w-5" />
+                    Manage
+                </button>
+            </div>
+        </div>
+    );
+}

frontend/app/components/ui/query/query-selection.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { ChatHandler } from '@/app/components/ui/chat';
+import { IconSpinner } from '@/app/components/ui/icons';
+
+export default function QuerySelection(
+    props: Pick<ChatHandler, "collSelectedId" | "collSelectedName" | "handleCollIdSelect" | "handleCollNameSelect">,
+) {
+    const [userCollections, setuserCollections] = useState<any[]>([]);
+    const [isLoading, setisLoading] = useState(true); // Loading state
+
+    const handleCollectionSelect = (collectionId: string, displayName: string) => {
+        props.handleCollIdSelect(collectionId);
+        props.handleCollNameSelect(displayName);
+    };
+
+    const getUserCollections = async () => {
+        setisLoading(true); // Set loading state to true
+        // Fetch the public collection sets from the API
+        const response = await fetch('/api/user/collections', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Cache-Control': 'no-cache', // Disable caching
+            },
+        });
+
+        if (!response.ok) {
+            console.error("Error fetching user collections:", response.statusText);
+            return;
+        }
+
+        const data = await response.json();
+        // Sort the collections by created date in descending order (oldest first)
+        const sortedUserCollections = data.userCollections.sort((a: any, b: any) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+        setuserCollections(sortedUserCollections);
+        setisLoading(false); // Set loading state to false
+    }
+
+    // Retrieve the public collection sets from the database
+    useEffect(() => {
+        getUserCollections();
+    }, []);
+
+    // console.log('userCollections:', userCollections);
+
+    return (
+        <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl">
+            <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col overflow-y-auto pb-4">
+                <h2 className="text-lg text-center font-semibold mb-4">Select Your Document Set to Chat with:</h2>
+                {isLoading ? (
+                    <IconSpinner className='w-10 h-10 mx-auto my-auto animate-spin' />
+                ) : userCollections.length === 0 ? (<div className="mx-auto my-auto text-center text-lg text-gray-500 dark:text-gray-400">No collections found.</div>)
+                    : userCollections.map((collection, index) => (
+                        (<ul key={index}>
+                            <li className="p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer">
+                                <button className="text-blue-500 w-full text-left" onClick={() => handleCollectionSelect(collection.collection_id, collection.display_name)}>
+                                    <div>{collection.display_name}</div>
+                                    <div className="text-sm text-gray-500">{collection.description}</div>
+                                </button>
+                            </li>
+                        </ul>)
+                    ))}
+            </div>
+        </div>
+    );
+};

frontend/app/components/ui/query/query.interface.ts

@@ -0,0 +1,9 @@
+export interface QueryMenuHandler {
+  showUpload: boolean,
+  setShowUpload: (showUpload: boolean) => void,
+  showChat: boolean,
+  setShowChat: (showChat: boolean) => void,
+  showManage: boolean,
+  setShowManage: (showManage: boolean) => void,
+  setCollSelectedId: (collSelectedId: string) => void,
+}