json proxy server

db-1720504233338.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

db.json

@@ -0,0 +1,67 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "email": "employee@example.com",
+      "password": "password123",
+      "role": "employee"
+    },
+    {
+      "id": 2,
+      "email": "admin@example.com",
+      "password": "admin123",
+      "role": "admin"
+    },
+    {
+      "email": "employee@example.com",
+      "password": "password123",
+      "id": 3,
+      "role": "employee"
+    },
+    {
+      "id": 4,
+      "email": "suraj@gmail.com",
+      "password": "pass",
+      "role": "employee"
+    },
+    {
+      "id": 5
+    },
+    {
+      "id": 6
+    },
+    {
+      "id": 7
+    },
+    {
+      "id": 8
+    },
+    {
+      "id": 9
+    },
+    {
+      "id": 10
+    },
+    {
+      "id": 11,
+      "email": "urhtuhreiuuryuihd@gmail.com",
+      "password": "password12",
+      "role": "employee"
+    },
+    {
+      "id": 12
+    },
+    {
+      "id": 13
+    },
+    {
+      "id": 14
+    },
+    {
+      "id": 15
+    },
+    {
+      "id": 16
+    }
+  ]
+}

lib/api/axiosConfig.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: 'http://localhost:5000'
+});
+
+export default axiosInstance;

package-lock.json

@@ -24,6 +24,7 @@
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
+        "json-server": "^1.0.0-beta.1",
         "postcss": "^8.4.38",
         "tailwindcss": "^3.4.4",
         "vite": "^5.2.0"
@@ -860,6 +861,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.25",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rc-component/async-validator": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
@@ -1014,6 +1022,280 @@
         "win32"
       ]
     },
+    "node_modules/@tinyhttp/accepts": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.2.2.tgz",
+      "integrity": "sha512-DmngnwOaPgNUGgTpX1UdlNrXaGG6k5rHFzslcYlvSQIg7s0PI6bF86U0fYq3q+yhJhKbnwzFez0wU1lAP+bKvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime": "4.0.1",
+        "negotiator": "^0.6.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/app": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.2.4.tgz",
+      "integrity": "sha512-vFCgE+RncK9+AHpSXHiOxpbaEbpOxYcYHz4K/15Ckh8Sb7WvjA+vveN7bwMqfifyW2uvV3xTKTitUVohf+kDnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/cookie": "2.1.1",
+        "@tinyhttp/proxy-addr": "2.1.4",
+        "@tinyhttp/req": "2.2.3",
+        "@tinyhttp/res": "2.2.3",
+        "@tinyhttp/router": "2.2.2",
+        "header-range-parser": "1.1.3",
+        "regexparam": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-disposition": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.1.tgz",
+      "integrity": "sha512-PQ5IWdOn7arScqTV+usIDJvwbanoAXtaopzgxjMS9y7TFwLSIelCblihRBEVIPIkIpsdhSJFH3RF+Daosyj+Aw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-type": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-type/-/content-type-0.1.4.tgz",
+      "integrity": "sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4"
+      }
+    },
+    "node_modules/@tinyhttp/cookie": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie/-/cookie-2.1.1.tgz",
+      "integrity": "sha512-h/kL9jY0e0Dvad+/QU3efKZww0aTvZJslaHj3JTPmIPC9Oan9+kYqmh3M6L5JUQRuTJYFK2nzgL2iJtH2S+6dA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/cookie-signature": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.1.1.tgz",
+      "integrity": "sha512-VDsSMY5OJfQJIAtUgeQYhqMPSZptehFSfvEEtxr+4nldPA8IImlp3QVcOVuK985g4AFR4Hl1sCbWCXoqBnVWnw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/cors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.0.tgz",
+      "integrity": "sha512-IwQsPBnK+gRrhTsPA4FPOfbNzZZt8cVsOIMNFb6HzoScaiWcoLEogL0Bz/aBSm8KM13uieVXoVT6udMqhqUS2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-vary": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=12.4 || 14.x || >=16"
+      }
+    },
+    "node_modules/@tinyhttp/encode-url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.1.1.tgz",
+      "integrity": "sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/etag": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/etag/-/etag-2.1.2.tgz",
+      "integrity": "sha512-j80fPKimGqdmMh6962y+BtQsnYPVCzZfJw0HXjyH70VaJBHLKGF+iYhcKqzI3yef6QBNa8DKIPsbEYpuwApXTw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/forwarded": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/forwarded/-/forwarded-2.1.1.tgz",
+      "integrity": "sha512-nO3kq0R1LRl2+CAMlnggm22zE6sT8gfvGbNvSitV6F9eaUSurHP0A8YZFMihSkugHxK+uIegh1TKrqgD8+lyGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/proxy-addr": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-2.1.4.tgz",
+      "integrity": "sha512-Xb57jBQW3UcwKST1XSkJpyZPyjOVQJjUfXiHULVXf7FZCgnl273+aj0oP15BzpYLuGhO9IjydY5gvYeg2Cny+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/forwarded": "2.1.1",
+        "ipaddr.js": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/req": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.3.tgz",
+      "integrity": "sha512-HtIa4Gaa8QFTlmsvoif/B7yMK5H0WBUegH2kKW6scNwOpFXyxEk+VsctrIVgORrP5lybXAIRXlRhGuBBAMlVhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/accepts": "2.2.2",
+        "@tinyhttp/type-is": "2.2.3",
+        "@tinyhttp/url": "2.1.1",
+        "header-range-parser": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.3.tgz",
+      "integrity": "sha512-PGl88OOdmMcOuKZaTbhGKAWPoJJf3+EfKIad8ydzjdenVjrTZZjIYJtmwYiUBeEice+YkOCO67qCIekVO5mHlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-disposition": "2.2.1",
+        "@tinyhttp/cookie": "2.1.1",
+        "@tinyhttp/cookie-signature": "2.1.1",
+        "@tinyhttp/encode-url": "2.1.1",
+        "@tinyhttp/req": "2.2.3",
+        "@tinyhttp/send": "2.2.2",
+        "@tinyhttp/vary": "^0.1.3",
+        "es-escape-html": "^0.1.1",
+        "mime": "4.0.0-beta.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res/node_modules/mime": {
+      "version": "4.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.0-beta.1.tgz",
+      "integrity": "sha512-8/p99P1RV17prytee/A6D+8shNqdDzyvGJ/CVfiuXwh4cTsv3P3qGyaYSx2hdqnqbKKqYUfTC5zAjCtcd1BShw==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/router": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.2.tgz",
+      "integrity": "sha512-i+1ouhPyTqcuJuOsKqmo7i+YD++0RF2lQLhBpcTnsaegD2gTEa3xW2Pcz7spYQGo7K8PQYtOrL7m9b14+BEXqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.2.tgz",
+      "integrity": "sha512-TZkGy9EdGk+vwYWQnjArQftaXAUIgp/fFlgaxlpamsCZKy7o+CNJ75xty4H3SaY3ZPgN47wv8rnJ50rDRQdFFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "@tinyhttp/etag": "2.1.2",
+        "mime": "4.0.0-beta.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send/node_modules/mime": {
+      "version": "4.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.0-beta.1.tgz",
+      "integrity": "sha512-8/p99P1RV17prytee/A6D+8shNqdDzyvGJ/CVfiuXwh4cTsv3P3qGyaYSx2hdqnqbKKqYUfTC5zAjCtcd1BShw==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/type-is": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.3.tgz",
+      "integrity": "sha512-RsZ4+or5xI+wrTlrd+/cLZELoJDMd1HSp+1P23VOZSu1xPAsO1XLf1FgluO8GbEW9Ll/l2yC7mO6diKzjc06HA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "mime": "4.0.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/url/-/url-2.1.1.tgz",
+      "integrity": "sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/vary": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/vary/-/vary-0.1.3.tgz",
+      "integrity": "sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1957,6 +2239,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dot-prop": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
+      "integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.18.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/type-fest": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.21.0.tgz",
+      "integrity": "sha512-ADn2w7hVPcK6w1I0uWnM//y1rLXZhzB9mr0a3OirzclKF1Wp6VzevUmzz/NRAWunOT6E8HrnpGY7xOfc6K57fA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2060,6 +2371,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-escape-html": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/es-escape-html/-/es-escape-html-0.1.1.tgz",
+      "integrity": "sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.x"
+      }
+    },
     "node_modules/es-iterator-helpers": {
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
@@ -2142,6 +2463,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-vary": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/es-vary/-/es-vary-0.1.2.tgz",
+      "integrity": "sha512-pLqqZoOutAXQXyBJrUYVNM5fZngiOJYi1Xl4svQMrluTsqDUOQlBMw9EYgLrsWL6niDYn/Yd1y2Pj6GC+j/yjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.x"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2423,6 +2754,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eta": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-3.4.0.tgz",
+      "integrity": "sha512-tCsc7WXTjrTx4ZjYLplcqrI3o4mYJ+Z6YspeuGL8tbt/hHoMchwBwtKfwM09svEY86iRapY93vUqQttcNuIO5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/eta-dev/eta?sponsor=1"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2900,6 +3244,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/header-range-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.3.tgz",
+      "integrity": "sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2937,6 +3291,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inflection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.0.tgz",
+      "integrity": "sha512-1zEJU1l19SgJlmwqsEyFTbScw/tkMHFenUo//Y0i+XEP83gDFdMvPizAD/WGcE+l1ku12PcTVHQhO6g5E0UCMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2970,6 +3334,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ipaddr.js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -3463,6 +3837,46 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-server": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-beta.1.tgz",
+      "integrity": "sha512-xOKYyxkVai66OTFZq5ulAaXYkqiKMbzVED9tRZ+CMg6v6iaSdIVYas5tIjSMw/mYwDL/nJFTCca308gaL0coyA==",
+      "dev": true,
+      "license": "SEE LICENSE IN ./LICENSE",
+      "dependencies": {
+        "@tinyhttp/app": "^2.2.3",
+        "@tinyhttp/cors": "^2.0.0",
+        "chalk": "^5.3.0",
+        "chokidar": "^3.6.0",
+        "dot-prop": "^9.0.0",
+        "eta": "^3.4.0",
+        "inflection": "^3.0.0",
+        "json5": "^2.2.3",
+        "lowdb": "^7.0.1",
+        "milliparsec": "^2.3.0",
+        "sirv": "^2.0.4",
+        "sort-on": "^6.0.0"
+      },
+      "bin": {
+        "json-server": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=18.3"
+      }
+    },
+    "node_modules/json-server/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -3582,6 +3996,22 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3614,6 +4044,32 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/milliparsec": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-2.3.0.tgz",
+      "integrity": "sha512-b+6KYJw+DwQjk24qCUuq+lZvRXDpXJ02qsllKgKaDurHpQ0v7D5op9VAkdYM/pXRhFeh7uLYHmnwFnYvdXGa3A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.1.tgz",
+      "integrity": "sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3655,6 +4111,16 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3699,6 +4165,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -5027,6 +5503,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+      "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -5301,6 +5787,66 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/sort-on": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/sort-on/-/sort-on-6.0.0.tgz",
+      "integrity": "sha512-d51VlJWoFQjp+cIZRyNusCyJdP5pLAw+H+sC4C2q6RhPBv+RAb/QXXck5q3Kdm7h/ot/kD2AlpGPDee8v+0qiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-prop": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sort-on/node_modules/dot-prop": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-8.0.2.tgz",
+      "integrity": "sha512-xaBe6ZT4DHPkg0k4Ytbvn5xoxgpG0jOS1dYxSOwAHPuNLjP3/OzN0gH55SrLqpx8cBfSaVt91lXYkApjb+nYdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^3.8.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sort-on/node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -5311,6 +5857,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/string-convert": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
@@ -5720,6 +6279,16 @@
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
       "license": "MIT"
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",

package.json

@@ -7,8 +7,13 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "react-scripts start",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "server": "json-server --watch db.json --port 5000"
   },
+  "proxy": "http://localhost:5000",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
     "antd": "^5.18.2",
@@ -26,6 +31,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "json-server": "^1.0.0-beta.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "vite": "^5.2.0"

public/customers.json

@@ -0,0 +1,8 @@
+ 
+[
+    { "id": "12d22", "name": "Jane Cooper" },
+    { "id": "5d255", "name": "Esther Howard" },
+    { "id": "147r7", "name": "Guy Hawkins" },
+    { "id": "124fd", "name": "Savannah Nguyen" }
+  ]
+  

public/db.json

@@ -0,0 +1,27 @@
+{
+  "posts": [
+    { "id": "1", "title": "a title", "views": 100 },
+    { "id": "2", "title": "another title", "views": 200 }
+  ],
+  "comments": [
+    { "id": "1", "text": "a comment about post 1", "postId": "1" },
+    { "id": "2", "text": "another comment about post 1", "postId": "1" }
+  ],
+  "profile": {
+    "name": "suraj"
+  },
+  "users": [
+    {
+      "id": "1",
+      "email": "admin@example.com",
+      "password": "adminpassword",
+      "role": "admin"
+    },
+    {
+      "id": "2",
+      "email": "employee@example.com",
+      "password": "employeepassword",
+      "role": "employee"
+    }
+  ]
+}

src/api/axiosConfig.jsx

@@ -1,12 +1,22 @@
 // src/api/axiosConfig.js
+
 import axios from 'axios';
 
 const axiosInstance = axios.create({
-  baseURL: 'http://your-backend-url.com', // Replace with your backend URL
+  baseURL: '/api',
-  timeout: 10000, // Timeout after 10 seconds
   headers: {
     'Content-Type': 'application/json',
   },
 });
 
+axiosInstance.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+}, (error) => {
+  return Promise.reject(error);
+});
+
 export default axiosInstance;

src/components/Auth/LoginPage.jsx

@@ -11,24 +11,35 @@ const LoginPage = () => {
 
   const handleLogin = async (e) => {
     e.preventDefault();
-    setError(''); // Reset error message
+    setError('');
-
+  
     try {
-      const response = await axios.post('/login', { email, password });
+      const response = await axiosInstance.get('http://localhost:5000/users');
-      const { role } = response.data;
+  
-
+      const user = response.data.find(user => user.email === email && user.password === password);
-      if (role === 'admin') {
+  
-        navigate('/admin');
+      if (user) {
-      } else if (role === 'employee') {
+        if (user.role === 'admin') {
-        navigate('/employee');
+          navigate('/admin');
+        } else if (user.role === 'employee') {
+          navigate('/employee');
+        } else {
+          setError('Invalid credentials');
+        }
       } else {
         setError('Invalid credentials');
       }
     } catch (err) {
-      setError('Login failed. Please try again.');
+      if (err.response) {
+        setError(`Login failed: ${err.response.data.message}`);
+      } else if (err.request) {
+        setError('Login failed. No response from server.');
+      } else {
+        setError('Login failed. Please try again.');
+      }
     }
   };
-
+  
   return (
     <div className="flex flex-row min-h-screen justify-center items-center">
       <div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
@@ -37,9 +48,7 @@ const LoginPage = () => {
           <p>Be among the first to experience 3D magic! Register for private alpha.</p>
           {error && <p className="error-message">{error}</p>}
           <form onSubmit={handleLogin} className="space-y-4">
-            <label htmlFor="email" className="block">
+            <label htmlFor="email" className="block"></label>
-            
-            </label>
             <input
               type="email"
               id="email"
@@ -50,9 +59,7 @@ const LoginPage = () => {
               required
               className="input-field"
             />
-            <label htmlFor="password" className="block">
+            <label htmlFor="password" className="block"></label>
-            
-            </label>
             <input
               type="password"
               id="password"
@@ -66,7 +73,7 @@ const LoginPage = () => {
             <div className="forgot-password-container">
               <a href="#">Forgot password?</a>
             </div>
-            <button type="submit"  className="login-button">
+            <button type="submit" className="login-button">
               Login
             </button>
           </form>

src/components/UserList.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import axiosInstance from '../api/axiosInstance';
+
+const UsersList = () => {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    axiosInstance.get('/users')
+      .then(response => {
+        setUsers(response.data);
+      })
+      .catch(error => {
+        console.error('There was an error fetching the users!', error);
+      });
+  }, []);
+
+  return (
+    <div>
+      <h1>Users List</h1>
+      <ul>
+        {users.map(user => (
+          <li key={user.id}>{user.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UsersList;

src/components/customer/AddCustomer.jsx

@@ -6,8 +6,8 @@ const AddCustomer = () => {
   return (
     <div className="flex flex-row">
       <Sidebar />
-      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <div className="w-full flex flex-col min-h-screen  text-white">
-        <div className="min-h-screen bg-gray-900 text-gray-300 p-6">
+        <div className="min-h-screen  text-gray-300 p-6">
           <div className="flex justify-between items-center mb-6">
             <h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
             <Link to="/" className="text-orange-500">skip for now</Link>

src/components/customer/CustomerList.jsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Sidebar from '../sidebar/Sidebar';
 
 const CustomerList = () => {
+  const [customers, setCustomers] = useState([]);
   const navigate = useNavigate();
 
-  const customers = [
+  useEffect(() => {
-    { id: '12d22', name: 'jane cooper' },
+    // Fetch the customers data from the JSON file
-    { id: '5d255', name: 'esther howard' },
+    fetch('/customers.json')
-    { id: '147r7', name: 'guy hawkins' },
+      .then((response) => response.json())
-    { id: '124fd', name: 'savannah nguyen' },
+      .then((data) => setCustomers(data))
-  ];
+      .catch((error) => console.error('Error fetching customers:', error));
+  }, []);
 
   const handleAddCustomer = () => {
     navigate('/add-customer');
@@ -22,27 +24,27 @@ const CustomerList = () => {
       <div className="w-full flex flex-col bg-#090909B text-white">
         <div className="bg-[#090909B] text-gray-300 p-6 rounded-lg">
           <div className="flex justify-between items-center mb-4">
-            <h1 className="text-xl font-semibold text-orange-500">customers list</h1>
+            <h1 className="text-xl font-semibold text-orange-500">Customers List</h1>
-            <button 
+            <button
               className="bg-orange-500 text-black px-4 py-2 rounded-md text-sm"
               onClick={handleAddCustomer}
             >
-              add new customer
+              Add New Customer
             </button>
           </div>
           <div className="flex items-center mb-4">
             <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
             </svg>
-            <span className="text-sm">filter </span> 
+            <span className="text-sm">Filter</span>
           </div>
-          <p className="text-sm mb-4">total customers ({customers.length})</p>
+          <p className="text-sm mb-4">Total Customers ({customers.length})</p>
           <table className="w-full">
             <thead>
               <tr className="text-left text-xs uppercase">
                 <th className="py-2">#</th>
-                <th className="py-2">customer id</th>
+                <th className="py-2">Customer ID</th>
-                <th className="py-2">customer name</th>
+                <th className="py-2">Customer Name</th>
               </tr>
             </thead>
             <tbody>

src/components/customer/CustomerMeasurements.jsx

@@ -1,68 +1,81 @@
 import React from 'react';
 import { Button, Input, Form } from 'antd';
 import { Link } from 'react-router-dom';
+import axios from 'axios';
 import Sidebar from '../sidebar/Sidebar';
+
 const CustomerMeasurements = () => {
-  const onFinish = (values) => {
+  const onFinish = async (values) => {
-    console.log('Measurements:', values);
+    const token = localStorage.getItem('token'); // Assuming the token is stored in localStorage
+
+    try {
+      const response = await axios.post('http://localhost:8080/measurements', values, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      console.log(response.data);
+    } catch (error) {
+      console.error('Error saving measurements:', error);
+    }
   };
 
   return (
     <div className="flex flex-row">
       <Sidebar />
-      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <div className="w-full flex flex-col min-h-screen text-white">
-      <div className="min-h-screen bg-gray-900 text-gray-300 p-6">
+        <div className="min-h-screen text-gray-300 p-6">
-      <div className="flex justify-between items-center mb-6">
+          <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
+            <h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
-        <Link to="/" className="text-orange-500">skip for now</Link>
+            <Link to="/" className="text-orange-500">skip for now</Link>
-      </div>
+          </div>
-      <Form onFinish={onFinish} className="space-y-4">
+          <Form onFinish={onFinish} className="space-y-4">
-        <h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>
+            <h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>
-        <Form.Item name="neck" label="Neck Circumference (in inch)">
+            <Form.Item name="neck" label={<span className="text-white">Neck Circumference (in inch)</span>}>
-          <Input className=" block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="chest" label="Chest Circumference (in inch)">
+            <Form.Item name="chest" label={<span className="text-white">Chest Circumference (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="waist" label="Waist Circumference (in inch)">
+            <Form.Item name="waist" label={<span className="text-white">Waist Circumference (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="shoulder" label="Shoulder Width (in inch)">
+            <Form.Item name="shoulder" label={<span className="text-white">Shoulder Width (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="arm" label="Arm Length (in inch)">
+            <Form.Item name="arm" label={<span className="text-white">Arm Length (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="sleeve" label="Sleeve Length (in inch)">
+            <Form.Item name="sleeve" label={<span className="text-white">Sleeve Length (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
 
-        <h2 className="text-lg font-semibold text-gray-400">Lower Body Measurements</h2>
+            <h2 className="text-lg font-semibold text-gray-400">Lower Body Measurements</h2>
-        <Form.Item name="hip" label="Hip Circumference (in inch)">
+            <Form.Item name="hip" label={<span className="text-white">Hip Circumference (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="inseam" label="Inseam (in inch)">
+            <Form.Item name="inseam" label={<span className="text-white">Inseam (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="outseam" label="Out Seam (in inch)">
+            <Form.Item name="outseam" label={<span className="text-white">Out Seam (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="thigh" label="Thigh Circumference (in inch)">
+            <Form.Item name="thigh" label={<span className="text-white">Thigh Circumference (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item name="ankle" label="Ankle Circumference (in inch)">
+            <Form.Item name="ankle" label={<span className="text-white">Ankle Circumference (in inch)</span>}>
-          <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-black-400" />
-        </Form.Item>
+            </Form.Item>
-        <Form.Item>
+            <Form.Item>
-          <Button type="primary" htmlType="submit" className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400">
+              <Button type="primary" htmlType="submit" className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400">
-            Save Measurements
+                Save Measurements
-          </Button>
+              </Button>
-        </Form.Item>
+            </Form.Item>
-      </Form>
+          </Form>
-    </div>
+        </div>
       </div>
     </div>
-    
   );
 };
 

src/components/employee/EmployeeDashboard.jsx

@@ -9,8 +9,8 @@ const HomePage = () => {
   return (
     <div className="flex flex-row">
       <Sidebar />
-      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <div className="w-full flex flex-col min-h-screen  text-white">
-        <header className="w-full p-4 flex justify-between items-center bg-gray-900">
+        <header className="w-full p-4 flex justify-between items-center">
           <div className="flex items-center">
             <h1 className="text-orange-500 text-2xl font-bold">home</h1>
           </div>
@@ -29,13 +29,13 @@ const HomePage = () => {
             </button>
             <button
               className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-              onClick={() => handleClick('/customers')}
+              onClick={() => handleClick('')}
             >
               view orders
             </button>
             <button
               className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-              onClick={() => handleClick('/customers')}
+              onClick={() => handleClick('')}
             >
               view customers
             </button>

src/components/sidebar/EmployeeSidebar.jsx

@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Layout } from 'antd';
+import { Layout, Drawer, Button } from 'antd';
 import { Link } from 'react-router-dom';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons';
 import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
 import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
 import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
@@ -8,35 +12,89 @@ import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
 import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
 import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
 
+
 const { Sider } = Layout;
 
 const EmployeeSidebar = () => {
+  const [visible, setVisible] = useState(false);
+
+  const showDrawer = () => {
+    setVisible(true);
+  };
+
+  const closeDrawer = () => {
+    setVisible(false);
+  };
+
   return (
-    <Sider width={60} style={{ height: '1024px' }} className="bg-gray-800">
+    <>
-      <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
+      <Button
-        <div className="text-black">t.</div>
+        className="menu-button"
-      </div>
+        type="primary"
-      <div className="flex flex-col items-center" style={{ marginTop: '309.5px', marginLeft: '27px' }}>
+        onClick={showDrawer}
-        <Link to="/employee-dashboard" className="my-6">
+        icon={visible ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-          <img src={HomeIcon} alt="Home" className="hover:opacity-75" style={{ width: '25px', height: '405px' }} />
+      />
-        </Link>
+      <Drawer
-        <Link to="/employee/categories" className="my-6">
+        title="Menu"
-          <img src={CategoriesIcon} alt="Categories" className="hover:opacity-75" style={{ width: '25px', height: '405px' }} />
+        placement="left"
-        </Link>
+        onClose={closeDrawer}
-        <Link to="/employee/manage-customers" className="my-6">
+        visible={visible}
-          <img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75" style={{ width: '25px', height: '405px' }} />
+        bodyStyle={{ padding: 0 }}
-        </Link>
+        width={200}
-        <Link to="/employee/orders" className="my-6">
+      >
-          <img src={OrdersIcon} alt="Orders" className="hover:opacity-75" style={{ width: '25px', height: '405px' }} />
+        <div className="drawer-menu">
-        </Link>
+          <Link to="/employee-dashboard" className="drawer-link">
-        <Link to="/employee/profile" className="my-6">
+            <img src={HomeIcon} alt="Home" className="drawer-icon" />
-          <img src={ProfileIcon} alt="Profile" className="hover:opacity-75" style={{ width: '25px', height: '405px' }} />
+          </Link>
-        </Link>
+          <Link to="/employee/categories" className="drawer-link">
-        <Link to="/employee/logout" className="my-6" style={{ marginTop: '958px', marginLeft: '27.5px' }}>
+            <img src={CategoriesIcon} alt="Categories" className="drawer-icon" />
-          <img src={LogoutIcon} alt="Logout" className="hover:opacity-75" style={{ width: '24px', height: '24px' }} />
+          </Link>
-        </Link>
+          <Link to="/employee/manage-customers" className="drawer-link">
-      </div>
+            <img src={AddCustomerIcon} alt="Add Customer" className="drawer-icon" />
-    </Sider>
+          </Link>
+          <Link to="/employee/orders" className="drawer-link">
+            <img src={OrdersIcon} alt="Orders" className="drawer-icon" />
+          </Link>
+          <Link to="/employee/profile" className="drawer-link">
+            <img src={ProfileIcon} alt="Profile" className="drawer-icon" />
+          </Link>
+          <Link to="/employee/logout" className="drawer-link">
+            <img src={LogoutIcon} alt="Logout" className="drawer-icon" />
+          </Link>
+        </div>
+      </Drawer>
+      <Sider
+        className="desktop-sidebar"
+        breakpoint="lg"
+        collapsedWidth="0"
+        width={200}
+        style={{ height: '100vh' }}
+      >
+        <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
+          <div className="text-black">t.</div>
+        </div>
+        <div className="flex flex-col items-center">
+          <Link to="/employee-dashboard" className="my-6">
+            <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/employee/categories" className="my-6">
+            <img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/employee/manage-customers" className="my-6">
+            <img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/employee/orders" className="my-6">
+            <img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/employee/profile" className="my-6">
+            <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/employee/logout" className="my-6">
+            <img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+        </div>
+      </Sider>
+    </>
   );
 };
 

src/components/sidebar/Sidebar.jsx

@@ -22,7 +22,7 @@ const Sidebar = () => {
   // return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
   return (
     <div className="flex">
-      <div className="bg-gray-800 w-16 min-h-screen flex flex-col items-center">
+      <div className=" w-16 min-h-screen flex flex-col items-center">
         <div className="text-white text-4xl mt-4">t.</div>
         <nav className="mt-10">
           <div onClick={() => handleNavigation("/admin-dashboard")} className="block mb-4">