chore: fix header and show a mockup dashboard page

package-lock.json

@@ -13,6 +13,7 @@
         "@fontsource/roboto": "^5.2.5",
         "@mui/icons-material": "^7.1.0",
         "@mui/material": "^7.1.0",
+        "@mui/x-charts": "^8.10.2",
         "@mui/x-data-grid": "^8.5.0",
         "@react-oauth/google": "^0.12.2",
         "jwt-decode": "^4.0.0",
@@ -266,9 +267,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.1",
+      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
-      "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -1388,12 +1389,12 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.4.2",
+      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
-      "integrity": "sha512-edRc5JcLPsrlNFYyTPxds+d5oUovuUxnnDtpJUbP6WMeV4+6eaX/mqai1ZIWT62lCOe0nlrON0s9HDiv5en5bA==",
+      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.1"
+        "@babel/runtime": "^7.28.2"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1405,17 +1406,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "7.1.0",
+      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.1.tgz",
-      "integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
+      "integrity": "sha512-/31y4wZqVWa0jzMnzo6JPjxwP6xXy4P3+iLbosFg/mJQowL1KIou0LC+lquWW60FKVbKz5ZUWBg2H3jausa0pw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.1",
+        "@babel/runtime": "^7.28.2",
-        "@mui/types": "^7.4.2",
+        "@mui/types": "^7.4.5",
-        "@types/prop-types": "^15.7.14",
+        "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.0"
+        "react-is": "^19.1.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -1434,6 +1435,90 @@
         }
       }
     },
+    "node_modules/@mui/x-charts": {
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-8.10.2.tgz",
+      "integrity": "sha512-F4SdpixbaAeNaZHylYLpaj/WD1jKn6gMD1Twbd+Y8FzZneE2mrtXwaQc6W2Hbri/VdJl2OV55nL5pFMpDSlwAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.3.1",
+        "@mui/x-charts-vendor": "8.6.0",
+        "@mui/x-internal-gestures": "0.2.4",
+        "@mui/x-internals": "8.10.2",
+        "bezier-easing": "^2.1.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-charts-vendor": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-8.6.0.tgz",
+      "integrity": "sha512-TTtfhxXuwtoZfyno7+4y3ZhZeFqavFJecWbteLEby0lFqALWB9GGJpkc1TIHWr3GkWE5UHEbdADZ0pfrPenezA==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@types/d3-color": "^3.1.3",
+        "@types/d3-delaunay": "^6.0.4",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-scale": "^4.0.9",
+        "@types/d3-shape": "^3.1.7",
+        "@types/d3-time": "^3.0.4",
+        "@types/d3-timer": "^3.0.2",
+        "d3-color": "^3.1.0",
+        "d3-delaunay": "^6.0.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.2.0",
+        "d3-time": "^3.1.0",
+        "d3-timer": "^3.0.1",
+        "delaunator": "^5.0.1",
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/@mui/x-charts/node_modules/@mui/x-internals": {
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.10.2.tgz",
+      "integrity": "sha512-dlC0BQRRBdiWtqn1yDppaHYRUjU3OuPWTxy0UtqxDaJjJf4pfR8ALr243nbxgJAFqvQyWPWyO4A6p9x9eJMJEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.3.1",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@mui/x-data-grid": {
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-8.5.0.tgz",
@@ -1472,6 +1557,15 @@
         }
       }
     },
+    "node_modules/@mui/x-internal-gestures": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@mui/x-internal-gestures/-/x-internal-gestures-0.2.4.tgz",
+      "integrity": "sha512-Hpc5+LQfT0TrI7O0ngBlZ1LD6Gp1h5DUNs4ABbrotY/2OsOfJOzltV/QtBjINTmiBzDPnrE8l8nEiG97qOWX3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2"
+      }
+    },
     "node_modules/@mui/x-internals": {
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.5.0.tgz",
@@ -1838,6 +1932,63 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "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==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -1859,9 +2010,9 @@
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.14",
+      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
@@ -2011,6 +2162,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT"
+    },
     "node_modules/body-parser": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
@@ -2310,6 +2467,130 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "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==",
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -2334,6 +2615,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -3152,6 +3442,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -3877,9 +4176,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.1.0",
+      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
+      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -3990,6 +4289,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.40.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@fontsource/roboto": "^5.2.5",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
+    "@mui/x-charts": "^8.10.2",
     "@mui/x-data-grid": "^8.5.0",
     "@react-oauth/google": "^0.12.2",
     "jwt-decode": "^4.0.0",

src/App.jsx

@@ -9,6 +9,7 @@ import Clients from './private/clients/Clients';
 import Providers from './private/providers/Providers';
 import Categories from './private/categories/Categories';
 import Admin from './private/mongo/Admin';
+import Dashboard from './private/dashboard/Dashboard';
 
 import LoginPage from './private/LoginPage';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
@@ -21,7 +22,7 @@ function PrivateRoute({ children }) {
 
 function App() {
   const [zone, setZone] = useState('public'); // public | restricted | private
-  const [currentView, setCurrentView] = useState('Products');
+  const [currentView, setCurrentView] = useState('Dashboard');
 
   return (
     <>
@@ -34,6 +35,7 @@ function App() {
       >
 
         <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
+        <Box sx={{ height: 64 }} />
 
         <Box component="main" sx={{ flex: 1, p: 2 }}>
           <Routes>
@@ -46,6 +48,7 @@ function App() {
                   {zone === 'private' && <Clients />}
                   {zone === 'restricted' && <Clients />}
 
+                  {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
                   {zone === 'public' && currentView === 'Products' && <Products />}
                   {zone === 'public' && currentView === 'Clients' && <Clients />}
                   {zone === 'public' && currentView === 'Providers' && <Providers />}
@@ -57,7 +60,7 @@ function App() {
           </Routes>
         </Box>
 
-
+        <Box sx={{ height: 64 }} />
         <Footer zone={zone} />
       </Box>
 

src/components/AppHeader.jsx

@@ -40,7 +40,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         left: 0,
         right: 0,
       }} >
-      <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+      <Toolbar disableGutters sx={{ justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'nowrap', pl: 0, pr: 0, minHeight: 64, width: '100%', '&.MuiToolbar-gutters': { pl: 0, pr: 0 }, position: 'relative', }}>
         <Box
           sx={{
             display: 'flex',
@@ -57,7 +57,18 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           </Typography>
         </Box>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px', ml: 'auto' }}>
+        <Box
+          sx={{
+            position: 'absolute',
+            right: 20,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+
+          }}
+        >
           <IconButton>
             <img src="/refresh.png" alt="Reload" width={24} height={24} />
           </IconButton>

src/private/dashboard/Dashboard.jsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Box, Grid, Paper, Typography, Divider } from '@mui/material';
+import { BarChart, LineChart, PieChart } from '@mui/x-charts';
+
+const paperSx = {
+  p: 2,
+  borderRadius: 2,
+  boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+  backgroundColor: '#fff',
+};
+
+export default function Dashboard() {
+  // ===== Mock data (Fendi-like categories) =====
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+  const revenue = [42, 55, 48, 61, 70, 78]; // $k
+  const orders = [180, 210, 195, 240, 260, 300];
+
+  const categories = [
+    { label: 'Furniture', value: 38 },
+    { label: 'Lighting', value: 18 },
+    { label: 'Textiles', value: 14 },
+    { label: 'Decorative', value: 12 },
+    { label: 'Kitchen & Dining', value: 10 },
+    { label: 'Outdoor', value: 8 },
+  ];
+
+  const topProducts = [
+    { label: 'Sofa Roma', value: 24 },
+    { label: 'Lamp Venezia', value: 18 },
+    { label: 'Rug Milano', value: 15 },
+    { label: 'Table Firenze', value: 12 },
+    { label: 'Chair Torino', value: 9 },
+  ];
+
+  return (
+    <Box sx={{ p: 3 }}>
+      {/* KPIs */}
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Revenue (Last 30d)</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 312k</Typography>
+            <Typography variant="caption" color="success.main">+8.4% vs prev.</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Orders</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>1,385</Typography>
+            <Typography variant="caption" color="success.main">+6.1% vs prev.</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Avg. Order Value</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 225</Typography>
+            <Typography variant="caption" color="text.secondary">stable</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Returning Customers</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>42%</Typography>
+            <Typography variant="caption" color="success.main">+2.0 pts</Typography>
+          </Paper>
+        </Grid>
+      </Grid>
+
+      {/* Charts */}
+      <Grid container spacing={2}>
+        {/* Revenue trend */}
+        <Grid item xs={12} md={8}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Revenue & Orders</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <LineChart
+              xAxis={[{ scaleType: 'point', data: months }]}
+              series={[
+                { data: revenue, label: 'Revenue ($k)', curve: 'catmullRom' },
+                { data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right' },
+              ]}
+              yAxis={[{}, { id: 'right', position: 'right' }]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+
+        {/* Category share */}
+        <Grid item xs={12} md={4}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Sales by Category</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <PieChart
+              series={[
+                {
+                  data: categories.map((c, i) => ({ id: i, value: c.value, label: c.label })),
+                  innerRadius: 30,
+                  paddingAngle: 2,
+                },
+              ]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+
+        {/* Top products */}
+        <Grid item xs={12}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Top Products</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <BarChart
+              xAxis={[{ scaleType: 'band', data: topProducts.map(p => p.label) }]}
+              series={[{ data: topProducts.map(p => p.value), label: 'Units' }]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}