fixes

admin-portal-frontend/next.config.mjs

@@ -5,7 +5,6 @@ const nextConfig = {
   env: {
     API_URL: process.env.API_URL,
   },
-  output: "export",
   images: {
     unoptimized: true,
   },

admin-portal-frontend/src/app/pages/EmergencyFlow.tsx → admin-portal-frontend/src/app/add-emergency/page.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-// import searchIcon from "../icons/ic_search_grey.png";
-// import Image from "next/image";
-import { useRouter } from "next/navigation";
 import React from "react";
 
 import { CreateEmergencyRequest, createEmergency } from "../../../emergencies";
+import AnotherPage from "../page";
 
 import styles from "./EmergencyFlowStyles";
 
@@ -58,7 +56,6 @@ const EmergencyFlow: React.FC = () => {
   const [acuteManagement, setAcuteManagement] = React.useState("");
   const [dispo, setDispo] = React.useState("");
   const [considerations, setConsiderations] = React.useState("");
-  const router = useRouter();
 
   const handlePublish = () => {
     //make an object of type CreateEmergencyRequest
@@ -120,7 +117,6 @@ const EmergencyFlow: React.FC = () => {
           setDispo("");
           setConsiderations("");
           //redirect to homepage/main page
-          router.push("/");
         } else {
           // You should always clearly inform the user when something goes wrong.
           // In this case, we're just doing an `alert()` for brevity, but you'd
@@ -142,54 +138,56 @@ const EmergencyFlow: React.FC = () => {
   };
 
   return (
-    <form style={styles.page}>
-      <div style={styles.container}>
-        <p style={styles.header}>Global Search &gt; Medical &gt; Add an injury</p>
-        <p style={styles.subtitle}>Injury details</p>
-        <InputBlock label="Name of injury*" value={emergencyTitle} onChange={setEmergencyTitle} />
+    <AnotherPage>
+      <form style={styles.page}>
+        <div style={styles.container}>
+          <p style={styles.header}>Global Search &gt; Medical &gt; Add an injury</p>
+          <p style={styles.subtitle}>Injury details</p>
+          <InputBlock label="Name of injury*" value={emergencyTitle} onChange={setEmergencyTitle} />
 
-        <InputBlock
-          label="Page Description"
-          value={emergencySubtitle}
-          onChange={setEmergencySubtitle}
-        />
+          <InputBlock
+            label="Page Description"
+            value={emergencySubtitle}
+            onChange={setEmergencySubtitle}
+          />
 
-        <p style={styles.subheader}>Overview</p>
+          <p style={styles.subheader}>Overview</p>
 
-        <InputBlock label="Importance" value={importance} onChange={setImportance} />
+          <InputBlock label="Importance" value={importance} onChange={setImportance} />
 
-        <InputBlock label="Risk factors" value={riskFactors} onChange={setRiskFactors} />
+          <InputBlock label="Risk factors" value={riskFactors} onChange={setRiskFactors} />
 
-        <InputBlock
-          label="Mechanism of Injury"
-          value={mechanismOfInjury}
-          onChange={setMechanismOfInjury}
-        />
+          <InputBlock
+            label="Mechanism of Injury"
+            value={mechanismOfInjury}
+            onChange={setMechanismOfInjury}
+          />
 
-        <InputBlock label="Diagnosis" value={diagnosis} onChange={setDiagnosis} />
+          <InputBlock label="Diagnosis" value={diagnosis} onChange={setDiagnosis} />
 
-        <InputBlock label="Physical Exam" value={physicalExam} onChange={setPhysicalExam} />
+          <InputBlock label="Physical Exam" value={physicalExam} onChange={setPhysicalExam} />
 
-        <p style={styles.subheader}>How to Treat</p>
+          <p style={styles.subheader}>How to Treat</p>
 
-        <InputBlock
-          label="Acute Management"
-          value={acuteManagement}
-          onChange={setAcuteManagement}
-        />
+          <InputBlock
+            label="Acute Management"
+            value={acuteManagement}
+            onChange={setAcuteManagement}
+          />
 
-        <InputBlock label="Dispo" value={dispo} onChange={setDispo} />
+          <InputBlock label="Dispo" value={dispo} onChange={setDispo} />
 
-        <InputBlock label="Considerations" value={considerations} onChange={setConsiderations} />
-      </div>
+          <InputBlock label="Considerations" value={considerations} onChange={setConsiderations} />
+        </div>
 
-      <div style={styles.buttonContainer}>
-        <button style={styles.cancelButton}>Close</button>
-        <button style={styles.publishButton} onClick={handlePublish}>
-          Publish
-        </button>
-      </div>
-    </form>
+        <div style={styles.buttonContainer}>
+          <button style={styles.cancelButton}>Close</button>
+          <button style={styles.publishButton} onClick={handlePublish}>
+            Publish
+          </button>
+        </div>
+      </form>
+    </AnotherPage>
   );
 };
 

admin-portal-frontend/src/app/category/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+import { Category } from "../api/Categories";
+import AnotherPage from "../page";
+
+const CategoryDetail: React.FC = () => {
+  const searchParams = useSearchParams();
+  const categoryString = searchParams.get("category");
+  const category = categoryString ? (JSON.parse(categoryString) as Category) : null;
+  return (
+    <AnotherPage>
+      <div>
+        <h1>Category Detail: {category.title}</h1>
+      </div>
+    </AnotherPage>
+  );
+};
+
+export default CategoryDetail;

admin-portal-frontend/src/app/components/VerticalNavBar.tsx

@@ -6,10 +6,11 @@ import { Card } from "react-bootstrap";
 import Accordion from "react-bootstrap/Accordion";
 import Link from "next/link";
 
+import { Category, getAllCategories } from "../api/Categories";
+
 import GpComponent from "./GPComponent";
 import HomeComponent from "./HomeComponent";
 import SearchComponent from "./SearchComponent";
-import { Category, getAllCategories } from "../api/Categories";
 import styles from "./VerticalNavBarStyles";
 
 const VerticalNavBar: React.FC = () => {
@@ -110,7 +111,10 @@ const VerticalNavBar: React.FC = () => {
                     <li key={category._id}>
                       {/* Generate unique link for each category */}
                       <Link
-                        href={`/general-principles/${encodeURIComponent(category.title)}`}
+                        href={{
+                          pathname: "/category",
+                          query: { category: JSON.stringify(category) },
+                        }}
                         style={{
                           textDecoration: "none",
                           color: "var(--bs-accordion-btn-color)",

admin-portal-frontend/src/app/page.tsx

@@ -4,9 +4,9 @@ import HorizontalNavBar from "./components/HorizontalNavbar";
 import VerticalNavBar from "./components/VerticalNavBar";
 import styles from "./pageStyles";
 
-interface LayoutProps {
+type LayoutProps = {
   children: React.ReactNode;
-}
+};
 
 const AnotherPage: React.FC<LayoutProps> = ({ children }) => {
   return (