demo cleaning

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "15.3.4",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-places-autocomplete": "^7.3.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -19,10 +20,12 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/react-places-autocomplete": "^7.2.14",
         "classnames": "^2.5",
         "eslint": "^9",
         "eslint-config-next": "15.3.4",
         "react-icons": "^5.5",
+        "recharts": "3.1.0",
         "tailwind-rounded-out": "2.0.0",
         "tailwindcss": "^4",
         "typescript": "^5"
@@ -1158,6 +1161,33 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
+      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1172,6 +1202,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1503,6 +1547,78 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1510,6 +1626,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/google.maps": {
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1554,6 +1677,24 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-places-autocomplete": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react-places-autocomplete/-/react-places-autocomplete-7.2.14.tgz",
+      "integrity": "sha512-5ywNgYR/oDbEcZaSdmVRa+AZlOjBlc1YnWnvp1Ufr/ww00tOds4MT+9qTmelSbdN/5y3sybYIeKeRKMJaKVDqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/google.maps": "*",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.35.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.0.tgz",
@@ -2642,6 +2783,138 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2721,6 +2994,13 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3000,6 +3280,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.39.7",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.7.tgz",
+      "integrity": "sha512-ek/wWryKouBrZIjkwW2BFf91CWOIMvoy2AE5YYgUrfWsJQM2Su1LoLtrw8uusEpN9RfqLlV/0FVNjT0WMv8Bxw==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3439,6 +3730,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3865,6 +4163,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3907,6 +4216,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4361,7 +4680,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4726,6 +5044,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4737,7 +5061,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -4986,7 +5309,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5285,7 +5607,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -5359,9 +5680,90 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-places-autocomplete": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-7.3.0.tgz",
+      "integrity": "sha512-86wcHC69JATvWBnIS/yCsBHLtwzOGcnx3Ye94u74yTrz1jLRC/txkVDkf6rvC+Jq3zNe/tAg/W53x0EaH1ZPPw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.7"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz",
+      "integrity": "sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5406,6 +5808,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -6028,6 +6437,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -6304,6 +6720,29 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "dev": true,
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -9,23 +9,26 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.4"
+    "react-places-autocomplete": "^7.3.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@headlessui/react": "2.2.4",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
+    "@types/react-places-autocomplete": "^7.2.14",
-    "tailwindcss": "^4",
+    "classnames": "^2.5",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
-    "@eslint/eslintrc": "^3",
     "react-icons": "^5.5",
-    "classnames": "^2.5",
+    "recharts": "3.1.0",
     "tailwind-rounded-out": "2.0.0",
-    "@headlessui/react": "2.2.4"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

src/components/AccountDropdown.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+import { CgProfile } from "react-icons/cg";
+import classnames from 'classnames';
+
+interface DropdownProps {
+    userRole: "member" | "employer";
+}
+
+const AccountDropdown: React.FC<DropdownProps> = ({userRole}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div className="">
+      <Menu>
+        <MenuButton as="div" className={classnames(
+            "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm/6 font-semibold text-platinum focus:outline-hidden data-open:text-bronze data-hover:text-bronze", 
+                {
+                    'cursor-pointer': isHovered,
+                }
+            )}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+          <CgProfile size={32} />
+        </MenuButton>
+        <MenuItems anchor="bottom end" className={"py-1 bg-deepcove border-2 border-copper focus:outline-hidden text-platinum text-md text-right font-semibold rounded-lg z-2"}>
+            <MenuItem as="div" className={"px-3 py-1.5"}>
+                <a className="block data-focus:text-bluemana hover:text-bluemana" href="/">
+                    Change Password
+                </a>
+            </MenuItem>
+            <MenuItem as="div" className={"px-3 py-1.5"}>
+                <a className="block data-focus:text-bluemana hover:text-bluemana" href="/">
+                    Sign Out
+                </a>
+            </MenuItem>
+        </MenuItems>
+
+        {/* <MenuItems
+          transition
+          anchor="bottom end"
+          className="w-52 origin-top-right rounded-xl border border-white/5 bg-white/5 p-1 text-sm/6 text-white transition duration-100 ease-out [--anchor-gap:--spacing(1)] focus:outline-none data-closed:scale-95 data-closed:opacity-0"
+        >
+          <MenuItem>
+            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
+              Edit
+              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘E</kbd>
+            </button>
+          </MenuItem>
+          <MenuItem>
+            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
+              Duplicate
+              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘D</kbd>
+            </button>
+          </MenuItem>
+          <div className="my-1 h-px bg-white/5" />
+          <MenuItem>
+            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
+              Archive
+              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘A</kbd>
+            </button>
+          </MenuItem>
+          <MenuItem>
+            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
+              Delete
+              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘D</kbd>
+            </button>
+          </MenuItem>
+        </MenuItems> */}
+      </Menu>
+    </div>
+  );
+};
+
+export default AccountDropdown;

src/components/DashboardPieChart.tsx

@@ -0,0 +1,89 @@
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+
+type TooltipPayload = ReadonlyArray<any>;
+
+type Coordinate = {
+  x: number;
+  y: number;
+};
+
+type PieSectorData = {
+  percent?: number;
+  name?: string | number;
+  midAngle?: number;
+  middleRadius?: number;
+  tooltipPosition?: Coordinate;
+  value?: number;
+  paddingAngle?: number;
+  dataKey?: string;
+  payload?: any;
+  tooltipPayload?: ReadonlyArray<TooltipPayload>;
+};
+
+type GeometrySector = {
+  cx: number;
+  cy: number;
+  innerRadius: number;
+  outerRadius: number;
+  startAngle: number;
+  endAngle: number;
+};
+
+type PieLabelProps = PieSectorData &
+  GeometrySector & {
+    tooltipPayload?: any;
+  };
+
+
+const RADIAN = Math.PI / 180;
+const COLORS = ['#32CD32', '#E0E0E0'];
+
+const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, value }: PieLabelProps) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-(midAngle ?? 0) * RADIAN);
+  const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="#04153E" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`$${value}`}
+    </text>
+  );
+};
+
+interface DashboardPieChartProps {
+    paid: number;
+    remaining: number;
+}
+
+const DashboardPieChart: React.FC<DashboardPieChartProps> = ({paid, remaining}) => {
+  const data = [
+    { name: 'Deductable Paid', value: paid },
+    { name: 'Deductable Remaining', value: remaining },
+  ];
+  return (
+    <div className="w-full h-full">
+      <PieChart width={250} height={140} title="Deductable Progress">
+        <Pie
+          data={data}
+          startAngle={180}
+          endAngle={0}
+          cx="50%"
+          cy="100%"
+          labelLine={false}
+          label={renderCustomizedLabel}
+          outerRadius={120}
+          fill="#2A4B6F"
+          dataKey="value"
+          stroke="#04153E"
+          strokeWidth={2}
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+      </PieChart>
+    </div>
+  );
+};
+
+export default DashboardPieChart;

src/components/Dropdown.tsx

@@ -7,13 +7,13 @@ import { FaAngleDown } from "react-icons/fa";
 const userRoles: string[] = ["Member", "Employer"]
 
 interface DropdownProps {
-    page: "Member" | "Employer";
+    currentRole: "Member" | "Employer";
 }
 
-const Dropdown: React.FC<DropdownProps> = ({page}) => {
+const Dropdown: React.FC<DropdownProps> = ({currentRole}) => {
     const [isHovered, setIsHovered] = useState(false);
 
-    let otherRoles: string[] = userRoles.filter(role => role !== page);
+    let avaliableUserRoles: string[] = userRoles.filter(role => role !== currentRole);
 
     return (
         <div className="">
@@ -28,16 +28,21 @@ const Dropdown: React.FC<DropdownProps> = ({page}) => {
                     onMouseEnter={() => setIsHovered(true)}
                     onMouseLeave={() => setIsHovered(false)}
                 >
-                    {page}
+                    {currentRole}
                 </MenuButton>
-                <MenuItems anchor="bottom end" className={"py-2 bg-deepcove border border-copper focus:outline-hidden text-platinum text-md text-left font-semibold rounded-md divide-y divide-[#B8B8B8]"}>
+                <MenuItems anchor="bottom end" className={"py-2 bg-bluetang border border-copper focus:outline-hidden text-platinum text-md text-left font-semibold rounded-md divide-y divide-[#B8B8B8]"}>
-                    {otherRoles.map((role) => (
+                    {avaliableUserRoles.map((role) => (
                         <MenuItem as="div" className={"px-1"}>
                             <a className="block data-focus:text-atmosphere hover:text-atmosphere" href={`/dashboard/${role.toLowerCase()}`}>
                                 Switch To {role} Role
                             </a>
                         </MenuItem>
                     ))}
+                    {/* <MenuItem as="div" className={"px-1"}>
+                        <a className="block data-focus:text-atmosphere hover:text-atmosphere" href="/">
+                            Reset Password
+                        </a>
+                    </MenuItem> */}
                 </MenuItems>
             </Menu>
         </div>

src/components/LandingPage.tsx

@@ -9,35 +9,22 @@ const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
 interface LandingPageProps {
   children: React.ReactNode;
-  className?: string;
   imageUrl: string;
-  underlineColor: string;
-  stripeColor: string;
-  headerColor: string;
   headerText: string;
 }
 
 const LandingPage: React.FC<LandingPageProps> = ({ 
     children, 
-    className,
     imageUrl,
-    underlineColor,
-    stripeColor,
-    headerColor,
     headerText
 }) => {    
-
-    const stripeBorder: string = stripeColor.replace("bg-", "")
-    const underlineBorder: string = underlineColor.replace("bg-", "")
-    
   return (
     <div className="relative w-full">
         <div className="absolute bottom-0 left-0 flex items-end w-full h-full">
                 <div className="w-1/24 h-full flex justify-end">
                     <div className="w-[calc(50%+6px)] flex flex-col">
                         <div className={classnames(
-                            "relative h-full border-l-6 rounded-out-br-4xl",
+                            "relative h-full border-l-6 rounded-out-br-4xl bg-bluetang border-atmosphere"
-                            stripeColor, `border-${underlineBorder}`
                         )} />
                         {/* <div className={classnames(
                             "h-9 rounded-bl-4xl border-b-6 border-l-6",
@@ -56,25 +43,21 @@ const LandingPage: React.FC<LandingPageProps> = ({
             <div className="w-1/24 h-full flex justify-end">
                 <div className="w-[calc(50%+6px)] flex flex-col justify-end z-1 bg-deepcove">
                     <div className={classnames(
-                        "h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl", 
+                        "h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl bg-bluetang border-atmosphere"
-                        stripeColor, `border-${underlineBorder}`
                         )} />
                     <div className={classnames(
-                        "h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl",
+                        "h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl bg-bluetang border-atmosphere"
-                        stripeColor, `border-${underlineBorder}`
                         )} />
                 </div>
             </div>
             <div className={`w-11/12 flex flex-col justify-end mb-[14px]`}>
                 <div className={classnames(
-                    "mb-[7px] text-5xl text-left ml-10 z-1",
+                    "text-5xl text-left ml-10 z-1 text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove text-bronze"
-                    headerColor
                 )}>
                     {headerText}
                 </div>
                 <div className={classnames(
-                    "w-full h-[6px] rounded-r",
+                    "w-full h-[6px] rounded-r bg-atmosphere"
-                    underlineColor
                     )}>
                 </div>
             </div>
@@ -83,7 +66,7 @@ const LandingPage: React.FC<LandingPageProps> = ({
             <div className="w-11/12 z-1">
                     <div className="relative w-full flex justify-start pl-10 py-5">
                         <div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
-                            <div className="relative h-80 w-full bg-bluetang rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 border-copper" />
+                            <div className={classnames("relative h-80 w-full rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 bg-bluetang border-atmosphere")} />
                         </div>
                         <div className={classnames("w-3/5 flex flex-col justify-center z-2")}>
                             <div className={classnames("text-4xl pb-8")}>
@@ -96,7 +79,7 @@ const LandingPage: React.FC<LandingPageProps> = ({
                                 • <InlineLink>Link to another Thing</InlineLink><br />
                             </div>
                         </div>
-                        <div className="w-2/5 flex justify-center mr-10 bg-atmosphere rounded-2xl z-2">
+                        <div className={classnames("w-2/5 flex justify-center mr-10 rounded-2xl z-2 bg-atmosphere")}>
                             <div className={classnames(
                                 "relative w-9/10"
                             )}>

src/components/LocationSearchInput.tsx

@@ -0,0 +1,85 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import PlacesAutocomplete, {
+  geocodeByAddress,
+  getLatLng,
+} from 'react-places-autocomplete';
+
+interface LocationState {
+  address: string;
+  coordinates: {
+    lat: number | null;
+    lng: number | null;
+  };
+}
+
+interface LocationSearchInputProps {
+    className?: string;
+}
+
+const LocationSearchInput: React.FC<LocationSearchInputProps> = ({className}) => {
+  const [location, setLocation] = useState<LocationState>({
+    address: '',
+    coordinates: { lat: null, lng: null },
+  });
+
+  const handleChange = (address: string) => {
+    setLocation((prev) => ({ ...prev, address }));
+  };
+
+  const handleSelect = async (address: string) => {
+    try {
+      const results = await geocodeByAddress(address);
+      const latLng = await getLatLng(results[0]);
+      setLocation({ address, coordinates: latLng });
+    } catch (error) {
+      console.error('Error selecting place:', error);
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <PlacesAutocomplete
+        value={location.address}
+        onChange={handleChange}
+        onSelect={handleSelect}
+      >
+        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
+          <div className="">
+            <input
+              {...getInputProps({
+                placeholder: 'Search For Provider...',
+                className:  `location-search-input w-full px-2 focus:outline-hidden ${className}`,
+              })}
+            />
+            <div className="autocomplete-dropdown-container">
+              {loading && <div>Loading...</div>}
+              {suggestions.map((suggestion) => {
+                const className = suggestion.active
+                  ? 'suggestion-item--active bg-atmosphere cursor-pointer'
+                  : 'suggestion-item bg-deepcove cursor-pointer';
+                return (
+                  <div
+                    {...getSuggestionItemProps(suggestion, {
+                      className,
+                    })}
+                  >
+                    <span>{suggestion.description}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </PlacesAutocomplete>
+      {location.coordinates.lat && location.coordinates.lng && (
+        <p>
+          Selected Coordinates: Lat: {location.coordinates.lat}, Lng:{' '}
+          {location.coordinates.lng}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default LocationSearchInput;

src/components/Navbar.tsx

@@ -158,7 +158,7 @@ const Navbar = () => {
                     })}
                 </div> */}
                 <div className={classnames("flex space-x-2 font-semibold", {"pt-1" : isScrolled})}>
-                    <Link href="/dashboard/broker" passHref>
+                    <Link href="/dashboard/member" passHref>
                         <button className="bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
                             Sign In
                         </button>

src/pages/_app.tsx

@@ -15,6 +15,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <main className={classNames("bg-deepcove min-h-screen flex justify-center", font.className)}>
+      <script src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_PLACES_API_KEY}&libraries=places`} />
       <div className="w-full max-w-[1920px]">
         {!router.pathname.includes("/dashboard/") && <Navbar />}
         {/* <Navbar /> */}

src/pages/dashboard/member/index.tsx

@@ -1,11 +1,17 @@
 import Link from 'next/link';
-import Dropdown from '../../../components/Dropdown';
+import AccountDropdown from '../../../components/AccountDropdown';
 import InlineLink from "../../../components/InlineLink";
 import Image from 'next/image';
 import classnames from 'classnames';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
 
 import { Schibsted_Grotesk } from 'next/font/google'
+import DashboardPieChart from '@/components/DashboardPieChart';
+import { FaRegIdCard } from "react-icons/fa";
+import { GrMapLocation } from "react-icons/gr";
+import { FiDownload } from "react-icons/fi";
+import LocationSearchInput from '@/components/LocationSearchInput';
+import Button from '@/components/Button';
 
 const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
@@ -27,8 +33,8 @@ export default function Member() {
         </div>
         <div className="w-full h-full flex flex-col justify-start items-center">
             <div className="w-21/24">
-                <div className="w-full h-20 flex justify-between items-center">
+                <div className="h-20 flex justify-between items-center">
-                    <div className={classnames('w-72 -ml-[1px] z-1')}>
+                    <div className={classnames('-ml-[1px] z-1')}>
                         <Image
                             src="/images/bbstpa-forsite.png"
                             alt="Britton Logo"
@@ -36,22 +42,9 @@ export default function Member() {
                             height={60}
                         />
                     </div>
-                    <div className={classnames("w-1/3 flex justify-end items-center space-x-2 text-md font-semibold z-1", font.className)}>
+                    <div className="-mr-[1px] z-1">
-                        {/* <Button className="h-9 hover:bg-atmosphere bg-deepcove text-platinum py-1 px-4 rounded border-2 border-atmosphere">
+                        <AccountDropdown userRole="member" />
-                            Change User Type
+                    </div>
-                        </Button> */}
-                        <div className="flex space-x-1">
-                            <p>Current Role:</p>
-                            <Dropdown page="Member" />
-                        </div>
-                        <p>|</p>
-                        <Link href="/" className="underline hover:text-bronze hover:decoration-bronze">
-                            Sign Out
-                        </Link>
-                        {/* <Button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
-                            Sign Out
-                        </Button> */}
-                      </div>
                 </div>
             </div>
             <div className="w-full h-full flex justify-start">
@@ -78,17 +71,122 @@ export default function Member() {
                         Benefits Documents
                     </a>
                 </div>
-                <div className="flex w-21/24 justify-between ml-8 pt-4">
+                <div className="flex w-21/24 ml-8 pt-4">
                     <div className="w-full flex flex-col justify-start">
                         <div className={classnames(
                             "text-4xl text-left z-1 text-bluemana font-semibold"
                         )}>
-                            Tom McSwain
+                            Robert La'Blah
                         </div>
                         <div className={classnames(
                             "w-full h-[6px] rounded-s bg-atmosphere z-1"
                             )}>
                         </div>
+                        <div className={classnames("w-full flex justify-start pt-4 z-2 space-x-4")}>
+                            <div className="flex flex-col space-y-4">
+                                <div className="flex space-x-4">
+                                    <div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
+                                        <div className="flex justify-between items-end px-4">
+                                            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
+                                            <div className="flex flex-col items-center">
+                                                <DashboardPieChart paid={1207.23} remaining={292.77} />
+                                                <p className="text-2xl">Deductable Progress</p>
+                                            </div>
+                                            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
+                                        </div>
+                                    </div>
+                                    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl">
+                                        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
+                                        <FaRegIdCard size={150} className="text-bluemana" />
+                                        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
+                                            <Button className="hover:text-bronze">
+                                                View
+                                            </Button>
+                                            {/* <div className="hover:text-bronze">View</div> */}
+                                            <p>|</p>
+                                            <Button className="hover:text-bronze">
+                                                Download
+                                            </Button>
+                                            {/* <div className="hover:text-bronze">Download</div> */}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="flex">
+                                    <div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl space-y-2">
+                                        <div className="w-full flex justify-center text-2xl text-bronze z-3 font-semibold">
+                                            <p>Find A Provider</p>
+                                        </div>
+                                        <div className={classnames("w-full flex items-start px-2 text-xl", font.className)}>
+                                            <GrMapLocation size={50} className="pr-4 pb-5" />
+                                            <LocationSearchInput className="pl-3 rounded-l-xl border-y-2 border-l-2 border-platinum" />
+                                            <Button className="pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-r-xl border-y-2 border-r-2 border-platinum  hover:border-bluemana">
+                                                Search
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                                {/* <div className="flex space-x-4">
+                                    <div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
+                                        <div className="flex justify-between items-end px-4">
+                                            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
+                                            <div className="flex flex-col items-center">
+                                                <DashboardPieChart paid={758.72} remaining={741.28} />
+                                                <p className="text-2xl">Deductable Progress</p>
+                                            </div>
+                                            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
+                                        </div>
+                                    </div>
+                                    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-copper rounded-4xl">
+                                        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
+                                        <FaRegIdCard size={150} className="text-bronze" />
+                                        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
+                                            <div className="hover:text-bronze">View</div>
+                                            <p>|</p>
+                                            <div className="hover:text-bronze">Download</div>
+                                        </div>
+                                    </div>
+                                </div> */}
+                            </div>
+                            <div className="w-2/5 flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
+                                <p className="text-3xl underline py-2">Benefits At A Glance</p>
+                                <p className={classnames("text-2xl font-semibold py-2", font.className)}>CLASSIC 5K 100/5000</p>
+                                <div className={classnames("w-full flex justify-between", font.className)}>
+                                    <div className="flex flex-col">
+                                        <p>Physician Visit</p>
+                                        <p>Specialist Visit</p>
+                                        <p>Urgent Care</p>
+                                        <p>INN-Ind Ded</p>
+                                        <p>INN-Family Ded</p>
+                                        <p>OON-Ind Ded</p>
+                                        <p>OON-Family Ded</p>
+                                        <p>Co-Insurance</p>
+                                        <p>INN-Ind OOP</p>
+                                        <p>INN-Family OOP</p>
+                                        <p>OON-Ind OOP</p>
+                                        <p>OON-Family OOP</p>
+                                        <p>Emergency Room</p>
+                                        <p>Preventive Care</p>
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <p>$25.00</p>
+                                        <p>$50.00</p>
+                                        <p>$50.00</p>
+                                        <p>$5,000</p>
+                                        <p>$10,000</p>
+                                        <p>$10,000</p>
+                                        <p>$20,000</p>
+                                        <p>100%/0%</p>
+                                        <p>$5,000</p>
+                                        <p>$10,000</p>
+                                        <p>$10,000</p>
+                                        <p>$20,000</p>
+                                        <p>Ded & Coin</p> 
+                                        <p>100%</p>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

src/pages/employers/index.tsx

@@ -7,9 +7,6 @@ export default function Members() {
     <div className="w-full">
       <LandingPage
         headerText='Employers'
-        headerColor="text-bronze"
-        underlineColor="bg-bluemana"
-        stripeColor="bg-bluetang"
         imageUrl="/images/employers-stock.jpg"
       >
             At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make employee benefits more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.

src/pages/index.tsx

@@ -11,12 +11,14 @@ export default function Home() {
           textTop="Healthcare that's"
           textBottom="truly affordable"
         />
-        <InfoCard
+        <div className="pt-4">
-          title="Members"
+          <InfoCard
-          imageUrl="/images/members-stock.jpg"
+            title="Members"
-        >
+            imageUrl="/images/members-stock.jpg"
-          Aenean et nulla nec dolor finibus dictum. Vestibulum ultrices aliquam sapien. Cras at nunc tincidunt, tristique metus nec, auctor ipsum. Mauris maximus justo sit amet lorem semper, ac accumsan turpis tempor. Proin id maximus libero. Fusce ac elementum risus. Suspendisse tincidunt rutrum eros eu facilisis. Nulla efficitur ac tortor ut elementum. Etiam sed elementum urna, a rhoncus lacus. Pellentesque vitae eros diam. Suspendisse sem purus, dictum id fringilla vel, malesuada sed odio. Nunc ut odio id purus tempus placerat quis vel ex. Maecenas tincidunt ante metus, eu interdum felis vehicula eu. Nulla pellentesque mi id velit vulputate tristique. Donec consectetur tempus interdum. Sed tellus lectus, ornare at sem vitae, tempor lobortis eros. Nam at eleifend eros, quis porta dolor. Aliquam mollis sapien vitae ex eleifend commodo. Integer vel pellentesque eros. Morbi tincidunt ipsum id dolor consectetur mollis ut vitae leo. Proin iaculis vel.
+          >
-        </InfoCard>
+            Aenean et nulla nec dolor finibus dictum. Vestibulum ultrices aliquam sapien. Cras at nunc tincidunt, tristique metus nec, auctor ipsum. Mauris maximus justo sit amet lorem semper, ac accumsan turpis tempor. Proin id maximus libero. Fusce ac elementum risus. Suspendisse tincidunt rutrum eros eu facilisis. Nulla efficitur ac tortor ut elementum. Etiam sed elementum urna, a rhoncus lacus. Pellentesque vitae eros diam. Suspendisse sem purus, dictum id fringilla vel, malesuada sed odio. Nunc ut odio id purus tempus placerat quis vel ex. Maecenas tincidunt ante metus, eu interdum felis vehicula eu. Nulla pellentesque mi id velit vulputate tristique. Donec consectetur tempus interdum. Sed tellus lectus, ornare at sem vitae, tempor lobortis eros. Nam at eleifend eros, quis porta dolor. Aliquam mollis sapien vitae ex eleifend commodo. Integer vel pellentesque eros. Morbi tincidunt ipsum id dolor consectetur mollis ut vitae leo. Proin iaculis vel.
+          </InfoCard>
+        </div>
         <div className='bg-atmosphere rounded-3xl'>
           <InfoCard
             title="Employers"

src/pages/members/index.tsx

@@ -7,9 +7,6 @@ export default function Members() {
     <div className="w-full">
       <LandingPage
         headerText='Members'
-        headerColor="text-atmosphere"
-        underlineColor="bg-copper"
-        stripeColor="bg-bluetang"
         imageUrl="/images/members-stock.jpg"
       >
             At Britton Benefit Services, LLC we're making employee benefits more affordable. In addition to the cost savings you receive when your employer chooses Britton Benefit Services, LLC we also make sure the important information you need is at your fingertips.