From 62eaed8eaf33b8d4e705e72da5eeaefadcb1b3d5 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:48:00 +0545
Subject: [PATCH] fix: project org UI issues (#1230)

* fix editProject: formUpdate file extension spelling corrected to xlsx

* fix header: activeTab selection based on url pathname

* refactor primaryAppBar: unnecessary commented code remove

* feat assetModules: tuneIcon add

* feat shadcnDropdown: shadcn dropdown add

* fix select: zIndex add to selectContent

* fix submissionsFilter: UI enhancement

* fix submissionTable: logic add to handle Point & object to display dynamic table

* feat submissionsTable: buttons add

* fix modal: modal props type add

* fix taskService: josmService comment update

* feat projectSubmissions: uploadToJosm api integration & modalOpen on josmError

* fix dropdown: dropdownMenu UI fix

* feat submissionTable: download as csv & json dropdown add on download option

* fix taskService: axios get replace fetch for convertXMLToJOSM service
---
 src/frontend/package.json                     |   2 +
 src/frontend/pnpm-lock.yaml                   | 138 +++++++++
 src/frontend/src/api/task.ts                  |  16 +-
 .../ManageProject/EditTab/FormUpdateTab.tsx   |   4 +-
 .../ProjectSubmissions/SubmissionsTable.tsx   | 268 +++++++++++++-----
 .../src/components/common/Dropdown.tsx        | 185 ++++++++++++
 src/frontend/src/components/common/Modal.tsx  |   7 +-
 src/frontend/src/components/common/Select.tsx |   2 +-
 src/frontend/src/shared/AssetModules.js       |   2 +
 src/frontend/src/utilities/PrimaryAppBar.tsx  |  47 +--
 10 files changed, 554 insertions(+), 117 deletions(-)
 create mode 100644 src/frontend/src/components/common/Dropdown.tsx

diff --git a/src/frontend/package.json b/src/frontend/package.json
index 5d65bc8a84..ac9f85ee11 100755
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -54,6 +54,8 @@
     "@mui/system": "^5.14.12",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.3",
diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
index 31db273d5b..34474e9fd6 100644
--- a/src/frontend/pnpm-lock.yaml
+++ b/src/frontend/pnpm-lock.yaml
@@ -38,6 +38,12 @@ dependencies:
   '@radix-ui/react-dialog':
     specifier: ^1.0.5
     version: 1.0.5(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+  '@radix-ui/react-dropdown-menu':
+    specifier: ^2.0.6
+    version: 2.0.6(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+  '@radix-ui/react-icons':
+    specifier: ^1.3.0
+    version: 1.3.0(react@17.0.2)
   '@radix-ui/react-progress':
     specifier: ^1.0.3
     version: 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
@@ -2448,6 +2454,33 @@ packages:
       react-dom: 17.0.2(react@17.0.2)
     dev: false
 
+  /@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
+    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-context': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-id': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-menu': 2.0.6(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@types/react': 17.0.67
+      '@types/react-dom': 17.0.21
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    dev: false
+
   /@radix-ui/react-focus-guards@1.0.1(@types/react@17.0.67)(react@17.0.2):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
@@ -2508,6 +2541,14 @@ packages:
       react-dom: 17.0.2(react@17.0.2)
     dev: false
 
+  /@radix-ui/react-icons@1.3.0(react@17.0.2):
+    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /@radix-ui/react-id@1.0.1(@types/react@17.0.67)(react@17.0.2):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -2523,6 +2564,44 @@ packages:
       react: 17.0.2
     dev: false
 
+  /@radix-ui/react-menu@2.0.6(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
+    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-context': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-direction': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-id': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-slot': 1.0.2(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@types/react': 17.0.67
+      '@types/react-dom': 17.0.21
+      aria-hidden: 1.2.3
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+      react-remove-scroll: 2.5.5(@types/react@17.0.67)(react@17.0.2)
+    dev: false
+
   /@radix-ui/react-popper@1.1.2(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
     peerDependencies:
@@ -2553,6 +2632,36 @@ packages:
       react-dom: 17.0.2(react@17.0.2)
     dev: false
 
+  /@radix-ui/react-popper@1.1.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
+    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.1
+      '@floating-ui/react-dom': 2.0.8(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-context': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 17.0.67
+      '@types/react-dom': 17.0.21
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    dev: false
+
   /@radix-ui/react-portal@1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
@@ -2660,6 +2769,35 @@ packages:
       react-dom: 17.0.2(react@17.0.2)
     dev: false
 
+  /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
+    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-context': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-direction': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-id': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.67)(react@17.0.2)
+      '@types/react': 17.0.67
+      '@types/react-dom': 17.0.21
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    dev: false
+
   /@radix-ui/react-select@1.2.2(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
     peerDependencies:
diff --git a/src/frontend/src/api/task.ts b/src/frontend/src/api/task.ts
index 629fa90a99..94fac3c67d 100644
--- a/src/frontend/src/api/task.ts
+++ b/src/frontend/src/api/task.ts
@@ -184,12 +184,12 @@ export const ConvertXMLToJOSM: Function = (url: string, projectBbox) => {
     const getConvertXMLToJOSM = async (url) => {
       try {
         // checkJOSMOpen - To check if JOSM Editor is Open Or Not.
-        await CoreModules.axios.get(`http://127.0.0.1:8111/version?jsonp=checkJOSM`);
-        //importToJosmEditor - To open JOSM Editor and add XML of Project Submission To JOSM.
-        CoreModules.axios.get(
+        await fetch(`http://127.0.0.1:8111/version?jsonp=checkJOSM`);
+        //importToJosmEditor - To open JOSM Editor and add base layer To JOSM.
+        fetch(
           `http://127.0.0.1:8111/imagery?title=osm&type=tms&url=https://tile.openstreetmap.org/%7Bzoom%7D/%7Bx%7D/%7By%7D.png`,
         );
-        await CoreModules.axios.get(`http://127.0.0.1:8111/import?url=${url}`);
+        await fetch(`http://127.0.0.1:8111/import?url=${url}`);
         // `http://127.0.0.1:8111/load_and_zoom?left=80.0580&right=88.2015&top=27.9268&bottom=26.3470`;
 
         const loadAndZoomParams = {
@@ -202,9 +202,11 @@ export const ConvertXMLToJOSM: Function = (url: string, projectBbox) => {
           new_layer: 'true',
           layer_name: 'OSM Data',
         };
-        await CoreModules.axios.get(`http://127.0.0.1:8111/zoom`, {
-          params: loadAndZoomParams,
-        });
+        const queryString = Object.keys(loadAndZoomParams)
+          .map((key) => key + '=' + loadAndZoomParams[key])
+          .join('&');
+
+        await fetch(`http://127.0.0.1:8111/zoom?${queryString}`);
       } catch (error: any) {
         dispatch(CoreModules.TaskActions.SetJosmEditorError('JOSM Error'));
         // alert(error.response.data);
diff --git a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
index 1d798554a9..8a0a1bd240 100644
--- a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
+++ b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
@@ -29,14 +29,14 @@ const FormUpdateTab = ({ projectId }) => {
     <div className="fmtm-flex fmtm-flex-col fmtm-gap-10">
       <UploadArea
         title="Upload Form"
-        label="Please upload .xls, .slxs, .xml file"
+        label="Please upload .xls, .xlsx, .xml file"
         multiple={false}
         data={uploadForm || []}
         filterKey="url"
         onUploadFile={(updatedFiles) => {
           setUploadForm(updatedFiles);
         }}
-        acceptedInput=".xls, .slxs, .xml"
+        acceptedInput=".xls, .xlsx, .xml"
       />
       <div className="fmtm-flex fmtm-justify-center">
         <Button onClick={onSave} btnText="UPDATE" btnType="primary" className="fmtm-rounded-md" />
diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
index 6f55abf406..622bec9884 100644
--- a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
+++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import AssetModules from '@/shared/AssetModules.js';
 import { CustomSelect } from '@/components/common/Select.js';
 import windowDimention from '@/hooks/WindowDimension';
@@ -12,7 +12,10 @@ import { SubmissionActions } from '@/store/slices/SubmissionSlice';
 import { reviewStateData } from '@/constants/projectSubmissionsConstants';
 import CustomDatePicker from '@/components/common/CustomDatePicker';
 import { format } from 'date-fns';
-import Button from '../common/Button';
+import Button from '@/components/common/Button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/common/Dropdown';
+import { ConvertXMLToJOSM, getDownloadProjectSubmission, getDownloadProjectSubmissionJson } from '@/api/task';
+import { Modal } from '../common/Modal';
 
 type filterType = {
   task_id: number | null;
@@ -42,9 +45,24 @@ const SubmissionsTable = ({ toggleView }) => {
   const submissionTableDataLoading = CoreModules.useAppSelector((state) => state.submission.submissionTableDataLoading);
   const submissionTableRefreshing = CoreModules.useAppSelector((state) => state.submission.submissionTableRefreshing);
   const taskInfo = CoreModules.useAppSelector((state) => state.task.taskInfo);
+  const projectInfo = CoreModules.useAppSelector((state) => state.project.projectInfo);
+  const josmEditorError = CoreModules.useAppSelector((state) => state.task.josmEditorError);
+  const downloadSubmissionLoading = CoreModules.useAppSelector((state) => state.task.downloadSubmissionLoading);
+  const [numberOfFilters, setNumberOfFilters] = useState<number>(0);
   const [paginationPage, setPaginationPage] = useState<number>(1);
   const [submittedBy, setSubmittedBy] = useState<string>('');
 
+  useEffect(() => {
+    let count = 0;
+    const filters = Object.keys(filter);
+    filters?.map((fltr) => {
+      if (filter[fltr]) {
+        count = count + 1;
+      }
+    });
+    setNumberOfFilters(count);
+  }, [filter]);
+
   const updatedSubmissionFormFields = submissionFormFields?.map((formField) => {
     if (formField.type !== 'structure') {
       return {
@@ -132,86 +150,204 @@ const SubmissionsTable = ({ toggleView }) => {
     let value = obj;
     path?.split('.')?.map((item) => {
       if (path === 'start' || path === 'end') {
+        // start & end date is static
         value = `${value[item]?.split('T')[0]} ${value[item]?.split('T')[1]}`;
-      } else if (item === 'point') {
+      } else if (
+        value &&
+        value[item] &&
+        typeof value[item] === 'object' &&
+        Object.values(value[item]).includes('Point')
+      ) {
+        // if the object values contains 'Point' as type
         value = `${value[item].type} (${value[item].coordinates})`;
       } else {
-        value = value[item];
+        if (!value || !item) {
+          value = '';
+          return;
+        }
+        value = value?.[item];
       }
     });
-    return value ? value : '-';
+    return value ? (typeof value === 'object' ? '-' : value) : '';
   }
 
+  const uploadToJOSM = () => {
+    dispatch(
+      ConvertXMLToJOSM(
+        `${import.meta.env.VITE_API_URL}/submission/get_osm_xml/${decodedId}`,
+        projectInfo.outline_geojson.bbox,
+      ),
+    );
+  };
+
+  const handleDownload = (downloadType) => {
+    if (downloadType === 'csv') {
+      dispatch(
+        getDownloadProjectSubmission(
+          `${import.meta.env.VITE_API_URL}/submission/download?project_id=${decodedId}&export_json=false`,
+        ),
+      );
+    } else if (downloadType === 'json') {
+      dispatch(
+        getDownloadProjectSubmissionJson(
+          `${import.meta.env.VITE_API_URL}/submission/download-submission?project_id=${decodedId}`,
+        ),
+      );
+    }
+  };
+
   return (
     <div className="">
-      <div className="fmtm-flex xl:fmtm-items-end xl:fmtm-justify-between fmtm-flex-col xl:fmtm-flex-row fmtm-gap-4 fmtm-mb-6">
+      <Modal
+        className={`fmtm-w-[700px]`}
+        description={
+          <div>
+            <h3 className="fmtm-text-lg fmtm-font-bold fmtm-mb-4">Connection with JOSM failed</h3>
+            <p className="fmtm-text-lg">
+              Please verify if JOSM is running on your computer and the remote control is enabled.
+            </p>
+          </div>
+        }
+        open={!!josmEditorError}
+        onOpenChange={(value) => {
+          dispatch(CoreModules.TaskActions.SetJosmEditorError(null));
+        }}
+      />
+      <div className="fmtm-flex xl:fmtm-items-end xl:fmtm-justify-between fmtm-flex-col md:fmtm-flex-row fmtm-gap-4 fmtm-mb-6">
         <div
           className={`${
             windowSize.width < 2000 ? 'fmtm-w-full md:fmtm-w-fit' : 'fmtm-w-fit'
-          } fmtm-flex xl:fmtm-items-end fmtm-gap-2 xl:fmtm-gap-4 fmtm-rounded-lg fmtm-relative fmtm-flex-col xl:fmtm-flex-row `}
+          } fmtm-flex xl:fmtm-items-end fmtm-gap-2 xl:fmtm-gap-4 fmtm-rounded-lg fmtm-flex-col sm:fmtm-flex-row fmtm-order-2 md:-fmtm-order-1`}
         >
-          <div className="fmtm-grid fmtm-grid-cols-2 sm:fmtm-grid-cols-3 md:fmtm-grid-cols-4 lg:fmtm-grid-cols-5 fmtm-gap-4 fmtm-items-end">
-            <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
-              <CustomSelect
-                title="Task Id"
-                placeholder="Select"
-                data={taskInfo}
-                dataKey="value"
-                value={filter?.task_id?.toString() || null}
-                valueKey="task_id"
-                label="task_id"
-                onValueChange={(value) => value && setFilter((prev) => ({ ...prev, task_id: +value }))}
-                className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-bg-white"
-              />
-            </div>
-            <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
-              <CustomSelect
-                title="Review State"
-                placeholder="Select"
-                data={reviewStateData}
-                dataKey="value"
-                value={filter?.review_state}
-                valueKey="value"
-                label="label"
-                onValueChange={(value) => value && setFilter((prev) => ({ ...prev, review_state: value.toString() }))}
-                errorMsg=""
-                className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-bg-white"
-              />
-            </div>
-            <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
-              <CustomDatePicker
-                title="Submitted Date"
-                selectedDate={filter?.submitted_date}
-                setSelectedDate={(date) =>
-                  setFilter((prev) => ({ ...prev, submitted_date: format(new Date(date), 'yyyy-MM-dd') }))
-                }
-                className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-w-full"
-              />
-            </div>
-            <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
-              <p className={`fmtm-text-grey-700 fmtm-text-sm fmtm-font-semibold !fmtm-bg-transparent`}>Submitted By</p>
-              <div className="fmtm-border fmtm-border-gray-300 sm:fmtm-w-fit fmtm-flex fmtm-bg-white fmtm-items-center fmtm-px-1">
-                <input
-                  type="search"
-                  className="fmtm-h-[1.9rem] fmtm-p-2 fmtm-w-full fmtm-outline-none"
-                  placeholder="Search User"
-                  onChange={(e) => setSubmittedBy(e.target.value)}
-                ></input>
-                <i className="material-icons fmtm-text-[#9B9999] fmtm-cursor-pointer">search</i>
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger>
+              <button
+                className={`fmtm-py-1 fmtm-px-2 fmtm-text-red-600 fmtm-rounded fmtm-border-[1px] fmtm-border-red-600 hover:fmtm-text-red-700 hover:fmtm-border-red-700 fmtm-flex fmtm-items-center fmtm-w-fit fmtm-text-base fmtm-gap-2 fmtm-bg-white`}
+              >
+                <AssetModules.TuneIcon style={{ fontSize: '20px' }} /> <p>FILTER</p>{' '}
+                <div className="fmtm-text-sm fmtm-bg-primaryRed fmtm-text-white fmtm-rounded-full fmtm-w-4 fmtm-h-4 fmtm-flex fmtm-justify-center fmtm-items-center">
+                  <p>{numberOfFilters}</p>
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="fmtm-z-[50]" align="start">
+              <div
+                className={`fmtm-w-fit -fmtm-bottom-20 fmtm-bg-white fmtm-px-4 fmtm-rounded-lg fmtm-shadow-2xl fmtm-pb-4 fmtm-pt-2 fmtm-grid fmtm-grid-cols-2 sm:fmtm-grid-cols-3 md:fmtm-grid-cols-4 lg:fmtm-grid-cols-5 fmtm-gap-4 fmtm-items-end`}
+              >
+                <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
+                  <CustomSelect
+                    title="Task Id"
+                    placeholder="Select"
+                    data={taskInfo}
+                    dataKey="value"
+                    value={filter?.task_id?.toString() || null}
+                    valueKey="task_id"
+                    label="task_id"
+                    onValueChange={(value) => value && setFilter((prev) => ({ ...prev, task_id: +value }))}
+                    className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-bg-white"
+                  />
+                </div>
+                <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
+                  <CustomSelect
+                    title="Review State"
+                    placeholder="Select"
+                    data={reviewStateData}
+                    dataKey="value"
+                    value={filter?.review_state}
+                    valueKey="value"
+                    label="label"
+                    onValueChange={(value) =>
+                      value && setFilter((prev) => ({ ...prev, review_state: value.toString() }))
+                    }
+                    errorMsg=""
+                    className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-bg-white"
+                  />
+                </div>
+                <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
+                  <CustomDatePicker
+                    title="Submitted Date"
+                    selectedDate={filter?.submitted_date}
+                    setSelectedDate={(date) =>
+                      setFilter((prev) => ({ ...prev, submitted_date: format(new Date(date), 'yyyy-MM-dd') }))
+                    }
+                    className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-w-full"
+                  />
+                </div>
+                <div className={`${windowSize.width < 500 ? 'fmtm-w-full' : 'fmtm-w-[11rem]'}`}>
+                  <p className={`fmtm-text-grey-700 fmtm-text-sm fmtm-font-semibold !fmtm-bg-transparent`}>
+                    Submitted By
+                  </p>
+                  <div className="fmtm-border fmtm-border-gray-300 sm:fmtm-w-fit fmtm-flex fmtm-bg-white fmtm-items-center fmtm-px-1">
+                    <input
+                      type="search"
+                      className="fmtm-h-[1.9rem] fmtm-p-2 fmtm-w-full fmtm-outline-none"
+                      placeholder="Search User"
+                      onChange={(e) => {
+                        setSubmittedBy(e.target.value);
+                      }}
+                    ></input>
+                    <i className="material-icons fmtm-text-[#9B9999] fmtm-cursor-pointer">search</i>
+                  </div>
+                </div>
+                <Button
+                  btnText="Reset Filter"
+                  btnType="other"
+                  className={`${
+                    submissionTableDataLoading || submissionFormFieldsLoading ? '' : 'fmtm-bg-white'
+                  } !fmtm-text-base !fmtm-font-bold !fmtm-rounded`}
+                  onClick={clearFilters}
+                  disabled={submissionTableDataLoading || submissionFormFieldsLoading}
+                />
               </div>
-            </div>
-            <Button
-              btnText="Reset Filter"
-              btnType="other"
-              className={`${
-                submissionTableDataLoading || submissionFormFieldsLoading ? '' : 'fmtm-bg-white'
-              } !fmtm-text-base !fmtm-font-bold !fmtm-rounded`}
-              onClick={clearFilters}
-              disabled={submissionTableDataLoading || submissionFormFieldsLoading}
-            />
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="fmtm-flex fmtm-gap-2">
+            <button
+              className={`fmtm-px-2 fmtm-py-1 fmtm-flex fmtm-items-center fmtm-w-fit fmtm-rounded fmtm-gap-2 fmtm-duration-150 fmtm-bg-primaryRed hover:fmtm-bg-red-700`}
+              onClick={uploadToJOSM}
+            >
+              <AssetModules.FileDownloadIcon className="fmtm-text-white" style={{ fontSize: '18px' }} />
+              <p className="fmtm-text-white fmtm-text-base fmtm-truncate">UPLOAD TO JOSM</p>
+            </button>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <button
+                  className={`fmtm-px-2 fmtm-py-1 fmtm-flex fmtm-items-center fmtm-w-fit fmtm-rounded fmtm-gap-2 fmtm-duration-150
+                    fmtm-bg-primaryRed hover:fmtm-bg-red-700
+                  `}
+                >
+                  <AssetModules.FileDownloadIcon className="fmtm-text-white" style={{ fontSize: '18px' }} />
+                  <p className="fmtm-text-white fmtm-text-base">DOWNLOAD</p>
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="fmtm-z-[5000] fmtm-bg-white">
+                <DropdownMenuItem
+                  disabled={downloadSubmissionLoading.type === 'csv' && downloadSubmissionLoading.loading}
+                  onSelect={() => handleDownload('csv')}
+                >
+                  <div className="fmtm-flex fmtm-gap-2 fmtm-items-center">
+                    <p className="fmtm-text-base">Download as Csv</p>
+                    {downloadSubmissionLoading.type === 'csv' && downloadSubmissionLoading.loading && (
+                      <Loader2 className="fmtm-h-4 fmtm-w-4 fmtm-animate-spin fmtm-text-primaryRed" />
+                    )}
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() => handleDownload('json')}
+                  disabled={downloadSubmissionLoading.type === 'json' && downloadSubmissionLoading.loading}
+                >
+                  <div className="fmtm-flex fmtm-gap-2 fmtm-items-center">
+                    <p className="fmtm-text-base">Download as Json</p>
+                    {downloadSubmissionLoading.type === 'json' && downloadSubmissionLoading.loading && (
+                      <Loader2 className="fmtm-h-4 fmtm-w-4 fmtm-animate-spin fmtm-text-primaryRed" />
+                    )}
+                  </div>{' '}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
-        <div className="fmtm-w-full fmtm-flex fmtm-justify-end -fmtm-order-1 xl:fmtm-order-2 xl:fmtm-w-fit fmtm-gap-3">
+        <div className="fmtm-w-full fmtm-flex fmtm-justify-end xl:fmtm-w-fit fmtm-gap-3">
           <button
             className={`fmtm-px-4 fmtm-py-1 fmtm-flex fmtm-items-center fmtm-w-fit fmtm-rounded fmtm-gap-2 fmtm-duration-150 ${
               submissionTableDataLoading || submissionFormFieldsLoading
diff --git a/src/frontend/src/components/common/Dropdown.tsx b/src/frontend/src/components/common/Dropdown.tsx
new file mode 100644
index 0000000000..0c8a2943d1
--- /dev/null
+++ b/src/frontend/src/components/common/Dropdown.tsx
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
+
+import { cn } from '@/utilfunctions/shadcn';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'fmtm-flex fmtm-cursor-default fmtm-select-none fmtm-items-center fmtm-rounded-sm fmtm-px-2 fmtm-py-1.5 fmtm-text-sm fmtm-outline-none fmtm-focus:bg-accent data-[state=open]:fmtm-bg-accent',
+      inset && 'fmtm-pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'fmtm-z-50 fmtm-min-w-[8rem] fmtm-overflow-hidden fmtm-rounded-md fmtm-border fmtm-bg-popover fmtm-p-1 fmtm-text-popover-foreground fmtm-shadow-lg data-[state=open]:fmtm-animate-in data-[state=closed]:fmtm-animate-out fmtm-data-[state=closed]:fade-out-0 data-[state=open]:fmtm-fade-in-0 data-[state=closed]:fmtm-zoom-out-95 data-[state=open]:fmtm-zoom-in-95 data-[side=bottom]:fmtm-slide-in-from-top-2 data-[side=left]:fmtm-slide-in-from-right-2 data-[side=right]:fmtm-slide-in-from-left-2 data-[side=top]:fmtm-slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        '.fmtm-z-50 fmtm-min-w-[8rem] fmtm-overflow-hidden fmtm-rounded-md fmtm-border fmtm-bg-popover fmtm-p-1 fmtm-text-popover-foreground fmtm-shadow-md data-[state=open]:fmtm-animate-in data-[state=closed]:fmtm-animate-out fmtm-data-[state=closed]:fade-out-0 fmtm-data-[state=open]:fade-in-0 data-[state=closed]:fmtm-zoom-out-95 data-[state=open]:fmtm-zoom-in-95 data-[side=bottom]:fmtm-slide-in-from-top-2 data-[side=left]:fmtm-slide-in-from-right-2 data-[side=right]:fmtm-slide-in-from-left-2 data-[side=top]:fmtm-slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'fmtm-relative fmtm-flex fmtm-cursor-pointer fmtm-select-none fmtm-items-center fmtm-rounded-sm fmtm-px-2 fmtm-py-1.5 fmtm-text-sm fmtm-outline-none fmtm-transition-colors focus:fmtm-bg-red-100 focus:fmtm-text-black data-[disabled]:fmtm-pointer-events-none data-[disabled]:fmtm-opacity-50',
+      inset && 'fmtm-pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'fmtm-relative fmtm-flex fmtm-cursor-default fmtm-select-none fmtm-items-center fmtm-rounded-sm fmtm-py-1.5 fmtm-pl-8 fmtm-pr-2 fmtm-text-sm fmtm-outline-none fmtm-transition-colors fmtm-focus:bg-accent fmtm-focus:text-accent-foreground data-[disabled]:fmtm-pointer-events-none data-[disabled]:fmtm-opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="fmtm-absolute left-2 fmtm-flex fmtm-h-3.5 fmtm-w-3.5 fmtm-items-center fmtm-justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="fmtm-h-4 fmtm-w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative fmtm-flex fmtm-cursor-default fmtm-select-none fmtm-items-center fmtm-rounded-sm fmtm-py-1.5 fmtm-pl-8 fmtm-pr-2 fmtm-text-sm fmtm-outline-none fmtm-transition-colors fmtm-focus:bg-accent fmtm-focus:text-accent-foreground data-[disabled]:fmtm-pointer-events-none data-[disabled]:fmtm-opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 fmtm-flex fmtm-h-3.5 fmtm-w-3.5 fmtm-items-center fmtm-justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('fmtm-px-2 fmtm-py-1.5 fmtm-text-sm fmtm-font-semibold', inset && 'fmtm-pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('fmtm--mx-1 fmtm-my-1 fmtm-h-px fmtm-bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={cn('fmtm-ml-auto fmtm-text-xs fmtm-tracking-widest fmtm-opacity-60', className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/src/frontend/src/components/common/Modal.tsx b/src/frontend/src/components/common/Modal.tsx
index f0b1ee48ed..d0f99998bf 100644
--- a/src/frontend/src/components/common/Modal.tsx
+++ b/src/frontend/src/components/common/Modal.tsx
@@ -29,10 +29,11 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 interface IModalProps {
-  dialogOpen: React.FC<any>;
-  title: React.FC<any>;
-  description: React.FC<any>;
+  dialogOpen?: React.FC<any>;
+  title?: React.FC<any>;
+  description: React.ReactNode;
   open: boolean;
+  className: string;
   onOpenChange: (boolean) => void;
 }
 
diff --git a/src/frontend/src/components/common/Select.tsx b/src/frontend/src/components/common/Select.tsx
index 741637ecb5..e427392848 100644
--- a/src/frontend/src/components/common/Select.tsx
+++ b/src/frontend/src/components/common/Select.tsx
@@ -143,7 +143,7 @@ export const CustomSelect = ({
             <SelectTrigger className="fmtm-h-[2.35rem]">
               <SelectValue placeholder={placeholder} />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="fmtm-z-[100]">
               <SelectGroup className="fmtm-max-h-72 fmtm-overflow-y-auto">
                 {data?.map((item) => (
                   <SelectItem key={item[dataKey]} value={item[valueKey].toString()}>
diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
index 8471584043..6b707b13c3 100755
--- a/src/frontend/src/shared/AssetModules.js
+++ b/src/frontend/src/shared/AssetModules.js
@@ -69,6 +69,7 @@ import {
   Undo as UndoIcon,
   Timeline as TimelineIcon,
   PeopleAlt as PeopleAltIcon,
+  Tune as TuneIcon,
 } from '@mui/icons-material';
 import LockPng from '@/assets/images/lock.png';
 import RedLockPng from '@/assets/images/red-lock.png';
@@ -148,4 +149,5 @@ export default {
   UndoIcon,
   TimelineIcon,
   PeopleAltIcon,
+  TuneIcon,
 };
diff --git a/src/frontend/src/utilities/PrimaryAppBar.tsx b/src/frontend/src/utilities/PrimaryAppBar.tsx
index 49b0c84e39..95b909e026 100755
--- a/src/frontend/src/utilities/PrimaryAppBar.tsx
+++ b/src/frontend/src/utilities/PrimaryAppBar.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import windowDimention from '@/hooks/WindowDimension';
 import DrawerComponent from '@/utilities/CustomDrawer';
 import CustomizedImage from '@/utilities/CustomizedImage';
-import { ThemeActions } from '@/store/slices/ThemeSlice';
 import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
 import { CommonActions } from '@/store/slices/CommonSlice';
@@ -10,10 +9,11 @@ import { LoginActions } from '@/store/slices/LoginSlice';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { createLoginWindow, revokeCookie } from '@/utilfunctions/login';
 import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 export default function PrimaryAppBar() {
+  const location = useLocation();
   const [open, setOpen] = React.useState<boolean>(false);
-  const [brightness, setBrightness] = React.useState<boolean>(true);
   const dispatch = CoreModules.useAppDispatch();
   const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const token = CoreModules.useAppSelector((state) => state.login.loginToken);
@@ -25,18 +25,13 @@ export default function PrimaryAppBar() {
     setOpen(false);
   };
 
-  const handleLightToggle = () => {
-    setBrightness(!brightness);
-
-    const newTheme = {
-      ...defaultTheme,
-      palette: {
-        ...defaultTheme.palette,
-        mode: !brightness == true ? 'light' : 'dark',
-      },
-    };
-    dispatch(ThemeActions.UpdateBrightness(newTheme));
-  };
+  React.useEffect(() => {
+    if (location.pathname.includes('organisation') || location.pathname.includes('organization')) {
+      setActiveTab(1);
+    } else {
+      setActiveTab(0);
+    }
+  }, [location]);
 
   const appBarInnerStyles = {
     logo: {
@@ -126,17 +121,6 @@ export default function PrimaryAppBar() {
                 onClick={() => setActiveTab(1)}
               />
             </CoreModules.Link>
-            {/* <CoreModules.Link to={''} style={{ color: defaultTheme.palette.black }}>
-              <CoreModules.Tab
-                label="MANAGE CATEGORY"
-                sx={{
-                  borderBottom: activeTab === 2 ? '2.5px solid #2c3038' : 'none',
-                  '&:hover': { backgroundColor: '#fff' },
-                  fontSize: 16,
-                }}
-                onClick={() => setActiveTab(2)}
-              />
-            </CoreModules.Link> */}
           </CoreModules.Tabs>
           {/* position changed */}
           {token != null && (
@@ -163,19 +147,6 @@ export default function PrimaryAppBar() {
           )}
 
           <CoreModules.Stack sx={{ flexGrow: 1 }} />
-
-          {/* <CoreModules.Stack>
-            <CoreModules.IconButton
-              size="large"
-              aria-label="show more"
-              aria-haspopup="true"
-              onClick={handleLightToggle}
-              color="inherit"
-            >
-              {brightness != true ? <AssetModules.LightModeIcon /> : <AssetModules.DarkModeIcon />}
-            </CoreModules.IconButton>
-          </CoreModules.Stack> */}
-
           <CoreModules.Stack direction={'row'} sx={{ display: { md: 'flex', xs: 'none' } }}>
             {token != null ? (
               <CoreModules.Link style={{ textDecoration: 'none' }} to={'/'}>