From d2e9942edd45be423baa02b18779bbec7f4a0d54 Mon Sep 17 00:00:00 2001
From: munnokd <kalp2002prajapati@gmail.com>
Date: Tue, 31 Mar 2026 22:40:24 +1100
Subject: [PATCH 01/10] Doctor role has been added to the frontend code

---
 app/src/main/AndroidManifest.xml                       |  3 +++
 .../java/deakin/gopher/guardian/model/login/Role.kt    |  6 ++++++
 .../gopher/guardian/services/NavigationService.kt      | 10 ++++++++++
 .../gopher/guardian/view/general/MainActivity.kt       |  3 +++
 4 files changed, 22 insertions(+)

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 837d337b7..31d6a312a 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -69,6 +69,9 @@
         <activity
             android:name=".view.general.Homepage4nurse"
             android:exported="false" />
+        <activity
+            android:name=".view.general.Homepage4doctor"
+            android:exported="false" />
         <activity
             android:name=".view.general.TaskDetailActivity"
             android:exported="false" />
diff --git a/app/src/main/java/deakin/gopher/guardian/model/login/Role.kt b/app/src/main/java/deakin/gopher/guardian/model/login/Role.kt
index b868e8fe4..ca2e86634 100644
--- a/app/src/main/java/deakin/gopher/guardian/model/login/Role.kt
+++ b/app/src/main/java/deakin/gopher/guardian/model/login/Role.kt
@@ -16,16 +16,22 @@ sealed class Role(val name: String) : Serializable {
         private fun readResolve(): Any = Nurse
     }
 
+    data object Doctor : Role("doctor") {
+        private fun readResolve(): Any = Doctor
+    }
+
     companion object {
         private const val CARETAKER_ROLE = "caretaker"
         private const val ADMIN_ROLE = "admin"
         private const val NURSE_ROLE = "nurse"
+        private const val DOCTOR_ROLE = "doctor"
 
         fun create(name: String): Role {
             return when (name.lowercase()) {
                 CARETAKER_ROLE.lowercase() -> Caretaker
                 ADMIN_ROLE.lowercase() -> Admin
                 NURSE_ROLE.lowercase() -> Nurse
+                DOCTOR_ROLE.lowercase() -> Doctor
                 else -> throw IllegalArgumentException("Unknown role: $name")
             }
         }
diff --git a/app/src/main/java/deakin/gopher/guardian/services/NavigationService.kt b/app/src/main/java/deakin/gopher/guardian/services/NavigationService.kt
index 255c2e34f..c0b2775d5 100644
--- a/app/src/main/java/deakin/gopher/guardian/services/NavigationService.kt
+++ b/app/src/main/java/deakin/gopher/guardian/services/NavigationService.kt
@@ -5,6 +5,7 @@ import android.content.Intent
 import deakin.gopher.guardian.model.login.Role
 import deakin.gopher.guardian.view.general.Homepage4admin
 import deakin.gopher.guardian.view.general.Homepage4caretaker
+import deakin.gopher.guardian.view.general.Homepage4doctor
 import deakin.gopher.guardian.view.general.Homepage4nurse
 import deakin.gopher.guardian.view.general.LoginActivity
 import deakin.gopher.guardian.view.general.PatientListActivity
@@ -43,6 +44,15 @@ class NavigationService(val activity: Activity) {
                     ),
                 )
             }
+
+            Role.Doctor -> {
+                activity.startActivity(
+                    Intent(
+                        activity.applicationContext,
+                        Homepage4doctor::class.java,
+                    ),
+                )
+            }
         }
     }
 
diff --git a/app/src/main/java/deakin/gopher/guardian/view/general/MainActivity.kt b/app/src/main/java/deakin/gopher/guardian/view/general/MainActivity.kt
index 5304cba68..3636d34d2 100644
--- a/app/src/main/java/deakin/gopher/guardian/view/general/MainActivity.kt
+++ b/app/src/main/java/deakin/gopher/guardian/view/general/MainActivity.kt
@@ -47,6 +47,9 @@ class MainActivity : BaseActivity() {
                 Role.Nurse -> {
                     startActivity(Intent(this@MainActivity, Homepage4nurse::class.java))
                 }
+                Role.Doctor -> {
+                    startActivity(Intent(this@MainActivity, Homepage4doctor::class.java))
+                }
             }
         }
     }

From 711d33ae46a899bd814bd413dff4a09eb5cb0fcc Mon Sep 17 00:00:00 2001
From: munnokd <kalp2002prajapati@gmail.com>
Date: Tue, 31 Mar 2026 22:44:16 +1100
Subject: [PATCH 02/10] Doctor role has been added to the frontend code

---
 .../guardian/view/general/Homepage4doctor.kt  | 20 +++++++++++++
 .../res/layout/activity_homepage4doctor.xml   | 29 +++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 app/src/main/java/deakin/gopher/guardian/view/general/Homepage4doctor.kt
 create mode 100644 app/src/main/res/layout/activity_homepage4doctor.xml

diff --git a/app/src/main/java/deakin/gopher/guardian/view/general/Homepage4doctor.kt b/app/src/main/java/deakin/gopher/guardian/view/general/Homepage4doctor.kt
new file mode 100644
index 000000000..fb2461467
--- /dev/null
+++ b/app/src/main/java/deakin/gopher/guardian/view/general/Homepage4doctor.kt
@@ -0,0 +1,20 @@
+package deakin.gopher.guardian.view.general
+
+import android.os.Bundle
+import android.widget.Button
+import androidx.appcompat.app.AppCompatActivity
+import deakin.gopher.guardian.R
+import deakin.gopher.guardian.services.EmailPasswordAuthService
+
+class Homepage4doctor : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_homepage4doctor)
+
+        val signOutButton: Button = findViewById(R.id.signOutButton_doctor)
+        signOutButton.setOnClickListener {
+            EmailPasswordAuthService.signOut(this)
+            finish()
+        }
+    }
+}
diff --git a/app/src/main/res/layout/activity_homepage4doctor.xml b/app/src/main/res/layout/activity_homepage4doctor.xml
new file mode 100644
index 000000000..6e7936f35
--- /dev/null
+++ b/app/src/main/res/layout/activity_homepage4doctor.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <TextView
+        android:id="@+id/welcomeDoctorText"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Welcome Doctor"
+        android:textSize="24sp"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <Button
+        android:id="@+id/signOutButton_doctor"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="24dp"
+        android:text="Sign Out"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/welcomeDoctorText" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

From 7285e6652b09a04803cbe302237343f58c04fabf Mon Sep 17 00:00:00 2001
From: Dilmi Gunaratne <127681242+dilmigunaratne@users.noreply.github.com>
Date: Wed, 1 Apr 2026 10:32:23 +1100
Subject: [PATCH 03/10] dded reusable loading, empty and error UI components
 with testing

---
 .../deakin/gopher/guardian/WelcomeActivity.kt |  58 +++++++-
 .../gopher/guardian/components/EmptyView.kt   |  36 +++++
 .../gopher/guardian/components/ErrorView.kt   |  44 +++++++
 .../gopher/guardian/components/LoadingView.kt |  25 ++++
 app/src/main/res/layout/activity_welcome.xml  | 124 +++++++++++++-----
 app/src/main/res/layout/view_empty.xml        |  16 +++
 app/src/main/res/layout/view_error.xml        |  23 ++++
 app/src/main/res/layout/view_loading.xml      |  15 +++
 8 files changed, 308 insertions(+), 33 deletions(-)
 create mode 100644 app/src/main/java/deakin/gopher/guardian/components/EmptyView.kt
 create mode 100644 app/src/main/java/deakin/gopher/guardian/components/ErrorView.kt
 create mode 100644 app/src/main/java/deakin/gopher/guardian/components/LoadingView.kt
 create mode 100644 app/src/main/res/layout/view_empty.xml
 create mode 100644 app/src/main/res/layout/view_error.xml
 create mode 100644 app/src/main/res/layout/view_loading.xml

diff --git a/app/src/main/java/deakin/gopher/guardian/WelcomeActivity.kt b/app/src/main/java/deakin/gopher/guardian/WelcomeActivity.kt
index 4c2b2ab62..45ecec4b8 100644
--- a/app/src/main/java/deakin/gopher/guardian/WelcomeActivity.kt
+++ b/app/src/main/java/deakin/gopher/guardian/WelcomeActivity.kt
@@ -1,11 +1,67 @@
 package deakin.gopher.guardian
 
 import android.os.Bundle
+import android.os.Handler
+import android.os.Looper
+import android.view.View
+import android.widget.Button
+import deakin.gopher.guardian.components.EmptyView
+import deakin.gopher.guardian.components.ErrorView
+import deakin.gopher.guardian.components.LoadingView
 import androidx.appcompat.app.AppCompatActivity
 
 class WelcomeActivity : AppCompatActivity() {
+
+    private lateinit var loadingView: LoadingView
+    private lateinit var emptyView: EmptyView
+    private lateinit var errorView: ErrorView
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_welcome) // This links to your activity_welcome.xml
+
+        loadingView = findViewById(R.id.loadingView)
+        emptyView = findViewById(R.id.emptyView)
+        errorView = findViewById(R.id.errorView)
+
+        val btnShowLoading = findViewById<Button>(R.id.btnShowLoading)
+        val btnShowEmpty = findViewById<Button>(R.id.btnShowEmpty)
+        val btnShowError = findViewById<Button>(R.id.btnShowError)
+        val btnHideAll = findViewById<Button>(R.id.btnHideAll)
+
+        btnShowLoading.setOnClickListener {
+            hideAllStateViews()
+            loadingView.show()
+        }
+
+        btnShowEmpty.setOnClickListener {
+            hideAllStateViews()
+            emptyView.show("No records found")
+        }
+
+        btnShowError.setOnClickListener {
+            hideAllStateViews()
+            errorView.show("Failed to load data")
+        }
+
+        btnHideAll.setOnClickListener {
+            hideAllStateViews()
+        }
+
+        errorView.setOnRetryClick {
+            hideAllStateViews()
+            loadingView.show()
+
+            loadingView.postDelayed({
+                loadingView.hide()
+                emptyView.show("Retry completed, but no data available")
+            }, 2000)
+        }
+    }
+
+    private fun hideAllStateViews() {
+        loadingView.hide()
+        emptyView.hide()
+        errorView.hide()
     }
-}
+}
\ No newline at end of file
diff --git a/app/src/main/java/deakin/gopher/guardian/components/EmptyView.kt b/app/src/main/java/deakin/gopher/guardian/components/EmptyView.kt
new file mode 100644
index 000000000..a58196d71
--- /dev/null
+++ b/app/src/main/java/deakin/gopher/guardian/components/EmptyView.kt
@@ -0,0 +1,36 @@
+package deakin.gopher.guardian.components
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.FrameLayout
+import android.widget.TextView
+import deakin.gopher.guardian.R
+
+class EmptyView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null
+) : FrameLayout(context, attrs) {
+
+    private val message: TextView
+
+    init {
+        LayoutInflater.from(context).inflate(R.layout.view_empty, this, true)
+        visibility = GONE
+        message = findViewById(R.id.emptyMessage)
+    }
+
+    fun setMessage(text: String) {
+        message.text = text
+    }
+
+    fun show(messageText: String? = null) {
+        if (messageText != null) {
+            message.text = messageText
+        }
+        visibility = VISIBLE
+    }
+
+    fun hide() {
+        visibility = GONE
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/deakin/gopher/guardian/components/ErrorView.kt b/app/src/main/java/deakin/gopher/guardian/components/ErrorView.kt
new file mode 100644
index 000000000..fd2561c95
--- /dev/null
+++ b/app/src/main/java/deakin/gopher/guardian/components/ErrorView.kt
@@ -0,0 +1,44 @@
+package deakin.gopher.guardian.components
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.Button
+import android.widget.FrameLayout
+import android.widget.TextView
+import deakin.gopher.guardian.R
+
+class ErrorView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null
+) : FrameLayout(context, attrs) {
+
+    private val message: TextView
+    private val retryButton: Button
+
+    init {
+        LayoutInflater.from(context).inflate(R.layout.view_error, this, true)
+        visibility = GONE
+
+        message = findViewById(R.id.errorMessage)
+        retryButton = findViewById(R.id.retryButton)
+    }
+
+    fun setMessage(text: String) {
+        message.text = text
+    }
+
+    fun setOnRetryClick(listener: () -> Unit) {
+        retryButton.setOnClickListener { listener() }
+    }
+
+    fun show(messageText: String? = null) {
+        if (messageText != null) {
+            message.text = messageText
+        }
+        visibility = VISIBLE
+    }
+
+    fun hide() {
+        visibility = GONE
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/deakin/gopher/guardian/components/LoadingView.kt b/app/src/main/java/deakin/gopher/guardian/components/LoadingView.kt
new file mode 100644
index 000000000..05d8332c0
--- /dev/null
+++ b/app/src/main/java/deakin/gopher/guardian/components/LoadingView.kt
@@ -0,0 +1,25 @@
+package deakin.gopher.guardian.components
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.FrameLayout
+import deakin.gopher.guardian.R
+
+class LoadingView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null
+) : FrameLayout(context, attrs) {
+
+    init {
+        LayoutInflater.from(context).inflate(R.layout.view_loading, this, true)
+        visibility = GONE
+    }
+
+    fun show() {
+        visibility = VISIBLE
+    }
+
+    fun hide() {
+        visibility = GONE
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_welcome.xml b/app/src/main/res/layout/activity_welcome.xml
index 31ef14dcf..867f4c8d6 100644
--- a/app/src/main/res/layout/activity_welcome.xml
+++ b/app/src/main/res/layout/activity_welcome.xml
@@ -1,38 +1,98 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:context=".WelcomeActivity"
-    android:padding="16dp">
-
-    <!-- Welcome Message -->
-    <TextView
-        android:id="@+id/welcomeMessage"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="@string/welcome_message"
-        android:textSize="22sp"
-        android:textStyle="bold"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        android:layout_marginTop="50dp" />
-
-    <!-- Detailed Description -->
-    <TextView
-        android:id="@+id/welcomeDescription"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="@string/welcome_description"
-        android:textSize="16sp"
-        app:layout_constraintTop_toBottomOf="@id/welcomeMessage"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        android:layout_marginTop="20dp"
-        android:padding="16dp" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
+    tools:context=".WelcomeActivity">
 
+    <!-- YOUR ORIGINAL CONTENT -->
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/contentLayout"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:padding="16dp">
+
+        <!-- Welcome Message -->
+        <TextView
+            android:id="@+id/welcomeMessage"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/welcome_message"
+            android:textSize="22sp"
+            android:textStyle="bold"
+            android:layout_marginTop="50dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent" />
+
+        <!-- Description -->
+        <TextView
+            android:id="@+id/welcomeDescription"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/welcome_description"
+            android:textSize="16sp"
+            android:layout_marginTop="20dp"
+            android:padding="16dp"
+            app:layout_constraintTop_toBottomOf="@id/welcomeMessage"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent" />
+
+        <!-- TEST BUTTONS -->
+        <Button
+            android:id="@+id/btnShowLoading"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Show Loading"
+            app:layout_constraintTop_toBottomOf="@id/welcomeDescription"
+            app:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="20dp" />
+
+        <Button
+            android:id="@+id/btnShowEmpty"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Show Empty"
+            app:layout_constraintTop_toBottomOf="@id/btnShowLoading"
+            app:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="12dp" />
+
+        <Button
+            android:id="@+id/btnShowError"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Show Error"
+            app:layout_constraintTop_toBottomOf="@id/btnShowEmpty"
+            app:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="12dp" />
+
+        <Button
+            android:id="@+id/btnHideAll"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Hide All"
+            app:layout_constraintTop_toBottomOf="@id/btnShowError"
+            app:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="12dp" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <!-- OVERLAY VIEWS (VERY IMPORTANT: OUTSIDE ConstraintLayout) -->
+
+    <deakin.gopher.guardian.components.LoadingView
+        android:id="@+id/loadingView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <deakin.gopher.guardian.components.EmptyView
+        android:id="@+id/emptyView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <deakin.gopher.guardian.components.ErrorView
+        android:id="@+id/errorView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+</FrameLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/view_empty.xml b/app/src/main/res/layout/view_empty.xml
new file mode 100644
index 000000000..2234ee551
--- /dev/null
+++ b/app/src/main/res/layout/view_empty.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:gravity="center"
+    android:orientation="vertical"
+    android:padding="24dp">
+
+    <TextView
+        android:id="@+id/emptyMessage"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="No data available"
+        android:textSize="16sp" />
+
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/view_error.xml b/app/src/main/res/layout/view_error.xml
new file mode 100644
index 000000000..be52d57d8
--- /dev/null
+++ b/app/src/main/res/layout/view_error.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:gravity="center"
+    android:orientation="vertical"
+    android:padding="24dp">
+
+    <TextView
+        android:id="@+id/errorMessage"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="12dp"
+        android:text="Something went wrong"
+        android:textSize="16sp" />
+
+    <Button
+        android:id="@+id/retryButton"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Retry" />
+
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/view_loading.xml b/app/src/main/res/layout/view_loading.xml
new file mode 100644
index 000000000..1b7c062fe
--- /dev/null
+++ b/app/src/main/res/layout/view_loading.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:foregroundGravity="center"
+    android:clickable="true"
+    android:focusable="true">
+
+    <ProgressBar
+        android:id="@+id/progressBar"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center" />
+
+</FrameLayout>
\ No newline at end of file

From 68f6028d4e17274940b5404cf9ab92d155ddd236 Mon Sep 17 00:00:00 2001
From: Thisara Jayamuni <thisara.jayamuni95@gmail.com>
Date: Wed, 1 Apr 2026 17:18:51 +1100
Subject: [PATCH 04/10] Staff Management UI Design

---
 guardian-admin-dashboard/package-lock.json    | 176 ++++++++++++++-
 guardian-admin-dashboard/package.json         |   4 +-
 .../src/components/common/Button.jsx          |   2 +
 .../src/components/common/Dropdown.jsx        |  70 ++++++
 .../src/components/common/Modal.jsx           |  37 ++++
 guardian-admin-dashboard/src/index.css        | 200 ++++++++++++++++++
 .../src/pages/StaffManagementPage.jsx         | 169 ++++++++++++++-
 7 files changed, 642 insertions(+), 16 deletions(-)
 create mode 100644 guardian-admin-dashboard/src/components/common/Dropdown.jsx
 create mode 100644 guardian-admin-dashboard/src/components/common/Modal.jsx

diff --git a/guardian-admin-dashboard/package-lock.json b/guardian-admin-dashboard/package-lock.json
index 46a675160..334a74566 100644
--- a/guardian-admin-dashboard/package-lock.json
+++ b/guardian-admin-dashboard/package-lock.json
@@ -12,8 +12,10 @@
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.6.0",
         "react": "^19.1.0",
+        "react-data-table-component": "^7.7.0",
         "react-dom": "^19.1.0",
-        "react-router-dom": "^7.13.2"
+        "react-router-dom": "^7.13.2",
+        "styled-components": "^6.3.12"
       },
       "devDependencies": {
         "@eslint/js": "^9.30.1",
@@ -323,6 +325,27 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.8",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.8.tgz",
@@ -1390,6 +1413,12 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.7",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.7.tgz",
+      "integrity": "sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1565,6 +1594,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001731",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz",
@@ -1677,11 +1715,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -1709,6 +1766,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2604,7 +2670,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2720,7 +2785,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -2765,6 +2829,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -2800,6 +2870,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-data-table-component": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.7.0.tgz",
+      "integrity": "sha512-5knL6zMSKlbvzu9P04KM5Lx8/EyQujb4I9z3rWeoVX++IDJadQ7aR4X5J6EeS90wjK0Xoa6btaVeglnCAqD2ag==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.0",
+        "styled-components": ">= 5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "styled-components": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
@@ -2932,6 +3020,12 @@
       "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2959,7 +3053,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2978,6 +3071,73 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.3.12",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.3.12.tgz",
+      "integrity": "sha512-hFR6xsVkVYbsdcUlzPYFvFfoc6o2KlV0VvgRIQwSYMtdThM7SCxnjX9efh/cWce2kTq16I/Kl3xM98xiLptsXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.4.0",
+        "@emotion/unitless": "0.10.0",
+        "@types/stylis": "4.2.7",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.2.3",
+        "postcss": "8.4.49",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.6",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/guardian-admin-dashboard/package.json b/guardian-admin-dashboard/package.json
index 844ce001b..9547841e6 100644
--- a/guardian-admin-dashboard/package.json
+++ b/guardian-admin-dashboard/package.json
@@ -14,8 +14,10 @@
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.6.0",
     "react": "^19.1.0",
+    "react-data-table-component": "^7.7.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.13.2"
+    "react-router-dom": "^7.13.2",
+    "styled-components": "^6.3.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
diff --git a/guardian-admin-dashboard/src/components/common/Button.jsx b/guardian-admin-dashboard/src/components/common/Button.jsx
index 44c0d061f..8e0de450d 100644
--- a/guardian-admin-dashboard/src/components/common/Button.jsx
+++ b/guardian-admin-dashboard/src/components/common/Button.jsx
@@ -6,6 +6,7 @@ export default function Button({
   onClick,
   disabled = false,
   fullWidth = false,
+  style,
 }) {
   return (
     <motion.button
@@ -13,6 +14,7 @@ export default function Button({
       onClick={onClick}
       disabled={disabled}
       className={`ui-button ${fullWidth ? "full-width" : ""}`}
+      style={{ display: "inline-flex", alignItems: "center", gap: "8px", ...style }}
       whileHover={{ y: -1, scale: 1.01 }}
       whileTap={{ scale: 0.99 }}
     >
diff --git a/guardian-admin-dashboard/src/components/common/Dropdown.jsx b/guardian-admin-dashboard/src/components/common/Dropdown.jsx
new file mode 100644
index 000000000..27e84d6af
--- /dev/null
+++ b/guardian-admin-dashboard/src/components/common/Dropdown.jsx
@@ -0,0 +1,70 @@
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const MotionSpan = motion.span;
+const MotionUl = motion.ul;
+
+export default function Dropdown({ label, name, value, onChange, options = [], placeholder }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  const selected = options.find((o) => o.value === value);
+
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  function handleSelect(optValue) {
+    onChange({ target: { name, value: optValue } });
+    setOpen(false);
+  }
+
+  return (
+    <div className="field">
+      {label && <span className="field-label">{label}</span>}
+      <div className="dropdown-wrapper" ref={ref}>
+        <button
+          type="button"
+          className={`field-input dropdown-trigger${!value ? ' placeholder-shown' : ''}`}
+          onClick={() => setOpen((prev) => !prev)}
+        >
+          <span>{selected ? selected.label : placeholder}</span>
+          <MotionSpan
+            animate={{ rotate: open ? 180 : 0 }}
+            transition={{ duration: 0.2 }}
+            style={{ display: 'inline-flex' }}
+          >
+            <ChevronDown size={16} />
+          </MotionSpan>
+        </button>
+
+        <AnimatePresence>
+          {open && (
+            <MotionUl
+              className="dropdown-menu"
+              initial={{ opacity: 0, y: -6, scale: 0.98 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: -6, scale: 0.98 }}
+              transition={{ duration: 0.15 }}
+            >
+              {options.map((opt) => (
+                <li
+                  key={opt.value}
+                  className={`dropdown-option${opt.value === value ? ' selected' : ''}`}
+                  onClick={() => handleSelect(opt.value)}
+                >
+                  {opt.label}
+                </li>
+              ))}
+            </MotionUl>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/guardian-admin-dashboard/src/components/common/Modal.jsx b/guardian-admin-dashboard/src/components/common/Modal.jsx
new file mode 100644
index 000000000..bb38693cd
--- /dev/null
+++ b/guardian-admin-dashboard/src/components/common/Modal.jsx
@@ -0,0 +1,37 @@
+import { X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function Modal({ open, onClose, title, children }) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            className="modal-backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+          />
+          <div className="modal-container">
+            <motion.div
+              className="modal"
+              initial={{ opacity: 0, y: 24, scale: 0.97 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 16, scale: 0.97 }}
+              transition={{ duration: 0.22 }}
+            >
+              <div className="modal-header">
+                <h3 className="modal-title">{title}</h3>
+                <button className="modal-close" onClick={onClose} aria-label="Close">
+                  <X size={18} />
+                </button>
+              </div>
+              <div className="modal-body">{children}</div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/guardian-admin-dashboard/src/index.css b/guardian-admin-dashboard/src/index.css
index fd883b28e..577413883 100644
--- a/guardian-admin-dashboard/src/index.css
+++ b/guardian-admin-dashboard/src/index.css
@@ -321,6 +321,10 @@ a {
   gap: 8px;
 }
 
+.dropdown-wrapper {
+  position: relative;
+}
+
 .field-label {
   font-size: 0.92rem;
   font-weight: 700;
@@ -337,6 +341,81 @@ a {
   outline: none;
 }
 
+.field-select {
+  cursor: pointer;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  text-align: left;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 15px 16px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.dropdown-trigger.placeholder-shown {
+  color: #94a3b8;
+}
+
+.dropdown-trigger:focus {
+  outline: none;
+  border-color: rgba(79, 160, 200, 0.9);
+  box-shadow: 0 0 0 4px rgba(79, 160, 200, 0.14);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 200;
+  padding: 6px;
+  list-style: none;
+  margin: 0;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-lg);
+}
+
+.dropdown-option {
+  padding: 10px 14px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+
+.dropdown-option:hover {
+  background: #f0f7fc;
+  color: var(--primary-dark);
+}
+
+.dropdown-option.selected {
+  background: rgba(79, 160, 200, 0.12);
+  color: var(--primary-dark);
+  font-weight: 600;
+}
+
+.field-select.placeholder-shown,
+.field-select:invalid {
+  color: #94a3b8;
+}
+
+.field-select option {
+  color: var(--text);
+}
+
+.field-select option[value=""] {
+  color: #94a3b8;
+}
+
 .field-input:focus,
 .otp-input:focus {
   border-color: rgba(79, 160, 200, 0.9);
@@ -954,6 +1033,127 @@ a {
   font-weight: 600;
 }
 
+/* modal */
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 61, 116, 0.18);
+  backdrop-filter: blur(4px);
+  z-index: 100;
+}
+
+.modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 101;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  pointer-events: none;
+}
+
+.modal {
+  width: 100%;
+  max-width: 480px;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 28px;
+  pointer-events: all;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.modal-title {
+  margin: 0;
+  color: var(--primary-dark);
+  font-size: 1.2rem;
+}
+
+.modal-close {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  background: #f5f8fb;
+  color: var(--primary-dark);
+}
+
+.modal-body {
+  display: grid;
+  gap: 16px;
+}
+
+.btn-deactivate {
+  border: 1px solid var(--danger);
+  background: transparent;
+  color: var(--danger);
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 6px 14px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.btn-deactivate:hover {
+  background: rgba(228, 98, 111, 0.08);
+}
+
+.btn-activate {
+  border: 1px solid var(--success);
+  background: transparent;
+  color: var(--success);
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 6px 14px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.btn-activate:hover {
+  background: rgba(23, 166, 115, 0.08);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.btn-secondary {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  font-weight: 600;
+  padding: 10px 18px;
+  border-radius: 14px;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background: #f5f8fb;
+  color: var(--primary-dark);
+}
+
 @media (max-width: 1100px) {
   .auth-grid {
     grid-template-columns: 1fr;
diff --git a/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx b/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
index 03fd595a5..ae06b43ae 100644
--- a/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
+++ b/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
@@ -1,11 +1,166 @@
+import { useState } from 'react';
+import { UserRoundPlus } from 'lucide-react';
+import DataTable from 'react-data-table-component';
+import Modal from '../components/common/Modal';
+import Button from '../components/common/Button';
+import InputField from '../components/common/InputField';
+import Dropdown from '../components/common/Dropdown';
+
+const ROLE_OPTIONS = [
+  { value: 'Doctor', label: 'Doctor' },
+  { value: 'Nurse', label: 'Nurse' },
+  { value: 'Carer', label: 'Carer' },
+  { value: 'Administrator', label: 'Administrator' },
+];
+
+const ORGANIZATION_OPTIONS = [
+  { value: 'Guardian Health', label: 'Guardian Health' },
+  { value: 'Deakin Medical Centre', label: 'Deakin Medical Centre' },
+  { value: 'Sunrise Aged Care', label: 'Sunrise Aged Care' },
+];
+
+const initialData = [
+  { id: 1,  fullName: 'Alice Johnson',    email: 'alice.johnson@guardian.com',    role: 'Nurse',         organization: 'Guardian Health',       active: true  },
+  { id: 2,  fullName: 'Bob Smith',        email: 'bob.smith@guardian.com',        role: 'Doctor',        organization: 'Guardian Health',       active: true  },
+  { id: 3,  fullName: 'Carol White',      email: 'carol.white@deakin.com',        role: 'Administrator', organization: 'Deakin Medical Centre', active: true  },
+  { id: 4,  fullName: 'David Lee',        email: 'david.lee@sunrise.com',         role: 'Carer',         organization: 'Sunrise Aged Care',     active: true  },
+  { id: 5,  fullName: 'Emma Brown',       email: 'emma.brown@guardian.com',       role: 'Nurse',         organization: 'Guardian Health',       active: false },
+  { id: 6,  fullName: 'Frank Wilson',     email: 'frank.wilson@deakin.com',       role: 'Doctor',        organization: 'Deakin Medical Centre', active: true  },
+  { id: 7,  fullName: 'Grace Hall',       email: 'grace.hall@sunrise.com',        role: 'Carer',         organization: 'Sunrise Aged Care',     active: true  },
+  { id: 8,  fullName: 'Henry Adams',      email: 'henry.adams@guardian.com',      role: 'Administrator', organization: 'Guardian Health',       active: false },
+  { id: 9,  fullName: 'Iris Martinez',    email: 'iris.martinez@deakin.com',      role: 'Nurse',         organization: 'Deakin Medical Centre', active: true  },
+  { id: 10, fullName: 'James Taylor',     email: 'james.taylor@sunrise.com',      role: 'Doctor',        organization: 'Sunrise Aged Care',     active: true  },
+  { id: 11, fullName: 'Karen Thomas',     email: 'karen.thomas@guardian.com',     role: 'Carer',         organization: 'Guardian Health',       active: true  },
+  { id: 12, fullName: 'Liam Jackson',     email: 'liam.jackson@deakin.com',       role: 'Nurse',         organization: 'Deakin Medical Centre', active: false },
+  { id: 13, fullName: 'Mia Harris',       email: 'mia.harris@sunrise.com',        role: 'Doctor',        organization: 'Sunrise Aged Care',     active: true  },
+  { id: 14, fullName: 'Noah Clark',       email: 'noah.clark@guardian.com',       role: 'Administrator', organization: 'Guardian Health',       active: true  },
+  { id: 15, fullName: 'Olivia Lewis',     email: 'olivia.lewis@deakin.com',       role: 'Carer',         organization: 'Deakin Medical Centre', active: true  },
+  { id: 16, fullName: 'Peter Robinson',   email: 'peter.robinson@sunrise.com',    role: 'Nurse',         organization: 'Sunrise Aged Care',     active: false },
+  { id: 17, fullName: 'Quinn Walker',     email: 'quinn.walker@guardian.com',     role: 'Doctor',        organization: 'Guardian Health',       active: true  },
+  { id: 18, fullName: 'Rachel Young',     email: 'rachel.young@deakin.com',       role: 'Administrator', organization: 'Deakin Medical Centre', active: true  },
+  { id: 19, fullName: 'Samuel King',      email: 'samuel.king@sunrise.com',       role: 'Carer',         organization: 'Sunrise Aged Care',     active: true  },
+  { id: 20, fullName: 'Tara Scott',       email: 'tara.scott@guardian.com',       role: 'Nurse',         organization: 'Guardian Health',       active: false },
+];
+
+const emptyForm = { fullName: '', email: '', role: '', organization: '' };
+
 export default function StaffManagementPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [form, setForm] = useState(emptyForm);
+  const [staff, setStaff] = useState(initialData);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleClose() {
+    setModalOpen(false);
+    setForm(emptyForm);
+  }
+
+  function handleSave() {
+    if (!form.fullName || !form.email || !form.role || !form.organization) return;
+    setStaff((prev) => ([
+      ...prev,
+      { id: prev.length + 1, ...form, active: true },
+    ]));
+    handleClose();
+  }
+
+  function toggleActive(id) {
+    setStaff((prev) =>
+      prev.map((s) => (s.id === id ? { ...s, active: !s.active } : s))
+    );
+  }
+
+  const columns = [
+    {
+      name: 'ID',
+      selector: (row) => row.id,
+      width: '70px',
+    },
+    {
+      name: 'Full Name',
+      selector: (row) => row.fullName,
+      sortable: true,
+    },
+    {
+      name: 'Email',
+      selector: (row) => row.email,
+    },
+    {
+      name: 'Role',
+      selector: (row) => row.role,
+      sortable: true,
+    },
+    {
+      name: 'Organization',
+      selector: (row) => row.organization,
+      sortable: true,
+    },
+    {
+      name: 'Actions',
+      cell: (row) => (
+        <button
+          className={row.active ? 'btn-deactivate' : 'btn-activate'}
+          onClick={() => toggleActive(row.id)}
+        >
+          {row.active ? 'Deactivate' : 'Activate'}
+        </button>
+      ),
+    },
+  ];
+
   return (
-    <div className="panel">
-      <h3>Staff Management</h3>
-      <p>
-        This route is prepared for admin-facing staff management work. The team
-        can continue implementation here using the shared shell layout.
-      </p>
+    <div className='panel'>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '14px' }}>
+        <h3 style={{ margin: 0 }}>Staff Management</h3>
+        <Button onClick={() => setModalOpen(true)}>
+          <UserRoundPlus size={18} />
+          Add Staff
+        </Button>
+      </div>
+
+      <DataTable columns={columns} data={staff} pagination paginationPerPage={10} paginationRowsPerPageOptions={[10, 20]} />
+
+      <Modal open={modalOpen} onClose={handleClose} title="Add Staff">
+        <InputField
+          label="Full Name"
+          name="fullName"
+          value={form.fullName}
+          onChange={handleChange}
+          placeholder="e.g. Alice Johnson"
+        />
+        <InputField
+          label="Email"
+          type="email"
+          name="email"
+          value={form.email}
+          onChange={handleChange}
+          placeholder="e.g. alice@guardian.com"
+        />
+        <Dropdown
+          label="Role"
+          name="role"
+          value={form.role}
+          onChange={handleChange}
+          options={ROLE_OPTIONS}
+          placeholder="Select a role"
+        />
+        <Dropdown
+          label="Organization"
+          name="organization"
+          value={form.organization}
+          onChange={handleChange}
+          options={ORGANIZATION_OPTIONS}
+          placeholder="Select an organization"
+        />
+        <div className="modal-footer">
+          <button className="btn-secondary" style={{ padding: '12px 18px' }} onClick={handleClose}>Cancel</button>
+          <Button onClick={handleSave} style={{ padding: '12px 18px' }}>Save</Button>
+        </div>
+      </Modal>
     </div>
   );
-}
\ No newline at end of file
+}

From 4f667501df1bb051f465eae4290bf6e0eb6d867b Mon Sep 17 00:00:00 2001
From: Thisara Jayamuni <thisara.jayamuni95@gmail.com>
Date: Sat, 4 Apr 2026 00:40:48 +1100
Subject: [PATCH 05/10] Staff Management Form Validation, Loaders Org Staff API
 Call

---
 .../src/components/common/Dropdown.jsx        |   8 +-
 .../src/components/common/InputField.jsx      |   4 +-
 guardian-admin-dashboard/src/index.css        |  34 ++
 .../src/pages/StaffManagementPage.jsx         | 353 +++++++++++++++---
 .../src/services/orgService.js                |   6 +
 .../src/utils/constants.js                    |   9 +-
 6 files changed, 350 insertions(+), 64 deletions(-)
 create mode 100644 guardian-admin-dashboard/src/services/orgService.js

diff --git a/guardian-admin-dashboard/src/components/common/Dropdown.jsx b/guardian-admin-dashboard/src/components/common/Dropdown.jsx
index 27e84d6af..ec0d4e7bc 100644
--- a/guardian-admin-dashboard/src/components/common/Dropdown.jsx
+++ b/guardian-admin-dashboard/src/components/common/Dropdown.jsx
@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 const MotionSpan = motion.span;
 const MotionUl = motion.ul;
 
-export default function Dropdown({ label, name, value, onChange, options = [], placeholder }) {
+export default function Dropdown({ label, name, value, onChange, options = [], placeholder, error, disabled }) {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
 
@@ -30,8 +30,9 @@ export default function Dropdown({ label, name, value, onChange, options = [], p
       <div className="dropdown-wrapper" ref={ref}>
         <button
           type="button"
-          className={`field-input dropdown-trigger${!value ? ' placeholder-shown' : ''}`}
-          onClick={() => setOpen((prev) => !prev)}
+          className={`field-input dropdown-trigger${!value ? ' placeholder-shown' : ''}${error ? ' field-input--error' : ''}`}
+          onClick={() => !disabled && setOpen((prev) => !prev)}
+          disabled={disabled}
         >
           <span>{selected ? selected.label : placeholder}</span>
           <MotionSpan
@@ -65,6 +66,7 @@ export default function Dropdown({ label, name, value, onChange, options = [], p
           )}
         </AnimatePresence>
       </div>
+      {error && <span className="field-error">{error}</span>}
     </div>
   );
 }
diff --git a/guardian-admin-dashboard/src/components/common/InputField.jsx b/guardian-admin-dashboard/src/components/common/InputField.jsx
index 50507e50e..d5893f0ba 100644
--- a/guardian-admin-dashboard/src/components/common/InputField.jsx
+++ b/guardian-admin-dashboard/src/components/common/InputField.jsx
@@ -6,12 +6,13 @@ export default function InputField({
   name,
   placeholder,
   autoComplete,
+  error,
 }) {
   return (
     <label className="field">
       <span className="field-label">{label}</span>
       <input
-        className="field-input"
+        className={`field-input${error ? ' field-input--error' : ''}`}
         type={type}
         name={name}
         value={value}
@@ -19,6 +20,7 @@ export default function InputField({
         placeholder={placeholder}
         autoComplete={autoComplete}
       />
+      {error && <span className="field-error">{error}</span>}
     </label>
   );
 }
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/index.css b/guardian-admin-dashboard/src/index.css
index 577413883..ca869395d 100644
--- a/guardian-admin-dashboard/src/index.css
+++ b/guardian-admin-dashboard/src/index.css
@@ -422,6 +422,40 @@ a {
   box-shadow: 0 0 0 4px rgba(79, 160, 200, 0.14);
 }
 
+.table-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 0;
+  color: var(--text-muted, #94a3b8);
+  font-size: 0.9rem;
+}
+
+.table-loader-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--border);
+  border-top-color: rgba(79, 160, 200, 0.9);
+  border-radius: 50%;
+  animation: table-spin 0.7s linear infinite;
+}
+
+@keyframes table-spin {
+  to { transform: rotate(360deg); }
+}
+
+.field-input--error {
+  border-color: #ef4444 !important;
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
+}
+
+.field-error {
+  font-size: 0.8rem;
+  color: #ef4444;
+  margin-top: -4px;
+}
+
 .auth-card-helper {
   display: flex;
   justify-content: space-between;
diff --git a/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx b/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
index ae06b43ae..e7ef8b383 100644
--- a/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
+++ b/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
@@ -1,76 +1,281 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { UserRoundPlus } from 'lucide-react';
 import DataTable from 'react-data-table-component';
 import Modal from '../components/common/Modal';
 import Button from '../components/common/Button';
 import InputField from '../components/common/InputField';
 import Dropdown from '../components/common/Dropdown';
-
-const ROLE_OPTIONS = [
-  { value: 'Doctor', label: 'Doctor' },
-  { value: 'Nurse', label: 'Nurse' },
-  { value: 'Carer', label: 'Carer' },
-  { value: 'Administrator', label: 'Administrator' },
-];
-
-const ORGANIZATION_OPTIONS = [
-  { value: 'Guardian Health', label: 'Guardian Health' },
-  { value: 'Deakin Medical Centre', label: 'Deakin Medical Centre' },
-  { value: 'Sunrise Aged Care', label: 'Sunrise Aged Care' },
-];
+import { getMyOrganizations } from '../services/orgService';
+import { ROLE_OPTIONS } from '../utils/constants';
 
 const initialData = [
-  { id: 1,  fullName: 'Alice Johnson',    email: 'alice.johnson@guardian.com',    role: 'Nurse',         organization: 'Guardian Health',       active: true  },
-  { id: 2,  fullName: 'Bob Smith',        email: 'bob.smith@guardian.com',        role: 'Doctor',        organization: 'Guardian Health',       active: true  },
-  { id: 3,  fullName: 'Carol White',      email: 'carol.white@deakin.com',        role: 'Administrator', organization: 'Deakin Medical Centre', active: true  },
-  { id: 4,  fullName: 'David Lee',        email: 'david.lee@sunrise.com',         role: 'Carer',         organization: 'Sunrise Aged Care',     active: true  },
-  { id: 5,  fullName: 'Emma Brown',       email: 'emma.brown@guardian.com',       role: 'Nurse',         organization: 'Guardian Health',       active: false },
-  { id: 6,  fullName: 'Frank Wilson',     email: 'frank.wilson@deakin.com',       role: 'Doctor',        organization: 'Deakin Medical Centre', active: true  },
-  { id: 7,  fullName: 'Grace Hall',       email: 'grace.hall@sunrise.com',        role: 'Carer',         organization: 'Sunrise Aged Care',     active: true  },
-  { id: 8,  fullName: 'Henry Adams',      email: 'henry.adams@guardian.com',      role: 'Administrator', organization: 'Guardian Health',       active: false },
-  { id: 9,  fullName: 'Iris Martinez',    email: 'iris.martinez@deakin.com',      role: 'Nurse',         organization: 'Deakin Medical Centre', active: true  },
-  { id: 10, fullName: 'James Taylor',     email: 'james.taylor@sunrise.com',      role: 'Doctor',        organization: 'Sunrise Aged Care',     active: true  },
-  { id: 11, fullName: 'Karen Thomas',     email: 'karen.thomas@guardian.com',     role: 'Carer',         organization: 'Guardian Health',       active: true  },
-  { id: 12, fullName: 'Liam Jackson',     email: 'liam.jackson@deakin.com',       role: 'Nurse',         organization: 'Deakin Medical Centre', active: false },
-  { id: 13, fullName: 'Mia Harris',       email: 'mia.harris@sunrise.com',        role: 'Doctor',        organization: 'Sunrise Aged Care',     active: true  },
-  { id: 14, fullName: 'Noah Clark',       email: 'noah.clark@guardian.com',       role: 'Administrator', organization: 'Guardian Health',       active: true  },
-  { id: 15, fullName: 'Olivia Lewis',     email: 'olivia.lewis@deakin.com',       role: 'Carer',         organization: 'Deakin Medical Centre', active: true  },
-  { id: 16, fullName: 'Peter Robinson',   email: 'peter.robinson@sunrise.com',    role: 'Nurse',         organization: 'Sunrise Aged Care',     active: false },
-  { id: 17, fullName: 'Quinn Walker',     email: 'quinn.walker@guardian.com',     role: 'Doctor',        organization: 'Guardian Health',       active: true  },
-  { id: 18, fullName: 'Rachel Young',     email: 'rachel.young@deakin.com',       role: 'Administrator', organization: 'Deakin Medical Centre', active: true  },
-  { id: 19, fullName: 'Samuel King',      email: 'samuel.king@sunrise.com',       role: 'Carer',         organization: 'Sunrise Aged Care',     active: true  },
-  { id: 20, fullName: 'Tara Scott',       email: 'tara.scott@guardian.com',       role: 'Nurse',         organization: 'Guardian Health',       active: false },
+  {
+    id: 1,
+    fullName: 'Alice Johnson',
+    email: 'alice.johnson@guardian.com',
+    role: 'Nurse',
+    organization: 'Guardian Health',
+    active: true,
+  },
+  {
+    id: 2,
+    fullName: 'Bob Smith',
+    email: 'bob.smith@guardian.com',
+    role: 'Doctor',
+    organization: 'Guardian Health',
+    active: true,
+  },
+  {
+    id: 3,
+    fullName: 'Carol White',
+    email: 'carol.white@deakin.com',
+    role: 'Administrator',
+    organization: 'Deakin Medical Centre',
+    active: true,
+  },
+  {
+    id: 4,
+    fullName: 'David Lee',
+    email: 'david.lee@sunrise.com',
+    role: 'Carer',
+    organization: 'Sunrise Aged Care',
+    active: true,
+  },
+  {
+    id: 5,
+    fullName: 'Emma Brown',
+    email: 'emma.brown@guardian.com',
+    role: 'Nurse',
+    organization: 'Guardian Health',
+    active: false,
+  },
+  {
+    id: 6,
+    fullName: 'Frank Wilson',
+    email: 'frank.wilson@deakin.com',
+    role: 'Doctor',
+    organization: 'Deakin Medical Centre',
+    active: true,
+  },
+  {
+    id: 7,
+    fullName: 'Grace Hall',
+    email: 'grace.hall@sunrise.com',
+    role: 'Carer',
+    organization: 'Sunrise Aged Care',
+    active: true,
+  },
+  {
+    id: 8,
+    fullName: 'Henry Adams',
+    email: 'henry.adams@guardian.com',
+    role: 'Administrator',
+    organization: 'Guardian Health',
+    active: false,
+  },
+  {
+    id: 9,
+    fullName: 'Iris Martinez',
+    email: 'iris.martinez@deakin.com',
+    role: 'Nurse',
+    organization: 'Deakin Medical Centre',
+    active: true,
+  },
+  {
+    id: 10,
+    fullName: 'James Taylor',
+    email: 'james.taylor@sunrise.com',
+    role: 'Doctor',
+    organization: 'Sunrise Aged Care',
+    active: true,
+  },
+  {
+    id: 11,
+    fullName: 'Karen Thomas',
+    email: 'karen.thomas@guardian.com',
+    role: 'Carer',
+    organization: 'Guardian Health',
+    active: true,
+  },
+  {
+    id: 12,
+    fullName: 'Liam Jackson',
+    email: 'liam.jackson@deakin.com',
+    role: 'Nurse',
+    organization: 'Deakin Medical Centre',
+    active: false,
+  },
+  {
+    id: 13,
+    fullName: 'Mia Harris',
+    email: 'mia.harris@sunrise.com',
+    role: 'Doctor',
+    organization: 'Sunrise Aged Care',
+    active: true,
+  },
+  {
+    id: 14,
+    fullName: 'Noah Clark',
+    email: 'noah.clark@guardian.com',
+    role: 'Administrator',
+    organization: 'Guardian Health',
+    active: true,
+  },
+  {
+    id: 15,
+    fullName: 'Olivia Lewis',
+    email: 'olivia.lewis@deakin.com',
+    role: 'Carer',
+    organization: 'Deakin Medical Centre',
+    active: true,
+  },
+  {
+    id: 16,
+    fullName: 'Peter Robinson',
+    email: 'peter.robinson@sunrise.com',
+    role: 'Nurse',
+    organization: 'Sunrise Aged Care',
+    active: false,
+  },
+  {
+    id: 17,
+    fullName: 'Quinn Walker',
+    email: 'quinn.walker@guardian.com',
+    role: 'Doctor',
+    organization: 'Guardian Health',
+    active: true,
+  },
+  {
+    id: 18,
+    fullName: 'Rachel Young',
+    email: 'rachel.young@deakin.com',
+    role: 'Administrator',
+    organization: 'Deakin Medical Centre',
+    active: true,
+  },
+  {
+    id: 19,
+    fullName: 'Samuel King',
+    email: 'samuel.king@sunrise.com',
+    role: 'Carer',
+    organization: 'Sunrise Aged Care',
+    active: true,
+  },
+  {
+    id: 20,
+    fullName: 'Tara Scott',
+    email: 'tara.scott@guardian.com',
+    role: 'Nurse',
+    organization: 'Guardian Health',
+    active: false,
+  },
 ];
 
 const emptyForm = { fullName: '', email: '', role: '', organization: '' };
+const emptyErrors = { fullName: '', email: '', role: '', organization: '' };
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const NAME_REGEX = /^[a-zA-Z\s'-]+$/;
+
+function TableLoader() {
+  return (
+    <div className='table-loader'>
+      <div className='table-loader-spinner' />
+      <span>Loading staff...</span>
+    </div>
+  );
+}
 
 export default function StaffManagementPage() {
   const [modalOpen, setModalOpen] = useState(false);
   const [form, setForm] = useState(emptyForm);
-  const [staff, setStaff] = useState(initialData);
+  const [errors, setErrors] = useState(emptyErrors);
+  const [staff, setStaff] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [orgOptions, setOrgOptions] = useState([]);
+  const [orgLoading, setOrgLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setStaff(initialData);
+      setLoading(false);
+    }, 1200);
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    const fetchOrgs = async () => {
+      setOrgLoading(true);
+      try {
+        const orgs = await getMyOrganizations();
+        setOrgOptions(orgs.map((o) => ({ value: o._id, label: o.name })));
+      } catch (err) {
+        console.error('Failed to load organizations:', err);
+      } finally {
+        setOrgLoading(false);
+      }
+    };
+    fetchOrgs();
+  }, []);
+
+  function validate(fields) {
+    const errs = { ...emptyErrors };
+    if (!fields.fullName.trim()) {
+      errs.fullName = 'Full name is required.';
+    } else if (fields.fullName.trim().length < 2) {
+      errs.fullName = 'Full name must be at least 2 characters.';
+    } else if (!NAME_REGEX.test(fields.fullName.trim())) {
+      errs.fullName =
+        'Full name can only contain letters, spaces, hyphens, and apostrophes.';
+    }
+
+    if (!fields.email.trim()) {
+      errs.email = 'Email is required.';
+    } else if (!EMAIL_REGEX.test(fields.email.trim())) {
+      errs.email = 'Enter a valid email address.';
+    } else if (
+      staff.some(
+        (s) => s.email.toLowerCase() === fields.email.trim().toLowerCase(),
+      )
+    ) {
+      errs.email = 'A staff member with this email already exists.';
+    }
+
+    if (!fields.role) errs.role = 'Please select a role.';
+    if (!fields.organization)
+      errs.organization = 'Please select an organization.';
+
+    return errs;
+  }
 
   function handleChange(e) {
     const { name, value } = e.target;
     setForm((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: '' }));
   }
 
   function handleClose() {
     setModalOpen(false);
     setForm(emptyForm);
+    setErrors(emptyErrors);
   }
 
   function handleSave() {
-    if (!form.fullName || !form.email || !form.role || !form.organization) return;
-    setStaff((prev) => ([
+    const errs = validate(form);
+    if (Object.values(errs).some(Boolean)) {
+      setErrors(errs);
+      return;
+    }
+    setStaff((prev) => [
       ...prev,
       { id: prev.length + 1, ...form, active: true },
-    ]));
+    ]);
     handleClose();
   }
 
   function toggleActive(id) {
     setStaff((prev) =>
-      prev.map((s) => (s.id === id ? { ...s, active: !s.active } : s))
+      prev.map((s) => (s.id === id ? { ...s, active: !s.active } : s)),
     );
   }
 
@@ -114,7 +319,14 @@ export default function StaffManagementPage() {
 
   return (
     <div className='panel'>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '14px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '14px',
+        }}
+      >
         <h3 style={{ margin: 0 }}>Staff Management</h3>
         <Button onClick={() => setModalOpen(true)}>
           <UserRoundPlus size={18} />
@@ -122,43 +334,66 @@ export default function StaffManagementPage() {
         </Button>
       </div>
 
-      <DataTable columns={columns} data={staff} pagination paginationPerPage={10} paginationRowsPerPageOptions={[10, 20]} />
+      <DataTable
+        columns={columns}
+        data={staff}
+        progressPending={loading}
+        progressComponent={<TableLoader />}
+        pagination
+        paginationPerPage={10}
+        paginationRowsPerPageOptions={[10, 20]}
+      />
 
-      <Modal open={modalOpen} onClose={handleClose} title="Add Staff">
+      <Modal open={modalOpen} onClose={handleClose} title='Add Staff'>
         <InputField
-          label="Full Name"
-          name="fullName"
+          label='Full Name'
+          name='fullName'
           value={form.fullName}
           onChange={handleChange}
-          placeholder="e.g. Alice Johnson"
+          placeholder='e.g. Alice Johnson'
+          error={errors.fullName}
         />
         <InputField
-          label="Email"
-          type="email"
-          name="email"
+          label='Email'
+          type='email'
+          name='email'
           value={form.email}
           onChange={handleChange}
-          placeholder="e.g. alice@guardian.com"
+          placeholder='e.g. alice@guardian.com'
+          error={errors.email}
         />
         <Dropdown
-          label="Role"
-          name="role"
+          label='Role'
+          name='role'
           value={form.role}
           onChange={handleChange}
           options={ROLE_OPTIONS}
-          placeholder="Select a role"
+          placeholder='Select a role'
+          error={errors.role}
         />
         <Dropdown
-          label="Organization"
-          name="organization"
+          label='Organization'
+          name='organization'
           value={form.organization}
           onChange={handleChange}
-          options={ORGANIZATION_OPTIONS}
-          placeholder="Select an organization"
+          options={orgOptions}
+          placeholder={
+            orgLoading ? 'Loading organizations...' : 'Select an organization'
+          }
+          error={errors.organization}
+          disabled={orgLoading}
         />
-        <div className="modal-footer">
-          <button className="btn-secondary" style={{ padding: '12px 18px' }} onClick={handleClose}>Cancel</button>
-          <Button onClick={handleSave} style={{ padding: '12px 18px' }}>Save</Button>
+        <div className='modal-footer'>
+          <button
+            className='btn-secondary'
+            style={{ padding: '12px 18px' }}
+            onClick={handleClose}
+          >
+            Cancel
+          </button>
+          <Button onClick={handleSave} style={{ padding: '12px 18px' }}>
+            Save
+          </Button>
         </div>
       </Modal>
     </div>
diff --git a/guardian-admin-dashboard/src/services/orgService.js b/guardian-admin-dashboard/src/services/orgService.js
new file mode 100644
index 000000000..d4cad456c
--- /dev/null
+++ b/guardian-admin-dashboard/src/services/orgService.js
@@ -0,0 +1,6 @@
+import api from "./api";
+
+export async function getMyOrganizations() {
+  const response = await api.get("/api/v1/orgs/mine");
+  return response.data?.orgs ?? [];
+}
diff --git a/guardian-admin-dashboard/src/utils/constants.js b/guardian-admin-dashboard/src/utils/constants.js
index 68bc3a8f1..593526c88 100644
--- a/guardian-admin-dashboard/src/utils/constants.js
+++ b/guardian-admin-dashboard/src/utils/constants.js
@@ -48,4 +48,11 @@ export const STORAGE_KEYS = {
   email: "guardian_admin_email",
   pendingToken: "guardian_admin_pending_token",
   pendingUser: "guardian_admin_pending_user",
-};
\ No newline at end of file
+};
+
+export const ROLE_OPTIONS = [
+  { value: 'doctor', label: 'Doctor' },
+  { value: 'nurse', label: 'Nurse' },
+  { value: 'caretaker', label: 'Caretaker' },
+  { value: 'admin', label: 'Admin' },
+];
\ No newline at end of file

From 1993cf0c6e54e1289919424be8521fb00ee787f5 Mon Sep 17 00:00:00 2001
From: Thisara Jayamuni <thisara.jayamuni95@gmail.com>
Date: Tue, 7 Apr 2026 08:35:42 +1000
Subject: [PATCH 06/10] Staff Management Create Form, Filters and API
 Integration

---
 .../src/components/common/DataTable.jsx       |  47 ++
 .../src/components/common/Toast.jsx           |  74 +++
 .../src/pages/StaffManagementPage.jsx         | 428 +++++++-----------
 .../src/services/staffService.js              |  27 ++
 .../src/utils/constants.js                    |   2 -
 5 files changed, 311 insertions(+), 267 deletions(-)
 create mode 100644 guardian-admin-dashboard/src/components/common/DataTable.jsx
 create mode 100644 guardian-admin-dashboard/src/components/common/Toast.jsx
 create mode 100644 guardian-admin-dashboard/src/services/staffService.js

diff --git a/guardian-admin-dashboard/src/components/common/DataTable.jsx b/guardian-admin-dashboard/src/components/common/DataTable.jsx
new file mode 100644
index 000000000..037df172c
--- /dev/null
+++ b/guardian-admin-dashboard/src/components/common/DataTable.jsx
@@ -0,0 +1,47 @@
+import ReactDataTable from 'react-data-table-component';
+
+function TableLoader() {
+  return (
+    <div className='table-loader'>
+      <div className='table-loader-spinner' />
+      <span>Loading...</span>
+    </div>
+  );
+}
+
+export default function DataTable({
+  columns,
+  data,
+  loading = false,
+  totalRows = 0,
+  onChangePage,
+  perPage = 10,
+  perPageOptions = [10, 20],
+  loadingMessage,
+  ...rest
+}) {
+  const progressComponent = loadingMessage ? (
+    <div className='table-loader'>
+      <div className='table-loader-spinner' />
+      <span>{loadingMessage}</span>
+    </div>
+  ) : (
+    <TableLoader />
+  );
+
+  return (
+    <ReactDataTable
+      columns={columns}
+      data={data}
+      progressPending={loading}
+      progressComponent={progressComponent}
+      pagination
+      paginationServer
+      paginationTotalRows={totalRows}
+      paginationPerPage={perPage}
+      paginationRowsPerPageOptions={perPageOptions}
+      onChangePage={onChangePage}
+      {...rest}
+    />
+  );
+}
diff --git a/guardian-admin-dashboard/src/components/common/Toast.jsx b/guardian-admin-dashboard/src/components/common/Toast.jsx
new file mode 100644
index 000000000..7b0214486
--- /dev/null
+++ b/guardian-admin-dashboard/src/components/common/Toast.jsx
@@ -0,0 +1,74 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import Button from './Button';
+
+const VARIANT_STYLES = {
+  confirm: 'var(--color-danger, #e53e3e)',
+  success: 'var(--color-success, #38a169)',
+};
+
+export default function Toast({
+  open,
+  variant = 'confirm',
+  title,
+  message,
+  confirmLabel,
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+}) {
+  const defaultTitle = variant === 'success' ? 'Success' : 'Are you sure?';
+  const defaultConfirmLabel = variant === 'success' ? 'OK' : 'Confirm';
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            className='modal-backdrop'
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onCancel ?? onConfirm}
+          />
+          <div className='modal-container'>
+            <motion.div
+              className='modal'
+              initial={{ opacity: 0, y: 24, scale: 0.97 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 16, scale: 0.97 }}
+              transition={{ duration: 0.22 }}
+              style={{ maxWidth: '400px' }}
+            >
+              <div className='modal-header'>
+                <h3 className='modal-title'>{title ?? defaultTitle}</h3>
+              </div>
+              <div className='modal-body'>
+                <p style={{ margin: '0 0 24px' }}>{message}</p>
+                <div className='modal-footer'>
+                  {variant === 'confirm' && (
+                    <button
+                      className='btn-secondary'
+                      style={{ padding: '12px 18px' }}
+                      onClick={onCancel}
+                    >
+                      {cancelLabel}
+                    </button>
+                  )}
+                  <Button
+                    onClick={onConfirm}
+                    style={{
+                      padding: '12px 18px',
+                      background: VARIANT_STYLES[variant],
+                    }}
+                  >
+                    {confirmLabel ?? defaultConfirmLabel}
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx b/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
index e7ef8b383..0bd6a6fdf 100644
--- a/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
+++ b/guardian-admin-dashboard/src/pages/StaffManagementPage.jsx
@@ -1,207 +1,81 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { UserRoundPlus } from 'lucide-react';
-import DataTable from 'react-data-table-component';
+import DataTable from '../components/common/DataTable';
 import Modal from '../components/common/Modal';
+import Toast from '../components/common/Toast';
 import Button from '../components/common/Button';
 import InputField from '../components/common/InputField';
 import Dropdown from '../components/common/Dropdown';
 import { getMyOrganizations } from '../services/orgService';
+import {
+  getStaff,
+  createStaff,
+  deactivateStaff,
+} from '../services/staffService';
 import { ROLE_OPTIONS } from '../utils/constants';
 
-const initialData = [
-  {
-    id: 1,
-    fullName: 'Alice Johnson',
-    email: 'alice.johnson@guardian.com',
-    role: 'Nurse',
-    organization: 'Guardian Health',
-    active: true,
-  },
-  {
-    id: 2,
-    fullName: 'Bob Smith',
-    email: 'bob.smith@guardian.com',
-    role: 'Doctor',
-    organization: 'Guardian Health',
-    active: true,
-  },
-  {
-    id: 3,
-    fullName: 'Carol White',
-    email: 'carol.white@deakin.com',
-    role: 'Administrator',
-    organization: 'Deakin Medical Centre',
-    active: true,
-  },
-  {
-    id: 4,
-    fullName: 'David Lee',
-    email: 'david.lee@sunrise.com',
-    role: 'Carer',
-    organization: 'Sunrise Aged Care',
-    active: true,
-  },
-  {
-    id: 5,
-    fullName: 'Emma Brown',
-    email: 'emma.brown@guardian.com',
-    role: 'Nurse',
-    organization: 'Guardian Health',
-    active: false,
-  },
-  {
-    id: 6,
-    fullName: 'Frank Wilson',
-    email: 'frank.wilson@deakin.com',
-    role: 'Doctor',
-    organization: 'Deakin Medical Centre',
-    active: true,
-  },
-  {
-    id: 7,
-    fullName: 'Grace Hall',
-    email: 'grace.hall@sunrise.com',
-    role: 'Carer',
-    organization: 'Sunrise Aged Care',
-    active: true,
-  },
-  {
-    id: 8,
-    fullName: 'Henry Adams',
-    email: 'henry.adams@guardian.com',
-    role: 'Administrator',
-    organization: 'Guardian Health',
-    active: false,
-  },
-  {
-    id: 9,
-    fullName: 'Iris Martinez',
-    email: 'iris.martinez@deakin.com',
-    role: 'Nurse',
-    organization: 'Deakin Medical Centre',
-    active: true,
-  },
-  {
-    id: 10,
-    fullName: 'James Taylor',
-    email: 'james.taylor@sunrise.com',
-    role: 'Doctor',
-    organization: 'Sunrise Aged Care',
-    active: true,
-  },
-  {
-    id: 11,
-    fullName: 'Karen Thomas',
-    email: 'karen.thomas@guardian.com',
-    role: 'Carer',
-    organization: 'Guardian Health',
-    active: true,
-  },
-  {
-    id: 12,
-    fullName: 'Liam Jackson',
-    email: 'liam.jackson@deakin.com',
-    role: 'Nurse',
-    organization: 'Deakin Medical Centre',
-    active: false,
-  },
-  {
-    id: 13,
-    fullName: 'Mia Harris',
-    email: 'mia.harris@sunrise.com',
-    role: 'Doctor',
-    organization: 'Sunrise Aged Care',
-    active: true,
-  },
-  {
-    id: 14,
-    fullName: 'Noah Clark',
-    email: 'noah.clark@guardian.com',
-    role: 'Administrator',
-    organization: 'Guardian Health',
-    active: true,
-  },
-  {
-    id: 15,
-    fullName: 'Olivia Lewis',
-    email: 'olivia.lewis@deakin.com',
-    role: 'Carer',
-    organization: 'Deakin Medical Centre',
-    active: true,
-  },
-  {
-    id: 16,
-    fullName: 'Peter Robinson',
-    email: 'peter.robinson@sunrise.com',
-    role: 'Nurse',
-    organization: 'Sunrise Aged Care',
-    active: false,
-  },
-  {
-    id: 17,
-    fullName: 'Quinn Walker',
-    email: 'quinn.walker@guardian.com',
-    role: 'Doctor',
-    organization: 'Guardian Health',
-    active: true,
-  },
-  {
-    id: 18,
-    fullName: 'Rachel Young',
-    email: 'rachel.young@deakin.com',
-    role: 'Administrator',
-    organization: 'Deakin Medical Centre',
-    active: true,
-  },
-  {
-    id: 19,
-    fullName: 'Samuel King',
-    email: 'samuel.king@sunrise.com',
-    role: 'Carer',
-    organization: 'Sunrise Aged Care',
-    active: true,
-  },
-  {
-    id: 20,
-    fullName: 'Tara Scott',
-    email: 'tara.scott@guardian.com',
-    role: 'Nurse',
-    organization: 'Guardian Health',
-    active: false,
-  },
-];
-
-const emptyForm = { fullName: '', email: '', role: '', organization: '' };
-const emptyErrors = { fullName: '', email: '', role: '', organization: '' };
+const emptyForm = { userId: '' };
+const emptyErrors = { userId: '' };
 
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-const NAME_REGEX = /^[a-zA-Z\s'-]+$/;
+const ROLE_FILTER_OPTIONS = [
+  { value: '', label: 'All Roles' },
+  ...ROLE_OPTIONS,
+];
 
-function TableLoader() {
-  return (
-    <div className='table-loader'>
-      <div className='table-loader-spinner' />
-      <span>Loading staff...</span>
-    </div>
-  );
+function formatStaff(raw) {
+  return raw.map((s) => ({
+    id: s._id,
+    fullName: s.fullname,
+    email: s.email,
+    role:
+      ROLE_OPTIONS.find((r) => r.value === s.role?.name?.toLowerCase())
+        ?.label ?? '-',
+    organization: s.organization?.name ?? '-',
+  }));
 }
 
 export default function StaffManagementPage() {
+  const [staff, setStaff] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [totalRows, setTotalRows] = useState(0);
   const [modalOpen, setModalOpen] = useState(false);
   const [form, setForm] = useState(emptyForm);
   const [errors, setErrors] = useState(emptyErrors);
-  const [staff, setStaff] = useState([]);
-  const [loading, setLoading] = useState(true);
   const [orgOptions, setOrgOptions] = useState([]);
   const [orgLoading, setOrgLoading] = useState(true);
+  const [orgFilter, setOrgFilter] = useState('');
+  const [roleFilter, setRoleFilter] = useState('');
+  const [search, setSearch] = useState('');
+  const [confirmId, setConfirmId] = useState(null);
+  const [successOpen, setSuccessOpen] = useState(false);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setStaff(initialData);
+  const fetchStaff = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await getStaff({
+        page,
+        limit: 10,
+        role: roleFilter,
+        orgId: orgFilter,
+        search,
+      });
+      const normalized = formatStaff(data.staff ?? []);
+      const filtered = normalized.filter((s) =>
+        ROLE_OPTIONS.some((r) => r.value === s.role.toLowerCase()),
+      );
+      setStaff(filtered);
+      setTotalRows(data.pagination?.total ?? 0);
+    } catch (err) {
+      console.error('Failed to load staff:', err);
+    } finally {
       setLoading(false);
-    }, 1200);
-    return () => clearTimeout(timer);
-  }, []);
+    }
+  }, [page, roleFilter, orgFilter, search]);
+
+  useEffect(() => {
+    fetchStaff();
+  }, [fetchStaff]);
 
   useEffect(() => {
     const fetchOrgs = async () => {
@@ -220,31 +94,9 @@ export default function StaffManagementPage() {
 
   function validate(fields) {
     const errs = { ...emptyErrors };
-    if (!fields.fullName.trim()) {
-      errs.fullName = 'Full name is required.';
-    } else if (fields.fullName.trim().length < 2) {
-      errs.fullName = 'Full name must be at least 2 characters.';
-    } else if (!NAME_REGEX.test(fields.fullName.trim())) {
-      errs.fullName =
-        'Full name can only contain letters, spaces, hyphens, and apostrophes.';
-    }
-
-    if (!fields.email.trim()) {
-      errs.email = 'Email is required.';
-    } else if (!EMAIL_REGEX.test(fields.email.trim())) {
-      errs.email = 'Enter a valid email address.';
-    } else if (
-      staff.some(
-        (s) => s.email.toLowerCase() === fields.email.trim().toLowerCase(),
-      )
-    ) {
-      errs.email = 'A staff member with this email already exists.';
+    if (!fields.userId.trim()) {
+      errs.userId = 'User ID is required.';
     }
-
-    if (!fields.role) errs.role = 'Please select a role.';
-    if (!fields.organization)
-      errs.organization = 'Please select an organization.';
-
     return errs;
   }
 
@@ -260,30 +112,38 @@ export default function StaffManagementPage() {
     setErrors(emptyErrors);
   }
 
-  function handleSave() {
+  async function handleSave() {
     const errs = validate(form);
     if (Object.values(errs).some(Boolean)) {
       setErrors(errs);
       return;
     }
-    setStaff((prev) => [
-      ...prev,
-      { id: prev.length + 1, ...form, active: true },
-    ]);
-    handleClose();
+    try {
+      await createStaff(form.userId);
+      handleClose();
+      setSuccessOpen(true);
+      fetchStaff();
+    } catch (err) {
+      console.error('Failed to add staff:', err);
+    }
   }
 
-  function toggleActive(id) {
-    setStaff((prev) =>
-      prev.map((s) => (s.id === id ? { ...s, active: !s.active } : s)),
-    );
+  async function handleConfirmDeactivate() {
+    try {
+      await deactivateStaff(confirmId);
+      setStaff((prev) => prev.filter((s) => s.id !== confirmId));
+    } catch (err) {
+      console.error('Failed to deactivate staff:', err);
+    } finally {
+      setConfirmId(null);
+    }
   }
 
   const columns = [
     {
       name: 'ID',
       selector: (row) => row.id,
-      width: '70px',
+      sortable: true,
     },
     {
       name: 'Full Name',
@@ -307,11 +167,8 @@ export default function StaffManagementPage() {
     {
       name: 'Actions',
       cell: (row) => (
-        <button
-          className={row.active ? 'btn-deactivate' : 'btn-activate'}
-          onClick={() => toggleActive(row.id)}
-        >
-          {row.active ? 'Deactivate' : 'Activate'}
+        <button className='btn-deactivate' onClick={() => setConfirmId(row.id)}>
+          Deactivate
         </button>
       ),
     },
@@ -324,7 +181,7 @@ export default function StaffManagementPage() {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          marginBottom: '14px',
+          marginBottom: '28px',
         }}
       >
         <h3 style={{ margin: 0 }}>Staff Management</h3>
@@ -334,54 +191,86 @@ export default function StaffManagementPage() {
         </Button>
       </div>
 
+      <div
+        style={{
+          display: 'flex',
+          gap: '16px',
+          marginBottom: '12px',
+          alignItems: 'flex-end',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div style={{ maxWidth: '240px' }}>
+          <InputField
+            label='Search'
+            name='search'
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder='Search by name or email...'
+          />
+        </div>
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+          <div style={{ width: '200px' }}>
+            <Dropdown
+              label='Filter by Role'
+              name='roleFilter'
+              value={roleFilter}
+              onChange={(e) => {
+                setRoleFilter(e.target.value);
+                setPage(1);
+              }}
+              options={ROLE_FILTER_OPTIONS}
+            />
+          </div>
+          <div style={{ width: '200px' }}>
+            <Dropdown
+              label='Filter by Organization'
+              name='orgFilter'
+              value={orgFilter}
+              onChange={(e) => {
+                setOrgFilter(e.target.value);
+                setPage(1);
+              }}
+              options={[
+                { value: '', label: 'All Organizations' },
+                ...orgOptions,
+              ]}
+              placeholder={orgLoading ? 'Loading...' : 'All Organizations'}
+              disabled={orgLoading}
+            />
+          </div>
+        </div>
+      </div>
+
       <DataTable
         columns={columns}
         data={staff}
-        progressPending={loading}
-        progressComponent={<TableLoader />}
-        pagination
-        paginationPerPage={10}
-        paginationRowsPerPageOptions={[10, 20]}
+        loading={loading}
+        loadingMessage='Loading staff...'
+        totalRows={totalRows}
+        onChangePage={(newPage) => setPage(newPage)}
+      />
+
+      <Toast
+        open={confirmId !== null}
+        title='Deactivate Staff'
+        message='Are you sure you want to deactivate this staff member?'
+        confirmLabel='Deactivate'
+        onConfirm={handleConfirmDeactivate}
+        onCancel={() => setConfirmId(null)}
       />
 
       <Modal open={modalOpen} onClose={handleClose} title='Add Staff'>
         <InputField
-          label='Full Name'
-          name='fullName'
-          value={form.fullName}
-          onChange={handleChange}
-          placeholder='e.g. Alice Johnson'
-          error={errors.fullName}
-        />
-        <InputField
-          label='Email'
-          type='email'
-          name='email'
-          value={form.email}
-          onChange={handleChange}
-          placeholder='e.g. alice@guardian.com'
-          error={errors.email}
-        />
-        <Dropdown
-          label='Role'
-          name='role'
-          value={form.role}
-          onChange={handleChange}
-          options={ROLE_OPTIONS}
-          placeholder='Select a role'
-          error={errors.role}
-        />
-        <Dropdown
-          label='Organization'
-          name='organization'
-          value={form.organization}
+          label='User ID'
+          name='userId'
+          value={form.userId}
           onChange={handleChange}
-          options={orgOptions}
-          placeholder={
-            orgLoading ? 'Loading organizations...' : 'Select an organization'
-          }
-          error={errors.organization}
-          disabled={orgLoading}
+          placeholder='e.g. 64a1f2b3c4d5e6f7a8b9c0d1'
+          error={errors.userId}
         />
         <div className='modal-footer'>
           <button
@@ -396,6 +285,15 @@ export default function StaffManagementPage() {
           </Button>
         </div>
       </Modal>
+
+      <Toast
+        open={successOpen}
+        variant='success'
+        title='Staff Added'
+        message='Staff member has been successfully added.'
+        confirmLabel='OK'
+        onConfirm={() => setSuccessOpen(false)}
+      />
     </div>
   );
 }
diff --git a/guardian-admin-dashboard/src/services/staffService.js b/guardian-admin-dashboard/src/services/staffService.js
new file mode 100644
index 000000000..dacb7724c
--- /dev/null
+++ b/guardian-admin-dashboard/src/services/staffService.js
@@ -0,0 +1,27 @@
+import api from './api';
+
+export async function getStaff({
+  page = 1,
+  limit = 10,
+  search = '',
+  orgId = '',
+  role = '',
+} = {}) {
+  const params = { page, limit };
+  if (search) params.search = search;
+  if (orgId) params.orgId = orgId;
+  if (role) params.role = role;
+
+  const response = await api.get('/api/v1/admin/staff', { params });
+  return response.data;
+}
+
+export async function createStaff(userId) {
+  const response = await api.post('/api/v1/admin/staff', { userId });
+  return response.data;
+}
+
+export async function deactivateStaff(id) {
+  const response = await api.put(`/api/v1/admin/staff/${id}/deactivate`);
+  return response.data;
+}
diff --git a/guardian-admin-dashboard/src/utils/constants.js b/guardian-admin-dashboard/src/utils/constants.js
index 593526c88..5b4852dd1 100644
--- a/guardian-admin-dashboard/src/utils/constants.js
+++ b/guardian-admin-dashboard/src/utils/constants.js
@@ -53,6 +53,4 @@ export const STORAGE_KEYS = {
 export const ROLE_OPTIONS = [
   { value: 'doctor', label: 'Doctor' },
   { value: 'nurse', label: 'Nurse' },
-  { value: 'caretaker', label: 'Caretaker' },
-  { value: 'admin', label: 'Admin' },
 ];
\ No newline at end of file

From b85d342488944c31716be7ad1256453b99dd3f80 Mon Sep 17 00:00:00 2001
From: Shubham Rana <shubhamrana24082004@gmail.com>
Date: Sun, 12 Apr 2026 17:48:53 +1000
Subject: [PATCH 07/10] added admin dashboard overview page

---
 guardian-admin-dashboard/src/App.css          |  92 +++++
 .../src/pages/OrgAssignmentPage.jsx           | 318 +++++++++++++++++-
 .../src/services/orgService.js                |  30 +-
 package-lock.json                             |   6 +
 4 files changed, 434 insertions(+), 12 deletions(-)
 create mode 100644 package-lock.json

diff --git a/guardian-admin-dashboard/src/App.css b/guardian-admin-dashboard/src/App.css
index 83c74d68e..2855bf594 100644
--- a/guardian-admin-dashboard/src/App.css
+++ b/guardian-admin-dashboard/src/App.css
@@ -41,3 +41,95 @@ body {
 .login-form button:hover {
   background-color: #303f9f;
 }
+/* overview */
+.org-page-title {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.org-section-title {
+  margin: 0;
+}
+
+.org-error-title {
+  margin: 0 0 6px 0;
+}
+
+.org-muted-text {
+  margin: 0;
+  color: #6b7280;
+}
+
+.org-error-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.org-stat-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.org-stat-label {
+  margin: 0 0 6px 0;
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.org-stat-value {
+  margin: 0;
+}
+
+.org-stat-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  background: rgba(63, 81, 181, 0.08);
+}
+
+.org-details-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.org-dropdown-wrap {
+  width: 260px;
+}
+
+.org-details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 18px;
+}
+
+.org-detail-label {
+  margin: 0 0 8px 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.org-detail-value {
+  font-weight: 500;
+}
+
+.org-break-word {
+  word-break: break-word;
+}
+
+.org-summary-list {
+  margin-top: 18px;
+}
+
+.org-refresh-wrap {
+  margin-top: 22px;
+}
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/pages/OrgAssignmentPage.jsx b/guardian-admin-dashboard/src/pages/OrgAssignmentPage.jsx
index c948897a9..2f5587c80 100644
--- a/guardian-admin-dashboard/src/pages/OrgAssignmentPage.jsx
+++ b/guardian-admin-dashboard/src/pages/OrgAssignmentPage.jsx
@@ -1,12 +1,316 @@
+import { useCallback, useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import {
+  ArrowRight,
+  Building2,
+  CalendarDays,
+  CircleAlert,
+  FileText,
+  RefreshCcw,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import Button from "../components/common/Button";
+import Dropdown from "../components/common/Dropdown";
+import { getMyOrganizations } from "../services/orgService";
+
+function formatDate(dateValue) {
+  if (!dateValue) return "-";
+
+  const date = new Date(dateValue);
+  if (Number.isNaN(date.getTime())) return "-";
+
+  return date.toLocaleDateString("en-AU", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+}
+
 export default function OrgAssignmentPage() {
+  const [organizations, setOrganizations] = useState([]);
+  const [selectedOrgId, setSelectedOrgId] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const fetchOrganizations = useCallback(async () => {
+    setLoading(true);
+    setError("");
+
+    try {
+      const response = await getMyOrganizations();
+      const orgs = Array.isArray(response?.orgs) ? response.orgs : [];
+
+      setOrganizations(orgs);
+      setSelectedOrgId((prev) => prev || orgs[0]?._id || "");
+    } catch (err) {
+      console.error("Failed to fetch organizations:", err);
+      setError("Failed to fetch organizations.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrganizations();
+  }, [fetchOrganizations]);
+
+  const selectedOrg =
+    organizations.find((org) => org._id === selectedOrgId) || organizations[0];
+
+  const organizationOptions = organizations.map((org) => ({
+    value: org._id,
+    label: org.name,
+  }));
+
+  const stats = selectedOrg
+    ? [
+        {
+          title: "Staff Members",
+          value: selectedOrg.staff?.length ?? 0,
+          icon: Users,
+          description: "Staff currently linked with this organisation.",
+        },
+        {
+          title: "Status",
+          value: selectedOrg.active ? "Active" : "Inactive",
+          icon: ShieldCheck,
+          description: "Current organisation status from backend data.",
+        },
+        {
+          title: "Created On",
+          value: formatDate(selectedOrg.created_at),
+          icon: CalendarDays,
+          description: "Date this organisation record was created.",
+        },
+      ]
+    : [];
+
+  if (loading) {
+    return (
+      <div className="panel">
+        <h3 className="org-page-title">Organisation & Assignment</h3>
+        <p className="org-muted-text">Loading organisation details...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="panel">
+        <div className="org-error-header">
+          <CircleAlert size={20} />
+          <div>
+            <h3 className="org-error-title">Organisation & Assignment</h3>
+            <p className="org-muted-text">{error}</p>
+          </div>
+        </div>
+
+        <Button onClick={fetchOrganizations}>
+          <RefreshCcw size={18} />
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  if (!selectedOrg) {
+    return (
+      <div className="panel">
+        <h3 className="org-page-title">Organisation & Assignment</h3>
+        <p className="org-muted-text">No organisation data found yet.</p>
+      </div>
+    );
+  }
+
   return (
-    <div className="panel">
-      <h3>Organisation & Assignment</h3>
-      <p>
-        This route is prepared for organisation overview and assignment-related
-        admin work. The team can continue implementation here using the shared
-        shell layout.
-      </p>
+    <div className="dashboard-home">
+      <motion.section
+        className="hero-banner"
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.45 }}
+      >
+        <div className="hero-banner-content">
+          <div>
+            <p className="section-eyebrow">Organisation Overview</p>
+            <h1>{selectedOrg.name}</h1>
+            <p className="section-subtitle">
+              View organisation information, staff count, current status, and
+              prepare for organisation-related admin workflows.
+            </p>
+          </div>
+
+          <div className="hero-banner-actions">
+            <Link to="/dashboard/staff-management" className="hero-link-card">
+              <Users size={18} />
+              <div>
+                <strong>Staff Management</strong>
+                <span>View and manage staff linked with this organisation</span>
+              </div>
+              <ArrowRight size={16} />
+            </Link>
+
+            <Link to="/dashboard" className="hero-link-card">
+              <Building2 size={18} />
+              <div>
+                <strong>Dashboard</strong>
+                <span>Return to the main administrator workspace</span>
+              </div>
+              <ArrowRight size={16} />
+            </Link>
+          </div>
+        </div>
+      </motion.section>
+
+      <section className="stats-grid">
+        {stats.map((item, index) => {
+          const Icon = item.icon;
+
+          return (
+            <motion.article
+              key={item.title}
+              className="panel"
+              initial={{ opacity: 0, y: 18 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.45, delay: index * 0.06 }}
+            >
+              <div className="org-stat-top">
+                <div>
+                  <p className="org-stat-label">{item.title}</p>
+                  <h2 className="org-stat-value">{item.value}</h2>
+                </div>
+
+                <div className="org-stat-icon">
+                  <Icon size={20} />
+                </div>
+              </div>
+
+              <p className="org-muted-text">{item.description}</p>
+            </motion.article>
+          );
+        })}
+      </section>
+
+      <section className="dashboard-panels">
+        <motion.article
+          className="panel large"
+          initial={{ opacity: 0, y: 18 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.45, delay: 0.05 }}
+        >
+          <div className="org-details-header">
+            <h3 className="org-section-title">Organisation Details</h3>
+
+            {organizationOptions.length > 1 && (
+              <div className="org-dropdown-wrap">
+                <Dropdown
+                  label="Select Organisation"
+                  name="selectedOrgId"
+                  value={selectedOrgId}
+                  onChange={(e) => setSelectedOrgId(e.target.value)}
+                  options={organizationOptions}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="org-details-grid">
+            <div>
+              <p className="org-detail-label">Organisation ID</p>
+              <div className="org-detail-value org-break-word">
+                {selectedOrg._id || "-"}
+              </div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Name</p>
+              <div className="org-detail-value">{selectedOrg.name || "-"}</div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Description</p>
+              <div className="org-detail-value">
+                {selectedOrg.description || "No description available."}
+              </div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Active</p>
+              <div className="org-detail-value">
+                {selectedOrg.active ? "Yes" : "No"}
+              </div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Created By</p>
+              <div className="org-detail-value org-break-word">
+                {selectedOrg.createdBy || "-"}
+              </div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Created At</p>
+              <div className="org-detail-value">
+                {formatDate(selectedOrg.created_at)}
+              </div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Updated At</p>
+              <div className="org-detail-value">
+                {formatDate(selectedOrg.updated_at)}
+              </div>
+            </div>
+
+            <div>
+              <p className="org-detail-label">Staff Count</p>
+              <div className="org-detail-value">
+                {selectedOrg.staff?.length ?? 0}
+              </div>
+            </div>
+          </div>
+        </motion.article>
+
+        <motion.article
+          className="panel"
+          initial={{ opacity: 0, y: 18 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.45, delay: 0.12 }}
+        >
+          <h3 className="org-section-title">Overview Summary</h3>
+
+          <div className="mini-module-list org-summary-list">
+            <div className="mini-module-item">
+              <Building2 size={18} />
+              <span>Organisation data is connected to this admin account</span>
+            </div>
+
+            <div className="mini-module-item">
+              <Users size={18} />
+              <span>{selectedOrg.staff?.length ?? 0} linked staff member(s)</span>
+            </div>
+
+            <div className="mini-module-item">
+              <ShieldCheck size={18} />
+              <span>Status: {selectedOrg.active ? "Active" : "Inactive"}</span>
+            </div>
+
+            <div className="mini-module-item">
+              <FileText size={18} />
+              <span>Ready for future organisation workflows and extensions</span>
+            </div>
+          </div>
+
+          <div className="org-refresh-wrap">
+            <Button onClick={fetchOrganizations}>
+              <RefreshCcw size={18} />
+              Refresh Data
+            </Button>
+          </div>
+        </motion.article>
+      </section>
     </div>
   );
 }
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/services/orgService.js b/guardian-admin-dashboard/src/services/orgService.js
index d4cad456c..81c5ca8ed 100644
--- a/guardian-admin-dashboard/src/services/orgService.js
+++ b/guardian-admin-dashboard/src/services/orgService.js
@@ -1,6 +1,26 @@
-import api from "./api";
-
 export async function getMyOrganizations() {
-  const response = await api.get("/api/v1/orgs/mine");
-  return response.data?.orgs ?? [];
-}
+  return {
+    orgs: [
+      {
+        _id: "1",
+        name: "Guardian Health Org",
+        description: "Primary org for testing",
+        active: true,
+        createdBy: "admin001",
+        staff: ["u1", "u2", "u3"],
+        created_at: "2026-04-11T08:43:07.933Z",
+        updated_at: "2026-04-11T08:43:07.933Z"
+      },
+      {
+        _id: "2",
+        name: "Care Support Org",
+        description: "Secondary organisation",
+        active: false,
+        createdBy: "admin002",
+        staff: ["u4"],
+        created_at: "2026-03-02T10:20:00.000Z",
+        updated_at: "2026-03-15T11:10:00.000Z"
+      }
+    ]
+  };
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..b0578dffa
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Guardian",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From f6c8ec5a5a0cd09824f264884662705604273d09 Mon Sep 17 00:00:00 2001
From: Palak Deep Kaur <palak@Palaks-MacBook-Air.local>
Date: Mon, 13 Apr 2026 11:22:50 +1000
Subject: [PATCH 08/10] Patient Overview page improvements and API integration

---
 guardian-admin-dashboard/src/App.jsx          |   3 +
 .../src/components/dashboard/Sidebar.jsx      |   6 +-
 .../src/pages/PatientOverviewPage.jsx         | 349 ++++++++++++++++++
 guardian-admin-dashboard/src/services/api.js  |   2 +-
 .../src/services/authService.js               |  19 +-
 .../src/services/patientService.js            |  13 +
 .../src/utils/constants.js                    |   6 +
 package-lock.json                             |   6 +
 8 files changed, 389 insertions(+), 15 deletions(-)
 create mode 100644 guardian-admin-dashboard/src/pages/PatientOverviewPage.jsx
 create mode 100644 guardian-admin-dashboard/src/services/patientService.js
 create mode 100644 package-lock.json

diff --git a/guardian-admin-dashboard/src/App.jsx b/guardian-admin-dashboard/src/App.jsx
index 750e86118..4b1cc6554 100644
--- a/guardian-admin-dashboard/src/App.jsx
+++ b/guardian-admin-dashboard/src/App.jsx
@@ -11,6 +11,7 @@ import NurseRosterPage from "./pages/NurseRosterPage";
 import ReportsPage from "./pages/ReportsPage";
 import SettingsPage from "./pages/SettingsPage";
 import "./App.css";
+import PatientOverviewPage from "./pages/PatientOverviewPage";
 
 function ProtectedRoute({ children }) {
   const token = getAuthToken();
@@ -36,9 +37,11 @@ export default function App() {
         <Route path="staff-management" element={<StaffManagementPage />} />
         <Route path="org-assignment" element={<OrgAssignmentPage />} />
         <Route path="patients" element={<PatientsPage />} />
+        <Route path="patients/:patientId/overview" element={<PatientOverviewPage />} />
         <Route path="nurse-roster" element={<NurseRosterPage />} />
         <Route path="reports" element={<ReportsPage />} />
         <Route path="settings" element={<SettingsPage />} />
+        
       </Route>
 
       <Route path="*" element={<Navigate to="/login" replace />} />
diff --git a/guardian-admin-dashboard/src/components/dashboard/Sidebar.jsx b/guardian-admin-dashboard/src/components/dashboard/Sidebar.jsx
index ea3d2fc93..eb1991043 100644
--- a/guardian-admin-dashboard/src/components/dashboard/Sidebar.jsx
+++ b/guardian-admin-dashboard/src/components/dashboard/Sidebar.jsx
@@ -19,6 +19,7 @@ const iconMap = {
   "staff-management": Users,
   "org-assignment": Building2,
   patients: ShieldPlus,
+  "patient-overview": ClipboardList,
   reports: Bell,
   settings: Settings,
   "nurse-roster": ClipboardList
@@ -93,7 +94,10 @@ export default function Sidebar({
               <NavLink
                 key={item.id}
                 to={item.path}
-                end={item.path === "/dashboard"}
+                end={
+                      item.path === "/dashboard" ||
+                      item.path === "/dashboard/patients"
+                    }
                 className={({ isActive }) =>
                   `sidebar-link ${isActive ? "active" : ""} ${
                     collapsed && !isMobile ? "icon-only" : ""
diff --git a/guardian-admin-dashboard/src/pages/PatientOverviewPage.jsx b/guardian-admin-dashboard/src/pages/PatientOverviewPage.jsx
new file mode 100644
index 000000000..5b49d43a9
--- /dev/null
+++ b/guardian-admin-dashboard/src/pages/PatientOverviewPage.jsx
@@ -0,0 +1,349 @@
+import { useEffect, useMemo, useState } from "react";
+import { getAllPatients, getPatientOverview } from "../services/patientService";
+
+
+
+export default function PatientOverviewPage() {
+  const [patients, setPatients] = useState([]);
+  const [selectedPatientId, setSelectedPatientId] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [overview, setOverview] = useState(null);
+  const [loadingPatients, setLoadingPatients] = useState(true);
+  const [loadingOverview, setLoadingOverview] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchPatients = async () => {
+      try {
+        setLoadingPatients(true);
+        setError("");
+
+        const data = await getAllPatients();
+        const patientList = Array.isArray(data) ? data : data?.patients || [];
+        setPatients(patientList);
+      } catch (err) {
+        console.error("Failed to load patients:", err);
+        setError(err?.response?.data?.message || "Failed to load patients");
+      } finally {
+        setLoadingPatients(false);
+      }
+    };
+
+    fetchPatients();
+  }, []);
+
+  const filteredPatients = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+
+    if (!term) return patients;
+
+    return patients.filter((patient) => {
+      const fullname = patient?.fullname?.toLowerCase() || "";
+      const id = patient?._id?.toLowerCase() || "";
+      return fullname.includes(term) || id.includes(term);
+    });
+  }, [patients, searchTerm]);
+
+  const handleSelectPatient = async (patientId) => {
+    try {
+      setSelectedPatientId(patientId);
+      setLoadingOverview(true);
+      setError("");
+
+      const selectedPatient = patients.find(p => p._id === patientId);
+      const orgId = selectedPatient?.organization;
+      const data = await getPatientOverview(patientId, orgId);
+      
+      setOverview(data);
+    } catch (err) {
+      console.error("Failed to load patient overview:", err);
+      console.log("Backend error data:", err?.response?.data);
+      setError(
+        err?.response?.data?.message || "Failed to load patient overview"
+      );
+      setOverview(null);
+      setSelectedPatientId("");
+    } finally {
+      setLoadingOverview(false);
+    }
+  };
+
+  const handleChangePatient = () => {
+    setSelectedPatientId("");
+    setOverview(null);
+    setError("");
+  };
+
+  const patient = overview?.patient || {};
+  const records = overview?.records || [];
+  const carePlans = overview?.carePlans || [];
+  const tasks = overview?.tasks || [];
+  const logs = overview?.logs || [];
+
+  return (
+    <div style={styles.page}>
+      <div style={styles.card}>
+        <h1 style={styles.title}>Patient Overview</h1>
+
+        <div style={styles.topSection}>
+          <div style={styles.searchBlock}>
+            <label style={styles.label}>Search Patient</label>
+            <input
+              type="text"
+              placeholder="Search by name or patient ID"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              style={styles.input}
+            />
+          </div>
+        </div>
+
+        {loadingPatients ? (
+          <p style={styles.message}>Loading patients...</p>
+        ) : error && !overview ? (
+          <p style={{ ...styles.message, color: "#c0392b" }}>{error}</p>
+        ) : !selectedPatientId ? (
+          <div style={styles.listWrap}>
+            {filteredPatients.length === 0 ? (
+              <p style={styles.message}>No patients found.</p>
+            ) : (
+              filteredPatients.map((item) => (
+                <div key={item._id} style={styles.patientRow}>
+                  <div>
+                    <h3 style={styles.patientName}>{item.fullname}</h3>
+                    {/*<p style={styles.patientMeta}>ID: {item._id}</p>*/}
+                    <p style={styles.patientMeta}>
+                      Gender: {item.gender || "-"}
+                    </p>
+                    <p style={styles.patientMeta}>Age: {item.age ?? "-"}</p>
+                  </div>
+
+                  <button
+                    style={styles.button}
+                    onClick={() => handleSelectPatient(item._id)}
+                  >
+                    View Overview
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        ) : null}
+
+        {loadingOverview ? (
+          <p style={styles.message}>Loading patient overview...</p>
+        ) : overview ? (
+          <>
+            <button style={styles.secondaryButton} onClick={handleChangePatient}>
+              Change Patient
+            </button>
+
+            <div style={styles.overviewCard}>
+              <h2 style={styles.sectionTitle}>
+                {patient.fullname || "Unknown Patient"}
+              </h2>
+              <p>Gender: {patient.gender || "-"}</p>
+              <p>Date of Birth: {new Date(patient.dateOfBirth).toLocaleDateString() || "-"}</p>
+              <p>Organization: {patient.organization?.name || "Guardian Moniter"}</p>
+
+              <h3 style={styles.subTitle}>Caretaker</h3>
+              <p>{patient.caretaker?.fullname || "-"}</p>
+              <p>{patient.caretaker?.email || "-"}</p>
+
+              <h3 style={styles.subTitle}>Assigned Nurses</h3>
+              {patient.assignedNurses?.length ? (
+                patient.assignedNurses.map((nurse) => (
+                  <div key={nurse._id} style={{ marginBottom: "8px" }}>
+                    <p>{nurse.fullname}</p>
+                    <p>{nurse.email}</p>
+                  </div>
+                ))
+              ) : (
+                <p>No nurses assigned</p>
+              )}
+
+              <h3 style={styles.subTitle}>Assigned Doctor</h3>
+              <p>{patient.assignedDoctor?.fullname || "-"}</p>
+              <p>{patient.assignedDoctor?.email || "-"}</p>
+            </div>
+
+            <div style={styles.statsRow}>
+              <div style={styles.statCard}>
+                <h3>Records</h3>
+                <p>{records.length}</p>
+              </div>
+              <div style={styles.statCard}>
+                <h3>Care Plans</h3>
+                <p>{carePlans.length}</p>
+              </div>
+              <div style={styles.statCard}>
+                <h3>Tasks</h3>
+                <p>{tasks.length}</p>
+              </div>
+              <div style={styles.statCard}>
+                <h3>Logs</h3>
+                <p>{logs.length}</p>
+              </div>
+            </div>
+
+            <Section title="Records" items={records} />
+            <Section title="Care Plans" items={carePlans} />
+            <Section title="Tasks" items={tasks} />
+            <Section title="Logs" items={logs} />
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, items }) {
+  return (
+    <div style={{ marginTop: "24px" }}>
+      <h2 style={{ color: "#1f4788" }}>{title}</h2>
+      {!items?.length ? (
+        <div style={styles.emptyBox}>No {title.toLowerCase()} available.</div>
+      ) : (
+        <div style={{ display: "grid", gap: "12px", marginTop: "12px" }}>
+          {items.map((item, index) => (
+            <div key={item?._id || index} style={styles.itemBox}>
+              <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
+                {JSON.stringify(item, null, 2)}
+              </pre>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const styles = {
+  page: {
+    padding: "24px",
+  },
+  card: {
+    background: "#f9fbfd",
+    borderRadius: "28px",
+    padding: "28px",
+    border: "1px solid #d9e4ee",
+  },
+  title: {
+    color: "#1f4788",
+    fontSize: "2rem",
+    fontWeight: 700,
+    marginBottom: "24px",
+  },
+  topSection: {
+    display: "flex",
+    gap: "16px",
+    marginBottom: "20px",
+  },
+  searchBlock: {
+    width: "100%",
+  },
+  label: {
+    display: "block",
+    marginBottom: "10px",
+    fontSize: "1.1rem",
+    fontWeight: 600,
+    color: "#1f4788",
+  },
+  input: {
+    width: "100%",
+    maxWidth: "520px",
+    padding: "16px 20px",
+    borderRadius: "22px",
+    border: "1px solid #d9e4ee",
+    fontSize: "1rem",
+    outline: "none",
+  },
+  listWrap: {
+    display: "grid",
+    gap: "14px",
+    marginBottom: "24px",
+  },
+  patientRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: "#ffffff",
+    borderRadius: "18px",
+    padding: "18px",
+    border: "1px solid #d9e4ee",
+  },
+  patientName: {
+    margin: "0 0 8px 0",
+    color: "#1f4788",
+  },
+  patientMeta: {
+    margin: "4px 0",
+    color: "#5b6b84",
+  },
+  button: {
+    background: "linear-gradient(90deg, #6fb2dc, #4f95c5)",
+    color: "#fff",
+    border: "none",
+    borderRadius: "16px",
+    padding: "12px 18px",
+    cursor: "pointer",
+    fontWeight: 600,
+  },
+  secondaryButton: {
+    background: "#ffffff",
+    color: "#1f4788",
+    border: "1px solid #d9e4ee",
+    borderRadius: "14px",
+    padding: "10px 16px",
+    cursor: "pointer",
+    fontWeight: 600,
+    marginTop: "6px",
+    marginBottom: "14px",
+  },
+  overviewCard: {
+    background: "#fff",
+    borderRadius: "20px",
+    padding: "20px",
+    marginTop: "10px",
+    border: "1px solid #d9e4ee",
+  },
+  sectionTitle: {
+    color: "#1f4788",
+    marginBottom: "12px",
+  },
+  subTitle: {
+    color: "#1f4788",
+    marginTop: "16px",
+    marginBottom: "8px",
+  },
+  statsRow: {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    gap: "14px",
+    marginTop: "20px",
+  },
+  statCard: {
+    background: "#fff",
+    borderRadius: "18px",
+    padding: "18px",
+    textAlign: "center",
+    border: "1px solid #d9e4ee",
+  },
+  emptyBox: {
+    background: "#fff",
+    borderRadius: "14px",
+    padding: "16px",
+    border: "1px solid #d9e4ee",
+  },
+  itemBox: {
+    background: "#fff",
+    borderRadius: "14px",
+    padding: "16px",
+    border: "1px solid #d9e4ee",
+  },
+  message: {
+    marginTop: "18px",
+    color: "#2c3e50",
+  },
+};
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/services/api.js b/guardian-admin-dashboard/src/services/api.js
index 7d56f1bb6..eb1419540 100644
--- a/guardian-admin-dashboard/src/services/api.js
+++ b/guardian-admin-dashboard/src/services/api.js
@@ -4,7 +4,7 @@ import { getAuthToken } from "../utils/storage";
 const api = axios.create({
   baseURL:
     import.meta.env.VITE_API_BASE_URL ||
-    "https://guardian-backend-ashen.vercel.app/",
+    "https://guardian-backend-git-fix-cors-patelrudra2306-5873s-projects.vercel.app/api/v1",
   headers: {
     "Content-Type": "application/json",
   },
diff --git a/guardian-admin-dashboard/src/services/authService.js b/guardian-admin-dashboard/src/services/authService.js
index 9ac70474b..52a65daeb 100644
--- a/guardian-admin-dashboard/src/services/authService.js
+++ b/guardian-admin-dashboard/src/services/authService.js
@@ -29,22 +29,15 @@
 // }
 
 // Mock login and otp fallback
+import api from "./api";
 
 export async function loginAdmin({ email, password }) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        user: {
-          id: "demo-admin-id",
-          fullname: "Alice Smith",
-          email,
-          role: "admin",
-          twoFactorRequired: true,
-        },
-        token: "demo-admin-token",
-      });
-    }, 700);
+  const response = await api.post("/auth/login", {
+    email,
+    password,
   });
+  console.log("LOGIN RESPONSE:", response.data); 
+  return response.data;
 }
 
 export async function sendPin(email) {
diff --git a/guardian-admin-dashboard/src/services/patientService.js b/guardian-admin-dashboard/src/services/patientService.js
new file mode 100644
index 000000000..0f32ba99d
--- /dev/null
+++ b/guardian-admin-dashboard/src/services/patientService.js
@@ -0,0 +1,13 @@
+import api from "./api";
+
+export const getAllPatients = async () => {
+  const response = await api.get("/admin/patients");
+  return response.data;
+};
+
+export const getPatientOverview = async (patientId, orgId) => {
+  const response = await api.get(`/admin/patients/${patientId}/overview`, {
+    params: { orgId },
+  });
+  return response.data;
+};
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/utils/constants.js b/guardian-admin-dashboard/src/utils/constants.js
index 5b4852dd1..dba88d487 100644
--- a/guardian-admin-dashboard/src/utils/constants.js
+++ b/guardian-admin-dashboard/src/utils/constants.js
@@ -11,9 +11,15 @@ export const ADMIN_NAV_ITEMS = [
     path: "/dashboard/org-assignment",
   },
   { id: "patients", label: "Patients", path: "/dashboard/patients" },
+  {
+  id: "patient-overview",
+  label: "Patient Overview",
+  path: "/dashboard/patient-overview",
+},
   { id: "nurse-roster", label: "Nurse Roster", path: "/dashboard/nurse-roster" },
   { id: "reports", label: "Reports", path: "/dashboard/reports" },
   { id: "settings", label: "Settings", path: "/dashboard/settings" },
+  
 ];
 export const DASHBOARD_STATS = [
   {
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..b0578dffa
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Guardian",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 3960a9a14028415e7bdcab81acb3f1402b8f772f Mon Sep 17 00:00:00 2001
From: Nishiki-Asumi97 <nasumiyapa@gmail.com>
Date: Wed, 15 Apr 2026 15:26:11 +1000
Subject: [PATCH 09/10] Patient management implementation

---
 guardian-admin-dashboard/package-lock.json    | 587 ++++++++-----
 guardian-admin-dashboard/package.json         |   1 +
 .../src/pages/PatientsPage.jsx                | 816 +++++++++++++++++-
 guardian-admin-dashboard/src/services/api.js  |   3 +-
 .../src/services/patientService.js            |  26 +
 5 files changed, 1192 insertions(+), 241 deletions(-)
 create mode 100644 guardian-admin-dashboard/src/services/patientService.js

diff --git a/guardian-admin-dashboard/package-lock.json b/guardian-admin-dashboard/package-lock.json
index 334a74566..65f92b365 100644
--- a/guardian-admin-dashboard/package-lock.json
+++ b/guardian-admin-dashboard/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.13.6",
+        "cors": "^2.8.6",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.6.0",
         "react": "^19.1.0",
@@ -347,9 +348,9 @@
       "license": "MIT"
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.8.tgz",
-      "integrity": "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
+      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
       "cpu": [
         "ppc64"
       ],
@@ -364,9 +365,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.8.tgz",
-      "integrity": "sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz",
+      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
       "cpu": [
         "arm"
       ],
@@ -381,9 +382,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.8.tgz",
-      "integrity": "sha512-OD3p7LYzWpLhZEyATcTSJ67qB5D+20vbtr6vHlHWSQYhKtzUYrETuWThmzFpZtFsBIxRvhO07+UgVA9m0i/O1w==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz",
+      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
       "cpu": [
         "arm64"
       ],
@@ -398,9 +399,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.8.tgz",
-      "integrity": "sha512-yJAVPklM5+4+9dTeKwHOaA+LQkmrKFX96BM0A/2zQrbS6ENCmxc4OVoBs5dPkCCak2roAD+jKCdnmOqKszPkjA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz",
+      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
       "cpu": [
         "x64"
       ],
@@ -415,9 +416,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.8.tgz",
-      "integrity": "sha512-Jw0mxgIaYX6R8ODrdkLLPwBqHTtYHJSmzzd+QeytSugzQ0Vg4c5rDky5VgkoowbZQahCbsv1rT1KW72MPIkevw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz",
+      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
       "cpu": [
         "arm64"
       ],
@@ -432,9 +433,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.8.tgz",
-      "integrity": "sha512-Vh2gLxxHnuoQ+GjPNvDSDRpoBCUzY4Pu0kBqMBDlK4fuWbKgGtmDIeEC081xi26PPjn+1tct+Bh8FjyLlw1Zlg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz",
+      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
       "cpu": [
         "x64"
       ],
@@ -449,9 +450,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.8.tgz",
-      "integrity": "sha512-YPJ7hDQ9DnNe5vxOm6jaie9QsTwcKedPvizTVlqWG9GBSq+BuyWEDazlGaDTC5NGU4QJd666V0yqCBL2oWKPfA==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
       "cpu": [
         "arm64"
       ],
@@ -466,9 +467,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.8.tgz",
-      "integrity": "sha512-MmaEXxQRdXNFsRN/KcIimLnSJrk2r5H8v+WVafRWz5xdSVmWLoITZQXcgehI2ZE6gioE6HirAEToM/RvFBeuhw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz",
+      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
       "cpu": [
         "x64"
       ],
@@ -483,9 +484,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.8.tgz",
-      "integrity": "sha512-FuzEP9BixzZohl1kLf76KEVOsxtIBFwCaLupVuk4eFVnOZfU+Wsn+x5Ryam7nILV2pkq2TqQM9EZPsOBuMC+kg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz",
+      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
       "cpu": [
         "arm"
       ],
@@ -500,9 +501,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.8.tgz",
-      "integrity": "sha512-WIgg00ARWv/uYLU7lsuDK00d/hHSfES5BzdWAdAig1ioV5kaFNrtK8EqGcUBJhYqotlUByUKz5Qo6u8tt7iD/w==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz",
+      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
       "cpu": [
         "arm64"
       ],
@@ -517,9 +518,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.8.tgz",
-      "integrity": "sha512-A1D9YzRX1i+1AJZuFFUMP1E9fMaYY+GnSQil9Tlw05utlE86EKTUA7RjwHDkEitmLYiFsRd9HwKBPEftNdBfjg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz",
+      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
       "cpu": [
         "ia32"
       ],
@@ -534,9 +535,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.8.tgz",
-      "integrity": "sha512-O7k1J/dwHkY1RMVvglFHl1HzutGEFFZ3kNiDMSOyUrB7WcoHGf96Sh+64nTRT26l3GMbCW01Ekh/ThKM5iI7hQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz",
+      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
       "cpu": [
         "loong64"
       ],
@@ -551,9 +552,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.8.tgz",
-      "integrity": "sha512-uv+dqfRazte3BzfMp8PAQXmdGHQt2oC/y2ovwpTteqrMx2lwaksiFZ/bdkXJC19ttTvNXBuWH53zy/aTj1FgGw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz",
+      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
       "cpu": [
         "mips64el"
       ],
@@ -568,9 +569,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.8.tgz",
-      "integrity": "sha512-GyG0KcMi1GBavP5JgAkkstMGyMholMDybAf8wF5A70CALlDM2p/f7YFE7H92eDeH/VBtFJA5MT4nRPDGg4JuzQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz",
+      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
       "cpu": [
         "ppc64"
       ],
@@ -585,9 +586,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.8.tgz",
-      "integrity": "sha512-rAqDYFv3yzMrq7GIcen3XP7TUEG/4LK86LUPMIz6RT8A6pRIDn0sDcvjudVZBiiTcZCY9y2SgYX2lgK3AF+1eg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz",
+      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
       "cpu": [
         "riscv64"
       ],
@@ -602,9 +603,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.8.tgz",
-      "integrity": "sha512-Xutvh6VjlbcHpsIIbwY8GVRbwoviWT19tFhgdA7DlenLGC/mbc3lBoVb7jxj9Z+eyGqvcnSyIltYUrkKzWqSvg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz",
+      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
       "cpu": [
         "s390x"
       ],
@@ -619,9 +620,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.8.tgz",
-      "integrity": "sha512-ASFQhgY4ElXh3nDcOMTkQero4b1lgubskNlhIfJrsH5OKZXDpUAKBlNS0Kx81jwOBp+HCeZqmoJuihTv57/jvQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz",
+      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
       "cpu": [
         "x64"
       ],
@@ -636,9 +637,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.8.tgz",
-      "integrity": "sha512-d1KfruIeohqAi6SA+gENMuObDbEjn22olAR7egqnkCD9DGBG0wsEARotkLgXDu6c4ncgWTZJtN5vcgxzWRMzcw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
       "cpu": [
         "arm64"
       ],
@@ -653,9 +654,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.8.tgz",
-      "integrity": "sha512-nVDCkrvx2ua+XQNyfrujIG38+YGyuy2Ru9kKVNyh5jAys6n+l44tTtToqHjino2My8VAY6Lw9H7RI73XFi66Cg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz",
+      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
       "cpu": [
         "x64"
       ],
@@ -670,9 +671,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.8.tgz",
-      "integrity": "sha512-j8HgrDuSJFAujkivSMSfPQSAa5Fxbvk4rgNAS5i3K+r8s1X0p1uOO2Hl2xNsGFppOeHOLAVgYwDVlmxhq5h+SQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz",
+      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
       "cpu": [
         "arm64"
       ],
@@ -687,9 +688,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.8.tgz",
-      "integrity": "sha512-1h8MUAwa0VhNCDp6Af0HToI2TJFAn1uqT9Al6DJVzdIBAd21m/G0Yfc77KDM3uF3T/YaOgQq3qTJHPbTOInaIQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz",
+      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
       "cpu": [
         "x64"
       ],
@@ -704,9 +705,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.8.tgz",
-      "integrity": "sha512-r2nVa5SIK9tSWd0kJd9HCffnDHKchTGikb//9c7HX+r+wHYCpQrSgxhlY6KWV1nFo1l4KFbsMlHk+L6fekLsUg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz",
+      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
       "cpu": [
         "arm64"
       ],
@@ -721,9 +722,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.8.tgz",
-      "integrity": "sha512-zUlaP2S12YhQ2UzUfcCuMDHQFJyKABkAjvO5YSndMiIkMimPmxA+BYSBikWgsRpvyxuRnow4nS5NPnf9fpv41w==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz",
+      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
       "cpu": [
         "x64"
       ],
@@ -738,9 +739,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.8.tgz",
-      "integrity": "sha512-YEGFFWESlPva8hGL+zvj2z/SaK+pH0SwOM0Nc/d+rVnW7GSTFlLBGzZkuSU9kFIGIo8q9X3ucpZhu8PDN5A2sQ==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz",
+      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
       "cpu": [
         "arm64"
       ],
@@ -755,9 +756,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.8.tgz",
-      "integrity": "sha512-hiGgGC6KZ5LZz58OL/+qVVoZiuZlUYlYHNAmczOm7bs2oE1XriPFi5ZHHrS8ACpV5EjySrnoCKmcbQMN+ojnHg==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz",
+      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
       "cpu": [
         "ia32"
       ],
@@ -772,9 +773,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.8.tgz",
-      "integrity": "sha512-cn3Yr7+OaaZq1c+2pe+8yxC8E144SReCQjN6/2ynubzYjvyqZjTXfQJpAcQpsdJq3My7XADANiYGHoFC69pLQw==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz",
+      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
       "cpu": [
         "x64"
       ],
@@ -1055,9 +1056,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.2.tgz",
-      "integrity": "sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.1.tgz",
+      "integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
       "cpu": [
         "arm"
       ],
@@ -1069,9 +1070,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.2.tgz",
-      "integrity": "sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.1.tgz",
+      "integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
       "cpu": [
         "arm64"
       ],
@@ -1083,9 +1084,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.2.tgz",
-      "integrity": "sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.1.tgz",
+      "integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
       "cpu": [
         "arm64"
       ],
@@ -1097,9 +1098,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.2.tgz",
-      "integrity": "sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.1.tgz",
+      "integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
       "cpu": [
         "x64"
       ],
@@ -1111,9 +1112,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.2.tgz",
-      "integrity": "sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
+      "integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
       "cpu": [
         "arm64"
       ],
@@ -1125,9 +1126,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.2.tgz",
-      "integrity": "sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.1.tgz",
+      "integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
       "cpu": [
         "x64"
       ],
@@ -1139,9 +1140,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.2.tgz",
-      "integrity": "sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.1.tgz",
+      "integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
       "cpu": [
         "arm"
       ],
@@ -1153,9 +1154,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.2.tgz",
-      "integrity": "sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.1.tgz",
+      "integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
       "cpu": [
         "arm"
       ],
@@ -1167,9 +1168,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.2.tgz",
-      "integrity": "sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.1.tgz",
+      "integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
       "cpu": [
         "arm64"
       ],
@@ -1181,9 +1182,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.2.tgz",
-      "integrity": "sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.1.tgz",
+      "integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
       "cpu": [
         "arm64"
       ],
@@ -1194,10 +1195,24 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.2.tgz",
-      "integrity": "sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==",
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.1.tgz",
+      "integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.1.tgz",
+      "integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
       "cpu": [
         "loong64"
       ],
@@ -1209,9 +1224,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.2.tgz",
-      "integrity": "sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.1.tgz",
+      "integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.1.tgz",
+      "integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
       "cpu": [
         "ppc64"
       ],
@@ -1223,9 +1252,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.2.tgz",
-      "integrity": "sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.1.tgz",
+      "integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
       "cpu": [
         "riscv64"
       ],
@@ -1237,9 +1266,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.2.tgz",
-      "integrity": "sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.1.tgz",
+      "integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
       "cpu": [
         "riscv64"
       ],
@@ -1251,9 +1280,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.2.tgz",
-      "integrity": "sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.1.tgz",
+      "integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
       "cpu": [
         "s390x"
       ],
@@ -1265,9 +1294,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.2.tgz",
-      "integrity": "sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
       "cpu": [
         "x64"
       ],
@@ -1279,9 +1308,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.2.tgz",
-      "integrity": "sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.1.tgz",
+      "integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
       "cpu": [
         "x64"
       ],
@@ -1292,10 +1321,38 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.1.tgz",
+      "integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
+      "integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.2.tgz",
-      "integrity": "sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.1.tgz",
+      "integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
       "cpu": [
         "arm64"
       ],
@@ -1307,9 +1364,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.2.tgz",
-      "integrity": "sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.1.tgz",
+      "integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
       "cpu": [
         "ia32"
       ],
@@ -1320,10 +1377,24 @@
         "win32"
       ]
     },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.2.tgz",
-      "integrity": "sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
       "cpu": [
         "x64"
       ],
@@ -1464,9 +1535,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1510,14 +1581,14 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.13.6",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
-      "integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz",
+      "integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.11",
         "form-data": "^4.0.5",
-        "proxy-from-env": "^1.1.0"
+        "proxy-from-env": "^2.1.0"
       }
     },
     "node_modules/balanced-match": {
@@ -1528,9 +1599,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1700,6 +1771,23 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1851,9 +1939,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz",
-      "integrity": "sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==",
+      "version": "0.27.7",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
+      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -1864,32 +1952,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.8",
-        "@esbuild/android-arm": "0.25.8",
-        "@esbuild/android-arm64": "0.25.8",
-        "@esbuild/android-x64": "0.25.8",
-        "@esbuild/darwin-arm64": "0.25.8",
-        "@esbuild/darwin-x64": "0.25.8",
-        "@esbuild/freebsd-arm64": "0.25.8",
-        "@esbuild/freebsd-x64": "0.25.8",
-        "@esbuild/linux-arm": "0.25.8",
-        "@esbuild/linux-arm64": "0.25.8",
-        "@esbuild/linux-ia32": "0.25.8",
-        "@esbuild/linux-loong64": "0.25.8",
-        "@esbuild/linux-mips64el": "0.25.8",
-        "@esbuild/linux-ppc64": "0.25.8",
-        "@esbuild/linux-riscv64": "0.25.8",
-        "@esbuild/linux-s390x": "0.25.8",
-        "@esbuild/linux-x64": "0.25.8",
-        "@esbuild/netbsd-arm64": "0.25.8",
-        "@esbuild/netbsd-x64": "0.25.8",
-        "@esbuild/openbsd-arm64": "0.25.8",
-        "@esbuild/openbsd-x64": "0.25.8",
-        "@esbuild/openharmony-arm64": "0.25.8",
-        "@esbuild/sunos-x64": "0.25.8",
-        "@esbuild/win32-arm64": "0.25.8",
-        "@esbuild/win32-ia32": "0.25.8",
-        "@esbuild/win32-x64": "0.25.8"
+        "@esbuild/aix-ppc64": "0.27.7",
+        "@esbuild/android-arm": "0.27.7",
+        "@esbuild/android-arm64": "0.27.7",
+        "@esbuild/android-x64": "0.27.7",
+        "@esbuild/darwin-arm64": "0.27.7",
+        "@esbuild/darwin-x64": "0.27.7",
+        "@esbuild/freebsd-arm64": "0.27.7",
+        "@esbuild/freebsd-x64": "0.27.7",
+        "@esbuild/linux-arm": "0.27.7",
+        "@esbuild/linux-arm64": "0.27.7",
+        "@esbuild/linux-ia32": "0.27.7",
+        "@esbuild/linux-loong64": "0.27.7",
+        "@esbuild/linux-mips64el": "0.27.7",
+        "@esbuild/linux-ppc64": "0.27.7",
+        "@esbuild/linux-riscv64": "0.27.7",
+        "@esbuild/linux-s390x": "0.27.7",
+        "@esbuild/linux-x64": "0.27.7",
+        "@esbuild/netbsd-arm64": "0.27.7",
+        "@esbuild/netbsd-x64": "0.27.7",
+        "@esbuild/openbsd-arm64": "0.27.7",
+        "@esbuild/openbsd-x64": "0.27.7",
+        "@esbuild/openharmony-arm64": "0.27.7",
+        "@esbuild/sunos-x64": "0.27.7",
+        "@esbuild/win32-arm64": "0.27.7",
+        "@esbuild/win32-ia32": "0.27.7",
+        "@esbuild/win32-x64": "0.27.7"
       }
     },
     "node_modules/escalade": {
@@ -2115,11 +2203,14 @@
       "license": "MIT"
     },
     "node_modules/fdir": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -2174,16 +2265,16 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
       "funding": [
         {
           "type": "individual",
@@ -2476,9 +2567,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2632,9 +2723,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -2698,6 +2789,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2788,9 +2888,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2846,10 +2946,13 @@
       }
     },
     "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -2959,9 +3062,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.46.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.2.tgz",
-      "integrity": "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2975,26 +3078,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.46.2",
-        "@rollup/rollup-android-arm64": "4.46.2",
-        "@rollup/rollup-darwin-arm64": "4.46.2",
-        "@rollup/rollup-darwin-x64": "4.46.2",
-        "@rollup/rollup-freebsd-arm64": "4.46.2",
-        "@rollup/rollup-freebsd-x64": "4.46.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.46.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.46.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.46.2",
-        "@rollup/rollup-linux-arm64-musl": "4.46.2",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.46.2",
-        "@rollup/rollup-linux-ppc64-gnu": "4.46.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.46.2",
-        "@rollup/rollup-linux-riscv64-musl": "4.46.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.46.2",
-        "@rollup/rollup-linux-x64-gnu": "4.46.2",
-        "@rollup/rollup-linux-x64-musl": "4.46.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.46.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.46.2",
-        "@rollup/rollup-win32-x64-msvc": "4.46.2",
+        "@rollup/rollup-android-arm-eabi": "4.60.1",
+        "@rollup/rollup-android-arm64": "4.60.1",
+        "@rollup/rollup-darwin-arm64": "4.60.1",
+        "@rollup/rollup-darwin-x64": "4.60.1",
+        "@rollup/rollup-freebsd-arm64": "4.60.1",
+        "@rollup/rollup-freebsd-x64": "4.60.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.1",
+        "@rollup/rollup-linux-arm64-musl": "4.60.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.1",
+        "@rollup/rollup-linux-loong64-musl": "4.60.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-musl": "4.60.1",
+        "@rollup/rollup-openbsd-x64": "4.60.1",
+        "@rollup/rollup-openharmony-arm64": "4.60.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.1",
+        "@rollup/rollup-win32-x64-gnu": "4.60.1",
+        "@rollup/rollup-win32-x64-msvc": "4.60.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -3152,14 +3260,14 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -3228,19 +3336,28 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/vite": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz",
-      "integrity": "sha512-MHFiOENNBd+Bd9uvc8GEsIzdkn1JxMmEeYX35tI3fv0sJBUTfW5tQsoaOwuY4KhBI09A3dUJ/DXf2yxPVPUceg==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.25.0",
-        "fdir": "^6.4.6",
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
-        "rollup": "^4.40.0",
-        "tinyglobby": "^0.2.14"
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
diff --git a/guardian-admin-dashboard/package.json b/guardian-admin-dashboard/package.json
index 9547841e6..71dc84c61 100644
--- a/guardian-admin-dashboard/package.json
+++ b/guardian-admin-dashboard/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.13.6",
+    "cors": "^2.8.6",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.6.0",
     "react": "^19.1.0",
diff --git a/guardian-admin-dashboard/src/pages/PatientsPage.jsx b/guardian-admin-dashboard/src/pages/PatientsPage.jsx
index 8a2899390..faa8e3db8 100644
--- a/guardian-admin-dashboard/src/pages/PatientsPage.jsx
+++ b/guardian-admin-dashboard/src/pages/PatientsPage.jsx
@@ -1,8 +1,814 @@
-export default function PatientsPage() {
+import { useEffect, useState } from 'react';
+import {
+  getPatients,
+  createPatient,
+  deactivatePatient,
+} from '../services/patientService';
+
+const initialFormData = {
+  fullname: '',
+  gender: '',
+  dateOfBirth: '',
+  caretakerId: '',
+  nurseId: '',
+  doctorId: '',
+  image: '',
+  dateOfAdmitting: '',
+  description: '',
+};
+
+function formatDate(dateString) {
+  if (!dateString) return 'N/A';
+
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) return dateString;
+
+  return date.toLocaleDateString();
+}
+
+function PatientsPage() {
+  const [patients, setPatients] = useState([]);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    pages: 1,
+    limit: 10,
+  });
+
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [deactivatingId, setDeactivatingId] = useState('');
+  const [error, setError] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [formData, setFormData] = useState(initialFormData);
+
+  const loadPatients = async (page = 1) => {
+    try {
+      setLoading(true);
+      setError('');
+
+      const data = await getPatients({ page, limit: 10 });
+
+      setPatients(data?.patients || []);
+      setPagination(
+        data?.pagination || {
+          total: 0,
+          page: 1,
+          pages: 1,
+          limit: 10,
+        }
+      );
+    } catch (err) {
+      console.error('Load patients error:', err);
+      setError(
+        err?.response?.data?.message ||
+          err?.message ||
+          'Failed to load patients.'
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPatients();
+  }, []);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const resetForm = () => {
+    setFormData(initialFormData);
+  };
+
+  const handleToggleForm = () => {
+    setShowForm((prev) => !prev);
+    setError('');
+    setSuccessMessage('');
+
+    if (showForm) {
+      resetForm();
+    }
+  };
+
+  const handleAddPatient = async (e) => {
+    e.preventDefault();
+
+    if (
+      !formData.fullname ||
+      !formData.gender ||
+      !formData.dateOfBirth ||
+      !formData.caretakerId ||
+      !formData.nurseId ||
+      !formData.doctorId ||
+      !formData.dateOfAdmitting
+    ) {
+      setError(
+        'Full name, gender, date of birth, caretaker ID, nurse ID, doctor ID, and date of admitting are required.'
+      );
+      setSuccessMessage('');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setError('');
+      setSuccessMessage('');
+
+      const payload = {
+        fullname: formData.fullname,
+        gender: formData.gender,
+        dateOfBirth: formData.dateOfBirth,
+        caretakerId: formData.caretakerId,
+        nurseId: formData.nurseId,
+        doctorId: formData.doctorId,
+        image: formData.image,
+        dateOfAdmitting: formData.dateOfAdmitting,
+        description: formData.description,
+      };
+
+      const response = await createPatient(payload);
+
+      setSuccessMessage(response?.message || 'Patient created.');
+      resetForm();
+      setShowForm(false);
+
+      await loadPatients(pagination.page || 1);
+    } catch (err) {
+      console.error('Add patient error:', err);
+      setError(
+        err?.response?.data?.message ||
+          err?.message ||
+          'Failed to add patient.'
+      );
+      setSuccessMessage('');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDeactivate = async (id) => {
+    const confirmed = window.confirm(
+      'Are you sure you want to deactivate this patient?'
+    );
+
+    if (!confirmed) return;
+
+    try {
+      setDeactivatingId(id);
+      setError('');
+      setSuccessMessage('');
+
+      const response = await deactivatePatient(id);
+
+      setSuccessMessage(response?.message || 'Patient deactivated successfully.');
+      await loadPatients(pagination.page || 1);
+    } catch (err) {
+      console.error('Deactivate patient error:', err);
+      setError(
+        err?.response?.data?.message ||
+          err?.message ||
+          'Failed to deactivate patient.'
+      );
+      setSuccessMessage('');
+    } finally {
+      setDeactivatingId('');
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (pagination.page > 1) {
+      loadPatients(pagination.page - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (pagination.page < pagination.pages) {
+      loadPatients(pagination.page + 1);
+    }
+  };
+
   return (
-    <div className="panel">
-      <h3>Patients</h3>
-      <p>This placeholder route is ready for future patient-related admin work.</p>
+    <div style={{ width: '100%' }}>
+      <div
+        style={{
+          background: '#ffffff',
+          border: '1px solid #d9e2ec',
+          borderRadius: '24px',
+          padding: '24px',
+          boxShadow: '0 4px 14px rgba(15, 23, 42, 0.04)',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            gap: '16px',
+            flexWrap: 'wrap',
+            marginBottom: '20px',
+          }}
+        >
+          <div>
+            <h2 style={{ margin: 0, color: '#123b7a' }}>Patients</h2>
+            <p style={{ marginTop: '6px', color: '#5b6b7f' }}>
+              Manage patients under your organisation.
+            </p>
+          </div>
+
+          <button
+            onClick={handleToggleForm}
+            style={{
+              border: 'none',
+              borderRadius: '12px',
+              padding: '10px 16px',
+              fontWeight: 600,
+              cursor: 'pointer',
+              background: '#4ea3d8',
+              color: '#ffffff',
+            }}
+          >
+            {showForm ? 'Close Form' : 'Add Patient'}
+          </button>
+        </div>
+
+        {successMessage && (
+          <div
+            style={{
+              marginBottom: '16px',
+              padding: '12px 14px',
+              borderRadius: '12px',
+              background: '#e8f8ee',
+              color: '#137333',
+              fontWeight: 500,
+            }}
+          >
+            {successMessage}
+          </div>
+        )}
+
+        {showForm && (
+          <form
+            onSubmit={handleAddPatient}
+            style={{
+              marginBottom: '24px',
+              padding: '20px',
+              border: '1px solid #d9e2ec',
+              borderRadius: '18px',
+              background: '#f8fbff',
+            }}
+          >
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+                gap: '16px',
+              }}
+            >
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  name="fullname"
+                  value={formData.fullname}
+                  onChange={handleInputChange}
+                  placeholder="Enter full name"
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Gender
+                </label>
+                <select
+                  name="gender"
+                  value={formData.gender}
+                  onChange={handleInputChange}
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                    background: '#ffffff',
+                  }}
+                >
+                  <option value="">Select gender</option>
+                  <option value="male">male</option>
+                  <option value="female">female</option>
+                  <option value="other">other</option>
+                </select>
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Date of Birth
+                </label>
+                <input
+                  type="date"
+                  name="dateOfBirth"
+                  value={formData.dateOfBirth}
+                  onChange={handleInputChange}
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Caretaker ID
+                </label>
+                <input
+                  type="text"
+                  name="caretakerId"
+                  value={formData.caretakerId}
+                  onChange={handleInputChange}
+                  placeholder="Enter caretaker ID"
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Nurse ID
+                </label>
+                <input
+                  type="text"
+                  name="nurseId"
+                  value={formData.nurseId}
+                  onChange={handleInputChange}
+                  placeholder="Enter nurse ID"
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Doctor ID
+                </label>
+                <input
+                  type="text"
+                  name="doctorId"
+                  value={formData.doctorId}
+                  onChange={handleInputChange}
+                  placeholder="Enter doctor ID"
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Image URL
+                </label>
+                <input
+                  type="text"
+                  name="image"
+                  value={formData.image}
+                  onChange={handleInputChange}
+                  placeholder="Enter image URL"
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                  Date of Admitting
+                </label>
+                <input
+                  type="date"
+                  name="dateOfAdmitting"
+                  value={formData.dateOfAdmitting}
+                  onChange={handleInputChange}
+                  style={{
+                    height: '44px',
+                    padding: '0 14px',
+                    border: '1px solid #cfd8e3',
+                    borderRadius: '12px',
+                    outline: 'none',
+                  }}
+                />
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+                marginTop: '16px',
+              }}
+            >
+              <label style={{ fontWeight: 600, color: '#2c3e50' }}>
+                Description
+              </label>
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleInputChange}
+                placeholder="Enter patient description"
+                rows={4}
+                style={{
+                  padding: '12px 14px',
+                  border: '1px solid #cfd8e3',
+                  borderRadius: '12px',
+                  outline: 'none',
+                  resize: 'vertical',
+                  fontFamily: 'inherit',
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '12px',
+                marginTop: '20px',
+                flexWrap: 'wrap',
+              }}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  setShowForm(false);
+                  resetForm();
+                  setError('');
+                  setSuccessMessage('');
+                }}
+                style={{
+                  border: 'none',
+                  borderRadius: '12px',
+                  padding: '10px 16px',
+                  fontWeight: 600,
+                  cursor: 'pointer',
+                  background: '#e9f1f8',
+                  color: '#1b3a57',
+                }}
+              >
+                Cancel
+              </button>
+
+              <button
+                type="submit"
+                disabled={submitting}
+                style={{
+                  border: 'none',
+                  borderRadius: '12px',
+                  padding: '10px 16px',
+                  fontWeight: 600,
+                  cursor: submitting ? 'not-allowed' : 'pointer',
+                  background: '#4ea3d8',
+                  color: '#ffffff',
+                  opacity: submitting ? 0.7 : 1,
+                }}
+              >
+                {submitting ? 'Saving...' : 'Save Patient'}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {loading ? (
+          <div
+            style={{
+              padding: '24px',
+              textAlign: 'center',
+              color: '#5b6b7f',
+              border: '1px dashed #cfd8e3',
+              borderRadius: '16px',
+            }}
+          >
+            Loading patients...
+          </div>
+        ) : error ? (
+          <div
+            style={{
+              padding: '24px',
+              textAlign: 'center',
+              color: '#b42318',
+              border: '1px dashed #f5c2c7',
+              borderRadius: '16px',
+              background: '#fdecec',
+            }}
+          >
+            {error}
+          </div>
+        ) : patients.length === 0 ? (
+          <div
+            style={{
+              padding: '24px',
+              textAlign: 'center',
+              color: '#5b6b7f',
+              border: '1px dashed #cfd8e3',
+              borderRadius: '16px',
+            }}
+          >
+            No patients found.
+          </div>
+        ) : (
+          <>
+            <div style={{ overflowX: 'auto' }}>
+              <table
+                style={{
+                  width: '100%',
+                  borderCollapse: 'collapse',
+                }}
+              >
+                <thead>
+                  <tr>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Full Name
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Gender
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Date of Birth
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Age
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Caretaker
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Doctor
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Nurses
+                    </th>
+                    <th
+                      style={{
+                        textAlign: 'left',
+                        padding: '14px 12px',
+                        borderBottom: '1px solid #edf2f7',
+                        color: '#123b7a',
+                        fontSize: '14px',
+                      }}
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  {patients.map((patient) => (
+                    <tr key={patient._id}>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        {patient.fullname || 'N/A'}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                          textTransform: 'capitalize',
+                        }}
+                      >
+                        {patient.gender || 'N/A'}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        {formatDate(patient.dateOfBirth)}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        {patient.age ?? 'N/A'}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        {patient.caretaker?.fullname || 'N/A'}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        {patient.assignedDoctor?.fullname || 'N/A'}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        {patient.assignedNurses?.length
+                          ? patient.assignedNurses
+                              .map((nurse) => nurse.fullname)
+                              .join(', ')
+                          : 'N/A'}
+                      </td>
+                      <td
+                        style={{
+                          padding: '14px 12px',
+                          borderBottom: '1px solid #edf2f7',
+                        }}
+                      >
+                        <button
+                          onClick={() => handleDeactivate(patient._id)}
+                          disabled={deactivatingId === patient._id}
+                          style={{
+                            border: 'none',
+                            borderRadius: '12px',
+                            padding: '10px 14px',
+                            fontWeight: 600,
+                            cursor:
+                              deactivatingId === patient._id
+                                ? 'not-allowed'
+                                : 'pointer',
+                            background: '#ffe5e5',
+                            color: '#b42318',
+                            opacity: deactivatingId === patient._id ? 0.7 : 1,
+                          }}
+                        >
+                          {deactivatingId === patient._id
+                            ? 'Deactivating...'
+                            : 'Deactivate'}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <div
+              style={{
+                marginTop: '20px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                gap: '12px',
+                flexWrap: 'wrap',
+              }}
+            >
+              <div style={{ color: '#5b6b7f', fontSize: '14px' }}>
+                Total Patients: {pagination.total || 0} | Page{' '}
+                {pagination.page || 1} of {pagination.pages || 1}
+              </div>
+
+              <div style={{ display: 'flex', gap: '10px' }}>
+                <button
+                  onClick={handlePreviousPage}
+                  disabled={pagination.page <= 1}
+                  style={{
+                    border: 'none',
+                    borderRadius: '12px',
+                    padding: '10px 14px',
+                    fontWeight: 600,
+                    cursor: pagination.page <= 1 ? 'not-allowed' : 'pointer',
+                    background: '#e9f1f8',
+                    color: '#1b3a57',
+                    opacity: pagination.page <= 1 ? 0.6 : 1,
+                  }}
+                >
+                  Previous
+                </button>
+
+                <button
+                  onClick={handleNextPage}
+                  disabled={pagination.page >= pagination.pages}
+                  style={{
+                    border: 'none',
+                    borderRadius: '12px',
+                    padding: '10px 14px',
+                    fontWeight: 600,
+                    cursor:
+                      pagination.page >= pagination.pages
+                        ? 'not-allowed'
+                        : 'pointer',
+                    background: '#4ea3d8',
+                    color: '#ffffff',
+                    opacity: pagination.page >= pagination.pages ? 0.6 : 1,
+                  }}
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}
+
+export default PatientsPage;
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/services/api.js b/guardian-admin-dashboard/src/services/api.js
index 7d56f1bb6..cb1c0b73e 100644
--- a/guardian-admin-dashboard/src/services/api.js
+++ b/guardian-admin-dashboard/src/services/api.js
@@ -4,7 +4,7 @@ import { getAuthToken } from "../utils/storage";
 const api = axios.create({
   baseURL:
     import.meta.env.VITE_API_BASE_URL ||
-    "https://guardian-backend-ashen.vercel.app/",
+    "https://guardian-backend-git-fix-cors-patelrudra2306-5873s-projects.vercel.app",
   headers: {
     "Content-Type": "application/json",
   },
@@ -12,6 +12,7 @@ const api = axios.create({
 
 api.interceptors.request.use((config) => {
   const token = getAuthToken();
+  console.log('token:', getAuthToken());
 
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
diff --git a/guardian-admin-dashboard/src/services/patientService.js b/guardian-admin-dashboard/src/services/patientService.js
new file mode 100644
index 000000000..b6c76636c
--- /dev/null
+++ b/guardian-admin-dashboard/src/services/patientService.js
@@ -0,0 +1,26 @@
+import api from './api';
+
+export async function getPatients({ page = 1, limit = 10 } = {}) {
+  const params = { page, limit };
+  const response = await api.get('/api/v1/admin/patients', { params });
+
+  console.log('GET patients response:', response.data);
+
+  return response.data;
+}
+
+export async function createPatient(patientData) {
+  const response = await api.post('/api/v1/admin/patients', patientData);
+
+  console.log('POST create patient response:', response.data);
+
+  return response.data;
+}
+
+export async function deactivatePatient(id) {
+  const response = await api.delete(`/api/v1/admin/patients/${id}`);
+
+  console.log('DELETE patient response:', response.data);
+
+  return response.data;
+}
\ No newline at end of file

From 13835788a077e8a77bb6b245ebd8ae237de5561a Mon Sep 17 00:00:00 2001
From: Kudrat Arora <kudratarora@10-141-41-147.wifi-m.deakin.edu.au>
Date: Thu, 30 Apr 2026 08:22:38 +1000
Subject: [PATCH 10/10] Fixed admin auth integration and related UI issues

---
 .../src/components/auth/LoginForm.jsx         | 15 ++--
 .../src/components/auth/OtpForm.jsx           |  6 +-
 .../src/components/common/InputField.css      | 77 +++++++++++++++++++
 .../src/components/common/InputField.jsx      | 44 ++++++++---
 .../src/services/authService.js               | 61 ++++-----------
 .../src/services/patientService.js            |  6 +-
 .../src/services/staffService.js              |  6 +-
 7 files changed, 145 insertions(+), 70 deletions(-)
 create mode 100644 guardian-admin-dashboard/src/components/common/InputField.css

diff --git a/guardian-admin-dashboard/src/components/auth/LoginForm.jsx b/guardian-admin-dashboard/src/components/auth/LoginForm.jsx
index 8b6beb24b..9bafd4867 100644
--- a/guardian-admin-dashboard/src/components/auth/LoginForm.jsx
+++ b/guardian-admin-dashboard/src/components/auth/LoginForm.jsx
@@ -50,11 +50,16 @@ export default function LoginForm() {
         navigate("/dashboard");
       }
     } catch (err) {
-      setError(
-        err?.response?.data?.message ||
-          err?.message ||
-          "Login failed. Please check your credentials and try again."
-      );
+      const status = err?.response?.status;
+      const backendMessage = err?.response?.data?.message;
+
+      if (backendMessage) {
+        setError(backendMessage);
+      } else if (status === 400 || status === 401) {
+        setError("Incorrect email or password. Please try again.");
+      } else {
+        setError("Login failed. Please try again later.");
+      }
     } finally {
       setSubmitting(false);
     }
diff --git a/guardian-admin-dashboard/src/components/auth/OtpForm.jsx b/guardian-admin-dashboard/src/components/auth/OtpForm.jsx
index 0a60c2174..a04330eac 100644
--- a/guardian-admin-dashboard/src/components/auth/OtpForm.jsx
+++ b/guardian-admin-dashboard/src/components/auth/OtpForm.jsx
@@ -53,6 +53,7 @@ export default function OtpForm() {
     } catch (err) {
       setError(
         err?.response?.data?.message ||
+          err?.message ||
           "OTP verification failed. Please try again."
       );
     } finally {
@@ -69,6 +70,7 @@ export default function OtpForm() {
     } catch (err) {
       setError(
         err?.response?.data?.message ||
+          err?.message ||
           "Could not resend OTP at the moment."
       );
     } finally {
@@ -112,7 +114,9 @@ export default function OtpForm() {
         ))}
       </div>
 
-      <p className="form-note">Testing mode is enabled. Use OTP: 123456</p>
+      <p className="form-note">
+        Current backend testing OTP is: <strong>123456</strong>
+      </p>
 
       {error ? <p className="form-error">{error}</p> : null}
 
diff --git a/guardian-admin-dashboard/src/components/common/InputField.css b/guardian-admin-dashboard/src/components/common/InputField.css
new file mode 100644
index 000000000..c6c04289d
--- /dev/null
+++ b/guardian-admin-dashboard/src/components/common/InputField.css
@@ -0,0 +1,77 @@
+.field {
+  display: grid;
+  gap: 8px;
+}
+
+.field-label {
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--primary-dark);
+}
+
+.input-shell {
+  position: relative;
+  width: 100%;
+}
+
+.field-input {
+  width: 100%;
+  border: 1px solid var(--border);
+  background: var(--white);
+  border-radius: 16px;
+  padding: 15px 16px;
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.field-input:focus {
+  border-color: rgba(79, 160, 200, 0.95);
+  box-shadow: 0 0 0 4px rgba(79, 160, 200, 0.14);
+}
+
+.field-input--error {
+  border-color: #c73939;
+}
+
+.field-error {
+  font-size: 0.84rem;
+  color: #c73939;
+  font-weight: 600;
+}
+
+.password-input {
+  padding-right: 56px;
+}
+
+.password-toggle {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 10px;
+  background: rgba(79, 160, 200, 0.08);
+  color: var(--primary-dark);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
+}
+
+.password-toggle:hover {
+  background: rgba(79, 160, 200, 0.16);
+  color: var(--primary-dark);
+}
+
+.password-toggle:active {
+  transform: translateY(-50%) scale(0.96);
+}
+
+.password-toggle:focus-visible {
+  outline: 2px solid rgba(79, 160, 200, 0.45);
+  outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/components/common/InputField.jsx b/guardian-admin-dashboard/src/components/common/InputField.jsx
index d5893f0ba..e69bcd6db 100644
--- a/guardian-admin-dashboard/src/components/common/InputField.jsx
+++ b/guardian-admin-dashboard/src/components/common/InputField.jsx
@@ -1,3 +1,7 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import "./InputField.css";
+
 export default function InputField({
   label,
   type = "text",
@@ -8,19 +12,39 @@ export default function InputField({
   autoComplete,
   error,
 }) {
+  const [showPassword, setShowPassword] = useState(false);
+  const isPasswordField = type === "password";
+
   return (
     <label className="field">
       <span className="field-label">{label}</span>
-      <input
-        className={`field-input${error ? ' field-input--error' : ''}`}
-        type={type}
-        name={name}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        autoComplete={autoComplete}
-      />
-      {error && <span className="field-error">{error}</span>}
+
+      <div className="input-shell">
+        <input
+          className={`field-input${error ? " field-input--error" : ""}${
+            isPasswordField ? " password-input" : ""
+          }`}
+          type={isPasswordField ? (showPassword ? "text" : "password") : type}
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          autoComplete={autoComplete}
+        />
+
+        {isPasswordField && (
+          <button
+            type="button"
+            className="password-toggle"
+            onClick={() => setShowPassword((prev) => !prev)}
+            aria-label={showPassword ? "Hide password" : "Show password"}
+          >
+            {showPassword ? <EyeOff size={17} /> : <Eye size={17} />}
+          </button>
+        )}
+      </div>
+
+      {error ? <span className="field-error">{error}</span> : null}
     </label>
   );
 }
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/services/authService.js b/guardian-admin-dashboard/src/services/authService.js
index 52a65daeb..2b8826e73 100644
--- a/guardian-admin-dashboard/src/services/authService.js
+++ b/guardian-admin-dashboard/src/services/authService.js
@@ -1,34 +1,3 @@
-//Needs to be integrated with Backend API once the CORS issue is solved.
-
-// import api from "./api";
-
-// export async function loginAdmin({ email, password }) {
-//   const response = await api.post("/auth/login", {
-//     email,
-//     password,
-//   });
-
-//   return response.data;
-// }
-
-// export async function sendPin(email) {
-//   const response = await api.post("/auth/send-pin", {
-//     email,
-//   });
-
-//   return response.data;
-// }
-
-// export async function verifyPin({ email, otp }) {
-//   const response = await api.post("/auth/verify-pin", {
-//     email,
-//     otp,
-//   });
-
-//   return response.data;
-// }
-
-// Mock login and otp fallback
 import api from "./api";
 
 export async function loginAdmin({ email, password }) {
@@ -36,30 +5,26 @@ export async function loginAdmin({ email, password }) {
     email,
     password,
   });
-  console.log("LOGIN RESPONSE:", response.data); 
+
+  console.log("LOGIN RESPONSE:", response.data);
   return response.data;
 }
 
 export async function sendPin(email) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        message: "OTP functionality is temporarily disabled for testing.",
-      });
-    }, 500);
+  const response = await api.post("/auth/send-pin", {
+    email,
   });
+
+  console.log("SEND PIN RESPONSE:", response.data);
+  return response.data;
 }
 
 export async function verifyPin({ email, otp }) {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      if (otp === "123456") {
-        resolve({
-          message: "OTP verification bypassed for testing.",
-        });
-      } else {
-        reject(new Error("Invalid OTP"));
-      }
-    }, 700);
+  const response = await api.post("/auth/verify-pin", {
+    email,
+    otp,
   });
+
+  console.log("VERIFY PIN RESPONSE:", response.data);
+  return response.data;
 }
\ No newline at end of file
diff --git a/guardian-admin-dashboard/src/services/patientService.js b/guardian-admin-dashboard/src/services/patientService.js
index 63432e11c..317693bd9 100644
--- a/guardian-admin-dashboard/src/services/patientService.js
+++ b/guardian-admin-dashboard/src/services/patientService.js
@@ -14,7 +14,7 @@ export const getPatientOverview = async (patientId, orgId) => {
 
 export async function getPatients({ page = 1, limit = 10 } = {}) {
   const params = { page, limit };
-  const response = await api.get('/api/v1/admin/patients', { params });
+  const response = await api.get('/admin/patients', { params });
 
   console.log('GET patients response:', response.data);
 
@@ -22,7 +22,7 @@ export async function getPatients({ page = 1, limit = 10 } = {}) {
 }
 
 export async function createPatient(patientData) {
-  const response = await api.post('/api/v1/admin/patients', patientData);
+  const response = await api.post('/admin/patients', patientData);
 
   console.log('POST create patient response:', response.data);
 
@@ -30,7 +30,7 @@ export async function createPatient(patientData) {
 }
 
 export async function deactivatePatient(id) {
-  const response = await api.delete(`/api/v1/admin/patients/${id}`);
+  const response = await api.delete(`/admin/patients/${id}`);
 
   console.log('DELETE patient response:', response.data);
 
diff --git a/guardian-admin-dashboard/src/services/staffService.js b/guardian-admin-dashboard/src/services/staffService.js
index dacb7724c..c0f8d7182 100644
--- a/guardian-admin-dashboard/src/services/staffService.js
+++ b/guardian-admin-dashboard/src/services/staffService.js
@@ -12,16 +12,16 @@ export async function getStaff({
   if (orgId) params.orgId = orgId;
   if (role) params.role = role;
 
-  const response = await api.get('/api/v1/admin/staff', { params });
+  const response = await api.get('/admin/staff', { params });
   return response.data;
 }
 
 export async function createStaff(userId) {
-  const response = await api.post('/api/v1/admin/staff', { userId });
+  const response = await api.post('/admin/staff', { userId });
   return response.data;
 }
 
 export async function deactivateStaff(id) {
-  const response = await api.put(`/api/v1/admin/staff/${id}/deactivate`);
+  const response = await api.put(`/admin/staff/${id}/deactivate`);
   return response.data;
 }