diff --git a/README.md b/README.md
index c403366..c7dd291 100644
--- a/README.md
+++ b/README.md
@@ -20,17 +20,18 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# Hướng dẫn
+
+Thao tác với Khách Hàng Tiềm Năng:
+- Hiện từng thông tin: http://20.212.111.173:5000/khachhangtiemnang/id (thay bằng id mong muốn)
+- Hiện tất cả thông tin: http://20.212.111.173:5000/khachhangtiemnang
+- Thêm thông tin khách hàng khác: http://20.212.111.173:5000/khachhangtiemnang [POST]
+- Cập nhật thông tin từng khách hàng: http://20.212.111.173:5000/khachhangtiemnang/id [PUT]
+- Xóa thông tin từng khách hàng: http://20.212.111.173:5000/khachhangtiemnang/id [DELETE]
+
+Thao tác với Nhà Cung Cấp:
+- Hiện từng thông tin: http://20.212.111.173:5000/nhacungcap/id (thay bằng id mong muốn)
+- Hiện tất cả thông tin: http://20.212.111.173:5000/nhacungcap
+- Thêm thông tin nhà cung cấp khác: http://20.212.111.173:5000/nhacungcap [POST]
+- Cập nhật thông tin từng nhà cung cấp: http://20.212.111.173:5000/nhacungcap/id [PUT]
+- Xóa thông tin từng nhà cung cấp: http://20.212.111.173:5000/nhacungcap/id [DELETE]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d39063f..29ff924 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,11 @@
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "axios": "^1.6.0",
         "bootstrap": "^5.3.2",
+        "express": "^4.18.2",
+        "mysql": "^2.18.1",
+        "mysql2": "^3.6.2",
         "next": "^13.5.6",
         "react": "^18",
         "react-bootstrap": "^2.9.1",
@@ -678,6 +682,18 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -792,6 +808,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
     "node_modules/array-includes": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
@@ -924,6 +945,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -982,6 +1008,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
+      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -997,6 +1033,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bignumber.js": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
+      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1006,6 +1050,53 @@
         "node": ">=8"
       }
     },
+    "node_modules/body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/bootstrap": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
@@ -1089,11 +1180,18 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
       "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.1",
@@ -1223,6 +1321,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1238,6 +1347,62 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1302,7 +1467,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
       "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.1",
         "gopd": "^1.0.1",
@@ -1329,6 +1493,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1337,6 +1525,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1382,6 +1579,11 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.567",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
@@ -1394,6 +1596,14 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
@@ -1531,6 +1741,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1962,6 +2177,87 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2041,6 +2337,36 @@
         "node": ">=8"
       }
     },
+    "node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2077,6 +2403,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2086,6 +2431,27 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2099,6 +2465,14 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2123,7 +2497,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,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2155,11 +2528,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "dependencies": {
+        "is-property": "^1.0.2"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
       "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
@@ -2289,7 +2669,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -2339,7 +2718,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
       "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.2"
       },
@@ -2351,7 +2729,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2363,7 +2740,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2390,7 +2766,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2398,6 +2773,32 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2445,8 +2846,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/internal-slot": {
       "version": "1.0.6",
@@ -2470,6 +2870,14 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -2680,6 +3088,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g=="
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -2965,6 +3378,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2988,6 +3406,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2997,6 +3428,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -3010,6 +3449,36 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3037,6 +3506,54 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mysql": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
+      "integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==",
+      "dependencies": {
+        "bignumber.js": "9.0.0",
+        "readable-stream": "2.3.7",
+        "safe-buffer": "5.1.2",
+        "sqlstring": "2.3.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mysql2": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.6.2.tgz",
+      "integrity": "sha512-m5erE6bMoWfPXW1D5UrVwlT8PowAoSX69KcZzPuARQ3wY1RJ52NW9PdvdPo076XiSIkQ5IBTis7hxdlrQTlyug==",
+      "dependencies": {
+        "denque": "^2.1.0",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.6.3",
+        "long": "^5.2.1",
+        "lru-cache": "^8.0.0",
+        "named-placeholders": "^1.1.3",
+        "seq-queue": "^0.0.5",
+        "sqlstring": "^2.3.2"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/mysql2/node_modules/lru-cache": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
+    "node_modules/mysql2/node_modules/sqlstring": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -3048,6 +3565,25 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/named-placeholders": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.3.tgz",
+      "integrity": "sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==",
+      "dependencies": {
+        "lru-cache": "^7.14.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/named-placeholders/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -3071,6 +3607,14 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "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==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "13.5.6",
       "resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
@@ -3161,7 +3705,6 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3266,6 +3809,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3334,6 +3888,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3367,6 +3929,11 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -3550,6 +4117,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3572,6 +4144,23 @@
         "react": ">=0.14.0"
       }
     },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -3581,6 +4170,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3601,6 +4204,39 @@
         }
       ]
     },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -3717,6 +4353,25 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3872,6 +4527,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -3886,6 +4546,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3909,11 +4574,70 @@
         "node": ">=10"
       }
     },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
       "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.1",
         "get-intrinsic": "^1.2.1",
@@ -3938,6 +4662,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3963,7 +4692,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -3990,6 +4718,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -3998,6 +4742,14 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
@@ -4269,6 +5021,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -4328,6 +5088,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
@@ -4441,6 +5213,14 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -4483,8 +5263,23 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
     "node_modules/warning": {
       "version": "4.0.3",
diff --git a/package.json b/package.json
index e9f6254..b0710ff 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
+    "express": "^4.18.2",
+    "mysql": "^2.18.1",
+    "mysql2": "^3.6.2",
     "next": "^13.5.6",
     "react": "^18",
     "react-bootstrap": "^2.9.1",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 31f5a6f..bc0d04f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -14,6 +14,7 @@
     children,
   }: {
     children: React.ReactNode;
+    
   }) {
     return (
       <html lang="en">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 47f60bb..1fecb21 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,60 +1,10 @@
 "use client";
-import { useState } from "react";
-import Button from "react-bootstrap/Button";
-import Form from "react-bootstrap/Form";
-import stype from "@/stype/sidebar.module.css";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import Homexx from "@/compoment/Homexx";
 
 export default function Home() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const router = useRouter();
-  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // console.log(event.target.value)
-    setEmail(event.target.value);
-  };
-
-  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(event.target.value);
-  };
-
-  const handleClick = () => {
-    if (email == "admin" && password == "admin") {
-      // <Link href="/user"></Link>;
-      router.push("/user");
-    } else {
-      alert(" bạn đã nhập sai vui lòng nhập lại cho đúng ");
-    }
-  };
-
   return (
     <>
-      <div className={stype.container}>
-        <Form>
-          <Form.Group className="mb-3" controlId="formGroupEmail">
-            <Form.Label>User</Form.Label>
-            <Form.Control
-              type="text"
-              placeholder="Nhập tài Khoản"
-              value={email}
-              onChange={handleEmailChange}
-            />
-          </Form.Group>
-          <Form.Group className="mb-3" controlId="formGroupPassword">
-            <Form.Label>Password</Form.Label>
-            <Form.Control
-              type="password"
-              placeholder="Password"
-              value={password}
-              onChange={handlePasswordChange}
-            />
-          </Form.Group>
-          <Button variant="primary" onClick={handleClick}>
-            Submit
-          </Button>
-        </Form>
-      </div>
+      <Homexx/>
     </>
   );
 }
diff --git a/src/app/supply/page.tsx b/src/app/supply/page.tsx
index d95f2a7..eba967d 100644
--- a/src/app/supply/page.tsx
+++ b/src/app/supply/page.tsx
@@ -1,43 +1,90 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import Table from "react-bootstrap/Table";
 import Button from "react-bootstrap/Button";
 import styles from "@/stype/supply2.module.css";
 import Module from "@/compoment/moduls";
-import ModuleNew from "@/compoment/modulsNew";
 import SideBar from "@/compoment/Sidebar";
-const Supply = () => (
-  <>
-    <SideBar></SideBar>
-    <div className={styles.center}>
-      <div className={styles.title}>
-        <h1>Nguồn Cung Khác Hàng </h1>
+import { apisupply, deleteSupply } from "@/sever/suply";
+import ModuleNew from "@/compoment/modulsNew";
 
-        <ModuleNew />
-      </div>
-      <Table striped bordered hover>
-        <thead>
-          <tr>
-            <th>#</th>
-            <th colSpan={2}>Tên nguồn cung khách hàng </th>
-            <th>Hành động </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td colSpan={2}>Mark</td>
-            <td>
-              <Module />
-              <Button className={styles.btn_l} variant="danger">
-                xoá
-              </Button>
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    </div>
-  </>
-);
+export default function Home() {
+  const [userData, setUserData] = useState<any[]>([]);
+  const fetchData = async () => {
+    try {
+      const data = await apisupply(); 
+      setUserData(data); 
+    } catch (error) {
+      console.error("Đã xảy ra lỗi khi lấy dữ liệu:", error);
+    }
+  };
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-export default Supply;
+  const handleUpdate = () => {
+    fetchData(); 
+  };
+  const handleDelete = (id: any) => {
+    const handleDeleteAsync = async () => {
+      try {
+        await deleteSupply(id);
+        const updatedData = userData.filter((user) => user.ID !== id);
+        setUserData(updatedData);
+      } catch (error) {
+        console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+      }
+    };
+
+    return handleDeleteAsync;
+  };
+  const handleSearch = (search:any) => {
+   
+    const filteredData = userData.filter((user) =>
+      user.Ten.toLowerCase().includes(search.toLowerCase())
+    );
+    console.log(filteredData)
+    setUserData(filteredData);
+  };
+  return (
+    <>
+      <SideBar  onSearch={handleSearch} onUpdate={handleUpdate} ></SideBar>
+      <div className={styles.center}>
+        <div className={styles.title}>
+          <h1>Nguồn Cung Khách Hàng</h1>
+          <ModuleNew onUpdate={handleUpdate}/>
+        </div>
+        <Table striped bordered hover>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th colSpan={2}>Tên nguồn cung khách hàng </th>
+              <th colSpan={2}>Địa Chỉ </th>
+              <th>Hành động </th>
+            </tr>
+          </thead>
+          <tbody>
+            {userData.map((user, index) => (
+              <tr key={index}>
+                <td>{index + 1}</td>
+                <td colSpan={2}>{user.Ten}</td>
+                <td colSpan={2}>{user.DiaChi}</td>
+                <td>
+                  <Module data={user} onUpdate={handleUpdate} />
+                  <Button
+                    className={styles.btn_l}
+                    variant="danger"
+                    onClick={handleDelete(user.ID)}
+                  >
+                    xoá
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/user/page.tsx b/src/app/user/page.tsx
index 0afd7da..27f95e2 100644
--- a/src/app/user/page.tsx
+++ b/src/app/user/page.tsx
@@ -1,36 +1,88 @@
 "use client";
+
+import { useState, useEffect } from "react";
 import Table from "react-bootstrap/Table";
 import Button from "react-bootstrap/Button";
 import styles from "@/stype/supply2.module.css";
 import ModuleUse from "@/compoment/modulsUse";
 import SideBar from "@/compoment/Sidebar";
+import { apiUser, deleteCustomer } from "@/sever/user";
+import ModuleNewUser from "@/compoment/modulsNewUse";
+
 export default function Home() {
+  const [userData, setUserData] = useState<any[]>([]);
+  const fetchData = async () => {
+    try {
+      const data = await apiUser(); 
+      setUserData(data); 
+    } catch (error) {
+      console.error("Đã xảy ra lỗi khi lấy dữ liệu:", error);
+    }
+  };
+  useEffect(() => {
+    fetchData(); 
+  }, []);
+
+  const handleUpdate = () => {
+    fetchData(); 
+  };
+  const handleDelete = (id: any) => {
+    const handleDeleteAsync = async () => {
+      try {
+        await deleteCustomer(id);
+        const updatedData = userData.filter((user) => user.ID !== id);
+        setUserData(updatedData);
+      } catch (error) {
+        console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+      }
+    };
+
+    return handleDeleteAsync;
+  };
+  const handleSearch = (search:any) => {
+   
+    const filteredData = userData.filter((user) =>
+      user.SDT.toLowerCase().includes(search.toLowerCase())
+    );
+    console.log(search)
+    setUserData(filteredData);
+  };
+
   return (
     <>
-      <SideBar></SideBar>
+      <SideBar onSearch={handleSearch} onUpdate={handleUpdate} ></SideBar>
       <div className={styles.center}>
         <div className={styles.title}>
           <h1>Khách Hàng Tiềm Năng</h1>
+          <ModuleNewUser onUpdate={handleUpdate}></ModuleNewUser>
         </div>
         <Table striped bordered hover>
           <thead>
             <tr>
               <th>#</th>
               <th colSpan={2}>Tên nguồn cung khách hàng </th>
+              <th colSpan={2}>SDT </th>
               <th>Hành động </th>
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td>1</td>
-              <td colSpan={2}>Mark</td>
-              <td>
-                <ModuleUse />
-                <Button className={styles.btn_l} variant="danger">
-                  xoá
-                </Button>
-              </td>
-            </tr>
+            {userData.map((user, index) => (
+              <tr key={index}>
+                <td>{index + 1}</td>
+                <td colSpan={2}>{user.Ten}</td>
+                <td colSpan={2}>{user.SDT}</td>
+                <td>
+                  <ModuleUse data={user} onUpdate={handleUpdate} />
+                  <Button
+                    className={styles.btn_l}
+                    variant="danger"
+                    onClick={handleDelete(user.ID)}
+                  >
+                    xoá
+                  </Button>
+                </td>
+              </tr>
+            ))}
           </tbody>
         </Table>
       </div>
diff --git a/src/compoment/Home.tsx b/src/compoment/Home.tsx
new file mode 100644
index 0000000..c02a838
--- /dev/null
+++ b/src/compoment/Home.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import stype from "@/stype/sidebar.module.css";
+import { useRouter } from "next/navigation";
+
+ function Homex() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const router = useRouter();
+
+  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+  };
+
+  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
+
+  const handleClick = () => {
+    if (email == "admin" && password == "admin") {
+      router.push("/user");
+    } else {
+      alert(" bạn đã nhập sai vui lòng nhập lại cho đúng ");
+    }
+  };
+
+  return (
+    <>
+      <div className={stype.container}>
+        <Form>
+          <Form.Group className="mb-3" controlId="formGroupEmail">
+            <Form.Label>User</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Nhập tài Khoản"
+              value={email}
+              onChange={handleEmailChange}
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formGroupPassword">
+            <Form.Label>Password</Form.Label>
+            <Form.Control
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={handlePasswordChange}
+            />
+          </Form.Group>
+          <Button variant="primary" onClick={handleClick}>
+            Submit
+          </Button>
+        </Form>
+      </div>
+    </>
+  );
+}
+export default Homex
\ No newline at end of file
diff --git a/src/compoment/Homexx.tsx b/src/compoment/Homexx.tsx
new file mode 100644
index 0000000..a5abe6e
--- /dev/null
+++ b/src/compoment/Homexx.tsx
@@ -0,0 +1,68 @@
+import style from "@/stype/sidebar.module.css";
+import user_icon from "@/stype/person.png";
+import password_icon from "@/stype/password.png";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+function Homexx() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const router = useRouter();
+
+  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+  };
+
+  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
+
+  const handleClick = () => {
+    if (email == "admin" && password == "admin") {
+      router.push("/user");
+    } else {
+      alert(" bạn đã nhập sai vui lòng nhập lại cho đúng ");
+    }
+  };
+
+  return (
+    <>
+      <div className={style.containerx}>
+        <div className={style.header}>
+          <div className={style.text}>Sign Up</div>
+          <div className={style.underline}></div>
+        </div>
+        <div className={style.inputxs}>
+          <div className={style.inputx}>
+            <Image className={style.img} src={user_icon} alt="" />
+            <input
+              className={style.nhap}
+              type="text"
+              placeholder="Tên Đăng Nhập"
+              value={email}
+              onChange={handleEmailChange}
+            />
+          </div>
+
+          <div className={style.inputx}>
+            <Image className={style.img} src={password_icon} alt="" />
+            <input
+              className={style.nhap}
+              type="password"
+              placeholder="Mật Khẩu"
+              value={password}
+              onChange={handlePasswordChange}
+            />
+          </div>
+        </div>
+        <div className={style.submit_container}>
+          <button onClick={handleClick} className={style.submit}>Login</button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Homexx;
diff --git a/src/compoment/Sidebar.tsx b/src/compoment/Sidebar.tsx
index 4d5477a..22af141 100644
--- a/src/compoment/Sidebar.tsx
+++ b/src/compoment/Sidebar.tsx
@@ -7,19 +7,29 @@ import { faSearch, faShapes, faUser } from "@fortawesome/free-solid-svg-icons";
 import styles from "../stype/sidebar.module.css";
 import Link from "next/link";
 
-const SideBar = () => {
+const SideBar = ({ onSearch, onUpdate }: any) => {
   const [isHovered, setIsHovered] = useState(false);
-  const [showSearchBar, setShowSearchBar] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
 
   const handleHover = () => {
     setIsHovered(true);
-    setShowSearchBar(true);
   };
 
   const handleLeave = () => {
     setIsHovered(false);
   };
 
+  const handleSearchChange = (e: any) => {
+    const value = e.target.value;
+    console.log(value)
+    setSearchQuery(value);
+    console.log(searchQuery)
+    if (value === "") {
+      onUpdate();
+    }
+    onSearch(value);
+  };
+
   return (
     <div
       className={styles.sidebar}
@@ -30,22 +40,15 @@ const SideBar = () => {
         <>
           <div className={styles.side}>
             <ul className={styles.ul}>
-              <li>
-                {showSearchBar ? (
-                  <div className={styles.div}>
-                    <input
-                      type="text"
-                      className={styles.input}
-                      placeholder="Search..."
-                    />
-                    <FontAwesomeIcon
-                      icon={faSearch}
-                      style={{ color: "1e90ff" }}
-                    />
-                  </div>
-                ) : (
-                  <FontAwesomeIcon icon={faSearch} />
-                )}
+              <li className={styles.flex_container}>
+                <FontAwesomeIcon icon={faSearch} />
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={handleSearchChange}
+                  placeholder="Tìm kiếm..."
+                  className={`${styles.searchInput} ${styles.flexContainer}`}
+                />
               </li>
               <li>
                 <Link href="/user" className={styles.icon}>
@@ -68,6 +71,7 @@ const SideBar = () => {
             <li>
               <FontAwesomeIcon icon={faSearch} />
             </li>
+
             <li>
               <FontAwesomeIcon icon={faUser} />
             </li>
diff --git a/src/compoment/moduls.tsx b/src/compoment/moduls.tsx
index c4bc6e5..03ffae1 100644
--- a/src/compoment/moduls.tsx
+++ b/src/compoment/moduls.tsx
@@ -2,13 +2,60 @@ import { useState } from "react";
 import Button from "react-bootstrap/Button";
 import Modal from "react-bootstrap/Modal";
 import Form from "react-bootstrap/Form";
+import { updateSupply } from "@/sever/suply";
 
-function Module() {
+function Module({ data, onUpdate }: any) {
   const [show, setShow] = useState(false);
+  const [ten, setTen] = useState("");
+  const [BCC, setBCC] = useState("");
+  const [CC, setCC] = useState("");
+  const [DiaChi, setDiaChi] = useState("");
+  const [ThongTinChung, setThongTinChung] = useState("");
 
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
+  const handleTenChange = (e: any) => setTen(e.target.value);
+  const handleBCCChange = (e: any) => setBCC(e.target.value);
+  const handleDiaChiChange = (e: any) => setDiaChi(e.target.value);
+  const handleCCChange = (e: any) => setCC(e.target.value);
+  const handleThongTinChungChange = (e: any) => setThongTinChung(e.target.value);
 
+  const handleClose = () => {
+    setTen(data.Ten);
+    setBCC(data.BCC);
+    setCC(data.CC);
+    setDiaChi(data.DiaChi);
+    setThongTinChung(data.ThongTinChung);
+
+    setShow(false);
+  };
+  const handleShow = () => {
+    setTen(data.Ten);
+    setBCC(data.BCC);
+    setCC(data.CC);
+    setDiaChi(data.DiaChi);
+    setThongTinChung(data.ThongTinChung);
+
+    setShow(true);
+  };
+
+
+  const handleUpdate = async ()=>{
+    const newData = {
+      Ten: ten,
+      BCC: BCC,
+      CC: CC,
+      DiaChi: DiaChi,
+      ThongTinChungChung: ThongTinChung
+    };
+
+    try {
+      await updateSupply(data.ID, newData);
+      onUpdate();
+      handleClose();
+    } catch (error) {
+      console.error("Error updating customer data:", error);
+    }
+
+  }
   return (
     <>
       <Button variant="primary" onClick={handleShow}>
@@ -16,42 +63,55 @@ function Module() {
       </Button>
 
       <Modal show={show} onHide={handleClose} animation={false} size="lg">
-       
         <Modal.Body>
           <Form>
             <Form.Group controlId="formName">
               <Form.Label>Tên</Form.Label>
-              <Form.Control type="text" placeholder="Nhập tên" />
+              <Form.Control
+                type="text"
+                placeholder="Nhập tên"
+                value={ten}
+                onChange={handleTenChange}
+              />
             </Form.Group>
 
             <Form.Group controlId="formAddress">
-              <Form.Label>Địa chỉ</Form.Label>
-              <Form.Control type="text" placeholder="Nhập địa chỉ" />
-            </Form.Group>
-
-            <Form.Group controlId="formRecipient">
-              <Form.Label>Đối tượng</Form.Label>
-              <Form.Control type="text" placeholder="Nhập đối tượng" />
+              <Form.Label>BCC</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="BCC"
+                value={BCC}
+                onChange={handleBCCChange}
+              />
             </Form.Group>
 
             <Form.Group controlId="formCC">
               <Form.Label>CC</Form.Label>
-              <Form.Control type="email" placeholder="Nhập CC" />
-            </Form.Group>
-
-            <Form.Group controlId="formBCC">
-              <Form.Label>BCC</Form.Label>
-              <Form.Control type="email" placeholder="Nhập BCC" />
+              <Form.Control
+                type="CC"
+                placeholder="Nhập CC"
+                value={CC}
+                onChange={handleCCChange}
+              />
             </Form.Group>
 
-            <Form.Group controlId="formSubject">
-              <Form.Label>Tiêu đề</Form.Label>
-              <Form.Control type="text" placeholder="Nhập tiêu đề" />
+            
+            <Form.Group controlId="formCC">
+              <Form.Label>DiaChi</Form.Label>
+              <Form.Control type="text" placeholder="Nhập Dia Chi"
+                value={DiaChi}
+                onChange={handleDiaChiChange} />
             </Form.Group>
 
             <Form.Group controlId="formContent">
-              <Form.Label>Nội dung</Form.Label>
-              <Form.Control as="textarea" rows={3} placeholder="Nhập nội dung" />
+              <Form.Label>Thông Tin Chung</Form.Label>
+              <Form.Control
+                as="textarea"
+                rows={3}
+                placeholder="Thông Tin Chung"
+                value={ThongTinChung}
+                onChange={handleThongTinChungChange}
+              />
             </Form.Group>
           </Form>
         </Modal.Body>
@@ -59,7 +119,7 @@ function Module() {
           <Button variant="secondary" onClick={handleClose}>
             Close
           </Button>
-          <Button variant="primary" onClick={handleClose}>
+          <Button variant="primary" onClick={handleUpdate}>
             Save Changes
           </Button>
         </Modal.Footer>
diff --git a/src/compoment/modulsNew.tsx b/src/compoment/modulsNew.tsx
index 2f36f1e..ad792a4 100644
--- a/src/compoment/modulsNew.tsx
+++ b/src/compoment/modulsNew.tsx
@@ -2,12 +2,62 @@ import { useState } from "react";
 import Button from "react-bootstrap/Button";
 import Modal from "react-bootstrap/Modal";
 import Form from "react-bootstrap/Form";
+import { newSupply } from "@/sever/suply";
 
-function ModuleNew() {
+function ModuleNewUser({ onUpdate }: any) {
   const [show, setShow] = useState(false);
+  const [ten, setTen] = useState("");
+  const [BCC, setBCC] = useState("");
+  const [CC, setCC] = useState("");
+  const [DiaChi, setDiaChi] = useState("");
+  const [ThongTinChung, setThongTinChung] = useState("");
 
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
+
+
+  const handleTenChange = (e: any) => setTen(e.target.value);
+  const handleBCCChange = (e: any) => setBCC(e.target.value);
+  const handleDiaChiChange = (e: any) => setDiaChi(e.target.value);
+  const handleCCChange = (e: any) => setCC(e.target.value);
+  const handleThongTinChungChange = (e: any) => setThongTinChung(e.target.value);
+
+  const handleClose = () =>{
+
+    setShow(false);
+    setTen("");
+    setBCC("");
+    setCC("");
+    setDiaChi("");
+    setThongTinChung("");
+  } 
+  const handleShow = () =>{
+    setShow(true);
+    
+  }
+  
+  const handleUpdate = async ()=>{
+    if (ten === "" || BCC === "" || CC === "" || DiaChi === "" || ThongTinChung === "") {
+      alert("Vui lòng nhập đầy đủ thông tin");
+      
+      return; 
+    }
+
+    const newData = {
+      Ten: ten,
+      BCC: BCC,
+      CC: CC,
+      DiaChi: DiaChi,
+      ThongTinChung: ThongTinChung
+    };
+
+    try {
+      await newSupply(newData);
+      onUpdate();
+      handleClose();
+    } catch (error) {
+      console.error("Error updating customer data:", error);
+    }
+
+  }
 
   return (
     <>
@@ -21,37 +71,40 @@ function ModuleNew() {
           <Form>
             <Form.Group controlId="formName">
               <Form.Label>Tên</Form.Label>
-              <Form.Control type="text" placeholder="Nhập tên" />
+              <Form.Control type="text" placeholder="Nhập tên"
+                value={ten}
+                onChange={handleTenChange} />
             </Form.Group>
 
             <Form.Group controlId="formAddress">
-              <Form.Label>Địa chỉ</Form.Label>
-              <Form.Control type="text" placeholder="Nhập địa chỉ" />
+              <Form.Label>BCC</Form.Label>
+              <Form.Control type="text" placeholder="BCC"
+                value={BCC}
+                onChange={handleBCCChange} />
             </Form.Group>
 
-            <Form.Group controlId="formRecipient">
-              <Form.Label>Đối tượng</Form.Label>
-              <Form.Control type="text" placeholder="Nhập đối tượng" />
-            </Form.Group>
+            
 
             <Form.Group controlId="formCC">
               <Form.Label>CC</Form.Label>
-              <Form.Control type="email" placeholder="Nhập CC" />
+              <Form.Control type="CC" placeholder="Nhập CC"
+                value={CC}
+                onChange={handleCCChange} />
             </Form.Group>
-
-            <Form.Group controlId="formBCC">
-              <Form.Label>BCC</Form.Label>
-              <Form.Control type="email" placeholder="Nhập BCC" />
-            </Form.Group>
-
-            <Form.Group controlId="formSubject">
-              <Form.Label>Tiêu đề</Form.Label>
-              <Form.Control type="text" placeholder="Nhập tiêu đề" />
+            <Form.Group controlId="formCC">
+              <Form.Label>DiaChi</Form.Label>
+              <Form.Control type="text" placeholder="Nhập Dia Chi"
+                value={DiaChi}
+                onChange={handleDiaChiChange} />
             </Form.Group>
 
+           
+            
             <Form.Group controlId="formContent">
-              <Form.Label>Nội dung</Form.Label>
-              <Form.Control as="textarea" rows={3} placeholder="Nhập nội dung" />
+              <Form.Label>Thông Tin Chung</Form.Label>
+              <Form.Control as="textarea" rows={3} placeholder="Thông Tin Chung"
+                value={ThongTinChung}
+                onChange={handleThongTinChungChange} />
             </Form.Group>
           </Form>
         </Modal.Body>
@@ -59,7 +112,7 @@ function ModuleNew() {
           <Button variant="secondary" onClick={handleClose}>
             Close
           </Button>
-          <Button variant="primary" onClick={handleClose}>
+          <Button variant="primary" onClick={handleUpdate}>
             Save Changes
           </Button>
         </Modal.Footer>
@@ -68,4 +121,5 @@ function ModuleNew() {
   );
 }
 
-export default ModuleNew;
+export default ModuleNewUser
+;
diff --git a/src/compoment/modulsNewUse.tsx b/src/compoment/modulsNewUse.tsx
new file mode 100644
index 0000000..8b231d2
--- /dev/null
+++ b/src/compoment/modulsNewUse.tsx
@@ -0,0 +1,146 @@
+import { useState } from "react";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import Form from "react-bootstrap/Form";
+import { newCustomer } from "@/sever/user";
+
+function ModuleNewUser({ onUpdate }: any) {
+  const [show, setShow] = useState(false);
+  const [ten, setTen] = useState("");
+  const [sdt, setSdt] = useState("");
+  const [email, setEmail] = useState("");
+  const [nghenghiep, setNgheNghiep] = useState("");
+  const [thongtin, setThongtin] = useState("");
+
+
+
+  const handleTenChange = (e: any) => setTen(e.target.value);
+  const handleSdtChange = (e: any) => setSdt(e.target.value);
+  const handleNgheNghiepChange = (e: any) => setNgheNghiep(e.target.value);
+  const handleEmailChange = (e: any) => setEmail(e.target.value);
+  const handleThongtinChange = (e: any) => setThongtin(e.target.value);
+
+  const handleClose = () =>{
+
+    setShow(false);
+    setTen("");
+    setSdt("");
+    setEmail("");
+    setNgheNghiep("");
+    setThongtin("");
+  } 
+  const handleShow = () =>{
+    setShow(true);
+    
+  }
+
+  const isValidEmail = (email:any) => {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailPattern.test(email);
+  };
+
+  const isValidPhoneNumber = (phoneNumber:any) => {
+    const phonePattern = /^\d{10,11}$/; 
+    return phonePattern.test(phoneNumber);
+  };
+
+  const handleUpdate = async ()=>{
+
+    if (ten === "" || sdt === "" || email === "" || nghenghiep === "" || thongtin === "") {
+      alert("Vui lòng nhập đầy đủ thông tin");
+      return;
+    }
+
+    if (!isValidEmail(email)) {
+      alert("Vui lòng nhập đúng định dạng email");
+      return;
+    }
+
+    if (!isValidPhoneNumber(sdt)) {
+      alert("Vui lòng nhập số điện thoại hợp lệ");
+      return;
+    }
+
+
+
+    const newData = {
+      Ten: ten,
+      SDT: sdt,
+      Email: email,
+      NgheNghiep: nghenghiep,
+      ThongTinChung: thongtin
+    };
+
+    try {
+      await newCustomer(newData);
+      onUpdate();
+      handleClose();
+    } catch (error) {
+      console.error("Error updating customer data:", error);
+    }
+
+  }
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Thêm Mới
+      </Button>
+
+      <Modal show={show} onHide={handleClose} animation={false} size="lg">
+       
+        <Modal.Body>
+          <Form>
+            <Form.Group controlId="formName">
+              <Form.Label>Tên</Form.Label>
+              <Form.Control type="text" placeholder="Nhập tên"
+                value={ten}
+                onChange={handleTenChange} />
+            </Form.Group>
+
+            <Form.Group controlId="formAddress">
+              <Form.Label>SDT</Form.Label>
+              <Form.Control type="text" placeholder="SDT"
+                value={sdt}
+                onChange={handleSdtChange} />
+            </Form.Group>
+
+            
+
+            <Form.Group controlId="formCC">
+              <Form.Label>Email</Form.Label>
+              <Form.Control type="email" placeholder="Nhập Email"
+                value={email}
+                onChange={handleEmailChange} />
+            </Form.Group>
+
+            <Form.Group controlId="formContent">
+              <Form.Label>Nghề Nghiệp</Form.Label>
+              <Form.Control type="text"  placeholder="Nhập Nghề Nghiệp"
+                value={nghenghiep}
+                onChange={handleNgheNghiepChange} />
+            </Form.Group>
+            
+            <Form.Group controlId="formContent">
+              <Form.Label>Thông Tin Chung</Form.Label>
+              <Form.Control as="textarea" rows={3} placeholder="Thông Tin Chung"
+                value={thongtin}
+                onChange={handleThongtinChange} />
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleUpdate}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default ModuleNewUser
+;
diff --git a/src/compoment/modulsUse.tsx b/src/compoment/modulsUse.tsx
index 150d407..a7f85fe 100644
--- a/src/compoment/modulsUse.tsx
+++ b/src/compoment/modulsUse.tsx
@@ -1,14 +1,97 @@
+"use client";
+
 import { useState } from "react";
 import Button from "react-bootstrap/Button";
 import Modal from "react-bootstrap/Modal";
 import Form from "react-bootstrap/Form";
+import { updateCustomer } from "@/sever/user";
 
-function ModuleUse() {
+function ModuleUse({ data, onUpdate }: any) {
   const [show, setShow] = useState(false);
+  const [ten, setTen] = useState(data.Ten);
+  const [sdt, setSdt] = useState(data.SDT);
+  const [nghenghiep, setNgheNghiep] = useState(data.NgheNghiep);
+  const [email, setEmail] = useState(data.Email);
+  const [thongtin, setThongtin] = useState(data.ThongTinChung);
+
+  const handleTenChange = (e: any) => setTen(e.target.value);
+  const handleSdtChange = (e: any) => setSdt(e.target.value);
+  const handleNgheNghiepChange = (e: any) => setNgheNghiep(e.target.value);
+  const handleEmailChange = (e: any) => setEmail(e.target.value);
+  const handleThongtinChange = (e: any) => setThongtin(e.target.value);
+
+  const handleClose = () => {
+    setTen(data.Ten);
+    setSdt(data.SDT);
+    setNgheNghiep(data.NgheNghiep);
+    setEmail(data.Email);
+    setThongtin(data.ThongTinChung);
+
+    setShow(false);
+  };
+  const handleShow = () => {
+    setTen(data.Ten);
+    setSdt(data.SDT);
+    setNgheNghiep(data.NgheNghiep);
+    setEmail(data.Email);
+    setThongtin(data.ThongTinChung);
+    setShow(true);
+  };
+
+  const isValidEmail = (email:any) => {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailPattern.test(email);
+  };
+
+  const isValidPhoneNumber = (phoneNumber:any) => {
+    const phonePattern = /^\d{10,11}$/; 
+    return phonePattern.test(phoneNumber);
+  };
+
+  const handleSave = async () => {
+
+
+
+    if (ten === "" || sdt === "" || email === "" || nghenghiep === "" || thongtin === "") {
+      alert("Vui lòng nhập đầy đủ thông tin");
+      return;
+    }
+
+    if (!isValidEmail(email)) {
+      alert("Vui lòng nhập đúng định dạng email");
+      return;
+    }
+
+    if (!isValidPhoneNumber(sdt)) {
+      alert("Vui lòng nhập số điện thoại hợp lệ");
+      return;
+    }
+
+
+
+
+
+
+ 
+    const updatedData = {
+      Ten: ten,
+      SDT: sdt,
+      NgheNghiep: nghenghiep,
+      Email: email,
+      ThongTinChung: thongtin,
+      ID: data.ID,
+    };
 
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
+    try {
+      await updateCustomer(data.ID, updatedData);
+      onUpdate();
+      handleClose();
+    } catch (error) {
+      console.error("Error updating customer data:", error);
+    }
+  };
 
+  console.log(data);
   return (
     <>
       <Button variant="primary" onClick={handleShow}>
@@ -23,27 +106,48 @@ function ModuleUse() {
           <Form>
             <Form.Group controlId="formName">
               <Form.Label>Tên Khách Hàng </Form.Label>
-              <Form.Control type="text"  />
+              <Form.Control
+                type="text"
+                value={ten}
+                onChange={handleTenChange}
+              />
             </Form.Group>
 
             <Form.Group controlId="formAddress">
               <Form.Label>Gmail</Form.Label>
-              <Form.Control type="email"  />
+              <Form.Control
+                type="email"
+                value={email}
+                onChange={handleEmailChange}
+              />
             </Form.Group>
 
             <Form.Group controlId="formRecipient">
               <Form.Label>Số Điện Thoại </Form.Label>
-              <Form.Control type="text"  />
+              <Form.Control
+                type="text"
+                value={sdt}
+                onChange={handleSdtChange}
+              />
             </Form.Group>
 
             <Form.Group controlId="formCC">
               <Form.Label>Nghề Nghiệp </Form.Label>
-              <Form.Control type="text"  />
+              <Form.Control
+                type="text"
+                value={nghenghiep}
+                onChange={handleNgheNghiepChange}
+              />
             </Form.Group>
 
             <Form.Group controlId="formBCC">
               <Form.Label>Thông Tin Chi Tiết </Form.Label>
-              <Form.Control as="textarea" aria-label="With textarea" />
+              <Form.Control
+                as="textarea"
+                aria-label="With textarea"
+                onChange={handleThongtinChange}
+                value={thongtin}
+              />
             </Form.Group>
           </Form>
         </Modal.Body>
@@ -51,7 +155,7 @@ function ModuleUse() {
           <Button variant="secondary" onClick={handleClose}>
             Close
           </Button>
-          <Button variant="primary" onClick={handleClose}>
+          <Button variant="primary" onClick={handleSave}>
             Save Changes
           </Button>
         </Modal.Footer>
diff --git a/src/sever/suply.js b/src/sever/suply.js
new file mode 100644
index 0000000..55bb8b6
--- /dev/null
+++ b/src/sever/suply.js
@@ -0,0 +1,53 @@
+import axios from "axios";
+
+export const apisupply = async () => {
+  try {
+    const response = await axios.get(
+      "http://20.212.111.173:5000/nhacungcap"
+    );
+    //   console.log(response)
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const deleteSupply = async (customerId) => {
+  const url = `http://20.212.111.173:5000/nhacungcap/${customerId}`;
+
+  try {
+    const response = await axios.delete(url);
+    console.log("Dữ liệu khách hàng đã được xoá:", response.data);
+    // Add any logic you want after deleting the customer data
+  } catch (error) {
+    console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+    // Add any error handling logic here
+  }
+};
+
+export const updateSupply = async (customerId,repon) => {
+  const url = `http://20.212.111.173:5000/nhacungcap/${customerId}`;
+
+  try {
+    const response = await axios.put(url,repon);
+    console.log("Dữ liệu khách hàng đã được cập nhật :", response.data);
+    // Add any logic you want after deleting the customer data
+  } catch (error) {
+    console.error("Đã xảy ra lỗi khi xoá cap nhat:", error);
+    // Add any error handling logic here
+  }
+};
+export const newSupply = async (repon) => {
+  const url = `http://20.212.111.173:5000/nhacungcap`;
+
+  try {
+    const response = await axios.post(url,repon);
+    console.log("Dữ liệu khách hàng đã được cập nhật :", response.data);
+    // Add any logic you want after deleting the customer data
+  } catch (error) {
+    console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+    // Add any error handling logic here
+  }
+};
+
+
diff --git a/src/sever/user.js b/src/sever/user.js
new file mode 100644
index 0000000..cfe7f7d
--- /dev/null
+++ b/src/sever/user.js
@@ -0,0 +1,53 @@
+import axios from "axios";
+
+export const apiUser = async () => {
+  try {
+    const response = await axios.get(
+      "http://20.212.111.173:5000/khachhangtiemnang"
+    );
+    //   console.log(response)
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const deleteCustomer = async (customerId) => {
+  const url = `http://20.212.111.173:5000/khachhangtiemnang/${customerId}`;
+
+  try {
+    const response = await axios.delete(url);
+    console.log("Dữ liệu khách hàng đã được xoá:", response.data);
+    // Add any logic you want after deleting the customer data
+  } catch (error) {
+    console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+    // Add any error handling logic here
+  }
+};
+
+export const updateCustomer = async (customerId,repon) => {
+  const url = `http://20.212.111.173:5000/khachhangtiemnang/${customerId}`;
+
+  try {
+    const response = await axios.put(url,repon);
+    console.log("Dữ liệu khách hàng đã được cập nhật :", response.data);
+    // Add any logic you want after deleting the customer data
+  } catch (error) {
+    console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+    // Add any error handling logic here
+  }
+};
+export const newCustomer = async (repon) => {
+  const url = `http://20.212.111.173:5000/khachhangtiemnang`;
+
+  try {
+    const response = await axios.post(url,repon);
+    console.log("Dữ liệu khách hàng đã được cập nhật :", response.data);
+    // Add any logic you want after deleting the customer data
+  } catch (error) {
+    console.error("Đã xảy ra lỗi khi xoá dữ liệu khách hàng:", error);
+    // Add any error handling logic here
+  }
+};
+
+
diff --git a/src/stype/email.png b/src/stype/email.png
new file mode 100644
index 0000000..820b3b5
Binary files /dev/null and b/src/stype/email.png differ
diff --git a/src/stype/password.png b/src/stype/password.png
new file mode 100644
index 0000000..fcb0dde
Binary files /dev/null and b/src/stype/password.png differ
diff --git a/src/stype/person.png b/src/stype/person.png
new file mode 100644
index 0000000..76684a6
Binary files /dev/null and b/src/stype/person.png differ
diff --git a/src/stype/sidebar.module.css b/src/stype/sidebar.module.css
index 3b9d421..1b6f16e 100644
--- a/src/stype/sidebar.module.css
+++ b/src/stype/sidebar.module.css
@@ -55,3 +55,97 @@
   justify-content: center;
   align-items: center;
 }
+
+.containerx {
+  display: flex;
+  margin: auto;
+  flex-direction: column;
+  margin-top: 50px;
+  background: #fff;
+  padding-bottom: 30px;
+}
+.header{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  margin-top: 30px;
+}
+.text{
+  color: #1e90ff;
+  font-size: 48px;
+  font-weight: 700;
+}
+.underline{
+  width: 61px;
+  height: 6px;
+  background: #1e90ff;
+  border-radius: 9px;
+}
+.inputxs{
+  margin-top: 55px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+.inputx{
+  display: flex;
+  align-items: center;
+  margin: auto;
+  width: 480px;
+  height: 80px;
+  background: #eaeaea;
+  border-radius: 6px;
+
+}
+.img{
+  margin: 0px 30px;
+}
+.nhap{
+  height: 50px;
+  width: 400px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #797979;
+  font-size: 19px;
+
+}
+.submit_container{
+  display: flex;
+  gap: 30px;
+  margin: 60px auto;
+}
+.submit{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 220px;
+  height: 59px;
+  color: #fff;
+  background: #4c00b4;
+  border-radius: 50px;
+  font-size: 19px;
+  font-weight: 700;
+  cursor: pointer;
+
+
+}
+.flex_container {
+  display: flex;
+  align-items: center;
+}
+
+.searchInput {
+  /* thêm các style tùy chỉnh cho ô input tìm kiếm ở đây */
+  /* ví dụ: */
+  width: 150px;
+  border: 1px solid #ccc;
+  outline: none;
+  border-radius: 4px;
+  margin-left: 5px;
+}
+
+
+