1132 policies and data

frontend/package.json

@@ -14,7 +14,7 @@
     "flow.js": "^0.2.6",
     "google-map-react": "^2.2.1",
     "js-cookie": "^3.0.5",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "mobx": "6.13.3",
     "mobx-react-lite": "^4.0.7",
     "moment": "^2.30.1",

frontend/src/AuthenticatedSwitch.jsx

@@ -5,6 +5,8 @@ import NotFound from "./pages/errorPages/NotFound";
 import AuthenticatedAppHeader from "./components/AuthenticatedAppHeader";
 import Footer from "./components/Footer";
 import useGetMe from "./models/auth/users/useGetMe";
+import HowToPhotograph from "./pages/HowToPhotograph";
+import AboutUs from "./pages/AboutUs";
 
 // Lazy load pages
 const Login = lazy(() => import("./pages/Login"));
@@ -13,7 +15,6 @@ const Home = lazy(() => import("./pages/Home"));
 const EncounterSearch = lazy(
   () => import("./pages/SearchPages/EncounterSearch"),
 );
-const Citation = lazy(() => import("./pages/Citation"));
 const AdminLogs = lazy(() => import("./pages/AdminLogs"));
 const ReportEncounter = lazy(
   () => import("./pages/ReportsAndManagamentPages/ReportEncounter"),
@@ -29,10 +30,14 @@ const BulkImport = lazy(() => import("./pages/BulkImport/BulkImport"));
 const BulkImportTask = lazy(() => import("./pages/BulkImport/BulkImportTask"));
 
 const Encounter = lazy(() => import("./pages/Encounter/Encounter"));
+const PoliciesAndData = lazy(
+  () => import("./pages/PoliciesAndData/PoliciesAndData"),
+);
 
 export default function AuthenticatedSwitch({
   showclassicsubmit,
   showClassicEncounterSearch,
+  showHowToPhotograph,
 }) {
   const { data } = useGetMe();
   const username = data?.username;
@@ -57,6 +62,7 @@ export default function AuthenticatedSwitch({
           avatar={avatar}
           showclassicsubmit={showclassicsubmit}
           showClassicEncounterSearch={showClassicEncounterSearch}
+          showHowToPhotograph={showHowToPhotograph}
         />
       </div>
 
@@ -73,7 +79,9 @@ export default function AuthenticatedSwitch({
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
             <Route path="/profile" element={<Profile />} />
-            <Route path="/citation" element={<Citation />} />
+            <Route path="/policies-and-data" element={<PoliciesAndData />} />
+            <Route path="/how-to-photograph" element={<HowToPhotograph />} />
+            <Route path="/about-us" element={<AboutUs />} />
             <Route path="/projects/overview" element={<ProjectList />} />
             <Route path="/home" element={<Home />} />
             <Route path="/report" element={<ReportEncounter />} />

frontend/src/FrontDesk.jsx

@@ -27,6 +27,7 @@ export default function FrontDesk() {
   const { data } = useGetSiteSettings();
   const showclassicsubmit = data?.showClassicSubmit;
   const showClassicEncounterSearch = data?.showClassicEncounters;
+  const showHowToPhotograph = data?.showHowToPhotograph;
   const checkLoginStatus = () => {
     axios
       .head("/api/v3/user")
@@ -103,6 +104,7 @@ export default function FrontDesk() {
         <AuthenticatedSwitch
           showclassicsubmit={showclassicsubmit}
           showClassicEncounterSearch={showClassicEncounterSearch}
+          showHowToPhotograph={showHowToPhotograph}
         />
       </AuthContext.Provider>
     );
@@ -111,7 +113,10 @@ export default function FrontDesk() {
   return (
     <AuthContext.Provider value={{ isLoggedIn }}>
       <GoogleTagManager />
-      <UnauthenticatedSwitch showclassicsubmit={showclassicsubmit} />
+      <UnauthenticatedSwitch
+        showclassicsubmit={showclassicsubmit}
+        showHowToPhotograph={showHowToPhotograph}
+      />
     </AuthContext.Provider>
   );
 }

frontend/src/UnAuthenticatedSwitch.jsx

@@ -3,19 +3,24 @@ import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 import Footer from "./components/Footer";
 import UnAuthenticatedAppHeader from "./components/UnAuthenticatedAppHeader";
 import EncounterPageViewOnly from "./pages/Encounter/EncounterPageViewOnly";
+import PoliciesAndData from "./pages/PoliciesAndData/PoliciesAndData";
+import HowToPhotograph from "./pages/HowToPhotograph";
+import AboutUs from "./pages/AboutUs";
 
 // Lazy load pages
 const Login = lazy(() => import("./pages/Login"));
 const Unauthorized = lazy(() => import("./pages/errorPages/Unauthorized"));
-const Citation = lazy(() => import("./pages/Citation"));
 const ReportEncounter = lazy(
   () => import("./pages/ReportsAndManagamentPages/ReportEncounter"),
 );
 const ReportConfirm = lazy(
   () => import("./pages/ReportsAndManagamentPages/ReportConfirm"),
 );
 
-export default function UnAuthenticatedSwitch({ showclassicsubmit }) {
+export default function UnAuthenticatedSwitch({
+  showclassicsubmit,
+  showHowToPhotograph,
+}) {
   const [header, setHeader] = React.useState(true);
   const location = useLocation();
 
@@ -35,7 +40,10 @@ export default function UnAuthenticatedSwitch({ showclassicsubmit }) {
           backgroundColor: "#303336",
         }}
       >
-        <UnAuthenticatedAppHeader showclassicsubmit={showclassicsubmit} />
+        <UnAuthenticatedAppHeader
+          showclassicsubmit={showclassicsubmit}
+          showHowToPhotograph={showHowToPhotograph}
+        />
       </div>
 
       {/* Main Content */}
@@ -55,7 +63,9 @@ export default function UnAuthenticatedSwitch({ showclassicsubmit }) {
               element={<Unauthorized setHeader={setHeader} />}
             />
             <Route path="/encounter" element={<EncounterPageViewOnly />} />
-            <Route path="/citation" element={<Citation />} />
+            <Route path="/policies-and-data" element={<PoliciesAndData />} />
+            <Route path="/about-us" element={<AboutUs />} />
+            <Route path="/how-to-photograph" element={<HowToPhotograph />} />
             <Route path="/report" element={<ReportEncounter />} />
             <Route path="/reportConfirm" element={<ReportConfirm />} />
             <Route path="/login" element={<Login />} />

frontend/src/components/AuthenticatedAppHeader.jsx

@@ -15,6 +15,7 @@ export default function AuthenticatedAppHeader({
   avatar,
   showclassicsubmit,
   showClassicEncounterSearch,
+  showHowToPhotograph,
 }) {
   const { visible } = useContext(FooterVisibilityContext);
 
@@ -77,6 +78,7 @@ export default function AuthenticatedAppHeader({
                   username={username}
                   showclassicsubmit={showclassicsubmit}
                   showClassicEncounterSearch={showClassicEncounterSearch}
+                  showHowToPhotograph={showHowToPhotograph}
                 />
               </Nav>
               <HeaderQuickSearch />

frontend/src/components/UnAuthenticatedAppHeader.jsx

@@ -9,23 +9,22 @@ import { FormattedMessage } from "react-intl";
 import FooterVisibilityContext from "../FooterVisibilityContext";
 import Logo from "./svg/Logo";
 
-export default function AuthenticatedAppHeader({ showclassicsubmit }) {
-  const { visible } = useContext(FooterVisibilityContext);
-  const [dropdownShows, setDropdownShows] = useState({
-    dropdown1: false,
-    dropdown2: false,
-    dropdown3: false,
-  });
-  const [dropdownBorder, setDropdownBorder] = useState("2px solid transparent");
+import HeaderDropdownItems from "./header/HeaderDropdownItems";
 
-  const handleMouseEnter = (id) => {
-    setDropdownShows((prev) => ({ ...prev, [id]: true }));
-    setDropdownBorder((prev) => ({ ...prev, [id]: "2px solid white" }));
-  };
+export default function UnAuthenticatedAppHeader({
+  showclassicsubmit,
+  showHowToPhotograph,
+}) {
+  const { visible } = useContext(FooterVisibilityContext);
+  const [dropdownShows, setDropdownShows] = useState({});
+  const [dropdownBorder, setDropdownBorder] = useState({});
 
-  const handleMouseLeave = (id) => {
-    setDropdownShows((prev) => ({ ...prev, [id]: false }));
-    setDropdownBorder((prev) => ({ ...prev, [id]: "2px solid transparent" }));
+  const handleMouseEnterLeave = (id, isEnter) => {
+    setDropdownShows((prev) => ({ ...prev, [id]: isEnter }));
+    setDropdownBorder((prev) => ({
+      ...prev,
+      [id]: isEnter ? "2px solid white" : "2px solid transparent",
+    }));
   };
 
   return (
@@ -59,12 +58,11 @@ export default function AuthenticatedAppHeader({ showclassicsubmit }) {
             <Navbar.Brand
               className="d-flex flex-row align-items-center"
               href="/"
-              style={{}}
             >
               <Logo />
               {process.env.SITE_NAME}
             </Navbar.Brand>
-            <Navbar.Toggle aria-controls="basic-navbar-nav" style={{}} />
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
               <Nav
                 className="mr-auto"
@@ -73,7 +71,10 @@ export default function AuthenticatedAppHeader({ showclassicsubmit }) {
                   marginLeft: "auto",
                 }}
               >
-                {unAuthenticatedMenu(showclassicsubmit).map((item, idx) => (
+                {unAuthenticatedMenu(
+                  showclassicsubmit,
+                  showHowToPhotograph,
+                ).map((item, idx) => (
                   <Nav key={idx} className="me-auto">
                     <NavDropdown
                       title={
@@ -84,7 +85,7 @@ export default function AuthenticatedAppHeader({ showclassicsubmit }) {
                           <DownIcon />
                         </span>
                       }
-                      id={`basic-nav-dropdown${item}`}
+                      id={`basic-nav-dropdown${idx}`}
                       style={{
                         color: "white",
                         boxSizing: "border-box",
@@ -95,24 +96,14 @@ export default function AuthenticatedAppHeader({ showclassicsubmit }) {
                         paddingRight: 5,
                       }}
                       onMouseEnter={() =>
-                        handleMouseEnter(`dropdown${idx + 1}`)
+                        handleMouseEnterLeave(`dropdown${idx + 1}`, true)
                       }
                       onMouseLeave={() =>
-                        handleMouseLeave(`dropdown${idx + 1}`)
+                        handleMouseEnterLeave(`dropdown${idx + 1}`, false)
                       }
                       show={dropdownShows[`dropdown${idx + 1}`]}
                     >
-                      {Object.values(item)[0].map((subItem) => {
-                        return (
-                          <NavDropdown.Item
-                            key={subItem.name}
-                            href={subItem.href}
-                            style={{ color: "black", fontSize: "0.9rem" }}
-                          >
-                            {subItem.name}
-                          </NavDropdown.Item>
-                        );
-                      })}
+                      <HeaderDropdownItems items={Object.values(item)[0]} />
                     </NavDropdown>
                   </Nav>
                 ))}
@@ -128,7 +119,6 @@ export default function AuthenticatedAppHeader({ showclassicsubmit }) {
                 width: "100px",
                 whiteSpace: "nowrap",
                 padding: 5,
-                // marginRight: "10%",
               }}
               href={`${process.env.PUBLIC_URL}/login`}
             >

frontend/src/components/header/HeaderDropdownItems.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { NavDropdown } from "react-bootstrap";
+import RightIcon from "../svg/RightIcon";
+
+export default function HeaderDropdownItems({
+  items,
+  dropdownItemStyle = { color: "black", fontSize: "0.9rem" },
+  dropdownTitleLinkStyle = {
+    color: "black",
+    fontSize: "0.9rem",
+    textDecoration: "none",
+  },
+}) {
+  const [openSubKey, setOpenSubKey] = useState(null);
+  const [subBg, setSubBg] = useState({});
+
+  return items.map((subItem, subIndex) => {
+    const key = subItem.href || `menu-item-${subIndex}`;
+    const hasSub = Array.isArray(subItem.sub) && subItem.sub.length > 0;
+    const subKey = `${key}__sub`;
+
+    if (!hasSub) {
+      return (
+        <NavDropdown.Item
+          key={key}
+          href={subItem.href}
+          style={dropdownItemStyle}
+        >
+          {subItem.name}
+        </NavDropdown.Item>
+      );
+    }
+
+    return (
+      <NavDropdown
+        key={subKey}
+        className="header-dropdown"
+        title={
+          <a
+            style={dropdownTitleLinkStyle}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              window.location.href = subItem.href;
+            }}
+            href={subItem.href}
+          >
+            {subItem.name}
+            <span style={{ paddingLeft: "34px" }}>
+              <RightIcon />
+            </span>
+          </a>
+        }
+        drop="end"
+        style={{
+          paddingLeft: 8,
+          fontSize: "0.9rem",
+          backgroundColor: subBg[subKey] || "transparent",
+        }}
+        onMouseEnter={() => {
+          setSubBg((prev) => ({ ...prev, [subKey]: "#CCF0FF" }));
+          setOpenSubKey(subKey);
+        }}
+        onMouseLeave={() => {
+          setSubBg((prev) => ({ ...prev, [subKey]: "white" }));
+          setOpenSubKey(null);
+        }}
+        show={openSubKey === subKey}
+      >
+        {subItem.sub.map((leaf, leafIndex) => {
+          const leafKey = leaf.href || `${subKey}-leaf-${leafIndex}`;
+          return (
+            <NavDropdown.Item
+              key={leafKey}
+              href={leaf.href}
+              style={dropdownItemStyle}
+            >
+              {leaf.name}
+            </NavDropdown.Item>
+          );
+        })}
+      </NavDropdown>
+    );
+  });
+}