diff --git a/package-lock.json b/package-lock.json
index d357a0a..b032cb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-context-menu": "^2.2.1",
-        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.3",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
@@ -65,7 +65,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -1006,7 +1005,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -1024,7 +1022,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1037,7 +1034,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -1053,7 +1049,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1068,7 +1063,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1078,7 +1072,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1088,14 +1081,12 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1106,7 +1097,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -1120,7 +1110,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -1130,7 +1119,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -1144,7 +1132,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -1222,6 +1209,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
+      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
@@ -1416,25 +1439,176 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
-      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.3.tgz",
+      "integrity": "sha512-ujGvqQNkZ0J7caQyl8XuZRj2/TIrYcOGwqz5TeD1OMcCdfBuEMP0D12ve+8J5F9XuNUth3FAKFWo/wt0E/GJrQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.0",
-        "@radix-ui/react-focus-guards": "1.1.0",
-        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.2",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-portal": "1.1.1",
-        "@radix-ui/react-presence": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1",
         "@radix-ui/react-use-controllable-state": "1.1.0",
         "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.7"
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.2.tgz",
+      "integrity": "sha512-kEHnlhv7wUggvhuJPkyw4qspXLJOdYoAP4dO2c8ngGuXTq1w/HZp1YeVB+NQ2KbH1iEG+pvOCGYSqh9HZOz6hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
+      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
+      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1451,6 +1625,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -2565,14 +2805,14 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
       "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -2583,7 +2823,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -2895,7 +3135,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2918,14 +3157,12 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -2939,7 +3176,6 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/argparse": {
@@ -3020,14 +3256,12 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3051,7 +3285,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -3107,7 +3340,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3153,7 +3385,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -3178,7 +3409,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -3250,7 +3480,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3274,7 +3503,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -3289,7 +3517,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -3475,14 +3702,12 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/dom-helpers": {
@@ -3499,7 +3724,6 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
@@ -3513,7 +3737,6 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esbuild": {
@@ -3867,7 +4090,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -3884,7 +4106,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -3911,7 +4132,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -3934,7 +4154,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -4005,7 +4224,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.0",
@@ -4075,7 +4293,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -4090,7 +4307,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4119,7 +4335,6 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -4140,7 +4355,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -4153,7 +4367,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -4163,7 +4376,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -4209,7 +4421,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -4277,7 +4488,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -4290,7 +4500,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -4306,7 +4515,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4316,7 +4524,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4326,7 +4533,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -4339,7 +4545,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -4359,14 +4564,12 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -4382,7 +4585,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -4482,7 +4684,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -4492,7 +4693,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -4559,7 +4759,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -4569,7 +4768,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -4617,7 +4815,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -4634,7 +4831,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -4646,7 +4842,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4679,7 +4874,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4708,7 +4902,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -4768,7 +4961,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
       "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/parent-module": {
@@ -4798,7 +4990,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4808,14 +4999,12 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -4832,21 +5021,18 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
       "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -4859,7 +5045,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4869,7 +5054,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -4879,7 +5063,6 @@
       "version": "8.4.45",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
       "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4908,7 +5091,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -4926,7 +5108,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -4946,7 +5127,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4982,7 +5162,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
       "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -4995,7 +5174,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5021,7 +5199,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -5035,7 +5212,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -5079,7 +5255,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5310,7 +5485,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -5320,7 +5494,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -5371,7 +5544,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -5399,7 +5571,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -5446,7 +5617,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5495,7 +5665,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -5508,7 +5677,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5518,7 +5686,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -5531,7 +5698,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"
@@ -5541,7 +5707,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -5560,7 +5725,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -5575,14 +5739,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -5595,7 +5757,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -5611,7 +5772,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -5625,7 +5785,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -5651,7 +5810,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -5687,7 +5845,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5710,7 +5867,6 @@
       "version": "3.4.11",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.11.tgz",
       "integrity": "sha512-qhEuBcLemjSJk5ajccN9xJFtM/h0AVCPaA6C92jNP+M2J8kX+eMJHI7R2HFKUvvAsMpcfLILMCFYSeDwpMmlUg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -5764,7 +5920,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -5774,7 +5929,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -5803,7 +5957,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -5829,7 +5982,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/tslib": {
@@ -5996,7 +6148,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/victory-vendor": {
@@ -6085,7 +6236,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -6111,7 +6261,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -6130,7 +6279,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -6148,7 +6296,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -6164,7 +6311,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -6177,21 +6323,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -6206,7 +6349,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -6219,7 +6361,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -6232,7 +6373,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -6255,7 +6395,6 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
       "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/package.json b/package.json
index 6286d33..cd14ea2 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-context-menu": "^2.2.1",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
diff --git a/src/components/shared/alert-modal.tsx b/src/components/shared/alert-modal.tsx
index ce2c5d7..d534c63 100644
--- a/src/components/shared/alert-modal.tsx
+++ b/src/components/shared/alert-modal.tsx
@@ -9,26 +9,14 @@ type TAlertModalProps = {
   title?: string;
   description?: string;
 };
-export const AlertModal = ({
-  isOpen,
-  onClose,
-  onConfirm,
-  loading,
-  title = "Are you sure?",
-  description = "Are you sure you want to continue?",
-}: TAlertModalProps) => {
+export const AlertModal = ({ isOpen, onClose, onConfirm, loading, title = "Are you sure?", description = "Are you sure you want to continue?" }: TAlertModalProps) => {
   return (
-    <Modal
-      title={title}
-      description={description}
-      isOpen={isOpen}
-      onClose={onClose}
-    >
-      <div className='flex w-full items-center justify-end space-x-2 pt-6'>
-        <Button disabled={loading} variant='outline' onClick={onClose}>
+    <Modal title={title} description={description} isOpen={isOpen} onClose={onClose}>
+      <div className="flex w-full items-center justify-end space-x-2 pt-6">
+        <Button disabled={loading} variant="outline" onClick={onClose}>
           Cancel
         </Button>
-        <Button disabled={loading} variant='destructive' onClick={onConfirm}>
+        <Button disabled={loading} variant="destructive" onClick={onConfirm}>
           Continue
         </Button>
       </div>
diff --git a/src/components/shared/dashboard-nav.tsx b/src/components/shared/dashboard-nav.tsx
index 932a00b..c9001c8 100644
--- a/src/components/shared/dashboard-nav.tsx
+++ b/src/components/shared/dashboard-nav.tsx
@@ -32,11 +32,17 @@ export default function DashboardNav({
     return null;
   }
 
+   const filteredItems = items.filter((item) => item.user === "Admin");
+
+   if (!filteredItems.length) {
+     return null;
+   }
+
   return (
     <div className='flex flex-col h-full'>
       <nav className='grid items-start gap-2 flex-grow'>
         <TooltipProvider>
-          {items.map((item, index) => {
+          {filteredItems.map((item, index) => {
             const Icon = Icons[item.icon || "arrowRight"];
             return (
               item.href && (
diff --git a/src/components/shared/modal-add-assessment.tsx b/src/components/shared/modal-add-assessment.tsx
new file mode 100644
index 0000000..12605c0
--- /dev/null
+++ b/src/components/shared/modal-add-assessment.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { Modal } from "@/components/ui/modal";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { ScrollArea } from "../ui/scroll-area";
+
+type TPopupModalProps = {
+  onConfirm?: () => void;
+  loading?: boolean;
+  renderModal: (onClose: () => void) => React.ReactNode;
+};
+
+export default function PopupModalAssessment({ renderModal }: TPopupModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  return (
+    <>
+      <Button className="flex-col space-y-3 bg-slate-200 hover:bg-slate-400 dark:bg-slate-800 p-3 rounded-xl min-h-64 hover:text-white text-black " onClick={() => setIsOpen(true)}>
+        <Plus className="h-12 w-12 " />
+        <div className="font-bold text-xl ">
+          <h3>Add new module</h3>
+        </div>
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose} className={"!bg-background !px-1"}>
+        <ScrollArea className="h-[80dvh] px-6  ">{renderModal(onClose)}</ScrollArea>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/shared/modal-add-employee.tsx b/src/components/shared/modal-add-employee.tsx
index 80bad07..934b464 100644
--- a/src/components/shared/modal-add-employee.tsx
+++ b/src/components/shared/modal-add-employee.tsx
@@ -15,17 +15,11 @@ export default function PopupModal({ renderModal }: TPopupModalProps) {
   const onClose = () => setIsOpen(false);
   return (
     <>
-      <Button className='text-xs md:text-sm' onClick={() => setIsOpen(true)}>
-        <Plus className='mr-2 h-4 w-4' /> Add New
+      <Button className="text-xs md:text-sm bg-[#F6517D]" onClick={() => setIsOpen(true)}>
+        <Plus className="mr-2 h-4 w-4" /> Add New
       </Button>
-      <Modal
-        isOpen={isOpen}
-        onClose={onClose}
-        className={"!bg-background !px-1"}
-      >
-        <ScrollArea className='h-[80dvh] px-6  '>
-          {renderModal(onClose)}
-        </ScrollArea>
+      <Modal isOpen={isOpen} onClose={onClose} className={"!bg-background !px-1"}>
+        <ScrollArea className="h-[80dvh] px-6  ">{renderModal(onClose)}</ScrollArea>
       </Modal>
     </>
   );
diff --git a/src/components/shared/table-search-input.tsx b/src/components/shared/table-search-input.tsx
index da6fa00..62dc12a 100644
--- a/src/components/shared/table-search-input.tsx
+++ b/src/components/shared/table-search-input.tsx
@@ -3,11 +3,7 @@ import { Input } from "../ui/input";
 import { useDebounce } from "use-debounce";
 import { useSearchParams } from "react-router-dom";
 
-export default function TableSearchInput({
-  placeholder,
-}: {
-  placeholder?: string;
-}) {
+export default function TableSearchInput({ placeholder }: { placeholder?: string }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const country = searchParams.get("search") || "";
   const [searchTerm, setSearchTerm] = React.useState(country);
@@ -15,11 +11,7 @@ export default function TableSearchInput({
   const [debouncedValue] = useDebounce(searchTerm, 1000);
   const handleSettingSearchParams = useCallback((newSearchValue: string) => {
     // Update the URL with the new search value
-    if (
-      newSearchValue === "" ||
-      newSearchValue === undefined ||
-      !newSearchValue
-    ) {
+    if (newSearchValue === "" || newSearchValue === undefined || !newSearchValue) {
       searchParams.delete("search");
       setSearchParams(searchParams);
       return;
@@ -34,12 +26,5 @@ export default function TableSearchInput({
   React.useEffect(() => {
     handleSettingSearchParams(debouncedValue);
   }, [debouncedValue, handleSettingSearchParams]);
-  return (
-    <Input
-      placeholder={placeholder || `Search country...`}
-      value={searchTerm}
-      onChange={(event) => setSearchTerm(event.target.value)}
-      className='w-full md:max-w-sm'
-    />
-  );
+  return <Input placeholder={placeholder || `Search country...`} value={searchTerm} onChange={(event) => setSearchTerm(event.target.value)} className="w-full md:max-w-sm lg:max-w-full" />;
 }
diff --git a/src/constants/data.ts b/src/constants/data.ts
index 7f8dc6b..14adc84 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -6,18 +6,42 @@ export const navItems: NavItem[] = [
     href: "/dashboard",
     icon: "Dashboard",
     label: "Dashboard",
+    user: "User",
   },
   {
     title: "Leadership",
     href: "/dashboard/leadership",
     icon: "BriefcaseBusiness",
     label: "Leadership",
+    user: "User",
   },
   {
     title: "Career Success Potential",
     href: "/dashboard/career",
     icon: "Rocket",
     label: "Career Success Potential",
+    user: "User",
+  },
+  {
+    title: "Dashboard",
+    href: "/dashboard/admin",
+    icon: "Dashboard",
+    label: "Dashboard",
+    user: "Admin",
+  },
+  {
+    title: "User",
+    href: "/dashboard/admin/user",
+    icon: "Users",
+    label: "Dashboard",
+    user: "Admin",
+  },
+  {
+    title: "Module",
+    href: "/dashboard/admin/modules", // Should have /admin/dashboard/modules
+    icon: "Users", //Change this
+    label: "Dashboard",
+    user: "Admin",
   },
 ];
 
@@ -26,8 +50,7 @@ export const assesments = [
     id: 1,
     tabs: "Welcome",
     completed: true,
-    description:
-      "This study attempts to identify the determining factors of leadership behavior...",
+    description: "This study attempts to identify the determining factors of leadership behavior...",
   },
   {
     id: 2,
@@ -73,12 +96,28 @@ export const BotNavItems: NavItem[] = [
     href: "/dashboard/profile",
     icon: "User",
     label: "Profile",
+    user: "User",
+  },
+  {
+    title: "Logout",
+    href: "/",
+    icon: "LogOut",
+    label: "Logout",
+    user: "User",
+  },
+  {
+    title: "Profile",
+    href: "/dashboard/profile",
+    icon: "User",
+    label: "Profile",
+    user: "Admin",
   },
   {
     title: "Logout",
     href: "/",
     icon: "LogOut",
     label: "Logout",
+    user: "Admin",
   },
 ];
 
@@ -94,14 +133,4 @@ export type Employee = {
   profile_picture?: string | null; // Profile picture can be a string (URL) or null (if no picture)
 };
 
-export const departments = [
-  "Engineering",
-  "Sales",
-  "Marketing",
-  "Human Resources",
-  "Finance",
-  "Legal",
-  "Operations",
-  "Customer Support",
-  "IT",
-];
+export const departments = ["Engineering", "Sales", "Marketing", "Human Resources", "Finance", "Legal", "Operations", "Customer Support", "IT"];
diff --git a/src/lib/axios.ts b/src/lib/axios.ts
new file mode 100644
index 0000000..8040fc3
--- /dev/null
+++ b/src/lib/axios.ts
@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:3000/api"; // change depending on backend server
+
+const instance = axios.create({
+  baseURL: BASE_URL,
+});
+
+export default instance;
diff --git a/src/pages/admin/components/create-module-form.tsx b/src/pages/admin/components/create-module-form.tsx
new file mode 100644
index 0000000..12b09ac
--- /dev/null
+++ b/src/pages/admin/components/create-module-form.tsx
@@ -0,0 +1,180 @@
+import Heading from "@/components/shared/heading";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import axios from "@/lib/axios";
+import { useNavigate } from "react-router-dom";
+import { Plus } from "lucide-react";
+
+const moduleFormSchema = z.object({
+  name: z.string({ required_error: "Module name is required" }).min(1, { message: "firstname is should be at least 1 character" }),
+  description: z.string().min(1, { message: "Description is required" }),
+  duration: z.string().min(1, { message: "Duration is required" }),
+  price: z.string().min(1, { message: "Enter a valid price" }),
+  image: z
+    .instanceof(File)
+    .refine((file) => file.type.startsWith("image/"), {
+      message: "Only image files are allowed",
+    })
+    .optional(),
+});
+
+type ModuleFormSchemaType = z.infer<typeof moduleFormSchema>;
+
+const ModuleCreateForm = ({ modalClose }: { modalClose: () => void }) => {
+  const form = useForm<ModuleFormSchemaType>({
+    resolver: zodResolver(moduleFormSchema),
+    defaultValues: {
+      name: "",
+      price: "",
+      description: "",
+      duration: "",
+      image: undefined,
+    },
+  });
+  const navigate = useNavigate();
+
+  const onSubmit = (values: ModuleFormSchemaType) => {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+
+    const formData = new FormData();
+
+    formData.append("name", values.name);
+    formData.append("price", values.price.toString());
+    formData.append("description", values.description);
+    formData.append("duration", values.duration.toString());
+
+    if (values.image) formData.append("image", values.image);
+
+    axios("/admin/assessments", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+        "Content-Type": "multipart/form-data",
+      },
+      data: formData,
+    })
+      .then((res) => res)
+      .catch((err) => console.log(err));
+    console.log(formData);
+    navigate("");
+  };
+
+  return (
+    <div className="px-2">
+      <div className="flex items-center justify-center text-2xl font-bold">
+        <img className="w-12 h-12 mr-2" src="https://locallead.id/favicon.svg" alt="Logo" />
+      </div>
+
+      <Heading title={"Add New Module"} description={""} className="space-y-2 py-4 text-center" />
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4" autoComplete="off">
+          <FormField
+            control={form.control}
+            name="image"
+            render={({ field: { onChange, value, ...field } }) => (
+              <FormItem>
+                <FormControl>
+                  <div className="flex flex-col items-center justify-center gap-2 w-full">
+                    <label htmlFor="image" className="cursor-pointer flex flex-col items-center justify-center w-1/2 bg-gray-200 text-gray-800 p-8 rounded-xl hover:bg-gray-400 hover:text-white transition">
+                      <Plus className="h-10 w-10 mb-2 text-center" />
+                      <h3 className="text-center text-sm font-medium">Add Cover</h3>
+                    </label>
+                    <input
+                      id="image"
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      {...field}
+                      onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        onChange(file);
+                      }}
+                    />
+                    {value && (
+                      <div className="mt-2">
+                        <p className="text-sm text-gray-600">Selected file: {value.name}</p>
+                      </div>
+                    )}
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder="Enter module name" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4">
+            <FormField
+              control={form.control}
+              name="price"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder="Enter module price" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4">
+            <FormField
+              control={form.control}
+              name="duration"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder="Enter module duration in minutes" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder="Enter module description" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex items-end justify-between gap-4">
+            <Button type="button" variant="secondary" className="rounded-full border-[##F6517D] border-2" size="lg" onClick={modalClose}>
+              Cancel
+            </Button>
+            <Button type="submit" className="rounded-full bg-[#F6517D]" size="lg">
+              Create Module
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default ModuleCreateForm;
diff --git a/src/pages/admin/dashboard/index.tsx b/src/pages/admin/dashboard/index.tsx
new file mode 100644
index 0000000..2a55be9
--- /dev/null
+++ b/src/pages/admin/dashboard/index.tsx
@@ -0,0 +1,173 @@
+import UserNav from "@/components/shared/user-nav";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Overview from "@/pages/dashboard/components/overview";
+import { Search } from "lucide-react";
+
+
+export default function AdminDashboardPage() {
+  return (
+    <>
+      <div className='hidden flex-col md:flex overflow-y-auto h-full'>
+        <div className='border-b'>
+          <div className='flex h-16 items-center px-4'>
+            {/* <TeamSwitcher />
+            <MainNav className='mx-6' /> */}
+            <div className='ml-auto flex items-center space-x-4'>
+
+            </div>
+          </div>
+        </div>
+        <div className='flex-1 space-y-4 p-8 pt-6'>
+          <div className='flex items-center justify-between space-y-2'>
+            <h2 className='text-3xl font-bold tracking-tight'>Dashboard</h2>
+            <div className='flex items-center space-x-2'>
+              {/* <CalendarDateRangePicker />
+              <Button>Download</Button> */}
+            </div>
+          </div>
+          <Tabs defaultValue='overview' className='space-y-4'>
+            {/* <TabsList>
+              <TabsTrigger value='overview'>Overview</TabsTrigger>
+              <TabsTrigger value='analytics' disabled>
+                Analytics
+              </TabsTrigger>
+              <TabsTrigger value='reports' disabled>
+                Reports
+              </TabsTrigger>
+              <TabsTrigger value='notifications' disabled>
+                Notifications
+              </TabsTrigger>
+            </TabsList> */}
+            <TabsContent value='overview' className='space-y-4'>
+              <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>
+                      Total Revenue
+                    </CardTitle>
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth='2'
+                      className='h-4 w-4 text-muted-foreground'
+                    >
+                      <path d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6' />
+                    </svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className='text-2xl font-bold'>$45,231.89</div>
+                    <p className='text-xs text-muted-foreground'>
+                      +20.1% from last month
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>
+                      Subscriptions
+                    </CardTitle>
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth='2'
+                      className='h-4 w-4 text-muted-foreground'
+                    >
+                      <path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' />
+                      <circle cx='9' cy='7' r='4' />
+                      <path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75' />
+                    </svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className='text-2xl font-bold'>+2350</div>
+                    <p className='text-xs text-muted-foreground'>
+                      +180.1% from last month
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>Sales</CardTitle>
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth='2'
+                      className='h-4 w-4 text-muted-foreground'
+                    >
+                      <rect width='20' height='14' x='2' y='5' rx='2' />
+                      <path d='M2 10h20' />
+                    </svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className='text-2xl font-bold'>+12,234</div>
+                    <p className='text-xs text-muted-foreground'>
+                      +19% from last month
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>
+                      Active Now
+                    </CardTitle>
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth='2'
+                      className='h-4 w-4 text-muted-foreground'
+                    >
+                      <path d='M22 12h-4l-3 9L9 3l-3 9H2' />
+                    </svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className='text-2xl font-bold'>+573</div>
+                    <p className='text-xs text-muted-foreground'>
+                      +201 since last hour
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+              <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-7'>
+                <Card className='col-span-4'>
+                  <CardHeader>
+                    <CardTitle>Overview</CardTitle>
+                  </CardHeader>
+                  <CardContent className='pl-2'>
+                    <Overview />
+                  </CardContent>
+                </Card>
+                <Card className='col-span-3'>
+                  <CardHeader>
+                    <CardTitle>Recent Sales</CardTitle>
+                    <CardDescription>
+                      You made 265 sales this month.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    {/* <RecentSales /> */}
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/admin/dashboard/modules.tsx b/src/pages/admin/dashboard/modules.tsx
new file mode 100644
index 0000000..14f15ed
--- /dev/null
+++ b/src/pages/admin/dashboard/modules.tsx
@@ -0,0 +1,80 @@
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
+import AssessmentCard from "@/pages/dashboard/components/assesment";
+import { Link } from "react-router-dom";
+import PageHead from "@/components/shared/page-head";
+import { Breadcrumbs } from "@/components/shared/breadcrumbs";
+import TableSearchInput from "@/components/shared/table-search-input";
+import ModuleCreateForm from "../components/create-module-form";
+import PopupModalAssessment from "@/components/shared/modal-add-assessment";
+
+export default function AdminModulePage() {
+  const [assessmentsData, setAssessmentsData] = useState<
+    {
+      id: number;
+      name: string;
+      description: string;
+      imageUrl: string;
+      duration: number;
+      userId: number;
+      price: number;
+      isActive: true;
+      createdAt: string;
+      updatedAt: string;
+    }[]
+  >([]);
+
+  useEffect(() => {
+    axios("/admin/assessments", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((res) => setAssessmentsData(res.data.data))
+      .catch((err) => console.error(err));
+  }, []);
+
+  {
+    console.log(assessmentsData);
+  }
+  return (
+    <>
+      <div className="overflow-auto h-full w-full">
+        <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+          <PageHead title="Module Management" />
+          <Breadcrumbs
+            items={[
+              { title: "Dashboard", link: "/dashboard/admin" },
+              { title: "Modules", link: "/dashboard/admin/modules" },
+            ]}
+          />
+          <div className="flex w-full gap-4 pb-4">
+            <TableSearchInput placeholder="Search module here" />
+          </div>
+          <div className="relative">
+            <ScrollArea>
+              <div className="flex gap-4">
+                {assessmentsData.map((assessment) => (
+                  <Link key={assessment.id} to={`/dashboard/admin/modules/${assessment.id}`}>
+                    <AssessmentCard assessment={assessment} className="w-[250px] min-h-64" aspectRatio="square" width={200} height={300} />
+                  </Link>
+                ))}
+
+                <div
+                  className="
+              "
+                >
+                  <PopupModalAssessment renderModal={(onclose) => <ModuleCreateForm modalClose={onclose} />}></PopupModalAssessment>
+                </div>
+              </div>
+              {/* Dialog here */}
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/admin/dashboard/update-module.tsx b/src/pages/admin/dashboard/update-module.tsx
new file mode 100644
index 0000000..1072528
--- /dev/null
+++ b/src/pages/admin/dashboard/update-module.tsx
@@ -0,0 +1,369 @@
+import { Breadcrumbs } from "@/components/shared/breadcrumbs";
+import PageHead from "@/components/shared/page-head";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import axios from "@/lib/axios";
+import { useRouter } from "@/routes/hooks";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableRow } from "@/components/ui/table";
+import { Edit, Plus, Save } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export default function AdminUpdateAssessmentPage() {
+  const { moduleId } = useParams();
+  const [moduleData, setModuleData] = useState<{
+    id: number;
+    name: string;
+    description: string;
+    imageUrl: string;
+    duration: number;
+    userId: string;
+    price: string;
+    isActive: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+    questions: {
+      id: number;
+      order: number;
+      assessmentId: number;
+      text: string;
+      type: "SCALE" | "MULTIPLE_CHOICE" | "TRUE_FALSE";
+      options: [];
+      createdAt: Date;
+      updatedAt: Date;
+    }[];
+  }>();
+  const [questions, setQuestions] = useState<
+    {
+      id: number;
+      order: number;
+      assessmentId: number;
+      text: string;
+      type: "SCALE" | "MULTIPLE_CHOICE" | "TRUE_FALSE";
+      options: number[];
+      createdAt: Date;
+      updatedAt: Date;
+    }[]
+  >([]);
+  const [newQuestions, setNewQuestions] = useState<any[]>([]);
+  const [editingQuestionId, setEditingQuestionId] = useState<number | null>(null);
+  const [name, setName] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+  const [duration, setDuration] = useState<number>(0);
+  const [price, setPrice] = useState<number>(0);
+
+  // ** Editing questions **
+  const startEditingQuestion = (question: (typeof questions)[0]) => {
+    setEditingQuestionId(question.id);
+  };
+
+  const saveEditedQuestion = (editedQuestion: (typeof questions)[0]) => {
+    setQuestions(questions.map((q) => (q.id === editedQuestion.id ? editedQuestion : q)));
+    setEditingQuestionId(null);
+  };
+
+  const router = useRouter();
+
+  useEffect(() => {
+    axios(`/assessments/${moduleId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((res) => {
+        setModuleData(res.data.data);
+        setQuestions(res.data.data.questions);
+        setName(res.data.data.name);
+        setDescription(res.data.data.description);
+        setDuration(res.data.data.duration);
+        setPrice(res.data.data.price);
+      })
+      .catch((err) => console.log(err));
+  }, [moduleId]);
+
+  const addNewQuestionRow = () => {
+    setNewQuestions([
+      ...newQuestions,
+      {
+        order: questions.length + newQuestions.length + 1,
+        text: "",
+        options: "",
+        isEditing: true,
+      },
+    ]);
+  };
+
+  const handleNewQuestionChange = (index: number, field: string, value: string) => {
+    const updatedNewQuestions = [...newQuestions];
+    updatedNewQuestions[index] = {
+      ...updatedNewQuestions[index],
+      [field]: value,
+    };
+    setNewQuestions(updatedNewQuestions);
+  };
+
+  const parseScaleOptions = (scaleInput: string): number[] => {
+    // Remove any whitespace and convert to number
+    const scale = parseInt(scaleInput.trim());
+
+    // Validate the scale input
+    if (isNaN(scale) || scale < 1) {
+      return []; // Return empty array for invalid input
+    }
+
+    // Create an array from 1 to the specified scale
+    return Array.from({ length: scale }, (_, i) => i + 1);
+  };
+
+  const saveNewQuestion = (index: number) => {
+    const newQuestion = newQuestions[index];
+
+    // Parse scale options if the question type is SCALE
+    const parsedOptions = newQuestion.type === "SCALE" ? parseScaleOptions(newQuestion.options) : newQuestion.options;
+
+    setQuestions([
+      ...questions,
+      {
+        ...newQuestion,
+        options: parsedOptions,
+        isEditing: false,
+      },
+    ]);
+    const updatedNewQuestions = newQuestions.filter((_, i) => i !== index);
+    setNewQuestions(updatedNewQuestions);
+  };
+
+  const handleUpdate = () => {
+    const updatedQuestions = [
+      ...questions.map((q) => ({
+        id: q.id, // Preserve existing question ID for updates
+        order: q.order,
+        text: q.text,
+        type: q.type,
+        options: q.options,
+      })),
+      ...newQuestions.map((nq) => ({
+        order: nq.order,
+        text: nq.text,
+        type: nq.type || "SCALE", // Default type if not specified
+        options: nq.type === "SCALE" ? parseScaleOptions(nq.options) : nq.options,
+      })),
+    ];
+
+    const formData = new FormData();
+
+    // Append text fields
+    formData.append("name", name);
+    formData.append("description", description);
+    formData.append("duration", duration.toString());
+    formData.append("price", price.toString());
+
+    // If you want to handle image upload (optional)
+    const imageInput = document.getElementById("image-upload") as HTMLInputElement;
+    if (imageInput && imageInput.files && imageInput.files[0]) {
+      formData.append("image", imageInput.files[0]);
+    }
+
+    Promise.all([
+      axios(`/admin/assessments/${moduleId}`, {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+        },
+        data: {
+          questions: updatedQuestions,
+        },
+      }),
+      axios(`/admin/assessments/${moduleId}`, {
+        method: "PATCH",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+          "Content-Type": "multipart/form-data",
+        },
+        data: formData,
+      }),
+    ]);
+
+    router.push("/dashboard/admin/modules");
+  };
+
+  if (!moduleData) return <div>Loading...</div>;
+  return (
+    <>
+      <ScrollArea className="h-screen w-full">
+        <div className="p-4 md:p-8">
+          <PageHead title="Employee Management" />
+          <Breadcrumbs
+            items={[
+              { title: "Dashboard", link: "/dashboard/admin" },
+              { title: "Modules", link: "/dashboard/admin/modules" },
+              { title: `${moduleData.name}`, link: `/dashboard/admin/modules/${moduleId}` },
+            ]}
+          />
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleUpdate();
+            }}
+          >
+            <div className="mt-4 rounded-md border border-input bg-background p-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-6xl items-center mx-8">
+                <div className="relative cursor-pointer group">
+                  <img src={moduleData.imageUrl} className="w-full h-auto object-cover max-w-xs" width={400} height={300} alt={name} />
+                  <Input id="image-upload" type="file" accept="image/*" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+                </div>
+                <div className="space-y-4">
+                  <div>
+                    <Label htmlFor="name">Module Name</Label>
+                    <Input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} className="mt-2" />
+                  </div>
+                  <div>
+                    <Label htmlFor="total_questions">Total Questions</Label>
+                    <Input id="total_questions" type="number" value={questions.length} readOnly className="mt-2" />
+                  </div>
+                  <div>
+                    <Label htmlFor="price">Price</Label>
+                    <Input id="price" type="number" value={price} onChange={(e) => setPrice(Number(e.target.value))} className="mt-2" />
+                  </div>
+                  <div>
+                    <Label htmlFor="duration">Time Limit (in minutes)</Label>
+                    <Input id="duration" type="number" value={duration} onChange={(e) => setDuration(Number(e.target.value))} className="mt-2" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="mt-4 rounded-md py-4">
+              <Label htmlFor="description">Description</Label>
+              <Input id="description" type="textarea" name="description" value={description} onChange={(e) => setDescription(e.target.value)} className="mt-2 bg-gray-100" />
+            </div>
+            <div className="mt-4 py-4">
+              <Label>Questions</Label>
+              <Table>
+                <TableHeader>
+                  <TableRow className="border-2">
+                    <TableCell>No.</TableCell>
+                    <TableCell>Questions</TableCell>
+                    <TableCell>Scale</TableCell>
+                    <TableCell>Action</TableCell>
+                  </TableRow>
+                </TableHeader>
+                <TableBody className="border-[1px]">
+                  {questions.map((question) => (
+                    <TableRow key={question.id} className="">
+                      {editingQuestionId === question.id ? (
+                        // ** Editing mode **
+                        <>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              value={question.order}
+                              onChange={(e) => {
+                                const updatedQuestion = {
+                                  ...question,
+                                  order: parseInt(e.target.value),
+                                };
+                                saveEditedQuestion(updatedQuestion);
+                              }}
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="text"
+                              value={question.text}
+                              onChange={(e) => {
+                                const updatedQuestion = {
+                                  ...question,
+                                  text: e.target.value,
+                                };
+                                saveEditedQuestion(updatedQuestion);
+                              }}
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="text"
+                              value={question.options.length > 0 ? `${question.options[question.options.length - 1]}` : ""}
+                              onChange={(e) => {
+                                const updatedQuestion = {
+                                  ...question,
+                                  options: parseScaleOptions(e.target.value),
+                                };
+                                saveEditedQuestion(updatedQuestion);
+                              }}
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                setEditingQuestionId(null);
+                              }}
+                            >
+                              <Save className="h-4 w-4" />
+                            </Button>
+                          </TableCell>
+                        </>
+                      ) : (
+                        // ** View mode **
+                        <>
+                          <TableCell>{question.order}</TableCell>
+                          <TableCell>{question.text}</TableCell>
+                          <TableCell>{question.options.length > 0 ? `1 - ${question.options[question.options.length - 1]}` : "N/A"}</TableCell>
+                          <TableCell>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                startEditingQuestion(question);
+                              }}
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                          </TableCell>
+                        </>
+                      )}
+                    </TableRow>
+                  ))}
+
+                  {newQuestions.map((question, index) => (
+                    <TableRow key={`new-${index}`} className="border-[1px]">
+                      <TableCell>
+                        <Input type="number" value={question.order} onChange={(e) => handleNewQuestionChange(index, "order", e.target.value)} />
+                      </TableCell>
+                      <TableCell>
+                        <Input type="text" value={question.text} onChange={(e) => handleNewQuestionChange(index, "text", e.target.value)} />
+                      </TableCell>
+                      <TableCell>
+                        <Input type="text" value={question.options} onChange={(e) => handleNewQuestionChange(index, "options", e.target.value)} placeholder="Enter scale (e.g., 5)" />
+                      </TableCell>
+                      <TableCell>
+                        <Button variant="ghost" size="icon" onClick={() => saveNewQuestion(index)}>
+                          <Save className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              <div className="mt-8 flex items-center justify-center border-2 p-4">
+                <Button type="button" variant="outline" onClick={addNewQuestionRow}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add Question
+                </Button>
+              </div>
+            </div>
+            <div className="flex justify-center items-center mt-4">
+              <Button type="submit">Update</Button>
+            </div>
+          </form>
+        </div>
+      </ScrollArea>
+    </>
+  );
+}
diff --git a/src/pages/admin/dashboard/update-user.tsx b/src/pages/admin/dashboard/update-user.tsx
new file mode 100644
index 0000000..3b25d86
--- /dev/null
+++ b/src/pages/admin/dashboard/update-user.tsx
@@ -0,0 +1,21 @@
+import { Breadcrumbs } from "@/components/shared/breadcrumbs";
+import PageHead from "@/components/shared/page-head";
+import { useSearchParams } from "react-router-dom";
+
+export default function AdminUpdateUserPage() {
+  
+  return (
+    <>
+      <div className="p-4 md:p-8">
+        <PageHead title="Employee Management" />
+        <Breadcrumbs
+          items={[
+            { title: "Dashboard", link: "/dashboard/admin" },
+            { title: "Module", link: "/dashboard/admin/employee" },
+            { title: `${""}`, link: "/dashboard/admin/assessments" },
+          ]}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/assessment/index.tsx b/src/pages/assessment/index.tsx
index bf309af..fed3740 100644
--- a/src/pages/assessment/index.tsx
+++ b/src/pages/assessment/index.tsx
@@ -4,20 +4,35 @@ import PageHead from "@/components/shared/page-head";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useRouter } from "@/routes/hooks";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
 
 import { assesments } from "@/constants/data";
+import { useParams } from "react-router-dom";
 
 const AssessmentPage = () => {
-  const [activeTab, setActiveTab] = useState(assesments[0].tabs); // State untuk melacak tab yang aktif
-  const [assessmentState, setAssessmentState] = useState(assesments);
+  // const [activeTab, setActiveTab] = useState(assesments[0].tabs); // State untuk melacak tab yang aktif
+  // const [assessmentState, setAssessmentState] = useState(assesments);
+  const [activeTab, setActiveTab] = useState(() => {
+    // Retrieve the last active tab from local storage
+    const savedActiveTab = localStorage.getItem("activeAssessmentTab");
+    return savedActiveTab ? Number(savedActiveTab) : assesments[0].id;
+  }); // State untuk melacak tab yang aktif
+  const [assessmentState, setAssessmentState] = useState(() => {
+    // Try to retrieve saved assessment state from local storage
+    const savedState = localStorage.getItem("assessmentState");
+    return savedState ? JSON.parse(savedState) : assesments;
+  });
+
+  const [assessmentData, setAssessmentData] = useState([]);
+  const { assessmentId } = useParams();
 
   const router = useRouter();
   const [loading] = useState(false);
   const [open, setOpen] = useState(false);
 
-  const onConfirm = async (id:Number) => {
-    router.push(`/dashboard/:assessment/test/${id}`);
+  const onConfirm = async (id: Number) => {
+    router.push(`/dashboard/${assessmentId}/test/${id}`);
   };
 
   const onSubmit = (id: number, type: string) => {
@@ -26,7 +41,7 @@ const AssessmentPage = () => {
     const prevIndex = assessmentState.findIndex((item) => item.id === id) - 1;
 
     if (type === "back" && prevIndex >= 0) {
-      setActiveTab(assessmentState[prevIndex].tabs); // Pindah ke tab sebelum
+      setActiveTab(assessmentState[prevIndex].id); // Pindah ke tab sebelum
     }
 
     if (type === "next" && nextIndex < assessmentState.length) {
@@ -38,56 +53,92 @@ const AssessmentPage = () => {
       });
 
       setAssessmentState(updatedAssessments);
-      setActiveTab(updatedAssessments[nextIndex].tabs); // Pindah ke tab berikutnya
+      // setActiveTab(updatedAssessments[nextIndex].tabs); // Pindah ke tab berikutnya
+      setActiveTab(updatedAssessments[nextIndex].id); // Pindah ke tab berikutnya
     }
 
     if (nextIndex === assessmentState.length) {
       router.push("/dashboard");
+      localStorage.removeItem("activeAssessmentTab");
+      localStorage.removeItem("assessmentState");
     }
   };
 
+  useEffect(() => {
+    localStorage.setItem("activeAssessmentTab", activeTab.toString());
+  }, [activeTab]);
+
+  // Update local storage whenever assessment state changes
+  useEffect(() => {
+    localStorage.setItem("assessmentState", JSON.stringify(assessmentState));
+  }, [assessmentState]);
+
+  // Populate data from server
+  useEffect(() => {
+    axios(`/assessments/${assessmentId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((res) => setAssessmentData(res.data.data))
+      .catch((err) => console.error(err));
+  }, []);
+
   return (
     <>
-      <div className='p-4 md:p-8'>
-        <PageHead title='Assessment LBDQ' />
+      <div className="p-4 md:p-8">
+        <PageHead title="Assessment LBDQ" />
         <Breadcrumbs
           items={[
             { title: "Dashboard", link: "/dashboard" },
             { title: "LBDQ", link: "/lbdq" },
           ]}
         />
-        <div className='flex-1 space-y-4 pt-6'>
-          <Tabs
-            value={activeTab}
-            onValueChange={setActiveTab}
-            className='space-y-4'
-          >
+        <div className="flex-1 space-y-4 pt-6">
+          <Tabs value={activeTab.toString()} onValueChange={(val) => setActiveTab(Number(val))} className="space-y-4">
             <TabsList className="bg-slate-200 dark:bg-slate-800">
               {assessmentState.map((assessment) => (
-                <TabsTrigger
-                  key={assessment.id}
-                  value={assessment.tabs}
-                  disabled={!assessment.completed}
-                >
+                <TabsTrigger key={assessment.id} value={assessment.id.toString()} disabled={!assessment.completed}>
                   {assessment.tabs}
                 </TabsTrigger>
               ))}
             </TabsList>
             {assessmentState.map((assessment) => (
-              <TabsContent
-                key={assessment.id}
-                value={assessment.tabs}
-                className='space-y-4'
-              >
-                <div className='flex flex-col p-12'>
+              <TabsContent key={assessment.id} value={assessment.id.toString()} className="space-y-4">
+                <div className="flex flex-col p-12">
                   <h2>{assessment.tabs}</h2>
-                  <p className='pt-4'>{assessment.description}</p>
-                  <div className='flex justify-between items-center'>
-                    {assessment.id !== 1 ? (
-                      <Button
-                        onClick={() => onSubmit(assessment.id, "back")}
-                        className='font-bold'
-                      >
+                  <p className="pt-4">
+                    {activeTab === 1
+                      ? `Welcome to assessment ${assessment.description}`
+                      : activeTab === 2
+                      ? `Informasi Umum\n
+
+Kuesioner ini terdiri dari 100 pertanyaan yang dibagi menjadi 4 bagian
+Setiap bagian berisi 25 pertanyaan
+Bacalah setiap pertanyaan dengan teliti sebelum menjawab\n\n
+
+Pilihan Jawaban\n
+Gunakan skala berikut untuk menjawab setiap pertanyaan:
+
+STS (Sangat Tidak Setuju): 1
+TS (Tidak Setuju): 2
+RR (Ragu-Ragu): 3
+S (Setuju): 4\n
+SS (Sangat Setuju): 5\n\n
+
+Cara Pengisian\n
+Jawab setiap pertanyaan dengan jujur dan sesuai dengan keadaan/perasaan Anda
+Pilih satu jawaban yang paling sesuai untuk setiap pertanyaan
+Pastikan tidak ada pertanyaan yang terlewatkan
+Jika Anda merasa ragu, pilih pilihan yang paling mendekati perasaan atau pengalaman Anda`
+                      : activeTab === 7
+                      ? "You have completed the assignemtn"
+                      : `you are going to fill section ${assessment.tabs}`}
+                  </p>
+                  <div className="flex justify-between items-center">
+                    {assessment.id !== 1 && assessment.id !== assesments.length ? (
+                      <Button onClick={() => onSubmit(assessment.id, "back")} className="font-bold">
                         Back
                       </Button>
                     ) : (
@@ -95,20 +146,13 @@ const AssessmentPage = () => {
                     )}
                     <Button
                       onClick={() => {
-                        assessment.id > 2 && assessment.id !== assesments.length
-                          ? setOpen(true)
-                          : onSubmit(assessment.id, "next");
+                        assessment.id > 2 && assessment.id !== assesments.length ? setOpen(true) : onSubmit(assessment.id, "next");
                       }}
-                      className='bg-rose-500 font-bold'
+                      className="bg-rose-500 font-bold"
                     >
                       Continue
                     </Button>
-                    <AlertModal
-                      isOpen={open}
-                      onClose={() => setOpen(false)}
-                      onConfirm={() => onConfirm(assessment.id-2)}
-                      loading={loading}
-                    />
+                    <AlertModal isOpen={open} onClose={() => setOpen(false)} onConfirm={() => onConfirm(assessment.id - 2)} loading={loading} />
                   </div>
                 </div>
               </TabsContent>
diff --git a/src/pages/auth/signin/components/user-auth-form.tsx b/src/pages/auth/signin/components/user-auth-form.tsx
index d21823f..a24373b 100644
--- a/src/pages/auth/signin/components/user-auth-form.tsx
+++ b/src/pages/auth/signin/components/user-auth-form.tsx
@@ -1,12 +1,5 @@
 import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { useRouter } from "@/routes/hooks";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -14,12 +7,12 @@ import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
+import axios from "@/lib/axios";
 
 const formSchema = z.object({
-  id: z.string().min(3, { message: "Id must be at least 3 characters" }),
-  password: z
-    .string()
-    .min(6, { message: "Password must be at least 6 characters" }),
+  // Changed Validation for email validation
+  email: z.string().email({ message: "Please enter a valid email" }).min(3, { message: "Email must be at least 3 characters" }),
+  password: z.string().min(6, { message: "Password must be at least 6 characters" }),
 });
 
 type UserFormValue = z.infer<typeof formSchema>;
@@ -28,11 +21,11 @@ export default function UserAuthForm() {
   const [showPassword, setShowPassword] = useState(false);
 
   const router = useRouter();
-  const [loading] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const defaultValues = {
-    id: "jeje",
-    password: "123456",
+    email: "",
+    password: "",
   };
 
   const form = useForm<UserFormValue>({
@@ -41,30 +34,32 @@ export default function UserAuthForm() {
   });
 
   const onSubmit = async (data: UserFormValue) => {
-    console.log("data", data);
-    router.push("/dashboard");
+    try {
+      setLoading(true);
+      console.log("data", data);
+      const response = await axios({ url: "/auth/login", method: "POST", data: { email: data.email, password: data.password } });
+      localStorage.setItem("access_token", response.data.access_token);
+      router.push("/dashboard/admin");
+    } catch (err) {
+      // Add error handling
+      console.log(err.response);
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <>
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className='w-full space-y-2'
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-2">
           <FormField
             control={form.control}
-            name='id'
+            name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Id</FormLabel>
+                <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input
-                    type='text'
-                    placeholder='Enter your id...'
-                    disabled={loading}
-                    {...field}
-                  />
+                  <Input type="email" placeholder="Enter your email..." disabled={loading} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -73,22 +68,14 @@ export default function UserAuthForm() {
 
           <FormField
             control={form.control}
-            name='password'
+            name="password"
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Password</FormLabel>
                 <FormControl>
-                  <div className='relative'>
-                    <Input
-                      type={showPassword ? "text" : "password"}
-                      placeholder='••••••••'
-                      {...field}
-                    />
-                    <button
-                      type='button'
-                      onClick={() => setShowPassword(!showPassword)}
-                      className='absolute right-2 top-2 text-sm'
-                    >
+                  <div className="relative">
+                    <Input type={showPassword ? "text" : "password"} placeholder="••••••••" {...field} />
+                    <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-2 top-2 text-sm">
                       {showPassword ? <EyeOff /> : <Eye />}
                     </button>
                   </div>
@@ -98,7 +85,7 @@ export default function UserAuthForm() {
             )}
           />
 
-          <Button disabled={loading} className='ml-auto w-full' type='submit'>
+          <Button disabled={loading} className="ml-auto w-full" type="submit">
             Login
           </Button>
         </form>
diff --git a/src/pages/auth/signin/index.tsx b/src/pages/auth/signin/index.tsx
index 65c07d9..c3c1e69 100644
--- a/src/pages/auth/signin/index.tsx
+++ b/src/pages/auth/signin/index.tsx
@@ -53,7 +53,7 @@ export default function SignInPage() {
           <div className='flex flex-col space-y-2 text-center'>
             <h1 className='text-2xl font-semibold tracking-tight'>Login</h1>
             <p className='text-sm text-muted-foreground'>
-              Enter your ID and Password below to log in to your account
+              Enter your Email and Password below to log in to your account
             </p>
           </div>
           <UserAuthForm />
diff --git a/src/pages/dashboard/components/assesment.tsx b/src/pages/dashboard/components/assesment.tsx
index 50338f0..1a860ab 100644
--- a/src/pages/dashboard/components/assesment.tsx
+++ b/src/pages/dashboard/components/assesment.tsx
@@ -3,11 +3,16 @@ import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
 
 export interface EmployeeAssessment {
-  title: string;
+  id: number;
+  name: string;
   description: string;
-  image: string;
-  url: string;
-  progress: number;
+  imageUrl: string;
+  duration: number;
+  userId: number;
+  price: number;
+  isActive: true;
+  createdAt: string;
+  updatedAt: string;
 }
 
 interface AssessmentCardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,46 +23,25 @@ interface AssessmentCardProps extends React.HTMLAttributes<HTMLDivElement> {
   progressAssessment?: number;
 }
 
-const AssessmentCard = ({
-  assessment,
-  aspectRatio = "portrait",
-  width,
-  height,
-  progressAssessment,
-  className,
-  ...props
-}: AssessmentCardProps) => {
+const AssessmentCard = ({ assessment, aspectRatio = "portrait", width, height, progressAssessment, className, ...props }: AssessmentCardProps) => {
   const [progress, setProgress] = useState(0);
 
   useEffect(() => {
-    const timer = setTimeout(
-      () => setProgress(Number(progressAssessment)),
-      500
-    );
+    const timer = setTimeout(() => setProgress(Number(progressAssessment)), 500);
     return () => clearTimeout(timer);
   }, []);
 
   return (
-    <div className={cn("space-y-3 bg-slate-200 dark:bg-slate-800 p-3 rounded-xl", className)} {...props}>
-      <div className='overflow-hidden rounded-md'>
-        <img
-          src={assessment.image}
-          alt={assessment.title}
-          width={width}
-          height={height}
-          className={cn(
-            "h-auto w-auto object-fill transition-all hover:scale-105",
-            aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-[4/2.5]"
-          )}
-        />
+    <div className={cn("bg-slate-200 hover:bg-slate-400 dark:bg-slate-800 p-3 rounded-xl hover:text-white text-black", className)} {...props}>
+      <div className="overflow-hidden rounded-md">
+        <img src={assessment.imageUrl} alt={assessment.name} width={width} height={height} className={cn("h-auto w-auto object-fill transition-all hover:scale-105", aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-[4/2.5]")} />
+        {/* <img src={assessment.imageUrl} alt={assessment.name} width={width} height={height} className={cn("h-auto w-auto object-fill transition-all hover:scale-105", aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-[4/2.5]")} /> */}
       </div>
- 
-      <div className='space-y-3 text-sm pb-4'>
-        <Progress value={progress} className='w-full h-1' />
-        <h3 className='font-bold leading-none mt-3'>{assessment.title}</h3>
-        <p className='text-xs font-medium text-muted-foreground'>
-          {assessment.description}
-        </p>
+
+      <div className="space-y-3 text-sm pb-4">
+        <Progress value={progress} className="w-full h-1" />
+        <h3 className="font-bold leading-none mt-3">{assessment.name}</h3>
+        <p className="text-xs font-medium text-muted-foreground truncate">{assessment.description}</p>
       </div>
     </div>
   );
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 62d9e60..0d6e261 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -5,128 +5,132 @@ import AssessmentCard, { EmployeeAssessment } from "./components/assesment";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Check, ListCheck, Timer } from "lucide-react";
 import { useRouter } from "@/routes/hooks";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
 
-export const employeeAssessments: EmployeeAssessment[] = [
-  {
-    title: "The Leadership Behavior Description Questionnaire (LBDQ)",
-    description: "technical skills",
-    image:
-      "https://i.pinimg.com/736x/10/b6/03/10b6036d9dc7ebe236aed2d5e65b1e2a.jpg",
-    url: "LBDQ",
-    progress: 2,
-  },
-  {
-    title: "The Leadership Behavior Description Questionnaire (LBDQ)",
-    description: "technical skills",
-    image:
-      "https://i.pinimg.com/736x/43/a8/f3/43a8f35f1c56b7c9d63c0a8f8d0c14b0.jpg",
-    url: "LBDQ",
-    progress: 2,
-  },
-];
+// export const employeeAssessments: EmployeeAssessment[] = [
+//   {
+//     title: "The Leadership Behavior Description Questionnaire (LBDQ)",
+//     description: "technical skills",
+//     image: "https://i.pinimg.com/736x/10/b6/03/10b6036d9dc7ebe236aed2d5e65b1e2a.jpg",
+//     url: "LBDQ",
+//     progress: 2,
+//   },
+//   {
+//     title: "The Leadership Behavior Description Questionnaire (LBDQ)",
+//     description: "technical skills",
+//     image: "https://i.pinimg.com/736x/43/a8/f3/43a8f35f1c56b7c9d63c0a8f8d0c14b0.jpg",
+//     url: "LBDQ",
+//     progress: 2,
+//   },
+// ];
 
 const DashboardPage = () => {
   const router = useRouter();
+  const [assessmentsData, setAssessmentsData] = useState<
+    {
+      id: number;
+      name: string;
+      description: string;
+      imageUrl: string;
+      duration: number;
+      userId: number;
+      price: number;
+      isActive: true;
+      createdAt: string;
+      updatedAt: string;
+    }[]
+  >([]);
+
+  useEffect(() => {
+    axios("/assessments", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((res) => setAssessmentsData(res.data.data))
+      .catch((err) => console.error(err));
+  }, []);
 
   return (
-    <div className='overflow-auto h-full'>
-      <PageHead title='Dashboard' />
-      <div className='flex-1 space-y-4 p-4 pt-6 md:p-8'>
-        <div className='flex items-center justify-between space-y-2'>
-          <h2 className='text-3xl font-bold tracking-tight'>
-            Hi, Welcome back 👋
-          </h2>
+    <div className="overflow-auto h-full">
+      <PageHead title="Dashboard" />
+      <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+        <div className="flex items-center justify-between space-y-2">
+          <h2 className="text-3xl font-bold tracking-tight">Hi, Welcome back 👋 </h2>
         </div>
-        <Tabs defaultValue='overview' className='space-y-4'>
+        <Tabs defaultValue="overview" className="space-y-4">
           <TabsList>
-            <TabsTrigger value='overview'>Overview</TabsTrigger>
-            <TabsTrigger disabled value='analytics'>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger disabled value="analytics">
               Analytics
             </TabsTrigger>
           </TabsList>
-          <TabsContent value='overview' className='space-y-4'>
-            <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
-              <Card className='bg-slate-100 dark:bg-slate-800'>
-                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                  <CardTitle className='text-sm font-medium'>
-                    Completion form
-                  </CardTitle>
-                  <Check className='h-4 w-4 text-muted-foreground' />
+          <TabsContent value="overview" className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+              <Card className="bg-slate-100 dark:bg-slate-800">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Completion form</CardTitle>
+                  <Check className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className='text-2xl font-bold'>1</div>
-                  <p className='text-xs text-muted-foreground'></p>
+                  <div className="text-2xl font-bold">1</div>
+                  <p className="text-xs text-muted-foreground"></p>
                 </CardContent>
               </Card>
-              <Card className='bg-slate-100 dark:bg-slate-800'>
-                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                  <CardTitle className='text-sm font-medium'>
-                    Questions Answered
-                  </CardTitle>
-                  <ListCheck className='h-4 w-4 text-muted-foreground' />
+              <Card className="bg-slate-100 dark:bg-slate-800">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Questions Answered</CardTitle>
+                  <ListCheck className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className='text-2xl font-bold'>25</div>
-                  <p className='text-xs text-muted-foreground'>question</p>
+                  <div className="text-2xl font-bold">25</div>
+                  <p className="text-xs text-muted-foreground">question</p>
                 </CardContent>
               </Card>
-              <Card className='bg-slate-100 dark:bg-slate-800'>
-                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                  <CardTitle className='text-sm font-medium'>Sales</CardTitle>
-                  <svg
-                    xmlns='http://www.w3.org/2000/svg'
-                    viewBox='0 0 24 24'
-                    fill='none'
-                    stroke='currentColor'
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth='2'
-                    className='h-4 w-4 text-muted-foreground'
-                  >
-                    <rect width='20' height='14' x='2' y='5' rx='2' />
-                    <path d='M2 10h20' />
+              <Card className="bg-slate-100 dark:bg-slate-800">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="h-4 w-4 text-muted-foreground">
+                    <rect width="20" height="14" x="2" y="5" rx="2" />
+                    <path d="M2 10h20" />
                   </svg>
                 </CardHeader>
                 <CardContent>
-                  <div className='text-2xl font-bold'>+12,234</div>
-                  <p className='text-xs text-muted-foreground'>
-                    +19% from last month
-                  </p>
+                  <div className="text-2xl font-bold">+12,234</div>
+                  <p className="text-xs text-muted-foreground">+19% from last month</p>
                 </CardContent>
               </Card>
-              <Card className='bg-slate-100 dark:bg-slate-800'>
-                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                  <CardTitle className='text-sm font-medium'>
-                    Average Completion
-                  </CardTitle>
-                  <Timer className='h-4 w-4 text-muted-foreground' />
+              <Card className="bg-slate-100 dark:bg-slate-800">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Average Completion</CardTitle>
+                  <Timer className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className='text-2xl font-bold'>15</div>
-                  <p className='text-xs text-muted-foreground'>minutes</p>
+                  <div className="text-2xl font-bold">15</div>
+                  <p className="text-xs text-muted-foreground">minutes</p>
                 </CardContent>
               </Card>
             </div>
-            <h1 className='text-3xl font-bold tracking-tight'>Quesionarre</h1>
-            <div className='relative'>
+            <h1 className="text-3xl font-bold tracking-tight">Quesionarre</h1>
+            <div className="relative">
               <ScrollArea>
-                <div className='flex space-x-4 pb-4'>
-                  {employeeAssessments.map((assessment) => (
+                <div className="flex space-x-4 pb-4">
+                  {assessmentsData.map((assessment) => (
                     <AssessmentCard
-                      onClick={() =>
-                        router.push(`/dashboard/${assessment.url}`)
-                      }
-                      key={assessment.image}
+                      onClick={() => router.push(`/dashboard/${assessment.id}`)}
+                      key={assessment.id}
                       assessment={assessment}
-                      className='w-[250px]'
-                      aspectRatio='square'
+                      className="w-[250px]"
+                      aspectRatio="square"
                       width={200}
                       height={300}
-                      progressAssessment={assessment.progress}
+                      progressAssessment={assessment.isActive ? 50 : 0}
                     />
                   ))}
                 </div>
-                <ScrollBar orientation='horizontal' />
+                <ScrollBar orientation="horizontal" />
               </ScrollArea>
             </div>
           </TabsContent>
diff --git a/src/pages/employee/components/employee-forms/employee-create-form.tsx b/src/pages/employee/components/employee-forms/employee-create-form.tsx
index badbb1c..27add91 100644
--- a/src/pages/employee/components/employee-forms/employee-create-form.tsx
+++ b/src/pages/employee/components/employee-forms/employee-create-form.tsx
@@ -1,40 +1,21 @@
 import Heading from "@/components/shared/heading";
 import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/ui/form";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { departments } from "@/constants/data";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import axios from "@/lib/axios";
+import { useNavigate } from "react-router-dom";
 
 const employeeFormSchema = z
   .object({
-    fullname: z
-      .string({ required_error: "Full name is required" })
-      .min(1, { message: "firstname is should be at least 1 character" }),
-    username: z.string().min(1, { message: "username is required" }),
-    departement: z.string().min(1, { message: "departement is required" }),
+    fullname: z.string({ required_error: "Full name is required" }).min(1, { message: "firstname is should be at least 1 character" }),
+    isPremium: z.boolean({ required_error: "Premium status is required" }),
     email: z.string().email({ message: "Enter a valid email address" }),
-    position: z.string().min(1, { message: "position is required" }),
     password: z.string().min(1, { message: "Password is required" }),
-    confirmPassword: z
-      .string()
-      .min(1, { message: "Confirm Password is required" }),
+    confirmPassword: z.string().min(1, { message: "Confirm Password is required" }),
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: "Passwords must match",
@@ -46,92 +27,73 @@ type EmployeeFormSchemaType = z.infer<typeof employeeFormSchema>;
 const EmployeeCreateForm = ({ modalClose }: { modalClose: () => void }) => {
   const form = useForm<EmployeeFormSchemaType>({
     resolver: zodResolver(employeeFormSchema),
-    defaultValues: {},
+    defaultValues: {
+      fullname: "",
+      isPremium: false,
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
   });
 
+  const navigate = useNavigate();
+
   const onSubmit = (values: EmployeeFormSchemaType) => {
     // Do something with the form values.
     // ✅ This will be type-safe and validated.
-    console.log("Form values", form.getValues());
-    console.log(values);
+    axios("/admin/users", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+      data: { email: values.email, password: values.password, isPremium: values.isPremium, fullName: values.fullname },
+    })
+      .then((res) => res)
+      .catch((err) => console.log(err));
+    navigate("");
   };
 
   return (
-    <div className='px-2'>
-      <div className='flex items-center justify-center text-2xl font-bold'>
-        <img
-          className='w-12 h-12 mr-2'
-          src='https://locallead.id/favicon.svg'
-          alt='Logo'
-        />
+    <div className="px-2">
+      <div className="flex items-center justify-center text-2xl font-bold">
+        <img className="w-12 h-12 mr-2" src="https://locallead.id/favicon.svg" alt="Logo" />
       </div>
 
-      <Heading
-        title={"Add New Employee"}
-        description={""}
-        className='space-y-2 py-4 text-center'
-      />
+      <Heading title={"Add New Employee"} description={""} className="space-y-2 py-4 text-center" />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className='space-y-4'
-          autoComplete='off'
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4" autoComplete="off">
           <FormField
             control={form.control}
-            name='fullname'
+            name="fullname"
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input
-                    placeholder='Enter your full name'
-                    {...field}
-                    className=' px-4 py-6 shadow-inner drop-shadow-xl'
-                  />
+                  <Input placeholder="Enter user full name" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-          <div className='grid grid-cols-2 gap-x-8 gap-y-4'>
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4">
             <FormField
               control={form.control}
-              name='username'
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      placeholder='Enter your username'
-                      {...field}
-                      className=' px-4 py-6 shadow-inner drop-shadow-xl'
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='departement'
+              name="isPremium"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
                     <Select
-                      onValueChange={(value) =>
-                        form.setValue("departement", value)
-                      } // Set the form value here
+                      onValueChange={(value) => form.setValue("isPremium", value === "true")} // Set the form value here
                     >
-                      <SelectTrigger className='px-4 py-6 shadow-inner drop-shadow-xl'>
-                        <SelectValue placeholder='Select a departement' />
+                      <SelectTrigger className="px-4 py-6 shadow-inner drop-shadow-xl">
+                        <SelectValue placeholder="Select user account premium status" />
                       </SelectTrigger>
-                      <SelectContent className='max-h-60 overflow-y-auto'>
+                      <SelectContent className="max-h-60 overflow-y-auto">
                         <SelectGroup>
-                          <SelectLabel>Departement</SelectLabel>
-                          {departments.map((department) => (
-                            <SelectItem value={department}>
-                              {department}
-                            </SelectItem>
-                          ))}
+                          <SelectLabel>Premium Status</SelectLabel>
+
+                          <SelectItem value={"true"}>{"Premium"}</SelectItem>
+
+                          <SelectItem value={"false"}>{"Basic"}</SelectItem>
                         </SelectGroup>
                       </SelectContent>
                     </Select>
@@ -140,52 +102,29 @@ const EmployeeCreateForm = ({ modalClose }: { modalClose: () => void }) => {
                 </FormItem>
               )}
             />
-
-            <FormField
-              control={form.control}
-              name='email'
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      placeholder='Enter your email'
-                      {...field}
-                      className=' px-4 py-6 shadow-inner drop-shadow-xl'
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          </div>
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4">
             <FormField
               control={form.control}
-              name='position' 
+              name="email"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input
-                      placeholder='Enter your position'
-                      {...field}
-                      className=' px-4 py-6 shadow-inner drop-shadow-xl'
-                    />
+                    <Input placeholder="Enter user email" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
           </div>
-          <div className='grid grid-cols-1 gap-x-8 gap-y-4'>
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4">
             <FormField
               control={form.control}
-              name='password'
+              name="password"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input
-                      placeholder='Enter your password'
-                      {...field}
-                      className=' px-4 py-6 shadow-inner drop-shadow-xl'
-                    />
+                    <Input placeholder="Enter user password" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -193,15 +132,11 @@ const EmployeeCreateForm = ({ modalClose }: { modalClose: () => void }) => {
             />
             <FormField
               control={form.control}
-              name='confirmPassword'
+              name="confirmPassword"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input
-                      placeholder='Enter your confirmPassword'
-                      {...field}
-                      className=' px-4 py-6 shadow-inner drop-shadow-xl'
-                    />
+                    <Input placeholder="Enter user password again" {...field} className=" px-4 py-6 shadow-inner drop-shadow-xl" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -209,17 +144,11 @@ const EmployeeCreateForm = ({ modalClose }: { modalClose: () => void }) => {
             />
           </div>
 
-          <div className='flex items-center justify-center gap-4'>
-            <Button
-              type='button'
-              variant='secondary'
-              className='rounded-full '
-              size='lg'
-              onClick={modalClose}
-            >
+          <div className="flex items-end justify-between gap-4">
+            <Button type="button" variant="secondary" className="rounded-full border-[##F6517D] border-2" size="lg" onClick={modalClose}>
               Cancel
             </Button>
-            <Button type='submit' className='rounded-full' size='lg'>
+            <Button type="submit" className="rounded-full bg-[#F6517D]" size="lg">
               Add Employee
             </Button>
           </div>
diff --git a/src/pages/employee/components/employee-table/cell-action.tsx b/src/pages/employee/components/employee-table/cell-action.tsx
index 5f10e2d..acf2045 100644
--- a/src/pages/employee/components/employee-table/cell-action.tsx
+++ b/src/pages/employee/components/employee-table/cell-action.tsx
@@ -1,16 +1,11 @@
 import { AlertModal } from "@/components/shared/alert-modal";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Employee } from "@/constants/data";
 import { Edit, MoreHorizontal, Trash, UserRoundSearch } from "lucide-react";
 import { useRouter } from "@/routes/hooks";
 import { useState } from "react";
+import axios from "@/lib/axios";
 
 interface CellActionProps {
   data: Employee;
@@ -21,37 +16,36 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
-  const onConfirm = async () => {};
+  const onConfirm = async () => {
+    axios(`/admin/users/${data.id}`, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then()
+      .catch((err) => console.log(err));
+
+    router.reload();
+  };
 
   return (
     <>
-      <AlertModal
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        onConfirm={onConfirm}
-        loading={loading}
-      />
+      <AlertModal isOpen={open} onClose={() => setOpen(false)} onConfirm={onConfirm} loading={loading} />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
-          <Button variant='ghost' className='h-8 w-8 p-0'>
-            <span className='sr-only'>Open menu</span>
-            <MoreHorizontal className='h-4 w-4' />
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreHorizontal className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align='end'>
+        <DropdownMenuContent align="end">
           <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DropdownMenuItem
-            onClick={() => router.push(`/employee/${data.id}`)}
-          >
-            <UserRoundSearch className='mr-2 h-4 w-4' /> Detail
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => router.push(`/employee/${data.id}`)}
-          >
-            <Edit className='mr-2 h-4 w-4' /> Update
+          <DropdownMenuItem onClick={() => router.push(`/dashboard/admin/users/${data.id}/`)}>
+            <UserRoundSearch className="mr-2 h-4 w-4" /> Detail
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => setOpen(true)}>
-            <Trash className='mr-2 h-4 w-4' /> Delete
+            <Trash className="mr-2 h-4 w-4" /> Delete
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/src/pages/employee/components/employee-table/columns.tsx b/src/pages/employee/components/employee-table/columns.tsx
index 4d51cb0..27d31b5 100644
--- a/src/pages/employee/components/employee-table/columns.tsx
+++ b/src/pages/employee/components/employee-table/columns.tsx
@@ -6,25 +6,13 @@ import { CellAction } from "./cell-action";
 export const columns: ColumnDef<Employee>[] = [
   {
     id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label='Select all'
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label='Select row'
-      />
-    ),
+    header: ({ table }) => <Checkbox checked={table.getIsAllPageRowsSelected()} onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" />,
+    cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" />,
     enableSorting: false,
     enableHiding: false,
   },
   {
-    accessorKey: "first_name",
+    accessorKey: "profile.fullName",
     header: "NAME",
   },
   // {
@@ -36,12 +24,23 @@ export const columns: ColumnDef<Employee>[] = [
     header: "EMAIL",
   },
   {
-    accessorKey: "job",
-    header: "POSITION",
+    accessorKey: "profile.isPremium",
+    header: "STATUS",
+    cell: ({ row }) => {
+      return <div className="">{row.getValue("profile.isPremium") ? "Premium" : "Basic"}</div>;
+    },
   },
   {
-    accessorKey: "gender",
-    header: "GENDER",
+    accessorKey: "total_results",
+    header: "FINISHED",
+    // Not Done
+    cell: ({ row }) => {
+      const totalResults = row.getValue("total_results") ?? 0;
+      const totalAssessments = row.getValue("total_assessments") ?? 0;
+
+      // return <div> {`${totalResults} / ${totalAssessments}`}</div>;
+      return <div> {`${totalResults}`}</div>;
+    },
   },
   {
     id: "actions",
diff --git a/src/pages/employee/components/employee-table/employee-table-action.tsx b/src/pages/employee/components/employee-table/employee-table-action.tsx
index 9378dbb..d54d191 100644
--- a/src/pages/employee/components/employee-table/employee-table-action.tsx
+++ b/src/pages/employee/components/employee-table/employee-table-action.tsx
@@ -4,14 +4,12 @@ import EmployeeCreateForm from "../employee-forms/employee-create-form";
 
 export default function EmployeeTableActions() {
   return (
-    <div className='flex items-center justify-between gap-2 py-5'>
-      <div className='flex flex-1 gap-4'>
-        <TableSearchInput placeholder='Search People Here' />
+    <div className="flex items-center justify-between gap-2 py-5 w-full">
+      <div className="flex w-full gap-4">
+        <TableSearchInput placeholder="Search People Here" />
       </div>
-      <div className='flex gap-3'>
-        <PopupModal
-          renderModal={(onClose) => <EmployeeCreateForm modalClose={onClose} />}
-        />
+      <div className="flex gap-3">
+        <PopupModal renderModal={(onClose) => <EmployeeCreateForm modalClose={onClose} />} />
       </div>
     </div>
   );
diff --git a/src/pages/employee/components/employee-table/index.tsx b/src/pages/employee/components/employee-table/index.tsx
index 7ef07cb..88b8384 100644
--- a/src/pages/employee/components/employee-table/index.tsx
+++ b/src/pages/employee/components/employee-table/index.tsx
@@ -1,6 +1,6 @@
 import DataTable from "@/components/shared/data-table";
 import { columns } from "./columns";
-import EmployeeTableActions from "./employee-table-action";  
+import EmployeeTableActions from "./employee-table-action";
 
 type TEmployeeTableProps = {
   users: any;
@@ -9,16 +9,11 @@ type TEmployeeTableProps = {
   pageCount: number;
 };
 
-export default function EmployeeTable({
-  users,
-  pageCount,
-}: TEmployeeTableProps) {
+export default function EmployeeTable({ users, pageCount }: TEmployeeTableProps) {
   return (
     <>
       <EmployeeTableActions />
-      {users && (
-        <DataTable columns={columns} data={users} pageCount={pageCount} />
-      )}
+      {users && <DataTable columns={columns} data={users} pageCount={pageCount} />}
     </>
   );
 }
diff --git a/src/pages/employee/index.tsx b/src/pages/employee/index.tsx
index caf0e16..cb229c0 100644
--- a/src/pages/employee/index.tsx
+++ b/src/pages/employee/index.tsx
@@ -4,45 +4,52 @@ import EmployeeTable from "./components/employee-table";
 import { useSearchParams } from "react-router-dom";
 import { DataTableSkeleton } from "@/components/shared/data-table-skeleton";
 import { Breadcrumbs } from "@/components/shared/breadcrumbs";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
 
-export default function EmployeePage() {
+export default function AdminUserPage() {
   const [searchParams] = useSearchParams();
   const page = Number(searchParams.get("page") || 1);
   const pageLimit = Number(searchParams.get("limit") || 10);
   const country = searchParams.get("search") || "";
   const offset = (page - 1) * pageLimit;
   const { data, isLoading } = useGetEmployee(offset, pageLimit, country);
-  const users = data?.users;
-  const totalUsers = data?.total_users; //1000
-  const pageCount = Math.ceil(totalUsers / pageLimit);
+  // const users = data?.users;
+  const [users, setUsers] = useState([]);
+  const [totalUsers, setTotalUsers] = useState(0);
+  // const totalUsers = data?.total_users; //1000
+
+  useEffect(() => {
+    axios("/admin/users/", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((res) => {
+        setUsers(res.data.data);
+        setTotalUsers(res.data.total_users);
+      })
+      .catch((err) => console.log(err));
+  }, []);
 
   if (isLoading) {
     return (
-      <div className='p-5'>
-        <DataTableSkeleton
-          columnCount={5}
-          filterableColumnCount={2}
-          searchableColumnCount={1}
-        />
+      <div className="p-5">
+        <DataTableSkeleton columnCount={5} filterableColumnCount={2} searchableColumnCount={1} />
       </div>
     );
   }
-
   return (
-    <div className='p-4 md:p-8'>
-      <PageHead title='Employee Management' />
+    <div className="p-4 md:p-8">
+      <PageHead title="Employee Management" />
       <Breadcrumbs
         items={[
-          { title: "Dashboard", link: "/" },
-          { title: "Employee", link: "/employee" },
+          { title: "Dashboard", link: "/dashboard/admin" },
+          { title: "User", link: "/dashboard/admin/employee" },
         ]}
       />
-      <EmployeeTable
-        users={users}
-        page={page}
-        totalUsers={totalUsers}
-        pageCount={pageCount}
-      />
+      <EmployeeTable users={users} page={page} totalUsers={totalUsers} pageCount={Math.ceil(totalUsers / pageLimit)} />
     </div>
   );
 }
diff --git a/src/pages/leadership/index.tsx b/src/pages/leadership/index.tsx
index 0bd1da9..21b43cf 100644
--- a/src/pages/leadership/index.tsx
+++ b/src/pages/leadership/index.tsx
@@ -1,12 +1,9 @@
 import { Breadcrumbs } from "@/components/shared/breadcrumbs";
 import PageHead from "@/components/shared/page-head";
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import axios from "@/lib/axios";
 import { BriefcaseBusiness, Home } from "lucide-react";
+import { useEffect, useState } from "react";
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";
 
 const chartData = [
@@ -34,125 +31,122 @@ const chartConfig = {
 const leadershipProfile = [
   {
     name: "Tolerance of Uncertainty",
-    description:
-      "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
+    description: "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
     score: 94.67,
   },
   {
     name: "Tolerance of Uncertainty",
-    description:
-      "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
+    description: "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
     score: 20,
   },
   {
     name: "Tolerance of Uncertainty",
-    description:
-      "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
+    description: "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
     score: 50,
   },
   {
     name: "Tolerance of Uncertainty",
-    description:
-      "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
+    description: "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
     score: 45,
   },
   {
     name: "Tolerance of Uncertainty",
-    description:
-      "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
+    description: "Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi",
     score: 94.67,
   },
 ];
 
 const LeadershipPage = () => {
+  const [userProfile, setUserProfile] = useState<{ fullName: string }>();
+  const [loading, setLoading] = useState(false);
+  const fetchData = async () => {
+    const response = await axios.get("/users/profile", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    });
+    console.log(response.data.data);
+    setUserProfile(response.data.data);
+  };
+  useEffect(() => {
+    setLoading(true);
+    fetchData()
+      .catch((err) => console.error(err))
+      .finally(() => {
+        setLoading(false);
+        console.log(userProfile);
+      });
+  }, []);
+
+  if (loading) return <div>Loading...</div>;
   return (
-    <div className='p-4 md:p-8 overflow-auto h-full'>
-      <PageHead title='Leadership' />
+    <div className="p-4 md:p-8 overflow-auto h-full">
+      <PageHead title="Leadership" />
       <Breadcrumbs
         items={[
           { title: "Dashboard", link: "/dashboard" },
           { title: "Leadership", link: "/dashboard/leadership" },
         ]}
       />
-      <div className='grid md:grid-cols-2 gap-8'>
-        <div className='flex flex-col md:ms-2 lg:ms-4'>
-          <h1 className='text-xl font-medium mt-8'>Overall Stats</h1>
-          <div className='flex flex-1 items-center justify-center'>
-            <ChartContainer
-              config={chartConfig}
-              className='mx-auto md:h-[200px] lg:h-[300px] w-auto mt-4'
-            >
+      <div className="grid md:grid-cols-2 gap-8">
+        <div className="flex flex-col md:ms-2 lg:ms-4">
+          <h1 className="text-xl font-medium mt-8">Overall Stats</h1>
+          <div className="flex flex-1 items-center justify-center">
+            <ChartContainer config={chartConfig} className="mx-auto md:h-[200px] lg:h-[300px] w-auto mt-4">
               <RadarChart data={chartData}>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent />}
-                />
-                <PolarAngleAxis dataKey='skill' />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                <PolarAngleAxis dataKey="skill" />
                 <PolarGrid />
-                <Radar
-                  dataKey='score'
-                  fill='var(--color-desktop)'
-                  fillOpacity={0.6}
-                />
+                <Radar dataKey="score" fill="var(--color-desktop)" fillOpacity={0.6} />
               </RadarChart>
             </ChartContainer>
           </div>
         </div>
-        <div className='md:ms-2 lg:ms-4 lg:me-12'>
-          <h1 className='text-xl font-medium mt-8'>Summary</h1>
-          <h3 className='font-bold text-2xl mb-6 mt-4'>Jesicaaa</h3>
-          <div className='flex justify-between'>
-            <div className='flex space-x-5 items-center mt-4'>
-              <div className='p-2 bg-slate-200 rounded-full'>
-                <Home className='stroke-green-600' />
+        <div className="md:ms-2 lg:ms-4 lg:me-12">
+          <h1 className="text-xl font-medium mt-8">Summary</h1>
+          <h3 className="font-bold text-2xl mb-6 mt-4">{userProfile?.profile?.fullName}</h3>
+          <div className="flex justify-between">
+            <div className="flex space-x-5 items-center mt-4">
+              <div className="p-2 bg-slate-200 rounded-full">
+                <Home className="stroke-green-600" />
               </div>
-              <div className='flex flex-col -space-y-1'>
-                <h1 className='text-sm font-normal'>Asal</h1>
-                <h2 className='text-lg font-medium'>Jepara</h2>
+              <div className="flex flex-col -space-y-1">
+                <h1 className="text-sm font-normal">Asal</h1>
+                <h2 className="text-lg font-medium">Jepara</h2>
               </div>
             </div>
-            <div className='flex space-x-5 items-center mt-4'>
-              <div className='p-2 bg-slate-200 rounded-full'>
-                <BriefcaseBusiness className='stroke-rose-600' />
+            <div className="flex space-x-5 items-center mt-4">
+              <div className="p-2 bg-slate-200 rounded-full">
+                <BriefcaseBusiness className="stroke-rose-600" />
               </div>
-              <div className='flex flex-col -space-y-1'>
-                <h1 className='text-sm font-normal'>Kantor</h1>
-                <h2 className='text-lg font-medium'>Semarang</h2>
+              <div className="flex flex-col -space-y-1">
+                <h1 className="text-sm font-normal">Kantor</h1>
+                <h2 className="text-lg font-medium">Semarang</h2>
               </div>
             </div>
           </div>
-          <h1 className='text-xl font-semibold my-8'>Tipe Kepemimpinan Anda</h1>
-          <div className='flex flex-grow bg-slate-200 dark:bg-slate-800 p-4 rounded-lg'>
-            <p className='text-base font-medium dark:text-[#36DBFF] text-cyan-500'>
-              Tolerance of Uncertainty: 94.67%
-            </p>
+          <h1 className="text-xl font-semibold my-8">Tipe Kepemimpinan Anda</h1>
+          <div className="flex flex-grow bg-slate-200 dark:bg-slate-800 p-4 rounded-lg">
+            <p className="text-base font-medium dark:text-[#36DBFF] text-cyan-500">Tolerance of Uncertainty: 94.67%</p>
           </div>
-          <p className='mt-6'>
-            Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian
-            yang terjadi
-          </p>
-          <p className='mt-8'>Tanggal Survey: 15 September 2024</p>
+          <p className="mt-6">Menggambarkan sejauh mana pemimpin mampu mentolerir ketidakpastian yang terjadi</p>
+          <p className="mt-8">Tanggal Survey: 15 September 2024</p>
         </div>
       </div>
-      <div className='p-4'>
-        <h1 className='text-xl font-medium mt-8'>Leadership Profiling</h1>
-        <div className='space-y-6 mt-8'>
+      <div className="p-4">
+        <h1 className="text-xl font-medium mt-8">Leadership Profiling</h1>
+        <div className="space-y-6 mt-8">
           {leadershipProfile.map((profile, index) => (
-            <div className='grid md:grid-cols-2 grid-cols-1'>
-              <div className=''>
-                <h1 className='font-medium '>{profile.name}</h1>
-                <p className='text-xs'>{profile.description}</p>
+            <div className="grid md:grid-cols-2 grid-cols-1">
+              <div className="">
+                <h1 className="font-medium ">{profile.name}</h1>
+                <p className="text-xs">{profile.description}</p>
               </div>
-              <div className='flex items-center w-full my-6'>
-                <div className='w-full mx-12 relative flex items-center flex-1 h-2 bg-slate-200 dark:bg-gray-600 rounded-full'>
-                  <div
-                    className='absolute left-0  h-2 bg-cyan-500 rounded-full'
-                    style={{ width: `${profile.score+2}%` }}
-                  />
-                  <div
-                    className='absolute  w-4 h-4 bg-cyan-300 rounded-full'
-                    style={{ left: `${profile.score}%` }}
-                  />
+              <div className="flex items-center w-full my-6">
+                <div className="w-full mx-12 relative flex items-center flex-1 h-2 bg-slate-200 dark:bg-gray-600 rounded-full">
+                  <div className="absolute left-0  h-2 bg-cyan-500 rounded-full" style={{ width: `${profile.score + 2}%` }} />
+                  <div className="absolute  w-4 h-4 bg-cyan-300 rounded-full" style={{ left: `${profile.score}%` }} />
                 </div>
               </div>
             </div>
diff --git a/src/pages/payment/index.tsx b/src/pages/payment/index.tsx
new file mode 100644
index 0000000..8b29d1c
--- /dev/null
+++ b/src/pages/payment/index.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import React from "react";
+
+const PaymentPage = () => {
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <Tabs
+        defaultValue='personalInformation'
+        className='flex flex-col items-center justify-center'
+      >
+        <TabsList>
+          <TabsTrigger value='personalInformation'>
+            Personal Information
+          </TabsTrigger>
+          <TabsTrigger value='packet'>Packet</TabsTrigger>
+          <TabsTrigger value='finish'>Finish</TabsTrigger>
+        </TabsList>
+        <TabsContent value='personalInformation'>
+          <div className='mx-12 mt-5'>
+            <img
+              className='w-10 h-auto'
+              src='https://locallead.id/favicon.svg'
+              alt='Logo'
+            />
+            <div className='flex flex-1'>
+              <div className='w-3/5 me'>
+                <h1 className='text-2xl font-bold mt-5'>Personal Detail</h1>
+                <p className='mt-5 text-sm me-5'>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+                <div className='me-5'>
+                  <Input className='mt-5' placeholder='Full Name' />
+                  <Input className='mt-5' placeholder='Email' />
+                  <Input className='mt-5' placeholder='Phone Number' />
+                </div>
+                <div className='flex items-center justify-end mt-12 me-5'>
+                  <Button>
+                    <span>Continue</span>
+                  </Button>
+                </div>
+              </div>
+              <div className='w-2/5'>
+                <h1 className='text-2xl font-bold mt-5'>Payment Method</h1>
+                <p className='mt-5'>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default PaymentPage;
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 0ebb81e..6303e97 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,7 +1,60 @@
-import React from "react";
+import { Breadcrumbs } from "@/components/shared/breadcrumbs";
+import PageHead from "@/components/shared/page-head";
+import axios from "@/lib/axios";
+import React, { useEffect, useState } from "react";
 
 const ProfilePage = () => {
-  return <div>Profile</div>;
+  const [profileData, setProfileData] = useState();
+  const fetchData = async () => {
+    const response = await axios.get("/users/profile", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    });
+    setProfileData(response.data);
+  };
+  useEffect(() => {
+    fetchData()
+      .catch((err) => console.error(err))
+      .finally(() => console.log("done fetching user data"));
+  }, []);
+
+  return (
+    <div>
+      <div className='p-4 md:p-8 overflow-auto h-full'>
+        <PageHead title='Profile' />
+        <Breadcrumbs
+          items={[
+            { title: "Dashboard", link: "/" },
+            { title: "Profile", link: "/dashboard/profile" },
+          ]}
+        />
+        <div className='grid md:grid-cols-1 lg:grid-cols-2 mt-5'>
+          <div>
+            <img src={profileData} alt='' className='w-56 h-56' />
+          </div>
+          <div className='sm:mt-5 md:mt-5'>
+            <div className='grid md:grid-cols-2 lg:grid-cols-2 sm:grid-cols-2 gap-3'>
+              <div className='flex space-x-5 items-center'>
+                <div>
+                  <p className='text-gray-500 text-sm'>Name</p>
+                  <h3 className='text-xl'>Rezaaa</h3>
+                </div>
+              </div>
+              <div className='flex space-x-5 items-center'>
+                <div>
+                  <p className='text-gray-500 text-sm'>Placement</p>
+                  <h3 className='text-xl'>Malang</h3>
+                </div>
+              </div>
+            </div>
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default ProfilePage;
diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx
index a3159e2..6c94f74 100644
--- a/src/pages/test/index.tsx
+++ b/src/pages/test/index.tsx
@@ -4,133 +4,110 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { cn } from "@/lib/utils";
 import { useRouter } from "@/routes/hooks";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
+import { useParams } from "react-router-dom";
 
 const tests = [
   {
     id: 1,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 2,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 3,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 4,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 5,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 6,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 7,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 8,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 9,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 10,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 11,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 12,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 13,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 14,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 15,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 16,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 17,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 18,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 19,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 20,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 21,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 22,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 23,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 24,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     id: 25,
-    question:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
 ];
 
@@ -138,71 +115,77 @@ const TestPage = () => {
   const router = useRouter();
   const [loading] = useState(false);
   const [open, setOpen] = useState(false);
+  const [sectionQuestions, setSectionQuestions] = useState<
+    {
+      id: number;
+      order: number;
+      assessmentId: number;
+      text: string;
+      type: string;
+      options: number[];
+      createdAt: string;
+      updatedAt: string;
+    }[]
+  >([]);
+
+  const { assessmentId, sectionId } = useParams();
 
   const onConfirm = async () => {
-    router.push(`/dashboard/:assessment/`);
+    // Set the next tab as active in local storage
+    const nextTabIndex = Number(sectionId) + 3;
+    localStorage.setItem("activeAssessmentTab", `${nextTabIndex}`);
+
+    router.push(`/dashboard/${assessmentId}/`);
   };
 
+  useEffect(() => {
+    axios(`/assessments/${assessmentId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+      },
+    })
+      .then((res) => {
+        const lastNumber = 25 * Number(sectionId);
+        const parsedQuestions = res.data.data.questions.slice(lastNumber - 25, lastNumber);
+        setSectionQuestions(parsedQuestions);
+      })
+      .catch((err) => console.error(err));
+  }, []);
+  
   return (
     <>
-      <AlertModal
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        onConfirm={() => onConfirm()}
-        loading={loading}
-        description='Are you sure you want to submit your answers?'
-      />
-      <div className='overflow-auto h-full'>
-        <div className='px-12 py-9 md:px-56 md:py-12'>
-          <h2 className='font-bold text-2xl'>Selamat mengerjakan!</h2>
-          <div className='my-8'>
-            <div className='flex items-end justify-end space-x-4 me-3 my-4'>
+      <AlertModal isOpen={open} onClose={() => setOpen(false)} onConfirm={() => onConfirm()} loading={loading} description="Are you sure you want to submit your answers?" />
+      <div className="overflow-auto h-full">
+        <div className="px-12 py-9 md:px-56 md:py-12">
+          <h2 className="font-bold text-2xl">Selamat mengerjakan!</h2>
+          <div className="my-8">
+            <div className="flex items-end justify-end space-x-4 me-3 my-4">
               {["STS", "TS", "RR", "S", "SS"].map((option) => (
-                <div key={option} className='space-x-2'>
-                  <h1 className='font-medium text-sm'>{option}</h1>
+                <div key={option} className="space-x-2">
+                  <h1 className="font-medium text-sm">{option}</h1>
                 </div>
               ))}
             </div>
-            {tests.map((test) => (
-              <div
-                key={test.id}
-                className={cn(
-                  "grid grid-cols-[1fr,auto] gap-4  items-center",
-                  test.id % 2 === 0 ? "bg-background" : "dark:bg-slate-800 bg-slate-200",
-                  "p-4 rounded-lg"
-                )}
-              >
-                <Label htmlFor={`question-${test.id}`} className='text-sm'>
-                  <div className='flex'>
-                    <h1 className='flex items-center justify-center'>
-                      {test.id}
-                    </h1>
-                    <p className='ml-8'>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                      sed do eiusmod tempor incididunt ut labore et dolore magna
-                      aliqua.
-                    </p>
+            {sectionQuestions.map((question) => (
+              <div key={question.id} className={cn("grid grid-cols-[1fr,auto] gap-4  items-center", question.id % 2 === 0 ? "bg-background" : "dark:bg-slate-800 bg-slate-200", "p-4 rounded-lg")}>
+                <Label htmlFor={`question-${question.order}`} className="text-sm">
+                  <div className="flex">
+                    <h1 className="flex items-center justify-center">{question.order}</h1>
+                    <p className="ml-8">{question.text}.</p>
                   </div>
                 </Label>
-                <RadioGroup
-                  id={`question-${test.id}`}
-                  className='flex space-x-2'
-                  
-                >
-                  {["STS", "TS", "RR", "S", "SS"].map((option) => (
-                    <div key={option} className='flex items-center space-x-2'>
-                      <RadioGroupItem
-                        value={option}
-                        id={`${test.id}-${option}`}
-                        className='space-x-4'
-                      />
+                <RadioGroup id={`question-${question.order}`} className="flex space-x-2">
+                  {question.options.map((option) => (
+                    <div key={option} className="flex items-center space-x-2">
+                      <RadioGroupItem value={`${option}`} id={`${question.order}-${option}`} className="space-x-4" />
                     </div>
                   ))}
                 </RadioGroup>
               </div>
             ))}
-            <div className='mt-8 flex justify-end'>
-              <Button onClick={() => setOpen(true)} className='font-medium'>
+            <div className="mt-8 flex justify-end">
+              <Button onClick={() => setOpen(true)} className="font-medium">
                 Submit
               </Button>
             </div>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 69fef1d..6227866 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,10 +1,14 @@
 import DashboardLayout from "@/components/layout/dashboard-layout";
+import AdminDashboardPage from "@/pages/admin/dashboard";
+import AdminModulePage from "@/pages/admin/dashboard/modules";
+import AdminUpdateAssessmentPage from "@/pages/admin/dashboard/update-module";
+import AdminUpdateUserPage from "@/pages/admin/dashboard/update-user";
 import AssessmentPage from "@/pages/assessment";
 import SignInPage from "@/pages/auth/signin";
 import CareerSuccessPotentialPage from "@/pages/career-success-potential";
 import ComparisonPage from "@/pages/comparison";
 import DashboardPage from "@/pages/dashboard";
-import EmployeePage from "@/pages/employee";
+import AdminUserPage from "@/pages/employee";
 import EmployeeDetailPage from "@/pages/employee-detail";
 import LandingPage from "@/pages/landing";
 import LeadershipPage from "@/pages/leadership";
@@ -12,7 +16,7 @@ import NotFound from "@/pages/not-found";
 import ProfilePage from "@/pages/profile";
 import TestPage from "@/pages/test";
 import { Suspense } from "react";
-import { Navigate, Outlet, useRoutes } from "react-router-dom";
+import { Navigate, Outlet, redirect, useRoutes } from "react-router-dom";
 
 export default function AppRouter() {
   const dashboardRoutes = [
@@ -25,18 +29,41 @@ export default function AppRouter() {
           </Suspense>
         </DashboardLayout>
       ),
+      loader: () => {
+        if (!localStorage.getItem("access_token")) {
+          return redirect("/login");
+        } else {
+          return null;
+        }
+      },
       children: [
         {
           element: <DashboardPage />,
           index: true,
         },
         {
-          path: "/dashboard/leadership",
-          element: <LeadershipPage />,
+          path: "/dashboard/admin",
+          element: <AdminDashboardPage />,
         },
         {
-          path: "/dashboard/:assessment",
-          element: <AssessmentPage />,
+          path: "/dashboard/admin/user",
+          element: <AdminUserPage />,
+        },
+        {
+          path: "/dashboard/admin/users/:userId",
+          element: <AdminUpdateUserPage />,
+        },
+        {
+          path: "/dashboard/admin/modules",
+          element: <AdminModulePage />,
+        },
+        {
+          path: "/dashboard/admin/modules/:moduleId/",
+          element: <AdminUpdateAssessmentPage />,
+        },
+        {
+          path: "/dashboard/leadership",
+          element: <LeadershipPage />,
         },
         {
           path: "/dashboard/career",
@@ -46,6 +73,10 @@ export default function AppRouter() {
           path: "/dashboard/profile",
           element: <ProfilePage />,
         },
+        {
+          path: "/dashboard/:assessmentId",
+          element: <AssessmentPage />,
+        },
       ],
     },
   ];
@@ -55,13 +86,24 @@ export default function AppRouter() {
       path: "/",
       element: <LandingPage />,
       index: true,
+      loader: () => {
+        if (localStorage.getItem("access_token")) {
+          return redirect("/dashboard");
+        } else {
+          return null;
+        }
+      },
     },
     {
       path: "/login",
       element: <SignInPage />,
+      loader: () => {
+        if (localStorage.getItem("access_token")) return redirect("/dashboard");
+        return null;
+      },
     },
     {
-      path: "/dashboard/:assessment/test/:id",
+      path: "/dashboard/:assessmentId/test/:sectionId",
       element: <TestPage />,
     },
     {
@@ -70,10 +112,11 @@ export default function AppRouter() {
     },
     {
       path: "*",
-      element: <Navigate to='/404' replace />,
+      element: <Navigate to="/404" replace />,
     },
   ];
 
+  // should change to use createBrowserRouter instead so loader can work
   const routes = useRoutes([...dashboardRoutes, ...publicRoutes]);
 
   return routes;
diff --git a/src/types/index.tsx b/src/types/index.tsx
index a1085c5..b4b5901 100644
--- a/src/types/index.tsx
+++ b/src/types/index.tsx
@@ -8,4 +8,5 @@ export interface NavItem {
   icon?: keyof typeof Icons;
   label?: string;
   description?: string;
+  user:string;
 }