DashBoard and Quize Cereated

Frontend/package-lock.json

@@ -12,11 +12,13 @@
         "@splinetool/runtime": "^1.11.2",
         "@tailwindcss/vite": "^4.1.17",
         "clsx": "^2.1.1",
+        "dayjs": "^1.11.19",
         "framer-motion": "^12.23.24",
         "lucide-react": "^0.553.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.9.5",
+        "recharts": "^3.4.1",
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.17"
       },
@@ -1025,6 +1027,32 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.10.1.tgz",
+      "integrity": "sha512-/U17EXQ9Do9Yx4DlNGU6eVNfZvFJfYpUtRRdLf19PbPjdWBxNlxGZXywQZ1p1Nz8nMkWplTI7iD/23m07nolDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.2.0",
+        "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/@rolldown/pluginutils": {
       "version": "1.0.0-beta.43",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.43.tgz",
@@ -1349,6 +1377,18 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "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==",
+      "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==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
@@ -1651,6 +1691,69 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "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==",
+      "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==",
+      "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.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1678,7 +1781,7 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -1694,6 +1797,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.3.tgz",
@@ -2249,7 +2358,134 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": 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==",
+      "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-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-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/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2270,6 +2506,12 @@
         }
       }
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2306,6 +2548,16 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.41.0.tgz",
+      "integrity": "sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -2547,6 +2799,12 @@
         "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==",
+      "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",
@@ -2782,6 +3040,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "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",
@@ -2809,6 +3077,15 @@
         "node": ">=0.8.19"
       }
     },
+    "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/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3550,6 +3827,13 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
+      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/react-merge-refs": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
@@ -3560,6 +3844,29 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "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==",
+      "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/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -3608,6 +3915,57 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.4.1.tgz",
+      "integrity": "sha512-35kYg6JoOgwq8sE4rhYkVWwa6aAIgOtT+Ob0gitnShjwUwZmhrmy7Jco/5kJNF4PnLXgt9Hwq+geEMS+WrjU1g==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "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==",
+      "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==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3815,6 +4173,12 @@
       "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==",
       "license": "MIT"
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3991,6 +4355,37 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "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==",
+      "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/vite": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",

Frontend/package.json

@@ -14,11 +14,13 @@
     "@splinetool/runtime": "^1.11.2",
     "@tailwindcss/vite": "^4.1.17",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
     "framer-motion": "^12.23.24",
     "lucide-react": "^0.553.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.5",
+    "recharts": "^3.4.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17"
   },

Frontend/src/components/dashboard/FeedBackScore.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+interface Props {
+  confidence: number;
+  clarity: number;
+  accuracy: number;
+  speed: number;
+  improvements: string[];
+}
+
+const ScoreCard = ({ label, value }: any) => (
+  <div className="p-4 text-center bg-gray-100 rounded-xl">
+    <p className="text-3xl font-bold text-black">{value}%</p>
+    <p className="text-gray-600">{label}</p>
+  </div>
+);
+
+const FeedbackScore: React.FC<Props> = ({
+  confidence,
+  clarity,
+  accuracy,
+  speed,
+  improvements,
+}) => {
+  return (
+    <div className="bg-white p-5 shadow rounded-xl">
+      <h3 className="text-xl font-bold mb-3 text-black">AI Feedback Summary</h3>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <ScoreCard label="Confidence" value={confidence} />
+        <ScoreCard label="Clarity" value={clarity} />
+        <ScoreCard label="Technical Accuracy" value={accuracy} />
+        <ScoreCard label="Speed" value={speed} />
+      </div>
+
+      <h4 className="text-lg font-semibold mt-5 text-black">Suggested Improvements</h4>
+      <ul className="list-disc pl-5 text-blue-600">
+        {improvements.map((item, i) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default FeedbackScore;

Frontend/src/components/dashboard/InterviewPlayback.tsx

@@ -0,0 +1,27 @@
+const InterviewPlayback = ({
+  audioUrl,
+  transcript,
+  highlights,
+}: any) => (
+  <div className="bg-white p-5 shadow rounded-xl">
+    <h3 className="text-xl font-bold mb-4 text-black"> Interview Playback</h3>
+
+    {audioUrl && (
+      <audio controls className="w-full mb-4">
+        <source src={audioUrl} type="audio/mp3" />
+      </audio>
+    )}
+
+    <h4 className="font-semibold mb-2 text-black"> Transcript</h4>
+    <p className="text-gray-700 whitespace-pre-wrap">{transcript}</p>
+
+    <h4 className="font-semibold mt-4 text-black"> AI Highlights</h4>
+    <ul className="list-disc pl-5 text-blue-600">
+      {highlights.map((h: string, i: number) => (
+        <li key={i}>{h}</li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default InterviewPlayback;

Frontend/src/components/dashboard/SkillRadarChart.tsx

@@ -0,0 +1,28 @@
+import {
+  Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer
+} from "recharts";
+
+const SkillRadarChart = ({ data }: { data: any[] }) => (
+  <div className="bg-white p-5 shadow rounded-xl">
+    <h3 className="text-xl font-bold mb-3 text-black">Skill Strength Chart</h3>
+
+    <div className="w-full h-80">
+      <ResponsiveContainer>
+        <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
+          <PolarGrid />
+          <PolarAngleAxis dataKey="skill" />
+          <PolarRadiusAxis angle={30} domain={[0, 100]} />
+          <Radar
+            name="Skill Level"
+            dataKey="value"
+            stroke="#1170d6"
+            fill="#1170d6"
+            fillOpacity={0.4}
+          />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  </div>
+);
+
+export default SkillRadarChart;

Frontend/src/components/dashboard/WeakAreaBanner.tsx

@@ -0,0 +1,14 @@
+const WeakAreaBanner = ({ topic }: { topic: string | null }) => {
+  if (!topic) return null;
+
+  return (
+    <div className="bg-red-100 p-4 rounded-xl border border-red-300 mt-4">
+      <p className="text-red-700 font-semibold">
+        ⚠️ You are weak in <strong>{topic}</strong>.
+      </p>
+      <p className="text-red-600">Start targeted practice today.</p>
+    </div>
+  );
+};
+
+export default WeakAreaBanner;

Frontend/src/components/dashboard/YearlyStreak.tsx

@@ -0,0 +1,80 @@
+interface StreakData {
+  date: string;
+  count: number;
+  weekday: number;
+  week: number;
+  month: string;
+}
+
+const getColor = (count: number) => {
+  if (count === 0) return "#2e2e2e"; 
+  if (count === 1) return "#9be9f8"; 
+  if (count === 2) return "#40c4f3"; 
+  if (count === 3) return "#30a1c4"; 
+  return "#216e9c"; 
+};
+const YearlyStreak = ({ data }: { data: StreakData[] }) => {
+  const totalSubmissions = data.reduce((a, b) => a + b.count, 0);
+  const activeDays = data.filter((d) => d.count > 0).length;
+
+  let streak = 0;
+  let maxStreak = 0;
+  data.forEach((d) => {
+    if (d.count > 0) {
+      streak++;
+      maxStreak = Math.max(maxStreak, streak);
+    } else {
+      streak = 0;
+    }
+  });
+
+  const weeks = data.reduce((acc: any, day) => {
+    acc[day.week] = acc[day.week] || [];
+    acc[day.week].push(day);
+    return acc;
+  }, {});
+
+  return (
+    <div className="bg-gray-900 p-6 rounded-xl text-white shadow-xl">
+      <div className="flex justify-between mb-4">
+        <h3 className="text-xl font-semibold">
+          {totalSubmissions} Hour Platform Activities This Year
+        </h3>
+
+        <div className="flex gap-6 text-gray-300">
+          <p>Total active days: <span className="text-white">{activeDays}</span></p>
+          <p>Max streak: <span className="text-white">{maxStreak}</span></p>
+        </div>
+      </div>
+
+      <div className="flex">
+        {Object.keys(weeks).map((weekIndex) => (
+          <div key={weekIndex} className="flex flex-col mr-1">
+            {weeks[weekIndex].map((day: StreakData) => (
+              <div
+                key={day.date}
+                title={`${day.date} — ${day.count} tasks`}
+                className="w-4 h-4 rounded-sm mb-1"
+                style={{ backgroundColor: getColor(day.count) }}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div className="flex mt-3 text-gray-400 text-xs">
+        {Object.keys(weeks).map((weekIndex) => {
+          const firstDay = weeks[weekIndex][0];
+          const showLabel = firstDay.date.endsWith("01");
+          return (
+            <div key={weekIndex} className="w-4 mx-[2px]">
+              {showLabel && <span>{firstDay.month}</span>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default YearlyStreak;

Frontend/src/components/ui/card.tsx

@@ -1,81 +0,0 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
-
-// 1. Corrected forwardRef syntax: <RefType, PropsType>(...)
-// 2. Used modern typing: React.ElementRef<"tag"> and React.ComponentPropsWithoutRef<"tag">
-
-const Card = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  React.ElementRef<"h3">, // Corrected to h3 to match the element type
-  React.ComponentPropsWithoutRef<"h3">
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  React.ElementRef<"p">,
-  React.ComponentPropsWithoutRef<"p">
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

Frontend/src/pages/dashboard.tsx

@@ -1,14 +1,112 @@
-import React from "react";
+import YearlyStreak from "../components/dashboard/YearlyStreak";
+import FeedbackScore from "../components/dashboard/FeedBackScore";
+import SkillRadarChart from "../components/dashboard/SkillRadarChart";
+import WeakAreaBanner from "../components/dashboard/WeakAreaBanner";
+import InterviewPlayback from "../components/dashboard/InterviewPlayback";
+import { generateYearlyStreakData } from "../utils/generateYearlyStreakData";
+
+const Dashboard = () => {
+  const streakData = generateYearlyStreakData();
+
+  const radarData = [
+    { skill: "DSA", value: 70 },
+    { skill: "System Design", value: 60 },
+    { skill: "Communication", value: 85 },
+    { skill: "Problem Solving", value: 75 },
+    { skill: "Accuracy", value: 68 },
+    { skill: "Time Mgmt", value: 80 },
+  ];
+
+  const weakTopic = "Dynamic Programming";
 
-const Dashboard: React.FC = () => {
   return (
-    <div className="text-gray-800">
-      <h2 className="text-3xl font-bold mb-4">Welcome to InterviewAI Dashboard</h2>
-      <p className="text-gray-600">
-        Manage your AI interview sessions, quizzes, and notes all in one place.
-      </p>
+    // PRIMARY CHANGE: Background Gradient inspired by landing page
+    // Using a custom CSS class for a more complex gradient if needed, or approximating with Tailwind.
+    // For now, let's use a subtle linear gradient that implies the dark blue-black.
+    <div className="px-6 py-8 space-y-10 min-h-screen text-gray-100 bg-linear-to-br from-[#0a0e1b] via-[#100d27] to-[#0a0e1b] font-sans">
+      {/* Font sans is a good default for modern look */}
+
+      {/* ----------- HEADER SECTION (Updated for new theme) ----------- */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
+        <h1 className="text-3xl lg:text-4xl font-extrabold text-gray-50 tracking-tight">
+          👋 Welcome back, <span className="text-blue-400">Prakhar</span>
+        </h1>
+
+        <div className="flex items-center space-x-3 mt-4 md:mt-0">
+          {/* PRIMARY BUTTON: Vibrant Purple Theme Color, matching "Start Free Trial" */}
+          <button className="px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-lg shadow-lg shadow-purple-500/30 hover:from-blue-500 hover:to-blue-700 transition-all duration-300 ease-in-out font-semibold">
+            Start Interview
+          </button>
+        </div>
+      </div>
+
+      {/* ----------- GRID MAIN LAYOUT (2 COLUMNS for top content) ----------- */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        {/* LEFT PANEL (Feedback Score) */}
+        <div className="space-y-6 col-span-1">
+          {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+          <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50 h-full">
+            <h2 className="text-xl font-bold mb-4 text-gray-50">AI Feedback Score</h2>
+            <FeedbackScore
+              confidence={78}
+              clarity={82}
+              accuracy={70}
+              speed={65}
+              improvements={[
+                "Improve explanation clarity",
+                "Practice more DP problems",
+                "Reduce filler words in answers",
+              ]}
+            />
+          </div>
+        </div>
+
+        {/* RIGHT PANEL (Skill Chart) */}
+        <div className="space-y-6 col-span-1">
+          {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+          <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50 h-full">
+            <h2 className="text-xl font-bold mb-4 text-gray-50">Skill Strength Chart</h2>
+            <SkillRadarChart data={radarData} />
+          </div>
+        </div>
+      </div>
+      
+      {/* ----------- MIDDLE ROW: INTERVIEW PLAYBACK (LEFT) AND WEAK AREA (RIGHT) ----------- */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+        {/* INTERVIEW PLAYBACK (2/3 width on large screens, LEFT) */}
+        {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+        <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50 lg:col-span-2">
+          <h2 className="text-xl font-bold mb-4 text-gray-50">Interview Playback AI Feedback</h2>
+          <InterviewPlayback
+            audioUrl="https://example.com/audio.mp3"
+            transcript={`Interviewer: Explain polymorphism.\nYou: Polymorphism means...`}
+            highlights={[
+              "Answer lacked real-world example",
+              "Need more clarity in describing LLD concepts",
+              "Example Interview Playback",
+            ]}
+          />
+        </div>
+
+        {/* WEAK AREA (1/3 width on large screens, RIGHT) */}
+        {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+        <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-5 border border-gray-700/50 col-span-1 flex-col items-center justify-center">
+           {/* WeakAreaBanner will need internal styling adjustments for its alert nature */}
+          <h2 className="text-xl font-bold mb-4 text-gray-50">WeakAreaBanner</h2>
+          <WeakAreaBanner topic={weakTopic} />
+        </div>
+      </div>
+
+      {/* ----------- BOTTOM ROW: YEARLY STREAK (FULL WIDTH) ----------- */}
+      {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+      <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50">
+        <h2 className="text-xl font-bold mb-3 text-gray-50">Yearly Streak</h2>
+        <YearlyStreak data={streakData} />
+      </div>
     </div>
   );
 };
 
-export default Dashboard;
+export default Dashboard;

Frontend/src/pages/home.tsx

@@ -200,7 +200,7 @@ const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({ onLogin }) =>
             </AuthModal>
 
             {/* Hero Section */}
-            <section ref={heroRef} id="home" className="min-h-[calc(100vh-68px)] flex items-center pt- pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black">
+            <section ref={heroRef} id="home" className="min-h-[calc(100vh-68px)] flex items-center pt-20 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black">
                 {/* Spotlight applied directly to the container as per the demo structure */}
                 <Spotlight parentRef={heroRef} color="#4b9fff" className="mix-blend-screen" />
                 <div className="max-w-7xl mx-auto w-full relative z-10">

Frontend/src/pages/quize.tsx

@@ -1,121 +1,125 @@
 import React from "react";
-import { FileText, BrainCircuit, FileSpreadsheet, Mic, Code2, Edit3, ListChecks } from "lucide-react";
+import { FileText, FileSpreadsheet, Code2, ListChecks, UploadCloud, Type } from "lucide-react";
 
+// The structure of this component is heavily modified to meet the new layout requirements.
 const ResumeGeneratedQuize: React.FC = () => {
+
+    // Consistent purple button style
+    const buttonClass = "w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-400 hover:to-purple-600 font-medium transition shadow-lg shadow-purple-500/30 text-white mt-4";
+
+    const OutputTypeOption = ({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) => (
+        // These cards inherently take full width of their parent container (which is now the right column)
+        <div className="p-4 bg-slate-900/50 rounded-xl border border-slate-700 hover:bg-slate-800/60 transition cursor-pointer">
+            <div className="flex items-center gap-3 mb-2">
+                {icon}
+                <h4 className="text-xl font-semibold text-gray-50">{title}</h4>
+            </div>
+            <p className="text-gray-400 text-sm">{desc}</p>
+        </div>
+    );
+
+    const SourceCard = ({ icon, title, desc, actionText }: { icon: React.ReactNode; title: string; desc: string; actionText: string }) => (
+        <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-700 hover:bg-slate-800/70 transition flex flex-col h-full">
+            <div className="flex items-start gap-4 mb-4">
+                {icon}
+                <div>
+                    <h2 className="text-2xl font-bold">{title}</h2>
+                    <p className="text-gray-400 mt-1 text-sm">{desc}</p>
+                </div>
+            </div>
+            {/* The SourceCard button width is intentionally set to w-fit px-6 to be narrower */}
+            <button className={buttonClass.replace('w-full', 'w-fit px-6')} >
+                {actionText}
+            </button>
+        </div>
+    );
+
     return (
         <div className="min-h-screen bg-black text-white py-20 px-6 lg:px-12">
 
             {/* Page Title */}
-            <h1 className="text-4xl font-bold mb-10 text-center">
+            <h1 className="text-4xl font-bold mb-16 text-center">
                 Smart AI-Powered Quiz Generator
             </h1>
 
-            {/* ===== QUIZ SOURCES ===== */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-
-                {/* AI Generated Quiz */}
-                <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-800 hover:bg-slate-800/70 transition">
-                    <div className="flex items-center gap-3 mb-4">
-                        <BrainCircuit className="w-8 h-8 text-blue-400" />
-                        <h2 className="text-2xl font-bold">AI Generated Quiz</h2>
+            {/* ===== MAIN TWO-COLUMN LAYOUT (Source Selection vs. Configuration) ===== */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+
+                {/* --- LEFT SIDE: INPUT SOURCE SELECTION --- */}
+                <div>
+                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-purple-700 pb-2">
+                        1. Select Quiz Source
+                    </h3>
+                    <div className="space-y-8">
+                        {/* Consolidated Resume/Note PDF Upload Card */}
+                        <SourceCard
+                            icon={<FileSpreadsheet className="w-8 h-8 text-cyan-400" />}
+                            title="Resume/Note PDF Upload"
+                            desc="Generate quizzes based on skills and experience listed in your resume file."
+                            actionText="Upload"
+                        />
                     </div>
-                    <p className="text-gray-300">
-                        Create intelligent quizzes using AI-generated questions tailored to your learning needs.
-                    </p>
                 </div>
 
-                {/* Resume Based Quiz */}
-                <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-800 hover:bg-slate-800/70 transition">
-                    <div className="flex items-center gap-3 mb-4">
-                        <FileSpreadsheet className="w-8 h-8 text-blue-400" />
-                        <h2 className="text-2xl font-bold">Resume-Based Quiz</h2>
-                    </div>
-                    <p className="text-gray-300">
-                        Upload your resume and get customized quizzes based on your skills & experiences.
-                    </p>
-                </div>
 
-                {/* PDF Based Quiz */}
-                <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-800 hover:bg-slate-800/70 transition">
-                    <div className="flex items-center gap-3 mb-4">
-                        <FileText className="w-8 h-8 text-blue-400" />
-                        <h2 className="text-2xl font-bold">PDF-Based Quiz</h2>
+                {/* --- RIGHT SIDE: PROMPT & OUTPUT CONFIGURATION (The full width section) --- */}
+                <div className="lg:sticky lg:top-8 self-start">
+                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-purple-700 pb-2">
+                        2. Configure & Generate
+                    </h3>
+
+                    {/* Prompt/Text Area Section */}
+                    <div className="bg-slate-900/60 rounded-2xl shadow-2xl p-6 border border-slate-800 mb-8">
+                        <label htmlFor="prompt-area" className="text-lg font-semibold block mb-3 text-gray-200">
+                            Custom Prompt/Instructions (Optional)
+                        </label>
+                        <textarea
+                            id="prompt-area"
+                            rows={4}
+                            placeholder="e.g., 'Focus only on Python and OOP concepts' or 'Generate a quiz on the content uploaded in step 1'"
+                            className="w-full p-3 rounded-lg bg-black/40 border border-slate-700 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600 transition"
+                        ></textarea>
+                        <p className="text-gray-500 text-sm mt-2">
+                            This prompt refines the quiz generation based on the selected source.
+                        </p>
                     </div>
-                    <p className="text-gray-300">
-                        Generate quizzes instantly from uploaded PDF documents. Perfect for study notes.
-                    </p>
+
+                    {/* Output Type Section - NOW CORRECTLY PLACED INSIDE THE RIGHT COLUMN */}
                 </div>
 
             </div>
 
-            {/* ===== QUIZ TYPES ===== */}
-            <h2 className="text-3xl font-bold mb-8 text-center">Quiz Types</h2>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-
-                {/* MCQ Quiz */}
-                <QuizTypeCard
-                    icon={<ListChecks className="w-10 h-10 text-purple-400" />}
-                    title="MCQ Quiz"
-                    desc="Multiple choice questions auto-generated by AI."
-                />
-
-                {/* Coding Quiz */}
-                <QuizTypeCard
-                    icon={<Code2 className="w-10 h-10 text-green-400" />}
-                    title="Coding Quiz"
-                    desc="AI generates code problems based on your skills."
-                />
-
-                {/* Voice Based Quiz */}
-                <QuizTypeCard
-                    icon={<Mic className="w-10 h-10 text-red-400" />}
-                    title="Voice-Based Quiz"
-                    desc="Answer questions via voice — great for interviews."
-                />
-
-                {/* Writing Based Quiz */}
-                <QuizTypeCard
-                    icon={<Edit3 className="w-10 h-10 text-blue-300" />}
-                    title="Writing Quiz"
-                    desc="Subjective, long-form answers graded by AI."
-                />
+            <div className="lg:sticky lg:top-8 self-start">
+                <h4 className="text-2xl font-semibold mb-4 text-gray-200">
+                    Choose Output Type:
+                </h4>
+
+                {/* NEW: Use grid-cols-2 and gap-4 to place the options side-by-side */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+
+                    {/* MCQ Quiz Option - takes full width of its column */}
+                    <OutputTypeOption
+                        icon={<ListChecks className="w-6 h-6 text-purple-400" />}
+                        title="Multiple Choice Quiz (MCQ)"
+                        desc="Ideal for quick assessment of knowledge and comprehension."
+                    />
+
+                    {/* Coding Quiz Option - takes full width of its column */}
+                    <OutputTypeOption
+                        icon={<Code2 className="w-6 h-6 text-green-400" />}
+                        title="Coding Challenge Quiz"
+                        desc="Generates problems requiring code snippets or full functions for evaluation."
+                    />
+                </div>
+
+                {/* Main Generation Button - Full width (w-full is in buttonClass) */}
+                <button className={buttonClass + ' text-xl mt-8'}>
+                    Generate Quiz Now
+                </button>
 
             </div>
         </div>
     );
 };
 
-export default ResumeGeneratedQuize;
-
-
-/* ===== Reusable Quiz Card Component ===== */
-
-const QuizTypeCard = ({
-    icon,
-    title,
-    desc,
-}: {
-    icon: React.ReactNode;
-    title: string;
-    desc: string;
-}) => {
-    return (
-        <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-800 hover:bg-slate-800/70 transition flex flex-col items-start gap-3">
-            {icon}
-            <h3 className="text-xl font-semibold">{title}</h3>
-            <p className="text-gray-400">{desc}</p>
-
-            <button
-                className="
-                    mt-4 px-4 py-2 rounded-lg 
-                    bg-gradient-to-r from-blue-600 to-purple-600 
-                    hover:from-blue-700 hover:to-purple-700 
-                    font-medium transition shadow-lg
-                "
-            >
-                Start Quiz
-            </button>
-        </div>
-    );
-};
+export default ResumeGeneratedQuize;

Frontend/src/utils/generateYearlyStreakData.ts

@@ -0,0 +1,20 @@
+import dayjs from "dayjs";
+
+export const generateYearlyStreakData = () => {
+  const today = dayjs();
+  const days = [];
+
+  for (let i = 0; i < 365; i++) {
+    const date = today.subtract(i, "day");
+
+    days.push({
+      date: date.format("YYYY-MM-DD"),
+      count: Math.floor(Math.random() * 4), // 0–3 activity
+      weekday: date.day(),
+      week: Math.floor(i / 7),
+      month: date.format("MMM"),
+    });
+  }
+
+  return days.reverse();
+};