Skip to content

Commit 739533b

Browse files
annunziatocannunziatoc
committed
Reworked the Admin Portal UI, preventing overflows and generally improved the UX. In addition to fixing mobile to close the sidebar by default.
1 parent ff18a30 commit 739533b

File tree

2 files changed

+135
-105
lines changed

2 files changed

+135
-105
lines changed

‎frontend/src/pages/AdminPortal/AdminPortal.tsx‎

Lines changed: 121 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,131 @@
11
//import Welcome from "../../components/Welcome/Welcome.tsx";
2-
import { Link } from "react-router-dom";
2+
import {Link} from "react-router-dom";
33
import pencilSVG from "../../assets/pencil.svg";
44
import uploadSVG from "../../assets/upload.svg";
55
import Layout_V2_Main from "../Layout/Layout_V2_Main";
6+
import React from "react";
67

78
const AdminPortal = () => {
8-
return (
9-
<>
10-
<Layout_V2_Main>
11-
<div className="flex h-full w-full justify-center">
12-
<div className="mt-10 flex w-1/2 flex-col">
13-
<div className="mb-8 items-center justify-center">
14-
<div className="text-lg text-gray-500">
15-
Let's take a look inside Balancer's brain. You can manage the
16-
brain from this portal.
17-
</div>
18-
</div>
19-
{/* <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2"> */}
20-
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 ">
21-
<Link to={`/listoffiles`} className="w-full">
22-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
23-
<div>
24-
<span className="text-md mb-0.5 block font-semibold">
25-
Manage Files
26-
</span>
27-
<span className="text-textGray block text-sm">
28-
Manage the files stored in the Balancer's brain
29-
</span>
30-
</div>
31-
<img
32-
src={pencilSVG}
33-
alt="Description of SVG"
34-
className="mr-2 h-5 w-5"
35-
></img>
36-
</div>
37-
</Link>
38-
<Link to={`/UploadFile`} className="w-full">
39-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
40-
<div>
41-
<span className="text-md mb-0.5 block font-semibold">
42-
Upload PDF
43-
</span>
44-
<span className="text-textGray block text-sm">
45-
Add to Balancer's brain
46-
</span>
47-
</div>
48-
<img
49-
src={uploadSVG}
50-
alt="Description of SVG"
51-
className="mr-2 h-5 w-5"
52-
></img>
53-
</div>
54-
</Link>
55-
<Link to={`/drugSummary`} className="w-full">
56-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
57-
<div>
58-
<span className="text-md mb-0.5 block font-semibold">
59-
Ask General Questions
60-
</span>
61-
<span className="text-textGray block text-sm">
62-
Get answers from Balancer's brain
63-
</span>
64-
</div>
65-
<img
66-
src={uploadSVG}
67-
alt="Description of SVG"
68-
className="mr-2 h-5 w-5"
69-
></img>
70-
</div>
71-
</Link>
72-
<Link to={`/rulesmanager`} className="w-full">
73-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
74-
<div>
75-
<span className="text-md mb-0.5 block font-semibold">
76-
Rules Manager for Medication Suggester
77-
</span>
78-
<span className="text-textGray block text-sm">
79-
Manage and view the rules for the Medication Suggester
80-
</span>
81-
</div>
82-
<img
83-
src={uploadSVG}
84-
alt="Description of SVG"
85-
className="mr-2 h-5 w-5"
86-
></img>
87-
</div>
88-
</Link>
89-
<Link to={`/ManageMeds`} className="w-full">
90-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
91-
<div>
92-
<span className="text-md mb-0.5 block font-semibold">
93-
Medications Database Manager
94-
</span>
95-
<span className="text-textGray block text-sm">
96-
Manager the Medications store currently inside Balancer's
97-
brain
98-
</span>
99-
</div>
100-
<img
101-
src={uploadSVG}
102-
alt="Description of SVG"
103-
className="mr-2 h-5 w-5"
104-
></img>
9+
return (
10+
<>
11+
<Layout_V2_Main>
12+
<div className="flex h-full w-full justify-center">
13+
<div className="mt-10 flex flex-col w-3/4 md:w-2/3 max-w-3xl">
14+
<div className="mb-8 items-center justify-center">
15+
<div className="text-lg text-gray-500">
16+
Let's take a look inside Balancer's brain. You can manage the
17+
brain from this portal.
18+
</div>
19+
</div>
20+
{/* <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2"> */}
21+
<div className="mb-8 grid grid-cols-1 lg:grid-cols-2 gap-4 ">
22+
23+
<Link to={`/listoffiles`} className="w-full">
24+
<AdminDashboardItemWrapper>
25+
<div className="min-w-0">
26+
<span className="text-md mb-0.5 block font-semibold">
27+
Manage Files
28+
</span>
29+
<span className="text-textGray block text-sm truncate">
30+
Manage the files stored in the Balancer's brain
31+
</span>
32+
</div>
33+
<img
34+
src={pencilSVG}
35+
alt="Description of SVG"
36+
className="mr-2 h-5 w-5"
37+
></img>
38+
</AdminDashboardItemWrapper>
39+
</Link>
40+
41+
<Link to={`/UploadFile`} className="w-full">
42+
<AdminDashboardItemWrapper>
43+
<div className="min-w-0">
44+
<span className="text-md mb-0.5 block font-semibold">
45+
Upload PDF
46+
</span>
47+
<span className="text-textGray block text-sm truncate">
48+
Add to Balancer's brain
49+
</span>
50+
</div>
51+
<img
52+
src={uploadSVG}
53+
alt="Description of SVG"
54+
className="mr-2 h-5 w-5"
55+
></img>
56+
57+
</AdminDashboardItemWrapper>
58+
</Link>
59+
<Link to={`/drugSummary`} className="w-full">
60+
<AdminDashboardItemWrapper>
61+
<div className="min-w-0">
62+
<span className="text-md mb-0.5 block font-semibold">
63+
Ask General Questions
64+
</span>
65+
<span className="text-textGray block text-sm truncate">
66+
Get answers from Balancer's brain
67+
</span>
68+
</div>
69+
<img
70+
src={uploadSVG}
71+
alt="Description of SVG"
72+
className="mr-2 h-5 w-5"
73+
></img>
74+
</AdminDashboardItemWrapper>
75+
</Link>
76+
<Link to={`/rulesmanager`} className="w-full">
77+
<AdminDashboardItemWrapper>
78+
<div className="min-w-0">
79+
<span className="text-md mb-0.5 block font-semibold">
80+
Rules Manager
81+
</span>
82+
<span
83+
className="text-textGray block text-sm truncate">
84+
Manage and view the rules for the Medication Suggester
85+
</span>
86+
</div>
87+
<img
88+
src={uploadSVG}
89+
alt="Description of SVG"
90+
className="mr-2 h-5 w-5"
91+
></img>
92+
</AdminDashboardItemWrapper>
93+
</Link>
94+
<Link to={`/ManageMeds`} className="w-full">
95+
<AdminDashboardItemWrapper>
96+
<div className="min-w-0">
97+
<span className="text-md mb-0.5 block font-semibold">
98+
Medications Database
99+
</span>
100+
<span className="text-textGray block text-sm truncate ">
101+
Manager the Medications store currently inside Balancer's
102+
brain
103+
</span>
104+
</div>
105+
<img
106+
src={uploadSVG}
107+
alt="Description of SVG"
108+
className="mr-2 h-5 w-5"
109+
></img>
110+
</AdminDashboardItemWrapper>
111+
112+
</Link>
113+
</div>
114+
</div>
105115
</div>
106-
</Link>
107-
</div>
108-
</div>
109-
</div>
110-
</Layout_V2_Main>
111-
</>
112-
);
116+
</Layout_V2_Main>
117+
</>
118+
);
113119
};
114120

115121
export default AdminPortal;
122+
123+
124+
const AdminDashboardItemWrapper = ({children}: { children: React.ReactNode }) => {
125+
return (
126+
<div
127+
className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.75rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100 max-w-[26rem]">
128+
{children}
129+
</div>
130+
)
131+
}

‎frontend/src/pages/Layout/Layout_V2_Sidebar.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,20 @@ const Sidebar: React.FC = () => {
5656
}
5757
};
5858

59+
useEffect(() => {
60+
const handleResize = () => {
61+
if (window.innerWidth < 640) {
62+
setSidebarCollapsed(true)
63+
} else {
64+
setSidebarCollapsed(false)
65+
}
66+
}
67+
68+
handleResize()
69+
window.addEventListener('resize', handleResize)
70+
return () => window.removeEventListener('resize', handleResize)
71+
}, [])
72+
5973
return (
6074
<div
6175
className={`z-10 h-screen ${

0 commit comments

Comments
 (0)