From a15786b44aa570e600f8598ae2d1615fb7fbf56c Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Thu, 9 Nov 2023 19:55:43 +0900
Subject: [PATCH 01/94] feat(web-app): upgrade next js version from 13.3.0 to
 14.0.1

---
 core/web-app/package-lock.json | 816 ++++++++++++++++++++++-----------
 core/web-app/package.json      |   8 +-
 2 files changed, 546 insertions(+), 278 deletions(-)

diff --git a/core/web-app/package-lock.json b/core/web-app/package-lock.json
index 2e9a110c..4222190a 100644
--- a/core/web-app/package-lock.json
+++ b/core/web-app/package-lock.json
@@ -22,14 +22,14 @@
         "daisyui": "^2.51.5",
         "dayjs": "^1.11.7",
         "eslint": "8.38.0",
-        "eslint-config-next": "13.3.0",
+        "eslint-config-next": "^14.0.1",
         "immer": "^10.0.2",
         "lodash": "^4.17.21",
         "nanoid": "^4.0.2",
-        "next": "13.3.0",
-        "react": "18.2.0",
+        "next": "^14.0.1",
+        "react": "^18.2.0",
         "react-ace": "^10.1.0",
-        "react-dom": "18.2.0",
+        "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
         "reactflow": "^11.7.0",
         "typescript": "5.0.4",
@@ -187,22 +187,22 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.0.tgz",
-      "integrity": "sha512-AjppRV4uG3No7L1plinoTQETH+j2F10TEnrMfzbTUYwze5sBUPveeeBAPZPm8OkJZ1epq9OyYKhZrvbD6/9HCQ=="
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.1.tgz",
+      "integrity": "sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.3.0.tgz",
-      "integrity": "sha512-wuGN5qSEjSgcq9fVkH0Y/qIPFjnZtW3ZPwfjJOn7l/rrf6y8J24h/lo61kwqunTyzZJm/ETGfGVU9PUs8cnzEA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.1.tgz",
+      "integrity": "sha512-bLjJMwXdzvhnQOnxvHoTTUh/+PYk6FF/DCgHi4BXwXCINer+o1ZYfL9aVeezj/oI7wqGJOqwGIXrlBvPbAId3w==",
       "dependencies": {
         "glob": "7.1.7"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.0.tgz",
-      "integrity": "sha512-DmIQCNq6JtccLPPBzf0dgh2vzMWt5wjxbP71pCi5EWpWYE3MsP6FcRXi4MlAmFNDQOfcFXR2r7kBeG1LpZUh1w==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz",
+      "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==",
       "cpu": [
         "arm64"
       ],
@@ -215,9 +215,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.0.tgz",
-      "integrity": "sha512-oQoqFa88OGgwnYlnAGHVct618FRI/749se0N3S8t9Bzdv5CRbscnO0RcX901+YnNK4Q6yeiizfgO3b7kogtsZg==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz",
+      "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==",
       "cpu": [
         "x64"
       ],
@@ -230,9 +230,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.0.tgz",
-      "integrity": "sha512-Wzz2p/WqAJUqTVoLo6H18WMeAXo3i+9DkPDae4oQG8LMloJ3if4NEZTnOnTUlro6cq+S/W4pTGa97nWTrOjbGw==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz",
+      "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==",
       "cpu": [
         "arm64"
       ],
@@ -245,9 +245,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.0.tgz",
-      "integrity": "sha512-xPVrIQOQo9WXJYgmoTlMnAD/HlR/1e1ZIWGbwIzEirXBVBqMARUulBEIKdC19zuvoJ477qZJgBDCKtKEykCpyQ==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz",
+      "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==",
       "cpu": [
         "arm64"
       ],
@@ -260,9 +260,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.0.tgz",
-      "integrity": "sha512-jOFlpGuPD7W2tuXVJP4wt9a3cpNxWAPcloq5EfMJRiXsBBOjLVFZA7boXYxEBzSVgUiVVr1V9T0HFM7pULJ1qA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz",
+      "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==",
       "cpu": [
         "x64"
       ],
@@ -275,9 +275,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.0.tgz",
-      "integrity": "sha512-2OwKlzaBgmuet9XYHc3KwsEilzb04F540rlRXkAcjMHL7eCxB7uZIGtsVvKOnQLvC/elrUegwSw1+5f7WmfyOw==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz",
+      "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==",
       "cpu": [
         "x64"
       ],
@@ -290,9 +290,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.0.tgz",
-      "integrity": "sha512-OeHiA6YEvndxT46g+rzFK/MQTfftKxJmzslERMu9LDdC6Kez0bdrgEYed5eXFK2Z1viKZJCGRlhd06rBusyztA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz",
+      "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==",
       "cpu": [
         "arm64"
       ],
@@ -305,9 +305,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.0.tgz",
-      "integrity": "sha512-4aB7K9mcVK1lYEzpOpqWrXHEZympU3oK65fnNcY1Qc4HLJFLJj8AViuqQd4jjjPNuV4sl8jAwTz3gN5VNGWB7w==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz",
+      "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==",
       "cpu": [
         "ia32"
       ],
@@ -320,9 +320,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.0.tgz",
-      "integrity": "sha512-Reer6rkLLcoOvB0dd66+Y7WrWVFH7sEEkF/4bJCIfsSKnTStTYaHtwIJAwbqnt9I392Tqvku0KkoqZOryWV9LQ==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz",
+      "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==",
       "cpu": [
         "x64"
       ],
@@ -481,14 +481,14 @@
       }
     },
     "node_modules/@nivo/scales/node_modules/@types/d3-time": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.1.tgz",
-      "integrity": "sha512-ULX7LoqXTCYtM+tLYOaeAJK7IwCT+4Gxlm2MaH0ErKLi07R5lh8NHCAyWcDkCCmx1AfRcBEV6H9QE9R25uP7jw=="
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz",
+      "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g=="
     },
     "node_modules/@nivo/scales/node_modules/@types/d3-time-format": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.1.tgz",
-      "integrity": "sha512-5GIimz5IqaRsdnxs4YlyTZPwAMfALu/wA4jqSiuqgdbCxUZ2WjrnwANqOtoBJQgeaUTdYNfALJO0Yb0YrDqduA=="
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz",
+      "integrity": "sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg=="
     },
     "node_modules/@nivo/tooltip": {
       "version": "0.83.0",
@@ -713,14 +713,14 @@
       }
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
-      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
+      "integrity": "sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA=="
     },
     "node_modules/@swc/helpers": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
-      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -944,14 +944,14 @@
       }
     },
     "node_modules/@types/d3-time": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
-      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.4.tgz",
+      "integrity": "sha512-BTfLsxTeo7yFxI/haOOf1ZwJ6xKgQLT9dCp+EcmQv87Gox6X+oKl4mLKfO6fnWm3P22+A6DknMNEZany8ql2Rw=="
     },
     "node_modules/@types/d3-time-format": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.1.tgz",
-      "integrity": "sha512-fck0Z9RGfIQn3GJIEKVrp15h9m6Vlg0d5XXeiE/6+CQiBmMDZxfR21XtjEPuDeg7gC3bBM0SdieA5XF3GW1wKA=="
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz",
+      "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg=="
     },
     "node_modules/@types/d3-timer": {
       "version": "3.0.0",
@@ -1245,14 +1245,14 @@
       }
     },
     "node_modules/array-includes": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
-      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
+      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "get-intrinsic": "^1.1.3",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -1270,14 +1270,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
+      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.flat": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
-      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -1288,13 +1306,13 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
-      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -1316,11 +1334,39 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
+      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
     },
+    "node_modules/asynciterator.prototype": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz",
+      "integrity": "sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1467,12 +1513,13 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -1927,6 +1974,19 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -1936,10 +1996,11 @@
       }
     },
     "node_modules/define-properties": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "dependencies": {
+        "define-data-property": "^1.0.1",
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
       },
@@ -2018,24 +2079,25 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.21.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
-      "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
+      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.2",
         "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.5",
         "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.2.0",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.2",
         "get-symbol-description": "^1.0.0",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0",
         "internal-slot": "^1.0.5",
         "is-array-buffer": "^3.0.2",
         "is-callable": "^1.2.7",
@@ -2043,19 +2105,23 @@
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.10",
+        "is-typed-array": "^1.1.12",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
+        "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.4.3",
+        "regexp.prototype.flags": "^1.5.1",
+        "safe-array-concat": "^1.0.1",
         "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.7",
-        "string.prototype.trimend": "^1.0.6",
-        "string.prototype.trimstart": "^1.0.6",
+        "string.prototype.trim": "^1.2.8",
+        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.7",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
         "typed-array-length": "^1.0.4",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.9"
+        "which-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2083,6 +2149,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
+      "integrity": "sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==",
+      "dependencies": {
+        "asynciterator.prototype": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.1",
+        "es-set-tostringtag": "^2.0.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "globalthis": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "iterator.prototype": "^1.1.2",
+        "safe-array-concat": "^1.0.1"
+      }
+    },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
@@ -2196,19 +2283,19 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.3.0.tgz",
-      "integrity": "sha512-6YEwmFBX0VjBd3ODGW9df0Is0FLaRFdMN8eAahQG9CN6LjQ28J8AFr19ngxqMSg7Qv6Uca/3VeeBosJh1bzu0w==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.0.1.tgz",
+      "integrity": "sha512-QfIFK2WD39H4WOespjgf6PLv9Bpsd7KGGelCtmq4l67nGvnlsGpuvj0hIT+aIy6p5gKH+lAChYILsyDlxP52yg==",
       "dependencies": {
-        "@next/eslint-plugin-next": "13.3.0",
-        "@rushstack/eslint-patch": "^1.1.3",
-        "@typescript-eslint/parser": "^5.42.0",
+        "@next/eslint-plugin-next": "14.0.1",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.31.7",
-        "eslint-plugin-react-hooks": "^4.5.0"
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
       },
       "peerDependencies": {
         "eslint": "^7.23.0 || ^8.0.0",
@@ -2221,13 +2308,13 @@
       }
     },
     "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
-      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "dependencies": {
         "debug": "^3.2.7",
-        "is-core-module": "^2.11.0",
-        "resolve": "^1.22.1"
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -2317,25 +2404,27 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.27.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
-      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.3.1",
-        "array.prototype.flatmap": "^1.3.1",
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
+      "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
+      "dependencies": {
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.7",
-        "eslint-module-utils": "^2.7.4",
-        "has": "^1.0.3",
-        "is-core-module": "^2.11.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.6",
-        "resolve": "^1.22.1",
-        "semver": "^6.3.0",
-        "tsconfig-paths": "^3.14.1"
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.14.2"
       },
       "engines": {
         "node": ">=4"
@@ -2409,14 +2498,15 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.32.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
-      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
+      "version": "7.33.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
+      "integrity": "sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==",
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flatmap": "^1.3.1",
         "array.prototype.tosorted": "^1.1.1",
         "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.0.12",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
@@ -2426,7 +2516,7 @@
         "object.values": "^1.1.6",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.4",
-        "semver": "^6.3.0",
+        "semver": "^6.3.1",
         "string.prototype.matchall": "^4.0.8"
       },
       "engines": {
@@ -2459,11 +2549,11 @@
       }
     },
     "node_modules/eslint-plugin-react/node_modules/resolve": {
-      "version": "2.0.0-next.4",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz",
-      "integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==",
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
       "dependencies": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -2741,19 +2831,22 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0",
-        "functions-have-names": "^1.2.2"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2771,13 +2864,14 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2836,6 +2930,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -2988,6 +3087,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -3093,6 +3203,20 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
+    "node_modules/is-async-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
+      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -3142,11 +3266,11 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3188,6 +3312,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
+      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3311,15 +3460,11 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
-      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "which-typed-array": "^1.1.11"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3380,6 +3525,18 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
+      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "reflect.getprototypeof": "^1.0.4",
+        "set-function-name": "^2.0.1"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.18.2",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
@@ -3648,38 +3805,37 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.3.0.tgz",
-      "integrity": "sha512-OVTw8MpIPa12+DCUkPqRGPS3thlJPcwae2ZL4xti3iBff27goH024xy4q2lhlsdoYiKOi8Kz6uJoLW/GXwgfOA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.0.1.tgz",
+      "integrity": "sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==",
       "dependencies": {
-        "@next/env": "13.3.0",
-        "@swc/helpers": "0.4.14",
+        "@next/env": "14.0.1",
+        "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.14",
-        "styled-jsx": "5.1.1"
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1",
+        "watchpack": "2.4.0"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=14.6.0"
+        "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.3.0",
-        "@next/swc-darwin-x64": "13.3.0",
-        "@next/swc-linux-arm64-gnu": "13.3.0",
-        "@next/swc-linux-arm64-musl": "13.3.0",
-        "@next/swc-linux-x64-gnu": "13.3.0",
-        "@next/swc-linux-x64-musl": "13.3.0",
-        "@next/swc-win32-arm64-msvc": "13.3.0",
-        "@next/swc-win32-ia32-msvc": "13.3.0",
-        "@next/swc-win32-x64-msvc": "13.3.0"
+        "@next/swc-darwin-arm64": "14.0.1",
+        "@next/swc-darwin-x64": "14.0.1",
+        "@next/swc-linux-arm64-gnu": "14.0.1",
+        "@next/swc-linux-arm64-musl": "14.0.1",
+        "@next/swc-linux-x64-gnu": "14.0.1",
+        "@next/swc-linux-x64-musl": "14.0.1",
+        "@next/swc-win32-arm64-msvc": "14.0.1",
+        "@next/swc-win32-ia32-msvc": "14.0.1",
+        "@next/swc-win32-x64-msvc": "14.0.1"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
-        "node-sass": "^6.0.0 || ^7.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -3688,57 +3844,11 @@
         "@opentelemetry/api": {
           "optional": true
         },
-        "fibers": {
-          "optional": true
-        },
-        "node-sass": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         }
       }
     },
-    "node_modules/next/node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
@@ -3777,9 +3887,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3838,13 +3948,13 @@
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
-      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
+      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3853,6 +3963,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.groupby": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
+      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
     "node_modules/object.hasown": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
@@ -3866,13 +3987,13 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
-      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
+      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4030,9 +4151,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4126,9 +4247,9 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -4392,19 +4513,38 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
+      "integrity": "sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "globalthis": "^1.0.3",
+        "which-builtin-type": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "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=="
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
+        "define-properties": "^1.2.0",
+        "set-function-name": "^2.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4414,9 +4554,9 @@
       }
     },
     "node_modules/resolve": {
-      "version": "1.22.4",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
-      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4482,6 +4622,23 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
+      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -4517,6 +4674,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4611,13 +4795,13 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
-      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4627,26 +4811,26 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
-      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
+      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
-      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
+      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4972,6 +5156,54 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typed-array-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
@@ -5069,6 +5301,18 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5098,6 +5342,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-builtin-type": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz",
+      "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==",
+      "dependencies": {
+        "function.prototype.name": "^1.1.5",
+        "has-tostringtag": "^1.0.0",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.0.5",
+        "is-finalizationregistry": "^1.0.2",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.1.4",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/which-collection": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
@@ -5113,16 +5382,15 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
-      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
+      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.4",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.10"
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5150,9 +5418,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
-      "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
       "engines": {
         "node": ">= 14"
       }
diff --git a/core/web-app/package.json b/core/web-app/package.json
index 5fe2a7a2..e4c5a865 100644
--- a/core/web-app/package.json
+++ b/core/web-app/package.json
@@ -23,14 +23,14 @@
     "daisyui": "^2.51.5",
     "dayjs": "^1.11.7",
     "eslint": "8.38.0",
-    "eslint-config-next": "13.3.0",
+    "eslint-config-next": "^14.0.1",
     "immer": "^10.0.2",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
-    "next": "13.3.0",
-    "react": "18.2.0",
+    "next": "^14.0.1",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "reactflow": "^11.7.0",
     "typescript": "5.0.4",

From f608385cbfb3dc43900402ff0d8a43b0dfc10ce6 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 19:43:03 +0900
Subject: [PATCH 02/94] feat(web-app): add omitted configurations and remove
 additional codes to run

---
 .../src/app/app/planning/[id]/code/page.tsx   | 11 ++++--
 .../app/app/planning/[id]/diagram/page.tsx    | 34 +++++--------------
 .../src/app/app/planning/[id]/layout.tsx      |  2 +-
 .../src/app/app/planning/plan-store.ts        |  1 +
 core/web-app/src/app/app/planning/sidebar.tsx |  2 +-
 core/web-app/src/utils/plan-binding.ts        |  3 +-
 6 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/core/web-app/src/app/app/planning/[id]/code/page.tsx b/core/web-app/src/app/app/planning/[id]/code/page.tsx
index 869a8d69..f6c81d61 100644
--- a/core/web-app/src/app/app/planning/[id]/code/page.tsx
+++ b/core/web-app/src/app/app/planning/[id]/code/page.tsx
@@ -25,12 +25,17 @@ export default function PlanningDetailCodePage() {
 
   // If scalingPlanId changes, fetch the scaling plan then it updates plans and nodes.
   useEffect(() => {
-    const fetch = async () => {
-      await load(scalingPlanId);
+    const fetch = async (id: string) => {
+      await load(id);
       const yamlCode = await getYAMLCode();
       setValue('expression', yamlCode);
     };
-    fetch();
+
+    if (Array.isArray(scalingPlanId)) {
+      fetch(scalingPlanId[0]);
+    } else {
+      fetch(scalingPlanId);
+    }
   }, [scalingPlanId]);
 
   const onSubmit = async (data: any) => {
diff --git a/core/web-app/src/app/app/planning/[id]/diagram/page.tsx b/core/web-app/src/app/app/planning/[id]/diagram/page.tsx
index 2e11a039..f540ede5 100644
--- a/core/web-app/src/app/app/planning/[id]/diagram/page.tsx
+++ b/core/web-app/src/app/app/planning/[id]/diagram/page.tsx
@@ -11,38 +11,20 @@ export default function PlanningDetailDiagramPage() {
 
   // If scalingPlanId changes, fetch the scaling plan then it updates plans and nodes.
   useEffect(() => {
-    const fetch = async () => {
-      await load(scalingPlanId);
+    const fetch = async (id: string) => {
+      await load(id);
     };
-    fetch();
+
+    if (Array.isArray(scalingPlanId)) {
+      fetch(scalingPlanId[0]);
+    } else {
+      fetch(scalingPlanId);
+    }
   }, [scalingPlanId]);
 
   return (
     <div className="h-full w-full">
       <PlanningDetailDiagramBase />
     </div>
-    // <div className="flex h-full w-full">
-    //   <aside className="flex w-80 flex-col border-r border-base-300 bg-base-200">
-    //     {/* Header of aside */}
-    //     <div className="prose flex h-14 w-full items-center justify-start border-b border-base-300 px-3">
-    //       <h4 className="m-0 flex-1">Plans</h4>
-    //       <span className="badge">4</span>
-    //     </div>
-    //     {/* Plan List */}
-    //     <div className="flex-1 overflow-y-auto">{/* Plan Item */}</div>
-    //   </aside>
-    //   <main className="flex flex-1 flex-col">
-    //     {/* Plan Detail Header */}
-    //     <div className="h-22 prose flex w-full min-w-full flex-col border-b border-base-300 bg-slate-50 p-3">
-    //       {/* Plan Title */}
-    //       <h3 className="m-0 flex-1">Free Plan Tenancy Autoscaling</h3>
-    //       <div className="tabs">
-    //         <a className="tab-bordered tab no-underline">Tab 1</a>
-    //         <a className="tab-bordered tab tab-active no-underline">Tab 2</a>
-    //         <a className="tab-bordered tab no-underline">Tab 3</a>
-    //       </div>
-    //     </div>
-    //   </main>
-    // </div>
   );
 }
diff --git a/core/web-app/src/app/app/planning/[id]/layout.tsx b/core/web-app/src/app/app/planning/[id]/layout.tsx
index b43a5efe..bd17e324 100644
--- a/core/web-app/src/app/app/planning/[id]/layout.tsx
+++ b/core/web-app/src/app/app/planning/[id]/layout.tsx
@@ -30,7 +30,7 @@ export default async function PlanningDetailLayout({
       {/* Plan Detail Header */}
       <div className="flex flex-1 flex-col">
         <ContentHeader
-          title={scalingPlanDefinition.title}
+          title={scalingPlanDefinition.kind}
           right={<PlanningDetailControls />}
         >
           <PlanningDetailTabs />
diff --git a/core/web-app/src/app/app/planning/plan-store.ts b/core/web-app/src/app/app/planning/plan-store.ts
index 1c492875..63052956 100644
--- a/core/web-app/src/app/app/planning/plan-store.ts
+++ b/core/web-app/src/app/app/planning/plan-store.ts
@@ -201,6 +201,7 @@ export const usePlanStore = create<PlanState>((set, get) => ({
             ui: {},
             description: '',
             expression: '',
+            cron_expression: null,
             scaling_components: [],
             priority: 0,
           },
diff --git a/core/web-app/src/app/app/planning/sidebar.tsx b/core/web-app/src/app/app/planning/sidebar.tsx
index 53ed00df..ed08f83a 100644
--- a/core/web-app/src/app/app/planning/sidebar.tsx
+++ b/core/web-app/src/app/app/planning/sidebar.tsx
@@ -95,7 +95,7 @@ export default function PlanningSidebar() {
                   'text-white': plan.db_id === selectePlanId,
                 })}
               >
-                {plan.title}
+                {plan.kind}
                 {currentScalingPlanState && needToSave(plan.db_id) && '*'}
               </div>
             </Link>
diff --git a/core/web-app/src/utils/plan-binding.ts b/core/web-app/src/utils/plan-binding.ts
index e82d1e8a..3314548f 100644
--- a/core/web-app/src/utils/plan-binding.ts
+++ b/core/web-app/src/utils/plan-binding.ts
@@ -17,8 +17,9 @@ export function generatePlanDefinition({
   }
   return {
     kind: 'ScalingPlan',
-    id,
     db_id,
+    id,
+    metadata: {},
     title,
     plans,
   } as ScalingPlanDefinition;

From 6db8d47b021d0e7f6c744ff37089b6d19e7106fe Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 19:43:53 +0900
Subject: [PATCH 03/94] feat(web-app): add welcome page

---
 core/web-app/src/app/page.tsx | 179 ++++++++++++----------------------
 1 file changed, 61 insertions(+), 118 deletions(-)

diff --git a/core/web-app/src/app/page.tsx b/core/web-app/src/app/page.tsx
index 8895dfbc..7f37e4e2 100644
--- a/core/web-app/src/app/page.tsx
+++ b/core/web-app/src/app/page.tsx
@@ -1,127 +1,70 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
+'use client';
+import Image from 'next/image';
+import { Inter } from 'next/font/google';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export default function Home() {
-  return (
-    <div>
-      <button className="btn">Hello daisyUI</button>
-    </div>
-    // <main className="flex min-h-screen flex-col items-center justify-between p-24">
-    //   <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-    //     <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-    //       Get started by editing&nbsp;
-    //       <code className="font-mono font-bold">src/app/page.tsx</code>
-    //     </p>
-    //     <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-    //       <a
-    //         className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-    //         href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-    //         target="_blank"
-    //         rel="noopener noreferrer"
-    //       >
-    //         By{' '}
-    //         <Image
-    //           src="/vercel.svg"
-    //           alt="Vercel Logo"
-    //           className="dark:invert"
-    //           width={100}
-    //           height={24}
-    //           priority
-    //         />
-    //       </a>
-    //     </div>
-    //   </div>
+  const [windowWidth, setWindowWidth] = useState<number>(0);
+
+  useEffect(() => {
+    setWindowWidth(window.innerWidth);
+
+    function handleResize() {
+      setWindowWidth(window.innerWidth);
+    }
 
-    //   <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
-    //     <Image
-    //       className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-    //       src="/next.svg"
-    //       alt="Next.js Logo"
-    //       width={180}
-    //       height={37}
-    //       priority
-    //     />
-    //   </div>
+    window.addEventListener('resize', handleResize);
 
-    //   <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
-    //     <a
-    //       href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-    //       className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-    //       target="_blank"
-    //       rel="noopener noreferrer"
-    //     >
-    //       <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
-    //         Docs{' '}
-    //         <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-    //           -&gt;
-    //         </span>
-    //       </h2>
-    //       <p
-    //         className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-    //       >
-    //         Find in-depth information about Next.js features and API.
-    //       </p>
-    //     </a>
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
-    //     <a
-    //       href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-    //       className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
-    //       target="_blank"
-    //       rel="noopener noreferrer"
-    //     >
-    //       <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
-    //         Learn{' '}
-    //         <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-    //           -&gt;
-    //         </span>
-    //       </h2>
-    //       <p
-    //         className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-    //       >
-    //         Learn about Next.js in an interactive course with&nbsp;quizzes!
-    //       </p>
-    //     </a>
+  const paddingClass = windowWidth < 768 ? 'p-5' : 'p-10';
 
-    //     <a
-    //       href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-    //       className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-    //       target="_blank"
-    //       rel="noopener noreferrer"
-    //     >
-    //       <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
-    //         Templates{' '}
-    //         <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-    //           -&gt;
-    //         </span>
-    //       </h2>
-    //       <p
-    //         className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-    //       >
-    //         Explore the Next.js 13 playground.
-    //       </p>
-    //     </a>
+  const cardClass = classNames('card m-12 shadow-2xl mx-auto max-w-lg', {
+    'sm:card-side': windowWidth < 640,
+    'md:card-side': windowWidth >= 640 && windowWidth < 1024,
+    'lg:card-side': windowWidth >= 1024,
+  });
 
-    //     <a
-    //       href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-    //       className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-    //       target="_blank"
-    //       rel="noopener noreferrer"
-    //     >
-    //       <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
-    //         Deploy{' '}
-    //         <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-    //           -&gt;
-    //         </span>
-    //       </h2>
-    //       <p
-    //         className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-    //       >
-    //         Instantly deploy your Next.js site to a shareable URL with Vercel.
-    //       </p>
-    //     </a>
-    //   </div>
-    // </main>
-  )
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push('/app');
+  };
+
+  return !windowWidth ? null : (
+    <div className="flex justify-center">
+      <div
+        className={`${cardClass} cursor-pointer transition-transform hover:scale-105`}
+        onClick={handleClick}
+      >
+        <figure
+          className={`bg-white p-5`}
+          style={{ minWidth: '10rem', minHeight: '10rem' }}
+        >
+          <Image
+            src="assets/images/wave-autoscale_symbol.svg"
+            alt="wave-autoscale_symbol.svg"
+            width={100}
+            height={100}
+            style={{ minWidth: '5rem', maxWidth: '5rem' }}
+          />
+        </figure>
+        <figure className={`bg-black ${paddingClass}`}>
+          <Image
+            src="assets/images/wave-autoscale_text.svg"
+            alt="wave-autoscale_text.svg"
+            width={100}
+            height={100}
+          />
+        </figure>
+      </div>
+    </div>
+  );
 }

From 6bd28989c47aad0944f5e2cacdcfdf60660876b1 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 20:06:33 +0900
Subject: [PATCH 04/94] refactor(web-app): refactor welcome page

---
 core/web-app/src/app/page.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/core/web-app/src/app/page.tsx b/core/web-app/src/app/page.tsx
index 7f37e4e2..e6ea9413 100644
--- a/core/web-app/src/app/page.tsx
+++ b/core/web-app/src/app/page.tsx
@@ -11,12 +11,11 @@ export default function Home() {
   const [windowWidth, setWindowWidth] = useState<number>(0);
 
   useEffect(() => {
-    setWindowWidth(window.innerWidth);
-
-    function handleResize() {
+    const handleResize = () => {
       setWindowWidth(window.innerWidth);
-    }
+    };
 
+    setWindowWidth(window.innerWidth);
     window.addEventListener('resize', handleResize);
 
     return () => {

From 3ce6e63b261ccc574722f4e21b490fc10c88ae01 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 20:08:22 +0900
Subject: [PATCH 05/94] feat(web-app): add layout component

---
 core/web-app/src/app/app/layout.tsx | 201 ++++------------------------
 1 file changed, 27 insertions(+), 174 deletions(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index 0330939a..bfe3450f 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -1,183 +1,36 @@
+'use client';
+import Image from 'next/image';
 import Menu from './menu';
+import { useRouter } from 'next/navigation';
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="h-screen w-screen">
-      <nav
-        className="navbar bg-neutral text-neutral-content"
-        data-te-navbar-ref
-      >
-        <div className="flex w-full flex-wrap items-center justify-between px-3">
-          {/* <button
-            className="block border-0 bg-transparent px-2 text-neutral-200 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
-            type="button"
-            data-te-collapse-init
-            data-te-target="#navbarSupportedContent4"
-            aria-controls="navbarSupportedContent4"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            <span className="[&>svg]:w-7">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                className="h-7 w-7"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button> */}
+  const router = useRouter();
 
-          <div
-            className="!visible mt-2 hidden flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto"
-            id="navbarSupportedContent4"
-            data-te-collapse-item
-          >
-            <a className="pr-2 text-xl font-semibold text-white" href="#">
-              Wave Autoscale
-            </a>
-            <Menu />
-          </div>
+  const handleClick = () => {
+    router.push('/app');
+  };
 
-          {/* <div className="relative flex items-center">
-            <a
-              className="mr-4 text-white opacity-60 hover:opacity-80 focus:opacity-80"
-              href="#"
-            >
-              <span className="[&>svg]:w-5">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  className="h-5 w-5"
-                >
-                  <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" />
-                </svg>
-              </span>
-            </a>
-
-            <div className="relative" data-te-dropdown-ref>
-              <a
-                className="hidden-arrow mr-4 flex items-center text-white opacity-60 hover:opacity-80 focus:opacity-80"
-                href="#"
-                id="dropdownMenuButton1"
-                role="button"
-                data-te-dropdown-toggle-ref
-                aria-expanded="false"
-              >
-                <span className="[&>svg]:w-5">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    className="h-5 w-5"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span className="absolute -mt-2.5 ml-2 rounded-full bg-red-700 px-1.5 py-0 text-xs text-white">
-                  1
-                </span>
-              </a>
-              <ul
-                className="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
-                aria-labelledby="dropdownMenuButton1"
-                data-te-dropdown-menu-ref
-              >
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                  >
-                    Action
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                  >
-                    Another action
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                  >
-                    Something else here
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div className="relative" data-te-dropdown-ref>
-              <a
-                className="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
-                href="#"
-                id="dropdownMenuButton2"
-                role="button"
-                data-te-dropdown-toggle-ref
-                aria-expanded="false"
-              >
-                <img
-                  src="https://tecdn.b-cdn.net/img/new/avatars/2.jpg"
-                  className="rounded-full"
-                  style={{
-                    height: 25,
-                    width: 25,
-                  }}
-                  alt=""
-                  loading="lazy"
-                />
-              </a>
-              <ul
-                className="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
-                aria-labelledby="dropdownMenuButton2"
-                data-te-dropdown-menu-ref
-              >
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                  >
-                    Action
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                  >
-                    Another action
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
-                    href="#"
-                    data-te-dropdown-item-ref
-                  >
-                    Something else here
-                  </a>
-                </li>
-              </ul>
+  return (
+    <div className="h-screen w-screen">
+      <nav className="min-h-14 navbar h-14 w-full p-0 text-neutral-content">
+        <div className="flex h-full w-full items-center pl-8 pr-8">
+          <div className="flex h-full items-center justify-between">
+            <figure onClick={handleClick} className="cursor-pointer">
+              <Image
+                src="assets/images/wave-autoscale_symbol.svg"
+                alt="wave-autoscale_symbol.svg"
+                width={36}
+                height={32}
+                style={{
+                  minWidth: '2.5rem',
+                  maxWidth: '2.5rem',
+                }}
+              />
+            </figure>
+            <div className="ml-10 flex h-full items-center">
+              <Menu />
             </div>
-          </div> */}
+          </div>
         </div>
       </nav>
       <main className="wa-main">{children}</main>

From 29a49dab34772a13aaf279586c97be8c62a827e5 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 20:11:04 +0900
Subject: [PATCH 06/94] feat(web-app): add menu component

---
 core/web-app/src/app/app/menu.tsx | 89 ++++++++++++++++++++-----------
 1 file changed, 59 insertions(+), 30 deletions(-)

diff --git a/core/web-app/src/app/app/menu.tsx b/core/web-app/src/app/app/menu.tsx
index bf482a92..470e45dc 100644
--- a/core/web-app/src/app/app/menu.tsx
+++ b/core/web-app/src/app/app/menu.tsx
@@ -1,71 +1,100 @@
 'use client';
-
 import classNames from 'classnames';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-// TODO
 function getMenuClassNames(currentPathname: string, targetPath?: string) {
-  const COMMON_CLASS_NAMES =
-    'text-white disabled:text-black/30 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400';
-  if (!targetPath) {
-    return COMMON_CLASS_NAMES;
-  }
-  return classNames(COMMON_CLASS_NAMES, {
-    'tab-active font-bold link-primary tab-bordered':
-      currentPathname.indexOf(targetPath) >= 0,
-  });
+  return classNames(
+    !targetPath || currentPathname.indexOf(targetPath) < 0
+      ? 'text-gray-600 pr-4 pl-4'
+      : 'text-gray-1000 pr-4 pl-4'
+  );
 }
 
 export default function Menu() {
   const pathname = usePathname();
   return (
-    <ul
-      className="list-style-none mr-auto flex flex-col pl-8 lg:flex-row"
-      data-te-navbar-nav-ref
-    >
-      <li className="my-4 lg:my-0 lg:pr-2" data-te-nav-item-ref>
+    <ul className="flex h-full flex-row items-center pt-1 lg:flex-row">
+      <li
+        className={classNames(
+          'flex-column flex h-full items-center lg:flex-row',
+          pathname === '/app/autoscaling-history'
+            ? 'border-b-4 border-purple-500'
+            : 'border-b-4 border-white'
+        )}
+      >
         <Link
-          className={getMenuClassNames(pathname, '/app/autoscaling-history')}
+          className={classNames(
+            getMenuClassNames(pathname, '/app/autoscaling-history'),
+            'whitespace-nowrap'
+          )}
           href="/app/autoscaling-history"
-          data-te-nav-link-ref
         >
           Autoscaling History
         </Link>
       </li>
-      <li className="my-4 lg:my-0 lg:pr-2" data-te-nav-item-ref>
+      <li
+        className={classNames(
+          'flex-column flex h-full items-center lg:flex-row',
+          pathname === '/app/planning'
+            ? 'border-b-4 border-purple-500'
+            : 'border-b-4 border-white'
+        )}
+      >
         <Link
-          className={getMenuClassNames(pathname, '/app/planning')}
+          className={classNames(
+            getMenuClassNames(pathname, '/app/planning'),
+            'whitespace-nowrap'
+          )}
           href="/app/planning"
-          data-te-nav-link-ref
         >
           Planning
         </Link>
       </li>
-      <li className="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
+      <li
+        className={classNames(
+          'flex-column flex h-full items-center lg:flex-row',
+          pathname === '/app/metrics'
+            ? 'border-b-4 border-purple-500'
+            : 'border-b-4 border-white'
+        )}
+      >
         <Link
-          className={getMenuClassNames(pathname, '/app/metrics')}
+          className={classNames(
+            getMenuClassNames(pathname, '/app/metrics'),
+            'whitespace-nowrap'
+          )}
           href="/app/metrics"
-          data-te-nav-link-ref
         >
           Metrics
         </Link>
       </li>
-      <li className="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
+      <li
+        className={classNames(
+          'flex-column flex h-full items-center lg:flex-row',
+          pathname === '/app/scaling-components'
+            ? 'border-b-4 border-purple-500'
+            : 'border-b-4 border-white'
+        )}
+      >
         <Link
-          className={getMenuClassNames(pathname, '/app/scaling-components')}
+          className={classNames(
+            getMenuClassNames(pathname, '/app/scaling-components'),
+            'whitespace-nowrap'
+          )}
           href="/app/scaling-components"
-          data-te-nav-link-ref
         >
           Scaling Components
         </Link>
       </li>
-      <li className="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
+      <li className="flex-column flex h-full items-center lg:flex-row">
         <Link
-          className={getMenuClassNames(pathname)}
+          className={classNames(
+            getMenuClassNames(pathname),
+            'whitespace-nowrap'
+          )}
           href="https://github.com/STCLab-Inc/wave-autoscale"
           target="_blank"
-          data-te-nav-link-ref
         >
           Github
         </Link>

From 8be0e8c36be7c21bfd88f757959e465d2023dddc Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 20:14:39 +0900
Subject: [PATCH 07/94] refactor(web-app): refactor menu component

---
 core/web-app/src/app/app/menu.tsx | 120 ++++++++++++------------------
 1 file changed, 48 insertions(+), 72 deletions(-)

diff --git a/core/web-app/src/app/app/menu.tsx b/core/web-app/src/app/app/menu.tsx
index 470e45dc..aefda1d4 100644
--- a/core/web-app/src/app/app/menu.tsx
+++ b/core/web-app/src/app/app/menu.tsx
@@ -11,82 +11,58 @@ function getMenuClassNames(currentPathname: string, targetPath?: string) {
   );
 }
 
-export default function Menu() {
-  const pathname = usePathname();
+function MenuItem({
+  pathname,
+  targetPath,
+  label,
+}: {
+  pathname: string;
+  targetPath: string;
+  label: string;
+}) {
   return (
-    <ul className="flex h-full flex-row items-center pt-1 lg:flex-row">
-      <li
-        className={classNames(
-          'flex-column flex h-full items-center lg:flex-row',
-          pathname === '/app/autoscaling-history'
-            ? 'border-b-4 border-purple-500'
-            : 'border-b-4 border-white'
-        )}
-      >
-        <Link
-          className={classNames(
-            getMenuClassNames(pathname, '/app/autoscaling-history'),
-            'whitespace-nowrap'
-          )}
-          href="/app/autoscaling-history"
-        >
-          Autoscaling History
-        </Link>
-      </li>
-      <li
-        className={classNames(
-          'flex-column flex h-full items-center lg:flex-row',
-          pathname === '/app/planning'
-            ? 'border-b-4 border-purple-500'
-            : 'border-b-4 border-white'
-        )}
-      >
-        <Link
-          className={classNames(
-            getMenuClassNames(pathname, '/app/planning'),
-            'whitespace-nowrap'
-          )}
-          href="/app/planning"
-        >
-          Planning
-        </Link>
-      </li>
-      <li
-        className={classNames(
-          'flex-column flex h-full items-center lg:flex-row',
-          pathname === '/app/metrics'
-            ? 'border-b-4 border-purple-500'
-            : 'border-b-4 border-white'
-        )}
-      >
-        <Link
-          className={classNames(
-            getMenuClassNames(pathname, '/app/metrics'),
-            'whitespace-nowrap'
-          )}
-          href="/app/metrics"
-        >
-          Metrics
-        </Link>
-      </li>
-      <li
+    <li
+      className={classNames(
+        'flex-column flex h-full items-center lg:flex-row',
+        pathname === targetPath
+          ? 'border-b-4 border-purple-500'
+          : 'border-b-4 border-white'
+      )}
+    >
+      <Link
         className={classNames(
-          'flex-column flex h-full items-center lg:flex-row',
-          pathname === '/app/scaling-components'
-            ? 'border-b-4 border-purple-500'
-            : 'border-b-4 border-white'
+          getMenuClassNames(pathname, targetPath),
+          'whitespace-nowrap'
         )}
+        href={targetPath}
       >
-        <Link
-          className={classNames(
-            getMenuClassNames(pathname, '/app/scaling-components'),
-            'whitespace-nowrap'
-          )}
-          href="/app/scaling-components"
-        >
-          Scaling Components
-        </Link>
-      </li>
+        {label}
+      </Link>
+    </li>
+  );
+}
+
+export default function Menu() {
+  const pathname = usePathname();
+
+  return (
+    <ul className="flex h-full flex-row items-center pt-1 lg:flex-row">
+      <MenuItem
+        pathname={pathname}
+        targetPath="/app/autoscaling-history"
+        label="Autoscaling History"
+      />
+      <MenuItem
+        pathname={pathname}
+        targetPath="/app/planning"
+        label="Planning"
+      />
+      <MenuItem pathname={pathname} targetPath="/app/metrics" label="Metrics" />
+      <MenuItem
+        pathname={pathname}
+        targetPath="/app/scaling-components"
+        label="Scaling Components"
+      />
       <li className="flex-column flex h-full items-center lg:flex-row">
         <Link
           className={classNames(

From f6e9d80edd503fef9dc226318d3ed9b6fc5c7d1b Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 23:47:07 +0900
Subject: [PATCH 08/94] fix(web-app): edit svg file location and replace svg
 file

---
 .../assets/images/wave-autoscale_symbol.svg   | 19 +++++++++++++++++++
 .../assets/images/wave-autoscale_text.svg     | 15 +++++++++++++++
 core/web-app/src/app/app/layout.tsx           |  2 +-
 core/web-app/src/app/page.tsx                 |  4 ++--
 4 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 core/web-app/public/assets/images/wave-autoscale_symbol.svg
 create mode 100644 core/web-app/public/assets/images/wave-autoscale_text.svg

diff --git a/core/web-app/public/assets/images/wave-autoscale_symbol.svg b/core/web-app/public/assets/images/wave-autoscale_symbol.svg
new file mode 100644
index 00000000..ad9dd587
--- /dev/null
+++ b/core/web-app/public/assets/images/wave-autoscale_symbol.svg
@@ -0,0 +1,19 @@
+<svg width="1163" height="1024" viewBox="0 0 1163 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 408.757C0 400.341 3.9187 392.406 10.6006 387.29L172.818 263.092C190.607 249.473 216.29 262.156 216.29 284.559V591.586C216.29 600.002 212.372 607.938 205.69 613.053L43.4719 737.251C25.6839 750.87 0 738.187 0 715.784V408.757Z" fill="url(#paint0_linear_603_585)"/>
+<path d="M243.327 514.75C243.327 507.579 246.175 500.703 251.245 495.632L521.608 225.269C538.64 208.237 567.762 220.3 567.762 244.387V543.045C567.762 550.216 564.914 557.093 559.844 562.163L289.481 832.526C272.449 849.558 243.327 837.495 243.327 813.408V514.75Z" fill="url(#paint1_linear_603_585)"/>
+<path d="M513.69 660.07C513.69 652.9 516.538 646.023 521.608 640.953L1116.41 46.1539C1133.44 29.1219 1162.56 41.1846 1162.56 65.2714V363.93C1162.56 371.1 1159.71 377.977 1154.64 383.047L559.844 977.846C542.812 994.878 513.69 982.815 513.69 958.729V660.07Z" fill="url(#paint2_linear_603_585)"/>
+<defs>
+<linearGradient id="paint0_linear_603_585" x1="-1.77763e-06" y1="429.201" x2="216.29" y2="429.201" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3354FF"/>
+<stop offset="1" stop-color="#AD00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_603_585" x1="243.327" y1="437.779" x2="567.762" y2="437.779" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3354FF"/>
+<stop offset="1" stop-color="#AD00FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_603_585" x1="513.69" y1="373.445" x2="1162.56" y2="373.445" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3354FF"/>
+<stop offset="1" stop-color="#AD00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/core/web-app/public/assets/images/wave-autoscale_text.svg b/core/web-app/public/assets/images/wave-autoscale_text.svg
new file mode 100644
index 00000000..5aa1e596
--- /dev/null
+++ b/core/web-app/public/assets/images/wave-autoscale_text.svg
@@ -0,0 +1,15 @@
+<svg width="4282" height="410" viewBox="0 0 4282 410" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M549.797 21.0085L449.588 405.419H336.236L274.905 152.431L211.385 405.419H98.0327L0.561035 21.0085H100.771L156.078 300.829L224.527 21.0085H327.474L393.186 300.829L449.04 21.0085H549.797Z" fill="white"/>
+<path d="M556.236 252.093C556.236 220.698 562.077 193.135 573.759 169.406C585.806 145.677 602.051 127.424 622.495 114.647C642.938 101.87 665.755 95.4812 690.944 95.4812C712.483 95.4812 731.283 99.862 747.346 108.623C763.774 117.385 776.369 128.884 785.13 143.122V99.862H878.769V405.419H785.13V362.159C776.004 376.397 763.226 387.896 746.799 396.658C730.736 405.419 711.935 409.8 690.396 409.8C665.572 409.8 642.938 403.411 622.495 390.634C602.051 377.492 585.806 359.056 573.759 335.327C562.077 311.233 556.236 283.488 556.236 252.093ZM785.13 252.641C785.13 229.277 778.559 210.841 765.417 197.334C752.64 183.826 736.942 177.073 718.324 177.073C699.706 177.073 683.825 183.826 670.683 197.334C657.906 210.476 651.517 228.729 651.517 252.093C651.517 275.457 657.906 294.075 670.683 307.948C683.825 321.455 699.706 328.208 718.324 328.208C736.942 328.208 752.64 321.455 765.417 307.948C778.559 294.44 785.13 276.005 785.13 252.641Z" fill="white"/>
+<path d="M1062.05 317.804L1128.31 99.862H1227.97L1119.55 405.419H1004.01L895.586 99.862H995.795L1062.05 317.804Z" fill="white"/>
+<path d="M1533.52 247.712C1533.52 256.474 1532.97 265.6 1531.88 275.092H1319.96C1321.42 294.075 1327.44 308.678 1338.03 318.899C1348.98 328.756 1362.31 333.684 1378 333.684C1401.37 333.684 1417.61 323.828 1426.74 304.114H1526.4C1521.29 324.193 1511.98 342.263 1498.47 358.326C1485.33 374.389 1468.72 386.984 1448.64 396.11C1428.56 405.237 1406.11 409.8 1381.29 409.8C1351.35 409.8 1324.7 403.411 1301.34 390.634C1277.98 377.857 1259.72 359.604 1246.58 335.875C1233.44 312.146 1226.87 284.401 1226.87 252.641C1226.87 220.88 1233.26 193.135 1246.03 169.406C1259.18 145.677 1277.43 127.424 1300.79 114.647C1324.16 101.87 1350.99 95.4812 1381.29 95.4812C1410.86 95.4812 1437.14 101.687 1460.14 114.099C1483.14 126.512 1501.03 144.217 1513.81 167.216C1526.95 190.215 1533.52 217.047 1533.52 247.712ZM1437.69 223.071C1437.69 207.008 1432.21 194.231 1421.26 184.739C1410.31 175.247 1396.62 170.502 1380.19 170.502C1364.5 170.502 1351.17 175.065 1340.22 184.191C1329.63 193.318 1323.06 206.278 1320.51 223.071H1437.69Z" fill="white"/>
+<path d="M1894.45 337.518H1750.98L1727.98 405.419H1629.96L1769.05 21.0085H1877.48L2016.57 405.419H1917.45L1894.45 337.518ZM1870.36 265.235L1822.72 124.504L1775.62 265.235H1870.36Z" fill="white"/>
+<path d="M2338.72 99.862V405.419H2245.08V363.802C2235.59 377.309 2222.63 388.261 2206.2 396.658C2190.14 404.689 2172.25 408.705 2152.54 408.705C2129.17 408.705 2108.55 403.594 2090.66 393.372C2072.77 382.785 2058.9 367.635 2049.04 347.922C2039.18 328.208 2034.26 305.027 2034.26 278.378V99.862H2127.35V265.783C2127.35 286.226 2132.64 302.107 2143.23 313.423C2153.81 324.74 2168.05 330.399 2185.94 330.399C2204.19 330.399 2218.61 324.74 2229.2 313.423C2239.79 302.107 2245.08 286.226 2245.08 265.783V99.862H2338.72Z" fill="white"/>
+<path d="M2554.38 326.018V405.419H2506.73C2472.78 405.419 2446.32 397.205 2427.33 380.777C2408.35 363.985 2398.86 336.787 2398.86 299.186V177.62H2361.62V99.862H2398.86V25.3893H2492.5V99.862H2553.83V177.62H2492.5V300.281C2492.5 309.408 2494.69 315.979 2499.07 319.995C2503.45 324.01 2510.75 326.018 2520.97 326.018H2554.38Z" fill="white"/>
+<path d="M2723.72 409.8C2693.78 409.8 2666.77 403.411 2642.67 390.634C2618.95 377.857 2600.14 359.604 2586.27 335.875C2572.77 312.146 2566.01 284.401 2566.01 252.641C2566.01 221.245 2572.95 193.683 2586.82 169.954C2600.69 145.86 2619.68 127.424 2643.77 114.647C2667.86 101.87 2694.88 95.4812 2724.81 95.4812C2754.75 95.4812 2781.76 101.87 2805.86 114.647C2829.95 127.424 2848.93 145.86 2862.81 169.954C2876.68 193.683 2883.62 221.245 2883.62 252.641C2883.62 284.036 2876.5 311.781 2862.26 335.875C2848.39 359.604 2829.22 377.857 2804.76 390.634C2780.67 403.411 2753.65 409.8 2723.72 409.8ZM2723.72 328.756C2741.61 328.756 2756.76 322.185 2769.17 309.043C2781.95 295.9 2788.33 277.1 2788.33 252.641C2788.33 228.181 2782.13 209.381 2769.72 196.238C2757.67 183.096 2742.7 176.525 2724.81 176.525C2706.56 176.525 2691.41 183.096 2679.36 196.238C2667.32 209.016 2661.29 227.816 2661.29 252.641C2661.29 277.1 2667.13 295.9 2678.82 309.043C2690.86 322.185 2705.83 328.756 2723.72 328.756Z" fill="white"/>
+<path d="M3035.69 409.8C3009.04 409.8 2985.31 405.237 2964.51 396.11C2943.7 386.984 2927.27 374.571 2915.22 358.874C2903.18 342.811 2896.42 324.923 2894.96 305.21H2987.5C2988.6 315.796 2993.53 324.375 3002.29 330.946C3011.05 337.518 3021.82 340.803 3034.6 340.803C3046.28 340.803 3055.22 338.613 3061.43 334.232C3068 329.486 3071.29 323.463 3071.29 316.161C3071.29 307.4 3066.72 301.011 3057.6 296.996C3048.47 292.615 3033.69 287.869 3013.24 282.758C2991.34 277.647 2973.08 272.354 2958.48 266.878C2943.88 261.037 2931.28 252.093 2920.7 240.046C2910.11 227.634 2904.82 211.023 2904.82 190.215C2904.82 172.692 2909.56 156.812 2919.06 142.574C2928.91 127.972 2943.15 116.472 2961.77 108.076C2980.75 99.6794 3003.2 95.4812 3029.12 95.4812C3067.45 95.4812 3097.57 104.973 3119.47 123.956C3141.74 142.939 3154.52 168.129 3157.81 199.524H3071.29C3069.83 188.937 3065.08 180.541 3057.05 174.335C3049.38 168.129 3039.16 165.026 3026.38 165.026C3015.43 165.026 3007.04 167.216 3001.19 171.597C2995.35 175.612 2992.43 181.271 2992.43 188.572C2992.43 197.334 2997 203.905 3006.12 208.286C3015.61 212.666 3030.22 217.047 3049.93 221.428C3072.56 227.269 3091 233.11 3105.24 238.951C3119.47 244.427 3131.89 253.553 3142.47 266.33C3153.43 278.743 3159.08 295.535 3159.45 316.709C3159.45 334.597 3154.34 350.66 3144.12 364.897C3134.26 378.77 3119.84 389.722 3100.86 397.753C3082.24 405.784 3060.52 409.8 3035.69 409.8Z" fill="white"/>
+<path d="M3176.21 252.641C3176.21 220.88 3182.6 193.135 3195.38 169.406C3208.52 145.677 3226.59 127.424 3249.59 114.647C3272.96 101.87 3299.61 95.4812 3329.54 95.4812C3367.87 95.4812 3399.82 105.52 3425.37 125.599C3451.29 145.677 3468.26 173.97 3476.3 210.476H3376.63C3368.24 187.112 3351.99 175.43 3327.9 175.43C3310.74 175.43 3297.05 182.184 3286.83 195.691C3276.61 208.833 3271.5 227.816 3271.5 252.641C3271.5 277.465 3276.61 296.631 3286.83 310.138C3297.05 323.28 3310.74 329.851 3327.9 329.851C3351.99 329.851 3368.24 318.169 3376.63 294.805H3476.3C3468.26 330.581 3451.29 358.691 3425.37 379.135C3399.45 399.578 3367.51 409.8 3329.54 409.8C3299.61 409.8 3272.96 403.411 3249.59 390.634C3226.59 377.857 3208.52 359.604 3195.38 335.875C3182.6 312.146 3176.21 284.401 3176.21 252.641Z" fill="white"/>
+<path d="M3485.86 252.093C3485.86 220.698 3491.7 193.135 3503.38 169.406C3515.43 145.677 3531.68 127.424 3552.12 114.647C3572.56 101.87 3595.38 95.4812 3620.57 95.4812C3642.11 95.4812 3660.91 99.862 3676.97 108.623C3693.4 117.385 3705.99 128.884 3714.76 143.122V99.862H3808.39V405.419H3714.76V362.159C3705.63 376.397 3692.85 387.896 3676.42 396.658C3660.36 405.419 3641.56 409.8 3620.02 409.8C3595.2 409.8 3572.56 403.411 3552.12 390.634C3531.68 377.492 3515.43 359.056 3503.38 335.327C3491.7 311.233 3485.86 283.488 3485.86 252.093ZM3714.76 252.641C3714.76 229.277 3708.19 210.841 3695.04 197.334C3682.27 183.826 3666.57 177.073 3647.95 177.073C3629.33 177.073 3613.45 183.826 3600.31 197.334C3587.53 210.476 3581.14 228.729 3581.14 252.093C3581.14 275.457 3587.53 294.075 3600.31 307.948C3613.45 321.455 3629.33 328.208 3647.95 328.208C3666.57 328.208 3682.27 321.455 3695.04 307.948C3708.19 294.44 3714.76 276.005 3714.76 252.641Z" fill="white"/>
+<path d="M3947.87 0.199951V405.419H3854.23V0.199951H3947.87Z" fill="white"/>
+<path d="M4281.86 247.712C4281.86 256.474 4281.31 265.6 4280.22 275.092H4068.3C4069.76 294.075 4075.78 308.678 4086.37 318.899C4097.32 328.756 4110.65 333.684 4126.35 333.684C4149.71 333.684 4165.95 323.828 4175.08 304.114H4274.74C4269.63 324.193 4260.32 342.263 4246.82 358.326C4233.67 374.389 4217.06 386.984 4196.98 396.11C4176.91 405.237 4154.46 409.8 4129.63 409.8C4099.7 409.8 4073.05 403.411 4049.68 390.634C4026.32 377.857 4008.07 359.604 3994.92 335.875C3981.78 312.146 3975.21 284.401 3975.21 252.641C3975.21 220.88 3981.6 193.135 3994.38 169.406C4007.52 145.677 4025.77 127.424 4049.13 114.647C4072.5 101.87 4099.33 95.4812 4129.63 95.4812C4159.2 95.4812 4185.49 101.687 4208.48 114.099C4231.48 126.512 4249.37 144.217 4262.15 167.216C4275.29 190.215 4281.86 217.047 4281.86 247.712ZM4186.03 223.071C4186.03 207.008 4180.56 194.231 4169.6 184.739C4158.65 175.247 4144.96 170.502 4128.54 170.502C4112.84 170.502 4099.51 175.065 4088.56 184.191C4077.97 193.318 4071.4 206.278 4068.85 223.071H4186.03Z" fill="white"/>
+</svg>
diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index bfe3450f..6fbbafd2 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -17,7 +17,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
           <div className="flex h-full items-center justify-between">
             <figure onClick={handleClick} className="cursor-pointer">
               <Image
-                src="assets/images/wave-autoscale_symbol.svg"
+                src="/assets/images/wave-autoscale_symbol.svg"
                 alt="wave-autoscale_symbol.svg"
                 width={36}
                 height={32}
diff --git a/core/web-app/src/app/page.tsx b/core/web-app/src/app/page.tsx
index e6ea9413..7507707c 100644
--- a/core/web-app/src/app/page.tsx
+++ b/core/web-app/src/app/page.tsx
@@ -48,7 +48,7 @@ export default function Home() {
           style={{ minWidth: '10rem', minHeight: '10rem' }}
         >
           <Image
-            src="assets/images/wave-autoscale_symbol.svg"
+            src="/assets/images/wave-autoscale_symbol.svg"
             alt="wave-autoscale_symbol.svg"
             width={100}
             height={100}
@@ -57,7 +57,7 @@ export default function Home() {
         </figure>
         <figure className={`bg-black ${paddingClass}`}>
           <Image
-            src="assets/images/wave-autoscale_text.svg"
+            src="/assets/images/wave-autoscale_text.svg"
             alt="wave-autoscale_text.svg"
             width={100}
             height={100}

From 033c0e749fcd257d8fa384f1e994478c3f29f20b Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 23:47:29 +0900
Subject: [PATCH 09/94] feat(web-app): add favicon file

---
 core/web-app/src/app/favicon.ico | Bin 25931 -> 5575 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/core/web-app/src/app/favicon.ico b/core/web-app/src/app/favicon.ico
index 718d6fea4835ec2d246af9800eddb7ffb276240c..7d606e05b5b189ea1b856dbaeef058d490723111 100644
GIT binary patch
literal 5575
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
QIca6t;^^v7{x>b*KNx|Wng9R*

literal 25931
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
LrJugUA?W`A8`#=m


From 7e5b93a1197ccf9158cd52f15890faa8cbbd8ed0 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 23:48:23 +0900
Subject: [PATCH 10/94] feat(web-app): add theme extend properties and edit
 spelling

---
 core/web-app/tailwind.config.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/core/web-app/tailwind.config.js b/core/web-app/tailwind.config.js
index e7ad7315..7f5ad16b 100644
--- a/core/web-app/tailwind.config.js
+++ b/core/web-app/tailwind.config.js
@@ -7,15 +7,31 @@ module.exports = {
   ],
   theme: {
     extend: {
-      // backgroundImage: {
-      //   'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-      //   'gradient-conic':
-      //     'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      // },
+      backgroundColor: {
+        'gray-50': '#FAFAFB',
+        'gray-75': '#F5F5F7',
+        'gray-200': '#E5E6E9',
+        'gray-600': '#7F8083',
+        'gray-1000': '#1A1B1D',
+      },
+      textColor: {
+        'gray-50': '#FAFAFB',
+        'gray-75': '#F5F5F7',
+        'gray-200': '#E5E6E9',
+        'gray-600': '#7F8083',
+        'gray-1000': '#1A1B1D',
+      },
+      borderColor: {
+        'gray-50': '#FAFAFB',
+        'gray-75': '#F5F5F7',
+        'gray-200': '#E5E6E9',
+        'gray-600': '#7F8083',
+        'gray-1000': '#1A1B1D',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
   daisyui: {
-    themmes: ['winter'],
+    themes: ['winter'],
   },
 };

From 10cfb20c785e917dea1d5c4edb917e31e831ddfb Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 13 Nov 2023 23:48:51 +0900
Subject: [PATCH 11/94] feat(web-app): add web-app metadata

---
 core/web-app/src/app/layout.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/core/web-app/src/app/layout.tsx b/core/web-app/src/app/layout.tsx
index 12fff07c..4b8fcf98 100644
--- a/core/web-app/src/app/layout.tsx
+++ b/core/web-app/src/app/layout.tsx
@@ -1,18 +1,19 @@
-import './globals.css'
+import './globals.css';
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: 'Wave Autoscale',
+  description:
+    'Beyond CPU Utilization Scaling, Handle Traffic Surges and Scale with Confidence',
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" data-theme="winter">
       <body>{children}</body>
     </html>
-  )
+  );
 }

From 5857d5cbec7e0925888ce098075cbb448978849f Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 01:19:13 +0900
Subject: [PATCH 12/94] fix(web-app): edit web-app content header

---
 core/web-app/src/app/app/content-header.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/core/web-app/src/app/app/content-header.tsx b/core/web-app/src/app/app/content-header.tsx
index ad8a936c..58df47ef 100644
--- a/core/web-app/src/app/app/content-header.tsx
+++ b/core/web-app/src/app/app/content-header.tsx
@@ -13,17 +13,13 @@ export default function ContentHeader({
   return (
     <div
       className={classNames(
-        'h-22 prose flex w-full min-w-full flex-col border-b border-base-300 bg-slate-50 px-3 pt-3',
-        {
-          'pb-3': !children,
-        }
+        'flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75 '
       )}
     >
-      {/* Plan Title */}
-      <div className="flex-start flex">
-        <h3 className="m-3 flex-1">{title}</h3>
-        {right}
+      <div className="font-Pretendard whitespace-nowrap pl-8 pr-4 text-lg font-semibold text-gray-1000">
+        {title}
       </div>
+      <div className="flex pl-4 pr-8">{right}</div>
       {children}
     </div>
   );

From b52f191ab45970b5d4881a7b51e571af4e384a39 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 03:56:33 +0900
Subject: [PATCH 13/94] feat(web-app): add web-app maximum width with md
 property

---
 core/web-app/src/app/app/layout.tsx | 2 +-
 core/web-app/tailwind.config.js     | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index 6fbbafd2..a4f84d05 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -11,7 +11,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   };
 
   return (
-    <div className="h-screen w-screen">
+    <div className="h-screen w-screen min-w-screen-md">
       <nav className="min-h-14 navbar h-14 w-full p-0 text-neutral-content">
         <div className="flex h-full w-full items-center pl-8 pr-8">
           <div className="flex h-full items-center justify-between">
diff --git a/core/web-app/tailwind.config.js b/core/web-app/tailwind.config.js
index 7f5ad16b..95453448 100644
--- a/core/web-app/tailwind.config.js
+++ b/core/web-app/tailwind.config.js
@@ -28,6 +28,9 @@ module.exports = {
         'gray-600': '#7F8083',
         'gray-1000': '#1A1B1D',
       },
+      minWidth: {
+        'screen-md': '768px',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],

From 528f95e4117c81f22478f31670e43009944d109e Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 03:57:28 +0900
Subject: [PATCH 14/94] feat(web-app): add autoscaling history page header

---
 .../src/app/app/autoscaling-history/page.tsx  | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 714a4a6d..3e6b4bb4 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -50,17 +50,16 @@ export default function AutoscalingHistoryPage({}) {
   }, [fromDayjs, toDayjs]);
 
   return (
-    <main className="relative flex flex-1 flex-col">
+    <main className="h-full w-full">
       <ContentHeader
         title="Autoscaling History"
         right={
           <div className="flex items-center">
-            <div className="form-control">
-              <label className="input-group-sm input-group">
-                <span>From</span>
+            <div className="form-control mr-1">
+              <label className="input-group-sm">
                 <input
                   type="date"
-                  className="input-bordered input input-sm"
+                  className="input-bordered input input-sm max-w-[130px]"
                   max={toDayjs?.format('YYYY-MM-DD')}
                   defaultValue={fromDayjs?.format('YYYY-MM-DD')}
                   onChange={(e) => {
@@ -74,12 +73,12 @@ export default function AutoscalingHistoryPage({}) {
                 />
               </label>
             </div>
-            <div className="form-control ml-4">
-              <label className="input-group-sm input-group">
-                <span>To</span>
+            <span>-</span>
+            <div className="form-control ml-1">
+              <label className="input-group-sm">
                 <input
                   type="date"
-                  className="input-bordered input input-sm"
+                  className="input-bordered input input-sm max-w-[130px]"
                   min={fromDayjs?.format('YYYY-MM-DD')}
                   defaultValue={toDayjs?.format('YYYY-MM-DD')}
                   onChange={(e) => {
@@ -98,7 +97,7 @@ export default function AutoscalingHistoryPage({}) {
       />
       <div className="w-full">
         <HistoryHeatmap history={history} from={fromDayjs} to={toDayjs} />
-        <table className="table-compact table w-full table-fixed">
+        <table className="table-compact w-full">
           {/* head */}
           <thead>
             <tr>
@@ -152,7 +151,7 @@ export default function AutoscalingHistoryPage({}) {
                   </td>
                   <td>
                     {dayjs
-                      .unix(historyItem.created_at)
+                      .unix(historyItem.created_at / 1000)
                       .format('YYYY-MM-DD HH:mm:ss')}
                   </td>
                 </tr>

From a6808fa82b04c7162b0f2417e52a865c8ad530e5 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 03:59:20 +0900
Subject: [PATCH 15/94] refactor(web-app): add history heatmap properties and
 fix to compromise design artifact

---
 .../autoscaling-history/history-heatmap.tsx   | 56 +++++++++++++++----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx b/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
index a2070e1e..bcb0fade 100644
--- a/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
@@ -16,10 +16,9 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
       return [];
     }
     const groupedByDate = groupBy(history, (historyItem) => {
-      return dayjs.unix(historyItem.created_at).format('YYYY-MM-DD');
+      return dayjs.unix(historyItem.created_at / 1000).format('YYYY-MM-DD');
     });
 
-    // Fill in missing dates
     let current = from;
     while (current.isBefore(to) || current.isSame(to)) {
       const date = current.format('YYYY-MM-DD');
@@ -35,7 +34,7 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
       })
       .map(([date, historyItems]) => {
         const groupedByHour = groupBy(historyItems, (historyItem) => {
-          return dayjs.unix(historyItem.created_at).format('HH');
+          return dayjs.unix(historyItem.created_at / 1000).format('HH');
         });
 
         // Fill in missing hours
@@ -54,6 +53,11 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
               return {
                 x: hour,
                 y: historyItems.length,
+                z: historyItems.some(
+                  (historyItem) => historyItem.fail_message !== undefined
+                )
+                  ? 'Failed'
+                  : 'Success',
               };
             }),
         };
@@ -78,14 +82,14 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
       <ResponsiveHeatMapCanvas
         // forceSquare={true}
         data={dataForHeatmap}
-        xInnerPadding={0.1}
-        yInnerPadding={0.1}
-        margin={{ top: 70, right: 80, bottom: 20, left: 120 }}
+        /* xInnerPadding={0.1}
+        yInnerPadding={0.1} */
+        margin={{ top: 50, right: 70, bottom: 30, left: 140 }}
         axisTop={{
           tickSize: 0,
           tickPadding: 10,
           // tickRotation: -90,
-          legend: 'Time',
+          /* legend: 'Time', */
           legendOffset: -40,
           legendPosition: 'middle',
         }}
@@ -93,11 +97,14 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
           tickSize: 0,
           tickPadding: 20,
           tickRotation: 0,
+          format: (value) => {
+            return value.replace(/-/g, '/');
+          },
         }}
         colors={{
           type: 'diverging',
-          divergeAt: 0.4,
-          scheme: 'greens',
+          divergeAt: 0.3,
+          scheme: 'turbo',
           minValue: 0,
           maxValue,
         }}
@@ -107,9 +114,38 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
         enableLabels={true}
         labelTextColor={{
           from: 'color',
-          modifiers: [['brighter', 2]],
+          modifiers: [['brighter', 3]],
         }}
         annotations={[]}
+        tooltip={({ cell }) => {
+          return cell.data.z === 'Failed' ? (
+            <div className="bg-[#E0242E] p-2 text-white shadow-md">
+              <div className="text-xs">
+                Date: {cell.serieId.replace(/-/g, '/')}
+              </div>
+              <div className="text-xs">
+                Time: {cell.data.x}:00~{cell.data.x}:59
+              </div>
+              <div className="text-xs">Activity: {cell.data.y}</div>
+              {cell.data.z === 'Failed' ? (
+                <div className="text-xs">Status: {cell.data.z}</div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="bg-[#074eab] p-2 text-white shadow-md">
+              <div className="text-xs">
+                Date: {cell.serieId.replace(/-/g, '/')}
+              </div>
+              <div className="text-xs">
+                Time: {cell.data.x}:00~{cell.data.x}:59
+              </div>
+              <div className="text-xs">Activity: {cell.data.y}</div>
+              {cell.data.z === 'Failed' ? (
+                <div className="text-xs">Status: {cell.data.z}</div>
+              ) : null}
+            </div>
+          );
+        }}
       />
     </div>
   );

From 37accc7eed5b9efee1c0be42fcbc39011d85a7bf Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 21:11:49 +0900
Subject: [PATCH 16/94] fix(web-app): remove unnecesaary property

---
 core/web-app/src/app/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index a4f84d05..eae1c695 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -12,7 +12,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="h-screen w-screen min-w-screen-md">
-      <nav className="min-h-14 navbar h-14 w-full p-0 text-neutral-content">
+      <nav className="navbar h-14 w-full p-0 text-neutral-content">
         <div className="flex h-full w-full items-center pl-8 pr-8">
           <div className="flex h-full items-center justify-between">
             <figure onClick={handleClick} className="cursor-pointer">

From ce289e11bd8f2b7ba8ec4140150a4fb2b8376bd1 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 22:31:11 +0900
Subject: [PATCH 17/94] feat(web-app): add indent flag to key value renderer
 utility

---
 .../web-app/src/app/app/keyvalue-renderer.tsx | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/core/web-app/src/app/app/keyvalue-renderer.tsx b/core/web-app/src/app/app/keyvalue-renderer.tsx
index 8cfbec3b..11e3ed3a 100644
--- a/core/web-app/src/app/app/keyvalue-renderer.tsx
+++ b/core/web-app/src/app/app/keyvalue-renderer.tsx
@@ -2,19 +2,23 @@ import classNames from 'classnames';
 
 export function renderKeyValuePairs(
   keyValuePairs: { [key: string]: any },
+  indent?: boolean,
   depth = 0
 ) {
+  const indentFlag = indent === undefined || indent === true ? true : false;
+
   return Object.keys(keyValuePairs)
     .sort()
     .map((key) => {
       let value = keyValuePairs[key];
       if (value != null && typeof value === 'object') {
-        value = renderKeyValuePairs(value, 1);
+        value = renderKeyValuePairs(value, indentFlag, 1);
       }
       if (!value) {
         return null;
       }
-      return (
+
+      return indentFlag ? (
         <div
           key={key}
           className={classNames('mb-2', {
@@ -24,16 +28,37 @@ export function renderKeyValuePairs(
           <div className="whitespace-normal break-all font-bold">{key}</div>
           <div className="whitespace-normal break-all ">{value}</div>
         </div>
+      ) : (
+        <div
+          key={key}
+          className={classNames('mb-2 w-full', {
+            'ml-0': depth > 0,
+          })}
+        >
+          <div className="whitespace-normal break-all font-bold">{key}</div>
+          <div className="whitespace-normal break-all ">{value}</div>
+        </div>
       );
     });
 }
 
-export function renderKeyValuePairsWithJson(jsonString: string) {
+export function renderKeyValuePairsWithJson(
+  jsonString: string,
+  indent?: boolean
+) {
+  const indentFlag = indent === undefined || indent === true ? true : false;
+
   try {
     const keyValuePairs = JSON.parse(jsonString);
-    return renderKeyValuePairs(keyValuePairs);
+    return renderKeyValuePairs(keyValuePairs, indentFlag);
   } catch (error) {
     console.log({ error });
   }
-  return <div>{jsonString}</div>;
+  return indentFlag ? (
+    <div>{jsonString}</div>
+  ) : (
+    <div className={classNames('mb-2 w-full')}>
+      <div className="whitespace-normal break-all ">{jsonString}</div>
+    </div>
+  );
 }

From 4678da535b4c2b4bbe4389529636e29dba069d2d Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 22:35:41 +0900
Subject: [PATCH 18/94] feat(web-app): add autoscaling history component

---
 .../src/app/app/autoscaling-history/page.tsx  | 123 ++++++++++++------
 1 file changed, 81 insertions(+), 42 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 3e6b4bb4..de753096 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -97,62 +97,101 @@ export default function AutoscalingHistoryPage({}) {
       />
       <div className="w-full">
         <HistoryHeatmap history={history} from={fromDayjs} to={toDayjs} />
-        <table className="table-compact w-full">
-          {/* head */}
-          <thead>
-            <tr>
-              <th className="w-10">
-                <label>
+        <table className="w-full">
+          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800 ">
+            <tr className="flex h-full w-full ">
+              <th className="mr-4 flex h-full items-center">
+                <label className="flex h-full items-center">
                   <input type="checkbox" className="checkbox" />
                 </label>
               </th>
-              <th className="w-32">Plan ID</th>
-              <th className="w-40">Plan Item</th>
-              <th className="w-40">Metric Values</th>
-              <th className="w-40">Metadata Values</th>
-              <th className="w-40">Fail Message</th>
-              <th className="w-14">Status</th>
-              <th className="w-24">Date</th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-16 flex items-center ">Plan ID</div>
+              </th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-20 flex items-center ">Plan Item</div>
+              </th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-28 flex items-center ">Metric Values</div>
+              </th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-36 flex items-center ">
+                  Metadata Values
+                </div>
+              </th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-28 flex items-center ">Fail Message</div>
+              </th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-14 flex items-center ">Status</div>
+              </th>
+              <th className="mx-4 flex h-full w-full items-center">
+                <div className="min-w-12 flex items-center ">Date</div>
+              </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="text-md min-h-12 flex w-full items-center justify-between border-b border-t px-8 py-0 text-gray-800 ">
             {history.map((historyItem: AutoscalingHistoryDefinitionEx) => {
               return (
-                <tr key={historyItem.id}>
-                  <th>
-                    <label>
+                <tr key={historyItem.id} className="flex h-full w-full py-4">
+                  <td className="mr-4 flex h-full items-center">
+                    <label className="flex h-full items-center">
                       <input type="checkbox" className="checkbox" />
                     </label>
-                  </th>
-                  <td>{historyItem.plan_id}</td>
-                  <td>
-                    {renderKeyValuePairsWithJson(historyItem.plan_item_json)}
                   </td>
-                  <td>
-                    {renderKeyValuePairsWithJson(
-                      historyItem.metric_values_json
-                    )}
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-16 flex items-center ">
+                      {historyItem.plan_id}
+                    </div>
+                  </td>
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-20 flex flex-col items-center ">
+                      {renderKeyValuePairsWithJson(
+                        historyItem.plan_item_json,
+                        false
+                      )}
+                    </div>
+                  </td>
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-28 flex flex-col items-center ">
+                      {renderKeyValuePairsWithJson(
+                        historyItem.metric_values_json,
+                        false
+                      )}
+                    </div>
                   </td>
-                  <td>
-                    {renderKeyValuePairsWithJson(
-                      historyItem.metadata_values_json
-                    )}
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-36 flex flex-col items-center ">
+                      {renderKeyValuePairsWithJson(
+                        historyItem.metadata_values_json,
+                        false
+                      )}
+                    </div>
                   </td>
-                  <td>
-                    {historyItem.fail_message &&
-                      renderKeyValuePairsWithJson(historyItem.fail_message)}
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-28 flex flex-col items-center ">
+                      {historyItem.fail_message &&
+                        renderKeyValuePairsWithJson(
+                          historyItem.fail_message,
+                          false
+                        )}
+                    </div>
                   </td>
-                  <td>
-                    {historyItem.fail_message ? (
-                      <div className="badge-error badge">Failed</div>
-                    ) : (
-                      <div className="badge-success badge">Success</div>
-                    )}
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-14 flex items-center ">
+                      {historyItem.fail_message ? (
+                        <div className="badge-error badge">Failed</div>
+                      ) : (
+                        <div className="badge-success badge">Success</div>
+                      )}
+                    </div>
                   </td>
-                  <td>
-                    {dayjs
-                      .unix(historyItem.created_at / 1000)
-                      .format('YYYY-MM-DD HH:mm:ss')}
+                  <td className="mx-4 flex h-full w-full items-start">
+                    <div className="min-w-12 flex items-center  ">
+                      {dayjs
+                        .unix(historyItem.created_at / 1000)
+                        .format('YYYY-MM-DD HH:mm:ss')}
+                    </div>
                   </td>
                 </tr>
               );

From cd0389707f887b9937549d342f5d7d122818b72a Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 23:02:22 +0900
Subject: [PATCH 19/94] refactor(web-app): use nullish coalescing and optimize
 class name function

---
 .../web-app/src/app/app/keyvalue-renderer.tsx | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/core/web-app/src/app/app/keyvalue-renderer.tsx b/core/web-app/src/app/app/keyvalue-renderer.tsx
index 11e3ed3a..7c3c4246 100644
--- a/core/web-app/src/app/app/keyvalue-renderer.tsx
+++ b/core/web-app/src/app/app/keyvalue-renderer.tsx
@@ -5,7 +5,7 @@ export function renderKeyValuePairs(
   indent?: boolean,
   depth = 0
 ) {
-  const indentFlag = indent === undefined || indent === true ? true : false;
+  const indentFlag = indent ?? true;
 
   return Object.keys(keyValuePairs)
     .sort()
@@ -18,25 +18,15 @@ export function renderKeyValuePairs(
         return null;
       }
 
-      return indentFlag ? (
+      return (
         <div
           key={key}
           className={classNames('mb-2', {
-            'ml-4': depth > 0,
+            'ml-4': indentFlag,
           })}
         >
           <div className="whitespace-normal break-all font-bold">{key}</div>
-          <div className="whitespace-normal break-all ">{value}</div>
-        </div>
-      ) : (
-        <div
-          key={key}
-          className={classNames('mb-2 w-full', {
-            'ml-0': depth > 0,
-          })}
-        >
-          <div className="whitespace-normal break-all font-bold">{key}</div>
-          <div className="whitespace-normal break-all ">{value}</div>
+          <div className="whitespace-normal break-all">{value}</div>
         </div>
       );
     });
@@ -46,7 +36,7 @@ export function renderKeyValuePairsWithJson(
   jsonString: string,
   indent?: boolean
 ) {
-  const indentFlag = indent === undefined || indent === true ? true : false;
+  const indentFlag = indent ?? true;
 
   try {
     const keyValuePairs = JSON.parse(jsonString);
@@ -57,7 +47,7 @@ export function renderKeyValuePairsWithJson(
   return indentFlag ? (
     <div>{jsonString}</div>
   ) : (
-    <div className={classNames('mb-2 w-full')}>
+    <div className="mb-2 w-full">
       <div className="whitespace-normal break-all ">{jsonString}</div>
     </div>
   );

From 9f1cacbb549f0864ce6407ac7cbf5b1e43c04493 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Tue, 14 Nov 2023 23:10:18 +0900
Subject: [PATCH 20/94] fix(web-app): edit omit property to key value renderer
 utility

---
 core/web-app/src/app/app/keyvalue-renderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/keyvalue-renderer.tsx b/core/web-app/src/app/app/keyvalue-renderer.tsx
index 7c3c4246..d618494a 100644
--- a/core/web-app/src/app/app/keyvalue-renderer.tsx
+++ b/core/web-app/src/app/app/keyvalue-renderer.tsx
@@ -21,7 +21,7 @@ export function renderKeyValuePairs(
       return (
         <div
           key={key}
-          className={classNames('mb-2', {
+          className={classNames('mb-2 w-full', {
             'ml-4': indentFlag,
           })}
         >

From 6bfef31764cefafe5062565dd87e4c42cf51f8eb Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 00:30:26 +0900
Subject: [PATCH 21/94] refactor(web-app): edit autoscaling history component
 and edit get history by from to api

---
 .../src/app/app/autoscaling-history/page.tsx  | 229 +++++++++---------
 .../src/services/autoscaling-history/index.ts |   5 +-
 2 files changed, 119 insertions(+), 115 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index de753096..4079eefe 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -1,20 +1,17 @@
 'use client';
+import React, { useEffect, useMemo, useState } from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
+import { decodeTime } from 'ulid';
 
 import ContentHeader from '../content-header';
 import AutoscalingHistoryService from '@/services/autoscaling-history';
-import dayjs, { Dayjs } from 'dayjs';
 import { AutoscalingHistoryDefinition } from '@/types/bindings/autoscaling-history-definition';
-import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
 import HistoryHeatmap from './history-heatmap';
-import { useSearchParams } from 'next/navigation';
-import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-import { decodeTime } from 'ulid';
+import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
 
-async function getHistory(
-  from: Dayjs = dayjs().subtract(7, 'days'),
-  to: Dayjs = dayjs()
-) {
+async function getHistory(from: Dayjs, to: Dayjs) {
   const history = await AutoscalingHistoryService.getHistoryByFromTo(from, to);
   return history;
 }
@@ -26,29 +23,49 @@ interface AutoscalingHistoryDefinitionEx extends AutoscalingHistoryDefinition {
   created_at: number;
 }
 
-export default function AutoscalingHistoryPage({}) {
+export default function AutoscalingHistoryPage() {
   const searchParams = useSearchParams();
-  const from = searchParams.get('from');
-  const to = searchParams.get('to');
-  const fromDayjs = useMemo(() => (from ? dayjs(from) : DEFAULT_FROM), [from]);
-  const toDayjs = useMemo(() => (to ? dayjs(to) : DEFAULT_TO), [to]);
+  const from = searchParams.get('from') || DEFAULT_FROM.format('YYYY-MM-DD');
+  const to = searchParams.get('to') || DEFAULT_TO.format('YYYY-MM-DD');
+  const fromDayjs = useMemo(() => dayjs(from), [from]);
+  const toDayjs = useMemo(() => dayjs(to), [to]);
   const [history, setHistory] = useState<AutoscalingHistoryDefinitionEx[]>([]);
   const router = useRouter();
 
   useEffect(() => {
     const fetchHistory = async () => {
-      let history = await getHistory(fromDayjs, toDayjs);
-      history = history.map((historyItem: AutoscalingHistoryDefinition) => {
-        return {
+      try {
+        let history = await getHistory(fromDayjs, toDayjs);
+        history = history.map((historyItem: AutoscalingHistoryDefinition) => ({
           ...historyItem,
           created_at: decodeTime(historyItem.id),
-        };
-      });
-      setHistory(history);
+        }));
+        setHistory(history);
+      } catch (error) {
+        console.error({ error });
+      }
     };
     fetchHistory();
   }, [fromDayjs, toDayjs]);
 
+  const handleFromDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newFromDate = dayjs(e.target.value);
+    router.push(
+      `/app/autoscaling-history?from=${newFromDate.format(
+        'YYYY-MM-DD'
+      )}&to=${to}`
+    );
+  };
+
+  const handleToDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newToDate = dayjs(e.target.value);
+    router.push(
+      `/app/autoscaling-history?from=${from}&to=${newToDate.format(
+        'YYYY-MM-DD'
+      )}`
+    );
+  };
+
   return (
     <main className="h-full w-full">
       <ContentHeader
@@ -60,16 +77,9 @@ export default function AutoscalingHistoryPage({}) {
                 <input
                   type="date"
                   className="input-bordered input input-sm max-w-[130px]"
-                  max={toDayjs?.format('YYYY-MM-DD')}
-                  defaultValue={fromDayjs?.format('YYYY-MM-DD')}
-                  onChange={(e) => {
-                    const from = dayjs(e.target.value);
-                    router.push(
-                      `/app/autoscaling-history?from=${from.format(
-                        'YYYY-MM-DD'
-                      )}&to=${toDayjs?.format('YYYY-MM-DD')}`
-                    );
-                  }}
+                  max={toDayjs.format('YYYY-MM-DD')}
+                  value={from}
+                  onChange={handleFromDateChange}
                 />
               </label>
             </div>
@@ -79,16 +89,9 @@ export default function AutoscalingHistoryPage({}) {
                 <input
                   type="date"
                   className="input-bordered input input-sm max-w-[130px]"
-                  min={fromDayjs?.format('YYYY-MM-DD')}
-                  defaultValue={toDayjs?.format('YYYY-MM-DD')}
-                  onChange={(e) => {
-                    const to = dayjs(e.target.value);
-                    router.push(
-                      `/app/autoscaling-history?from=${fromDayjs?.format(
-                        'YYYY-MM-DD'
-                      )}&to=${to.format('YYYY-MM-DD')}`
-                    );
-                  }}
+                  min={from}
+                  value={to}
+                  onChange={handleToDateChange}
                 />
               </label>
             </div>
@@ -98,104 +101,102 @@ export default function AutoscalingHistoryPage({}) {
       <div className="w-full">
         <HistoryHeatmap history={history} from={fromDayjs} to={toDayjs} />
         <table className="w-full">
-          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800 ">
-            <tr className="flex h-full w-full ">
+          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
+            <tr className="flex h-full w-full">
               <th className="mr-4 flex h-full items-center">
                 <label className="flex h-full items-center">
                   <input type="checkbox" className="checkbox" />
                 </label>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-16 flex items-center ">Plan ID</div>
+                <div className="min-w-16 flex items-center">Plan ID</div>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-20 flex items-center ">Plan Item</div>
+                <div className="min-w-20 flex items-center">Plan Item</div>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-28 flex items-center ">Metric Values</div>
+                <div className="min-w-28 flex items-center">Metric Values</div>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-36 flex items-center ">
+                <div className="min-w-36 flex items-center">
                   Metadata Values
                 </div>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-28 flex items-center ">Fail Message</div>
+                <div className="min-w-28 flex items-center">Fail Message</div>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-14 flex items-center ">Status</div>
+                <div className="min-w-14 flex items-center">Status</div>
               </th>
               <th className="mx-4 flex h-full w-full items-center">
-                <div className="min-w-12 flex items-center ">Date</div>
+                <div className="min-w-12 flex items-center">Date</div>
               </th>
             </tr>
           </thead>
-          <tbody className="text-md min-h-12 flex w-full items-center justify-between border-b border-t px-8 py-0 text-gray-800 ">
-            {history.map((historyItem: AutoscalingHistoryDefinitionEx) => {
-              return (
-                <tr key={historyItem.id} className="flex h-full w-full py-4">
-                  <td className="mr-4 flex h-full items-center">
-                    <label className="flex h-full items-center">
-                      <input type="checkbox" className="checkbox" />
-                    </label>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-16 flex items-center ">
-                      {historyItem.plan_id}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-20 flex flex-col items-center ">
-                      {renderKeyValuePairsWithJson(
-                        historyItem.plan_item_json,
-                        false
-                      )}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-28 flex flex-col items-center ">
-                      {renderKeyValuePairsWithJson(
-                        historyItem.metric_values_json,
-                        false
-                      )}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-36 flex flex-col items-center ">
-                      {renderKeyValuePairsWithJson(
-                        historyItem.metadata_values_json,
+          <tbody className="text-md min-h-12 flex w-full items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+            {history.map((historyItem: AutoscalingHistoryDefinitionEx) => (
+              <tr key={historyItem.id} className="flex h-full w-full py-4">
+                <td className="mr-4 flex h-full items-center">
+                  <label className="flex h-full items-center">
+                    <input type="checkbox" className="checkbox" />
+                  </label>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-16 flex items-center">
+                    {historyItem.plan_id}
+                  </div>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-20 flex flex-col items-center">
+                    {renderKeyValuePairsWithJson(
+                      historyItem.plan_item_json,
+                      false
+                    )}
+                  </div>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-28 flex flex-col items-center">
+                    {renderKeyValuePairsWithJson(
+                      historyItem.metric_values_json,
+                      false
+                    )}
+                  </div>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-36 flex flex-col items-center">
+                    {renderKeyValuePairsWithJson(
+                      historyItem.metadata_values_json,
+                      false
+                    )}
+                  </div>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-28 flex flex-col items-center">
+                    {historyItem.fail_message &&
+                      renderKeyValuePairsWithJson(
+                        historyItem.fail_message,
                         false
                       )}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-28 flex flex-col items-center ">
-                      {historyItem.fail_message &&
-                        renderKeyValuePairsWithJson(
-                          historyItem.fail_message,
-                          false
-                        )}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-14 flex items-center ">
-                      {historyItem.fail_message ? (
-                        <div className="badge-error badge">Failed</div>
-                      ) : (
-                        <div className="badge-success badge">Success</div>
-                      )}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full items-start">
-                    <div className="min-w-12 flex items-center  ">
-                      {dayjs
-                        .unix(historyItem.created_at / 1000)
-                        .format('YYYY-MM-DD HH:mm:ss')}
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
+                  </div>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-14 flex items-center">
+                    {historyItem.fail_message ? (
+                      <div className="badge-error badge">Failed</div>
+                    ) : (
+                      <div className="badge-success badge">Success</div>
+                    )}
+                  </div>
+                </td>
+                <td className="mx-4 flex h-full w-full items-start">
+                  <div className="min-w-12 flex items-center">
+                    {dayjs
+                      .unix(historyItem.created_at / 1000)
+                      .format('YYYY-MM-DD HH:mm:ss')}
+                  </div>
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/core/web-app/src/services/autoscaling-history/index.ts b/core/web-app/src/services/autoscaling-history/index.ts
index 6a29ca83..a4fd9b8c 100644
--- a/core/web-app/src/services/autoscaling-history/index.ts
+++ b/core/web-app/src/services/autoscaling-history/index.ts
@@ -3,8 +3,11 @@ import { Dayjs } from 'dayjs';
 
 class AutoscalingHistoryServiceClass {
   async getHistoryByFromTo(from: Dayjs, to: Dayjs) {
+    /* TODO */
     const response = await DataLayer.get(
-      `/api/autoscaling-history?from=${from.toISOString()}&to=${to.toISOString()}`
+      `/api/autoscaling-history?from=${
+        from.format('YYYY-MM-DDTHH:mm:ss') + '.000Z'
+      }&to=${to.format('YYYY-MM-DDTHH:mm:ss') + '.000Z'}`
     );
     return response.data;
   }

From 7154852611fa35803649f8157959f3cf5d344f10 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 00:38:48 +0900
Subject: [PATCH 22/94] refactor(web-app): content header using interface

---
 core/web-app/src/app/app/content-header.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/core/web-app/src/app/app/content-header.tsx b/core/web-app/src/app/app/content-header.tsx
index 58df47ef..a08ee643 100644
--- a/core/web-app/src/app/app/content-header.tsx
+++ b/core/web-app/src/app/app/content-header.tsx
@@ -1,21 +1,18 @@
-import classNames from 'classnames';
 import { ReactNode } from 'react';
 
+interface ContentHeaderProps {
+  title: string;
+  children?: ReactNode;
+  right?: ReactNode;
+}
+
 export default function ContentHeader({
   title,
   children,
   right,
-}: {
-  title: string;
-  children?: ReactNode;
-  right?: ReactNode;
-}) {
+}: ContentHeaderProps) {
   return (
-    <div
-      className={classNames(
-        'flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75 '
-      )}
-    >
+    <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75">
       <div className="font-Pretendard whitespace-nowrap pl-8 pr-4 text-lg font-semibold text-gray-1000">
         {title}
       </div>

From c41aaea67d966a95cded3182225504972979c6d7 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 01:02:14 +0900
Subject: [PATCH 23/94] refactor(web-app): refactor history heat map component

---
 .../autoscaling-history/history-heatmap.tsx   | 74 +++++++------------
 1 file changed, 27 insertions(+), 47 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx b/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
index bcb0fade..2eae2d71 100644
--- a/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { ResponsiveHeatMapCanvas } from '@nivo/heatmap';
 import dayjs, { Dayjs } from 'dayjs';
 import { groupBy } from 'lodash';
@@ -10,14 +8,16 @@ interface HistoryHeatmapProps {
   from: Dayjs;
   to: Dayjs;
 }
+
 function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
   const dataForHeatmap = useMemo(() => {
     if (!history) {
       return [];
     }
-    const groupedByDate = groupBy(history, (historyItem) => {
-      return dayjs.unix(historyItem.created_at / 1000).format('YYYY-MM-DD');
-    });
+
+    const groupedByDate = groupBy(history, (historyItem) =>
+      dayjs.unix(historyItem.created_at / 1000).format('YYYY-MM-DD')
+    );
 
     let current = from;
     while (current.isBefore(to) || current.isSame(to)) {
@@ -29,15 +29,12 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
     }
 
     const data = Object.entries(groupedByDate)
-      .sort(([dateA], [dateB]) => {
-        return dateA < dateB ? -1 : 1;
-      })
+      .sort(([dateA], [dateB]) => (dateA < dateB ? -1 : 1))
       .map(([date, historyItems]) => {
-        const groupedByHour = groupBy(historyItems, (historyItem) => {
-          return dayjs.unix(historyItem.created_at / 1000).format('HH');
-        });
+        const groupedByHour = groupBy(historyItems, (historyItem) =>
+          dayjs.unix(historyItem.created_at / 1000).format('HH')
+        );
 
-        // Fill in missing hours
         for (let i = 0; i < 24; i++) {
           const hour = i.toString().padStart(2, '0');
           if (!groupedByHour[hour]) {
@@ -62,6 +59,7 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
             }),
         };
       });
+
     return data;
   }, [history, from, to]);
 
@@ -80,16 +78,11 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
   return (
     <div className="h-80 w-full">
       <ResponsiveHeatMapCanvas
-        // forceSquare={true}
         data={dataForHeatmap}
-        /* xInnerPadding={0.1}
-        yInnerPadding={0.1} */
         margin={{ top: 50, right: 70, bottom: 30, left: 140 }}
         axisTop={{
           tickSize: 0,
           tickPadding: 10,
-          // tickRotation: -90,
-          /* legend: 'Time', */
           legendOffset: -40,
           legendPosition: 'middle',
         }}
@@ -97,9 +90,7 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
           tickSize: 0,
           tickPadding: 20,
           tickRotation: 0,
-          format: (value) => {
-            return value.replace(/-/g, '/');
-          },
+          format: (value) => value.replace(/-/g, '/'),
         }}
         colors={{
           type: 'diverging',
@@ -117,35 +108,24 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
           modifiers: [['brighter', 3]],
         }}
         annotations={[]}
-        tooltip={({ cell }) => {
-          return cell.data.z === 'Failed' ? (
-            <div className="bg-[#E0242E] p-2 text-white shadow-md">
-              <div className="text-xs">
-                Date: {cell.serieId.replace(/-/g, '/')}
-              </div>
-              <div className="text-xs">
-                Time: {cell.data.x}:00~{cell.data.x}:59
-              </div>
-              <div className="text-xs">Activity: {cell.data.y}</div>
-              {cell.data.z === 'Failed' ? (
-                <div className="text-xs">Status: {cell.data.z}</div>
-              ) : null}
+        tooltip={({ cell }) => (
+          <div
+            className={`bg-${
+              cell.data.z === 'Failed' ? '[#E0242E]' : '[#074eab]'
+            } p-2 text-white shadow-md`}
+          >
+            <div className="text-xs">
+              Date: {cell.serieId.replace(/-/g, '/')}
             </div>
-          ) : (
-            <div className="bg-[#074eab] p-2 text-white shadow-md">
-              <div className="text-xs">
-                Date: {cell.serieId.replace(/-/g, '/')}
-              </div>
-              <div className="text-xs">
-                Time: {cell.data.x}:00~{cell.data.x}:59
-              </div>
-              <div className="text-xs">Activity: {cell.data.y}</div>
-              {cell.data.z === 'Failed' ? (
-                <div className="text-xs">Status: {cell.data.z}</div>
-              ) : null}
+            <div className="text-xs">
+              Time: {cell.data.x}:00~{cell.data.x}:59
             </div>
-          );
-        }}
+            <div className="text-xs">Activity: {cell.data.y}</div>
+            {cell.data.z === 'Failed' ? (
+              <div className="text-xs">Status: {cell.data.z}</div>
+            ) : null}
+          </div>
+        )}
       />
     </div>
   );

From 6e0562c4e6eaa761fe7371e732626fa76cad53ac Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 01:30:10 +0900
Subject: [PATCH 24/94] feat(web-app): add flex weight to autoscaling history
 component

---
 .../src/app/app/autoscaling-history/page.tsx  | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 4079eefe..bc49a811 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -103,32 +103,32 @@ export default function AutoscalingHistoryPage() {
         <table className="w-full">
           <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
             <tr className="flex h-full w-full">
-              <th className="mr-4 flex h-full items-center">
+              <th className="mr-4 flex h-full flex-1 items-center">
                 <label className="flex h-full items-center">
                   <input type="checkbox" className="checkbox" />
                 </label>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-3 items-center">
                 <div className="min-w-16 flex items-center">Plan ID</div>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-10 items-center">
                 <div className="min-w-20 flex items-center">Plan Item</div>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-8 items-center">
                 <div className="min-w-28 flex items-center">Metric Values</div>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-8 items-center">
                 <div className="min-w-36 flex items-center">
                   Metadata Values
                 </div>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-8 items-center">
                 <div className="min-w-28 flex items-center">Fail Message</div>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-2 items-center">
                 <div className="min-w-14 flex items-center">Status</div>
               </th>
-              <th className="mx-4 flex h-full w-full items-center">
+              <th className="mx-4 flex h-full w-full flex-5 items-center">
                 <div className="min-w-12 flex items-center">Date</div>
               </th>
             </tr>
@@ -136,17 +136,17 @@ export default function AutoscalingHistoryPage() {
           <tbody className="text-md min-h-12 flex w-full items-center justify-between border-b border-t px-8 py-0 text-gray-800">
             {history.map((historyItem: AutoscalingHistoryDefinitionEx) => (
               <tr key={historyItem.id} className="flex h-full w-full py-4">
-                <td className="mr-4 flex h-full items-center">
+                <td className="mr-4 flex h-full flex-1 items-center">
                   <label className="flex h-full items-center">
                     <input type="checkbox" className="checkbox" />
                   </label>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
-                  <div className="min-w-16 flex items-center">
+                <td className="mx-4 flex h-full w-full flex-3 items-start">
+                  <div className="min-w-16 flex items-center break-all">
                     {historyItem.plan_id}
                   </div>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
+                <td className="mx-4 flex h-full w-full flex-10 items-start">
                   <div className="min-w-20 flex flex-col items-center">
                     {renderKeyValuePairsWithJson(
                       historyItem.plan_item_json,
@@ -154,7 +154,7 @@ export default function AutoscalingHistoryPage() {
                     )}
                   </div>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
+                <td className="mx-4 flex h-full w-full flex-8 items-start">
                   <div className="min-w-28 flex flex-col items-center">
                     {renderKeyValuePairsWithJson(
                       historyItem.metric_values_json,
@@ -162,7 +162,7 @@ export default function AutoscalingHistoryPage() {
                     )}
                   </div>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
+                <td className="mx-4 flex h-full w-full flex-8 items-start">
                   <div className="min-w-36 flex flex-col items-center">
                     {renderKeyValuePairsWithJson(
                       historyItem.metadata_values_json,
@@ -170,7 +170,7 @@ export default function AutoscalingHistoryPage() {
                     )}
                   </div>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
+                <td className="mx-4 flex h-full w-full flex-8 items-start">
                   <div className="min-w-28 flex flex-col items-center">
                     {historyItem.fail_message &&
                       renderKeyValuePairsWithJson(
@@ -179,7 +179,7 @@ export default function AutoscalingHistoryPage() {
                       )}
                   </div>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
+                <td className="mx-4 flex h-full w-full flex-2 items-start">
                   <div className="min-w-14 flex items-center">
                     {historyItem.fail_message ? (
                       <div className="badge-error badge">Failed</div>
@@ -188,8 +188,8 @@ export default function AutoscalingHistoryPage() {
                     )}
                   </div>
                 </td>
-                <td className="mx-4 flex h-full w-full items-start">
-                  <div className="min-w-12 flex items-center">
+                <td className="mx-4 flex h-full w-full flex-5 items-start">
+                  <div className="min-w-12 flex items-center break-all">
                     {dayjs
                       .unix(historyItem.created_at / 1000)
                       .format('YYYY-MM-DD HH:mm:ss')}

From dbef0d1d75b889c9e0e84404134da835f7145f20 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 01:30:50 +0900
Subject: [PATCH 25/94] fix(web-app): edit back ground bug from tailwind css

---
 .../src/app/app/autoscaling-history/history-heatmap.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx b/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
index 2eae2d71..6ca856b8 100644
--- a/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx
@@ -110,9 +110,9 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
         annotations={[]}
         tooltip={({ cell }) => (
           <div
-            className={`bg-${
-              cell.data.z === 'Failed' ? '[#E0242E]' : '[#074eab]'
-            } p-2 text-white shadow-md`}
+            className={`p-2 text-white shadow-md ${
+              cell.data.z === 'Failed' ? 'bg-[#E0242E]' : 'bg-[#074EAB]'
+            }`}
           >
             <div className="text-xs">
               Date: {cell.serieId.replace(/-/g, '/')}

From 0819b54080786504c4890bc080cc97f0b47683e8 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 01:53:10 +0900
Subject: [PATCH 26/94] feat(web-app): add tailwind configuration properties

---
 core/web-app/tailwind.config.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/core/web-app/tailwind.config.js b/core/web-app/tailwind.config.js
index 95453448..2aef5ed7 100644
--- a/core/web-app/tailwind.config.js
+++ b/core/web-app/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
         'gray-75': '#F5F5F7',
         'gray-200': '#E5E6E9',
         'gray-600': '#7F8083',
+        'gray-800': '#4B4C4F',
         'gray-1000': '#1A1B1D',
       },
       textColor: {
@@ -19,6 +20,7 @@ module.exports = {
         'gray-75': '#F5F5F7',
         'gray-200': '#E5E6E9',
         'gray-600': '#7F8083',
+        'gray-800': '#4B4C4F',
         'gray-1000': '#1A1B1D',
       },
       borderColor: {
@@ -26,11 +28,24 @@ module.exports = {
         'gray-75': '#F5F5F7',
         'gray-200': '#E5E6E9',
         'gray-600': '#7F8083',
+        'gray-800': '#4B4C4F',
         'gray-1000': '#1A1B1D',
       },
       minWidth: {
         'screen-md': '768px',
       },
+      flex: {
+        1: '1 1 0%',
+        2: '2 2 0%',
+        3: '3 3 0%',
+        4: '4 4 0%',
+        5: '5 5 0%',
+        6: '6 6 0%',
+        7: '7 7 0%',
+        8: '8 8 0%',
+        9: '9 9 0%',
+        10: '10 10 0%',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],

From 5eed70984d7325ccbec9db0bf1715a1b56537303 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 01:53:49 +0900
Subject: [PATCH 27/94] fix(web-app): prevent possible error log for data
 compatibility

---
 core/web-app/src/app/app/keyvalue-renderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/keyvalue-renderer.tsx b/core/web-app/src/app/app/keyvalue-renderer.tsx
index d618494a..2e569b3b 100644
--- a/core/web-app/src/app/app/keyvalue-renderer.tsx
+++ b/core/web-app/src/app/app/keyvalue-renderer.tsx
@@ -42,7 +42,7 @@ export function renderKeyValuePairsWithJson(
     const keyValuePairs = JSON.parse(jsonString);
     return renderKeyValuePairs(keyValuePairs, indentFlag);
   } catch (error) {
-    console.log({ error });
+    /* console.log({ error }); */
   }
   return indentFlag ? (
     <div>{jsonString}</div>

From b208ad13c2b384398879bd7e3d33dce78f3d8f7e Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 01:54:30 +0900
Subject: [PATCH 28/94] feat(web-app): add check all function to autoscaling
 history component

---
 .../src/app/app/autoscaling-history/page.tsx  | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index bc49a811..b819df95 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -21,6 +21,7 @@ const DEFAULT_TO = dayjs();
 
 interface AutoscalingHistoryDefinitionEx extends AutoscalingHistoryDefinition {
   created_at: number;
+  isChecked: boolean;
 }
 
 export default function AutoscalingHistoryPage() {
@@ -66,6 +67,18 @@ export default function AutoscalingHistoryPage() {
     );
   };
 
+  const [checkAllFlag, setCheckAllFlag] = useState(false);
+
+  const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    setCheckAllFlag(checked);
+    const updatedHistory = history.map((historyItem) => ({
+      ...historyItem,
+      isChecked: checked,
+    }));
+    setHistory(updatedHistory);
+  };
+
   return (
     <main className="h-full w-full">
       <ContentHeader
@@ -105,7 +118,12 @@ export default function AutoscalingHistoryPage() {
             <tr className="flex h-full w-full">
               <th className="mr-4 flex h-full flex-1 items-center">
                 <label className="flex h-full items-center">
-                  <input type="checkbox" className="checkbox" />
+                  <input
+                    type="checkbox"
+                    className="checkbox"
+                    checked={checkAllFlag}
+                    onChange={handleCheckAllChange}
+                  />
                 </label>
               </th>
               <th className="mx-4 flex h-full w-full flex-3 items-center">
@@ -138,7 +156,20 @@ export default function AutoscalingHistoryPage() {
               <tr key={historyItem.id} className="flex h-full w-full py-4">
                 <td className="mr-4 flex h-full flex-1 items-center">
                   <label className="flex h-full items-center">
-                    <input type="checkbox" className="checkbox" />
+                    <input
+                      type="checkbox"
+                      className="checkbox"
+                      checked={historyItem.isChecked}
+                      onChange={(e) => {
+                        const checked = e.target.checked;
+                        const updatedHistory = history.map((item) =>
+                          item.id === historyItem.id
+                            ? { ...item, isChecked: checked }
+                            : item
+                        );
+                        setHistory(updatedHistory);
+                      }}
+                    />
                   </label>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-3 items-start">

From 9a1872f0ca284e6cf4a32511463c5375bbd637dc Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 02:01:55 +0900
Subject: [PATCH 29/94] fix(web-app): edit priority value for folded situation
 in largest contentful paint

---
 core/web-app/src/app/app/layout.tsx | 1 +
 core/web-app/src/app/page.tsx       | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index eae1c695..04b76d00 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -19,6 +19,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
               <Image
                 src="/assets/images/wave-autoscale_symbol.svg"
                 alt="wave-autoscale_symbol.svg"
+                priority={true}
                 width={36}
                 height={32}
                 style={{
diff --git a/core/web-app/src/app/page.tsx b/core/web-app/src/app/page.tsx
index 7507707c..e843c69f 100644
--- a/core/web-app/src/app/page.tsx
+++ b/core/web-app/src/app/page.tsx
@@ -50,6 +50,7 @@ export default function Home() {
           <Image
             src="/assets/images/wave-autoscale_symbol.svg"
             alt="wave-autoscale_symbol.svg"
+            priority={true}
             width={100}
             height={100}
             style={{ minWidth: '5rem', maxWidth: '5rem' }}
@@ -59,6 +60,7 @@ export default function Home() {
           <Image
             src="/assets/images/wave-autoscale_text.svg"
             alt="wave-autoscale_text.svg"
+            priority={true}
             width={100}
             height={100}
           />

From 5c8ae8a8ae89d49fd1869cb36e739ea525dbc046 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 03:23:25 +0900
Subject: [PATCH 30/94] feat(web-app): add badge design in autoscaling history
 component

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index b819df95..f5992415 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -213,9 +213,13 @@ export default function AutoscalingHistoryPage() {
                 <td className="mx-4 flex h-full w-full flex-2 items-start">
                   <div className="min-w-14 flex items-center">
                     {historyItem.fail_message ? (
-                      <div className="badge-error badge">Failed</div>
+                      <div className="badge-error badge bg-[#E0242E] text-white">
+                        Failed
+                      </div>
                     ) : (
-                      <div className="badge-success badge">Success</div>
+                      <div className="badge-success badge bg-[#074EAB] text-white">
+                        Success
+                      </div>
                     )}
                   </div>
                 </td>

From 714e0fdbc429b9e23f557947790b48c2f1b94d1e Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 03:24:02 +0900
Subject: [PATCH 31/94] feat(web-app): add default page

---
 core/web-app/src/app/app/page.tsx | 100 +++++++++++++++++++++++++++++-
 1 file changed, 98 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/page.tsx b/core/web-app/src/app/app/page.tsx
index ee0b48ec..33807307 100644
--- a/core/web-app/src/app/app/page.tsx
+++ b/core/web-app/src/app/app/page.tsx
@@ -1,7 +1,103 @@
+import Link from 'next/link';
+
 export default function AppPage() {
   return (
-    <div>
-      <h1 className="text-2xl font-bold">Page 1</h1>
+    <div className="h-full bg-gradient-to-b from-blue-700 via-blue-500 to-blue-900 text-white">
+      {/* Header */}
+      <header className="bg-blue-800 px-10 py-4">
+        <div className="container mx-auto flex flex-col items-center justify-between sm:flex-row">
+          <Link href="https://www.waveautoscale.com/">
+            <button className="text-2xl font-extrabold hover:text-blue-300">
+              Wave Autoscale
+            </button>
+          </Link>
+          <ul className="flex space-x-4 text-xl">
+            <li>
+              <Link href="https://www.waveautoscale.com/about/introduction">
+                <button className="hover:text-blue-300">Introduction</button>
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.waveautoscale.com/about/key-features">
+                <button className="hover:text-blue-300">Features</button>
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.waveautoscale.com/about/principles">
+                <button className="hover:text-blue-300">Principles</button>
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.waveautoscale.com/blog">
+                <button className="hover:text-blue-300">Blog</button>
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="container mx-auto px-10 py-12 text-center">
+        <h1 className="mb-6 text-2xl font-extrabold text-white sm:text-3xl">
+          Autoscale Your Applications with Confidence
+        </h1>
+        <p className="mb-10 text-lg sm:text-2xl">
+          Experience high availability, scalability, and performance like never
+          before.
+        </p>
+        <Link href="https://github.com/stclab-inc/wave-autoscale">
+          <button className="rounded-full bg-blue-500 px-8 py-3 text-xl font-semibold text-white transition duration-300 hover:bg-blue-600 sm:py-4">
+            Get Started
+          </button>
+        </Link>
+      </section>
+
+      {/* Features Section */}
+      <section className="bg-blue-800 px-10 py-10 sm:py-16 lg:py-20">
+        <div className="container mx-auto text-center">
+          <h2 className="mb-12 text-2xl font-extrabold text-white sm:text-3xl lg:text-3xl">
+            Discover Our Features
+          </h2>
+          <div className="grid grid-cols-1 gap-6 sm:gap-12 md:grid-cols-2 lg:grid-cols-3">
+            {/* Feature 1 */}
+            <div className="rounded-lg bg-blue-900 p-6 sm:p-8">
+              <h3 className="mb-3 text-2xl font-semibold sm:text-2xl">
+                Auto Scaling
+              </h3>
+              <p className="text-lg sm:text-xl">
+                Effortlessly adjust resources based on demand.
+              </p>
+            </div>
+            {/* Feature 2 */}
+            <div className="rounded-lg bg-blue-900 p-6 sm:p-8">
+              <h3 className="mb-3 text-2xl font-semibold sm:text-2xl">
+                High Availability
+              </h3>
+              <p className="text-lg sm:text-xl">
+                Ensure your applications are always available.
+              </p>
+            </div>
+            {/* Feature 3 */}
+            <div className="rounded-lg bg-blue-900 p-6 sm:p-8">
+              <h3 className="mb-3 text-2xl font-semibold sm:text-2xl">
+                Scalability
+              </h3>
+              <p className="text-lg sm:text-xl">
+                Scale your applications effortlessly as you grow.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-blue-900 py-6 text-center sm:py-8">
+        <div className="container mx-auto">
+          <p className="text-lg">
+            &copy; 2023 STCLab Inc. All rights reserved.
+          </p>
+        </div>
+      </footer>
     </div>
   );
 }

From 378da4996f19fddf20f71b6cd08a7a0f07a7a87d Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Wed, 15 Nov 2023 13:21:24 +0900
Subject: [PATCH 32/94] fix(web-app): edit date format

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index f5992415..b83a291f 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -227,7 +227,7 @@ export default function AutoscalingHistoryPage() {
                   <div className="min-w-12 flex items-center break-all">
                     {dayjs
                       .unix(historyItem.created_at / 1000)
-                      .format('YYYY-MM-DD HH:mm:ss')}
+                      .format('YYYY/MM/DD HH:mm:ss')}
                   </div>
                 </td>
               </tr>

From 8a0c81f2be77b0545cee9f6af6dee1520c6856d1 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Thu, 16 Nov 2023 01:04:36 +0900
Subject: [PATCH 33/94] fix(web-app): edit path include expression

---
 core/web-app/src/app/app/menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/menu.tsx b/core/web-app/src/app/app/menu.tsx
index aefda1d4..d3c6a972 100644
--- a/core/web-app/src/app/app/menu.tsx
+++ b/core/web-app/src/app/app/menu.tsx
@@ -24,7 +24,7 @@ function MenuItem({
     <li
       className={classNames(
         'flex-column flex h-full items-center lg:flex-row',
-        pathname === targetPath
+        pathname.includes(targetPath)
           ? 'border-b-4 border-purple-500'
           : 'border-b-4 border-white'
       )}

From 5b4090a84328978c7d8dfdcadf10a8ba5232b927 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 20:12:04 +0900
Subject: [PATCH 34/94] feat(web-app): add tailwind css config with red, gray,
 and blue for background color, text color, and border color

---
 core/web-app/tailwind.config.js | 99 +++++++++++++++++++++++++++------
 1 file changed, 81 insertions(+), 18 deletions(-)

diff --git a/core/web-app/tailwind.config.js b/core/web-app/tailwind.config.js
index 2aef5ed7..b2b5bec6 100644
--- a/core/web-app/tailwind.config.js
+++ b/core/web-app/tailwind.config.js
@@ -8,28 +8,88 @@ module.exports = {
   theme: {
     extend: {
       backgroundColor: {
-        'gray-50': '#FAFAFB',
-        'gray-75': '#F5F5F7',
-        'gray-200': '#E5E6E9',
-        'gray-600': '#7F8083',
-        'gray-800': '#4B4C4F',
-        'gray-1000': '#1A1B1D',
+        'red-50': '#fef2f2',
+        'red-75': '#fee2e2',
+        'red-100': '#fecaca',
+        'red-200': '#fca5a5',
+        'red-400': '#f87171',
+        'red-600': '#ef4444',
+        'red-800': '#dc2626',
+        'red-1000': '#b91c1c',
+
+        'gray-50': '#fafafb',
+        'gray-75': '#f5f5f7',
+        'gray-100': '#f4f4f5',
+        'gray-200': '#e5e6e9',
+        'gray-400': '#b9bac1',
+        'gray-600': '#7f8083',
+        'gray-800': '#4b4c4f',
+        'gray-1000': '#1a1b1d',
+
+        'blue-50': '#e4f1ff',
+        'blue-75': '#d5e7ff',
+        'blue-100': '#cad3fd',
+        'blue-200': '#b2bdfd',
+        'blue-400': '#3354ff',
+        'blue-600': '#2d3f9a',
+        'blue-800': '#1d2963',
+        'blue-1000': '#151d4b',
       },
       textColor: {
-        'gray-50': '#FAFAFB',
-        'gray-75': '#F5F5F7',
-        'gray-200': '#E5E6E9',
-        'gray-600': '#7F8083',
-        'gray-800': '#4B4C4F',
-        'gray-1000': '#1A1B1D',
+        'red-50': '#fef2f2',
+        'red-75': '#fee2e2',
+        'red-100': '#fecaca',
+        'red-200': '#fca5a5',
+        'red-400': '#f87171',
+        'red-600': '#ef4444',
+        'red-800': '#dc2626',
+        'red-1000': '#b91c1c',
+
+        'gray-50': '#fafafb',
+        'gray-75': '#f5f5f7',
+        'gray-100': '#f4f4f5',
+        'gray-200': '#e5e6e9',
+        'gray-400': '#b9bac1',
+        'gray-600': '#7f8083',
+        'gray-800': '#4b4c4f',
+        'gray-1000': '#1a1b1d',
+
+        'blue-50': '#e4f1ff',
+        'blue-75': '#d5e7ff',
+        'blue-100': '#cad3fd',
+        'blue-200': '#b2bdfd',
+        'blue-400': '#3354ff',
+        'blue-600': '#2d3f9a',
+        'blue-800': '#1d2963',
+        'blue-1000': '#151d4b',
       },
       borderColor: {
-        'gray-50': '#FAFAFB',
-        'gray-75': '#F5F5F7',
-        'gray-200': '#E5E6E9',
-        'gray-600': '#7F8083',
-        'gray-800': '#4B4C4F',
-        'gray-1000': '#1A1B1D',
+        'red-50': '#fef2f2',
+        'red-75': '#fee2e2',
+        'red-100': '#fecaca',
+        'red-200': '#fca5a5',
+        'red-400': '#f87171',
+        'red-600': '#ef4444',
+        'red-800': '#dc2626',
+        'red-1000': '#b91c1c',
+
+        'gray-50': '#fafafb',
+        'gray-75': '#f5f5f7',
+        'gray-100': '#f4f4f5',
+        'gray-200': '#e5e6e9',
+        'gray-400': '#b9bac1',
+        'gray-600': '#7f8083',
+        'gray-800': '#4b4c4f',
+        'gray-1000': '#1a1b1d',
+
+        'blue-50': '#e4f1ff',
+        'blue-75': '#d5e7ff',
+        'blue-100': '#cad3fd',
+        'blue-200': '#b2bdfd',
+        'blue-400': '#3354ff',
+        'blue-600': '#2d3f9a',
+        'blue-800': '#1d2963',
+        'blue-1000': '#151d4b',
       },
       minWidth: {
         'screen-md': '768px',
@@ -46,6 +106,9 @@ module.exports = {
         9: '9 9 0%',
         10: '10 10 0%',
       },
+      spacing: {
+        overlay: 'overlay',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],

From c3ec9bd8d08966a5dc1bd187dabd8c16a3b556b6 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 20:17:48 +0900
Subject: [PATCH 35/94] fix(web-app): edit content header design

---
 core/web-app/src/app/app/content-header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/content-header.tsx b/core/web-app/src/app/app/content-header.tsx
index a08ee643..6ec26304 100644
--- a/core/web-app/src/app/app/content-header.tsx
+++ b/core/web-app/src/app/app/content-header.tsx
@@ -13,10 +13,10 @@ export default function ContentHeader({
 }: ContentHeaderProps) {
   return (
     <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75">
-      <div className="font-Pretendard whitespace-nowrap pl-8 pr-4 text-lg font-semibold text-gray-1000">
+      <div className="font-Pretendard whitespace-nowrap px-8 text-lg font-semibold text-gray-1000">
         {title}
       </div>
-      <div className="flex pl-4 pr-8">{right}</div>
+      <div className="flex px-8">{right}</div>
       {children}
     </div>
   );

From 928ffdbff09aaee21acf964506fd8378bd60f21d Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 20:18:23 +0900
Subject: [PATCH 36/94] feat(web-app): add responsive web design frame

---
 core/web-app/src/app/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index 04b76d00..0f615d95 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -11,7 +11,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   };
 
   return (
-    <div className="h-screen w-screen min-w-screen-md">
+    <div className="h-screen w-screen min-w-screen-md overflow-auto">
       <nav className="navbar h-14 w-full p-0 text-neutral-content">
         <div className="flex h-full w-full items-center pl-8 pr-8">
           <div className="flex h-full items-center justify-between">

From 34ddefee46d99ac41c017e8941a761658655a63c Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 21:27:07 +0900
Subject: [PATCH 37/94] feat(web-app): add planning component layout and type

---
 .../src/app/app/planning/[id]/layout.tsx      | 30 ++++++++++++-------
 .../types/bindings/scaling-plan-definition.ts | 12 ++++++--
 core/web-app/src/utils/plan-binding.ts        |  1 -
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/core/web-app/src/app/app/planning/[id]/layout.tsx b/core/web-app/src/app/app/planning/[id]/layout.tsx
index bd17e324..27a851af 100644
--- a/core/web-app/src/app/app/planning/[id]/layout.tsx
+++ b/core/web-app/src/app/app/planning/[id]/layout.tsx
@@ -1,14 +1,18 @@
 import PlanService from '@/services/plan';
-import ContentHeader from '../../content-header';
+import SubContentHeaderProps from '../../subcontent-header';
 import PlanItemDrawerContainer from './plan-item-drawer-container';
 import PlanningDetailTabs from './planning-detail-tabs';
 import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
 import PlanningDetailControls from './planning-detail-controls';
 
+interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
+  metadata: { cool_down: number; interval: number; title: string };
+}
+
 async function getScalingPlanDefinition(dbId: string) {
   try {
     const scalingPlanDefinition = await PlanService.getPlan(dbId);
-    return scalingPlanDefinition as ScalingPlanDefinition;
+    return scalingPlanDefinition as ScalingPlanDefinitionEx;
   } catch (e) {
     console.error(e);
   }
@@ -23,19 +27,23 @@ export default async function PlanningDetailLayout({
 }) {
   const scalingPlanDefinition = await getScalingPlanDefinition(dbId);
   if (!scalingPlanDefinition) {
-    return <div>Plan not found</div>;
+    return (
+      <div className="flex h-full w-full flex-row">
+        <div className="flex h-full w-full flex-col">
+          <SubContentHeaderProps title="Plan not found"></SubContentHeaderProps>
+        </div>
+      </div>
+    );
   }
   return (
     <div className="flex h-full w-full flex-row">
-      {/* Plan Detail Header */}
-      <div className="flex flex-1 flex-col">
-        <ContentHeader
-          title={scalingPlanDefinition.kind}
+      <div className="flex h-full w-full flex-col">
+        <SubContentHeaderProps
+          title={scalingPlanDefinition.metadata.title}
           right={<PlanningDetailControls />}
-        >
-          <PlanningDetailTabs />
-        </ContentHeader>
-        <div className="relative w-full min-w-full flex-1">{children}</div>
+        ></SubContentHeaderProps>
+        <PlanningDetailTabs />
+        <div className="relative flex w-full flex-1 flex-col">{children}</div>
       </div>
       <PlanItemDrawerContainer />
     </div>
diff --git a/core/web-app/src/types/bindings/scaling-plan-definition.ts b/core/web-app/src/types/bindings/scaling-plan-definition.ts
index 0207053f..53e3f0c1 100644
--- a/core/web-app/src/types/bindings/scaling-plan-definition.ts
+++ b/core/web-app/src/types/bindings/scaling-plan-definition.ts
@@ -1,5 +1,11 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
-import type { ObjectKind } from "./object-kind";
-import type { PlanItemDefinition } from "./plan-item-definition";
+import type { ObjectKind } from './object-kind';
+import type { PlanItemDefinition } from './plan-item-definition';
 
-export interface ScalingPlanDefinition { kind: ObjectKind, db_id: string, id: string, metadata: object, plans: Array<PlanItemDefinition>, }
\ No newline at end of file
+export interface ScalingPlanDefinition {
+  kind: ObjectKind;
+  db_id: string;
+  id: string;
+  metadata: object;
+  plans: Array<PlanItemDefinition>;
+}
diff --git a/core/web-app/src/utils/plan-binding.ts b/core/web-app/src/utils/plan-binding.ts
index 3314548f..2a8bb8ee 100644
--- a/core/web-app/src/utils/plan-binding.ts
+++ b/core/web-app/src/utils/plan-binding.ts
@@ -20,7 +20,6 @@ export function generatePlanDefinition({
     db_id,
     id,
     metadata: {},
-    title,
     plans,
   } as ScalingPlanDefinition;
 }

From 4a6d11a878c3421bb78ea20edd83c7be2d211e5d Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 21:28:00 +0900
Subject: [PATCH 38/94] fix(web-app): edit autoscaling history frame

---
 core/web-app/src/app/app/autoscaling-history/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/layout.tsx b/core/web-app/src/app/app/autoscaling-history/layout.tsx
index b7fe4ade..f1ae8de2 100644
--- a/core/web-app/src/app/app/autoscaling-history/layout.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/layout.tsx
@@ -3,5 +3,5 @@ export default async function AutoscalingHistoryLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <div className="flex h-full w-full">{children}</div>;
+  return <div className="flex h-full w-full flex-row">{children}</div>;
 }

From 1e0db481411554b3e57a7ea4ab7cf208f69c8cac Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 21:29:47 +0900
Subject: [PATCH 39/94] feat(web-app): add and edit overall planning component,
 page, and layout

---
 core/web-app/public/assets/icons/delete.svg   |   5 +
 .../src/app/app/planning/[id]/code/page.tsx   |  10 +-
 .../planning/[id]/diagram/diagram-base.tsx    |   4 +-
 .../app/planning/[id]/plan-item-drawer.tsx    | 130 +++++++++++-------
 .../[id]/planning-detail-controls.tsx         |  11 +-
 .../planning/[id]/planning-detail-tabs.tsx    |  69 +++++++---
 .../[id]/scaling-component-plan-select.tsx    |  31 +++--
 core/web-app/src/app/app/planning/layout.tsx  |   4 +-
 core/web-app/src/app/app/planning/page.tsx    |   2 +-
 core/web-app/src/app/app/planning/sidebar.tsx |  96 ++++++++-----
 .../web-app/src/app/app/subcontent-header.tsx |  23 ++++
 11 files changed, 258 insertions(+), 127 deletions(-)
 create mode 100644 core/web-app/public/assets/icons/delete.svg
 create mode 100644 core/web-app/src/app/app/subcontent-header.tsx

diff --git a/core/web-app/public/assets/icons/delete.svg b/core/web-app/public/assets/icons/delete.svg
new file mode 100644
index 00000000..0e7f0e83
--- /dev/null
+++ b/core/web-app/public/assets/icons/delete.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="delete">
+<path id="Vector" d="M5.43742 17.5C5.09367 17.5 4.7994 17.3776 4.55461 17.1328C4.30981 16.888 4.18742 16.5938 4.18742 16.25V4.375H3.33325V3.125H7.24992V2.5H12.7499V3.125H16.6666V4.375H15.8124V16.25C15.8124 16.5833 15.6874 16.875 15.4374 17.125C15.1874 17.375 14.8958 17.5 14.5624 17.5H5.43742ZM14.5624 4.375H5.43742V16.25H14.5624V4.375ZM7.64575 14.4583H8.89575V6.14583H7.64575V14.4583ZM11.1041 14.4583H12.3541V6.14583H11.1041V14.4583Z" fill="#FFFFFF"/>
+</g>
+</svg>
diff --git a/core/web-app/src/app/app/planning/[id]/code/page.tsx b/core/web-app/src/app/app/planning/[id]/code/page.tsx
index f6c81d61..5c8cd905 100644
--- a/core/web-app/src/app/app/planning/[id]/code/page.tsx
+++ b/core/web-app/src/app/app/planning/[id]/code/page.tsx
@@ -61,13 +61,15 @@ export default function PlanningDetailCodePage() {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex h-full flex-col p-4"
+      className="flex h-full w-full flex-col"
     >
-      <div className="mb-4 flex items-center justify-end">
-        <button className="btn-outline btn-primary btn-sm btn">Update</button>
+      <div className="flex border-b px-4 py-4">
+        <button className="left-4 top-4 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600">
+          UPDATE
+        </button>
       </div>
 
-      <div className="textarea-bordered textarea textarea-md h-full w-full">
+      <div className="textarea-bordered textarea textarea-md h-full w-full rounded-none border-none p-4">
         <Controller
           control={control}
           name="expression"
diff --git a/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx b/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx
index 89dfc157..f976b2b9 100644
--- a/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx
+++ b/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx
@@ -19,10 +19,10 @@ export default function PlanningDetailDiagramBase() {
         <PlanningDiagramFlow />
       </ReactFlowProvider>
       <button
-        className="btn-primary btn-sm btn absolute left-8 top-4"
+        className="absolute left-4 top-4 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
         onClick={onClickAddPlan}
       >
-        Add Plan
+        ADD PLAN
       </button>
     </>
   );
diff --git a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
index 77e36062..3df3d4d4 100644
--- a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
+++ b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
@@ -10,6 +10,7 @@ import 'ace-builds/src-noconflict/snippets/javascript';
 import 'ace-builds/src-noconflict/theme-xcode';
 import ScalingComponentPlanSelect from './scaling-component-plan-select';
 import { omit } from 'lodash';
+import Image from 'next/image';
 // import 'ace-builds/src-noconflict/ext-language_tools';
 
 export default function PlanItemDrawer({
@@ -78,6 +79,11 @@ export default function PlanItemDrawer({
     clearSelectedPlan();
   };
 
+  // Exit plan editor
+  const onClickExit = async () => {
+    clearSelectedPlan();
+  };
+
   // Update plan item
   const onSubmit = async (data: any) => {
     const { id, description, priority, expression, scaling_components } = data;
@@ -102,75 +108,100 @@ export default function PlanItemDrawer({
   };
 
   return (
-    <div className="plan-drawer drawer drawer-end w-[32rem]">
+    <div className="plan-drawer drawer drawer-end flex w-full min-w-[25rem] max-w-[25rem] flex-col">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
-      <div className="drawer-side w-[32rem] border-l border-base-300">
+      <div className="drawer-side h-full border-l border-t border-gray-200">
         <div
-          className="drawer-content overflow-y-auto bg-base-100 p-4"
+          className="drawer-content flex h-full w-full flex-col overflow-y-auto"
           ref={topElement}
         >
           <form className="" onSubmit={handleSubmit(onSubmit)}>
-            <div className="mb-4 flex items-center justify-between">
-              <h2 className="font-bold">Plan</h2>
-              <div>
+            <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
+              <span className="font-Pretendard whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+                Plan
+              </span>
+              <div className="flex px-4">
                 <button
-                  type="button"
-                  className="btn-error btn-sm btn mr-2"
+                  className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
                   onClick={onClickRemove}
                 >
-                  Remove
+                  <Image
+                    src="/assets/icons/delete.svg"
+                    alt="delete.svg"
+                    priority={true}
+                    width={24}
+                    height={24}
+                    style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
+                  />
                 </button>
-                <button type="submit" className="btn-primary btn-sm btn">
-                  Save
+                <button
+                  className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
+                  type="submit"
+                >
+                  SAVE
+                </button>
+                <button
+                  className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
+                  onClick={onClickExit}
+                >
+                  EXIT
                 </button>
               </div>
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Plan ID</span>
-                {/* <span className="label-text-alt">used as a variable name</span> */}
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Plan ID</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <input
                 type="text"
-                placeholder="Type here"
-                className="input-bordered input input-md w-full"
+                placeholder="Plan ID"
+                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
                 autoComplete="off"
                 autoCapitalize="off"
                 autoCorrect="off"
                 {...register('id', { required: true })}
               />
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Description</span>
-                {/* <span className="label-text-alt">used as a variable name</span> */}
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Description</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <textarea
-                placeholder="Type here"
-                className="textarea-bordered textarea textarea-md w-full"
-                {...register('description', { required: false })}
+                placeholder="Description"
+                className="textarea-bordered textarea textarea-sm my-2 w-full px-4 focus:outline-none"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
+                {...register('description', { required: true })}
               />
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Priority</span>
-                {/* <span className="label-text-alt">used as a variable name</span> */}
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Priority</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <input
                 type="number"
-                placeholder="Type here"
-                className="input-bordered input input-md w-full"
-                {...register('priority', { required: false })}
+                placeholder="Priority"
+                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
+                {...register('priority', { required: true })}
               />
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Expression</span>
-                {/* <span className="label-text-alt">
-                  Use '@' to see the metric variables
-                </span> */}
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Expression</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
-              <div className="textarea-bordered textarea textarea-md w-full">
+              <div className="textarea-bordered textarea textarea-sm my-2 w-full px-4 py-4 focus:outline-none">
                 <Controller
                   control={control}
                   name="expression"
@@ -202,26 +233,29 @@ export default function PlanItemDrawer({
                 />
               </div>
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Scaling Components</span>
-                {/* <span className="label-text-alt">used as a variable name</span> */}
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">
+                  Scaling Components
+                </span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
-              {/* Scaling Component List */}
-              <div className="">
+
+              <div className="my-2 w-full">
                 {fields?.map((field, index) => (
                   <ScalingComponentPlanSelect
                     key={field.id}
                     {...{ control, index, field, remove }}
                   />
                 ))}
-                <div className="flex justify-end">
+
+                <div className="flex w-full">
                   <button
-                    type="button"
-                    className="btn-primary btn-outline btn-xs btn w-full"
+                    className="flex h-8 w-full items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
                     onClick={() => append({})}
                   >
-                    Add Scaling Components
+                    ADD SCALING COMPONENTS
                   </button>
                 </div>
               </div>
diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx
index ea77d347..06fcdf08 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx
@@ -8,13 +8,16 @@ export default function PlanningDetailControls() {
 
   const onClickDeploy = async () => {
     await push();
-    alert('deployed!');
+    alert('Deployed!');
   };
 
   return (
-    <div className="flex items-center pr-3">
-      <button className="btn-primary btn-sm btn" onClick={onClickDeploy}>
-        Deploy
+    <div className="flex items-center">
+      <button
+        className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400  pl-5 pr-5 text-sm text-gray-50"
+        onClick={onClickDeploy}
+      >
+        DEPLOY
       </button>
     </div>
   );
diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
index b3ebf602..0803e874 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
@@ -4,30 +4,63 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
-function getActiveTabClassNames(pathname: string, tabPath: string) {
-  return classNames('tab no-underline mr-3', {
-    'tab-active font-bold link-primary tab-bordered':
-      pathname.indexOf(tabPath) > 0,
-  });
+function getTabClassNames(currentPathname: string, targetPath?: string) {
+  return classNames(
+    !targetPath || currentPathname.indexOf(targetPath) < 0
+      ? 'text-gray-600 pr-4 pl-4'
+      : 'text-gray-1000 pr-4 pl-4'
+  );
 }
 
-export default function PlanningDetailTabs() {
-  const pathname = usePathname();
-  const { id } = useParams();
+function TabItem({
+  pathname,
+  targetPath,
+  label,
+}: {
+  pathname: string;
+  targetPath: string;
+  label: string;
+}) {
   return (
-    <div className="tabs ml-3">
+    <li
+      className={classNames(
+        'flex-column flex h-full items-center lg:flex-row',
+        pathname.includes(targetPath)
+          ? 'border-b-4 border-blue-400'
+          : 'border-b-4 border-white'
+      )}
+    >
       <Link
-        className={getActiveTabClassNames(pathname, '/diagram')}
-        href={`/app/planning/${id}/diagram`}
+        className={classNames(
+          getTabClassNames(pathname, targetPath),
+          'whitespace-nowrap'
+        )}
+        href={targetPath}
       >
-        Diagram
-      </Link>
-      <Link
-        className={getActiveTabClassNames(pathname, '/code')}
-        href={`/app/planning/${id}/code`}
-      >
-        Code
+        {label}
       </Link>
+    </li>
+  );
+}
+
+export default function PlanningDetailTabs() {
+  const pathname = usePathname();
+  const { id } = useParams();
+
+  return (
+    <div className="flex h-12 w-full items-center border-b px-4">
+      <ul className="flex h-full flex-row items-center pt-1 lg:flex-row">
+        <TabItem
+          pathname={pathname}
+          targetPath={`/app/planning/${id}/diagram`}
+          label="Diagram"
+        />
+        <TabItem
+          pathname={pathname}
+          targetPath={`/app/planning/${id}/code`}
+          label="Code"
+        />
+      </ul>
     </div>
   );
 }
diff --git a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
index d0099040..f59ce6a8 100644
--- a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
+++ b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
@@ -4,6 +4,7 @@ import ScalingComponentService from '@/services/scaling-component';
 import { getScalingComponentPlanKeyTypes } from '@/utils/scaling-component-binding';
 import { MouseEventHandler, useEffect, useMemo, useState } from 'react';
 import { Controller, useWatch } from 'react-hook-form';
+import Image from 'next/image';
 
 // Metric Types
 const componentPlanKeyTypes = getScalingComponentPlanKeyTypes();
@@ -106,21 +107,18 @@ export default function ScalingComponentPlanSelect(props: any) {
   };
 
   return (
-    <div key={`${field.id}`} className="mb-5 border-b border-base-300 pb-2">
-      <div className="mb-2 flex flex-row justify-end">
-        <button className="btn-error btn-outline btn-xs btn" onClick={onRemove}>
-          Remove
-        </button>
-      </div>
-      <div className="form-control mb-2 w-full">
-        <label className="input-group-sm input-group">
-          <span className="input-group-label-fixed">Component</span>
+    <div
+      key={`${field.id}`}
+      className="mb-2 flex flex-row items-center border-b pb-2"
+    >
+      <div className="form-control mr-1 flex w-full">
+        <label className="input-group-sm">
           <Controller
             control={control}
             name={`scaling_components.${index}.component_id`}
             render={({ field }) => (
               <select
-                className="select-bordered select select-sm flex-1"
+                className="select-bordered select flex w-full rounded-md text-sm focus:outline-none"
                 defaultValue=""
                 {...field}
               >
@@ -133,6 +131,19 @@ export default function ScalingComponentPlanSelect(props: any) {
           />
         </label>
       </div>
+      <button
+        className="ml-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
+        onClick={onRemove}
+      >
+        <Image
+          src="/assets/icons/delete.svg"
+          alt="delete.svg"
+          priority={true}
+          width={24}
+          height={24}
+          style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
+        />
+      </button>
       {metadataFormControls}
     </div>
   );
diff --git a/core/web-app/src/app/app/planning/layout.tsx b/core/web-app/src/app/app/planning/layout.tsx
index 83591265..b1ca777a 100644
--- a/core/web-app/src/app/app/planning/layout.tsx
+++ b/core/web-app/src/app/app/planning/layout.tsx
@@ -6,9 +6,9 @@ export default function PlanningLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex h-full w-full">
+    <div className="flex h-full w-full flex-row">
       <PlanningSidebar />
-      <main className="flex flex-1 flex-col">{children}</main>
+      {children}
     </div>
   );
 }
diff --git a/core/web-app/src/app/app/planning/page.tsx b/core/web-app/src/app/app/planning/page.tsx
index c41f9d19..bfab11c9 100644
--- a/core/web-app/src/app/app/planning/page.tsx
+++ b/core/web-app/src/app/app/planning/page.tsx
@@ -1,6 +1,6 @@
 export default function PlanningPage() {
   return (
-    <div>sss</div>
+    <div></div>
     // <div className="flex h-full w-full">
     //   <aside className="flex w-80 flex-col border-r border-base-300 bg-base-200">
     //     {/* Header of aside */}
diff --git a/core/web-app/src/app/app/planning/sidebar.tsx b/core/web-app/src/app/app/planning/sidebar.tsx
index ed08f83a..454331cb 100644
--- a/core/web-app/src/app/app/planning/sidebar.tsx
+++ b/core/web-app/src/app/app/planning/sidebar.tsx
@@ -10,6 +10,10 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { usePlanStore } from './plan-store';
 
+interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
+  metadata: { cool_down: number; interval: number; title: string };
+}
+
 export default function PlanningSidebar() {
   const [addModalToggle, setAddModalToggle] = useState(false);
   const needToSave = usePlanStore((state) => state.needToSave);
@@ -17,12 +21,12 @@ export default function PlanningSidebar() {
     (state) => state.currentScalingPlanState
   );
   console.log({ currentScalingPlanState });
-  // Used to force refresh
+
   const [timestamp, setTimestamp] = useState(Date.now());
   const { register, reset, setFocus, handleSubmit } = useForm();
   const [plans, setPlans] = useState([]);
   const params = useParams();
-  const selectePlanId = params?.id;
+  const selectedPlanId = params?.id;
 
   useEffect(() => {
     const fetchPlans = async () => {
@@ -61,78 +65,94 @@ export default function PlanningSidebar() {
     setAddModalToggle(false);
   };
 
+  console.log(plans);
+
   return (
-    <>
-      <aside className="flex w-80 flex-col border-r border-base-300 bg-base-200">
-        {/* Header of aside */}
-        <div className="prose flex h-14 w-full items-center justify-start border-b border-base-300 px-3">
-          <div className="flex flex-1 flex-row items-center justify-start">
-            <h4 className="m-0">Plans</h4>
-            <span className="badge ml-2">
-              {plans !== undefined ? plans.length : undefined}
-            </span>
-          </div>
-          <button className="btn-primary btn-sm btn" onClick={onClickAdd}>
-            Add
+    <div className="flex h-full">
+      <aside className="flex h-full w-72 flex-col border-r border-gray-200">
+        <div className="flex h-14 w-full  min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75 pl-8 pr-8">
+          <span className="font-Pretendard whitespace-nowrap text-lg font-semibold text-gray-1000">
+            Plans {plans !== undefined ? `(${plans.length})` : undefined}
+          </span>
+
+          <button
+            className="flex h-8 items-center justify-center rounded-md border border-gray-600 bg-gray-50 pl-5 pr-5 text-sm text-gray-600"
+            onClick={onClickAdd}
+          >
+            ADD
           </button>
         </div>
-        {/* Plan List */}
-        <div className="flex-1 overflow-y-auto p-3">
-          {/* Plan Item */}
-          {plans?.map((plan: ScalingPlanDefinition) => (
+        <div className="flex flex-col">
+          {plans?.map((plan: ScalingPlanDefinitionEx) => (
             <Link
               href={`/app/planning/${plan.db_id}`}
               key={plan.db_id}
               className={classNames(
-                'mb mb-2 flex h-8 w-full cursor-pointer items-center justify-start rounded-xl px-3',
+                'flex h-12 w-full cursor-pointer items-center border-b px-8',
                 {
-                  'bg-primary': plan.db_id === selectePlanId,
+                  'hover:bg-blue-100 hover:text-blue-600':
+                    plan.db_id !== selectedPlanId,
+                  'bg-primary': plan.db_id === selectedPlanId,
                 }
               )}
             >
-              <div
-                className={classNames('prose', {
-                  'text-white': plan.db_id === selectePlanId,
+              <span
+                className={classNames('truncate', {
+                  'text-white': plan.db_id === selectedPlanId,
                 })}
               >
-                {plan.kind}
+                {plan.metadata.title}
                 {currentScalingPlanState && needToSave(plan.db_id) && '*'}
-              </div>
+              </span>
             </Link>
           ))}
         </div>
       </aside>
-      {/* Add a Plan Modal */}
+
       <div
         className={classNames('modal', { 'modal-open': addModalToggle })}
         onClick={onClickCancelInModal}
       >
         <div className="modal-box">
           <form onSubmit={handleSubmit(onSubmitAddDialog)}>
-            <h3 className="text-lg font-bold">Add a Plan</h3>
-            <div className="form-control w-full">
-              <label className="label">
-                <span className="label-text">Plan Title</span>
+            <label className="m-0 flex w-full pb-4">
+              <span className="font-Pretendard text-md whitespace-nowrap font-semibold text-gray-1000">
+                Add a Plan
+              </span>
+            </label>
+
+            <div className="form-control w-full py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Plan Title</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
+
               <input
                 {...register('title')}
                 type="text"
-                placeholder="Title"
-                className="input-bordered input w-full"
+                placeholder="Plan Title"
+                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
               />
             </div>
 
-            <div className="modal-action">
-              <button className="btn-ghost btn" onClick={onClickCancelInModal}>
-                Cancel
+            <div className="modal-action m-0 pt-4">
+              <button
+                className="flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
+                onClick={onClickCancelInModal}
+              >
+                CANCEL
               </button>
-              <button className="btn-primary btn" type="submit">
-                Add
+
+              <button
+                className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
+                type="submit"
+              >
+                ADD
               </button>
             </div>
           </form>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/core/web-app/src/app/app/subcontent-header.tsx b/core/web-app/src/app/app/subcontent-header.tsx
new file mode 100644
index 00000000..0a57d888
--- /dev/null
+++ b/core/web-app/src/app/app/subcontent-header.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+interface SubContentHeaderProps {
+  title: string;
+  children?: ReactNode;
+  right?: ReactNode;
+}
+
+export default function ContentHeader({
+  title,
+  children,
+  right,
+}: SubContentHeaderProps) {
+  return (
+    <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-t border-gray-200">
+      <div className="font-Pretendard whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+        {title}
+      </div>
+      <div className="flex px-4">{right}</div>
+      {children}
+    </div>
+  );
+}

From 41de2473d4ec9e4c66b1bf65925cbc99b5ef2901 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 21:30:19 +0900
Subject: [PATCH 40/94] fix(web-app): edit autoscaling history component layout

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index b83a291f..1cb6173f 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import React, { useEffect, useMemo, useState } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import { useSearchParams } from 'next/navigation';
@@ -151,7 +152,7 @@ export default function AutoscalingHistoryPage() {
               </th>
             </tr>
           </thead>
-          <tbody className="text-md min-h-12 flex w-full items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+          <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
             {history.map((historyItem: AutoscalingHistoryDefinitionEx) => (
               <tr key={historyItem.id} className="flex h-full w-full py-4">
                 <td className="mr-4 flex h-full flex-1 items-center">

From 566b7f260d2fada4812fa645369a38b06b216a95 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 21:30:45 +0900
Subject: [PATCH 41/94] fix(web-app): edit common frame for drawers

---
 core/web-app/src/app/app/metric-drawer.tsx            | 2 +-
 core/web-app/src/app/app/scaling-component-drawer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index 00b8ec0c..e8491d3f 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -132,7 +132,7 @@ export default function MetricDetailDrawer({
           className="drawer-overlay"
           onClick={onClickOverlay}
         />
-        <div className="drawer-content w-[32rem] overflow-y-auto bg-base-100 p-4">
+        <div className="drawer-content min-w-[32rem] overflow-y-auto bg-base-100 p-4">
           <form className="" onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-4 flex items-center justify-between">
               <h2 className="font-bold">Metric</h2>
diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index 6149c79d..b0e2f592 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -145,7 +145,7 @@ export default function ScalingComponentDetailDrawer({
           className="drawer-overlay"
           onClick={onClickOverlay}
         />
-        <div className="drawer-content w-[32rem] overflow-y-auto bg-base-100 p-4">
+        <div className="drawer-content min-w-[32rem] overflow-y-auto bg-base-100 p-4">
           <form className="" onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-4 flex items-center justify-between">
               <h2 className="font-bold">Scaling Component</h2>

From f609c54265d98a07171e78441709cb11cb9be9ba Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 22:10:06 +0900
Subject: [PATCH 42/94] refactor(web-app): edit code with common convention and
 remove unnecessary space

---
 core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx     | 1 +
 .../src/app/app/planning/[id]/scaling-component-plan-select.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
index 3df3d4d4..fc61fc89 100644
--- a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
+++ b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { useParams } from 'next/navigation';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import AceEditor from 'react-ace';
diff --git a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
index f59ce6a8..30f1a8a8 100644
--- a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
+++ b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
@@ -132,7 +132,7 @@ export default function ScalingComponentPlanSelect(props: any) {
         </label>
       </div>
       <button
-        className="ml-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
+        className="ml-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-1 pr-1 text-sm text-gray-50"
         onClick={onRemove}
       >
         <Image

From cb7d6dc280602a1fe3cc24421719f93d077a3b7a Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 22:36:25 +0900
Subject: [PATCH 43/94] fix(web-app): add class design for common layout in
 autoscaling history

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 1cb6173f..087d1865 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -81,7 +81,7 @@ export default function AutoscalingHistoryPage() {
   };
 
   return (
-    <main className="h-full w-full">
+    <main className="flex h-full w-full flex-col">
       <ContentHeader
         title="Autoscaling History"
         right={
@@ -112,9 +112,9 @@ export default function AutoscalingHistoryPage() {
           </div>
         }
       />
-      <div className="w-full">
+      <div className="flex w-full flex-col">
         <HistoryHeatmap history={history} from={fromDayjs} to={toDayjs} />
-        <table className="w-full">
+        <table className="flex w-full flex-col">
           <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
             <tr className="flex h-full w-full">
               <th className="mr-4 flex h-full flex-1 items-center">

From 7bd1bd84151ff92c51a9654b7185de3253bbacce Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 22:48:11 +0900
Subject: [PATCH 44/94] fix(web-app): edit import statements for common
 convention

---
 core/web-app/src/app/app/layout.tsx                 |  5 ++++-
 core/web-app/src/app/app/metric-drawer.tsx          | 12 +++++++-----
 .../web-app/src/app/app/planning/[id]/code/page.tsx |  5 +++--
 .../app/app/planning/[id]/diagram/diagram-base.tsx  |  5 +++--
 core/web-app/src/app/app/planning/[id]/layout.tsx   |  2 ++
 .../src/app/app/planning/[id]/plan-item-drawer.tsx  | 13 +++++++------
 .../app/planning/[id]/planning-detail-controls.tsx  |  1 +
 .../planning/[id]/scaling-component-plan-select.tsx |  7 ++++---
 core/web-app/src/app/app/planning/sidebar.tsx       | 11 ++++++-----
 .../src/app/app/scaling-component-drawer.tsx        |  8 +++++---
 10 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index 0f615d95..a64f1086 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -1,8 +1,11 @@
 'use client';
+
+import React from 'react';
 import Image from 'next/image';
-import Menu from './menu';
 import { useRouter } from 'next/navigation';
 
+import Menu from './menu';
+
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
 
diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index e8491d3f..fc0d5d27 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -1,15 +1,17 @@
 'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { forEach } from 'lodash';
+
+import { getMetadataFormControls } from './metadata-form-controls';
 import {
   generateMetricDefinition,
   getMetricKeyTypes,
 } from '@/utils/metric-binding';
-import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
 import MetricService from '@/services/metric';
 import { MetricDefinition } from '@/types/bindings/metric-definition';
-import { forEach } from 'lodash';
-import { getMetadataFormControls } from './metadata-form-controls';
 
 // Metric Types
 const metricKeyTypes = getMetricKeyTypes();
diff --git a/core/web-app/src/app/app/planning/[id]/code/page.tsx b/core/web-app/src/app/app/planning/[id]/code/page.tsx
index 5c8cd905..17a6abe7 100644
--- a/core/web-app/src/app/app/planning/[id]/code/page.tsx
+++ b/core/web-app/src/app/app/planning/[id]/code/page.tsx
@@ -1,12 +1,13 @@
 'use client';
 
+import React, { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import dynamic from 'next/dynamic';
 import { useParams } from 'next/navigation';
-import { usePlanStore } from '../../plan-store';
-import { useEffect, useState } from 'react';
 import { YAMLParseError } from 'yaml';
 
+import { usePlanStore } from '../../plan-store';
+
 // This is a dynamic import that will only be rendered in the client side.
 // This is because AceEditor is not compatible with SSR.
 const EditorContainerDynamic = dynamic(() => import('./editor-container'), {
diff --git a/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx b/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx
index f976b2b9..30efdf72 100644
--- a/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx
+++ b/core/web-app/src/app/app/planning/[id]/diagram/diagram-base.tsx
@@ -1,10 +1,11 @@
 'use client';
 
+import { useParams } from 'next/navigation';
+import { ReactFlowProvider } from 'reactflow';
+
 import 'reactflow/dist/style.css';
 import { usePlanStore } from '../../plan-store';
 import PlanningDiagramFlow from './diagram-flow';
-import { ReactFlowProvider } from 'reactflow';
-import { useParams } from 'next/navigation';
 
 export default function PlanningDetailDiagramBase() {
   const addPlanItem = usePlanStore((state) => state.addPlanItem);
diff --git a/core/web-app/src/app/app/planning/[id]/layout.tsx b/core/web-app/src/app/app/planning/[id]/layout.tsx
index 27a851af..a3320cfa 100644
--- a/core/web-app/src/app/app/planning/[id]/layout.tsx
+++ b/core/web-app/src/app/app/planning/[id]/layout.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import PlanService from '@/services/plan';
 import SubContentHeaderProps from '../../subcontent-header';
 import PlanItemDrawerContainer from './plan-item-drawer-container';
diff --git a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
index fc61fc89..e573021b 100644
--- a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
+++ b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
@@ -1,18 +1,19 @@
 'use client';
 
+import React, { useEffect, useRef } from 'react';
 import { useParams } from 'next/navigation';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import Image from 'next/image';
+import { omit } from 'lodash';
+// import 'ace-builds/src-noconflict/ext-language_tools';
 import AceEditor from 'react-ace';
-import { PlanItemDefinition } from '@/types/bindings/plan-item-definition';
-import { usePlanStore } from '../plan-store';
-import { useEffect, useRef } from 'react';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/snippets/javascript';
 import 'ace-builds/src-noconflict/theme-xcode';
+
+import { PlanItemDefinition } from '@/types/bindings/plan-item-definition';
+import { usePlanStore } from '../plan-store';
 import ScalingComponentPlanSelect from './scaling-component-plan-select';
-import { omit } from 'lodash';
-import Image from 'next/image';
-// import 'ace-builds/src-noconflict/ext-language_tools';
 
 export default function PlanItemDrawer({
   planItemDefinition,
diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx
index 06fcdf08..78796b86 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-controls.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useParams } from 'next/navigation';
+
 import { usePlanStore } from '../plan-store';
 
 export default function PlanningDetailControls() {
diff --git a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
index 30f1a8a8..86097315 100644
--- a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
+++ b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
@@ -1,10 +1,11 @@
 'use client';
 
+import React, { MouseEventHandler, useEffect, useMemo, useState } from 'react';
+import Image from 'next/image';
+import { Controller, useWatch } from 'react-hook-form';
+
 import ScalingComponentService from '@/services/scaling-component';
 import { getScalingComponentPlanKeyTypes } from '@/utils/scaling-component-binding';
-import { MouseEventHandler, useEffect, useMemo, useState } from 'react';
-import { Controller, useWatch } from 'react-hook-form';
-import Image from 'next/image';
 
 // Metric Types
 const componentPlanKeyTypes = getScalingComponentPlanKeyTypes();
diff --git a/core/web-app/src/app/app/planning/sidebar.tsx b/core/web-app/src/app/app/planning/sidebar.tsx
index 454331cb..f497e431 100644
--- a/core/web-app/src/app/app/planning/sidebar.tsx
+++ b/core/web-app/src/app/app/planning/sidebar.tsx
@@ -1,13 +1,14 @@
 'use client';
 
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import classNames from 'classnames';
+
 import PlanService from '@/services/plan';
 import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
 import { generatePlanDefinition } from '@/utils/plan-binding';
-import classNames from 'classnames';
-import Link from 'next/link';
-import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
 import { usePlanStore } from './plan-store';
 
 interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index b0e2f592..59265729 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -1,16 +1,18 @@
 'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import MetricService from '@/services/metric';
 import { forEach } from 'lodash';
+
+import MetricService from '@/services/metric';
 import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
 import {
   generateScalingComponentDefinition,
   getScalingComponentKeyTypes,
 } from '@/utils/scaling-component-binding';
-import { getMetadataFormControls } from './metadata-form-controls';
 import ScalingComponentService from '@/services/scaling-component';
+import { getMetadataFormControls } from './metadata-form-controls';
 
 // Metric Types
 const componentKeyTypes = getScalingComponentKeyTypes();

From c78c3dd7f26b7167060318e3b9309ac4e054fc5e Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 23:00:48 +0900
Subject: [PATCH 45/94] fix(web-app): edit bug caculating time for today and
 checkbox design

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 087d1865..b43e4840 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -30,7 +30,7 @@ export default function AutoscalingHistoryPage() {
   const from = searchParams.get('from') || DEFAULT_FROM.format('YYYY-MM-DD');
   const to = searchParams.get('to') || DEFAULT_TO.format('YYYY-MM-DD');
   const fromDayjs = useMemo(() => dayjs(from), [from]);
-  const toDayjs = useMemo(() => dayjs(to), [to]);
+  const toDayjs = useMemo(() => dayjs(to).endOf('day'), [to]);
   const [history, setHistory] = useState<AutoscalingHistoryDefinitionEx[]>([]);
   const router = useRouter();
 
@@ -155,8 +155,8 @@ export default function AutoscalingHistoryPage() {
           <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
             {history.map((historyItem: AutoscalingHistoryDefinitionEx) => (
               <tr key={historyItem.id} className="flex h-full w-full py-4">
-                <td className="mr-4 flex h-full flex-1 items-center">
-                  <label className="flex h-full items-center">
+                <td className="mr-4 flex h-full flex-1 items-start">
+                  <label className="flex items-center">
                     <input
                       type="checkbox"
                       className="checkbox"

From 7e15adc2fe902b39007a95356c9699b0e9709cb1 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Fri, 17 Nov 2023 23:10:26 +0900
Subject: [PATCH 46/94] feat(web-app): add additional minimum height 14 with
 56px

---
 core/web-app/src/app/app/content-header.tsx                 | 2 +-
 core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx | 2 +-
 core/web-app/src/app/app/subcontent-header.tsx              | 2 +-
 core/web-app/tailwind.config.js                             | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/core/web-app/src/app/app/content-header.tsx b/core/web-app/src/app/app/content-header.tsx
index 6ec26304..8b393286 100644
--- a/core/web-app/src/app/app/content-header.tsx
+++ b/core/web-app/src/app/app/content-header.tsx
@@ -12,7 +12,7 @@ export default function ContentHeader({
   right,
 }: ContentHeaderProps) {
   return (
-    <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75">
+    <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75">
       <div className="font-Pretendard whitespace-nowrap px-8 text-lg font-semibold text-gray-1000">
         {title}
       </div>
diff --git a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
index e573021b..e05a54fd 100644
--- a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
+++ b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
@@ -118,7 +118,7 @@ export default function PlanItemDrawer({
           ref={topElement}
         >
           <form className="" onSubmit={handleSubmit(onSubmit)}>
-            <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
+            <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
               <span className="font-Pretendard whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
                 Plan
               </span>
diff --git a/core/web-app/src/app/app/subcontent-header.tsx b/core/web-app/src/app/app/subcontent-header.tsx
index 0a57d888..98231426 100644
--- a/core/web-app/src/app/app/subcontent-header.tsx
+++ b/core/web-app/src/app/app/subcontent-header.tsx
@@ -12,7 +12,7 @@ export default function ContentHeader({
   right,
 }: SubContentHeaderProps) {
   return (
-    <div className="flex h-14 w-full min-w-full flex-row items-center justify-between border-t border-gray-200">
+    <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-t border-gray-200">
       <div className="font-Pretendard whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
         {title}
       </div>
diff --git a/core/web-app/tailwind.config.js b/core/web-app/tailwind.config.js
index b2b5bec6..c4f73ac7 100644
--- a/core/web-app/tailwind.config.js
+++ b/core/web-app/tailwind.config.js
@@ -109,6 +109,9 @@ module.exports = {
       spacing: {
         overlay: 'overlay',
       },
+      minHeight: {
+        14: '3.5rem',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],

From 01fabeeb76466d14b0fb7ff57703bc85b53c2532 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sat, 18 Nov 2023 00:39:04 +0900
Subject: [PATCH 47/94] fix(web-app): add minimum width in tailwind css, edit
 design to truncate, and rearrange type file

---
 .../src/app/app/autoscaling-history/page.tsx  | 34 +++++++++----------
 core/web-app/src/app/app/content-header.tsx   |  2 +-
 .../app/planning/[id]/plan-item-drawer.tsx    |  2 +-
 .../web-app/src/app/app/subcontent-header.tsx |  2 +-
 .../src/types/bindings/metric-definition.ts   | 11 ++++--
 core/web-app/tailwind.config.js               | 10 ++++--
 6 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index b43e4840..340fbd45 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -128,27 +128,25 @@ export default function AutoscalingHistoryPage() {
                 </label>
               </th>
               <th className="mx-4 flex h-full w-full flex-3 items-center">
-                <div className="min-w-16 flex items-center">Plan ID</div>
+                <div className="flex items-center">Plan ID</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-10 items-center">
-                <div className="min-w-20 flex items-center">Plan Item</div>
+                <div className="flex items-center">Plan Item</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="min-w-28 flex items-center">Metric Values</div>
+                <div className="flex items-center">Metric Values</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="min-w-36 flex items-center">
-                  Metadata Values
-                </div>
+                <div className="flex items-center">Metadata Values</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="min-w-28 flex items-center">Fail Message</div>
+                <div className="flex items-center">Fail Message</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-2 items-center">
-                <div className="min-w-14 flex items-center">Status</div>
+                <div className="flex items-center">Status</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-5 items-center">
-                <div className="min-w-12 flex items-center">Date</div>
+                <div className="flex items-center">Date</div>
               </th>
             </tr>
           </thead>
@@ -174,12 +172,12 @@ export default function AutoscalingHistoryPage() {
                   </label>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-3 items-start">
-                  <div className="min-w-16 flex items-center break-all">
+                  <div className="flex items-center break-all">
                     {historyItem.plan_id}
                   </div>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-10 items-start">
-                  <div className="min-w-20 flex flex-col items-center">
+                  <div className="flex flex-col items-center">
                     {renderKeyValuePairsWithJson(
                       historyItem.plan_item_json,
                       false
@@ -187,7 +185,7 @@ export default function AutoscalingHistoryPage() {
                   </div>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-8 items-start">
-                  <div className="min-w-28 flex flex-col items-center">
+                  <div className="flex flex-col items-center">
                     {renderKeyValuePairsWithJson(
                       historyItem.metric_values_json,
                       false
@@ -195,7 +193,7 @@ export default function AutoscalingHistoryPage() {
                   </div>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-8 items-start">
-                  <div className="min-w-36 flex flex-col items-center">
+                  <div className="flex flex-col items-center">
                     {renderKeyValuePairsWithJson(
                       historyItem.metadata_values_json,
                       false
@@ -203,7 +201,7 @@ export default function AutoscalingHistoryPage() {
                   </div>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-8 items-start">
-                  <div className="min-w-28 flex flex-col items-center">
+                  <div className="flex flex-col items-center">
                     {historyItem.fail_message &&
                       renderKeyValuePairsWithJson(
                         historyItem.fail_message,
@@ -212,20 +210,20 @@ export default function AutoscalingHistoryPage() {
                   </div>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-2 items-start">
-                  <div className="min-w-14 flex items-center">
+                  <div className="flex items-center">
                     {historyItem.fail_message ? (
-                      <div className="badge-error badge bg-[#E0242E] text-white">
+                      <div className="badge-error badge bg-[#E0242E] px-2 py-3 text-white">
                         Failed
                       </div>
                     ) : (
-                      <div className="badge-success badge bg-[#074EAB] text-white">
+                      <div className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
                         Success
                       </div>
                     )}
                   </div>
                 </td>
                 <td className="mx-4 flex h-full w-full flex-5 items-start">
-                  <div className="min-w-12 flex items-center break-all">
+                  <div className="flex items-center break-all">
                     {dayjs
                       .unix(historyItem.created_at / 1000)
                       .format('YYYY/MM/DD HH:mm:ss')}
diff --git a/core/web-app/src/app/app/content-header.tsx b/core/web-app/src/app/app/content-header.tsx
index 8b393286..56cd8131 100644
--- a/core/web-app/src/app/app/content-header.tsx
+++ b/core/web-app/src/app/app/content-header.tsx
@@ -13,7 +13,7 @@ export default function ContentHeader({
 }: ContentHeaderProps) {
   return (
     <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75">
-      <div className="font-Pretendard whitespace-nowrap px-8 text-lg font-semibold text-gray-1000">
+      <div className="font-Pretendard truncate whitespace-nowrap px-8 text-lg font-semibold text-gray-1000">
         {title}
       </div>
       <div className="flex px-8">{right}</div>
diff --git a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
index e05a54fd..bd151256 100644
--- a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
+++ b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
@@ -119,7 +119,7 @@ export default function PlanItemDrawer({
         >
           <form className="" onSubmit={handleSubmit(onSubmit)}>
             <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
-              <span className="font-Pretendard whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+              <span className="font-Pretendard truncate whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
                 Plan
               </span>
               <div className="flex px-4">
diff --git a/core/web-app/src/app/app/subcontent-header.tsx b/core/web-app/src/app/app/subcontent-header.tsx
index 98231426..80f176e2 100644
--- a/core/web-app/src/app/app/subcontent-header.tsx
+++ b/core/web-app/src/app/app/subcontent-header.tsx
@@ -13,7 +13,7 @@ export default function ContentHeader({
 }: SubContentHeaderProps) {
   return (
     <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-t border-gray-200">
-      <div className="font-Pretendard whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+      <div className="font-Pretendard truncate whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
         {title}
       </div>
       <div className="flex px-4">{right}</div>
diff --git a/core/web-app/src/types/bindings/metric-definition.ts b/core/web-app/src/types/bindings/metric-definition.ts
index 1ff96359..8c078be1 100644
--- a/core/web-app/src/types/bindings/metric-definition.ts
+++ b/core/web-app/src/types/bindings/metric-definition.ts
@@ -1,4 +1,11 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
-import type { ObjectKind } from "./object-kind";
+import type { ObjectKind } from './object-kind';
 
-export interface MetricDefinition { kind: ObjectKind, db_id: string, id: string, collector: string, metric_kind: string, metadata: object, }
\ No newline at end of file
+export interface MetricDefinition {
+  kind: ObjectKind;
+  db_id: string;
+  id: string;
+  collector: string;
+  metric_kind: string;
+  metadata: object;
+}
diff --git a/core/web-app/tailwind.config.js b/core/web-app/tailwind.config.js
index c4f73ac7..4c8a2ae7 100644
--- a/core/web-app/tailwind.config.js
+++ b/core/web-app/tailwind.config.js
@@ -92,7 +92,14 @@ module.exports = {
         'blue-1000': '#151d4b',
       },
       minWidth: {
+        'screen-sm': '640px',
         'screen-md': '768px',
+        'screen-lg': '1024px',
+        'screen-xl': '1280px',
+        'screen-2xl': '1536px',
+      },
+      minHeight: {
+        14: '3.5rem',
       },
       flex: {
         1: '1 1 0%',
@@ -109,9 +116,6 @@ module.exports = {
       spacing: {
         overlay: 'overlay',
       },
-      minHeight: {
-        14: '3.5rem',
-      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],

From 4d826e3509f334576d500cad482ffc6026e60140 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sat, 18 Nov 2023 00:39:31 +0900
Subject: [PATCH 48/94] feat(web-app): add scaling components page and layout

---
 .../src/app/app/scaling-components/layout.tsx | 103 +-----------
 .../src/app/app/scaling-components/page.tsx   | 150 +++++++++++++++++-
 2 files changed, 148 insertions(+), 105 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-components/layout.tsx b/core/web-app/src/app/app/scaling-components/layout.tsx
index 464fcf0e..9d735c8d 100644
--- a/core/web-app/src/app/app/scaling-components/layout.tsx
+++ b/core/web-app/src/app/app/scaling-components/layout.tsx
@@ -1,108 +1,7 @@
-import Link from 'next/link';
-import ContentHeader from '../content-header';
-import ScalingComponentService from '@/services/scaling-component';
-import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
-
-async function getScalingComponents() {
-  try {
-    const components = await ScalingComponentService.getScalingComponents();
-    return components;
-  } catch (e) {
-    console.error(e);
-  }
-  return [];
-}
-
 export default async function ScalingComponentsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const components = await getScalingComponents();
-  console.log({ components: components });
-  return (
-    <div className="flex h-full w-full">
-      <main className="relative flex flex-1 flex-col">
-        <div>
-          <ContentHeader
-            title="Scaling Components"
-            right={
-              <div className="flex items-center">
-                <Link
-                  href="/app/scaling-components/new"
-                  className="no-underline"
-                >
-                  <button className="btn-primary btn-sm btn">
-                    Add Component
-                  </button>
-                </Link>
-              </div>
-            }
-          />
-          <div className="w-full overflow-x-auto">
-            <table className="table-compact table w-full">
-              {/* head */}
-              <thead>
-                <tr>
-                  <th>
-                    <label>
-                      <input type="checkbox" className="checkbox" />
-                    </label>
-                  </th>
-                  <th>Component Kind</th>
-                  <th>ID</th>
-                  <th>Metadata</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {components.map((component: ScalingComponentDefinition) => {
-                  const metadata = Object.keys(component.metadata)
-                    .sort()
-                    .map((key) => (
-                      <div key={key}>
-                        <span className="font-bold">{key}</span>:{' '}
-                        {(component.metadata as any)[key]}
-                      </div>
-                    ));
-                  return (
-                    <tr key={component.db_id}>
-                      <th>
-                        <label>
-                          <input type="checkbox" className="checkbox" />
-                        </label>
-                      </th>
-                      <td>{component.component_kind}</td>
-                      <td>{component.id}</td>
-                      <td>{metadata}</td>
-                      <td>
-                        <Link
-                          href={`/app/scaling-components/${component.db_id}`}
-                        >
-                          <button className="btn-primary btn-xs btn">
-                            details
-                          </button>
-                        </Link>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-              {/* foot */}
-              <tfoot>
-                <tr>
-                  <th></th>
-                  <th></th>
-                  <th></th>
-                  <th></th>
-                  <th></th>
-                </tr>
-              </tfoot>
-            </table>
-          </div>
-        </div>
-        {children}
-      </main>
-    </div>
-  );
+  return <div className="flex h-full w-full flex-row">{children}</div>;
 }
diff --git a/core/web-app/src/app/app/scaling-components/page.tsx b/core/web-app/src/app/app/scaling-components/page.tsx
index 3b67c5ce..bdd8f8a5 100644
--- a/core/web-app/src/app/app/scaling-components/page.tsx
+++ b/core/web-app/src/app/app/scaling-components/page.tsx
@@ -1,9 +1,153 @@
+'use client';
 
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 
-export default async function ScalingComponentsPage() {
-  
+import ContentHeader from '../content-header';
+import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
+import ScalingComponentService from '@/services/scaling-component';
+import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
+
+async function getScalingComponents() {
+  const components = await ScalingComponentService.getScalingComponents();
+  return components;
+}
+
+interface ScalingComponentDefinitionEx extends ScalingComponentDefinition {
+  isChecked: boolean;
+}
+
+export default function ScalingComponentsPage() {
+  const [components, setComponents] = useState<ScalingComponentDefinitionEx[]>(
+    []
+  );
+
+  useEffect(() => {
+    const fetchComponents = async () => {
+      try {
+        const components = await getScalingComponents();
+        setComponents(components);
+      } catch (error) {
+        console.error({ error });
+      }
+    };
+    fetchComponents();
+  }, []);
+
+  const [checkAllFlag, setCheckAllFlag] = useState(false);
+
+  const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    setCheckAllFlag(checked);
+    const updatedComponents = components.map((componentsItem) => ({
+      ...componentsItem,
+      isChecked: checked,
+    }));
+    setComponents(updatedComponents);
+  };
 
   return (
-    <></>
+    <main className="flex h-full w-full flex-col">
+      <ContentHeader
+        title="Scaling Components"
+        right={
+          <div className="flex items-center">
+            <Link href="/app/scaling-components/new">
+              <button className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400  pl-5 pr-5 text-sm text-gray-50">
+                ADD COMPONENT
+              </button>
+            </Link>
+          </div>
+        }
+      />
+      <div className="flex w-full flex-col">
+        <table className="flex w-full flex-col">
+          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
+            <tr className="flex h-full w-full">
+              <th className="mr-4 flex h-full flex-1 items-center">
+                <label className="flex h-full items-center">
+                  <input
+                    type="checkbox"
+                    className="checkbox"
+                    checked={checkAllFlag}
+                    onChange={handleCheckAllChange}
+                  />
+                </label>
+              </th>
+              <th className="mx-4 flex h-full w-full flex-8 items-center">
+                <div className="flex items-center">Scaling Component Kind</div>
+              </th>
+              <th className="mx-4 flex h-full w-full flex-8 items-center">
+                <div className="flex items-center">Scaling Component ID</div>
+              </th>
+              <th className="mx-4 flex h-full w-full flex-8 items-center">
+                <div className="flex items-center">Metadata Values</div>
+              </th>
+              <th className="mx-4 flex h-full w-full flex-2 items-center">
+                <div className="flex items-center">Actions</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+            {components.map((componentsItem: ScalingComponentDefinitionEx) => {
+              return (
+                <tr
+                  key={componentsItem.db_id}
+                  className="flex h-full w-full py-4"
+                >
+                  <td className="mr-4 flex h-full flex-1 items-start">
+                    <label className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox"
+                        checked={componentsItem.isChecked}
+                        onChange={(e) => {
+                          const checked = e.target.checked;
+                          const updatedComponents = components.map((item) =>
+                            item.id === componentsItem.id
+                              ? { ...item, isChecked: checked }
+                              : item
+                          );
+                          setComponents(updatedComponents);
+                        }}
+                      />
+                    </label>
+                  </td>
+                  <td className="mx-4 flex h-full w-full flex-8 items-start">
+                    <div className="flex items-center break-all">
+                      {componentsItem.component_kind}
+                    </div>
+                  </td>
+                  <td className="mx-4 flex h-full w-full flex-8 items-start">
+                    <div className="flex items-center break-all">
+                      {componentsItem.id}
+                    </div>
+                  </td>
+                  <td className="mx-4 flex h-full w-full flex-8 items-start">
+                    <div className="flex flex-col items-center">
+                      {renderKeyValuePairsWithJson(
+                        JSON.stringify(componentsItem.metadata),
+                        false
+                      )}
+                    </div>
+                  </td>
+                  <td className="mx-4 flex h-full w-full flex-2 items-start">
+                    <div className="flex items-center">
+                      <Link
+                        href={`/app/scaling-components/${componentsItem.db_id}`}
+                      >
+                        <button className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
+                          Details
+                        </button>
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </main>
   );
 }

From 98d63932dcb5f590f306d79e2d7515167940c7a1 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sat, 18 Nov 2023 00:41:11 +0900
Subject: [PATCH 49/94] fix(web-app): edit default select option value

---
 core/web-app/src/app/app/metric-drawer.tsx                | 4 ++--
 .../app/planning/[id]/scaling-component-plan-select.tsx   | 8 ++++----
 core/web-app/src/app/app/scaling-component-drawer.tsx     | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index fc0d5d27..194e4b97 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -161,13 +161,13 @@ export default function MetricDetailDrawer({
               </label>
               <select
                 className="select-bordered select"
-                defaultValue="Pick one"
+                defaultValue="Metric Kind"
                 {...register('metric_kind', {
                   required: true,
                   onChange: onChangeMetricType,
                 })}
               >
-                <option disabled>Pick one</option>
+                <option disabled>Metric Kind</option>
                 {metricOptions}
               </select>
             </div>
diff --git a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
index 86097315..27568b7f 100644
--- a/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
+++ b/core/web-app/src/app/app/planning/[id]/scaling-component-plan-select.tsx
@@ -119,12 +119,12 @@ export default function ScalingComponentPlanSelect(props: any) {
             name={`scaling_components.${index}.component_id`}
             render={({ field }) => (
               <select
-                className="select-bordered select flex w-full rounded-md text-sm focus:outline-none"
-                defaultValue=""
+                className="select-bordered select flex w-full truncate rounded-md text-sm focus:outline-none"
+                defaultValue="[Scaling Component Kind] Scaling Component ID"
                 {...field}
               >
-                <option value="" disabled>
-                  Pick one
+                <option disabled>
+                  [Scaling Component Kind] Scaling Component ID
                 </option>
                 {scalingComponentOptions}
               </select>
diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index 59265729..9c081167 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -174,13 +174,13 @@ export default function ScalingComponentDetailDrawer({
               </label>
               <select
                 className="select-bordered select"
-                defaultValue="Pick one"
+                defaultValue="Scaling Component Kind"
                 {...register('component_kind', {
                   required: true,
                   onChange: onChangeComponentKind,
                 })}
               >
-                <option disabled>Pick one</option>
+                <option disabled>Scaling Component Kind</option>
                 {componentOptions}
               </select>
             </div>

From e5e469284ddcf2f39eb22775bd16f108d7907408 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sat, 18 Nov 2023 01:05:00 +0900
Subject: [PATCH 50/94] feat(web-app): add metrics page and component

---
 core/web-app/src/app/app/metrics/layout.tsx |  96 +------------
 core/web-app/src/app/app/metrics/page.tsx   | 151 +++++++++++++++++++-
 2 files changed, 149 insertions(+), 98 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/layout.tsx b/core/web-app/src/app/app/metrics/layout.tsx
index 46f1d7dd..e6d81f93 100644
--- a/core/web-app/src/app/app/metrics/layout.tsx
+++ b/core/web-app/src/app/app/metrics/layout.tsx
@@ -1,101 +1,7 @@
-import Link from 'next/link';
-import ContentHeader from '../content-header';
-import MetricService from '@/services/metric';
-import { MetricDefinition } from '@/types/bindings/metric-definition';
-
-async function getMetrics() {
-  try {
-    const metrics = await MetricService.getMetrics();
-    return metrics;
-  } catch (e) {
-    console.error(e);
-  }
-  return [];
-}
-
 export default async function MetricsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const metrics = await getMetrics();
-  console.log({ metrics });
-  return (
-    <div className="flex h-full w-full">
-      <main className="relative flex flex-1 flex-col">
-        <div>
-          <ContentHeader
-            title="Metrics"
-            right={
-              <div className="flex items-center">
-                <Link href="/app/metrics/new" className="no-underline">
-                  <button className="btn-primary btn-sm btn">Add metric</button>
-                </Link>
-              </div>
-            }
-          />
-          <div className="w-full overflow-x-auto">
-            <table className="table-compact table w-full">
-              {/* head */}
-              <thead>
-                <tr>
-                  <th>
-                    <label>
-                      <input type="checkbox" className="checkbox" />
-                    </label>
-                  </th>
-                  <th>Metric Kind</th>
-                  <th>ID</th>
-                  <th>Metadata</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {metrics.map((metric: MetricDefinition) => {
-                  const metadata = Object.keys(metric.metadata)
-                    .sort()
-                    .map((key) => (
-                      <div key={key}>
-                        <span className="font-bold">{key}</span>:{' '}
-                        {(metric.metadata as any)[key]}
-                      </div>
-                    ));
-                  return (
-                    <tr key={metric.db_id}>
-                      <th>
-                        <label>
-                          <input type="checkbox" className="checkbox" />
-                        </label>
-                      </th>
-                      <td>{metric.metric_kind}</td>
-                      <td>{metric.id}</td>
-                      <td>{metadata}</td>
-                      <td>
-                        <Link href={`/app/metrics/${metric.db_id}`}>
-                          <button className="btn-primary btn-xs btn">
-                            details
-                          </button>
-                        </Link>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-              {/* foot */}
-              <tfoot>
-                <tr>
-                  <th></th>
-                  <th></th>
-                  <th></th>
-                  <th></th>
-                  <th></th>
-                </tr>
-              </tfoot>
-            </table>
-          </div>
-        </div>
-        {children}
-      </main>
-    </div>
-  );
+  return <div className="flex h-full w-full flex-row">{children}</div>;
 }
diff --git a/core/web-app/src/app/app/metrics/page.tsx b/core/web-app/src/app/app/metrics/page.tsx
index 22e48b44..888a2e53 100644
--- a/core/web-app/src/app/app/metrics/page.tsx
+++ b/core/web-app/src/app/app/metrics/page.tsx
@@ -1,9 +1,154 @@
+'use client';
 
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 
-export default async function MetricsPage() {
-  
+import ContentHeader from '../content-header';
+import { MetricDefinition } from '@/types/bindings/metric-definition';
+import MetricService from '@/services/metric';
+import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
+
+async function getMetrics() {
+  const metrics = await MetricService.getMetrics();
+  return metrics;
+}
+
+interface MetricDefinitionEx extends MetricDefinition {
+  isChecked: boolean;
+}
+
+export default function MetricsPage() {
+  const [metrics, setMetrics] = useState<MetricDefinitionEx[]>([]);
+
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      try {
+        const metrics = await getMetrics();
+        setMetrics(metrics);
+      } catch (error) {
+        console.error({ error });
+      }
+    };
+    fetchMetrics();
+  }, []);
+
+  const [checkAllFlag, setCheckAllFlag] = useState(false);
+
+  const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    setCheckAllFlag(checked);
+    const updatedMetrics = metrics.map((metricsItem) => ({
+      ...metricsItem,
+      isChecked: checked,
+    }));
+    setMetrics(updatedMetrics);
+  };
+
+  console.log({ metrics });
 
   return (
-    <></>
+    <main className="flex h-full w-full flex-col">
+      <div>
+        <ContentHeader
+          title="Metrics"
+          right={
+            <div className="flex items-center">
+              <Link href="/app/metrics/new">
+                <button className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400  pl-5 pr-5 text-sm text-gray-50">
+                  ADD METRIC
+                </button>
+              </Link>
+            </div>
+          }
+        />
+        <div className="flex w-full flex-col">
+          <table className="flex w-full flex-col">
+            <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
+              <tr className="flex h-full w-full">
+                <th className="mr-4 flex h-full flex-1 items-center">
+                  <label className="flex h-full items-center">
+                    <input
+                      type="checkbox"
+                      className="checkbox"
+                      checked={checkAllFlag}
+                      onChange={handleCheckAllChange}
+                    />
+                  </label>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-8 items-center">
+                  <div className="flex items-center">Metric Kind</div>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-8 items-center">
+                  <div className="flex items-center">Metric ID</div>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-8 items-center">
+                  <div className="flex items-center">Metadata Values</div>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-2 items-center">
+                  <div className="flex items-center">Actions</div>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+              {metrics.map((metricsItem: MetricDefinitionEx) => {
+                return (
+                  <tr
+                    key={metricsItem.db_id}
+                    className="flex h-full w-full py-4"
+                  >
+                    <td className="mr-4 flex h-full flex-1 items-start">
+                      <label className="flex items-center">
+                        <input
+                          type="checkbox"
+                          className="checkbox"
+                          checked={metricsItem.isChecked}
+                          onChange={(e) => {
+                            const checked = e.target.checked;
+                            const updatedMetrics = metrics.map((item) =>
+                              item.id === metricsItem.id
+                                ? { ...item, isChecked: checked }
+                                : item
+                            );
+                            setMetrics(updatedMetrics);
+                          }}
+                        />
+                      </label>
+                    </td>
+
+                    <td className="mx-4 flex h-full w-full flex-8 items-start">
+                      <div className="flex items-center break-all">
+                        {metricsItem.kind}
+                      </div>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-8 items-start">
+                      <div className="flex items-center break-all">
+                        {metricsItem.id}
+                      </div>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-8 items-start">
+                      <div className="flex flex-col items-center">
+                        {renderKeyValuePairsWithJson(
+                          JSON.stringify(metricsItem.metadata),
+                          false
+                        )}
+                      </div>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-2 items-start">
+                      <div className="flex items-center">
+                        <Link href={`/app/metrics/${metricsItem.db_id}`}>
+                          <button className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
+                            Details
+                          </button>
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </main>
   );
 }

From db4088567e5b2e3070fb38dd6122ab4013dcdcad Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sat, 18 Nov 2023 01:17:42 +0900
Subject: [PATCH 51/94] fix(web-app): edit design for focus outline on calendar

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 340fbd45..5b627d75 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -90,7 +90,7 @@ export default function AutoscalingHistoryPage() {
               <label className="input-group-sm">
                 <input
                   type="date"
-                  className="input-bordered input input-sm max-w-[130px]"
+                  className="input-bordered input input-sm max-w-[130px] cursor-text focus:outline-none"
                   max={toDayjs.format('YYYY-MM-DD')}
                   value={from}
                   onChange={handleFromDateChange}
@@ -102,7 +102,7 @@ export default function AutoscalingHistoryPage() {
               <label className="input-group-sm">
                 <input
                   type="date"
-                  className="input-bordered input input-sm max-w-[130px]"
+                  className="input-bordered input input-sm max-w-[130px] cursor-text focus:outline-none"
                   min={from}
                   value={to}
                   onChange={handleToDateChange}

From b77ae5fb1a5b742a043d3fbc2d26f939b70957e2 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 09:13:46 +0900
Subject: [PATCH 52/94] fix(web-app): edit scaling component element tag layer

---
 .../src/app/app/scaling-components/page.tsx   | 204 +++++++++---------
 1 file changed, 105 insertions(+), 99 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-components/page.tsx b/core/web-app/src/app/app/scaling-components/page.tsx
index bdd8f8a5..5164d1ae 100644
--- a/core/web-app/src/app/app/scaling-components/page.tsx
+++ b/core/web-app/src/app/app/scaling-components/page.tsx
@@ -48,105 +48,111 @@ export default function ScalingComponentsPage() {
 
   return (
     <main className="flex h-full w-full flex-col">
-      <ContentHeader
-        title="Scaling Components"
-        right={
-          <div className="flex items-center">
-            <Link href="/app/scaling-components/new">
-              <button className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400  pl-5 pr-5 text-sm text-gray-50">
-                ADD COMPONENT
-              </button>
-            </Link>
-          </div>
-        }
-      />
-      <div className="flex w-full flex-col">
-        <table className="flex w-full flex-col">
-          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
-            <tr className="flex h-full w-full">
-              <th className="mr-4 flex h-full flex-1 items-center">
-                <label className="flex h-full items-center">
-                  <input
-                    type="checkbox"
-                    className="checkbox"
-                    checked={checkAllFlag}
-                    onChange={handleCheckAllChange}
-                  />
-                </label>
-              </th>
-              <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="flex items-center">Scaling Component Kind</div>
-              </th>
-              <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="flex items-center">Scaling Component ID</div>
-              </th>
-              <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="flex items-center">Metadata Values</div>
-              </th>
-              <th className="mx-4 flex h-full w-full flex-2 items-center">
-                <div className="flex items-center">Actions</div>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
-            {components.map((componentsItem: ScalingComponentDefinitionEx) => {
-              return (
-                <tr
-                  key={componentsItem.db_id}
-                  className="flex h-full w-full py-4"
-                >
-                  <td className="mr-4 flex h-full flex-1 items-start">
-                    <label className="flex items-center">
-                      <input
-                        type="checkbox"
-                        className="checkbox"
-                        checked={componentsItem.isChecked}
-                        onChange={(e) => {
-                          const checked = e.target.checked;
-                          const updatedComponents = components.map((item) =>
-                            item.id === componentsItem.id
-                              ? { ...item, isChecked: checked }
-                              : item
-                          );
-                          setComponents(updatedComponents);
-                        }}
-                      />
-                    </label>
-                  </td>
-                  <td className="mx-4 flex h-full w-full flex-8 items-start">
-                    <div className="flex items-center break-all">
-                      {componentsItem.component_kind}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full flex-8 items-start">
-                    <div className="flex items-center break-all">
-                      {componentsItem.id}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full flex-8 items-start">
-                    <div className="flex flex-col items-center">
-                      {renderKeyValuePairsWithJson(
-                        JSON.stringify(componentsItem.metadata),
-                        false
-                      )}
-                    </div>
-                  </td>
-                  <td className="mx-4 flex h-full w-full flex-2 items-start">
-                    <div className="flex items-center">
-                      <Link
-                        href={`/app/scaling-components/${componentsItem.db_id}`}
-                      >
-                        <button className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
-                          Details
-                        </button>
-                      </Link>
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+      <div>
+        <ContentHeader
+          title="Scaling Components"
+          right={
+            <div className="flex items-center">
+              <Link href="/app/scaling-components/new">
+                <button className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400  pl-5 pr-5 text-sm text-gray-50">
+                  ADD COMPONENT
+                </button>
+              </Link>
+            </div>
+          }
+        />
+        <div className="flex w-full flex-col">
+          <table className="flex w-full flex-col">
+            <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
+              <tr className="flex h-full w-full">
+                <th className="mr-4 flex h-full flex-1 items-center">
+                  <label className="flex h-full items-center">
+                    <input
+                      type="checkbox"
+                      className="checkbox"
+                      checked={checkAllFlag}
+                      onChange={handleCheckAllChange}
+                    />
+                  </label>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-8 items-center">
+                  <div className="flex items-center">
+                    Scaling Component Kind
+                  </div>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-8 items-center">
+                  <div className="flex items-center">Scaling Component ID</div>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-8 items-center">
+                  <div className="flex items-center">Metadata Values</div>
+                </th>
+                <th className="mx-4 flex h-full w-full flex-2 items-center">
+                  <div className="flex items-center">Actions</div>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+              {components.map(
+                (componentsItem: ScalingComponentDefinitionEx) => {
+                  return (
+                    <tr
+                      key={componentsItem.db_id}
+                      className="flex h-full w-full py-4"
+                    >
+                      <td className="mr-4 flex h-full flex-1 items-start">
+                        <label className="flex items-center">
+                          <input
+                            type="checkbox"
+                            className="checkbox"
+                            checked={componentsItem.isChecked}
+                            onChange={(e) => {
+                              const checked = e.target.checked;
+                              const updatedComponents = components.map((item) =>
+                                item.id === componentsItem.id
+                                  ? { ...item, isChecked: checked }
+                                  : item
+                              );
+                              setComponents(updatedComponents);
+                            }}
+                          />
+                        </label>
+                      </td>
+                      <td className="mx-4 flex h-full w-full flex-8 items-start">
+                        <div className="flex items-center break-all">
+                          {componentsItem.component_kind}
+                        </div>
+                      </td>
+                      <td className="mx-4 flex h-full w-full flex-8 items-start">
+                        <div className="flex items-center break-all">
+                          {componentsItem.id}
+                        </div>
+                      </td>
+                      <td className="mx-4 flex h-full w-full flex-8 items-start">
+                        <div className="flex flex-col items-center">
+                          {renderKeyValuePairsWithJson(
+                            JSON.stringify(componentsItem.metadata),
+                            false
+                          )}
+                        </div>
+                      </td>
+                      <td className="mx-4 flex h-full w-full flex-2 items-start">
+                        <div className="flex items-center">
+                          <Link
+                            href={`/app/scaling-components/${componentsItem.db_id}`}
+                          >
+                            <button className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
+                              Details
+                            </button>
+                          </Link>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+              )}
+            </tbody>
+          </table>
+        </div>
       </div>
     </main>
   );

From 2cb146ce0ab755ebc8a414de3def4290e8591529 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 17:04:22 +0900
Subject: [PATCH 53/94] feat(web-app): add properties in overall layout with
 specific urls

---
 core/web-app/src/app/app/layout.tsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index a64f1086..8c44fa76 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 
 import Menu from './menu';
 
@@ -13,8 +13,31 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
     router.push('/app');
   };
 
+  const pathname = usePathname();
+
+  const [overflowHiddenFlag, setOverflowHiddenFlag] = useState(false);
+
+  useEffect(() => {
+    const currentURL = pathname;
+
+    if (
+      currentURL.includes('/app/metrics/') ||
+      currentURL.includes('/app/metrics/new') ||
+      currentURL.includes('/app/scaling-components/') ||
+      currentURL.includes('/app/scaling-components/new')
+    ) {
+      setOverflowHiddenFlag(true);
+    } else {
+      setOverflowHiddenFlag(false);
+    }
+  }, [pathname]);
+
   return (
-    <div className="h-screen w-screen min-w-screen-md overflow-auto">
+    <div
+      className={`h-screen w-screen min-w-screen-md ${
+        overflowHiddenFlag ? 'overflow-hidden' : 'overflow-auto'
+      }`}
+    >
       <nav className="navbar h-14 w-full p-0 text-neutral-content">
         <div className="flex h-full w-full items-center pl-8 pr-8">
           <div className="flex h-full items-center justify-between">

From 2abc751493106b5ada3303770db7aa86d8f56ad0 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 17:04:58 +0900
Subject: [PATCH 54/94] feat(web-app): add layout properties in metric drawer

---
 core/web-app/src/app/app/metric-drawer.tsx       | 2 +-
 core/web-app/src/app/app/metrics/[id]/layout.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index 194e4b97..efcb26cf 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -126,7 +126,7 @@ export default function MetricDetailDrawer({
   };
 
   return (
-    <div className="drawer drawer-end fixed inset-y-0 bottom-0 top-16 z-50">
+    <div className="metric-drawer drawer drawer-end absolute bottom-0 top-0 z-50 border-l border-t border-gray-200">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
       <div className="drawer-side">
         <label
diff --git a/core/web-app/src/app/app/metrics/[id]/layout.tsx b/core/web-app/src/app/app/metrics/[id]/layout.tsx
index 69f46e07..466725a0 100644
--- a/core/web-app/src/app/app/metrics/[id]/layout.tsx
+++ b/core/web-app/src/app/app/metrics/[id]/layout.tsx
@@ -1,6 +1,7 @@
 import MetricService from '@/services/metric';
 import MetricDetailDrawer from '../../metric-drawer';
 import { MetricDefinition } from '@/types/bindings/metric-definition';
+import MetricsPage from '../page';
 
 async function getMetricDefinition(dbId: string) {
   try {
@@ -25,5 +26,10 @@ export default async function MetricDetailLayout({
     metricDefinition = await getMetricDefinition(dbId);
     console.log({ metricDefinition });
   }
-  return <MetricDetailDrawer metricDefinition={metricDefinition} />;
+  return (
+    <div className="relative flex h-full w-full">
+      <MetricsPage />
+      <MetricDetailDrawer metricDefinition={metricDefinition} />;
+    </div>
+  );
 }

From ecbf7639c3827f9bf5147841ffffef470753951b Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 17:05:18 +0900
Subject: [PATCH 55/94] feat(web-app): add layout properties in scaling
 components drawer

---
 core/web-app/src/app/app/scaling-component-drawer.tsx       | 2 +-
 core/web-app/src/app/app/scaling-components/[id]/layout.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index 9c081167..3f540052 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -139,7 +139,7 @@ export default function ScalingComponentDetailDrawer({
   };
 
   return (
-    <div className="drawer drawer-end fixed inset-y-0 bottom-0 top-16 z-50">
+    <div className="scaling-components-drawer drawer drawer-end absolute bottom-0 top-0 z-50 border-l border-t border-gray-200">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
       <div className="drawer-side">
         <label
diff --git a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
index 1bb5065e..c584ee6e 100644
--- a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
+++ b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
@@ -3,6 +3,7 @@ import ScalingComponentDetailDrawer from '../../scaling-component-drawer';
 import { MetricDefinition } from '@/types/bindings/metric-definition';
 import ScalingComponentService from '@/services/scaling-component';
 import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
+import ScalingComponentsPage from '../page';
 
 async function getScalingComponentDefinition(dbId: string) {
   try {
@@ -29,6 +30,9 @@ export default async function ScalingComponentDetailLayout({
     console.log({ componentDefinition: componentDefinition });
   }
   return (
-    <ScalingComponentDetailDrawer componentDefinition={componentDefinition} />
+    <div className="relative flex h-full w-full">
+      <ScalingComponentsPage />
+      <ScalingComponentDetailDrawer componentDefinition={componentDefinition} />
+    </div>
   );
 }

From a75a3892ad47cda9372fb83c8d67b8ebb3ed621d Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:14:04 +0900
Subject: [PATCH 56/94] feat(web-app): edit metadata form controller utility
 with common design

---
 .../src/app/app/metadata-form-controls.tsx        | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/core/web-app/src/app/app/metadata-form-controls.tsx b/core/web-app/src/app/app/metadata-form-controls.tsx
index a6bf8154..35466990 100644
--- a/core/web-app/src/app/app/metadata-form-controls.tsx
+++ b/core/web-app/src/app/app/metadata-form-controls.tsx
@@ -8,15 +8,18 @@ export const getMetadataFormControls = (
 ) => {
   const metadataFormControls = keyTypes.map((keyType) => {
     return (
-      <div className="form-control mb-4 w-full" key={keyType.key}>
-        <label className="label">
-          <span className="label-text">{keyType.key}</span>
-          {/* <span className="label-text-alt">{keyType.description}</span> */}
+      <div className="form-control w-full px-4 py-2" key={keyType.key}>
+        <label className="label px-0 py-2">
+          <span className="text-md label-text px-2">{keyType.key}</span>
+          {/* <span className="label-text-alt">label-text-alt</span> */}
         </label>
         <input
           type={keyType.type === 'number' ? 'number' : 'text'}
-          placeholder=""
-          className="input-bordered input w-full"
+          placeholder={keyType.key}
+          className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
+          autoComplete="off"
+          autoCapitalize="off"
+          autoCorrect="off"
           {...register(keyType.key, {
             valueAsNumber: keyType.type === 'number',
           })}

From 800123e57155379d005a6a2a5994f23d84528831 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:15:02 +0900
Subject: [PATCH 57/94] fix(web-app): add layout properties in autoscaling
 history page

---
 .../src/app/app/autoscaling-history/page.tsx  | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 5b627d75..bfd757f5 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -128,25 +128,31 @@ export default function AutoscalingHistoryPage() {
                 </label>
               </th>
               <th className="mx-4 flex h-full w-full flex-3 items-center">
-                <div className="flex items-center">Plan ID</div>
+                <span className="flex items-center break-words">Plan ID</span>
               </th>
               <th className="mx-4 flex h-full w-full flex-10 items-center">
-                <div className="flex items-center">Plan Item</div>
+                <span className="flex items-center break-words">Plan Item</span>
               </th>
               <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="flex items-center">Metric Values</div>
+                <span className="flex items-center break-words">
+                  Metric Values
+                </span>
               </th>
               <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="flex items-center">Metadata Values</div>
+                <span className="flex items-center break-words">
+                  Metadata Values
+                </span>
               </th>
               <th className="mx-4 flex h-full w-full flex-8 items-center">
-                <div className="flex items-center">Fail Message</div>
+                <span className="flex items-center break-words">
+                  Fail Message
+                </span>
               </th>
               <th className="mx-4 flex h-full w-full flex-2 items-center">
-                <div className="flex items-center">Status</div>
+                <div className="items-centerbreak-words flex">Status</div>
               </th>
               <th className="mx-4 flex h-full w-full flex-5 items-center">
-                <div className="flex items-center">Date</div>
+                <div className="items-centerbreak-words flex">Date</div>
               </th>
             </tr>
           </thead>

From 4aaa3207ee98a0962ace5f4b82f61d63acf25027 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:17:52 +0900
Subject: [PATCH 58/94] feat(web-app): add metric drawer component

---
 core/web-app/src/app/app/metric-drawer.tsx | 101 ++++++++++++++++-----
 1 file changed, 77 insertions(+), 24 deletions(-)

diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index efcb26cf..1ac71260 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { forEach } from 'lodash';
+import Image from 'next/image';
 
 import { getMetadataFormControls } from './metadata-form-controls';
 import {
@@ -91,6 +92,21 @@ export default function MetricDetailDrawer({
     setValue('metric_kind', metricType);
   };
 
+  // Exit metrics drawer
+  const onClickExit = async () => {
+    goBack();
+  };
+
+  const onClickInitialize = async () => {
+    setSelectedMetricType('Metric Kind');
+
+    // Clear metadata
+    const id = getValues('id');
+    reset();
+    setValue('id', id);
+    setValue('metric_kind', 'Metric Kind');
+  };
+
   const onClickRemove = async () => {
     if (isNew || !dbId) {
       return;
@@ -125,42 +141,75 @@ export default function MetricDetailDrawer({
     }
   };
 
+  console.log(metadataFormControls);
+
   return (
-    <div className="metric-drawer drawer drawer-end absolute bottom-0 top-0 z-50 border-l border-t border-gray-200">
+    <div className="metric-drawer drawer drawer-end fixed bottom-0 right-0 top-16 z-50 w-full border-t border-gray-200">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
-      <div className="drawer-side">
+      <div className="drawer-side h-full border-t border-gray-200">
         <label
           htmlFor="drawer"
           className="drawer-overlay"
           onClick={onClickOverlay}
         />
-        <div className="drawer-content min-w-[32rem] overflow-y-auto bg-base-100 p-4">
+        <div className="drawer-content flex h-full min-w-[25rem] flex-col overflow-y-auto border-l border-gray-200 bg-base-100 pb-20">
           <form className="" onSubmit={handleSubmit(onSubmit)}>
-            <div className="mb-4 flex items-center justify-between">
-              <h2 className="font-bold">Metric</h2>
-              <div>
-                {isNew ? undefined : (
+            <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
+              <span className="font-Pretendard truncate whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+                Metric
+              </span>
+              <div className="flex px-4">
+                {isNew ? (
+                  <button
+                    className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
+                    onClick={onClickInitialize}
+                  >
+                    <Image
+                      src="/assets/icons/initialize.svg"
+                      alt="initialize.svg"
+                      priority={true}
+                      width={24}
+                      height={24}
+                      style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
+                    />
+                  </button>
+                ) : (
                   <button
-                    type="button"
-                    className="btn-error btn-sm btn mr-2"
+                    className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
                     onClick={onClickRemove}
                   >
-                    Remove
+                    <Image
+                      src="/assets/icons/delete.svg"
+                      alt="delete.svg"
+                      priority={true}
+                      width={24}
+                      height={24}
+                      style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
+                    />
                   </button>
                 )}
-
-                <button type="submit" className="btn-primary btn-sm btn">
-                  Save
+                <button
+                  className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
+                  type="submit"
+                >
+                  SAVE
+                </button>
+                <button
+                  className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
+                  onClick={onClickExit}
+                >
+                  EXIT
                 </button>
               </div>
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Metric Type</span>
-                <span className="label-text-alt"></span>
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Metric Type</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <select
-                className="select-bordered select"
+                className="select-bordered select my-2 flex w-full truncate rounded-md text-sm focus:outline-none"
                 defaultValue="Metric Kind"
                 {...register('metric_kind', {
                   required: true,
@@ -171,15 +220,19 @@ export default function MetricDetailDrawer({
                 {metricOptions}
               </select>
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">ID</span>
-                <span className="label-text-alt">used as a variable name</span>
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Metric ID</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <input
                 type="text"
-                placeholder="Type here"
-                className="input-bordered input w-full"
+                placeholder="Metric ID"
+                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
                 {...register('id', { required: true })}
               />
             </div>

From f06768b771bed799c0d26f68c05e663cf7811339 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:18:08 +0900
Subject: [PATCH 59/94] feat(web-app): add scaling component drawer component

---
 .../src/app/app/scaling-component-drawer.tsx  | 108 +++++++++++++-----
 1 file changed, 80 insertions(+), 28 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index 3f540052..e710511f 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -4,8 +4,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { forEach } from 'lodash';
+import Image from 'next/image';
 
-import MetricService from '@/services/metric';
 import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
 import {
   generateScalingComponentDefinition,
@@ -14,7 +14,7 @@ import {
 import ScalingComponentService from '@/services/scaling-component';
 import { getMetadataFormControls } from './metadata-form-controls';
 
-// Metric Types
+// Scaling Component Types
 const componentKeyTypes = getScalingComponentKeyTypes();
 const componentOptions = componentKeyTypes.map((componentKeyType) => (
   <option
@@ -98,6 +98,21 @@ export default function ScalingComponentDetailDrawer({
     setValue('component_kind', componentKind);
   };
 
+  // Exit scaling-components drawer
+  const onClickExit = async () => {
+    goBack();
+  };
+
+  const onClickInitialize = async () => {
+    setSelectedComponentKind('Scaling Component Kind');
+
+    // Clear metadata
+    const id = getValues('id');
+    reset();
+    setValue('id', id);
+    setValue('component_kind', 'Scaling Component Kind');
+  };
+
   const onClickRemove = async () => {
     if (isNew || !dbId) {
       return;
@@ -120,13 +135,11 @@ export default function ScalingComponentDetailDrawer({
     });
     try {
       if (isNew) {
-        // const result = await MetricService.createMetric(componentDefinition);
         const result = await ScalingComponentService.createScalingComponent(
           componentDefinition
         );
         console.log({ result, isNew });
       } else {
-        // const result = await MetricService.updateMetric(componentDefinition);
         const result = await ScalingComponentService.updateScalingComponent(
           componentDefinition
         );
@@ -139,41 +152,74 @@ export default function ScalingComponentDetailDrawer({
   };
 
   return (
-    <div className="scaling-components-drawer drawer drawer-end absolute bottom-0 top-0 z-50 border-l border-t border-gray-200">
+    <div className="scaling-components-drawer drawer drawer-end fixed bottom-0 right-0 top-16 z-50 w-full border-t border-gray-200">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
-      <div className="drawer-side">
+      <div className="drawer-side h-full border-t border-gray-200">
         <label
           htmlFor="drawer"
           className="drawer-overlay"
           onClick={onClickOverlay}
         />
-        <div className="drawer-content min-w-[32rem] overflow-y-auto bg-base-100 p-4">
+        <div className="drawer-content flex h-full min-w-[25rem] flex-col overflow-y-auto border-l border-gray-200 bg-base-100 pb-20">
           <form className="" onSubmit={handleSubmit(onSubmit)}>
-            <div className="mb-4 flex items-center justify-between">
-              <h2 className="font-bold">Scaling Component</h2>
-              <div>
-                {isNew ? undefined : (
+            <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
+              <span className="font-Pretendard truncate whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+                Scaling Component
+              </span>
+              <div className="flex px-4">
+                {isNew ? (
+                  <button
+                    className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
+                    onClick={onClickInitialize}
+                  >
+                    <Image
+                      src="/assets/icons/initialize.svg"
+                      alt="initialize.svg"
+                      priority={true}
+                      width={24}
+                      height={24}
+                      style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
+                    />
+                  </button>
+                ) : (
                   <button
-                    type="button"
-                    className="btn-error btn-sm btn mr-2"
+                    className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
                     onClick={onClickRemove}
                   >
-                    Remove
+                    <Image
+                      src="/assets/icons/delete.svg"
+                      alt="delete.svg"
+                      priority={true}
+                      width={24}
+                      height={24}
+                      style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
+                    />
                   </button>
                 )}
-
-                <button type="submit" className="btn-primary btn-sm btn">
-                  Save
+                <button
+                  className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
+                  type="submit"
+                >
+                  SAVE
+                </button>
+                <button
+                  className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
+                  onClick={onClickExit}
+                >
+                  EXIT
                 </button>
               </div>
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">Scaling Component Type</span>
-                <span className="label-text-alt"></span>
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">
+                  Scaling Component Type
+                </span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <select
-                className="select-bordered select"
+                className="select-bordered select my-2 flex w-full truncate rounded-md text-sm focus:outline-none"
                 defaultValue="Scaling Component Kind"
                 {...register('component_kind', {
                   required: true,
@@ -184,15 +230,21 @@ export default function ScalingComponentDetailDrawer({
                 {componentOptions}
               </select>
             </div>
-            <div className="form-control mb-4 w-full">
-              <label className="label">
-                <span className="label-text">ID</span>
-                <span className="label-text-alt">used as a variable name</span>
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">
+                  Scaling Component ID
+                </span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <input
                 type="text"
-                placeholder="Type here"
-                className="input-bordered input w-full"
+                placeholder="Scaling Component ID"
+                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
                 {...register('id', { required: true })}
               />
             </div>

From 49b305f4b022d659a38792021d0316298fc876ec Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:18:56 +0900
Subject: [PATCH 60/94] feat(web-app): add drawer initialize image added in
 drawer features

---
 core/web-app/public/assets/icons/initialize.svg | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 core/web-app/public/assets/icons/initialize.svg

diff --git a/core/web-app/public/assets/icons/initialize.svg b/core/web-app/public/assets/icons/initialize.svg
new file mode 100644
index 00000000..b8332457
--- /dev/null
+++ b/core/web-app/public/assets/icons/initialize.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1.05859375em; height: 1em;vertical-align: middle;fill: #FFFFFF;overflow: hidden;" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M788.804292 977.500541a503.543363 503.543363 0 0 0 162.507176-119.862595 509.687074 509.687074 0 0 0 103.780528-174.312738 515.047762 515.047762 0 0 0 28.550186-194.068985 514.385205 514.385205 0 0 0-45.53574-190.816432 508.663122 508.663122 0 0 0-118.657945-164.193685A501.676156 501.676156 0 0 0 554.921651 0.530046 503.904757 503.904757 0 0 0 203.585714 166.530704a509.807538 509.807538 0 0 0-94.564962 150.159522L0 290.187944l45.174345 154.014399 45.234577 154.0144 109.382147-116.610042L309.173215 365.056891l-103.057738-24.936238a411.387699 411.387699 0 0 1 69.990118-106.611453 405.846313 405.846313 0 0 1 576.906499-25.960191c166.181356 153.592772 177.625524 415.001647 25.659027 582.869512a406.087243 406.087243 0 0 1-577.026963 25.899958l-66.315938 73.302904a502.097784 502.097784 0 0 0 364.707543 133.836525 499.387323 499.387323 0 0 0 188.768529-45.957367z"  /></svg>
\ No newline at end of file

From b32666d45f6ca289b358172122e20a6ce913f917 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:19:38 +0900
Subject: [PATCH 61/94] fix(web-app): edit common word design to metrics and
 scaling components

---
 core/web-app/src/app/app/metrics/page.tsx          | 14 ++++++++++----
 .../src/app/app/scaling-components/page.tsx        | 14 +++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/page.tsx b/core/web-app/src/app/app/metrics/page.tsx
index 888a2e53..37c28a6f 100644
--- a/core/web-app/src/app/app/metrics/page.tsx
+++ b/core/web-app/src/app/app/metrics/page.tsx
@@ -76,16 +76,22 @@ export default function MetricsPage() {
                   </label>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-8 items-center">
-                  <div className="flex items-center">Metric Kind</div>
+                  <span className="flex items-center break-words">
+                    Metric Kind
+                  </span>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-8 items-center">
-                  <div className="flex items-center">Metric ID</div>
+                  <span className="flex items-center break-words">
+                    Metric ID
+                  </span>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-8 items-center">
-                  <div className="flex items-center">Metadata Values</div>
+                  <span className="flex items-center break-words">
+                    Metadata Values
+                  </span>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-2 items-center">
-                  <div className="flex items-center">Actions</div>
+                  <span className="flex items-center break-words">Actions</span>
                 </th>
               </tr>
             </thead>
diff --git a/core/web-app/src/app/app/scaling-components/page.tsx b/core/web-app/src/app/app/scaling-components/page.tsx
index 5164d1ae..17260e24 100644
--- a/core/web-app/src/app/app/scaling-components/page.tsx
+++ b/core/web-app/src/app/app/scaling-components/page.tsx
@@ -76,18 +76,22 @@ export default function ScalingComponentsPage() {
                   </label>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-8 items-center">
-                  <div className="flex items-center">
+                  <span className="flex items-center break-words">
                     Scaling Component Kind
-                  </div>
+                  </span>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-8 items-center">
-                  <div className="flex items-center">Scaling Component ID</div>
+                  <span className="flex items-center break-words">
+                    Scaling Component ID
+                  </span>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-8 items-center">
-                  <div className="flex items-center">Metadata Values</div>
+                  <span className="flex items-center break-words">
+                    Metadata Values
+                  </span>
                 </th>
                 <th className="mx-4 flex h-full w-full flex-2 items-center">
-                  <div className="flex items-center">Actions</div>
+                  <span className="flex items-center break-words">Actions</span>
                 </th>
               </tr>
             </thead>

From a163582b24e2361ab53734c10996db86edafbcda Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:27:25 +0900
Subject: [PATCH 62/94] fix(web-app): edit reset button

---
 core/web-app/public/assets/icons/initialize.svg       |  1 -
 core/web-app/src/app/app/metric-drawer.tsx            | 11 ++---------
 core/web-app/src/app/app/scaling-component-drawer.tsx | 11 ++---------
 3 files changed, 4 insertions(+), 19 deletions(-)
 delete mode 100644 core/web-app/public/assets/icons/initialize.svg

diff --git a/core/web-app/public/assets/icons/initialize.svg b/core/web-app/public/assets/icons/initialize.svg
deleted file mode 100644
index b8332457..00000000
--- a/core/web-app/public/assets/icons/initialize.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="svg-icon" style="width: 1.05859375em; height: 1em;vertical-align: middle;fill: #FFFFFF;overflow: hidden;" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M788.804292 977.500541a503.543363 503.543363 0 0 0 162.507176-119.862595 509.687074 509.687074 0 0 0 103.780528-174.312738 515.047762 515.047762 0 0 0 28.550186-194.068985 514.385205 514.385205 0 0 0-45.53574-190.816432 508.663122 508.663122 0 0 0-118.657945-164.193685A501.676156 501.676156 0 0 0 554.921651 0.530046 503.904757 503.904757 0 0 0 203.585714 166.530704a509.807538 509.807538 0 0 0-94.564962 150.159522L0 290.187944l45.174345 154.014399 45.234577 154.0144 109.382147-116.610042L309.173215 365.056891l-103.057738-24.936238a411.387699 411.387699 0 0 1 69.990118-106.611453 405.846313 405.846313 0 0 1 576.906499-25.960191c166.181356 153.592772 177.625524 415.001647 25.659027 582.869512a406.087243 406.087243 0 0 1-577.026963 25.899958l-66.315938 73.302904a502.097784 502.097784 0 0 0 364.707543 133.836525 499.387323 499.387323 0 0 0 188.768529-45.957367z"  /></svg>
\ No newline at end of file
diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index 1ac71260..bcb82da9 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -161,17 +161,10 @@ export default function MetricDetailDrawer({
               <div className="flex px-4">
                 {isNew ? (
                   <button
-                    className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
+                    className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-5 pr-5 text-sm text-gray-50"
                     onClick={onClickInitialize}
                   >
-                    <Image
-                      src="/assets/icons/initialize.svg"
-                      alt="initialize.svg"
-                      priority={true}
-                      width={24}
-                      height={24}
-                      style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
-                    />
+                    RESET
                   </button>
                 ) : (
                   <button
diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index e710511f..98ea877f 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -169,17 +169,10 @@ export default function ScalingComponentDetailDrawer({
               <div className="flex px-4">
                 {isNew ? (
                   <button
-                    className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
+                    className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-5 pr-5 text-sm text-gray-50"
                     onClick={onClickInitialize}
                   >
-                    <Image
-                      src="/assets/icons/initialize.svg"
-                      alt="initialize.svg"
-                      priority={true}
-                      width={24}
-                      height={24}
-                      style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }}
-                    />
+                    RESET
                   </button>
                 ) : (
                   <button

From 39f2b20a7f0b55dbbc0d439226d5ad7cc3be822c Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 19:34:45 +0900
Subject: [PATCH 63/94] fix(web-app): edit main menu and sub menu design

---
 core/web-app/src/app/app/menu.tsx                             | 4 ++--
 .../src/app/app/planning/[id]/planning-detail-tabs.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/web-app/src/app/app/menu.tsx b/core/web-app/src/app/app/menu.tsx
index d3c6a972..14647b05 100644
--- a/core/web-app/src/app/app/menu.tsx
+++ b/core/web-app/src/app/app/menu.tsx
@@ -23,7 +23,7 @@ function MenuItem({
   return (
     <li
       className={classNames(
-        'flex-column flex h-full items-center lg:flex-row',
+        'flex-column mx-0.5 flex h-full items-center lg:flex-row',
         pathname.includes(targetPath)
           ? 'border-b-4 border-purple-500'
           : 'border-b-4 border-white'
@@ -63,7 +63,7 @@ export default function Menu() {
         targetPath="/app/scaling-components"
         label="Scaling Components"
       />
-      <li className="flex-column flex h-full items-center lg:flex-row">
+      <li className="flex-column mx-0.5 flex h-full items-center lg:flex-row">
         <Link
           className={classNames(
             getMenuClassNames(pathname),
diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
index 0803e874..7874b099 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
@@ -24,7 +24,7 @@ function TabItem({
   return (
     <li
       className={classNames(
-        'flex-column flex h-full items-center lg:flex-row',
+        'flex-column mx-0.5 flex h-full items-center lg:flex-row',
         pathname.includes(targetPath)
           ? 'border-b-4 border-blue-400'
           : 'border-b-4 border-white'

From 3a9953e876d0dfd797c091d2a6116dc1160cc841 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 20:36:03 +0900
Subject: [PATCH 64/94] fix(web-app): edit table common design

---
 core/web-app/src/app/app/autoscaling-history/page.tsx | 11 +++++++----
 core/web-app/src/app/app/metrics/page.tsx             |  8 ++++----
 core/web-app/src/app/app/scaling-components/page.tsx  |  8 ++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index bfd757f5..1c7fd596 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -115,8 +115,8 @@ export default function AutoscalingHistoryPage() {
       <div className="flex w-full flex-col">
         <HistoryHeatmap history={history} from={fromDayjs} to={toDayjs} />
         <table className="flex w-full flex-col">
-          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
-            <tr className="flex h-full w-full">
+          <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-75 py-0 font-bold text-gray-800">
+            <tr className="flex h-full w-full px-8">
               <th className="mr-4 flex h-full flex-1 items-center">
                 <label className="flex h-full items-center">
                   <input
@@ -156,9 +156,12 @@ export default function AutoscalingHistoryPage() {
               </th>
             </tr>
           </thead>
-          <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+          <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b py-0 text-gray-800">
             {history.map((historyItem: AutoscalingHistoryDefinitionEx) => (
-              <tr key={historyItem.id} className="flex h-full w-full py-4">
+              <tr
+                key={historyItem.id}
+                className="flex w-full border-b px-8 py-4"
+              >
                 <td className="mr-4 flex h-full flex-1 items-start">
                   <label className="flex items-center">
                     <input
diff --git a/core/web-app/src/app/app/metrics/page.tsx b/core/web-app/src/app/app/metrics/page.tsx
index 37c28a6f..ff3c2826 100644
--- a/core/web-app/src/app/app/metrics/page.tsx
+++ b/core/web-app/src/app/app/metrics/page.tsx
@@ -63,8 +63,8 @@ export default function MetricsPage() {
         />
         <div className="flex w-full flex-col">
           <table className="flex w-full flex-col">
-            <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
-              <tr className="flex h-full w-full">
+            <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-75 py-0 font-bold text-gray-800">
+              <tr className="flex h-full w-full px-8">
                 <th className="mr-4 flex h-full flex-1 items-center">
                   <label className="flex h-full items-center">
                     <input
@@ -95,12 +95,12 @@ export default function MetricsPage() {
                 </th>
               </tr>
             </thead>
-            <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+            <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b py-0 text-gray-800">
               {metrics.map((metricsItem: MetricDefinitionEx) => {
                 return (
                   <tr
                     key={metricsItem.db_id}
-                    className="flex h-full w-full py-4"
+                    className="flex w-full border-b px-8 py-4"
                   >
                     <td className="mr-4 flex h-full flex-1 items-start">
                       <label className="flex items-center">
diff --git a/core/web-app/src/app/app/scaling-components/page.tsx b/core/web-app/src/app/app/scaling-components/page.tsx
index 17260e24..28416567 100644
--- a/core/web-app/src/app/app/scaling-components/page.tsx
+++ b/core/web-app/src/app/app/scaling-components/page.tsx
@@ -63,8 +63,8 @@ export default function ScalingComponentsPage() {
         />
         <div className="flex w-full flex-col">
           <table className="flex w-full flex-col">
-            <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-200 px-8 py-0 font-bold text-gray-800">
-              <tr className="flex h-full w-full">
+            <thead className="text-md flex h-12 w-full items-center justify-between border-b border-t bg-gray-75 py-0 font-bold text-gray-800">
+              <tr className="flex h-full w-full px-8">
                 <th className="mr-4 flex h-full flex-1 items-center">
                   <label className="flex h-full items-center">
                     <input
@@ -95,13 +95,13 @@ export default function ScalingComponentsPage() {
                 </th>
               </tr>
             </thead>
-            <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b border-t px-8 py-0 text-gray-800">
+            <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b py-0 text-gray-800">
               {components.map(
                 (componentsItem: ScalingComponentDefinitionEx) => {
                   return (
                     <tr
                       key={componentsItem.db_id}
-                      className="flex h-full w-full py-4"
+                      className="flex w-full border-b px-8 py-4"
                     >
                       <td className="mr-4 flex h-full flex-1 items-start">
                         <label className="flex items-center">

From 4cf0f7293c992e8465ed69066fc3263f6a90407e Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 20:37:55 +0900
Subject: [PATCH 65/94] feat(web-app): add plan new page layout

---
 core/web-app/src/app/app/planning/[id]/layout.tsx | 12 ++++++++++++
 core/web-app/src/app/app/planning/page.tsx        |  7 ++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/planning/[id]/layout.tsx b/core/web-app/src/app/app/planning/[id]/layout.tsx
index a3320cfa..d9661cef 100644
--- a/core/web-app/src/app/app/planning/[id]/layout.tsx
+++ b/core/web-app/src/app/app/planning/[id]/layout.tsx
@@ -6,6 +6,8 @@ import PlanItemDrawerContainer from './plan-item-drawer-container';
 import PlanningDetailTabs from './planning-detail-tabs';
 import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
 import PlanningDetailControls from './planning-detail-controls';
+import PlanningPage from '../page';
+import PlanningDetailDrawer from '../../planning-drawer';
 
 interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
   metadata: { cool_down: number; interval: number; title: string };
@@ -20,6 +22,8 @@ async function getScalingPlanDefinition(dbId: string) {
   }
 }
 
+const NEW_PATH = 'new';
+
 export default async function PlanningDetailLayout({
   children,
   params: { id: dbId },
@@ -27,6 +31,14 @@ export default async function PlanningDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
+  if (dbId === NEW_PATH) {
+    return (
+      <div className="relative flex h-full w-full">
+        <PlanningPage />
+        <PlanningDetailDrawer />
+      </div>
+    );
+  }
   const scalingPlanDefinition = await getScalingPlanDefinition(dbId);
   if (!scalingPlanDefinition) {
     return (
diff --git a/core/web-app/src/app/app/planning/page.tsx b/core/web-app/src/app/app/planning/page.tsx
index bfab11c9..9ca512d2 100644
--- a/core/web-app/src/app/app/planning/page.tsx
+++ b/core/web-app/src/app/app/planning/page.tsx
@@ -1,6 +1,11 @@
 export default function PlanningPage() {
   return (
-    <div></div>
+    <main className="flex h-full w-full flex-col">
+      <div>
+        <div className="flex w-full min-w-full flex-row items-center justify-between border-t border-gray-200 bg-gray-75" />
+      </div>
+    </main>
+
     // <div className="flex h-full w-full">
     //   <aside className="flex w-80 flex-col border-r border-base-300 bg-base-200">
     //     {/* Header of aside */}

From 8b0cf19ee21a0013d95c82eec8fee4b884e8d6d3 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 21:15:11 +0900
Subject: [PATCH 66/94] feat(web-app): add plan drawer removing from sidebar

---
 core/web-app/src/app/app/planning-drawer.tsx  | 121 ++++++++++++++++++
 core/web-app/src/app/app/planning/sidebar.tsx |  99 ++------------
 2 files changed, 132 insertions(+), 88 deletions(-)
 create mode 100644 core/web-app/src/app/app/planning-drawer.tsx

diff --git a/core/web-app/src/app/app/planning-drawer.tsx b/core/web-app/src/app/app/planning-drawer.tsx
new file mode 100644
index 00000000..b6293bf3
--- /dev/null
+++ b/core/web-app/src/app/app/planning-drawer.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+
+import PlanService from '@/services/plan';
+import { generatePlanDefinition } from '@/utils/plan-binding';
+import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
+
+export default function PlanningDetailDrawer({
+  planDefinition,
+}: {
+  planDefinition?: ScalingPlanDefinition;
+}) {
+  const { register, reset, setFocus, handleSubmit } = useForm();
+
+  const router = useRouter();
+
+  const goBack = (refresh?: boolean) => {
+    let path = window.location.href;
+    path = path.slice(0, path.lastIndexOf('/'));
+    router.push(path);
+    if (refresh) {
+      router.refresh();
+    }
+  };
+
+  //
+  // Events
+  //
+
+  const onClickOverlay = () => {
+    goBack(false);
+  };
+
+  // Exit metrics drawer
+  const onClickExit = async () => {
+    goBack();
+  };
+
+  const onClickInitialize = async () => {
+    // Clear metadata
+    reset();
+  };
+
+  const onSubmit = async (data: any) => {
+    const { title } = data;
+    if (!title?.trim()) {
+      return;
+    }
+    const planDefinition = generatePlanDefinition({ title });
+    try {
+      const response = await PlanService.createPlan(planDefinition);
+
+      goBack(true);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  console.log(planDefinition);
+
+  return (
+    <div className="plan-drawer drawer drawer-end fixed bottom-0 right-0 top-16 z-50 w-full border-t border-gray-200">
+      <input id="drawer" type="checkbox" className="drawer-toggle" checked />
+      <div className="drawer-side h-full border-t border-gray-200">
+        <label
+          htmlFor="drawer"
+          className="drawer-overlay"
+          onClick={onClickOverlay}
+        />
+        <div className="drawer-content flex h-full min-w-[25rem] flex-col overflow-y-auto border-l border-gray-200 bg-base-100 pb-20">
+          <form className="" onSubmit={handleSubmit(onSubmit)}>
+            <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
+              <span className="font-Pretendard truncate whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
+                Plan
+              </span>
+              <div className="flex px-4">
+                <button
+                  className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-5 pr-5 text-sm text-gray-50"
+                  onClick={onClickInitialize}
+                >
+                  RESET
+                </button>
+                <button
+                  className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
+                  type="submit"
+                >
+                  SAVE
+                </button>
+                <button
+                  className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
+                  onClick={onClickExit}
+                >
+                  EXIT
+                </button>
+              </div>
+            </div>
+
+            <div className="form-control w-full px-4 py-2">
+              <label className="label px-0 py-2">
+                <span className="text-md label-text px-2">Plan Title</span>
+                {/* <span className="label-text-alt">label-text-alt</span> */}
+              </label>
+              <input
+                type="text"
+                placeholder="Plan Title"
+                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
+                {...register('title', { required: true })}
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/core/web-app/src/app/app/planning/sidebar.tsx b/core/web-app/src/app/app/planning/sidebar.tsx
index f497e431..222a07eb 100644
--- a/core/web-app/src/app/app/planning/sidebar.tsx
+++ b/core/web-app/src/app/app/planning/sidebar.tsx
@@ -1,14 +1,12 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useParams } from 'next/navigation';
+import { useParams, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import classNames from 'classnames';
 
 import PlanService from '@/services/plan';
 import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
-import { generatePlanDefinition } from '@/utils/plan-binding';
 import { usePlanStore } from './plan-store';
 
 interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
@@ -16,55 +14,25 @@ interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
 }
 
 export default function PlanningSidebar() {
-  const [addModalToggle, setAddModalToggle] = useState(false);
   const needToSave = usePlanStore((state) => state.needToSave);
   const currentScalingPlanState = usePlanStore(
     (state) => state.currentScalingPlanState
   );
   console.log({ currentScalingPlanState });
 
-  const [timestamp, setTimestamp] = useState(Date.now());
-  const { register, reset, setFocus, handleSubmit } = useForm();
   const [plans, setPlans] = useState([]);
   const params = useParams();
   const selectedPlanId = params?.id;
 
+  const pathname = usePathname();
+
   useEffect(() => {
     const fetchPlans = async () => {
       const response = await PlanService.getPlans();
       setPlans(response);
     };
     fetchPlans();
-  }, [timestamp]);
-
-  const onClickAdd = () => {
-    reset();
-    setAddModalToggle(true);
-    // TODO: Fix this hack
-    setTimeout(() => {
-      setFocus('title');
-    }, 100);
-  };
-
-  const onSubmitAddDialog = async (data: any) => {
-    const { title } = data;
-    if (!title?.trim()) {
-      return;
-    }
-    const plan = generatePlanDefinition({ title });
-    try {
-      const response = await PlanService.createPlan(plan);
-      setTimestamp(Date.now());
-      setAddModalToggle(false);
-    } catch (e) {}
-  };
-  const onClickCancelInModal = (event: any) => {
-    // Check if this event is from the element itself
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    setAddModalToggle(false);
-  };
+  }, [pathname]);
 
   console.log(plans);
 
@@ -75,13 +43,13 @@ export default function PlanningSidebar() {
           <span className="font-Pretendard whitespace-nowrap text-lg font-semibold text-gray-1000">
             Plans {plans !== undefined ? `(${plans.length})` : undefined}
           </span>
-
-          <button
-            className="flex h-8 items-center justify-center rounded-md border border-gray-600 bg-gray-50 pl-5 pr-5 text-sm text-gray-600"
-            onClick={onClickAdd}
-          >
-            ADD
-          </button>
+          <div className="flex items-center">
+            <Link href="/app/planning/new">
+              <button className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400  pl-5 pr-5 text-sm text-gray-50">
+                ADD PLAN
+              </button>
+            </Link>
+          </div>
         </div>
         <div className="flex flex-col">
           {plans?.map((plan: ScalingPlanDefinitionEx) => (
@@ -109,51 +77,6 @@ export default function PlanningSidebar() {
           ))}
         </div>
       </aside>
-
-      <div
-        className={classNames('modal', { 'modal-open': addModalToggle })}
-        onClick={onClickCancelInModal}
-      >
-        <div className="modal-box">
-          <form onSubmit={handleSubmit(onSubmitAddDialog)}>
-            <label className="m-0 flex w-full pb-4">
-              <span className="font-Pretendard text-md whitespace-nowrap font-semibold text-gray-1000">
-                Add a Plan
-              </span>
-            </label>
-
-            <div className="form-control w-full py-2">
-              <label className="label px-0 py-2">
-                <span className="text-md label-text px-2">Plan Title</span>
-                {/* <span className="label-text-alt">label-text-alt</span> */}
-              </label>
-
-              <input
-                {...register('title')}
-                type="text"
-                placeholder="Plan Title"
-                className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
-              />
-            </div>
-
-            <div className="modal-action m-0 pt-4">
-              <button
-                className="flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
-                onClick={onClickCancelInModal}
-              >
-                CANCEL
-              </button>
-
-              <button
-                className="flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
-                type="submit"
-              >
-                ADD
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
     </div>
   );
 }

From 3fb20cb50a5ebcf8410fef1e727bd29864b3538f Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 21:15:38 +0900
Subject: [PATCH 67/94] feat(web-app): add layout conditional url for planning

---
 core/web-app/src/app/app/layout.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index 8c44fa76..06282ea9 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -24,7 +24,9 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
       currentURL.includes('/app/metrics/') ||
       currentURL.includes('/app/metrics/new') ||
       currentURL.includes('/app/scaling-components/') ||
-      currentURL.includes('/app/scaling-components/new')
+      currentURL.includes('/app/scaling-components/new') ||
+      currentURL.includes('/app/planning/') ||
+      currentURL.includes('/app/planning/new')
     ) {
       setOverflowHiddenFlag(true);
     } else {

From 8c85756df10c2c9b8efcce0ad990e377f8b6ecb4 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 21:36:23 +0900
Subject: [PATCH 68/94] fix(web-app): edit planning sidebar title design with
 minimum height

---
 core/web-app/src/app/app/planning/sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/planning/sidebar.tsx b/core/web-app/src/app/app/planning/sidebar.tsx
index 222a07eb..2502adc9 100644
--- a/core/web-app/src/app/app/planning/sidebar.tsx
+++ b/core/web-app/src/app/app/planning/sidebar.tsx
@@ -39,7 +39,7 @@ export default function PlanningSidebar() {
   return (
     <div className="flex h-full">
       <aside className="flex h-full w-72 flex-col border-r border-gray-200">
-        <div className="flex h-14 w-full  min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75 pl-8 pr-8">
+        <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75 pl-8 pr-8">
           <span className="font-Pretendard whitespace-nowrap text-lg font-semibold text-gray-1000">
             Plans {plans !== undefined ? `(${plans.length})` : undefined}
           </span>

From a0f7b10f63241cdaa9c6a4e545a1aadd81367679 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 21:37:51 +0900
Subject: [PATCH 69/94] feat(web-app): remove redirection in configuration, and
 add redirection with react hook in specific location

---
 core/web-app/next.config.js                          |  4 ++--
 .../app/app/planning/[id]/planning-detail-tabs.tsx   | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/core/web-app/next.config.js b/core/web-app/next.config.js
index ab8b89eb..1be4718e 100644
--- a/core/web-app/next.config.js
+++ b/core/web-app/next.config.js
@@ -6,7 +6,7 @@ const nextConfig = {
     appDir: true,
     esmExternals: 'loose',
   },
-  async redirects() {
+  /* async redirects() {
     return [
       {
         source: '/app/planning/:id',
@@ -14,7 +14,7 @@ const nextConfig = {
         permanent: true,
       },
     ];
-  },
+  }, */
   headers:
     process.env.NODE_ENV === 'development'
       ? () => [
diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
index 7874b099..db74ddf1 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { useParams, usePathname } from 'next/navigation';
+import { useParams, usePathname, useRouter } from 'next/navigation';
 
 function getTabClassNames(currentPathname: string, targetPath?: string) {
   return classNames(
@@ -46,6 +47,15 @@ function TabItem({
 export default function PlanningDetailTabs() {
   const pathname = usePathname();
   const { id } = useParams();
+  const router = useRouter();
+
+  useEffect(() => {
+    const currentURL = pathname;
+
+    if (!currentURL.includes('/app/planning/new')) {
+      router.push(`/app/planning/${id}/diagram`);
+    }
+  }, []);
 
   return (
     <div className="flex h-12 w-full items-center border-b px-4">

From d4683c2ba590b1754c68eec15e91cd5c91546005 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 21:38:20 +0900
Subject: [PATCH 70/94] fix(web-app): add possible data value in generate plan
 definition for title

---
 core/web-app/src/utils/plan-binding.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/web-app/src/utils/plan-binding.ts b/core/web-app/src/utils/plan-binding.ts
index 2a8bb8ee..314cfc09 100644
--- a/core/web-app/src/utils/plan-binding.ts
+++ b/core/web-app/src/utils/plan-binding.ts
@@ -19,7 +19,7 @@ export function generatePlanDefinition({
     kind: 'ScalingPlan',
     db_id,
     id,
-    metadata: {},
+    metadata: { title },
     plans,
   } as ScalingPlanDefinition;
 }

From cc2448cb396c0db033eeed020e2d925021d30b04 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Sun, 19 Nov 2023 21:39:37 +0900
Subject: [PATCH 71/94] feat(web-app): add initialize button, logic, and edit
 submit target button using type issue

---
 core/web-app/src/app/app/metric-drawer.tsx            | 5 ++++-
 core/web-app/src/app/app/planning-drawer.tsx          | 5 +++--
 core/web-app/src/app/app/scaling-component-drawer.tsx | 5 ++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index bcb82da9..24f360ac 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -94,7 +94,7 @@ export default function MetricDetailDrawer({
 
   // Exit metrics drawer
   const onClickExit = async () => {
-    goBack();
+    goBack(false);
   };
 
   const onClickInitialize = async () => {
@@ -163,6 +163,7 @@ export default function MetricDetailDrawer({
                   <button
                     className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-5 pr-5 text-sm text-gray-50"
                     onClick={onClickInitialize}
+                    type="button"
                   >
                     RESET
                   </button>
@@ -170,6 +171,7 @@ export default function MetricDetailDrawer({
                   <button
                     className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
                     onClick={onClickRemove}
+                    type="button"
                   >
                     <Image
                       src="/assets/icons/delete.svg"
@@ -190,6 +192,7 @@ export default function MetricDetailDrawer({
                 <button
                   className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
                   onClick={onClickExit}
+                  type="button"
                 >
                   EXIT
                 </button>
diff --git a/core/web-app/src/app/app/planning-drawer.tsx b/core/web-app/src/app/app/planning-drawer.tsx
index b6293bf3..59812764 100644
--- a/core/web-app/src/app/app/planning-drawer.tsx
+++ b/core/web-app/src/app/app/planning-drawer.tsx
@@ -36,7 +36,7 @@ export default function PlanningDetailDrawer({
 
   // Exit metrics drawer
   const onClickExit = async () => {
-    goBack();
+    goBack(false);
   };
 
   const onClickInitialize = async () => {
@@ -52,7 +52,6 @@ export default function PlanningDetailDrawer({
     const planDefinition = generatePlanDefinition({ title });
     try {
       const response = await PlanService.createPlan(planDefinition);
-
       goBack(true);
     } catch (error) {
       console.log(error);
@@ -79,6 +78,7 @@ export default function PlanningDetailDrawer({
               <div className="flex px-4">
                 <button
                   className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-5 pr-5 text-sm text-gray-50"
+                  type="button"
                   onClick={onClickInitialize}
                 >
                   RESET
@@ -92,6 +92,7 @@ export default function PlanningDetailDrawer({
                 <button
                   className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
                   onClick={onClickExit}
+                  type="button"
                 >
                   EXIT
                 </button>
diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index 98ea877f..b5bedf26 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -100,7 +100,7 @@ export default function ScalingComponentDetailDrawer({
 
   // Exit scaling-components drawer
   const onClickExit = async () => {
-    goBack();
+    goBack(false);
   };
 
   const onClickInitialize = async () => {
@@ -171,6 +171,7 @@ export default function ScalingComponentDetailDrawer({
                   <button
                     className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-red-400 bg-red-400 pl-5 pr-5 text-sm text-gray-50"
                     onClick={onClickInitialize}
+                    type="button"
                   >
                     RESET
                   </button>
@@ -178,6 +179,7 @@ export default function ScalingComponentDetailDrawer({
                   <button
                     className="mr-1 flex h-8 items-center justify-center rounded-md border border-red-400  bg-red-400 pl-1 pr-1 text-sm text-gray-50"
                     onClick={onClickRemove}
+                    type="button"
                   >
                     <Image
                       src="/assets/icons/delete.svg"
@@ -198,6 +200,7 @@ export default function ScalingComponentDetailDrawer({
                 <button
                   className="ml-1 flex h-8 items-center justify-center rounded-md border border-gray-600 pl-5 pr-5 text-sm text-gray-600"
                   onClick={onClickExit}
+                  type="button"
                 >
                   EXIT
                 </button>

From 93e71d204aaf6d26f3ed0cf583e4d8377830a766 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 00:56:38 +0900
Subject: [PATCH 72/94] refactor(web-app): refactor scaling components page

---
 .../src/app/app/scaling-components/page.tsx   | 120 ++++++++----------
 1 file changed, 54 insertions(+), 66 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-components/page.tsx b/core/web-app/src/app/app/scaling-components/page.tsx
index 28416567..59852768 100644
--- a/core/web-app/src/app/app/scaling-components/page.tsx
+++ b/core/web-app/src/app/app/scaling-components/page.tsx
@@ -4,9 +4,9 @@ import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 
 import ContentHeader from '../content-header';
-import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
 import ScalingComponentService from '@/services/scaling-component';
 import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
+import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
 
 async function getScalingComponents() {
   const components = await ScalingComponentService.getScalingComponents();
@@ -21,6 +21,7 @@ export default function ScalingComponentsPage() {
   const [components, setComponents] = useState<ScalingComponentDefinitionEx[]>(
     []
   );
+  const [checkAllFlag, setCheckAllFlag] = useState(false);
 
   useEffect(() => {
     const fetchComponents = async () => {
@@ -34,14 +35,11 @@ export default function ScalingComponentsPage() {
     fetchComponents();
   }, []);
 
-  const [checkAllFlag, setCheckAllFlag] = useState(false);
-
-  const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const checked = e.target.checked;
-    setCheckAllFlag(checked);
-    const updatedComponents = components.map((componentsItem) => ({
-      ...componentsItem,
-      isChecked: checked,
+  const handleCheckChange = (isChecked: boolean) => {
+    setCheckAllFlag(isChecked);
+    const updatedComponents = components.map((item) => ({
+      ...item,
+      isChecked,
     }));
     setComponents(updatedComponents);
   };
@@ -71,7 +69,7 @@ export default function ScalingComponentsPage() {
                       type="checkbox"
                       className="checkbox"
                       checked={checkAllFlag}
-                      onChange={handleCheckAllChange}
+                      onChange={(e) => handleCheckChange(e.target.checked)}
                     />
                   </label>
                 </th>
@@ -97,62 +95,52 @@ export default function ScalingComponentsPage() {
             </thead>
             <tbody className="text-md min-h-12 flex w-full flex-col items-center justify-between border-b py-0 text-gray-800">
               {components.map(
-                (componentsItem: ScalingComponentDefinitionEx) => {
-                  return (
-                    <tr
-                      key={componentsItem.db_id}
-                      className="flex w-full border-b px-8 py-4"
-                    >
-                      <td className="mr-4 flex h-full flex-1 items-start">
-                        <label className="flex items-center">
-                          <input
-                            type="checkbox"
-                            className="checkbox"
-                            checked={componentsItem.isChecked}
-                            onChange={(e) => {
-                              const checked = e.target.checked;
-                              const updatedComponents = components.map((item) =>
-                                item.id === componentsItem.id
-                                  ? { ...item, isChecked: checked }
-                                  : item
-                              );
-                              setComponents(updatedComponents);
-                            }}
-                          />
-                        </label>
-                      </td>
-                      <td className="mx-4 flex h-full w-full flex-8 items-start">
-                        <div className="flex items-center break-all">
-                          {componentsItem.component_kind}
-                        </div>
-                      </td>
-                      <td className="mx-4 flex h-full w-full flex-8 items-start">
-                        <div className="flex items-center break-all">
-                          {componentsItem.id}
-                        </div>
-                      </td>
-                      <td className="mx-4 flex h-full w-full flex-8 items-start">
-                        <div className="flex flex-col items-center">
-                          {renderKeyValuePairsWithJson(
-                            JSON.stringify(componentsItem.metadata),
-                            false
-                          )}
-                        </div>
-                      </td>
-                      <td className="mx-4 flex h-full w-full flex-2 items-start">
-                        <div className="flex items-center">
-                          <Link
-                            href={`/app/scaling-components/${componentsItem.db_id}`}
-                          >
-                            <button className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
-                              Details
-                            </button>
-                          </Link>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                }
+                (componentsItem: ScalingComponentDefinitionEx) => (
+                  <tr
+                    key={componentsItem.db_id}
+                    className="flex w-full border-b px-8 py-4"
+                  >
+                    <td className="mr-4 flex h-full flex-1 items-start">
+                      <label className="flex items-center">
+                        <input
+                          type="checkbox"
+                          className="checkbox"
+                          checked={componentsItem.isChecked}
+                          onChange={(e) => handleCheckChange(e.target.checked)}
+                        />
+                      </label>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-8 items-start">
+                      <div className="flex items-center break-all">
+                        {componentsItem.component_kind}
+                      </div>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-8 items-start">
+                      <div className="flex items-center break-all">
+                        {componentsItem.id}
+                      </div>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-8 items-start">
+                      <div className="flex flex-col items-center">
+                        {renderKeyValuePairsWithJson(
+                          JSON.stringify(componentsItem.metadata),
+                          false
+                        )}
+                      </div>
+                    </td>
+                    <td className="mx-4 flex h-full w-full flex-2 items-start">
+                      <div className="flex items-center">
+                        <Link
+                          href={`/app/scaling-components/${componentsItem.db_id}`}
+                        >
+                          <button className="badge-success badge bg-[#074EAB] px-2 py-3 text-white">
+                            Details
+                          </button>
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                )
               )}
             </tbody>
           </table>

From 2ebab0133ef7df99d6738ddffb275868bc2bc00d Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:15:45 +0900
Subject: [PATCH 73/94] refactor(web-app): refactor planning details layout

---
 core/web-app/src/app/app/planning/[id]/layout.tsx | 14 +++++++-------
 core/web-app/src/app/app/subcontent-header.tsx    |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/web-app/src/app/app/planning/[id]/layout.tsx b/core/web-app/src/app/app/planning/[id]/layout.tsx
index d9661cef..f4f7a72c 100644
--- a/core/web-app/src/app/app/planning/[id]/layout.tsx
+++ b/core/web-app/src/app/app/planning/[id]/layout.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 import PlanService from '@/services/plan';
-import SubContentHeaderProps from '../../subcontent-header';
+import SubContentHeader from '../../subcontent-header';
 import PlanItemDrawerContainer from './plan-item-drawer-container';
 import PlanningDetailTabs from './planning-detail-tabs';
-import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
 import PlanningDetailControls from './planning-detail-controls';
 import PlanningPage from '../page';
 import PlanningDetailDrawer from '../../planning-drawer';
+import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition';
 
 interface ScalingPlanDefinitionEx extends ScalingPlanDefinition {
   metadata: { cool_down: number; interval: number; title: string };
@@ -17,8 +17,8 @@ async function getScalingPlanDefinition(dbId: string) {
   try {
     const scalingPlanDefinition = await PlanService.getPlan(dbId);
     return scalingPlanDefinition as ScalingPlanDefinitionEx;
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
   }
 }
 
@@ -44,7 +44,7 @@ export default async function PlanningDetailLayout({
     return (
       <div className="flex h-full w-full flex-row">
         <div className="flex h-full w-full flex-col">
-          <SubContentHeaderProps title="Plan not found"></SubContentHeaderProps>
+          <SubContentHeader title="Plan not found"></SubContentHeader>
         </div>
       </div>
     );
@@ -52,10 +52,10 @@ export default async function PlanningDetailLayout({
   return (
     <div className="flex h-full w-full flex-row">
       <div className="flex h-full w-full flex-col">
-        <SubContentHeaderProps
+        <SubContentHeader
           title={scalingPlanDefinition.metadata.title}
           right={<PlanningDetailControls />}
-        ></SubContentHeaderProps>
+        ></SubContentHeader>
         <PlanningDetailTabs />
         <div className="relative flex w-full flex-1 flex-col">{children}</div>
       </div>
diff --git a/core/web-app/src/app/app/subcontent-header.tsx b/core/web-app/src/app/app/subcontent-header.tsx
index 80f176e2..927395eb 100644
--- a/core/web-app/src/app/app/subcontent-header.tsx
+++ b/core/web-app/src/app/app/subcontent-header.tsx
@@ -6,7 +6,7 @@ interface SubContentHeaderProps {
   right?: ReactNode;
 }
 
-export default function ContentHeader({
+export default function SubContentHeader({
   title,
   children,
   right,

From 69e5080df601c4b5889be433a622557abf5858b4 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:17:08 +0900
Subject: [PATCH 74/94] refactor(web-app): remove comments in planning page

---
 core/web-app/src/app/app/planning/page.tsx | 24 ----------------------
 1 file changed, 24 deletions(-)

diff --git a/core/web-app/src/app/app/planning/page.tsx b/core/web-app/src/app/app/planning/page.tsx
index 9ca512d2..4b9f18c9 100644
--- a/core/web-app/src/app/app/planning/page.tsx
+++ b/core/web-app/src/app/app/planning/page.tsx
@@ -5,29 +5,5 @@ export default function PlanningPage() {
         <div className="flex w-full min-w-full flex-row items-center justify-between border-t border-gray-200 bg-gray-75" />
       </div>
     </main>
-
-    // <div className="flex h-full w-full">
-    //   <aside className="flex w-80 flex-col border-r border-base-300 bg-base-200">
-    //     {/* Header of aside */}
-    //     <div className="prose flex h-14 w-full items-center justify-start border-b border-base-300 px-3">
-    //       <h4 className="m-0 flex-1">Plans</h4>
-    //       <span className="badge">4</span>
-    //     </div>
-    //     {/* Plan List */}
-    //     <div className="flex-1 overflow-y-auto">{/* Plan Item */}</div>
-    //   </aside>
-    //   <main className="flex flex-1 flex-col">
-    //     {/* Plan Detail Header */}
-    //     <div className="h-22 prose flex w-full min-w-full flex-col border-b border-base-300 bg-slate-50 p-3">
-    //       {/* Plan Title */}
-    //       <h3 className="m-0 flex-1">Free Plan Tenancy Autoscaling</h3>
-    //       <div className="tabs">
-    //         <a className="tab-bordered tab no-underline">Tab 1</a>
-    //         <a className="tab-bordered tab tab-active no-underline">Tab 2</a>
-    //         <a className="tab-bordered tab no-underline">Tab 3</a>
-    //       </div>
-    //     </div>
-    //   </main>
-    // </div>
   );
 }

From 7e3a9ddbf731b2ffc3423bc7aba31e507b322d17 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:21:17 +0900
Subject: [PATCH 75/94] refactor(web-app): refactor overall layout

---
 core/web-app/src/app/app/layout.tsx | 42 +++++++++++++++--------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/core/web-app/src/app/app/layout.tsx b/core/web-app/src/app/app/layout.tsx
index 06282ea9..0dab86f1 100644
--- a/core/web-app/src/app/app/layout.tsx
+++ b/core/web-app/src/app/app/layout.tsx
@@ -8,42 +8,44 @@ import Menu from './menu';
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
-
-  const handleClick = () => {
-    router.push('/app');
-  };
-
   const pathname = usePathname();
 
-  const [overflowHiddenFlag, setOverflowHiddenFlag] = useState(false);
+  const urlPatterns = [
+    '/app/metrics/',
+    '/app/metrics/new',
+    '/app/scaling-components/',
+    '/app/scaling-components/new',
+    '/app/planning/',
+    '/app/planning/new',
+  ];
+
+  const [overflowHiddenFlag, setOverflowHiddenFlag] = useState(
+    urlPatterns.some((pattern) => pathname.includes(pattern))
+  );
 
   useEffect(() => {
     const currentURL = pathname;
 
-    if (
-      currentURL.includes('/app/metrics/') ||
-      currentURL.includes('/app/metrics/new') ||
-      currentURL.includes('/app/scaling-components/') ||
-      currentURL.includes('/app/scaling-components/new') ||
-      currentURL.includes('/app/planning/') ||
-      currentURL.includes('/app/planning/new')
-    ) {
+    if (urlPatterns.some((pattern) => currentURL.includes(pattern))) {
       setOverflowHiddenFlag(true);
     } else {
       setOverflowHiddenFlag(false);
     }
   }, [pathname]);
 
+  const containerClassName = `h-screen w-screen min-w-screen-md ${
+    overflowHiddenFlag ? 'overflow-hidden' : 'overflow-auto'
+  }`;
+
   return (
-    <div
-      className={`h-screen w-screen min-w-screen-md ${
-        overflowHiddenFlag ? 'overflow-hidden' : 'overflow-auto'
-      }`}
-    >
+    <div className={containerClassName}>
       <nav className="navbar h-14 w-full p-0 text-neutral-content">
         <div className="flex h-full w-full items-center pl-8 pr-8">
           <div className="flex h-full items-center justify-between">
-            <figure onClick={handleClick} className="cursor-pointer">
+            <figure
+              onClick={() => router.push('/app')}
+              className="cursor-pointer"
+            >
               <Image
                 src="/assets/images/wave-autoscale_symbol.svg"
                 alt="wave-autoscale_symbol.svg"

From 7945a181b386ab5790e634f1162a599f20632835 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:24:40 +0900
Subject: [PATCH 76/94] refactor(web-app): refactor metrics layout error
 variable name

---
 core/web-app/src/app/app/metrics/[id]/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/[id]/layout.tsx b/core/web-app/src/app/app/metrics/[id]/layout.tsx
index 466725a0..4d0738d6 100644
--- a/core/web-app/src/app/app/metrics/[id]/layout.tsx
+++ b/core/web-app/src/app/app/metrics/[id]/layout.tsx
@@ -7,8 +7,8 @@ async function getMetricDefinition(dbId: string) {
   try {
     const metricDefinition = await MetricService.getMetric(dbId);
     return metricDefinition;
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
   }
 }
 

From f7fa15fb1b14fcd9a14649a6f9363c80bbef7af8 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:26:27 +0900
Subject: [PATCH 77/94] refactor(web-app): refactor menu component using
 independent function

---
 core/web-app/src/app/app/menu.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/menu.tsx b/core/web-app/src/app/app/menu.tsx
index 14647b05..014e3afd 100644
--- a/core/web-app/src/app/app/menu.tsx
+++ b/core/web-app/src/app/app/menu.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import classNames from 'classnames';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -11,6 +12,10 @@ function getMenuClassNames(currentPathname: string, targetPath?: string) {
   );
 }
 
+function isActivePath(currentPathname: string, targetPath: string) {
+  return currentPathname.includes(targetPath);
+}
+
 function MenuItem({
   pathname,
   targetPath,
@@ -24,7 +29,7 @@ function MenuItem({
     <li
       className={classNames(
         'flex-column mx-0.5 flex h-full items-center lg:flex-row',
-        pathname.includes(targetPath)
+        isActivePath(pathname, targetPath)
           ? 'border-b-4 border-purple-500'
           : 'border-b-4 border-white'
       )}

From f196dfe64bc00cba6a040f57ecfec3712a2198c5 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:27:31 +0900
Subject: [PATCH 78/94] refactor(web-app): refactor planning details tab
 component using independent function

---
 .../src/app/app/planning/[id]/planning-detail-tabs.tsx      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
index db74ddf1..604bf097 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
@@ -13,6 +13,10 @@ function getTabClassNames(currentPathname: string, targetPath?: string) {
   );
 }
 
+function isActivePath(currentPathname: string, targetPath: string) {
+  return currentPathname.includes(targetPath);
+}
+
 function TabItem({
   pathname,
   targetPath,
@@ -26,7 +30,7 @@ function TabItem({
     <li
       className={classNames(
         'flex-column mx-0.5 flex h-full items-center lg:flex-row',
-        pathname.includes(targetPath)
+        isActivePath(pathname, targetPath)
           ? 'border-b-4 border-blue-400'
           : 'border-b-4 border-white'
       )}

From 3b4b247c005f208031e3ab6ebc93fb7a9d82fd61 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:29:27 +0900
Subject: [PATCH 79/94] refactor(web-app): refactor plan binding to generate
 plan definition using default value assignment

---
 core/web-app/src/utils/plan-binding.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/core/web-app/src/utils/plan-binding.ts b/core/web-app/src/utils/plan-binding.ts
index 314cfc09..efe787d9 100644
--- a/core/web-app/src/utils/plan-binding.ts
+++ b/core/web-app/src/utils/plan-binding.ts
@@ -2,7 +2,7 @@ import { ScalingPlanDefinition } from '@/types/bindings/scaling-plan-definition'
 import { nanoid } from 'nanoid';
 
 export function generatePlanDefinition({
-  id = '',
+  id = `generated-id-${nanoid(5)}`,
   db_id = '',
   title,
   plans = [],
@@ -12,9 +12,6 @@ export function generatePlanDefinition({
   title: string;
   plans?: any[];
 }) {
-  if (!id) {
-    id = `generated-id-${nanoid(5)}`;
-  }
   return {
     kind: 'ScalingPlan',
     db_id,

From 18fb1ce313edbfe3991206bbe751f04921c8f579 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:44:28 +0900
Subject: [PATCH 80/94] refactor(web-app): refactor metrics page using inner
 try catch and rearrange hook statement

---
 core/web-app/src/app/app/metrics/page.tsx | 30 +++++++++++------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/page.tsx b/core/web-app/src/app/app/metrics/page.tsx
index ff3c2826..75f40f7d 100644
--- a/core/web-app/src/app/app/metrics/page.tsx
+++ b/core/web-app/src/app/app/metrics/page.tsx
@@ -8,9 +8,14 @@ import { MetricDefinition } from '@/types/bindings/metric-definition';
 import MetricService from '@/services/metric';
 import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
 
-async function getMetrics() {
-  const metrics = await MetricService.getMetrics();
-  return metrics;
+async function fetchMetrics() {
+  try {
+    const metrics = await MetricService.getMetrics();
+    return metrics;
+  } catch (error) {
+    console.error({ error });
+    return [];
+  }
 }
 
 interface MetricDefinitionEx extends MetricDefinition {
@@ -19,21 +24,16 @@ interface MetricDefinitionEx extends MetricDefinition {
 
 export default function MetricsPage() {
   const [metrics, setMetrics] = useState<MetricDefinitionEx[]>([]);
+  const [checkAllFlag, setCheckAllFlag] = useState(false);
 
   useEffect(() => {
-    const fetchMetrics = async () => {
-      try {
-        const metrics = await getMetrics();
-        setMetrics(metrics);
-      } catch (error) {
-        console.error({ error });
-      }
-    };
-    fetchMetrics();
+    async function fetchData() {
+      const metricsData = await fetchMetrics();
+      setMetrics(metricsData);
+    }
+    fetchData();
   }, []);
 
-  const [checkAllFlag, setCheckAllFlag] = useState(false);
-
   const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const checked = e.target.checked;
     setCheckAllFlag(checked);
@@ -44,8 +44,6 @@ export default function MetricsPage() {
     setMetrics(updatedMetrics);
   };
 
-  console.log({ metrics });
-
   return (
     <main className="flex h-full w-full flex-col">
       <div>

From 9ae5e4eed075dee843b7d421af680490b749fea1 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 01:45:06 +0900
Subject: [PATCH 81/94] refactor(web-app): refactor scaling components layout
 using inner try catch and rearrange import statments

---
 .../app/scaling-components/[id]/layout.tsx    | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
index c584ee6e..c518c3f2 100644
--- a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
+++ b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
@@ -1,20 +1,7 @@
-import MetricService from '@/services/metric';
-import ScalingComponentDetailDrawer from '../../scaling-component-drawer';
-import { MetricDefinition } from '@/types/bindings/metric-definition';
 import ScalingComponentService from '@/services/scaling-component';
-import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
+import ScalingComponentDetailDrawer from '../../scaling-component-drawer';
 import ScalingComponentsPage from '../page';
 
-async function getScalingComponentDefinition(dbId: string) {
-  try {
-    const componentDefinition =
-      await ScalingComponentService.getScalingComponent(dbId);
-    return componentDefinition;
-  } catch (e) {
-    console.error(e);
-  }
-}
-
 const NEW_PATH = 'new';
 
 export default async function ScalingComponentDetailLayout({
@@ -24,11 +11,19 @@ export default async function ScalingComponentDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
-  let componentDefinition: ScalingComponentDefinition | undefined;
+  let componentDefinition;
+
   if (dbId && dbId !== NEW_PATH) {
-    componentDefinition = await getScalingComponentDefinition(dbId);
-    console.log({ componentDefinition: componentDefinition });
+    try {
+      componentDefinition = await ScalingComponentService.getScalingComponent(
+        dbId
+      );
+      console.log({ componentDefinition });
+    } catch (error) {
+      console.error(error);
+    }
   }
+
   return (
     <div className="relative flex h-full w-full">
       <ScalingComponentsPage />

From 6ac9e9f7bb4cca0283d10983482e055faaffa0d2 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:01:37 +0900
Subject: [PATCH 82/94] refactor(web-app): refactor scaling components detail
 layout using fast return statement

---
 .../app/scaling-components/[id]/layout.tsx    | 45 ++++++++++++-------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
index c518c3f2..bb918328 100644
--- a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
+++ b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
@@ -11,23 +11,34 @@ export default async function ScalingComponentDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
-  let componentDefinition;
-
-  if (dbId && dbId !== NEW_PATH) {
-    try {
-      componentDefinition = await ScalingComponentService.getScalingComponent(
-        dbId
-      );
-      console.log({ componentDefinition });
-    } catch (error) {
-      console.error(error);
-    }
+  console.log(dbId);
+  if (dbId === NEW_PATH) {
+    return (
+      <div className="relative flex h-full w-full">
+        <ScalingComponentsPage />
+      </div>
+    );
   }
 
-  return (
-    <div className="relative flex h-full w-full">
-      <ScalingComponentsPage />
-      <ScalingComponentDetailDrawer componentDefinition={componentDefinition} />
-    </div>
-  );
+  try {
+    const componentDefinition =
+      await ScalingComponentService.getScalingComponent(dbId);
+    console.log({ componentDefinition });
+
+    return (
+      <div className="relative flex h-full w-full">
+        <ScalingComponentsPage />
+        <ScalingComponentDetailDrawer
+          componentDefinition={componentDefinition}
+        />
+      </div>
+    );
+  } catch (error) {
+    console.error(error);
+    return (
+      <div className="relative flex h-full w-full">
+        <ScalingComponentsPage />
+      </div>
+    );
+  }
 }

From b0a6e29ba801a6a8c9f037f64720b485b6c19314 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:05:42 +0900
Subject: [PATCH 83/94] refactor(web-app): refactor metrics detail layout using
 fast return statement

---
 .../src/app/app/metrics/[id]/layout.tsx       | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/[id]/layout.tsx b/core/web-app/src/app/app/metrics/[id]/layout.tsx
index 4d0738d6..d75aa960 100644
--- a/core/web-app/src/app/app/metrics/[id]/layout.tsx
+++ b/core/web-app/src/app/app/metrics/[id]/layout.tsx
@@ -1,17 +1,7 @@
 import MetricService from '@/services/metric';
 import MetricDetailDrawer from '../../metric-drawer';
-import { MetricDefinition } from '@/types/bindings/metric-definition';
 import MetricsPage from '../page';
 
-async function getMetricDefinition(dbId: string) {
-  try {
-    const metricDefinition = await MetricService.getMetric(dbId);
-    return metricDefinition;
-  } catch (error) {
-    console.error(error);
-  }
-}
-
 const NEW_PATH = 'new';
 
 export default async function MetricDetailLayout({
@@ -21,15 +11,30 @@ export default async function MetricDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
-  let metricDefinition: MetricDefinition | undefined;
-  if (dbId && dbId !== NEW_PATH) {
-    metricDefinition = await getMetricDefinition(dbId);
+  if (dbId === NEW_PATH) {
+    return (
+      <div className="relative flex h-full w-full">
+        <MetricsPage />
+      </div>
+    );
+  }
+
+  try {
+    const metricDefinition = await MetricService.getMetric(dbId);
     console.log({ metricDefinition });
+
+    return (
+      <div className="relative flex h-full w-full">
+        <MetricsPage />
+        <MetricDetailDrawer metricDefinition={metricDefinition} />
+      </div>
+    );
+  } catch (error) {
+    console.error(error);
+    return (
+      <div className="relative flex h-full w-full">
+        <MetricsPage />
+      </div>
+    );
   }
-  return (
-    <div className="relative flex h-full w-full">
-      <MetricsPage />
-      <MetricDetailDrawer metricDefinition={metricDefinition} />;
-    </div>
-  );
 }

From 10fc97729594abce20d197bdac23042df04ab7d0 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:07:38 +0900
Subject: [PATCH 84/94] refactor(web-app): add uncaught path in planning
 details tab

---
 .../src/app/app/planning/[id]/planning-detail-tabs.tsx     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
index 604bf097..1287cd7c 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
@@ -56,10 +56,13 @@ export default function PlanningDetailTabs() {
   useEffect(() => {
     const currentURL = pathname;
 
-    if (!currentURL.includes('/app/planning/new')) {
+    if (
+      !currentURL.includes('/app/planning/new') &&
+      !currentURL.includes('code')
+    ) {
       router.push(`/app/planning/${id}/diagram`);
     }
-  }, []);
+  }, [pathname]);
 
   return (
     <div className="flex h-12 w-full items-center border-b px-4">

From a7acec581eb2327808ea2a7e80df2025b3c2f0fb Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:10:25 +0900
Subject: [PATCH 85/94] refactor(web-app): refactor separate control and view
 part in metadata form controls

---
 .../src/app/app/metadata-form-controls.tsx    | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/core/web-app/src/app/app/metadata-form-controls.tsx b/core/web-app/src/app/app/metadata-form-controls.tsx
index 35466990..e7e650ce 100644
--- a/core/web-app/src/app/app/metadata-form-controls.tsx
+++ b/core/web-app/src/app/app/metadata-form-controls.tsx
@@ -1,31 +1,35 @@
 import { MetadataKeyType } from '@/utils/metadata-key-type';
 import { FieldValues, UseFormRegister } from 'react-hook-form';
 
-// Generate Metadata Form Controls
+const createMetadataControl = (
+  keyType: MetadataKeyType,
+  register: UseFormRegister<FieldValues>
+) => (
+  <div className="form-control w-full px-4 py-2" key={keyType.key}>
+    <label className="label px-0 py-2">
+      <span className="text-md label-text px-2">{keyType.key}</span>
+      {/* <span className="label-text-alt">label-text-alt</span> */}
+    </label>
+    <input
+      type={keyType.type === 'number' ? 'number' : 'text'}
+      placeholder={keyType.key}
+      className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
+      autoComplete="off"
+      autoCapitalize="off"
+      autoCorrect="off"
+      {...register(keyType.key, {
+        valueAsNumber: keyType.type === 'number',
+      })}
+    />
+  </div>
+);
+
 export const getMetadataFormControls = (
   keyTypes: MetadataKeyType[],
   register: UseFormRegister<FieldValues>
 ) => {
-  const metadataFormControls = keyTypes.map((keyType) => {
-    return (
-      <div className="form-control w-full px-4 py-2" key={keyType.key}>
-        <label className="label px-0 py-2">
-          <span className="text-md label-text px-2">{keyType.key}</span>
-          {/* <span className="label-text-alt">label-text-alt</span> */}
-        </label>
-        <input
-          type={keyType.type === 'number' ? 'number' : 'text'}
-          placeholder={keyType.key}
-          className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
-          autoComplete="off"
-          autoCapitalize="off"
-          autoCorrect="off"
-          {...register(keyType.key, {
-            valueAsNumber: keyType.type === 'number',
-          })}
-        />
-      </div>
-    );
-  });
+  const metadataFormControls = keyTypes.map((keyType) =>
+    createMetadataControl(keyType, register)
+  );
   return metadataFormControls;
 };

From 7c491def73bcce08808e204c6c2d0bd762379527 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:22:26 +0900
Subject: [PATCH 86/94] refactor(web-app): refactor autoscaling history page
 with simple date format and handle date change function

---
 .../src/app/app/autoscaling-history/page.tsx  | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/core/web-app/src/app/app/autoscaling-history/page.tsx b/core/web-app/src/app/app/autoscaling-history/page.tsx
index 1c7fd596..3a902804 100644
--- a/core/web-app/src/app/app/autoscaling-history/page.tsx
+++ b/core/web-app/src/app/app/autoscaling-history/page.tsx
@@ -12,6 +12,8 @@ import { AutoscalingHistoryDefinition } from '@/types/bindings/autoscaling-histo
 import HistoryHeatmap from './history-heatmap';
 import { renderKeyValuePairsWithJson } from '../keyvalue-renderer';
 
+const formatDate = (date: Dayjs) => date.format('YYYY-MM-DD');
+
 async function getHistory(from: Dayjs, to: Dayjs) {
   const history = await AutoscalingHistoryService.getHistoryByFromTo(from, to);
   return history;
@@ -27,8 +29,10 @@ interface AutoscalingHistoryDefinitionEx extends AutoscalingHistoryDefinition {
 
 export default function AutoscalingHistoryPage() {
   const searchParams = useSearchParams();
-  const from = searchParams.get('from') || DEFAULT_FROM.format('YYYY-MM-DD');
-  const to = searchParams.get('to') || DEFAULT_TO.format('YYYY-MM-DD');
+  const fromParam = searchParams.get('from');
+  const toParam = searchParams.get('to');
+  const from = fromParam || formatDate(DEFAULT_FROM);
+  const to = toParam || formatDate(DEFAULT_TO);
   const fromDayjs = useMemo(() => dayjs(from), [from]);
   const toDayjs = useMemo(() => dayjs(to).endOf('day'), [to]);
   const [history, setHistory] = useState<AutoscalingHistoryDefinitionEx[]>([]);
@@ -50,28 +54,24 @@ export default function AutoscalingHistoryPage() {
     fetchHistory();
   }, [fromDayjs, toDayjs]);
 
-  const handleFromDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newFromDate = dayjs(e.target.value);
-    router.push(
-      `/app/autoscaling-history?from=${newFromDate.format(
-        'YYYY-MM-DD'
-      )}&to=${to}`
-    );
-  };
+  const handleDateChange = (field: 'from' | 'to', value: string) => {
+    const newDate = dayjs(value);
+    const isValidDate = newDate.isValid();
 
-  const handleToDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newToDate = dayjs(e.target.value);
-    router.push(
-      `/app/autoscaling-history?from=${from}&to=${newToDate.format(
-        'YYYY-MM-DD'
-      )}`
-    );
+    if (isValidDate) {
+      const params = {
+        from: field === 'from' ? formatDate(newDate) : from,
+        to: field === 'to' ? formatDate(newDate) : to,
+      };
+      router.push(
+        `/app/autoscaling-history?from=${params.from}&to=${params.to}`
+      );
+    }
   };
-
   const [checkAllFlag, setCheckAllFlag] = useState(false);
 
-  const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const checked = e.target.checked;
+  const handleCheckAllChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = event.target.checked;
     setCheckAllFlag(checked);
     const updatedHistory = history.map((historyItem) => ({
       ...historyItem,
@@ -91,9 +91,11 @@ export default function AutoscalingHistoryPage() {
                 <input
                   type="date"
                   className="input-bordered input input-sm max-w-[130px] cursor-text focus:outline-none"
-                  max={toDayjs.format('YYYY-MM-DD')}
+                  max={formatDate(toDayjs)}
                   value={from}
-                  onChange={handleFromDateChange}
+                  onChange={(event) =>
+                    handleDateChange('from', event.target.value)
+                  }
                 />
               </label>
             </div>
@@ -103,9 +105,11 @@ export default function AutoscalingHistoryPage() {
                 <input
                   type="date"
                   className="input-bordered input input-sm max-w-[130px] cursor-text focus:outline-none"
-                  min={from}
+                  min={formatDate(fromDayjs)}
                   value={to}
-                  onChange={handleToDateChange}
+                  onChange={(event) =>
+                    handleDateChange('to', event.target.value)
+                  }
                 />
               </label>
             </div>
@@ -168,8 +172,8 @@ export default function AutoscalingHistoryPage() {
                       type="checkbox"
                       className="checkbox"
                       checked={historyItem.isChecked}
-                      onChange={(e) => {
-                        const checked = e.target.checked;
+                      onChange={(event) => {
+                        const checked = event.target.checked;
                         const updatedHistory = history.map((item) =>
                           item.id === historyItem.id
                             ? { ...item, isChecked: checked }

From a6ec7a20e9ed109d3b75b9754683042e837c0987 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:32:27 +0900
Subject: [PATCH 87/94] refactor(web-app): refactor variable from e to event
 for common readability in scalign components and metrics page

---
 core/web-app/src/app/app/metrics/page.tsx            | 4 ++--
 core/web-app/src/app/app/scaling-components/page.tsx | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/page.tsx b/core/web-app/src/app/app/metrics/page.tsx
index 75f40f7d..4958b171 100644
--- a/core/web-app/src/app/app/metrics/page.tsx
+++ b/core/web-app/src/app/app/metrics/page.tsx
@@ -106,8 +106,8 @@ export default function MetricsPage() {
                           type="checkbox"
                           className="checkbox"
                           checked={metricsItem.isChecked}
-                          onChange={(e) => {
-                            const checked = e.target.checked;
+                          onChange={(event) => {
+                            const checked = event.target.checked;
                             const updatedMetrics = metrics.map((item) =>
                               item.id === metricsItem.id
                                 ? { ...item, isChecked: checked }
diff --git a/core/web-app/src/app/app/scaling-components/page.tsx b/core/web-app/src/app/app/scaling-components/page.tsx
index 59852768..f2e1ccb8 100644
--- a/core/web-app/src/app/app/scaling-components/page.tsx
+++ b/core/web-app/src/app/app/scaling-components/page.tsx
@@ -69,7 +69,9 @@ export default function ScalingComponentsPage() {
                       type="checkbox"
                       className="checkbox"
                       checked={checkAllFlag}
-                      onChange={(e) => handleCheckChange(e.target.checked)}
+                      onChange={(event) =>
+                        handleCheckChange(event.target.checked)
+                      }
                     />
                   </label>
                 </th>
@@ -106,7 +108,9 @@ export default function ScalingComponentsPage() {
                           type="checkbox"
                           className="checkbox"
                           checked={componentsItem.isChecked}
-                          onChange={(e) => handleCheckChange(e.target.checked)}
+                          onChange={(event) =>
+                            handleCheckChange(event.target.checked)
+                          }
                         />
                       </label>
                     </td>

From 1046cb8f473cbd925eda2f2d1a53dda213835297 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:37:30 +0900
Subject: [PATCH 88/94] fix(web-app): revert layout for new metrics and scaling
 components

---
 .../src/app/app/metrics/[id]/layout.tsx       | 43 ++++++++----------
 .../app/scaling-components/[id]/layout.tsx    | 45 +++++++------------
 2 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/[id]/layout.tsx b/core/web-app/src/app/app/metrics/[id]/layout.tsx
index d75aa960..4d0738d6 100644
--- a/core/web-app/src/app/app/metrics/[id]/layout.tsx
+++ b/core/web-app/src/app/app/metrics/[id]/layout.tsx
@@ -1,7 +1,17 @@
 import MetricService from '@/services/metric';
 import MetricDetailDrawer from '../../metric-drawer';
+import { MetricDefinition } from '@/types/bindings/metric-definition';
 import MetricsPage from '../page';
 
+async function getMetricDefinition(dbId: string) {
+  try {
+    const metricDefinition = await MetricService.getMetric(dbId);
+    return metricDefinition;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 const NEW_PATH = 'new';
 
 export default async function MetricDetailLayout({
@@ -11,30 +21,15 @@ export default async function MetricDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
-  if (dbId === NEW_PATH) {
-    return (
-      <div className="relative flex h-full w-full">
-        <MetricsPage />
-      </div>
-    );
-  }
-
-  try {
-    const metricDefinition = await MetricService.getMetric(dbId);
+  let metricDefinition: MetricDefinition | undefined;
+  if (dbId && dbId !== NEW_PATH) {
+    metricDefinition = await getMetricDefinition(dbId);
     console.log({ metricDefinition });
-
-    return (
-      <div className="relative flex h-full w-full">
-        <MetricsPage />
-        <MetricDetailDrawer metricDefinition={metricDefinition} />
-      </div>
-    );
-  } catch (error) {
-    console.error(error);
-    return (
-      <div className="relative flex h-full w-full">
-        <MetricsPage />
-      </div>
-    );
   }
+  return (
+    <div className="relative flex h-full w-full">
+      <MetricsPage />
+      <MetricDetailDrawer metricDefinition={metricDefinition} />;
+    </div>
+  );
 }
diff --git a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
index bb918328..c518c3f2 100644
--- a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
+++ b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
@@ -11,34 +11,23 @@ export default async function ScalingComponentDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
-  console.log(dbId);
-  if (dbId === NEW_PATH) {
-    return (
-      <div className="relative flex h-full w-full">
-        <ScalingComponentsPage />
-      </div>
-    );
-  }
-
-  try {
-    const componentDefinition =
-      await ScalingComponentService.getScalingComponent(dbId);
-    console.log({ componentDefinition });
+  let componentDefinition;
 
-    return (
-      <div className="relative flex h-full w-full">
-        <ScalingComponentsPage />
-        <ScalingComponentDetailDrawer
-          componentDefinition={componentDefinition}
-        />
-      </div>
-    );
-  } catch (error) {
-    console.error(error);
-    return (
-      <div className="relative flex h-full w-full">
-        <ScalingComponentsPage />
-      </div>
-    );
+  if (dbId && dbId !== NEW_PATH) {
+    try {
+      componentDefinition = await ScalingComponentService.getScalingComponent(
+        dbId
+      );
+      console.log({ componentDefinition });
+    } catch (error) {
+      console.error(error);
+    }
   }
+
+  return (
+    <div className="relative flex h-full w-full">
+      <ScalingComponentsPage />
+      <ScalingComponentDetailDrawer componentDefinition={componentDefinition} />
+    </div>
+  );
 }

From a40ae523a7c3d307435e7e115d149cf23f6a3285 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:42:42 +0900
Subject: [PATCH 89/94] refactor(web-app): refactor layout for scaling
 components layout and metric layout for readability

---
 .../src/app/app/metrics/[id]/layout.tsx       |  7 +++--
 .../app/scaling-components/[id]/layout.tsx    | 29 ++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/core/web-app/src/app/app/metrics/[id]/layout.tsx b/core/web-app/src/app/app/metrics/[id]/layout.tsx
index 4d0738d6..738fd80f 100644
--- a/core/web-app/src/app/app/metrics/[id]/layout.tsx
+++ b/core/web-app/src/app/app/metrics/[id]/layout.tsx
@@ -1,8 +1,11 @@
 import MetricService from '@/services/metric';
-import MetricDetailDrawer from '../../metric-drawer';
 import { MetricDefinition } from '@/types/bindings/metric-definition';
+
+import MetricDetailDrawer from '../../metric-drawer';
 import MetricsPage from '../page';
 
+const NEW_PATH = 'new';
+
 async function getMetricDefinition(dbId: string) {
   try {
     const metricDefinition = await MetricService.getMetric(dbId);
@@ -12,8 +15,6 @@ async function getMetricDefinition(dbId: string) {
   }
 }
 
-const NEW_PATH = 'new';
-
 export default async function MetricDetailLayout({
   children,
   params: { id: dbId },
diff --git a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
index c518c3f2..6f84988e 100644
--- a/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
+++ b/core/web-app/src/app/app/scaling-components/[id]/layout.tsx
@@ -1,9 +1,21 @@
 import ScalingComponentService from '@/services/scaling-component';
+import { ScalingComponentDefinition } from '@/types/bindings/scaling-component-definition';
+
 import ScalingComponentDetailDrawer from '../../scaling-component-drawer';
 import ScalingComponentsPage from '../page';
 
 const NEW_PATH = 'new';
 
+async function getScalingComponentDefinition(dbId: string) {
+  try {
+    const scalingComponentDefinition =
+      await ScalingComponentService.getScalingComponent(dbId);
+    return scalingComponentDefinition;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 export default async function ScalingComponentDetailLayout({
   children,
   params: { id: dbId },
@@ -11,23 +23,18 @@ export default async function ScalingComponentDetailLayout({
   children: React.ReactNode;
   params: { id: string };
 }) {
-  let componentDefinition;
-
+  let scalingComponentDefinition: ScalingComponentDefinition | undefined;
   if (dbId && dbId !== NEW_PATH) {
-    try {
-      componentDefinition = await ScalingComponentService.getScalingComponent(
-        dbId
-      );
-      console.log({ componentDefinition });
-    } catch (error) {
-      console.error(error);
-    }
+    scalingComponentDefinition = await getScalingComponentDefinition(dbId);
+    console.log({ scalingComponentDefinition });
   }
 
   return (
     <div className="relative flex h-full w-full">
       <ScalingComponentsPage />
-      <ScalingComponentDetailDrawer componentDefinition={componentDefinition} />
+      <ScalingComponentDetailDrawer
+        componentDefinition={scalingComponentDefinition}
+      />
     </div>
   );
 }

From c416ddb2eaf2d10abd23223f13fe402444a9941b Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:48:35 +0900
Subject: [PATCH 90/94] refactor(web-app): refactor planning tabs using simple
 function and return design components

---
 .../planning/[id]/planning-detail-tabs.tsx    | 53 ++++++++-----------
 1 file changed, 22 insertions(+), 31 deletions(-)

diff --git a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
index 1287cd7c..8025c21a 100644
--- a/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
+++ b/core/web-app/src/app/app/planning/[id]/planning-detail-tabs.tsx
@@ -5,11 +5,12 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 
-function getTabClassNames(currentPathname: string, targetPath?: string) {
+function getTabClassNames(isActive: boolean) {
   return classNames(
-    !targetPath || currentPathname.indexOf(targetPath) < 0
-      ? 'text-gray-600 pr-4 pl-4'
-      : 'text-gray-1000 pr-4 pl-4'
+    'flex-column mx-0.5 flex h-full items-center lg:flex-row',
+    isActive
+      ? 'border-b-4 border-blue-400 text-gray-1000 pr-4 pl-4'
+      : 'border-b-4 border-white text-gray-600 pr-4 pl-4'
   );
 }
 
@@ -18,30 +19,17 @@ function isActivePath(currentPathname: string, targetPath: string) {
 }
 
 function TabItem({
-  pathname,
+  isActive,
   targetPath,
   label,
 }: {
-  pathname: string;
+  isActive: boolean;
   targetPath: string;
   label: string;
 }) {
   return (
-    <li
-      className={classNames(
-        'flex-column mx-0.5 flex h-full items-center lg:flex-row',
-        isActivePath(pathname, targetPath)
-          ? 'border-b-4 border-blue-400'
-          : 'border-b-4 border-white'
-      )}
-    >
-      <Link
-        className={classNames(
-          getTabClassNames(pathname, targetPath),
-          'whitespace-nowrap'
-        )}
-        href={targetPath}
-      >
+    <li className={getTabClassNames(isActive)}>
+      <Link className="whitespace-nowrap" href={targetPath}>
         {label}
       </Link>
     </li>
@@ -64,19 +52,22 @@ export default function PlanningDetailTabs() {
     }
   }, [pathname]);
 
+  const tabItems = [
+    { targetPath: `/app/planning/${id}/diagram`, label: 'Diagram' },
+    { targetPath: `/app/planning/${id}/code`, label: 'Code' },
+  ];
+
   return (
     <div className="flex h-12 w-full items-center border-b px-4">
       <ul className="flex h-full flex-row items-center pt-1 lg:flex-row">
-        <TabItem
-          pathname={pathname}
-          targetPath={`/app/planning/${id}/diagram`}
-          label="Diagram"
-        />
-        <TabItem
-          pathname={pathname}
-          targetPath={`/app/planning/${id}/code`}
-          label="Code"
-        />
+        {tabItems.map((tab, index) => (
+          <TabItem
+            key={index}
+            isActive={isActivePath(pathname, tab.targetPath)}
+            targetPath={tab.targetPath}
+            label={tab.label}
+          />
+        ))}
       </ul>
     </div>
   );

From c01f4eb83e21b6f8dbf608117788072efaa55fc0 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:52:40 +0900
Subject: [PATCH 91/94] refactor(web-app): refactor plan component side bar
 handling undefined to common array

---
 core/web-app/src/app/app/planning/sidebar.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/core/web-app/src/app/app/planning/sidebar.tsx b/core/web-app/src/app/app/planning/sidebar.tsx
index 2502adc9..3a725d86 100644
--- a/core/web-app/src/app/app/planning/sidebar.tsx
+++ b/core/web-app/src/app/app/planning/sidebar.tsx
@@ -18,12 +18,10 @@ export default function PlanningSidebar() {
   const currentScalingPlanState = usePlanStore(
     (state) => state.currentScalingPlanState
   );
-  console.log({ currentScalingPlanState });
 
-  const [plans, setPlans] = useState([]);
+  const [plans, setPlans] = useState<ScalingPlanDefinitionEx[]>([]);
   const params = useParams();
   const selectedPlanId = params?.id;
-
   const pathname = usePathname();
 
   useEffect(() => {
@@ -34,14 +32,12 @@ export default function PlanningSidebar() {
     fetchPlans();
   }, [pathname]);
 
-  console.log(plans);
-
   return (
     <div className="flex h-full">
       <aside className="flex h-full w-72 flex-col border-r border-gray-200">
         <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-t border-gray-200 bg-gray-75 pl-8 pr-8">
           <span className="font-Pretendard whitespace-nowrap text-lg font-semibold text-gray-1000">
-            Plans {plans !== undefined ? `(${plans.length})` : undefined}
+            Plans ({plans.length})
           </span>
           <div className="flex items-center">
             <Link href="/app/planning/new">
@@ -52,7 +48,7 @@ export default function PlanningSidebar() {
           </div>
         </div>
         <div className="flex flex-col">
-          {plans?.map((plan: ScalingPlanDefinitionEx) => (
+          {plans.map((plan: ScalingPlanDefinitionEx) => (
             <Link
               href={`/app/planning/${plan.db_id}`}
               key={plan.db_id}

From fec17e8217b6dd9355337be892b9e9b31e8e08bb Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:53:33 +0900
Subject: [PATCH 92/94] refactor(web-app): refactor next config js for removing
 redirects

---
 core/web-app/next.config.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/core/web-app/next.config.js b/core/web-app/next.config.js
index 1be4718e..299f00db 100644
--- a/core/web-app/next.config.js
+++ b/core/web-app/next.config.js
@@ -6,15 +6,6 @@ const nextConfig = {
     appDir: true,
     esmExternals: 'loose',
   },
-  /* async redirects() {
-    return [
-      {
-        source: '/app/planning/:id',
-        destination: '/app/planning/:id/diagram',
-        permanent: true,
-      },
-    ];
-  }, */
   headers:
     process.env.NODE_ENV === 'development'
       ? () => [

From 6c150ebbed2e208ac3e9edc03b4d2d3fea2aa987 Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 02:59:32 +0900
Subject: [PATCH 93/94] refactor(web-app): refactor planning drawer with
 connection between html for  property and remove comments using submit
 property

---
 core/web-app/src/app/app/planning-drawer.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/core/web-app/src/app/app/planning-drawer.tsx b/core/web-app/src/app/app/planning-drawer.tsx
index 59812764..989bb3d5 100644
--- a/core/web-app/src/app/app/planning-drawer.tsx
+++ b/core/web-app/src/app/app/planning-drawer.tsx
@@ -13,7 +13,9 @@ export default function PlanningDetailDrawer({
 }: {
   planDefinition?: ScalingPlanDefinition;
 }) {
-  const { register, reset, setFocus, handleSubmit } = useForm();
+  const { register, reset, handleSubmit, formState } = useForm({
+    mode: 'onBlur',
+  });
 
   const router = useRouter();
 
@@ -26,21 +28,15 @@ export default function PlanningDetailDrawer({
     }
   };
 
-  //
-  // Events
-  //
-
   const onClickOverlay = () => {
     goBack(false);
   };
 
-  // Exit metrics drawer
   const onClickExit = async () => {
     goBack(false);
   };
 
   const onClickInitialize = async () => {
-    // Clear metadata
     reset();
   };
 
@@ -58,8 +54,6 @@ export default function PlanningDetailDrawer({
     }
   };
 
-  console.log(planDefinition);
-
   return (
     <div className="plan-drawer drawer drawer-end fixed bottom-0 right-0 top-16 z-50 w-full border-t border-gray-200">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
@@ -70,7 +64,7 @@ export default function PlanningDetailDrawer({
           onClick={onClickOverlay}
         />
         <div className="drawer-content flex h-full min-w-[25rem] flex-col overflow-y-auto border-l border-gray-200 bg-base-100 pb-20">
-          <form className="" onSubmit={handleSubmit(onSubmit)}>
+          <form onSubmit={handleSubmit(onSubmit)}>
             <div className="flex h-14 min-h-14 w-full min-w-full flex-row items-center justify-between border-b border-dashed border-gray-400 bg-gray-75">
               <span className="font-Pretendard truncate whitespace-nowrap px-4 text-lg font-semibold text-gray-1000">
                 Plan
@@ -86,6 +80,7 @@ export default function PlanningDetailDrawer({
                 <button
                   className="ml-1 mr-1 flex h-8 items-center justify-center rounded-md border border-blue-400 bg-blue-400 pl-5 pr-5 text-sm text-gray-50"
                   type="submit"
+                  disabled={formState.isSubmitting}
                 >
                   SAVE
                 </button>
@@ -100,12 +95,13 @@ export default function PlanningDetailDrawer({
             </div>
 
             <div className="form-control w-full px-4 py-2">
-              <label className="label px-0 py-2">
+              <label htmlFor="title" className="label px-0 py-2">
                 <span className="text-md label-text px-2">Plan Title</span>
                 {/* <span className="label-text-alt">label-text-alt</span> */}
               </label>
               <input
                 type="text"
+                id="title"
                 placeholder="Plan Title"
                 className="input-bordered input my-2 w-full px-4 text-sm focus:outline-none"
                 autoComplete="off"

From b668bee5f7a4f0b5c295fdd7c965d48dc513532f Mon Sep 17 00:00:00 2001
From: Bryan921105 <bryan@stclab.com>
Date: Mon, 20 Nov 2023 03:10:04 +0900
Subject: [PATCH 94/94] refactor(web-app): refactor drawers removing
 unnecessary statements and comments

---
 core/web-app/src/app/app/metric-drawer.tsx    | 19 +------------------
 core/web-app/src/app/app/planning-drawer.tsx  |  4 +---
 .../app/planning/[id]/plan-item-drawer.tsx    | 14 ++------------
 .../src/app/app/scaling-component-drawer.tsx  | 19 +------------------
 4 files changed, 5 insertions(+), 51 deletions(-)

diff --git a/core/web-app/src/app/app/metric-drawer.tsx b/core/web-app/src/app/app/metric-drawer.tsx
index 24f360ac..2e4cbc52 100644
--- a/core/web-app/src/app/app/metric-drawer.tsx
+++ b/core/web-app/src/app/app/metric-drawer.tsx
@@ -14,7 +14,6 @@ import {
 import MetricService from '@/services/metric';
 import { MetricDefinition } from '@/types/bindings/metric-definition';
 
-// Metric Types
 const metricKeyTypes = getMetricKeyTypes();
 const metricOptions = metricKeyTypes.map((metricKeyType) => (
   <option key={metricKeyType.metricName} value={metricKeyType.metricName}>
@@ -27,15 +26,7 @@ export default function MetricDetailDrawer({
 }: {
   metricDefinition?: MetricDefinition;
 }) {
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    getValues,
-    reset,
-    formState: { errors },
-  } = useForm();
+  const { register, handleSubmit, setValue, getValues, reset } = useForm();
   const router = useRouter();
   const dbId = metricDefinition?.db_id;
   const isNew = !dbId;
@@ -61,9 +52,6 @@ export default function MetricDetailDrawer({
     }
   };
 
-  //
-  // Events
-  //
   useEffect(() => {
     if (isNew) {
       return;
@@ -85,14 +73,12 @@ export default function MetricDetailDrawer({
     const metricType = e.target.value;
     setSelectedMetricType(metricType);
 
-    // Clear metadata
     const id = getValues('id');
     reset();
     setValue('id', id);
     setValue('metric_kind', metricType);
   };
 
-  // Exit metrics drawer
   const onClickExit = async () => {
     goBack(false);
   };
@@ -100,7 +86,6 @@ export default function MetricDetailDrawer({
   const onClickInitialize = async () => {
     setSelectedMetricType('Metric Kind');
 
-    // Clear metadata
     const id = getValues('id');
     reset();
     setValue('id', id);
@@ -141,8 +126,6 @@ export default function MetricDetailDrawer({
     }
   };
 
-  console.log(metadataFormControls);
-
   return (
     <div className="metric-drawer drawer drawer-end fixed bottom-0 right-0 top-16 z-50 w-full border-t border-gray-200">
       <input id="drawer" type="checkbox" className="drawer-toggle" checked />
diff --git a/core/web-app/src/app/app/planning-drawer.tsx b/core/web-app/src/app/app/planning-drawer.tsx
index 989bb3d5..cf83b6bb 100644
--- a/core/web-app/src/app/app/planning-drawer.tsx
+++ b/core/web-app/src/app/app/planning-drawer.tsx
@@ -13,9 +13,7 @@ export default function PlanningDetailDrawer({
 }: {
   planDefinition?: ScalingPlanDefinition;
 }) {
-  const { register, reset, handleSubmit, formState } = useForm({
-    mode: 'onBlur',
-  });
+  const { register, reset, handleSubmit, formState } = useForm();
 
   const router = useRouter();
 
diff --git a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
index bd151256..983aceb3 100644
--- a/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
+++ b/core/web-app/src/app/app/planning/[id]/plan-item-drawer.tsx
@@ -20,22 +20,19 @@ export default function PlanItemDrawer({
 }: {
   planItemDefinition?: PlanItemDefinition;
 }) {
-  // react-hook-form
   const { register, handleSubmit, control, reset, setValue } = useForm();
-  // For Scaling Component List
+
   const { fields, append, remove } = useFieldArray({
     control,
     name: 'scaling_components',
   });
-  //
+
   const topElement = useRef<HTMLDivElement>(null);
-  // Plan data management
   const { id: scalingPlanId } = useParams();
   const clearSelectedPlan = usePlanStore((state) => state.clearSelection);
   const updatePlanItem = usePlanStore((state) => state.updatePlanItem);
   const removePlanItem = usePlanStore((state) => state.removePlanItem);
 
-  // Initialize form data
   useEffect(() => {
     reset({
       scaling_components: [],
@@ -61,11 +58,6 @@ export default function PlanItemDrawer({
     }, 1);
   }, [planItemDefinition, topElement?.current]);
 
-  //
-  // Events
-  //
-
-  // Remove plan item
   const onClickRemove = async () => {
     if (!planItemDefinition) {
       return;
@@ -81,12 +73,10 @@ export default function PlanItemDrawer({
     clearSelectedPlan();
   };
 
-  // Exit plan editor
   const onClickExit = async () => {
     clearSelectedPlan();
   };
 
-  // Update plan item
   const onSubmit = async (data: any) => {
     const { id, description, priority, expression, scaling_components } = data;
     if (!planItemDefinition || !planItemDefinition.ui) {
diff --git a/core/web-app/src/app/app/scaling-component-drawer.tsx b/core/web-app/src/app/app/scaling-component-drawer.tsx
index b5bedf26..296ba169 100644
--- a/core/web-app/src/app/app/scaling-component-drawer.tsx
+++ b/core/web-app/src/app/app/scaling-component-drawer.tsx
@@ -14,7 +14,6 @@ import {
 import ScalingComponentService from '@/services/scaling-component';
 import { getMetadataFormControls } from './metadata-form-controls';
 
-// Scaling Component Types
 const componentKeyTypes = getScalingComponentKeyTypes();
 const componentOptions = componentKeyTypes.map((componentKeyType) => (
   <option
@@ -30,15 +29,7 @@ export default function ScalingComponentDetailDrawer({
 }: {
   componentDefinition?: ScalingComponentDefinition;
 }) {
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    getValues,
-    reset,
-    formState: { errors },
-  } = useForm();
+  const { register, handleSubmit, setValue, getValues, reset } = useForm();
   const router = useRouter();
   const dbId = componentDefinition?.db_id;
   const isNew = !dbId;
@@ -65,11 +56,6 @@ export default function ScalingComponentDetailDrawer({
     }
   };
 
-  //
-  // Events
-  //
-
-  // Set default values
   useEffect(() => {
     if (isNew) {
       return;
@@ -91,14 +77,12 @@ export default function ScalingComponentDetailDrawer({
     const componentKind = e.target.value;
     setSelectedComponentKind(componentKind);
 
-    // Clear metadata
     const id = getValues('id');
     reset();
     setValue('id', id);
     setValue('component_kind', componentKind);
   };
 
-  // Exit scaling-components drawer
   const onClickExit = async () => {
     goBack(false);
   };
@@ -106,7 +90,6 @@ export default function ScalingComponentDetailDrawer({
   const onClickInitialize = async () => {
     setSelectedComponentKind('Scaling Component Kind');
 
-    // Clear metadata
     const id = getValues('id');
     reset();
     setValue('id', id);