Skip to content

Janith2 #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kavindi487 merged 4 commits into from
Mar 16, 2026
Merged

Janith2 #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3b47247
Merge pull request #66 from Smart-Patient-Monitoring-System/main
JanithKR Mar 16, 2026
908bad6
before push 4
JanithKR Mar 16, 2026
3f8f9b6
before push 5
JanithKR Mar 16, 2026
e2dfdee
before push last
JanithKR Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
VITE_API_URL=http://localhost:8088
VITE_API_URL=http://localhost:8080
VITE_WS_URL=http://localhost:8080
VITE_CHATBOT_URL=http://localhost:8088
VITE_IOT_URL=http://localhost:8088
VITE_CHATBOT_URL=http://localhost:8080
VITE_IOT_URL=http://localhost:8080
193 changes: 89 additions & 104 deletions src/components/AdminPortal/AdminDashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";

import {
Bell,
Settings,
Activity,
Users,
UserCircle,
Expand All @@ -23,30 +22,48 @@ function AdminDashboard() {
const [hasNotification, setHasNotification] = useState(true);
const navigate = useNavigate();

const [adminData, setAdminData] = useState({ name: "", role: "" });

useEffect(() => {
const storedUser = localStorage.getItem("user");
if (storedUser) {
try {
const parsed = JSON.parse(storedUser);
setAdminData({
name: parsed.name || parsed.username || parsed.fullName || "Admin",
role: parsed.role || "Administrator",
});
} catch (e) {
console.error("Failed to parse user from localStorage", e);
}
}
}, []);

const handleLogout = () => {
// Clear authentication data
localStorage.removeItem("token");
localStorage.removeItem("user");

// Navigate to homepage
navigate("/");
};
const [activeTab, setActiveTab] = useState("users");

const [activeTab, setActiveTab] = useState("users");
const [doctorCount, setDoctorCount] = useState(0);
const [specialdoctorCount, setSpecialDoctorCount] = useState(0);
const [pendingdoctorCount, setPendingDoctorCount] = useState(0);
const [patientCount, setPatientCount] = useState(0);

useEffect(() => {
fetch("http://localhost:8080/api/dashboard/counts")
.then((res) => res.json())
.then((data) => {
console.log(data);

setDoctorCount(data.doctorCount);
setSpecialDoctorCount(data.specialdoctorCount)
setPatientCount(data.patientCount);
setPendingDoctorCount(data.pendingDoctorCount);
})
.catch((error) => console.error("Error fetching dashboard counts:", error));
}, []);

.catch((error) =>
console.error("Error fetching dashboard counts:", error)
);
}, []);

return (
<div className="min-h-screen bg-[#F0F6FF] transition-colors">
Expand Down Expand Up @@ -75,16 +92,16 @@ function AdminDashboard() {
Admin Portal
</h1>
<p className="text-sm text-gray-600">
Welcome, <span className="font-semibold">Section 7</span>{" "}
Janith
Welcome,{" "}
<span className="font-semibold">
{adminData.name || "..."}
</span>
</p>
</div>
</div>

{/* Right */}
<div className="flex items-center gap-3">

{/* Logout */}
<button
onClick={handleLogout}
className="rounded-lg px-4 py-2 shadow-xl text-white font-medium"
Expand All @@ -102,8 +119,8 @@ function AdminDashboard() {

{/* === STATS CARDS === */}
<div className="px-6 mt-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

{/* Active Doctors */}
<div className="bg-[#E9FBF6] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div>
Expand All @@ -112,63 +129,58 @@ function AdminDashboard() {
</div>
<p className="text-sm text-gray-600">Active Doctors</p>
</div>

<h2 className="text-3xl font-bold text-gray-800">
{doctorCount === 0 ? "..." : doctorCount}
</h2>
</div>

{/* Special Doctors */}
{/* Special Doctors
<div className="bg-[#F5F0FF] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div>
<div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center mb-3">
<Users className="text-white w-5 h-5" />
</div>
<p className="text-sm text-gray-600">Special Doctors</p>
</div>

<h2 className="text-3xl font-bold text-gray-800">
{specialdoctorCount === 0 ? "..." : specialdoctorCount}
</h2>
</div>
</div> */}

{/* Active Patients */}
<div className="bg-[#E9FBF6] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div className="bg-[#F5F0FF] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div>
<div className="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center mb-3">
<div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center mb-3">
<Activity className="text-white w-5 h-5" />
</div>
<p className="text-sm text-gray-600">Active Patients</p>
</div>

<h2 className="text-3xl font-bold text-gray-800">
{patientCount === 0 ? "..." : patientCount}
</h2>
</div>

{/* Pending Doctors */}
<div className="bg-[#F5F0FF] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div className="bg-[#E9FBF6] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div>
<div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center mb-3">
<div className="w-10 h-10 bg-teal-500 rounded-lg flex items-center justify-center mb-3">
<Bell className="text-white w-5 h-5" />
</div>
<p className="text-sm text-gray-600">Pending Doctors</p>
</div>

<h2 className="text-3xl font-bold text-gray-800">
23
{pendingdoctorCount ?? "..."}
</h2>
</div>

{/* IoT Devices */}
<div className="bg-[#E9FBF6] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div className="bg-[#F5F0FF] rounded-2xl p-5 shadow-md flex justify-between items-center">
<div>
<div className="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center mb-3">
<div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center mb-3">
<TrendingUp className="text-white w-5 h-5" />
</div>
<p className="text-sm text-gray-600">IOT Devices</p>
</div>

<h2 className="text-3xl font-bold text-gray-800">23</h2>
</div>

Expand All @@ -179,62 +191,49 @@ function AdminDashboard() {
<div className="px-6 mt-8">
<div className="bg-white rounded-3xl shadow-md p-2 flex gap-3 w-fit">



<button
onClick={() => setActiveTab("users")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "users"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "users"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "users"
? {
background:
"linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)",
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Doctor Management
</button>

{/*
<button
onClick={() => setActiveTab("logs")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "logs"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "logs"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "logs"
? {
background:
"linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)",
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Special Doctors
</button>
</button> */}

<button
onClick={() => setActiveTab("patients")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "patients"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "patients"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "patients"
? {
background:
"linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)",
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Expand All @@ -243,18 +242,14 @@ function AdminDashboard() {

<button
onClick={() => setActiveTab("iot")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "iot"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "iot"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "iot"
? {
background:
"linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)",
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Expand All @@ -263,18 +258,14 @@ function AdminDashboard() {

<button
onClick={() => setActiveTab("accept")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "accept"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "accept"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "accept"
? {
background:
"linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)",
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Expand All @@ -283,18 +274,14 @@ function AdminDashboard() {

<button
onClick={() => setActiveTab("booking")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "booking"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "booking"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "booking"
? {
background:
"linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)",
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Expand All @@ -303,26 +290,24 @@ function AdminDashboard() {

<button
onClick={() => setActiveTab("admins")}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all
${
activeTab === "admins"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-3xl text-sm font-medium transition-all ${
activeTab === "admins"
? "text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
style={
activeTab === "admins"
? {
background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)"
}
? { background: "linear-gradient(45deg, #007CFC 0%, #11C2BA 100%)" }
: {}
}
>
Admin Management
</button>


</div>
</div>

{/* === TAB CONTENT === */}
<div className="px-6 mt-6">
{activeTab === "users" && <UserManagement />}
{activeTab === "accept" && <PendingDoctors />}
Expand All @@ -337,4 +322,4 @@ function AdminDashboard() {
);
}

export default AdminDashboard;
export default AdminDashboard;
Loading