diff --git a/package-lock.json b/package-lock.json
index 1e1f793..a92d633 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,43 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@ant-design/colors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-6.0.0.tgz",
+      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "@ant-design/icons": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.6.2.tgz",
+      "integrity": "sha512-QsBG2BxBYU/rxr2eb8b2cZ4rPKAPBpzAR+0v6rrZLp/lnyvflLH3tw1vregK+M7aJauGWjIGNdFmUfpAOtw25A==",
+      "requires": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.0.0",
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.9.4"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz",
+      "integrity": "sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ=="
+    },
+    "@ant-design/react-slick": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.28.2.tgz",
+      "integrity": "sha512-nkrvXsO29pLToFaBb3MlJY4McaUFR4UHtXTz6A5HBzYmxH4SwKerX54mWdGc/6tKpHvS3vUwjEOt2T5XqZEo8Q==",
+      "requires": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "lodash": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
@@ -1162,6 +1199,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -1227,6 +1269,15 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2774,6 +2825,55 @@
         "color-convert": "^1.9.0"
       }
     },
+    "antd": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.14.1.tgz",
+      "integrity": "sha512-984zBd4EtsBfCC4dUmDAZfaCphjcm7+ldKBWJHPyheUZL5S3X7ZSz+Ld75XGNFj4pLjcGMi2SwGOr/4hmByNsg==",
+      "requires": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons": "^4.6.2",
+        "@ant-design/react-slick": "~0.28.1",
+        "@babel/runtime": "^7.12.5",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "^2.2.6",
+        "copy-to-clipboard": "^3.2.0",
+        "lodash": "^4.17.20",
+        "moment": "^2.25.3",
+        "rc-cascader": "~1.4.0",
+        "rc-checkbox": "~2.3.0",
+        "rc-collapse": "~3.1.0",
+        "rc-dialog": "~8.5.1",
+        "rc-drawer": "~4.3.0",
+        "rc-dropdown": "~3.2.0",
+        "rc-field-form": "~1.20.0",
+        "rc-image": "~5.2.4",
+        "rc-input-number": "~7.0.1",
+        "rc-mentions": "~1.5.0",
+        "rc-menu": "~8.10.0",
+        "rc-motion": "^2.4.0",
+        "rc-notification": "~4.5.2",
+        "rc-pagination": "~3.1.6",
+        "rc-picker": "~2.5.10",
+        "rc-progress": "~3.1.0",
+        "rc-rate": "~2.9.0",
+        "rc-resize-observer": "^1.0.0",
+        "rc-select": "~12.1.6",
+        "rc-slider": "~9.7.1",
+        "rc-steps": "~4.1.0",
+        "rc-switch": "~3.2.0",
+        "rc-table": "~7.13.0",
+        "rc-tabs": "~11.7.0",
+        "rc-textarea": "~0.3.0",
+        "rc-tooltip": "~5.1.0",
+        "rc-tree": "~4.1.0",
+        "rc-tree-select": "~4.3.0",
+        "rc-trigger": "^5.2.1",
+        "rc-upload": "~4.2.0-alpha.0",
+        "rc-util": "^5.9.4",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "warning": "^4.0.3"
+      }
+    },
     "anymatch": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
@@ -2842,6 +2942,11 @@
         "is-string": "^1.0.5"
       }
     },
+    "array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -2976,6 +3081,11 @@
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
     },
+    "async-validator": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.1.tgz",
+      "integrity": "sha512-DDmKA7sdSAJtTVeNZHrnr2yojfFaoeW8MfQN8CeuXg8DDQHTqKk9Fdv38dSvnesHoO8MUwMI2HphOeSyIF+wmQ=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3020,6 +3130,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.3.tgz",
       "integrity": "sha512-vwPpH4Aj4122EW38mxO/fxhGKtwWTMLDIJfZ1He0Edbtjcfna/R3YB67yVhezUMzqc3Jr3+Ii50KRntlENL4xQ=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -4035,6 +4153,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4203,6 +4326,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
+      "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4327,6 +4455,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz",
@@ -4791,6 +4927,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
+      "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -5075,6 +5216,11 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
       "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ=="
     },
+    "dom-align": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
+      "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -6954,6 +7100,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "optional": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -7103,6 +7254,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9557,6 +9716,14 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -10009,6 +10176,15 @@
         }
       }
     },
+    "mini-store": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-3.0.6.tgz",
+      "integrity": "sha512-YzffKHbYsMQGUWQRKdsearR79QsMzzJcDDmZKlJBqt5JNkqpyJHYlK6gP61O36X+sLf76sO9G6mhKBe83gIZIQ==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.2",
+        "shallowequal": "^1.0.2"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -10117,6 +10293,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10967,6 +11148,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -12260,6 +12446,383 @@
         }
       }
     },
+    "rc-align": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.9.tgz",
+      "integrity": "sha512-myAM2R4qoB6LqBul0leaqY8gFaiECDJ3MtQDmzDo9xM9NRT/04TvWOYd2YHU9zvGzqk9QXF6S9/MifzSKDZeMw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^5.3.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-cascader": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-1.4.2.tgz",
+      "integrity": "sha512-JVuLGrSi+3G8DZyPvlKlGVWJjhoi9NTz6REHIgRspa5WnznRkKGm2ejb0jJtz0m2IL8Q9BG4ZA2sXuqAu71ltQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "array-tree-filter": "^2.1.0",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.0.1",
+        "warning": "^4.0.1"
+      }
+    },
+    "rc-checkbox": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.3.2.tgz",
+      "integrity": "sha512-afVi1FYiGv1U0JlpNH/UaEXdh6WUJjcWokj/nUN2TgG80bfG+MDdbfHKlLcNNba94mbjy2/SXJ1HDgrOkXGAjg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1"
+      }
+    },
+    "rc-collapse": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.1.0.tgz",
+      "integrity": "sha512-EwpNPJcLe7b+5JfyaxM9ZNnkCgqArt3QQO0Cr5p5plwz/C9h8liAmjYY5I4+hl9lAjBqb7ZwLu94+z+rt5g1WQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.2.1",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-dialog": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.5.2.tgz",
+      "integrity": "sha512-3n4taFcjqhTE9uNuzjB+nPDeqgRBTEGBfe46mb1e7r88DgDo0lL4NnxY/PZ6PJKd2tsCt+RrgF/+YeTvJ/Thsw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.6.1"
+      }
+    },
+    "rc-drawer": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-4.3.1.tgz",
+      "integrity": "sha512-GMfFy4maqxS9faYXEhQ+0cA1xtkddEQzraf6SAdzWbn444DrrLogwYPk1NXSpdXjLCLxgxOj9MYtyYG42JsfXg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.7.0"
+      }
+    },
+    "rc-dropdown": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.2.0.tgz",
+      "integrity": "sha512-j1HSw+/QqlhxyTEF6BArVZnTmezw2LnSmRk6I9W7BCqNCKaRwleRmMMs1PHbuaG8dKHVqP6e21RQ7vPBLVnnNw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-trigger": "^5.0.4"
+      }
+    },
+    "rc-field-form": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.20.0.tgz",
+      "integrity": "sha512-jkzsIfXR7ywEYdeAtktt1aLff88wxIPDLpq7KShHNl4wlsWrCE+TzkXBfjvVzYOVZt5GGrD8YDqNO/q6eaR/eA==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "async-validator": "^3.0.3",
+        "rc-util": "^5.8.0"
+      }
+    },
+    "rc-image": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.2.4.tgz",
+      "integrity": "sha512-kWOjhZC1OoGKfvWqtDoO9r8WUNswBwnjcstI6rf7HMudz0usmbGvewcWqsOhyaBRJL9+I4eeG+xiAoxV1xi75Q==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~8.5.0",
+        "rc-util": "^5.0.6"
+      }
+    },
+    "rc-input-number": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-7.0.2.tgz",
+      "integrity": "sha512-9AcD3/D18Oa41xZnBFvJ0fdp6AJkf/en8uKi8E69Ct+sh64qIYbWUXeh1PXhJgrCHIoNNT8OWaTebypT4/d3ZA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-mentions": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.5.3.tgz",
+      "integrity": "sha512-NG/KB8YiKBCJPHHvr/QapAb4f9YzLJn7kDHtmI1K6t7ZMM5YgrjIxNNhoRKKP9zJvb9PdPts69Hbg4ZMvLVIFQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-menu": "^8.0.1",
+        "rc-textarea": "^0.3.0",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-menu": {
+      "version": "8.10.6",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-8.10.6.tgz",
+      "integrity": "sha512-RVkd8XChwSmVOdNULbqLNnABthRZWnhqct1Q74onEXTClsXvsLADMhlIJtw/umglVSECM+14TJdIli9rl2Bzlw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "mini-store": "^3.0.1",
+        "rc-motion": "^2.0.1",
+        "rc-trigger": "^5.1.2",
+        "rc-util": "^5.7.0",
+        "resize-observer-polyfill": "^1.5.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-motion": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.1.tgz",
+      "integrity": "sha512-TWLvymfMu8SngPx5MDH8dQ0D2RYbluNTfam4hY/dNNx9RQ3WtGuZ/GXHi2ymLMzH+UNd6EEFYkOuR5JTTtm8Xg==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.2.1"
+      }
+    },
+    "rc-notification": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.5.5.tgz",
+      "integrity": "sha512-YIfhTSw+h5GsSdgMnuMx24wqiPlg3FeamuOlkh9RkyHx+SeZVAKzQ0juy2NGvPEF2hDWi5xTqxUqLdo0L2AmGg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.2.0",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-overflow": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.0.2.tgz",
+      "integrity": "sha512-GXj4DAyNxm4f57LvXLwhJaZoJHzSge2l2lQq64MZP7NJAfLpQqOLD+v9JMV9ONTvDPZe8kdzR+UMmkAn7qlzFA==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.5.1"
+      }
+    },
+    "rc-pagination": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.1.6.tgz",
+      "integrity": "sha512-Pb2zJEt8uxXzYCWx/2qwsYZ3vSS9Eqdw0cJBli6C58/iYhmvutSBqrBJh51Z5UzYc5ZcW5CMeP5LbbKE1J3rpw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1"
+      }
+    },
+    "rc-picker": {
+      "version": "2.5.10",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-2.5.10.tgz",
+      "integrity": "sha512-d2or2jql9SSY8CaRPybpbKkXBq3bZ6g88UKyWQZBLTCrc92Xm87RfRC/P3UEQo/CLmia3jVF7IXVi1HmNe2DZA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "date-fns": "^2.15.0",
+        "moment": "^2.24.0",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.4.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-progress": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.1.3.tgz",
+      "integrity": "sha512-Jl4fzbBExHYMoC6HBPzel0a9VmhcSXx24LVt/mdhDM90MuzoMCJjXZAlhA0V0CJi+SKjMhfBoIQ6Lla1nD4QNw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6"
+      }
+    },
+    "rc-rate": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.9.1.tgz",
+      "integrity": "sha512-MmIU7FT8W4LYRRHJD1sgG366qKtSaKb67D0/vVvJYR0lrCuRrCiVQ5qhfT5ghVO4wuVIORGpZs7ZKaYu+KMUzA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-resize-observer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.0.0.tgz",
+      "integrity": "sha512-RgKGukg1mlzyGdvzF7o/LGFC8AeoMH9aGzXTUdp6m+OApvmRdUuOscq/Y2O45cJA+rXt1ApWlpFoOIioXL3AGg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.0.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-select": {
+      "version": "12.1.7",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-12.1.7.tgz",
+      "integrity": "sha512-sLZlfp+U7Typ+jPM5gTi8I4/oJalRw8kyhxZZ9Q4mEfO2p+otd1Chmzhh+wPraBY3IwE0RZM2/x1Leg/kQKk/w==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.0.0",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.0.1",
+        "rc-virtual-list": "^3.2.0"
+      }
+    },
+    "rc-slider": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.7.2.tgz",
+      "integrity": "sha512-mVaLRpDo6otasBs6yVnG02ykI3K6hIrLTNfT5eyaqduFv95UODI9PDS6fWuVVehVpdS4ENgOSwsTjrPVun+k9g==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-tooltip": "^5.0.1",
+        "rc-util": "^5.0.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-steps": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-4.1.3.tgz",
+      "integrity": "sha512-GXrMfWQOhN3sVze3JnzNboHpQdNHcdFubOETUHyDpa/U3HEKBZC3xJ8XK4paBgF4OJ3bdUVLC+uBPc6dCxvDYA==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-switch": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-3.2.2.tgz",
+      "integrity": "sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-table": {
+      "version": "7.13.3",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.13.3.tgz",
+      "integrity": "sha512-oP4fknjvKCZAaiDnvj+yzBaWcg+JYjkASbeWonU1BbrLcomkpKvMUgPODNEzg0QdXA9OGW0PO86h4goDSW06Kg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.4.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-tabs": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.7.3.tgz",
+      "integrity": "sha512-5nd2NVss9TprPRV9r8N05SjQyAE7zDrLejxFLcbJ+BdLxSwnGnk3ws/Iq0smqKZUnPQC0XEvnpF3+zlllUUT2w==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "^3.1.3",
+        "rc-menu": "^8.6.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.5.0"
+      }
+    },
+    "rc-textarea": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-0.3.4.tgz",
+      "integrity": "sha512-ILUYx831ZukQPv3m7R4RGRtVVWmL1LV4ME03L22mvT56US0DGCJJaRTHs4vmpcSjFHItph5OTmhodY4BOwy81A==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.7.0"
+      }
+    },
+    "rc-tooltip": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.1.0.tgz",
+      "integrity": "sha512-pFqD1JZwNIpbdcefB7k5xREoHAWM/k3yQwYF0iminbmDXERgq4rvBfUwIvlCqqZSM7HDr9hYeYr6ZsVNaKtvCQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "rc-trigger": "^5.0.0"
+      }
+    },
+    "rc-tree": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-4.1.5.tgz",
+      "integrity": "sha512-q2vjcmnBDylGZ9/ZW4F9oZMKMJdbFWC7um+DAQhZG1nqyg1iwoowbBggUDUaUOEryJP+08bpliEAYnzJXbI5xQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.0.0",
+        "rc-virtual-list": "^3.0.1"
+      }
+    },
+    "rc-tree-select": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-4.3.1.tgz",
+      "integrity": "sha512-OeV8u5kBEJ8MbatP04Rh8T3boOHGjdGBTEm1a0bubBbB2GNNhlMOr4ZxezkHYtXf02JdBS/WyydmI/RMjXgtJA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-select": "^12.0.0",
+        "rc-tree": "^4.0.0",
+        "rc-util": "^5.0.5"
+      }
+    },
+    "rc-trigger": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.3.tgz",
+      "integrity": "sha512-6Fokao07HUbqKIDkDRFEM0AGZvsvK0Fbp8A/KFgl1ngaqfO1nY037cISCG1Jm5fxImVsXp9awdkP7Vu5cxjjog==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-align": "^4.0.0",
+        "rc-motion": "^2.0.0",
+        "rc-util": "^5.5.0"
+      }
+    },
+    "rc-upload": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.2.0.tgz",
+      "integrity": "sha512-BXtvBs1PnwLjaUzBBU5z4yb9NMSaxc6mUIoPmS9LUAzaTz12L3TLrwu+8dnopYUiyLmYFS3LEO7aUfEWBqJfSA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      }
+    },
+    "rc-util": {
+      "version": "5.9.5",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.9.5.tgz",
+      "integrity": "sha512-YQFlk5j8aEOpkJV5VibcCYk8prve8s9BALiN561FoL9OfQRk41nvfD8jENIvsDsbfq9AFO7Iq7YFEENJkn9Hog==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-virtual-list": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.2.6.tgz",
+      "integrity": "sha512-8FiQLDzm3c/tMX0d62SQtKDhLH7zFlSI6pWBAPt+TUntEqd3Lz9zFAmpvTu8gkvUom/HCsDSZs4wfV4wDPWC0Q==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.0.7"
+      }
+    },
     "react": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
@@ -12282,6 +12845,18 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-datepicker": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.6.0.tgz",
+      "integrity": "sha512-QCCtC1Y5kXZSbULbP33P2p0yTU+0Det7eBFABVM2k6AqdIvyBHVkO/hlq2WDeHlPtaf+DEniCIYjrv2BFdUMHw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.10.0",
+        "react-popper": "^1.3.8"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -12408,6 +12983,25 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-onclickoutside": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz",
+      "integrity": "sha512-7i2L3ef+0ILXpL6P+Hg304eCQswh4jl3ynwR71BSlMU49PE2uk31k8B2GkP6yE9s2D4jTGKnzuSpzWxu4YxfQQ=="
+    },
+    "react-popper": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@hypnosphi/create-react-context": "^0.3.1",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12820,6 +13414,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -13290,6 +13889,14 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.28",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz",
+      "integrity": "sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.17"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -13464,6 +14071,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -13999,6 +14611,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -14549,6 +15166,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -14673,6 +15295,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -15019,6 +15646,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index 61584bf..62f9970 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "antd": "^4.14.1",
+    "axios": "^0.21.1",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-datepicker": "^3.6.0",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.1"
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index 3784575..bf3a214 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,12 @@
-import logo from './logo.svg';
 import './App.css';
+import Test1 from "./component/Test1"
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    return (
+        <div className="App">
+            <Test1 />
+        </div>
+    );
 }
 
 export default App;
diff --git a/src/component/Test1.js b/src/component/Test1.js
new file mode 100644
index 0000000..8b9d1bb
--- /dev/null
+++ b/src/component/Test1.js
@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react';
+import { Avatar, Button, Input, Select, Table } from 'antd';
+import axios from 'axios';
+import moment from 'moment';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import 'antd/dist/antd.css';
+
+const columns = [
+    {
+        title: 'Avt Origin',
+        dataIndex: 'url_origin_img',
+        render: (url_origin_img) => <Avatar src={url_origin_img} size={100} />,
+        width: '20%',
+    },
+    {
+        title: 'Avt Input',
+        dataIndex: 'url_input_img',
+        render: (url_input_img) => <Avatar src={url_input_img} size={100} />,
+        width: '20%',
+    },
+    {
+        title: 'id_camera',
+        dataIndex: 'id_camera',
+        width: '5%',
+    },
+    {
+        title: 'confidence',
+        dataIndex: 'confidence',
+        width: '10%',
+    },
+    {
+        title: 'threshold',
+        dataIndex: 'threshold',
+        width: '5%',
+    },
+    {
+        title: 'time_get',
+        dataIndex: 'time_get',
+        width: '30%',
+    },
+
+];
+
+
+const Test = () => {
+
+    const { Option } = Select;
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [data, setData] = useState([])
+    const [dataPerPage] = useState(10);
+
+    const [startDate, setStartDate] = useState(new Date());
+    const [endDate, setEndDate] = useState(new Date());
+    const [inputCam, setInputCam] = useState();
+    const [inputURL, setInputURL] = useState();
+    const [inputConfidence, setInputConfidence] = useState();
+
+    const [itemPerPage, setItemPerPage] = useState(10)
+
+
+    const onChange = page => {
+        setCurrentPage(page);
+    };
+
+
+
+    const fetchData = () => {
+
+        if (inputCam) {
+            var splitCam = inputCam.split(',');
+        }
+
+
+        fetch(`${inputURL}/api/statistic_histories`, {
+            method: "POST",
+            body: JSON.stringify({
+                'start_date': moment(startDate).format("YYYY-MM-DD 00:00:00"),
+                'end_date': moment(endDate).format("YYYY-MM-DD 00:00:00"),
+                'index': 1,
+                'item_per_page': itemPerPage,
+                'confidence': +inputConfidence,
+                "ids_camera": splitCam
+            })
+
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                setData(data.data)
+            })
+    }
+
+    const onChangeInput = (e) => {
+        setInputCam(e.target.value)
+    }
+
+    const onChangeInputURL = (e) => {
+        setInputURL(e.target.value)
+    }
+
+    const onChangeConfidence = (e) => {
+        setInputConfidence(e.target.value)
+    }
+
+    const handleChangePageSize = (e) => {
+        setItemPerPage(e)
+        console.log(itemPerPage)
+
+    }
+
+    useEffect(() => {
+        fetchData()
+    }, [itemPerPage])
+
+    console.log(itemPerPage)
+
+    const indexOfLastData = currentPage * itemPerPage;
+    const indexOfFirstData = indexOfLastData - itemPerPage;
+    const currentData = data.slice(indexOfFirstData, indexOfLastData)
+
+    const totalData = data.length;
+
+
+    console.log(currentData)
+
+    return (
+        <div style={{ width: '100%' }}>
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: "20px" }}>
+                <DatePicker
+                    selected={startDate}
+                    onChange={date => setStartDate(date)}
+                    selectsStart
+                    startDate={startDate}
+                    endDate={endDate}
+                />
+                <DatePicker
+                    selected={endDate}
+                    onChange={date => setEndDate(date)}
+                    selectsEnd
+                    startDate={startDate}
+                    endDate={endDate}
+                    minDate={startDate}
+                />
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: "30px" }}>
+                <Input
+                    style={{ width: 500 }}
+                    placeholder="URL"
+                    onChange={onChangeInputURL}
+                />
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: "30px" }}>
+                <Input
+                    style={{ width: 120 }}
+                    placeholder="ID cam"
+                    onChange={onChangeInput}
+                />
+
+
+                <Input
+                    style={{ width: 120 }}
+                    placeholder="Confidence"
+                    onChange={onChangeConfidence}
+                />
+
+                <Button
+                    onClick={() => fetchData()}
+                >FETCH
+                </Button>
+            </div>
+            <div className="content" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', margin: "50px 50px" }}>
+                <div>
+                    <div className="left" style={{}}>
+                        {/* {
+                            currentData.map((data, i) => {
+                                return (
+                                    <>
+                                        <div className="container" style={{ display: 'flex', }}>
+                                            <Avatar size={100} src={data.url_origin_img} />
+                                            <div style={{ marginLeft: "20px" }} className="container_right">
+                                                <p>confidence : <b>{data.confidence}</b></p>
+                                                <p>ID Cam : <b>{data.id_camera}</b></p>
+                                                <p>time_get : <b>{data.time_get}</b></p>
+                                                <p>threshold: <b>{data.threshold}</b></p>
+                                            </div>
+                                            <div style={{ marginLeft: "20px" }}>
+                                                <Avatar size={100} src={data.url_input_img} />
+                                            </div>
+                                        </div>
+                                        <Divider />
+                                    </>
+                                )
+                            })
+                        } */}
+
+                        <Table
+                            columns={columns}
+                            dataSource={currentData}
+                        />
+                        <Select defaultValue="10" style={{ width: 80, marginBottom: "30px" }} onChange={handleChangePageSize}>
+                            <Option value={10}>10</Option>
+                            <Option value={50}>50</Option>
+                            <Option value={100}>100</Option>
+                            <Option value={1000}>1000</Option>
+                            <Option value={5000}>5000</Option>
+                        </Select>
+                    </div>
+                </div>
+                {/* <div className="right">
+                    <Avatar size={100} icon={<UserOutlined />} />
+                </div> */}
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: "20px" }}>
+                {/* <Pagination
+                    current={currentPage}
+                    onChange={onChange}
+                    total={totalData}
+                /> */}
+                {/* <Select defaultValue="10" style={{ width: 80 }} onChange={handleChangePageSize}>
+                    <Option value={10}>10</Option>
+                    <Option value={20}>20</Option>
+                    <Option value={30}>30</Option>
+                    <Option value={40}>40</Option>
+                </Select> */}
+            </div>
+
+        </div>
+    );
+}
+
+export default Test;