From 905c2e0625ce6f2519407499afa12460cb4d5a7d Mon Sep 17 00:00:00 2001 From: Chris Annunziato Date: Tue, 15 Jul 2025 10:09:44 -0400 Subject: [PATCH 1/3] Standardized icon and Balancer logo sizes in the sidebar --- .../src/pages/Layout/Layout_V2_Sidebar.tsx | 194 +++++++++--------- 1 file changed, 97 insertions(+), 97 deletions(-) diff --git a/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx b/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx index a54a5c2a..9d661afc 100644 --- a/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx +++ b/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx @@ -1,117 +1,117 @@ -import React, { useState, useEffect } from "react"; -import { Link, useNavigate, useLocation } from "react-router-dom"; -import { ChevronLeft, ChevronRight, File, Loader2 } from "lucide-react"; +import React, {useState, useEffect} from "react"; +import {Link, useNavigate, useLocation} from "react-router-dom"; +import {ChevronLeft, ChevronRight, File, Loader2} from "lucide-react"; import axios from "axios"; interface File { - id: number; - guid: string; - file_name: string; - title: string | null; + id: number; + guid: string; + file_name: string; + title: string | null; } const Sidebar: React.FC = () => { - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - const [files, setFiles] = useState([]); - const [isLoading, setIsLoading] = useState(true); - const navigate = useNavigate(); - const location = useLocation(); + const [sidebarCollapsed, setSidebarCollapsed] = useState(false); + const [files, setFiles] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const navigate = useNavigate(); + const location = useLocation(); - const toggleSidebar = () => { - setSidebarCollapsed(!sidebarCollapsed); - }; - - useEffect(() => { - const fetchFiles = async () => { - try { - const baseUrl = import.meta.env.VITE_API_BASE_URL; - const response = await axios.get(`${baseUrl}/v1/api/uploadFile`, { - headers: { - Authorization: `JWT ${localStorage.getItem("access")}`, - }, - }); - if (Array.isArray(response.data)) { - setFiles(response.data); - } - } catch (error) { - console.error("Error fetching files", error); - } finally { - setIsLoading(false); - } + const toggleSidebar = () => { + setSidebarCollapsed(!sidebarCollapsed); }; - fetchFiles(); - }, []); + useEffect(() => { + const fetchFiles = async () => { + try { + const baseUrl = import.meta.env.VITE_API_BASE_URL; + const response = await axios.get(`${baseUrl}/v1/api/uploadFile`, { + headers: { + Authorization: `JWT ${localStorage.getItem("access")}`, + }, + }); + if (Array.isArray(response.data)) { + setFiles(response.data); + } + } catch (error) { + console.error("Error fetching files", error); + } finally { + setIsLoading(false); + } + }; - const handleFileClick = (guid: string) => { - const params = new URLSearchParams(location.search); - const currentGuid = params.get("guid"); + fetchFiles(); + }, []); - if (guid !== currentGuid) { - navigate(`/drugsummary?guid=${guid}&page=1`); - } else { - navigate( - `/drugsummary?guid=${guid}${params.has("page") ? `&page=${params.get("page")}` : ""}` - ); - } - }; + const handleFileClick = (guid: string) => { + const params = new URLSearchParams(location.search); + const currentGuid = params.get("guid"); - return ( -
-
- {!sidebarCollapsed && ( - -

- Balancer -

- - )} - -
+ if (guid !== currentGuid) { + navigate(`/drugsummary?guid=${guid}&page=1`); + } else { + navigate( + `/drugsummary?guid=${guid}${params.has("page") ? `&page=${params.get("page")}` : ""}` + ); + } + }; - {/* File List Section */} -
- {isLoading ? ( -
- -
- ) : ( -
    - {files.map((file) => ( -
  • + return ( +
    +
    + {!sidebarCollapsed && ( + +

    + Balancer +

    + + )} +
    + + {/* File List Section */} +
    + {isLoading ? ( +
    + +
    + ) : ( +
      + {files.map((file) => ( +
    • + -
      • - ))} -
    - )} -
    -
    - ); + )} + +
    • + ))} +
+ )} +
+
+ ); }; export default Sidebar; From ff18a3094b4d95454409cb4e8d6b474132ac0e98 Mon Sep 17 00:00:00 2001 From: Chris Annunziato Date: Tue, 15 Jul 2025 11:38:38 -0400 Subject: [PATCH 2/3] Tailored the fix to the File icon specifically instead of the span, with flex-shrink-0, to prevent future issues if the ui were to change around the icon. --- frontend/src/pages/Layout/Layout_V2_Sidebar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx b/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx index 9d661afc..e1c26f1b 100644 --- a/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx +++ b/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx @@ -98,9 +98,9 @@ const Sidebar: React.FC = () => { sidebarCollapsed ? "justify-center" : "" }`} > - + {!sidebarCollapsed && ( - + {file.title || file.file_name.replace(/\.[^/.]+$/, "")} )} From 739533bd454c8f82dc0ce6e86815c9c3cd1cb452 Mon Sep 17 00:00:00 2001 From: Chris Annunziato Date: Wed, 16 Jul 2025 18:58:56 -0400 Subject: [PATCH 3/3] Reworked the Admin Portal UI, preventing overflows and generally improved the UX. In addition to fixing mobile to close the sidebar by default. --- .../src/pages/AdminPortal/AdminPortal.tsx | 226 ++++++++++-------- .../src/pages/Layout/Layout_V2_Sidebar.tsx | 14 ++ 2 files changed, 135 insertions(+), 105 deletions(-) diff --git a/frontend/src/pages/AdminPortal/AdminPortal.tsx b/frontend/src/pages/AdminPortal/AdminPortal.tsx index c214270a..da93974a 100644 --- a/frontend/src/pages/AdminPortal/AdminPortal.tsx +++ b/frontend/src/pages/AdminPortal/AdminPortal.tsx @@ -1,115 +1,131 @@ //import Welcome from "../../components/Welcome/Welcome.tsx"; -import { Link } from "react-router-dom"; +import {Link} from "react-router-dom"; import pencilSVG from "../../assets/pencil.svg"; import uploadSVG from "../../assets/upload.svg"; import Layout_V2_Main from "../Layout/Layout_V2_Main"; +import React from "react"; const AdminPortal = () => { - return ( - <> - -
-
-
-
- Let's take a look inside Balancer's brain. You can manage the - brain from this portal. -
-
- {/*
*/} -
- -
-
- - Manage Files - - - Manage the files stored in the Balancer's brain - -
- Description of SVG -
- - -
-
- - Upload PDF - - - Add to Balancer's brain - -
- Description of SVG -
- - -
-
- - Ask General Questions - - - Get answers from Balancer's brain - -
- Description of SVG -
- - -
-
- - Rules Manager for Medication Suggester - - - Manage and view the rules for the Medication Suggester - -
- Description of SVG -
- - -
-
- - Medications Database Manager - - - Manager the Medications store currently inside Balancer's - brain - -
- Description of SVG + return ( + <> + +
+
+
+
+ Let's take a look inside Balancer's brain. You can manage the + brain from this portal. +
+
+ {/*
*/} +
+ + + +
+ + Manage Files + + + Manage the files stored in the Balancer's brain + +
+ Description of SVG + + + + + +
+ + Upload PDF + + + Add to Balancer's brain + +
+ Description of SVG + + + + + +
+ + Ask General Questions + + + Get answers from Balancer's brain + +
+ Description of SVG + + + + +
+ + Rules Manager + + + Manage and view the rules for the Medication Suggester + +
+ Description of SVG + + + + +
+ + Medications Database + + + Manager the Medications store currently inside Balancer's + brain + +
+ Description of SVG + + + +
+
- -
-
-
- - - ); + + + ); }; export default AdminPortal; + + +const AdminDashboardItemWrapper = ({children}: { children: React.ReactNode }) => { + return ( +
+ {children} +
+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx b/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx index e1c26f1b..19163290 100644 --- a/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx +++ b/frontend/src/pages/Layout/Layout_V2_Sidebar.tsx @@ -56,6 +56,20 @@ const Sidebar: React.FC = () => { } }; + useEffect(() => { + const handleResize = () => { + if (window.innerWidth < 640) { + setSidebarCollapsed(true) + } else { + setSidebarCollapsed(false) + } + } + + handleResize() + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) + return (