update a lot

frontend/.gitignore

@@ -25,4 +25,6 @@ yarn-error.log*
 .env
 note_dev.txt
 object.json
-.json
+test.json
+data.json
+# src/data/*

frontend/package-lock.json

@@ -8,11 +8,13 @@
       "name": "test-app",
       "version": "0.1.0",
       "dependencies": {
+        "@observablehq/plot": "^0.6.16",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.7.7",
         "bootstrap": "^5.3.3",
+        "html2pdf.js": "^0.10.2",
         "js-cookie": "^3.0.5",
         "jsonwebtoken": "^9.0.2",
         "react": "^18.3.1",
@@ -3433,6 +3435,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@observablehq/plot": {
+      "version": "0.6.16",
+      "resolved": "https://registry.npmjs.org/@observablehq/plot/-/plot-0.6.16.tgz",
+      "integrity": "sha512-LRi9Rn93yUx90MIo2Md7+vazxO3Wiat14but2ttCER0xVS+jnfoUjuCGoz6H7bz/lgI9CFcW0HWlvWjMFjAv8g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "interval-tree-1d": "^1.0.0",
+        "isoformat": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -4774,6 +4790,13 @@
       "integrity": "sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==",
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
@@ -5813,6 +5836,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -6218,6 +6253,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6261,6 +6305,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/binary-search-bounds": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/binary-search-bounds/-/binary-search-bounds-2.0.5.tgz",
+      "integrity": "sha512-H0ea4Fd3lS1+sTEB2TgcLoK21lLhwEJzlQv3IN47pJS976Gx4zoWe0ak3q+uYh60ppQxg9F16Ri4tS1sfD4+jA==",
+      "license": "MIT"
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6431,6 +6481,18 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -6555,6 +6617,33 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -7032,6 +7121,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -7365,6 +7463,416 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -7567,6 +8075,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -7796,6 +8313,13 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz",
+      "integrity": "sha512-2q4bEI+coQM8f5ez7kt2xclg1XsecaV9ASJk/54vwlfRRNQfDqJz2pzQ8t0Ix/ToBpXlVjrRIx7pFC/o8itG2Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -8149,6 +8673,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -9132,6 +9662,12 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -10149,6 +10685,30 @@
         }
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/html2pdf.js": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.10.2.tgz",
+      "integrity": "sha512-WyHVeMb18Bp7vYTmBv1GVsThH//K7SRfHdSdhHPkl4JvyQarNQXnailkYn0QUbRRmnN5rdbbmSIGEsPZtzPy2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "html2canvas": "^1.0.0",
+        "jspdf": "^2.3.1"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -10430,6 +10990,24 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/interval-tree-1d": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/interval-tree-1d/-/interval-tree-1d-1.0.4.tgz",
+      "integrity": "sha512-wY8QJH+6wNI0uh4pDQzMvl+478Qh7Rl4qLmqiluxALlNvl+I+o5x38Pw3/z7mDPTPS1dQalZJXsmbvxx5gclhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-search-bounds": "^2.0.0"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -10957,6 +11535,12 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/isoformat": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/isoformat/-/isoformat-0.2.1.tgz",
+      "integrity": "sha512-tFLRAygk9NqrRPhJSnNGh7g7oaVWDwR0wKh/GM2LgmPa50Eg4UfyaCO4I8k6EqJHl1/uh2RAD6g06n5ygEnrjQ==",
+      "license": "ISC"
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -13425,6 +14009,24 @@
         "npm": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -17002,6 +17604,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -17018,6 +17630,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "2.79.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
@@ -17116,6 +17734,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
@@ -17735,6 +18359,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
@@ -18291,6 +18925,16 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "license": "MIT"
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -18575,6 +19219,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -19113,6 +19766,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",

frontend/package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@observablehq/plot": "^0.6.16",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
+    "html2pdf.js": "^0.10.2",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.3.1",

frontend/src/index.js

@@ -5,23 +5,27 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/index.css';
 import './styles/styles.css';
 import ErrorPage from './pages/ErrorPage';
-import HomePage from './pages/HomePage';
+import HomePage from './pages/user-pages/HomePage';
 import reportWebVitals from './reportWebVitals';
-import LoginPage from './pages/LoginPage';
-import RegisterPage from './pages/RegisterPage';
-import NewsPage from './pages/NewsPage';
-import MenuPage from './pages/MenuPage';
-import CartPage from './pages/CartPage';
-import UserInfoPage from './pages/UserInfoPage';
+import LoginPage from './pages/user-pages/LoginPage';
+import RegisterPage from './pages/user-pages/RegisterPage';
+import NewsPage from './pages/user-pages/NewsPage';
+import MenuPage from './pages/user-pages/MenuPage';
+import CartPage from './pages/user-pages/CartPage';
+import UserInfoPage from './pages/user-pages/UserInfoPage';
 
-import AdminSummaryPage from './pages/AdminSummaryPage';
-import AdminFeedPage from './pages/AdminFeedPage';
-import AdminMenuPage from './pages/AdminMenuPage';
-import AdminStaffPage from './pages/AdminStaffPage';
-import AdminOrderPage from './pages/AdminOrderPage';
-import AdminSchedulePage from './pages/AdminSchedulePage';
-import AdminLoginPage from './pages/AdminLoginPage';
-import AdminUserInfoPage from './pages/AdminUserInfoPage';
+import AdminSummaryPage from './pages/admin-pages/AdminSummaryPage';
+import AdminFeedPage from './pages/admin-pages/AdminFeedPage';
+import AdminMenuPage from './pages/admin-pages/AdminMenuPage';
+import AdminStaffPage from './pages/admin-pages/AdminStaffPage';
+import AdminOrderPage from './pages/admin-pages/AdminOrderPage';
+import AdminSchedulePage from './pages/admin-pages/AdminSchedulePage';
+import AdminLoginPage from './pages/admin-pages/AdminLoginPage';
+import AdminUserInfoPage from './pages/admin-pages/AdminUserInfoPage';
+import AdminNewsEditPage from './pages/admin-pages/AdminNewsEditPage';
+import AdminBranchPage from './pages/admin-pages/AdminBranchesPage';
+import AdminBranchEditPage from './pages/admin-pages/AdminBranchesEditPage';
+import AdminMenuEditPage from './pages/admin-pages/AdminMenuEditPage';
 
 const router = createBrowserRouter([
     {
@@ -103,7 +107,28 @@ const router = createBrowserRouter([
         path:"/admin-info",
         element: <AdminUserInfoPage/>,
         errorElement: <ErrorPage/>
+    },
+    {
+        path:"/admin-news",
+        element: <AdminNewsEditPage/>,
+        errorElement: <ErrorPage/>
+    },
+    {
+        path:"/admin-branchs-list",
+        element: <AdminBranchPage/>,
+        errorElement: <ErrorPage/>
+    },
+    {
+        path:"/admin-branchs",
+        element: <AdminBranchEditPage/>,
+        errorElement: <ErrorPage/>
+    },
+    {
+        path:"/admin-menu-edit",
+        element: <AdminMenuEditPage/>,
+        errorElement: <ErrorPage/>
     }
+
 ]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

frontend/src/molecules/AdminNavBar.js

@@ -62,6 +62,7 @@ export default function AdminNavbar() {
                         <Nav.Link disabled={!isLoggedIn} href="/admin-staff">Nhân viên</Nav.Link>
                         <Nav.Link disabled={!isLoggedIn} href="/admin-schedule">Lịch làm việc</Nav.Link>
                         <Nav.Link disabled={!isLoggedIn} href="/admin-orders">Đơn hàng</Nav.Link>
+                        <Nav.Link disabled={!isLoggedIn} href="/admin-branchs-list">Các chi nhánh</Nav.Link>
                     </Nav>
                     {userContent}
                 </Navbar.Collapse>

frontend/src/molecules/MenuItem.js

@@ -1,16 +1,28 @@
 // a card item represent a news in newsSection
-import { Card } from "react-bootstrap";
+import { Card, Button } from "react-bootstrap";
 
-export default function MenuItem( {dishName, description, imageSrc} ) {
+export default function MenuItem({ dishName, description, imageSrc, deleteable = false, delButtonCallback = null }) {
     return (
         <Card className="align-items-center">
-          <Card.Img variant="top" src={imageSrc}/>
-          <Card.Body>
-            <Card.Title>{dishName}</Card.Title>
-            <Card.Text>
-                {description}
-            </Card.Text>
-          </Card.Body>
+            <Card.Img variant="top" src={imageSrc} />
+            <Card.Body>
+                <Card.Title>{dishName}</Card.Title>
+                <Card.Text>
+                    {description}
+                </Card.Text>
+                {deleteable ? (
+                    <div className="d-flex justify-content-end pb-3">
+                        <Button size='sm' onClick={delButtonCallback} variant='danger'
+                            style={{
+                                position: 'absolute',
+                                bottom: '20px',  // Khoảng cách từ dưới lên
+                                right: '20px'    // Khoảng cách từ phải qua
+                            }}>
+                            Xóa
+                        </Button>
+                    </div>
+                ) : (<></>)}
+            </Card.Body>
         </Card>
-      );
+    );
 }

frontend/src/molecules/StoreItem.js

@@ -1,16 +1,42 @@
 // a card item represent a news in newsSection
-import { Card } from "react-bootstrap";
+import { Button, Card } from "react-bootstrap";
 
-export default function StoreItem( {storeName, address, imageSrc} ) {
-    return (
-        <Card className="align-items-center">
-          <Card.Img variant="top" src={imageSrc}/>
-          <Card.Body>
-            <Card.Title>{storeName}</Card.Title>
-            <Card.Text>
-                {address}
-            </Card.Text>
-          </Card.Body>
-        </Card>
-      );
+export default function StoreItem({ storeName, address, imageSrc, storeHref = null, deleteable = false, delButtonCallback = null }) {
+  return (
+    <Card
+      as={storeHref ? 'a' : undefined}
+      href={storeHref ? storeHref : undefined}
+      style={{ height: "200px" }}
+    >
+      <Card.Img 
+        variant="top" 
+        src={imageSrc} 
+        style={{ height: "200px", objectFit: 'cover', position: 'center', borderRadius: '10px' }} />
+      <Card.ImgOverlay
+        className="text-start"
+        style={{ 
+          backgroundImage: 'linear-gradient(rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0.5))',
+          // position: 'relative',
+          borderRadius: '10px'
+        }}
+        >
+        <Card.Title>{storeName}</Card.Title>
+        <Card.Text style={{fontWeight:'bold'}}>
+          {address}
+        </Card.Text>
+        {deleteable ? (
+          <div className="d-flex justify-content-end pb-3">
+            <Button size='sm' onClick={delButtonCallback} variant='danger'
+            style={{ 
+              position: 'absolute', 
+              bottom: '20px',  // Khoảng cách từ dưới lên
+              right: '20px'    // Khoảng cách từ phải qua
+            }}>
+              Xóa
+            </Button>
+          </div>
+        ) : (<></>)}
+      </Card.ImgOverlay>
+    </Card>
+  );
 }

frontend/src/organisms/AdminReport.js

@@ -0,0 +1,35 @@
+import html2pdf from "html2pdf.js";
+
+export default function AdminReport({ data }) {
+
+    function exportToPDF() {
+        const element = document.getElementById("report-admin-summary");
+        html2pdf().from(element).save("report.pdf");
+    };
+
+    return (
+        <div>
+            <button onClick={exportToPDF}> Lưu báo cáo </button>
+            <div id='report-admin-summary' style={{
+                color: 'black',
+                fontWeight: 'bold',
+                background: 'white',
+                alignItems: 'center',
+                textAlign: 'center'
+            }
+            }>
+                <h1>Báo cáo: {data.title}</h1>
+                <p>Ngày: {data.date}</p>
+                <ul>
+                    {data.items.map((item, index) => (
+                        <li key={index}>
+                            {item.assignee} - {item.priority} - {item.summary} - {item.status}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+
+        </div>
+    );
+
+}

frontend/src/organisms/NewsSection.js

@@ -9,6 +9,13 @@ function NewsSection() {
     const [feeds, setFeeds] = useState([]); // Lưu danh sách bài đăng
     const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu
     
+    function truncateText(text, maxLength = 100) {
+        if (text.length <= maxLength) {
+            return text;
+        }
+        return text.slice(0, maxLength) + '...';
+    }
+
     useEffect(() => {
         const fetchFeeds = async () => {
             try {
@@ -42,7 +49,7 @@ function NewsSection() {
             {Array.from(feeds).map((feed, idx) => (
                 <Col key={idx}>
                     <NewsItem title={feed.title}
-                        text={feed.description}
+                        text={truncateText(feed.description)}
                         imageSrc={feed.image_url}
                         // feedHref={feed.feedHref}
                         feedHref={'/news?id='+feed.id} //demo

frontend/src/organisms/PieChartComponent.js

@@ -0,0 +1,50 @@
+import * as Plot from "@observablehq/plot";
+import { Card } from "react-bootstrap";
+import React, {useRef, useEffect} from "react";
+
+
+const PieChartComponent = ({ tasks }) => {
+    const chartRef = useRef();
+
+    useEffect(() => {
+        if (chartRef.current) {
+            while (chartRef.current.firstChild) {
+                chartRef.current.removeChild(chartRef.current.firstChild);
+            }
+
+            const priorityCounts = tasks.reduce((acc, task) => {
+                acc[task.priority] = (acc[task.priority] || 0) + 1;
+                return acc;
+            }, {});
+
+            const data = Object.entries(priorityCounts).map(([priority, count]) => ({ priority, count }));
+            
+            const chart = Plot.plot({
+                marks: [
+                    Plot.barY(data, {
+                        x: "priority",
+                        y: "count",
+                        fill: "priority",
+                        stroke: "white",
+                        title: d => `${d.priority}: ${d.count}`,
+                        r: "count"
+                    })
+                ],
+                height: 500,
+                width: 600,
+            });
+            chartRef.current.append(chart);
+        }
+    }, [tasks]);
+
+    return (
+        <Card className="card-report card-nospan">
+            <Card.Body >
+                <Card.Title>Task Priority Distribution</Card.Title>
+                <div ref={chartRef} className="d-flex justify-content-center align-items-center" />
+            </Card.Body>
+        </Card>
+    );
+};
+
+export default PieChartComponent;

frontend/src/organisms/StackedBarChartComponent.js

@@ -0,0 +1,59 @@
+import * as Plot from "@observablehq/plot";
+import { Card } from "react-bootstrap";
+import React, {useRef, useEffect} from "react";
+
+const StackedBarChartComponent = ({ tasks }) => {
+    const chartRef = useRef();
+
+    useEffect(() => {
+        if (chartRef.current) {
+            while (chartRef.current.firstChild) {
+                chartRef.current.removeChild(chartRef.current.firstChild);
+            }
+
+            const data = tasks.reduce((acc, task) => {
+                // Tìm object có cùng assignee và status trong accumulator
+                const existing = acc.find(
+                    item => item.assignee === task.assignee && item.status === task.status
+                );
+            
+                if (existing) {
+                    // Nếu đã tồn tại, cộng thêm vào count
+                    existing.count += 1;
+                } else {
+                    // Nếu chưa tồn tại, thêm một object mới vào accumulator
+                    acc.push({ assignee: task.assignee, status: task.status, count: 1 });
+                }
+            
+                return acc;
+            }, []).sort((a, b) => a.status.length - b.status.length);
+
+            const chart = Plot.plot({
+                marks: [
+                    Plot.barY(data, {
+                        x: "assignee",
+                        y: "count",
+                        fill: "status",
+                        sort: { x: "y", reverse: true },
+                        stack: true,
+                    })
+                ],
+                height: 400,
+                width: 600,
+                color: { legend: true },
+            });
+            chartRef.current.append(chart);
+        }
+    }, [tasks]);
+
+    return (
+        <Card className="card-report card-nospan ">
+            <Card.Body>
+                <Card.Title>Task Distribution by Assignee and Status</Card.Title>
+                <div ref={chartRef} className="d-flex justify-content-center align-items-center" />
+            </Card.Body>
+        </Card>
+    );
+};
+
+export default StackedBarChartComponent;

frontend/src/organisms/SummaryReport.js

@@ -0,0 +1,48 @@
+import { Button, Container, Row, Col } from "react-bootstrap";
+import html2pdf from "html2pdf.js";
+import dataSource from '../data/data.json';
+import PieChartComponent from "./PieChartComponent";
+import StackedBarChartComponent from "./StackedBarChartComponent";
+
+function exportToPDF() {
+    const element = document.getElementById("report-admin-summary");
+    html2pdf().from(element).save("report.pdf");
+};
+
+export default function SummaryReport() {
+    return (
+        <Container className="d-flex align-items-center justify-content-center p-4">
+            <Row className="justify-content-center">
+                <Col xs='4' className="my-5">
+                    <Button variant="primary" onClick={exportToPDF}>
+                        Xuất báo cáo
+                    </Button>
+                </Col>
+                <Col xs='12'>
+                    <div id="report-admin-summary"
+                        style={{
+                            color: 'black',
+                            fontWeight: 'bold',
+                            background: 'white',
+                            alignItems: 'center',
+                            textAlign: 'center',
+                            padding: '50px',
+                        }}
+                    >
+                        <h1 className="my-3">Demo report</h1>
+                        <Row>
+                            <Col xs='12' className="my-5">
+                                <PieChartComponent tasks={dataSource.tasks} />
+                            </Col>
+                            <Col xs='12' className="my-5">
+                                <StackedBarChartComponent tasks={dataSource.tasks} />
+                            </Col>
+                        </Row>
+                    </div>
+                </Col>
+            </Row>
+
+
+        </Container>
+    );
+}

frontend/src/pages/AdminFeedPage.js

@@ -1,22 +0,0 @@
-import { Container, Row, Col } from "react-bootstrap";
-import AdminTemplate from "../templates/AdminTemplate";
-
-export default function AdminFeedPage() {
-
-    return (
-        <AdminTemplate content={
-            (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
-                    <Row>
-                        <Col xs={12}>
-                            <h1>This is a demo feed page</h1>
-                        </Col>
-                        <Col xs={12}>
-                            <h3>In the future, we hope to view list of feed, add, edit or remove feeds.</h3>
-                        </Col>
-                    </Row>
-                </Container>
-            )
-        } />
-    );
-}

frontend/src/pages/AdminMenuPage.js

@@ -1,21 +0,0 @@
-import { Container, Row, Col } from 'react-bootstrap';
-import AdminTemplate from "../templates/AdminTemplate";
-
-export default function AdminMenuPage() {
-    return (
-        <AdminTemplate content={
-            (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
-                    <Row>
-                        <Col xs={12}>
-                            <h1>This is a demo menu page</h1>
-                        </Col>
-                        <Col xs={12}>
-                            <h3>In the future, the menu should be retrieve from master-list, and branch admins can decide which item is available at this branch</h3>
-                        </Col>
-                    </Row>
-                </Container>
-            )
-        } />
-    );
-}

frontend/src/pages/CartPage.js

@@ -1,78 +0,0 @@
-import BasicTemplate from "../templates/BasicTemplate";
-import { Container, Row, Col, Card, Button } from "react-bootstrap";
-import { useState, useEffect } from "react";
-import DataStorage from "../organisms/DataStorage";
-
-export default function CartPage() {
-
-    const [cartItems, setCartItems] = useState([]);
-
-    useEffect(() => {
-        // Lấy giỏ hàng từ sessionStorage
-        const cart = JSON.parse(DataStorage.get('cart')) || {};
-
-        // Chuyển cart thành mảng chứa các món có số lượng > 0
-        const items = Object.entries(cart).map(([_, item]) => ({
-            name: item.name,
-            amount: item.amount,
-            imageSrc: item.imageSrc,
-            price: item.price
-          }));
-        
-        console.log(items);
-        setCartItems(items);
-    }, []);
-
-    return (
-        <BasicTemplate content={
-            (
-                <Container className="d-flex align-items-center justify-content-center my-5" style={{ minHeight: '70vh' }}>
-                    {cartItems.length > 0 ? (
-                        <div className="text-center">
-                            <h2 className="text-center mb-4">Giỏ hàng của bạn</h2>
-                            <Row className="g-3">
-                                {cartItems.map((item, idx) => (
-                                    <Col md={12} key={idx} className="m-3">
-                                        <Card className="shadow-sm" style={{ display: 'flex', flexDirection: 'row' }}>
-                                            <Card.Img
-                                                variant="left"
-                                                src={item.imageSrc}
-                                                style={{ width: '150px', objectFit: 'cover' }}
-                                            />
-                                            <Card.Body>
-                                                <Row xs={4} >
-                                                    <Col className="d-flex align-items-center justify-content-center">
-                                                    <Card.Title>{item.name}</Card.Title>
-                                                    </Col>
-                                                    <Col className="d-flex align-items-center justify-content-center">
-                                                    <Card.Text>Đơn giá: {item.price} VND</Card.Text>
-                                                    </Col>
-                                                    <Col className="d-flex align-items-center justify-content-center">
-                                                    <Card.Text>Số lượng: {item.amount}</Card.Text>
-                                                    </Col>
-                                                    <Col className="d-flex align-items-center justify-content-center">
-                                                    <Card.Text>Tổng cộng: {item.price * item.amount} VND</Card.Text>
-                                                    </Col>
-                                                </Row>
-                                            </Card.Body>
-                                        </Card>
-                                    </Col>
-                                ))}
-                            </Row>
-                            <Button as='a' href='/payment' className='m-3'>
-                            Thanh toán
-                            </Button>
-                            <Button as='a' href='/menu' className="m-3">
-                            Quay lại menu</Button>
-                        </div>
-                    ) : (
-                        <div className="text-center">
-                            <p className="text-center my-3">Giỏ hàng của bạn hiện đang trống.</p>
-                            <Button as='a' href='/menu'>Xem menu</Button>
-                        </div>
-                    )}
-                </Container>
-            )
-        } />
-    )
-}

frontend/src/pages/admin-pages/AdminBranchesEditPage.js

@@ -0,0 +1,181 @@
+import { Container, Row, Col, Card, Form, Image, Alert, Button } from "react-bootstrap";
+import AdminTemplate from "../../templates/AdminTemplate";
+import { useSearchParams } from 'react-router-dom';
+import axios from "axios";
+import DataStorage from "../../organisms/DataStorage";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function AdminBranchEditPage() {
+
+    const [error, setError] = useState("");
+    const [searchParams] = useSearchParams();
+    const storeId = searchParams.get('id') || null;
+
+    const [storeDetail, setStoreItem] = useState({
+        name:'',
+        location:'',
+        image_url:''
+    });
+    const [initialUrl, setInitialUrl] = useState("");
+    const [initialTitle, setInitialTitle] = useState("");
+    const [initialDesc, setInitialDesc] = useState("");
+    // const [loading, setLoading] = useState(true);
+    const [isChanged, setChanged] = useState(false);
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    const checkChange = () => {
+        if (storeDetail.name.trim() !== initialTitle.trim()
+            || storeDetail.location.trim() !== initialDesc.trim()
+            || storeDetail.image_url.trim() !== initialUrl.trim()) {
+            setChanged(true);
+        } else {
+            setChanged(false);
+        }
+    }
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setStoreItem({ ...storeDetail, [name]: value });
+        checkChange();
+    };
+
+    const handleAvatarUrlChange = (e) => {
+        const url = e.target.value;
+        setStoreItem((prevData) => ({
+            ...prevData,
+            image_url: url // Cập nhật URL ảnh
+        }));
+        setChanged(true);
+    };
+
+    useEffect(() => {
+        if (storeId) {
+            axios.get(process.env.REACT_APP_API_URL + `/branchs/${storeId}`)
+                .then((response) => {
+                    setStoreItem(response.data);
+                    // setLoading(false);
+                    setInitialTitle(response.data.name);
+                    setInitialDesc(response.data.location);
+                    setInitialUrl(response.data.image_url);
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        }
+    }, [storeId]);
+
+    const handleSubmit = () => {
+        const submit_data = {
+            'name': storeDetail.name,
+            'location': storeDetail.location,
+            'image_url': storeDetail.image_url
+        }
+        if (storeId) {
+            axios.patch(process.env.REACT_APP_API_URL + `/branchs/${storeId}`, submit_data)
+                .then((response) => {
+                    // setFeedItem(response.data);
+                    // // setLoading(false);
+                    // setInitialDesc(response.data.description);
+                    // setInitialTitle(response.data.title);
+                    // setChanged(false);
+                    navigate('/admin-branchs-list');
+                    // window.location.reload();
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        } else {
+            axios.post(process.env.REACT_APP_API_URL + `/branchs`, submit_data)
+            .then((response) => {
+                navigate('/admin-branchs-list');
+            })
+            .catch((error) => {
+                setError(JSON.stringify(error));
+            })
+        }
+    }
+
+    return (
+        <AdminTemplate content={
+            (
+                <Container fluid className="d-flex align-items-center justify-content-center mt-5">
+                    <Row className="align-items-center">
+                        {/* <Col xs={1} md={2}></Col> */}
+                        <Col>
+                            <Card style={{ width: '100%' }} className='justify-content-center'>
+                                <Card.Header>
+                                    <Card.Title className='mt-1 text-center'>{storeId ? 'Chỉnh sửa thông tin chi nhánh' : 'Tạo chi nhánh'}</Card.Title>
+                                </Card.Header>
+                                <Card.Body>
+
+                                    <Form>
+                                        {error && <Alert variant="danger">{error}</Alert>}
+                                        <Row className="mb-3">
+                                            <Col xs={12} className="text-center mb-3">
+                                                {/* Hiển thị ảnh từ URL */}
+                                                <Image
+                                                    src={storeDetail.image_url} // Hiển thị ảnh đại diện từ URL
+                                                    alt="Ảnh mô tả"
+                                                    width="auto"
+                                                    height={400}
+                                                    className="mb-3"
+                                                />
+                                                <Form.Group controlId="formImageUrl">
+                                                    <Form.Label>URL ảnh mô tả</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="Nhập URL ảnh"
+                                                        value={storeDetail.image_url || ''}
+                                                        onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
+                                                    />
+                                                </Form.Group>
+                                            </Col>
+                                            <Col xs={12} className="mb-3">
+                                                <Form.Group controlId="formTitle">
+                                                    <Form.Label>Tên chi nhánh</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        name="name"
+                                                        placeholder={storeId ? 'Đang tải dữ liệu...' : 'Tên chi nhánh'}
+                                                        value={storeDetail.name || ''}
+                                                        onChange={handleChange}
+                                                    />
+                                                </Form.Group>
+                                            </Col>
+                                        </Row>
+
+                                        <Form.Group controlId="formText" className="mb-3">
+                                            <Form.Label>Địa chỉ</Form.Label>
+                                            <Form.Control
+                                                as="textarea"
+                                                name="location"
+                                                placeholder={storeId ? 'Đang tải dữ liệu...' : 'Địa chỉ'}
+                                                rows={5}
+                                                value={storeDetail.location || ''}
+                                                onChange={handleChange}
+                                            />
+                                        </Form.Group>
+
+                                        <Button variant="primary" type="button" disabled={!isChanged} onClick={handleSubmit}>
+                                            {storeId ? 'Cập nhật' : 'Tạo mới'}
+                                        </Button>
+                                    </Form>
+                                </Card.Body>
+                            </Card>
+
+                        </Col>
+                        {/* <Col xs={1} md={2}></Col> */}
+                    </Row>
+                </Container>
+            )
+        } />
+    )
+}

frontend/src/pages/admin-pages/AdminBranchesPage.js

@@ -0,0 +1,129 @@
+import { Container, Col, Row, Button, Modal } from 'react-bootstrap';
+import StoreItem from '../../molecules/StoreItem';
+import axios from 'axios';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DataStorage from '../../organisms/DataStorage';
+import AdminTemplate from '../../templates/AdminTemplate';
+
+export default function AdminBranchPage() {
+
+    const [stores, setStores] = useState([]); // Lưu danh sách chi nhánh
+    const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu
+    const [selectedStore, setSelectedStore] = useState(null);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    useEffect(() => {
+        // Gọi API lấy danh sách chi nhánh
+        const fetchBranches = async () => {
+            try {
+                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
+                setStores(response.data); // Lưu dữ liệu vào state
+                setLoading(false); // Đặt loading thành false khi hoàn tất
+                CacheStorage.set('stores', JSON.stringify(Object(response.data)));
+            } catch (error) {
+                console.error('Error fetching branches:', error);
+                setLoading(false); // Đặt loading thành false nếu lỗi
+            }
+        };
+        fetchBranches();
+    }, []);
+
+    const handleShowDeleteModal = (feedId) => {
+        setSelectedStore(feedId);
+        setShowDeleteModal(true);
+    };
+
+    // Đóng modal
+    const handleCloseDeleteModal = () => {
+        setShowDeleteModal(false);
+        setSelectedStore(null);
+    };
+
+    function truncateText(text, maxLength = 120) {
+        if (text.length <= maxLength) {
+            return text;
+        }
+        return text.slice(0, maxLength) + '...Xem thêm';
+    }
+
+    let storesContent;
+
+    if (loading) {
+        storesContent = (<p>Đang tải danh sách chi nhánh...</p>); // Hiển thị thông báo khi đang tải dữ liệu
+    } else {
+        storesContent = (<Col xs={12} md={9}>
+            <Container fluid>
+                <Row xs={1} md={2} xl={3} className="g-4">
+                    {Array.from(stores).map((store, idx) => (
+                        <Col key={idx}>
+                            <StoreItem storeName={store.name}
+                                address={truncateText(store.location)}
+                                imageSrc={store.image_url}
+                                deleteable={true}
+                                delButtonCallback={(e) => {
+                                    e.preventDefault();
+                                    handleShowDeleteModal(store.id);
+                                }}
+                                storeHref={`/admin-branchs?id=${store.id}`}
+                            >
+                            </StoreItem>
+                        </Col>
+                    ))}
+                </Row>
+            </Container>
+        </Col>)
+    }
+
+    const confirmDelete = async () => {
+        if (selectedStore) {
+            axios.delete(process.env.REACT_APP_API_URL + `/branchs/${selectedStore}`)
+                .then((response) => {
+                    handleCloseDeleteModal(); // Đóng modal sau khi xóa
+                    window.location.reload(); // Load lại trang
+                })
+                .catch((error) => console.error("Xóa bài đăng thất bại:", error))
+        }
+    };
+
+    return (
+        <AdminTemplate content={
+            (<Container fluid className="text-center justify-content-center align-items-center my-5" style={{ maxWidth: "90%" }}>
+                {/* Modal xác nhận xóa */}
+                <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Xác nhận xóa</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>Bạn có chắc chắn muốn xóa chi nhánh này không?</Modal.Body>
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={handleCloseDeleteModal}>
+                            Hủy
+                        </Button>
+                        <Button variant="danger" onClick={confirmDelete}>
+                            Xóa
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+
+                <h1 className='mb-5'>Danh sách các chi nhánh</h1>
+                <Row className='my-5 justify-content-center align-items-center'>
+                    <Col xs={8} md={4} lg={2}>
+                        <Button as='a' href={`/admin-branchs`}>
+                            Bổ sung chi nhánh mới
+                        </Button>
+                    </Col>
+                </Row>
+                <Row className="align-items-center">
+                    {storesContent}
+                </Row>
+            </Container>)
+        } />
+    );
+}

frontend/src/pages/admin-pages/AdminFeedPage.js

@@ -0,0 +1,167 @@
+import { Container, Row, Col, Card, Button, Modal } from "react-bootstrap";
+import AdminTemplate from "../../templates/AdminTemplate";
+import axios from 'axios';
+import { useNavigate } from "react-router-dom";
+import DataStorage from "../../organisms/DataStorage";
+import { useEffect, useState } from "react";
+
+export default function AdminFeedPage() {
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    const [feeds, setFeeds] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [selectedFeedId, setSelectedFeedId] = useState(null);
+
+    // Mở modal và lưu trữ id của bài đăng cần xóa
+    const handleShowDeleteModal = (feedId) => {
+        setSelectedFeedId(feedId);
+        setShowDeleteModal(true);
+    };
+
+    // Đóng modal
+    const handleCloseDeleteModal = () => {
+        setShowDeleteModal(false);
+        setSelectedFeedId(null);
+    };
+
+    const confirmDelete = async () => {
+        if (selectedFeedId) {
+            axios.delete(process.env.REACT_APP_API_URL + `/feeds/${selectedFeedId}`)
+                .then((response) => {
+                    handleCloseDeleteModal(); // Đóng modal sau khi xóa
+                    window.location.reload(); // Load lại trang
+                })
+                .catch((error) => console.error("Xóa bài đăng thất bại:", error))
+        }
+    };
+
+    useEffect(() => {
+        axios.get(process.env.REACT_APP_API_URL + '/feeds?limit=100')
+            .then((response) => {
+                setFeeds(response.data.data);
+                setLoading(false);
+            })
+            .catch((error) => {
+                console.log(error);
+            })
+    }, []);
+
+    function truncateText(text, maxLength = 120) {
+        if (text.length <= maxLength) {
+            return text;
+        }
+        return text.slice(0, maxLength) + '...Xem thêm';
+    }
+
+    function formatDate(isoDateString) {
+        const date = new Date(isoDateString);
+        const options = {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        };
+        return date.toLocaleDateString('vi-VN', options);
+    }
+
+    let feedContent;
+
+    if (loading) {
+        feedContent = (<p>Đang tải danh sách bài đăng...</p>);
+    } else {
+        feedContent = (
+            <Container fluid className="d-flex text-center align-items-center justify-content-center">
+                <Row style={{ maxWidth: "90vw" }} className="d-flex align-items-center justify-content-center text-center">
+
+                    <Col xs="12" md='8' className="text-center">
+                        <h2 className="text-center mb-4">Danh sách các bài đăng trên trang chủ</h2>
+                    </Col>
+
+                    <Col xs="12" md='4' className="text-center mb-4">
+                        <Button className="m-3" as='a' href='/admin-news'>
+                            Tạo bài đăng mới
+                        </Button>
+                    </Col>
+
+                    {feeds.map((item, idx) => (
+                        <Col xs="12" md="10" lg="8" key={idx} className="m-3 text-center">
+                            <Card as='a' href={`/admin-news?id=${item.id}`} className="shadow-sm" style={{ display: 'flex', flexDirection: 'row', height: '200px' }}>
+                                <Card.Img
+                                    variant="left"
+                                    src={item.image_url}
+                                    style={{ width: '150px', objectFit: 'cover' }}
+                                />
+                                <Card.Body>
+                                    <Row style={{ height: '100px' }}>
+                                        <Col xs={12} md={12} className="d-flex align-items-center">
+                                            <Card.Title>{item.title}</Card.Title>
+                                        </Col>
+                                        <Col xs={12} md={12} className="d-flex align-items-center my-3">
+                                            <Card.Text>{truncateText(item.description)}</Card.Text>
+                                        </Col>
+                                        <Col xs={12} md={6} className="d-flex align-items-center">
+                                            <Card.Text>Tác giả: {item.author_id ? item.author_id : 'Không rõ'}</Card.Text>
+                                        </Col>
+                                        <Col xs={12} md={6} className="d-flex align-items-center">
+                                            <Card.Text>Thời gian tạo: {formatDate(item.create_at)}</Card.Text>
+                                        </Col>
+                                        <Col xs={12} className="d-flex justify-content-end">
+                                            <Button
+                                                variant="outline-danger"
+                                                size="sm"
+                                                onClick={(e) => {
+                                                    e.preventDefault(); // Ngăn link href
+                                                    handleShowDeleteModal(item.id);
+                                                }}
+                                            >
+                                                Xóa
+                                            </Button>
+                                        </Col>
+                                    </Row>
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                    ))}
+                </Row>
+            </Container>
+        );
+    }
+
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
+
+                    {/* Modal xác nhận xóa */}
+                    <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
+                        <Modal.Header closeButton>
+                            <Modal.Title>Xác nhận xóa</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>Bạn có chắc chắn muốn xóa bài đăng này không?</Modal.Body>
+                        <Modal.Footer>
+                            <Button variant="secondary" onClick={handleCloseDeleteModal}>
+                                Hủy
+                            </Button>
+                            <Button variant="danger" onClick={confirmDelete}>
+                                Xóa
+                            </Button>
+                        </Modal.Footer>
+                    </Modal>
+
+                    {feedContent}
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/{AdminLoginPage.js → admin-pages/AdminLoginPage.js}

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { Alert, Container, Form, Row, Col, Button, Card } from "react-bootstrap";
-import AdminTemplate from "../templates/AdminTemplate";
+import AdminTemplate from "../../templates/AdminTemplate";
 import { useNavigate } from "react-router-dom";
 import axios from 'axios';
-import jwtDecoder from "../organisms/jwtDecoder";
-import DataStorage from "../organisms/DataStorage";
+import jwtDecoder from "../../organisms/jwtDecoder";
+import DataStorage from "../../organisms/DataStorage";
 
 export default function AdminLoginPage() {
 

frontend/src/pages/admin-pages/AdminMenuEditPage.js

@@ -0,0 +1,252 @@
+import { useState, useEffect } from 'react';
+import { Modal, Button, Container, Row, Col, Card, Form, Alert, Image } from 'react-bootstrap';
+import AdminTemplate from "../../templates/AdminTemplate";
+import DataStorage from '../../organisms/DataStorage';
+import axios from 'axios';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+export default function AdminMenuEditPage() {
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    const [searchParams] = useSearchParams();
+    const selectedItem = searchParams.get('id') || null;
+
+    const [error, setError] = useState("");
+    // const [loading, setLoading] = useState(true);
+    const [itemDetails, setItemDetails] = useState({
+        id: '',
+        item_name: '',
+        item_type: '1',
+        price: '',
+        description: '',
+        image_url: ''
+    });
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+    const handleShowDeleteModal = () => {
+        setShowDeleteModal(true);
+    }
+
+    const handleCloseDeleteModal = () => {
+        setShowDeleteModal(false);
+    }
+
+    const handleSubmit = async () => {
+        itemDetails.price = Number(itemDetails.price);
+        itemDetails.item_type = Number(itemDetails.item_type);
+        if (selectedItem) {
+            axios.patch(process.env.REACT_APP_API_URL + `/menu-items/${selectedItem}`, itemDetails)
+                .then((response) => {
+                    navigate('/admin-menu');
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        } else {
+            axios.post(process.env.REACT_APP_API_URL + `/menu-items`, itemDetails)
+                .then((response) => {
+                    navigate('/admin-menu');
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        }
+    }
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setItemDetails((prevDetails) => ({
+            ...prevDetails,
+            [name]: value, // Sử dụng tên của field để cập nhật động
+        }));
+    };
+
+    const handleAvatarUrlChange = (e) => {
+        const url = e.target.value;
+        setItemDetails((prevData) => ({
+            ...prevData,
+            image_url: url // Cập nhật URL ảnh
+        }));
+        console.log(url);
+    };
+
+    const confirmDelete = async () => {
+        if (selectedItem) {
+            axios.delete(process.env.REACT_APP_API_URL + `/menu-items/${selectedItem}`)
+                .then((response) => {
+                    handleCloseDeleteModal();
+                    navigate('/admin-menu');
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        }
+    }
+
+    useEffect(() => {
+        const fetchItemDetail = async () => {
+            if (selectedItem) {
+                try {
+                    const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items/${selectedItem}`);
+                    setItemDetails(response.data);
+                    // setLoading(false);
+                } catch (error) {
+                    setError(JSON.stringify(error));
+                }
+            } else {
+                setItemDetails(
+                    {
+                        id: '',
+                        item_name: '',
+                        item_type: '1',
+                        price: '',
+                        description: '',
+                        image_url: ''
+                    }
+                )
+            }
+        }
+        fetchItemDetail();
+    }, [selectedItem])
+
+    return (
+        <AdminTemplate content={(
+            <Container className='text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
+                {/* Modal xác nhận xóa */}
+                <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Xác nhận xóa</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>Bạn có chắc chắn muốn xóa món này khỏi menu không?</Modal.Body>
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={handleCloseDeleteModal}>
+                            Hủy
+                        </Button>
+                        <Button variant="danger" onClick={confirmDelete}>
+                            Xóa
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+
+                <Row className="align-items-center">
+                    {/* <Col xs={1} md={2}></Col> */}
+                    <Col>
+                        <Card style={{ width: '100%' }} className='justify-content-center'>
+                            <Card.Header>
+                                <Card.Title className='mt-1 text-center'>{selectedItem ? 'Chỉnh sửa thông tin chi nhánh' : 'Tạo chi nhánh'}</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+
+                                <Form>
+                                    {error && <Alert variant="danger">{error}</Alert>}
+                                    <Row className="mb-3">
+                                        <Col xs={12} className="text-center mb-3">
+                                            {/* Hiển thị ảnh từ URL */}
+                                            <Image
+                                                src={itemDetails.image_url || ''} // Hiển thị ảnh đại diện từ URL
+                                                alt="Ảnh món"
+                                                style={{ width: "100%", maxWidth: "100%", height: "auto" }}
+                                                className="mb-3"
+                                            />
+                                            <Form.Group controlId="formImageUrl">
+                                                <Form.Label>URL ảnh món</Form.Label>
+                                                <Form.Control
+                                                    type="text"
+                                                    placeholder="Nhập URL ảnh"
+                                                    value={itemDetails.image_url || ''}
+                                                    onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
+                                                />
+                                            </Form.Group>
+                                        </Col>
+                                        <Col xs={12} className="mb-3">
+                                            <Form.Group controlId="formName">
+                                                <Form.Label>Tên món</Form.Label>
+                                                <Form.Control
+                                                    type="text"
+                                                    name="item_name"
+                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Tên món'}
+                                                    value={itemDetails.item_name || ''}
+                                                    onChange={handleChange}
+                                                />
+                                            </Form.Group>
+                                        </Col>
+                                        <Col xs={12} className="mb-3">
+                                            <Form.Group controlId="formName">
+                                                <Form.Label>Id món</Form.Label>
+                                                <Form.Control
+                                                    type="text"
+                                                    name="id"
+                                                    disabled={selectedItem ? true : false}
+                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Mã id món'}
+                                                    value={itemDetails.id || ''}
+                                                    onChange={handleChange}
+                                                />
+                                            </Form.Group>
+                                        </Col>
+                                        <Col xs={12} className="mb-3">
+                                            <Form.Group controlId="formText" className="mb-3">
+                                                <Form.Label>Mô tả món</Form.Label>
+                                                <Form.Control
+                                                    as="textarea"
+                                                    name="description"
+                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Mô tả món'}
+                                                    rows={3}
+                                                    value={itemDetails.description || ''}
+                                                    onChange={handleChange}
+                                                />
+                                            </Form.Group>
+                                        </Col>
+
+                                        <Col xs={12} className='mb-3'>
+                                            <Form.Group controlId="formType" className="mb-3">
+                                                <Form.Label>Chọn danh mục món ăn</Form.Label>
+                                                <Form.Select name='item_type' value={itemDetails.item_type || '1'} onChange={handleChange}>
+                                                    <option value="1">Món chính</option>
+                                                    <option value="2">Tráng miệng</option>
+                                                    <option value="3">Đồ uống</option>
+                                                </Form.Select>
+                                            </Form.Group>
+                                        </Col>
+
+                                        <Col xs={12} className='mb-5'>
+                                            <Form.Group>
+                                                <Form.Label>Nhập giá tiền</Form.Label>
+                                                <Form.Control
+                                                    type='text'
+                                                    name='price'
+                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Giá món'}
+                                                    value={itemDetails.price || ''}
+                                                    onChange={handleChange}
+                                                />
+                                            </Form.Group>
+                                        </Col>
+
+                                        <Col xs={12} className='mb-3'>
+                                            <Button variant="primary" type="button" className='mx-5' onClick={handleSubmit}>
+                                                {selectedItem ? 'Cập nhật' : 'Tạo mới'}
+                                            </Button>
+                                            {selectedItem ?
+                                                (<Button variant="danger" type="button" className='mx-5' onClick={handleShowDeleteModal}>
+                                                    Xóa
+                                                </Button>) : (<></>)
+                                            }
+                                        </Col>
+                                    </Row>
+                                </Form>
+                            </Card.Body>
+                        </Card>
+
+                    </Col>
+                    {/* <Col xs={1} md={2}></Col> */}
+                </Row>
+            </Container>
+        )} />
+    )
+}

frontend/src/pages/admin-pages/AdminMenuPage.js

@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react';
+import { Button, Container, Row, Col, Tab, Tabs, Alert } from 'react-bootstrap';
+import AdminTemplate from "../../templates/AdminTemplate";
+import DataStorage from '../../organisms/DataStorage';
+import axios from 'axios';
+import MenuItem from '../../molecules/MenuItem';
+import { useNavigate } from 'react-router-dom';
+
+const categoryMapper = [
+    { itemType: 1, category: 'Món chính' },
+    { itemType: 2, category: 'Đồ uống' },
+    { itemType: 3, category: 'Tráng miệng' },
+];
+
+export default function AdminMenuPage() {
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [menuItems, setMenuItems] = useState({});
+    const [key, setKey] = useState(0);
+
+    function organizeMenuItemsByType(menuData) {
+        // Lấy ra tất cả menu_item từ array ban đầu
+        const menuItems = menuData.map(item => item);
+
+        // Tạo một object để nhóm menu_item theo item_type, khởi tạo các mảng rỗng cho mỗi item_type từ categoryMapper
+        const organizedItems = categoryMapper.reduce((acc, { itemType }) => {
+            acc[itemType] = [];
+            return acc;
+        }, {});
+
+        // Thêm menu_item vào organizedItems theo item_type
+        menuItems.forEach(menuItem => {
+            const type = menuItem.item_type;
+
+            // Đưa menu_item vào array của item_type tương ứng
+            if (organizedItems[type]) {
+                organizedItems[type].push(menuItem);
+            }
+        });
+
+        return organizedItems;
+    }
+
+    useEffect(() => {
+        const fetchMenuItems = async () => {
+            try {
+                let menuItemsByType = {};
+                // Gọi API để lấy món theo itemType
+                const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?limit=100`);
+                // Lưu danh sách món theo itemType
+                console.log('Response', response.data.data);
+                menuItemsByType = organizeMenuItemsByType(response.data.data);
+
+                console.log(menuItemsByType);
+                setMenuItems(menuItemsByType);
+                setLoading(false);
+            } catch (error) {
+                setError(JSON.stringify(error));
+                setLoading(false);
+            }
+        }
+        fetchMenuItems()
+    }, [])
+
+
+    let menuContent;
+
+    if (loading) {
+        menuContent = (<p>Đang tải thực đơn...</p>);
+    } else {
+        menuContent = (<Tabs
+            id="controlled-tab-example"
+            activeKey={key}
+            onSelect={(k) => setKey(k)}
+            className="mb-3 custom-tab"
+        >
+            {categoryMapper.map((category, index) => (
+                <Tab eventKey={index} title={category.category}>
+                    <Container fluid className='my-5'>
+                        <Row md={3} className="g-4">
+                            {menuItems[category.itemType]?.map((item, idx) => (
+                                <Col key={item.id}>
+                                    <div onClick={() => navigate(`/admin-menu-edit?id=${item.id}`)}>
+                                        <MenuItem
+                                            dishName={item.item_name}
+                                            description={item.description}
+                                            imageSrc={item.image_url}
+                                        />
+                                    </div>
+                                </Col>
+                            ))}
+                        </Row>
+                    </Container>
+                </Tab>
+            ))}
+        </Tabs>);
+    }
+
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
+
+                    {error && <Alert variant="danger">{error}</Alert>}
+
+                    <h1 className='mb-5'>Menu</h1>
+                    <Row className='my-5 justify-content-center align-items-center'>
+                        <Col xs={8} md={4} lg={2}>
+                            <Button onClick={() => navigate(`/admin-menu-edit`)}>
+                                Bổ sung món mới
+                            </Button>
+                        </Col>
+                    </Row>
+                    <Row className="align-items-center">
+                        {menuContent}
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/admin-pages/AdminNewsEditPage.js

@@ -0,0 +1,177 @@
+import { Container, Row, Col, Card, Form, Image, Alert, Button } from "react-bootstrap";
+import AdminTemplate from "../../templates/AdminTemplate";
+import { useSearchParams } from 'react-router-dom';
+import axios from "axios";
+import DataStorage from "../../organisms/DataStorage";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function AdminNewsEditPage() {
+
+    const [error, setError] = useState("");
+    const [searchParams] = useSearchParams();
+    const newsId = Number(searchParams.get('id')) || null;
+
+    const [feedDetail, setFeedItem] = useState({});
+    const [initialUrl, setInitialUrl] = useState("");
+    const [initialTitle, setInitialTitle] = useState("");
+    const [initialDesc, setInitialDesc] = useState("");
+    // const [loading, setLoading] = useState(true);
+    const [isChanged, setChanged] = useState(false);
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    const checkChange = () => {
+        if (feedDetail.title.trim() !== initialTitle.trim()
+            || feedDetail.description.trim() !== initialDesc.trim()
+            || feedDetail.image_url.trim() !== initialUrl.trim()) {
+            setChanged(true);
+        } else {
+            setChanged(false);
+        }
+    }
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFeedItem({ ...feedDetail, [name]: value });
+        checkChange();
+    };
+
+    const handleAvatarUrlChange = (e) => {
+        const url = e.target.value;
+        setFeedItem((prevData) => ({
+            ...prevData,
+            image_url: url // Cập nhật URL ảnh
+        }));
+        setChanged(true);
+    };
+
+    useEffect(() => {
+        if (newsId) {
+            axios.get(process.env.REACT_APP_API_URL + `/feeds/${newsId}`)
+                .then((response) => {
+                    setFeedItem(response.data);
+                    // setLoading(false);
+                    setInitialDesc(response.data.description);
+                    setInitialTitle(response.data.title);
+                    setInitialUrl(response.data.image_url);
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        }
+    }, [newsId]);
+
+    const handleSubmit = () => {
+        const submit_data = {
+            'title': feedDetail.title,
+            'description': feedDetail.description,
+            'image_url': feedDetail.image_url
+        }
+        if (newsId) {
+            axios.patch(process.env.REACT_APP_API_URL + `/feeds/${newsId}`, submit_data)
+                .then((response) => {
+                    // setFeedItem(response.data);
+                    // // setLoading(false);
+                    // setInitialDesc(response.data.description);
+                    // setInitialTitle(response.data.title);
+                    // setChanged(false);
+                    navigate('/admin-feed');
+                    // window.location.reload();
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        } else {
+            axios.post(process.env.REACT_APP_API_URL + `/feeds`, submit_data)
+                .then((response) => {
+                    navigate('/admin-feed');
+                })
+                .catch((error) => {
+                    setError(JSON.stringify(error));
+                })
+        }
+    }
+
+    return (
+        <AdminTemplate content={
+            (
+                <Container fluid className="d-flex align-items-center justify-content-center mt-5">
+                    <Row className="align-items-center">
+                        {/* <Col xs={1} md={2}></Col> */}
+                        <Col>
+                            <Card style={{ width: '100%' }} className='justify-content-center'>
+                                <Card.Header>
+                                    <Card.Title className='mt-1 text-center'>{newsId ? 'Chỉnh sửa bài đăng' : 'Tạo bài đăng'}</Card.Title>
+                                </Card.Header>
+                                <Card.Body>
+
+                                    <Form>
+                                        {error && <Alert variant="danger">{error}</Alert>}
+                                        <Row className="mb-3">
+                                            <Col xs={12} className="text-center mb-3">
+                                                {/* Hiển thị ảnh từ URL */}
+                                                <Image
+                                                    src={feedDetail.image_url} // Hiển thị ảnh đại diện từ URL
+                                                    alt="Ảnh bài đăng"
+                                                    width="auto"
+                                                    height={400}
+                                                    className="mb-3"
+                                                />
+                                                <Form.Group controlId="formImageUrl">
+                                                    <Form.Label>URL ảnh bài đăng</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="Nhập URL ảnh"
+                                                        value={feedDetail.image_url || ''}
+                                                        onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
+                                                    />
+                                                </Form.Group>
+                                            </Col>
+                                            <Col xs={12} className="mb-3">
+                                                <Form.Group controlId="formTitle">
+                                                    <Form.Label>Tiêu đề bài đăng</Form.Label>
+                                                    <Form.Control
+                                                        type="text"
+                                                        name="title"
+                                                        placeholder={newsId ? 'Đang tải dữ liệu...' : 'Tiêu đề'}
+                                                        value={feedDetail.title || ''}
+                                                        onChange={handleChange}
+                                                    />
+                                                </Form.Group>
+                                            </Col>
+                                        </Row>
+
+                                        <Form.Group controlId="formText" className="mb-3">
+                                            <Form.Label>Nội dung</Form.Label>
+                                            <Form.Control
+                                                as="textarea"
+                                                name="description"
+                                                placeholder={newsId ? 'Đang tải dữ liệu...' : 'Nội dung'}
+                                                rows={10}
+                                                value={feedDetail.description || ''}
+                                                onChange={handleChange}
+                                            />
+                                        </Form.Group>
+
+                                        <Button variant="primary" type="button" disabled={!isChanged} onClick={handleSubmit}>
+                                            {newsId ? 'Cập nhật' : 'Tạo mới'}
+                                        </Button>
+                                    </Form>
+                                </Card.Body>
+                            </Card>
+
+                        </Col>
+                        {/* <Col xs={1} md={2}></Col> */}
+                    </Row>
+                </Container>
+            )
+        } />
+    )
+}

frontend/src/pages/{AdminOrderPage.js → admin-pages/AdminOrderPage.js}

@@ -1,5 +1,5 @@
 import { Container, Row, Col } from "react-bootstrap";
-import AdminTemplate from "../templates/AdminTemplate";
+import AdminTemplate from "../../templates/AdminTemplate";
 
 export default function AdminOrderPage() {
     return (

frontend/src/pages/{AdminSchedulePage.js → admin-pages/AdminSchedulePage.js}

@@ -1,5 +1,5 @@
 import { Container, Row, Col } from "react-bootstrap";
-import AdminTemplate from "../templates/AdminTemplate";
+import AdminTemplate from "../../templates/AdminTemplate";
 
 export default function AdminSchedulePage() {
     return (

frontend/src/pages/{AdminStaffPage.js → admin-pages/AdminStaffPage.js}

@@ -1,5 +1,5 @@
 import { Container, Row, Col } from "react-bootstrap";
-import AdminTemplate from "../templates/AdminTemplate";
+import AdminTemplate from "../../templates/AdminTemplate";
 
 export default function AdminStaffPage() {
     return (

frontend/src/pages/{AdminSummaryPage.js → admin-pages/AdminSummaryPage.js}

@@ -1,8 +1,10 @@
 import { Container, Row, Col } from "react-bootstrap";
-import AdminTemplate from "../templates/AdminTemplate";
+import AdminTemplate from "../../templates/AdminTemplate";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
-import DataStorage from "../organisms/DataStorage";
+import DataStorage from "../../organisms/DataStorage";
+
+import SummaryReport from "../../organisms/SummaryReport";
 
 export default function AdminSummaryPage() {
 
@@ -18,13 +20,16 @@ export default function AdminSummaryPage() {
         <AdminTemplate content={
             (
                 <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
-                    <Row>
+                    <Row className="align-items-center">
                         <Col xs={12}>
                             <h1>This is a demo summary page</h1>
                         </Col>
                         <Col xs={12}>
                             <h3>In the future, we hope to connect to PowerBI API and show the dashboard</h3>
                         </Col>
+                        <Col xs={12} className='d-flex flex-column align-items-center'>
+                            <SummaryReport/>
+                        </Col>
                     </Row>
                 </Container>
             )

frontend/src/pages/{AdminUserInfoPage.js → admin-pages/AdminUserInfoPage.js}

@@ -1,9 +1,9 @@
-import AdminTemplate from "../templates/AdminTemplate";
+import AdminTemplate from "../../templates/AdminTemplate";
 import { Container, Form, Row, Col, Card, Alert, Button, Image } from "react-bootstrap";
 import React, { useState, useEffect } from "react";
 import validator from "validator";
 import axios from "axios";
-import DataStorage from "../organisms/DataStorage";
+import DataStorage from "../../organisms/DataStorage";
 
 export default function AdminUserInfoPage() {
 

frontend/src/pages/user-pages/CartPage.js

@@ -0,0 +1,217 @@
+import BasicTemplate from "../../templates/BasicTemplate";
+import { Container, Row, Col, Card, Button, Modal, Form } from "react-bootstrap";
+import { useState, useEffect } from "react";
+import CacheStorage from "../../organisms/CacheStorage";
+import DataStorage from "../../organisms/DataStorage";
+import axios from "axios";
+
+export default function CartPage() {
+
+    const [cartItems, setCartItems] = useState([]);
+    const [show, setShow] = useState(false);
+
+    const [branches, setBranches] = useState([]);
+    const defaultSelectedStore = CacheStorage.get('selectedStore') || "";
+    const [selectedStore, setSelectedStore] = useState(defaultSelectedStore);
+    const [loadingBranches, setLoadingBranches] = useState(true);
+    const [address, setAddress] = useState('');
+    // const [loading, setLoading] = useState(true);    
+
+    useEffect(() => {
+        const fetchBranches = async () => {
+            try {
+                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
+                setBranches(response.data); // Lưu dữ liệu vào state
+                setLoadingBranches(false); // Đặt loading thành false khi hoàn tất
+                CacheStorage.set('stores', JSON.stringify(Object(response.data)));
+            } catch (error) {
+                console.error('Error fetching branches:', error);
+                setLoadingBranches(false); // Đặt loading thành false nếu lỗi
+            }
+        };
+        if (CacheStorage.get('stores')) {
+            setBranches(JSON.parse(CacheStorage.get('stores')));
+            setLoadingBranches(false);
+        } else {
+            fetchBranches();
+        }
+    }, [])
+
+    const handleSelectStore = (e) => {
+        setSelectedStore(e.target.value);
+        CacheStorage.set('selectedStore', e.target.value);
+        // setLoading(true);
+    };
+
+    let selectboxContent;
+
+    if (loadingBranches) {
+        selectboxContent = (<p>Đang tải dữ liệu...</p>)
+    } else {
+        selectboxContent = (<Form>
+            <Form.Group controlId="branchSelect">
+                <Form.Label>Chọn chi nhánh:</Form.Label>
+                <Form.Control as="select" onChange={handleSelectStore} value={selectedStore}>
+                    <option value="">-- Chọn chi nhánh --</option>
+                    {branches.map((store) => (
+                        <option key={store.id} value={store.id}>
+                            {store.name + ' - ' + store.location}
+                        </option>
+                    ))}
+                </Form.Control>
+            </Form.Group>
+        </Form>);
+    }
+
+    useEffect(() => {
+        // Lấy giỏ hàng từ sessionStorage
+        const cart = JSON.parse(DataStorage.get('cart')) || {};
+
+        // Chuyển cart thành mảng chứa các món có số lượng > 0
+        const items = Object.entries(cart).map(([id, item]) => ({
+            id: id,
+            name: item.name,
+            amount: item.amount,
+            imageSrc: item.imageSrc,
+            price: item.price
+        }));
+
+        console.log(items);
+        setCartItems(items);
+    }, []);
+
+    const handleShow = () => {
+        setShow(true);
+    }
+
+    const handleClose = () => {
+        setShow(false);
+    }
+
+    const handleSubmit = () => {
+        // tạo order, gửi order && gửi lấy urlpayment
+
+        if (selectedStore === '') {
+            setShow(false);
+        } else {
+
+            // try {
+            //     let orderData;
+
+            //     orderData.order_type = 2;
+            //     orderData.order_items = cartItems.map((item) => { return { menu_id: item.id, quantity: item.amount } })
+            //     const orderResponse = axios.post(process.env.REACT_APP_API_URL + `/branches/${selectedStore}/orders`, {
+            //         headers: {
+            //             Authorization: `Bearer ${DataStorage.get('accessToken')}`,
+            //         },
+            //     })
+
+            //     let paymentData;
+            //     paymentData.orderType='other';
+            //     paymentData.orderDescription=''
+            // } catch (error) {
+            //     console.log('error');
+            // }
+
+            setShow(false);
+        }
+    }
+
+    return (
+        <BasicTemplate content={
+            (
+                <Container className="d-flex align-items-center justify-content-center my-5" style={{ minHeight: '70vh' }}>
+                    <Modal show={show} onHide={handleClose} className="text-center">
+                        <Modal.Header closeButton className="text-center">
+                            <Modal.Title >Xác nhận thanh toán</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            {
+                                (selectedStore !== '' && address !== '' ?
+                                    `Bạn sắp thanh toán ${Object.values(cartItems).reduce((total, item) => { return total + item.price * item.amount; }, 0)} VND qua VNPAY.
+                            Vui lòng xác nhận để chuyển tiếp đến trang thanh toán.` : `Hãy đảm bảo bạn chọn địa điểm giao hàng, và chi nhánh đặt món`
+                                )
+                            }
+                        </Modal.Body>
+                        <Modal.Footer>
+                            <Button variant="primary" onClick={handleSubmit}>
+                                Xác nhận
+                            </Button>
+                            <Button variant='outline-primary' onClick={handleClose}>
+                                Quay lại
+                            </Button>
+                        </Modal.Footer>
+                    </Modal>
+
+                    {cartItems.length > 0 ? (
+                        <Container fluid className="d-flex text-center align-items-center justify-content-center">
+                            <Row style={{ maxWidth: "90vw" }} className="justify-content-center">
+                                <Col xs="12" md="8" lg="8" className="my-5 text-center">
+                                    {selectboxContent}
+                                </Col>
+                                <Col xs="12" md="8" className="my-5 text-center">
+                                    <Form>
+                                        <Form.Group>
+                                            <Form.Label>Chọn địa chỉ giao hàng</Form.Label>
+                                            <Form.Control
+                                                type="text"
+                                                name="address"
+                                                placeholder='Địa chỉ giao hàng'
+                                                value={address || ''}
+                                                onChange={(e) => setAddress(e.target.value)}
+                                            />
+                                        </Form.Group>
+                                    </Form>
+                                </Col>
+                                <Col xs="12" className="text-center">
+                                    <h2 className="text-center mb-4">Giỏ hàng của bạn</h2>
+                                </Col>
+
+                                {cartItems.map((item, idx) => (
+                                    <Col xs="12" md="8" lg="8" key={idx} className="m-3 text-center">
+                                        <Card className="shadow-sm" style={{ display: 'flex', flexDirection: 'row' }}>
+                                            <Card.Img
+                                                variant="left"
+                                                src={item.imageSrc}
+                                                style={{ width: '150px', objectFit: 'cover' }}
+                                            />
+                                            <Card.Body>
+                                                <Row xs={4} className="text-center" style={{ height: '100px' }}>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                        <Card.Title>{item.name}</Card.Title>
+                                                    </Col>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                        <Card.Text>Đơn giá: {item.price} VND</Card.Text>
+                                                    </Col>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                        <Card.Text>Số lượng: {item.amount}</Card.Text>
+                                                    </Col>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                        <Card.Text>Tổng cộng: {item.price * item.amount} VND</Card.Text>
+                                                    </Col>
+                                                </Row>
+                                            </Card.Body>
+                                        </Card>
+                                    </Col>
+                                ))}
+                                <Col xs="12" className="text-center">
+                                    <Button className="m-3" onClick={handleShow}>
+                                        Thanh toán
+                                    </Button>
+                                    <Button as="a" href="/menu" variant="outline-primary" className="m-3">
+                                        Xem menu
+                                    </Button>
+                                </Col>
+                            </Row>
+                        </Container>
+                    ) : (
+                        <div className="text-center">
+                            <p className="text-center my-3">Giỏ hàng của bạn hiện đang trống.</p>
+                            <Button as='a' href='/menu'>Xem menu</Button>
+                        </div>
+                    )}
+                </Container>
+            )
+        } />
+    )
+}

frontend/src/pages/{HomePage.js → user-pages/HomePage.js}

@@ -1,10 +1,10 @@
 // pages/HomePage.js
 // import React, { useState } from 'react';
-import AboutUsSection from '../molecules/AboutUsSection';
-import NewsSection from '../organisms/NewsSection';
-import StoreSection from '../organisms/StoreSection';
-import MenuSection from '../organisms/MenuSection';
-import BasicTemplate from '../templates/BasicTemplate';
+import AboutUsSection from '../../molecules/AboutUsSection';
+import NewsSection from '../../organisms/NewsSection';
+import StoreSection from '../../organisms/StoreSection';
+import MenuSection from '../../organisms/MenuSection';
+import BasicTemplate from '../../templates/BasicTemplate';
 
 function HomePage () {
     // const [isLoggedIn, setIsLoggedIn] = useState(false);

frontend/src/pages/{LoginPage.js → user-pages/LoginPage.js}

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { Alert, Container, Form, Row, Col, Button, Card } from "react-bootstrap";
-import BasicTemplate from "../templates/BasicTemplate";
+import BasicTemplate from "../../templates/BasicTemplate";
 import { useNavigate } from "react-router-dom";
 import axios from 'axios';
-import jwtDecoder from "../organisms/jwtDecoder";
-import DataStorage from "../organisms/DataStorage";
+import jwtDecoder from "../../organisms/jwtDecoder";
+import DataStorage from "../../organisms/DataStorage";
 
 export default function LoginPage() {
 

frontend/src/pages/{MenuPage.js → user-pages/MenuPage.js}

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { Modal, Button, Container, Row, Col, Tab, Tabs, Form, InputGroup } from 'react-bootstrap';
-import MenuItem from '../molecules/MenuItem';
-import BasicTemplate from '../templates/BasicTemplate';
-import DataStorage from '../organisms/DataStorage';
-import CacheStorage from '../organisms/CacheStorage';
+import MenuItem from '../../molecules/MenuItem';
+import BasicTemplate from '../../templates/BasicTemplate';
+import DataStorage from '../../organisms/DataStorage';
+import CacheStorage from '../../organisms/CacheStorage';
 import axios from 'axios';
 
 const categoryMapper = [
@@ -17,6 +17,12 @@ function MenuPage() {
     const [selectedDish, setSelectedDish] = useState(null);
     const [show, setShow] = useState(false);
     const [cartAmount, setCartAmount] = useState(0);
+
+    const [branches, setBranches] = useState([]);
+    const defaultSelectedStore = CacheStorage.get('selectedStore') || "";
+    const [selectedStore, setSelectedStore] = useState(defaultSelectedStore);
+
+    const [loadingBranches, setLoadingBranches] = useState(true);
     const [loading, setLoading] = useState(true);
     const [menuItems, setMenuItems] = useState({});
 
@@ -24,7 +30,7 @@ function MenuPage() {
         const cart = JSON.parse(DataStorage.get('cart')) || {};  // Đảm bảo cart không null
 
         cart[selectedDish.id] = {
-            'name':selectedDish.item_name,
+            'name': selectedDish.item_name,
             'amount': cartAmount,
             'imageSrc': selectedDish.image_url,
             'price': selectedDish.price
@@ -43,7 +49,7 @@ function MenuPage() {
     }
 
     function handleShow(dish) {
-        if (DataStorage.get('isLoggedIn') === null) {
+        if (DataStorage.get('isLoggedIn') !== 'true' || !DataStorage.get('cart')) {
             setShow(true);
             return;
         } else {
@@ -53,7 +59,7 @@ function MenuPage() {
             const cart = JSON.parse(DataStorage.get('cart')) || {};
 
             // Kiểm tra số lượng món ăn trong cart
-            const amount = cart[dish.id] !== undefined ? cart[dish.id] : 0;
+            const amount = cart[dish.id] !== undefined ? cart[dish.id].amount : 0;
             setCartAmount(amount);  // Cập nhật số lượng
             setShow(true);          // Hiển thị modal
         }
@@ -70,38 +76,139 @@ function MenuPage() {
     }
 
     useEffect(() => {
-        const fetchMenuItems = async () => {
+        const fetchBranches = async () => {
             try {
-                const menuItemsByType = {};
+                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
+                setBranches(response.data); // Lưu dữ liệu vào state
+                setLoadingBranches(false); // Đặt loading thành false khi hoàn tất
+                CacheStorage.set('stores', JSON.stringify(Object(response.data)));
+            } catch (error) {
+                console.error('Error fetching branches:', error);
+                setLoadingBranches(false); // Đặt loading thành false nếu lỗi
+            }
+        };
+        if (CacheStorage.get('stores')) {
+            setBranches(JSON.parse(CacheStorage.get('stores')));
+            setLoadingBranches(false);
+        } else {
+            fetchBranches();
+        }
+    }, [])
+
+    // useEffect(() => {
+    //     const fetchMenuItems = async () => {
+    //         try {
+    //             const menuItemsByType = {};
+
+    //             for (const item of categoryMapper) {
+    //                 // Gọi API để lấy món theo itemType
+    //                 const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?filter.item_type=${item.itemType}`);
+    //                 // Lưu danh sách món theo itemType
+    //                 menuItemsByType[item.itemType] = response.data.data;
+    //             }
+    //             console.log(menuItemsByType);
+    //             setMenuItems(menuItemsByType);
+    //             setLoading(false);
+    //             CacheStorage.set('menuItems',JSON.stringify(menuItemsByType));
+    //         } catch (error) {
+    //             console.error('Error fetching menu items:', error);
+    //             setLoading(false);
+    //         }
+    //     };
+
+    //     if (CacheStorage.get('menuItems')) {
+    //         setMenuItems(JSON.parse(CacheStorage.get('menuItems')));
+    //         setLoading(false);
+    //     } else {
+    //         fetchMenuItems();
+    //     }
+
+    // }, []);
+
+    function organizeMenuItemsByType(menuData) {
+        // Lấy ra tất cả menu_item từ array ban đầu
+        const menuItems = menuData.map(item => item.menu_item);
+
+        // Tạo một object để nhóm menu_item theo item_type, khởi tạo các mảng rỗng cho mỗi item_type từ categoryMapper
+        const organizedItems = categoryMapper.reduce((acc, { itemType }) => {
+            acc[itemType] = [];
+            return acc;
+        }, {});
+
+        // Thêm menu_item vào organizedItems theo item_type
+        menuItems.forEach(menuItem => {
+            const type = menuItem.item_type;
+
+            // Đưa menu_item vào array của item_type tương ứng
+            if (organizedItems[type]) {
+                organizedItems[type].push(menuItem);
+            }
+        });
+
+        return organizedItems;
+    }
 
-                for (const item of categoryMapper) {
+    useEffect(() => {
+        const fetchStoreData = async (storeId) => {
+            if (storeId!=="") {
+                try {
+                    let menuItemsByType = {};
+                    
                     // Gọi API để lấy món theo itemType
-                    const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?filter.item_type=${item.itemType}`);
+                    const response = await axios.get(process.env.REACT_APP_API_URL + `/branchs/${storeId}/menus?limit=100`);
                     // Lưu danh sách món theo itemType
-                    menuItemsByType[item.itemType] = response.data.data;
+                    console.log('Response', response.data.data);
+                    menuItemsByType = organizeMenuItemsByType(response.data.data);
+        
+                    console.log(menuItemsByType);
+                    setMenuItems(menuItemsByType);
+                    setLoading(false);
+                    CacheStorage.set(`store_menu_${storeId}`, JSON.stringify(menuItemsByType));
+                } catch (error) {
+                    console.error('Error fetching menu items:', error);
+                    setLoading(false);
                 }
-                console.log(menuItemsByType);
-                setMenuItems(menuItemsByType);
-                setLoading(false);
-                CacheStorage.set('menuItems',JSON.stringify(menuItemsByType));
-            } catch (error) {
-                console.error('Error fetching menu items:', error);
-                setLoading(false);
             }
-        };
-
-        if (CacheStorage.get('menuItems')) {
-            setMenuItems(JSON.parse(CacheStorage.get('menuItems')));
+        }
+        // Kiểm tra cache thông tin chi nhánh trong sessionStorage
+        const cachedStoreData = CacheStorage.get(`store_menu_${selectedStore}`);
+        if (cachedStoreData) {
+            setMenuItems(JSON.parse(cachedStoreData));
             setLoading(false);
         } else {
-            fetchMenuItems();
+            fetchStoreData(selectedStore);
         }
+    }, [selectedStore]);
 
-    }, []);
+    const handleSelectStore = (e) => {
+        setSelectedStore(e.target.value);
+        CacheStorage.set('selectedStore',e.target.value);
+        setLoading(true);
+    };
+
+    let selectboxContent;
+
+    if (loadingBranches) {
+        selectboxContent = (<p>Đang tải dữ liệu...</p>)
+    } else {
+        selectboxContent = (<Form>
+            <Form.Group controlId="branchSelect">
+                <Form.Label>Chọn chi nhánh:</Form.Label>
+                <Form.Control as="select" onChange={handleSelectStore} value={selectedStore}>
+                    <option value="">-- Chọn chi nhánh --</option>
+                    {branches.map((store) => (
+                        <option key={store.id} value={store.id}>
+                            {store.name + ' - ' + store.location}
+                        </option>
+                    ))}
+                </Form.Control>
+            </Form.Group>
+        </Form>);
+    }
 
     let modalContent;
 
-    if (DataStorage.get('isLoggedIn') === null) {
+    if (DataStorage.get('isLoggedIn') !== 'true' || !DataStorage.get('cart')) {
         modalContent = (
             <Modal show={show} onHide={notLoggedInClose} className='text-center align-items-center'>
                 <Modal.Header closeButton className='text-center'>
@@ -172,7 +279,7 @@ function MenuPage() {
                 <Tab eventKey={index} title={category.category}>
                     <Container fluid className='my-5'>
                         <Row md={3} className="g-4">
-                            {menuItems[category.itemType].map((item, idx) => (
+                            {menuItems[category.itemType]?.map((item, idx) => (
                                 <Col key={item.id}>
                                     <div onClick={() => handleShow(item)} className="text-center">
                                         <MenuItem
@@ -191,17 +298,24 @@ function MenuPage() {
     }
 
     return <BasicTemplate content={(
-        <Container fluid className='my-5' style={{ minHeight: '70vh' }}>
-            <>
+        <Container fluid className='d-flex my-5 justify-content-center' style={{ minHeight: '70vh' }}>
+            <div className='align-items-center'>
                 {modalContent}
-            </>
-            <h1 className='text-center mb-5'>Thực đơn</h1>
-            <Row>
-                <Col xs={1} md={2}></Col>
-                <Col xs={10} md={8}>
+            </div>
+
+            {/* selectbox branches */}
+            <Row style={{ maxWidth: "80vw" }}>
+                <Col xs='12'>
+                    {selectboxContent}
+                </Col>
+                <Col xs='12' className='my-5'>
+                    <h1 className='text-center'>Thực đơn</h1>
+                </Col>
+                {/* <Col xs={1} md={2}></Col> */}
+                <Col className='text-center'>
                     {menuContent}
                 </Col>
-                <Col xs={1} md={2}></Col>
+                {/* <Col xs={1} md={2}></Col> */}
             </Row>
         </Container>
 

frontend/src/pages/{NewsPage.js → user-pages/NewsPage.js}

@@ -1,7 +1,7 @@
 import {Container, Row, Col} from "react-bootstrap";
-import BasicTemplate from "../templates/BasicTemplate";
+import BasicTemplate from "../../templates/BasicTemplate";
 import { useSearchParams } from 'react-router-dom';
-import CacheStorage from "../organisms/CacheStorage";
+import CacheStorage from "../../organisms/CacheStorage";
 
 export default function NewsPage() {
     
@@ -11,8 +11,6 @@ export default function NewsPage() {
     
     const feedDetail = Array.from(JSON.parse(CacheStorage.get('feeds'))).filter((item) => item.id === newsId);
 
-    
-
     const newsTitle = feedDetail[0].title;
     const newsContent = feedDetail[0].description;
     const newsImageSrc = feedDetail[0].image_url;

frontend/src/pages/{RegisterPage.js → user-pages/RegisterPage.js}

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import validator from 'validator';
 import { useNavigate } from 'react-router-dom';
 import { Container, Form, Button, Alert, Row, Col, Card } from 'react-bootstrap';
-import BasicTemplate from '../templates/BasicTemplate';
+import BasicTemplate from '../../templates/BasicTemplate';
 import axios from 'axios';
-import DataStorage from '../organisms/DataStorage';
-import jwtDecoder from '../organisms/jwtDecoder';
+import DataStorage from '../../organisms/DataStorage';
+import jwtDecoder from '../../organisms/jwtDecoder';
 
 const RegisterPage = () => {
     const [full_name, setFullname] = useState('');

frontend/src/pages/{UserInfoPage.js → user-pages/UserInfoPage.js}

@@ -1,9 +1,9 @@
-import BasicTemplate from "../templates/BasicTemplate";
+import BasicTemplate from "../../templates/BasicTemplate";
 import { Container, Form, Row, Col, Card, Alert, Button, Image } from "react-bootstrap";
 import React, { useState, useEffect } from "react";
 import validator from "validator";
 import axios from "axios";
-import DataStorage from "../organisms/DataStorage";
+import DataStorage from "../../organisms/DataStorage";
 
 export default function UserInfoPage() {
 
@@ -66,20 +66,14 @@ export default function UserInfoPage() {
     };
 
     // Hàm xử lý thay đổi avatar
-    const handleAvatarChange = (e) => {
-        const file = e.target.files[0];
-        if (file) {
-          const reader = new FileReader();
-          reader.onloadend = () => {
-            setFormData((prevData) => ({
-              ...prevData,
-              avatar: reader.result // Cập nhật ảnh đại diện
-            }));
-          };
-          reader.readAsDataURL(file);
-          setChanged(true);
-        }
-      };
+    const handleAvatarUrlChange = (e) => {
+        const url = e.target.value;
+        setFormData((prevData) => ({
+            ...prevData,
+            avatar: url // Cập nhật URL ảnh
+        }));
+        setChanged(true);
+    };
 
     useEffect(() => {
         const hasChanges = () => {
@@ -120,6 +114,7 @@ export default function UserInfoPage() {
             let data = {};
 
             // if (avatarBase64) data.avatar = avatarBase64;
+            if (formData.avatar.trim() !== "") data.avatar = formData.avatar.trim();
             if (formData.full_name.trim() !== "" && formData.full_name.trim() !== initialData.full_name) data.full_name = formData.full_name.trim();
             if (formData.phone_number.trim() !== "" && formData.phone_number.trim() !== initialData.phone_number) data.phone_number = formData.phone_number.trim();
             if (formData.address.trim() !== "" && formData.address.trim() !== initialData.address) data.address = formData.address.trim();
@@ -145,9 +140,9 @@ export default function UserInfoPage() {
         (
             <Container fluid className="d-flex align-items-center justify-content-center mt-5">
                 <Row>
-                    <Col xs={1} md={2}></Col>
+                    {/* <Col xs={1} md={2}></Col> */}
                     <Col xs={10} md={8}>
-                        <Card style={{ width: '30rem' }} className='justify-content-center'>
+                        <Card style={{ width: '40vw' }} className='justify-content-center'>
                             <Card.Header>
                                 <Card.Title className='mt-1 text-center'>Thông tin khách hàng</Card.Title>
                             </Card.Header>
@@ -156,22 +151,31 @@ export default function UserInfoPage() {
                                 <Form onSubmit={handleSubmit}>
                                     {error && <Alert variant="danger">{error}</Alert>}
                                     <Row className="mb-3">
-                                        <Col xs={12} md={6} className="text-center">
-                                            {/*Image*/}
-                                            <Image
-                                                src={formData.avatar} // Hiển thị ảnh đại diện từ formData
-                                                alt="User Avatar"
-                                                roundedCircle
-                                                width={120}
-                                                height={120}
-                                            />
-                                            <Form.Group controlId="formAvatar">
+
+                                        <Col xs={12} md={6} className="d-flex flex-column align-items-center">
+                                            <div className="avatar-container mb-4">
+                                                <Image
+                                                    src={formData.avatar}
+                                                    alt="User Avatar"
+                                                    roundedCircle
+                                                    width="100%"
+                                                    height="100%"
+                                                    style={{ objectFit: 'cover' }}
+                                                />
+                                            </div>
+                                            <Form.Group controlId="formAvatar" className="mx-3" style={{ width: '100%' }}>
                                                 <Form.Label>Ảnh đại diện</Form.Label>
-                                                <Form.Control type="file" accept="image/*" onChange={handleAvatarChange} />
+                                                <Form.Control
+                                                    type="text"
+                                                    placeholder="Nhập URL ảnh"
+                                                    value={formData.avatar || ''}
+                                                    onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
+                                                />
                                             </Form.Group>
                                         </Col>
-                                        <Col xs={12} md={6}>
-                                            <Form.Group controlId="formUsername">
+
+                                        <Col xs={12} md={6} className="d-flex flex-column mt-5 align-items-center">
+                                            <Form.Group controlId="formUsername" style={{ width: '80%' }}>
                                                 <Form.Label>Họ tên người dùng</Form.Label>
                                                 <Form.Control
                                                     type="text"
@@ -247,10 +251,8 @@ export default function UserInfoPage() {
                         </Card>
 
                     </Col>
-                    <Col xs={1} md={2}></Col>
+                    {/* <Col xs={1} md={2}></Col> */}
                 </Row>
-
-
             </Container>
         )
     } />

frontend/src/styles/styles.css

@@ -114,6 +114,10 @@ body {
     border-color: #e99e40;
 }
 
+.btn-primary:disabled {
+    background-color: #755b37;
+    border-color: #755b37
+}
 /* .btn-outline-primary {
     color: var(--primary-color);
     border-color: var(--primary-color);
@@ -191,6 +195,11 @@ body {
     transform: scale(1.00);
 }
 
+.card-report {
+    background: linear-gradient(rgba(150, 150, 150, 0.8), rgba(150, 150, 150, 0.95));
+    box-shadow: none;
+}
+
 /* Container cho các phần */
 .menu-section {
     padding: 40px 0;
@@ -244,4 +253,69 @@ a:active {
 
 .modal-content {
     background-color: var(--modal-background-color);
-}
+}
+
+/* Tùy chỉnh nền và viền của selectbox */
+#branchSelect {
+    background-color: #3333338d;
+    /* Màu nền tối để phù hợp với giao diện tổng thể */
+    color: #fff;
+    /* Màu chữ sáng để tương phản */
+    border: 1px solid #666;
+    /* Màu viền trung tính */
+    border-radius: 8px;
+    /* Bo góc mềm mại */
+    padding: 10px;
+    /* Khoảng cách bên trong */
+    width: 100%;
+    /* max-width: 400px; */
+    /* Giới hạn chiều rộng tối đa */
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+    /* Đổ bóng nhẹ */
+    -webkit-appearance: none;
+    /* Ẩn mũi tên mặc định */
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+/* Tùy chỉnh mũi tên của selectbox */
+#branchSelect::after {
+    content: '▼';
+    /* Thêm ký tự mũi tên */
+    color: #ccc;
+    /* Màu mũi tên */
+    padding-left: 10px;
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+/* Điều chỉnh khi selectbox được focus */
+#branchSelect:focus {
+    outline: none;
+    border-color: #ffa500;
+    /* Thay đổi màu viền khi focus */
+    box-shadow: 0px 2px 8px rgba(255, 165, 0, 0.5);
+    /* Hiệu ứng đổ bóng nổi bật */
+}
+
+/* Tùy chỉnh các tùy chọn (option) */
+#branchSelect option {
+    background-color: #333;
+    color: #fff;
+}
+
+.avatar-container {
+    width: 200px; /* Đặt kích thước theo ý muốn */
+    height: 200px;
+    border-radius: 50%; /* Biến khung thành hình tròn */
+    overflow: hidden; /* Ẩn phần ảnh vượt ra ngoài khung */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f0f0f0; /* Màu nền để hiển thị nếu ảnh chưa tải */
+    background-image: url('../../public/default_avatar.jpg');
+}