Add authentication and tracking features with API integration
- Implemented user authentication with signup and signin functionality. - Created a context for managing authentication state. - Added protected routes for accessing the dashboard and tracker pages. - Developed a tracker page for logging cigarette usage with optional notes and timestamps. - Introduced a statistics page to visualize daily smoking habits using charts. - Integrated Axios for API requests and error handling. - Updated package dependencies including React Hook Form and Zod for form validation. - Enhanced UI components for better user experience with Chakra UI. - Added routing for authentication and tracking pages.
This commit is contained in:
parent
c3eab8bcac
commit
debd28905a
454
package-lock.json
generated
454
package-lock.json
generated
@ -13,18 +13,24 @@
|
||||
"@chakra-ui/react": "^3.2.0",
|
||||
"@emotion/react": "^11.13.5",
|
||||
"@eslint/js": "^9.11.0",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@stylistic/eslint-plugin": "^2.8.0",
|
||||
"@types/node": "^22.19.1",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"axios": "^1.13.2",
|
||||
"date-fns": "^4.1.0",
|
||||
"eslint": "^9.11.0",
|
||||
"eslint-plugin-react": "^7.36.1",
|
||||
"express": "^4.19.2",
|
||||
"globals": "^15.9.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.66.0",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"typescript-eslint": "^8.6.0"
|
||||
"recharts": "^3.4.1",
|
||||
"typescript-eslint": "^8.6.0",
|
||||
"zod": "^4.1.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@ark-ui/react": {
|
||||
@ -2221,6 +2227,18 @@
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@hookform/resolvers": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
|
||||
"integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/utils": "^0.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-hook-form": "^7.55.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/module-importer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
|
||||
@ -2501,6 +2519,42 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"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/@reduxjs/toolkit/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/@remix-run/router": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
|
||||
@ -2510,6 +2564,18 @@
|
||||
"node": ">=14.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/@stylistic/eslint-plugin": {
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.8.0.tgz",
|
||||
@ -2538,6 +2604,69 @@
|
||||
"tslib": "^2.8.0"
|
||||
}
|
||||
},
|
||||
"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/eslint": {
|
||||
"version": "9.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
|
||||
@ -2626,6 +2755,12 @@
|
||||
"@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==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/webpack-env": {
|
||||
"version": "1.18.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.8.tgz",
|
||||
@ -4992,6 +5127,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@ -5282,6 +5426,127 @@
|
||||
"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-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/data-view-buffer": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
|
||||
@ -5333,6 +5598,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
@ -5350,6 +5625,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",
|
||||
@ -5841,6 +6122,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.42.0",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.42.0.tgz",
|
||||
"integrity": "sha512-SLHIyY7VfDJBM8clz4+T2oquwTQxEzu263AyhVK4jREOAwJ+8eebaa4wM3nlvnAqhDrMm2EsA6hWHaQsMPQ1nA==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"benchmarks"
|
||||
]
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
@ -6180,6 +6471,12 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"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/events": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
|
||||
@ -7482,6 +7779,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/ipaddr.js": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
|
||||
@ -9449,6 +9755,22 @@
|
||||
"integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-hook-form": {
|
||||
"version": "7.66.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
|
||||
"integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/react-hook-form"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "15.7.4",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.4.tgz",
|
||||
@ -9481,6 +9803,29 @@
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"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-router": {
|
||||
"version": "6.23.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
|
||||
@ -9537,6 +9882,46 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"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/recharts/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/recursive-readdir": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
|
||||
@ -9583,6 +9968,21 @@
|
||||
"recursive-watch": "bin.js"
|
||||
}
|
||||
},
|
||||
"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/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
@ -9687,6 +10087,12 @@
|
||||
"node": ">=0.10.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": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
@ -10620,6 +11026,12 @@
|
||||
"tslib": "^2"
|
||||
}
|
||||
},
|
||||
"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/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
@ -11117,6 +11529,15 @@
|
||||
"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/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@ -11141,6 +11562,28 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"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/void-elements": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
|
||||
@ -11637,6 +12080,15 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/zod": {
|
||||
"version": "4.1.12",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
|
||||
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,17 +24,23 @@
|
||||
"@chakra-ui/react": "^3.2.0",
|
||||
"@emotion/react": "^11.13.5",
|
||||
"@eslint/js": "^9.11.0",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@stylistic/eslint-plugin": "^2.8.0",
|
||||
"@types/node": "^22.19.1",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"axios": "^1.13.2",
|
||||
"date-fns": "^4.1.0",
|
||||
"eslint": "^9.11.0",
|
||||
"eslint-plugin-react": "^7.36.1",
|
||||
"express": "^4.19.2",
|
||||
"globals": "^15.9.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.66.0",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"typescript-eslint": "^8.6.0"
|
||||
"recharts": "^3.4.1",
|
||||
"typescript-eslint": "^8.6.0",
|
||||
"zod": "^4.1.12"
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,4 +12,6 @@ export const URLs = {
|
||||
url: makeUrl(navs[`link.${pkg.name}.auth`]),
|
||||
isOn: Boolean(navs[`link.${pkg.name}.auth`])
|
||||
},
|
||||
tracker: makeUrl('/tracker'),
|
||||
stats: makeUrl('/stats'),
|
||||
}
|
||||
|
||||
103
src/api/client.ts
Normal file
103
src/api/client.ts
Normal file
@ -0,0 +1,103 @@
|
||||
import axios, { AxiosError } from 'axios'
|
||||
import { getConfigValue } from '@brojs/cli'
|
||||
|
||||
import type {
|
||||
ApiResponse,
|
||||
SignUpRequest,
|
||||
SignInRequest,
|
||||
SignInResponse,
|
||||
LogCigaretteRequest,
|
||||
Cigarette,
|
||||
GetCigarettesParams,
|
||||
DailyStat,
|
||||
GetDailyStatsParams,
|
||||
} from '../types/api'
|
||||
|
||||
const TOKEN_KEY = 'smokeToken'
|
||||
|
||||
// Get API base URL from config
|
||||
const baseURL = String(getConfigValue('smoke-tracker.api') || '/api')
|
||||
|
||||
// Create axios instance
|
||||
export const apiClient = axios.create({
|
||||
baseURL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
// Request interceptor to add JWT token
|
||||
apiClient.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = localStorage.getItem(TOKEN_KEY)
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// Response interceptor for error handling
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error: AxiosError) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Token expired or invalid
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
// Optionally redirect to login page
|
||||
if (window.location.pathname !== '/auth/signin') {
|
||||
window.location.href = '/smoke-tracker/auth/signin'
|
||||
}
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// Auth API
|
||||
export const authApi = {
|
||||
signup: async (data: SignUpRequest): Promise<ApiResponse<{ ok: boolean }>> => {
|
||||
const response = await apiClient.post('/auth/signup', data)
|
||||
return response.data
|
||||
},
|
||||
|
||||
signin: async (data: SignInRequest): Promise<ApiResponse<SignInResponse>> => {
|
||||
const response = await apiClient.post('/auth/signin', data)
|
||||
if (response.data.success) {
|
||||
localStorage.setItem(TOKEN_KEY, response.data.body.token)
|
||||
}
|
||||
return response.data
|
||||
},
|
||||
|
||||
signout: () => {
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
},
|
||||
|
||||
getToken: () => {
|
||||
return localStorage.getItem(TOKEN_KEY)
|
||||
},
|
||||
}
|
||||
|
||||
// Cigarettes API
|
||||
export const cigarettesApi = {
|
||||
log: async (data: LogCigaretteRequest): Promise<ApiResponse<Cigarette>> => {
|
||||
const response = await apiClient.post('/cigarettes', data)
|
||||
return response.data
|
||||
},
|
||||
|
||||
getAll: async (params?: GetCigarettesParams): Promise<ApiResponse<Cigarette[]>> => {
|
||||
const response = await apiClient.get('/cigarettes', { params })
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
|
||||
// Stats API
|
||||
export const statsApi = {
|
||||
getDaily: async (params?: GetDailyStatsParams): Promise<ApiResponse<DailyStat[]>> => {
|
||||
const response = await apiClient.get('/stats/daily', { params })
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
|
||||
@ -3,12 +3,15 @@ import { BrowserRouter } from 'react-router-dom'
|
||||
|
||||
import { Dashboard } from './dashboard'
|
||||
import { Provider } from './theme'
|
||||
import { AuthProvider } from './contexts/AuthContext'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Provider>
|
||||
<AuthProvider>
|
||||
<Dashboard />
|
||||
</AuthProvider>
|
||||
</Provider>
|
||||
</BrowserRouter>
|
||||
)
|
||||
|
||||
23
src/components/ProtectedRoute.tsx
Normal file
23
src/components/ProtectedRoute.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React, { ReactNode } from 'react'
|
||||
import { Navigate } from 'react-router-dom'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { URLs } from '../__data__/urls'
|
||||
|
||||
interface ProtectedRouteProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
||||
const { isAuthenticated, isLoading } = useAuth()
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to={URLs.auth.url} replace />
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
31
src/components/ui/field.tsx
Normal file
31
src/components/ui/field.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { Field as ChakraField } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
|
||||
export interface FieldProps extends ChakraField.RootProps {
|
||||
label?: React.ReactNode
|
||||
helperText?: React.ReactNode
|
||||
errorText?: React.ReactNode
|
||||
optionalText?: React.ReactNode
|
||||
}
|
||||
|
||||
export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
|
||||
function Field(props, ref) {
|
||||
const { label, children, helperText, errorText, optionalText, ...rest } = props
|
||||
return (
|
||||
<ChakraField.Root ref={ref} {...rest}>
|
||||
{label && (
|
||||
<ChakraField.Label>
|
||||
{label}
|
||||
<ChakraField.RequiredIndicator />
|
||||
</ChakraField.Label>
|
||||
)}
|
||||
{children}
|
||||
{helperText && (
|
||||
<ChakraField.HelperText>{helperText}</ChakraField.HelperText>
|
||||
)}
|
||||
{errorText && <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>}
|
||||
</ChakraField.Root>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
85
src/contexts/AuthContext.tsx
Normal file
85
src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
|
||||
import { authApi } from '../api/client'
|
||||
import type { User, SignUpRequest, SignInRequest } from '../types/api'
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null
|
||||
isAuthenticated: boolean
|
||||
isLoading: boolean
|
||||
signin: (data: SignInRequest) => Promise<void>
|
||||
signup: (data: SignUpRequest) => Promise<void>
|
||||
signout: () => void
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined)
|
||||
|
||||
interface AuthProviderProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
// Check if user is already logged in (has valid token)
|
||||
const token = authApi.getToken()
|
||||
if (token) {
|
||||
// In a real app, you might want to verify the token with the backend
|
||||
// For now, we just check if token exists
|
||||
setIsLoading(false)
|
||||
// We don't have user data stored, so user will be set on first authenticated request
|
||||
} else {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const signin = async (data: SignInRequest) => {
|
||||
try {
|
||||
const response = await authApi.signin(data)
|
||||
if (response.success) {
|
||||
setUser(response.body.user)
|
||||
} else {
|
||||
throw new Error('Sign in failed')
|
||||
}
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const signup = async (data: SignUpRequest) => {
|
||||
try {
|
||||
const response = await authApi.signup(data)
|
||||
if (!response.success) {
|
||||
throw new Error('Sign up failed')
|
||||
}
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const signout = () => {
|
||||
authApi.signout()
|
||||
setUser(null)
|
||||
}
|
||||
|
||||
const value: AuthContextType = {
|
||||
user,
|
||||
isAuthenticated: !!authApi.getToken(),
|
||||
isLoading,
|
||||
signin,
|
||||
signup,
|
||||
signout,
|
||||
}
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
|
||||
}
|
||||
|
||||
export const useAuth = (): AuthContextType => {
|
||||
const context = useContext(AuthContext)
|
||||
if (context === undefined) {
|
||||
throw new Error('useAuth must be used within an AuthProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
|
||||
@ -3,6 +3,10 @@ import { Route, Routes } from 'react-router-dom'
|
||||
|
||||
import { URLs } from './__data__/urls'
|
||||
import { MainPage } from './pages'
|
||||
import { SignInPage, SignUpPage } from './pages/auth'
|
||||
import { TrackerPage } from './pages/tracker'
|
||||
import { StatsPage } from './pages/stats'
|
||||
import { ProtectedRoute } from './components/ProtectedRoute'
|
||||
|
||||
const PageWrapper = ({ children }: React.PropsWithChildren) => (
|
||||
<Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
|
||||
@ -15,7 +19,45 @@ export const Dashboard = () => {
|
||||
path={URLs.baseUrl}
|
||||
element={
|
||||
<PageWrapper>
|
||||
<ProtectedRoute>
|
||||
<MainPage />
|
||||
</ProtectedRoute>
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={URLs.auth.url}
|
||||
element={
|
||||
<PageWrapper>
|
||||
<SignInPage />
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={URLs.baseUrl + '/auth/signup'}
|
||||
element={
|
||||
<PageWrapper>
|
||||
<SignUpPage />
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={URLs.tracker}
|
||||
element={
|
||||
<PageWrapper>
|
||||
<ProtectedRoute>
|
||||
<TrackerPage />
|
||||
</ProtectedRoute>
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={URLs.stats}
|
||||
element={
|
||||
<PageWrapper>
|
||||
<ProtectedRoute>
|
||||
<StatsPage />
|
||||
</ProtectedRoute>
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
3
src/pages/auth/index.ts
Normal file
3
src/pages/auth/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { SignInPage } from './signin'
|
||||
export { SignUpPage } from './signup'
|
||||
|
||||
143
src/pages/auth/signin.tsx
Normal file
143
src/pages/auth/signin.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
VStack,
|
||||
Text,
|
||||
Heading,
|
||||
Card,
|
||||
} from '@chakra-ui/react'
|
||||
import { Field } from '../../components/ui/field'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
import { URLs } from '../../__data__/urls'
|
||||
|
||||
const signinSchema = z.object({
|
||||
login: z.string().min(1, 'Логин обязателен'),
|
||||
password: z.string().min(1, 'Пароль обязателен'),
|
||||
})
|
||||
|
||||
type SigninFormData = z.infer<typeof signinSchema>
|
||||
|
||||
export const SignInPage: React.FC = () => {
|
||||
const { signin } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<SigninFormData>({
|
||||
resolver: zodResolver(signinSchema),
|
||||
})
|
||||
|
||||
const onSubmit = async (data: SigninFormData) => {
|
||||
setIsSubmitting(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
await signin(data)
|
||||
navigate(URLs.baseUrl)
|
||||
} catch (err: any) {
|
||||
console.error('Signin error:', err)
|
||||
console.error('Error response:', err?.response)
|
||||
|
||||
let errorMessage = 'Ошибка входа'
|
||||
|
||||
if (err?.response?.data?.errors) {
|
||||
errorMessage = err.response.data.errors
|
||||
} else if (err?.response?.data?.message) {
|
||||
errorMessage = err.response.data.message
|
||||
} else if (err?.message) {
|
||||
errorMessage = err.message
|
||||
}
|
||||
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
p={4}
|
||||
>
|
||||
<Card.Root maxW="md" w="full" p={8}>
|
||||
<Card.Body>
|
||||
<VStack gap={6} align="stretch">
|
||||
<Heading size="lg" textAlign="center">
|
||||
Вход в систему
|
||||
</Heading>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<VStack gap={4} align="stretch">
|
||||
<Field
|
||||
label="Логин"
|
||||
invalid={!!errors.login}
|
||||
errorText={errors.login?.message}
|
||||
>
|
||||
<Input
|
||||
{...register('login')}
|
||||
placeholder="Введите логин"
|
||||
size="lg"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Пароль"
|
||||
invalid={!!errors.password}
|
||||
errorText={errors.password?.message}
|
||||
>
|
||||
<Input
|
||||
{...register('password')}
|
||||
type="password"
|
||||
placeholder="Введите пароль"
|
||||
size="lg"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{error && (
|
||||
<Text color="red.500" fontSize="sm">
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
w="full"
|
||||
loading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Войти
|
||||
</Button>
|
||||
|
||||
<Text textAlign="center" fontSize="sm">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to={URLs.baseUrl + '/auth/signup'}>
|
||||
<Text as="span" color="blue.500" textDecoration="underline">
|
||||
Зарегистрироваться
|
||||
</Text>
|
||||
</Link>
|
||||
</Text>
|
||||
</VStack>
|
||||
</form>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
161
src/pages/auth/signup.tsx
Normal file
161
src/pages/auth/signup.tsx
Normal file
@ -0,0 +1,161 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
VStack,
|
||||
Text,
|
||||
Heading,
|
||||
Card,
|
||||
} from '@chakra-ui/react'
|
||||
import { Field } from '../../components/ui/field'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
import { URLs } from '../../__data__/urls'
|
||||
|
||||
const signupSchema = z.object({
|
||||
login: z.string().min(3, 'Логин должен содержать минимум 3 символа'),
|
||||
password: z.string().min(4, 'Пароль должен содержать минимум 4 символов'),
|
||||
confirmPassword: z.string(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: 'Пароли не совпадают',
|
||||
path: ['confirmPassword'],
|
||||
})
|
||||
|
||||
type SignupFormData = z.infer<typeof signupSchema>
|
||||
|
||||
export const SignUpPage: React.FC = () => {
|
||||
const { signup } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<SignupFormData>({
|
||||
resolver: zodResolver(signupSchema),
|
||||
})
|
||||
|
||||
const onSubmit = async (data: SignupFormData) => {
|
||||
setIsSubmitting(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
await signup({ login: data.login, password: data.password })
|
||||
// After successful signup, redirect to signin
|
||||
navigate(URLs.auth.url)
|
||||
} catch (err: any) {
|
||||
console.error('Signup error:', err)
|
||||
console.error('Error response:', err?.response)
|
||||
|
||||
let errorMessage = 'Ошибка регистрации'
|
||||
|
||||
if (err?.response?.data?.errors) {
|
||||
errorMessage = err.response.data.errors
|
||||
} else if (err?.response?.data?.message) {
|
||||
errorMessage = err.response.data.message
|
||||
} else if (err?.message) {
|
||||
errorMessage = err.message
|
||||
}
|
||||
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
p={4}
|
||||
>
|
||||
<Card.Root maxW="md" w="full" p={8}>
|
||||
<Card.Body>
|
||||
<VStack gap={6} align="stretch">
|
||||
<Heading size="lg" textAlign="center">
|
||||
Регистрация
|
||||
</Heading>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<VStack gap={4} align="stretch">
|
||||
<Field
|
||||
label="Логин"
|
||||
invalid={!!errors.login}
|
||||
errorText={errors.login?.message}
|
||||
>
|
||||
<Input
|
||||
{...register('login')}
|
||||
placeholder="Введите логин"
|
||||
size="lg"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Пароль"
|
||||
invalid={!!errors.password}
|
||||
errorText={errors.password?.message}
|
||||
>
|
||||
<Input
|
||||
{...register('password')}
|
||||
type="password"
|
||||
placeholder="Введите пароль"
|
||||
size="lg"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Подтверждение пароля"
|
||||
invalid={!!errors.confirmPassword}
|
||||
errorText={errors.confirmPassword?.message}
|
||||
>
|
||||
<Input
|
||||
{...register('confirmPassword')}
|
||||
type="password"
|
||||
placeholder="Повторите пароль"
|
||||
size="lg"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{error && (
|
||||
<Text color="red.500" fontSize="sm">
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
w="full"
|
||||
loading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Button>
|
||||
|
||||
<Text textAlign="center" fontSize="sm">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to={URLs.auth.url}>
|
||||
<Text as="span" color="blue.500" textDecoration="underline">
|
||||
Войти
|
||||
</Text>
|
||||
</Link>
|
||||
</Text>
|
||||
</VStack>
|
||||
</form>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,28 +1,117 @@
|
||||
import React from 'react'
|
||||
import { Grid, GridItem } from '@chakra-ui/react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Card,
|
||||
Container,
|
||||
} from '@chakra-ui/react'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
import { URLs } from '../../__data__/urls'
|
||||
|
||||
export const MainPage = () => {
|
||||
const { user, signout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleSignout = () => {
|
||||
signout()
|
||||
navigate(URLs.auth.url)
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid
|
||||
h="100%"
|
||||
bgColor="gray.300"
|
||||
templateAreas={{
|
||||
md: `"header header"
|
||||
"aside main"
|
||||
"footer footer"`,
|
||||
sm: `"header"
|
||||
"main"
|
||||
"aside"
|
||||
"footer"`,
|
||||
}}
|
||||
gridTemplateRows={{ sm: '1fr', md: '50px 1fr 30px' }}
|
||||
gridTemplateColumns={{ sm: '1fr', md: '150px 1fr' }}
|
||||
gap={4}
|
||||
>
|
||||
<GridItem bgColor="green.100" gridArea="header">header</GridItem>
|
||||
<GridItem bgColor="green.300" gridArea="aside">aside</GridItem>
|
||||
<GridItem bgColor="green.600" gridArea="main" h="100vh">main</GridItem>
|
||||
<GridItem bgColor="green.300" gridArea="footer">footer</GridItem>
|
||||
</Grid>
|
||||
<Box minH="100vh" bg="gray.50">
|
||||
{/* Header */}
|
||||
<Box bg="teal.500" color="white" py={4} px={8} shadow="md">
|
||||
<Container maxW="6xl">
|
||||
<HStack justify="space-between">
|
||||
<Heading size="lg">Smoke Tracker</Heading>
|
||||
<HStack gap={4}>
|
||||
{user && (
|
||||
<Text fontSize="sm">
|
||||
Пользователь: <strong>{user.login}</strong>
|
||||
</Text>
|
||||
)}
|
||||
<Button colorScheme="whiteAlpha" variant="outline" onClick={handleSignout}>
|
||||
Выйти
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Main content */}
|
||||
<Container maxW="6xl" py={12}>
|
||||
<VStack gap={8}>
|
||||
<VStack gap={2}>
|
||||
<Heading size="2xl">Добро пожаловать в Smoke Tracker!</Heading>
|
||||
<Text fontSize="lg" color="gray.600" textAlign="center">
|
||||
Приложение для отслеживания привычки курения
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
{/* Navigation cards */}
|
||||
<Box w="full" mt={8}>
|
||||
<VStack gap={6}>
|
||||
<Card.Root w="full" bg="blue.50" _hover={{ shadow: 'lg', transform: 'translateY(-2px)' }} transition="all 0.2s">
|
||||
<Card.Body p={8}>
|
||||
<VStack gap={4}>
|
||||
<Heading size="lg" color="blue.700">
|
||||
📝 Трекер
|
||||
</Heading>
|
||||
<Text textAlign="center" color="gray.700">
|
||||
Записывайте каждую выкуренную сигарету с временем и заметками
|
||||
</Text>
|
||||
<Link to={URLs.tracker}>
|
||||
<Button colorScheme="blue" size="lg" w="200px">
|
||||
Открыть трекер
|
||||
</Button>
|
||||
</Link>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
|
||||
<Card.Root w="full" bg="teal.50" _hover={{ shadow: 'lg', transform: 'translateY(-2px)' }} transition="all 0.2s">
|
||||
<Card.Body p={8}>
|
||||
<VStack gap={4}>
|
||||
<Heading size="lg" color="teal.700">
|
||||
📊 Статистика
|
||||
</Heading>
|
||||
<Text textAlign="center" color="gray.700">
|
||||
Просматривайте графики и анализируйте свою привычку курения
|
||||
</Text>
|
||||
<Link to={URLs.stats}>
|
||||
<Button colorScheme="teal" size="lg" w="200px">
|
||||
Посмотреть статистику
|
||||
</Button>
|
||||
</Link>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
{/* Info section */}
|
||||
<Card.Root w="full" mt={8}>
|
||||
<Card.Body p={6}>
|
||||
<VStack gap={4} align="start">
|
||||
<Heading size="md">Возможности приложения:</Heading>
|
||||
<VStack align="start" gap={2} pl={4}>
|
||||
<Text>✓ Быстрая запись сигарет одной кнопкой</Text>
|
||||
<Text>✓ Добавление заметок и произвольного времени</Text>
|
||||
<Text>✓ Просмотр истории всех записей</Text>
|
||||
<Text>✓ Дневная статистика с графиками</Text>
|
||||
<Text>✓ Анализ за любой период времени</Text>
|
||||
<Text>✓ Расчет среднего и максимального количества в день</Text>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
2
src/pages/stats/index.ts
Normal file
2
src/pages/stats/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { StatsPage } from './stats'
|
||||
|
||||
258
src/pages/stats/stats.tsx
Normal file
258
src/pages/stats/stats.tsx
Normal file
@ -0,0 +1,258 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Card,
|
||||
Input,
|
||||
Stack,
|
||||
} from '@chakra-ui/react'
|
||||
import { Field } from '../../components/ui/field'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { format, subDays, eachDayOfInterval, parseISO } from 'date-fns'
|
||||
import { statsApi } from '../../api/client'
|
||||
import { URLs } from '../../__data__/urls'
|
||||
import type { DailyStat } from '../../types/api'
|
||||
|
||||
interface FilledDailyStat {
|
||||
date: string
|
||||
count: number
|
||||
displayDate: string
|
||||
}
|
||||
|
||||
export const StatsPage: React.FC = () => {
|
||||
const [stats, setStats] = useState<FilledDailyStat[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Default: last 30 days
|
||||
const [fromDate, setFromDate] = useState(
|
||||
format(subDays(new Date(), 30), 'yyyy-MM-dd')
|
||||
)
|
||||
const [toDate, setToDate] = useState(format(new Date(), 'yyyy-MM-dd'))
|
||||
|
||||
const fillMissingDates = (data: DailyStat[], from: string, to: string): FilledDailyStat[] => {
|
||||
const start = parseISO(from)
|
||||
const end = parseISO(to)
|
||||
const allDates = eachDayOfInterval({ start, end })
|
||||
|
||||
return allDates.map((date) => {
|
||||
const dateStr = format(date, 'yyyy-MM-dd')
|
||||
const existing = data.find((d) => d.date === dateStr)
|
||||
|
||||
return {
|
||||
date: dateStr,
|
||||
count: existing ? existing.count : 0,
|
||||
displayDate: format(date, 'dd.MM'),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fetchStats = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const fromISO = new Date(fromDate).toISOString()
|
||||
const toISO = new Date(toDate + 'T23:59:59').toISOString()
|
||||
|
||||
const response = await statsApi.getDaily({
|
||||
from: fromISO,
|
||||
to: toISO,
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
const filled = fillMissingDates(response.body, fromDate, toDate)
|
||||
setStats(filled)
|
||||
}
|
||||
} catch (err: any) {
|
||||
const errorMessage =
|
||||
err?.response?.data?.errors ||
|
||||
err?.response?.data?.message ||
|
||||
'Ошибка при загрузке статистики'
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats()
|
||||
}, [])
|
||||
|
||||
const totalCigarettes = stats.reduce((sum, stat) => sum + stat.count, 0)
|
||||
const averagePerDay = stats.length > 0 ? (totalCigarettes / stats.length).toFixed(1) : 0
|
||||
const maxPerDay = Math.max(...stats.map((s) => s.count), 0)
|
||||
|
||||
return (
|
||||
<Box minH="100vh" bg="gray.50" p={8}>
|
||||
<VStack gap={6} maxW="6xl" mx="auto">
|
||||
<Heading size="2xl">Статистика курения</Heading>
|
||||
|
||||
<HStack w="full" gap={4}>
|
||||
<Link to={URLs.baseUrl}>
|
||||
<Button colorScheme="gray" variant="outline">
|
||||
На главную
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to={URLs.baseUrl + '/tracker'}>
|
||||
<Button colorScheme="blue" variant="outline">
|
||||
Трекер
|
||||
</Button>
|
||||
</Link>
|
||||
</HStack>
|
||||
|
||||
{/* Date range selector */}
|
||||
<Card.Root w="full">
|
||||
<Card.Body>
|
||||
<VStack gap={4} align="stretch">
|
||||
<Heading size="md">Выберите период</Heading>
|
||||
|
||||
<HStack gap={4} flexWrap="wrap">
|
||||
<Field label="От">
|
||||
<Input
|
||||
type="date"
|
||||
value={fromDate}
|
||||
onChange={(e) => setFromDate(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="До">
|
||||
<Input
|
||||
type="date"
|
||||
value={toDate}
|
||||
onChange={(e) => setToDate(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Box>
|
||||
<Button
|
||||
colorScheme="teal"
|
||||
onClick={fetchStats}
|
||||
loading={isLoading}
|
||||
disabled={isLoading}
|
||||
mt={7}
|
||||
>
|
||||
Обновить
|
||||
</Button>
|
||||
</Box>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
|
||||
{error && (
|
||||
<Card.Root w="full" bg="red.50" borderColor="red.500" borderWidth={2}>
|
||||
<Card.Body>
|
||||
<Text color="red.700" fontWeight="bold">
|
||||
{error}
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
)}
|
||||
|
||||
{/* Summary statistics */}
|
||||
<Card.Root w="full">
|
||||
<Card.Body>
|
||||
<Stack direction={{ base: 'column', md: 'row' }} gap={6} justify="space-around">
|
||||
<VStack>
|
||||
<Text fontSize="3xl" fontWeight="bold" color="blue.500">
|
||||
{totalCigarettes}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
Всего сигарет
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<VStack>
|
||||
<Text fontSize="3xl" fontWeight="bold" color="green.500">
|
||||
{averagePerDay}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
В среднем в день
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<VStack>
|
||||
<Text fontSize="3xl" fontWeight="bold" color="orange.500">
|
||||
{maxPerDay}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
Максимум в день
|
||||
</Text>
|
||||
</VStack>
|
||||
</Stack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
|
||||
{/* Chart */}
|
||||
<Card.Root w="full">
|
||||
<Card.Body>
|
||||
<VStack gap={4} align="stretch">
|
||||
<Heading size="md">График по дням</Heading>
|
||||
|
||||
{isLoading ? (
|
||||
<Text textAlign="center" py={8}>
|
||||
Загрузка...
|
||||
</Text>
|
||||
) : stats.length === 0 ? (
|
||||
<Text textAlign="center" py={8} color="gray.500">
|
||||
Нет данных за выбранный период
|
||||
</Text>
|
||||
) : (
|
||||
<Box w="full" h="400px">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart
|
||||
data={stats}
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="displayDate"
|
||||
tick={{ fontSize: 12 }}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis allowDecimals={false} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
labelFormatter={(label) => `Дата: ${label}`}
|
||||
formatter={(value: number) => [value, 'Сигарет']}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
name="Количество сигарет"
|
||||
stroke="#3182ce"
|
||||
strokeWidth={2}
|
||||
activeDot={{ r: 8 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
</VStack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
2
src/pages/tracker/index.ts
Normal file
2
src/pages/tracker/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { TrackerPage } from './tracker'
|
||||
|
||||
266
src/pages/tracker/tracker.tsx
Normal file
266
src/pages/tracker/tracker.tsx
Normal file
@ -0,0 +1,266 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Input,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Card,
|
||||
Textarea,
|
||||
Stack,
|
||||
} from '@chakra-ui/react'
|
||||
import { Field } from '../../components/ui/field'
|
||||
import { cigarettesApi } from '../../api/client'
|
||||
import { URLs } from '../../__data__/urls'
|
||||
import type { Cigarette } from '../../types/api'
|
||||
|
||||
const logCigaretteSchema = z.object({
|
||||
smokedAt: z.string().optional(),
|
||||
note: z.string().optional(),
|
||||
})
|
||||
|
||||
type LogCigaretteFormData = z.infer<typeof logCigaretteSchema>
|
||||
|
||||
export const TrackerPage: React.FC = () => {
|
||||
const [cigarettes, setCigarettes] = useState<Cigarette[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<LogCigaretteFormData>({
|
||||
resolver: zodResolver(logCigaretteSchema),
|
||||
})
|
||||
|
||||
const fetchCigarettes = async () => {
|
||||
try {
|
||||
const response = await cigarettesApi.getAll()
|
||||
if (response.success) {
|
||||
// Show most recent first
|
||||
setCigarettes(response.body.reverse())
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to fetch cigarettes:', err)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchCigarettes()
|
||||
}, [])
|
||||
|
||||
const logQuick = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
try {
|
||||
const response = await cigarettesApi.log({})
|
||||
if (response.success) {
|
||||
setSuccess('Сигарета записана!')
|
||||
await fetchCigarettes()
|
||||
setTimeout(() => setSuccess(null), 3000)
|
||||
}
|
||||
} catch (err: any) {
|
||||
const errorMessage = err?.response?.data?.errors || err?.response?.data?.message || 'Ошибка при записи'
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async (data: LogCigaretteFormData) => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
try {
|
||||
const response = await cigarettesApi.log({
|
||||
smokedAt: data.smokedAt || undefined,
|
||||
note: data.note || undefined,
|
||||
})
|
||||
if (response.success) {
|
||||
setSuccess('Сигарета записана с заметкой!')
|
||||
reset()
|
||||
await fetchCigarettes()
|
||||
setTimeout(() => setSuccess(null), 3000)
|
||||
}
|
||||
} catch (err: any) {
|
||||
const errorMessage = err?.response?.data?.errors || err?.response?.data?.message || 'Ошибка при записи'
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Box minH="100vh" bg="gray.50" p={8}>
|
||||
<VStack gap={6} maxW="4xl" mx="auto">
|
||||
<Heading size="2xl">Трекер курения</Heading>
|
||||
|
||||
<HStack w="full" gap={4}>
|
||||
<Link to={URLs.baseUrl}>
|
||||
<Button colorScheme="gray" variant="outline">
|
||||
На главную
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to={URLs.baseUrl + '/stats'}>
|
||||
<Button colorScheme="teal" variant="outline">
|
||||
Статистика
|
||||
</Button>
|
||||
</Link>
|
||||
</HStack>
|
||||
|
||||
{/* Quick log button */}
|
||||
<Card.Root w="full" bg="blue.50">
|
||||
<Card.Body>
|
||||
<VStack gap={4}>
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
Быстрая запись
|
||||
</Text>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
w="full"
|
||||
onClick={logQuick}
|
||||
loading={isLoading}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Записать сигарету (текущее время)
|
||||
</Button>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
|
||||
{/* Form with custom time and note */}
|
||||
<Card.Root w="full">
|
||||
<Card.Body>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<VStack gap={4} align="stretch">
|
||||
<Heading size="md">Запись с дополнительными данными</Heading>
|
||||
|
||||
<Field
|
||||
label="Время (необязательно)"
|
||||
helperText="Оставьте пустым для текущего времени"
|
||||
invalid={!!errors.smokedAt}
|
||||
errorText={errors.smokedAt?.message}
|
||||
>
|
||||
<Input
|
||||
{...register('smokedAt')}
|
||||
type="datetime-local"
|
||||
placeholder="Выберите время"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label="Заметка (необязательно)"
|
||||
invalid={!!errors.note}
|
||||
errorText={errors.note?.message}
|
||||
>
|
||||
<Textarea
|
||||
{...register('note')}
|
||||
placeholder="Добавьте комментарий..."
|
||||
rows={3}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="green"
|
||||
w="full"
|
||||
loading={isLoading}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Записать с заметкой
|
||||
</Button>
|
||||
</VStack>
|
||||
</form>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
|
||||
{/* Success/Error messages */}
|
||||
{success && (
|
||||
<Card.Root w="full" bg="green.50" borderColor="green.500" borderWidth={2}>
|
||||
<Card.Body>
|
||||
<Text color="green.700" fontWeight="bold">
|
||||
{success}
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Card.Root w="full" bg="red.50" borderColor="red.500" borderWidth={2}>
|
||||
<Card.Body>
|
||||
<Text color="red.700" fontWeight="bold">
|
||||
{error}
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
)}
|
||||
|
||||
{/* Recent cigarettes list */}
|
||||
<Card.Root w="full">
|
||||
<Card.Body>
|
||||
<VStack gap={4} align="stretch">
|
||||
<Heading size="md">Последние записи</Heading>
|
||||
|
||||
{cigarettes.length === 0 ? (
|
||||
<Text color="gray.500" textAlign="center" py={4}>
|
||||
Записей пока нет
|
||||
</Text>
|
||||
) : (
|
||||
<Stack gap={2}>
|
||||
{cigarettes.slice(0, 10).map((cigarette) => (
|
||||
<Box
|
||||
key={cigarette.id}
|
||||
p={3}
|
||||
bg="gray.100"
|
||||
borderRadius="md"
|
||||
borderWidth={1}
|
||||
borderColor="gray.300"
|
||||
>
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" gap={1}>
|
||||
<Text fontWeight="bold">
|
||||
{formatDate(cigarette.smokedAt)}
|
||||
</Text>
|
||||
{cigarette.note && (
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
{cigarette.note}
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
</VStack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
64
src/types/api.ts
Normal file
64
src/types/api.ts
Normal file
@ -0,0 +1,64 @@
|
||||
// API Response wrapper
|
||||
export interface ApiResponse<T> {
|
||||
success: boolean
|
||||
body: T
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
success: false
|
||||
errors: string
|
||||
message?: string
|
||||
}
|
||||
|
||||
// User related types
|
||||
export interface User {
|
||||
id: string
|
||||
login: string
|
||||
created: string
|
||||
}
|
||||
|
||||
export interface SignUpRequest {
|
||||
login: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface SignInRequest {
|
||||
login: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface SignInResponse {
|
||||
user: User
|
||||
token: string
|
||||
}
|
||||
|
||||
// Cigarette related types
|
||||
export interface Cigarette {
|
||||
id: string
|
||||
userId: string
|
||||
smokedAt: string
|
||||
note?: string
|
||||
created: string
|
||||
}
|
||||
|
||||
export interface LogCigaretteRequest {
|
||||
smokedAt?: string
|
||||
note?: string
|
||||
}
|
||||
|
||||
export interface GetCigarettesParams {
|
||||
from?: string
|
||||
to?: string
|
||||
}
|
||||
|
||||
// Statistics types
|
||||
export interface DailyStat {
|
||||
date: string // YYYY-MM-DD format
|
||||
count: number
|
||||
}
|
||||
|
||||
export interface GetDailyStatsParams {
|
||||
from?: string
|
||||
to?: string
|
||||
}
|
||||
|
||||
@ -4,5 +4,191 @@ const timer = (time = 300) => (req, res, next) => setTimeout(next, time);
|
||||
|
||||
router.use(timer());
|
||||
|
||||
// In-memory storage for demo
|
||||
const users = [];
|
||||
const cigarettes = [];
|
||||
let userIdCounter = 1;
|
||||
let cigaretteIdCounter = 1;
|
||||
|
||||
// Simple token generation (for demo purposes only)
|
||||
const generateToken = (userId) => {
|
||||
return Buffer.from(JSON.stringify({ userId, exp: Date.now() + 12 * 60 * 60 * 1000 })).toString('base64');
|
||||
};
|
||||
|
||||
const verifyToken = (token) => {
|
||||
try {
|
||||
const payload = JSON.parse(Buffer.from(token, 'base64').toString());
|
||||
if (payload.exp > Date.now()) {
|
||||
return payload.userId;
|
||||
}
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Auth middleware
|
||||
const authMiddleware = (req, res, next) => {
|
||||
const authHeader = req.headers.authorization;
|
||||
if (!authHeader || !authHeader.startsWith('Bearer ')) {
|
||||
return res.status(401).json({ success: false, errors: 'Требуется авторизация' });
|
||||
}
|
||||
|
||||
const token = authHeader.substring(7);
|
||||
const userId = verifyToken(token);
|
||||
|
||||
if (!userId) {
|
||||
return res.status(401).json({ success: false, errors: 'Неверный или истекший токен авторизации' });
|
||||
}
|
||||
|
||||
req.userId = userId;
|
||||
next();
|
||||
};
|
||||
|
||||
// POST /auth/signup
|
||||
router.post('/auth/signup', (req, res) => {
|
||||
const { login, password } = req.body;
|
||||
|
||||
if (!login || !password) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
errors: 'Не все поля заполнены: login, password'
|
||||
});
|
||||
}
|
||||
|
||||
const existingUser = users.find(u => u.login === login);
|
||||
if (existingUser) {
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
errors: 'Пользователь с таким логином уже существует'
|
||||
});
|
||||
}
|
||||
|
||||
const user = {
|
||||
id: String(userIdCounter++),
|
||||
login,
|
||||
password, // In real app, hash this!
|
||||
created: new Date().toISOString()
|
||||
};
|
||||
|
||||
users.push(user);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
body: { ok: true }
|
||||
});
|
||||
});
|
||||
|
||||
// POST /auth/signin
|
||||
router.post('/auth/signin', (req, res) => {
|
||||
const { login, password } = req.body;
|
||||
|
||||
if (!login || !password) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
errors: 'Не все поля заполнены: login, password'
|
||||
});
|
||||
}
|
||||
|
||||
const user = users.find(u => u.login === login && u.password === password);
|
||||
|
||||
if (!user) {
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
errors: 'Неверный логин или пароль'
|
||||
});
|
||||
}
|
||||
|
||||
const token = generateToken(user.id);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
body: {
|
||||
user: {
|
||||
id: user.id,
|
||||
login: user.login,
|
||||
created: user.created
|
||||
},
|
||||
token
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// POST /cigarettes
|
||||
router.post('/cigarettes', authMiddleware, (req, res) => {
|
||||
const { smokedAt, note } = req.body;
|
||||
|
||||
const cigarette = {
|
||||
id: String(cigaretteIdCounter++),
|
||||
userId: req.userId,
|
||||
smokedAt: smokedAt || new Date().toISOString(),
|
||||
note: note || '',
|
||||
created: new Date().toISOString()
|
||||
};
|
||||
|
||||
cigarettes.push(cigarette);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
body: cigarette
|
||||
});
|
||||
});
|
||||
|
||||
// GET /cigarettes
|
||||
router.get('/cigarettes', authMiddleware, (req, res) => {
|
||||
const { from, to } = req.query;
|
||||
|
||||
let userCigarettes = cigarettes.filter(c => c.userId === req.userId);
|
||||
|
||||
if (from) {
|
||||
const fromDate = new Date(from);
|
||||
userCigarettes = userCigarettes.filter(c => new Date(c.smokedAt) >= fromDate);
|
||||
}
|
||||
|
||||
if (to) {
|
||||
const toDate = new Date(to);
|
||||
userCigarettes = userCigarettes.filter(c => new Date(c.smokedAt) <= toDate);
|
||||
}
|
||||
|
||||
// Sort by smokedAt (oldest to newest)
|
||||
userCigarettes.sort((a, b) => new Date(a.smokedAt).getTime() - new Date(b.smokedAt).getTime());
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
body: userCigarettes
|
||||
});
|
||||
});
|
||||
|
||||
// GET /stats/daily
|
||||
router.get('/stats/daily', authMiddleware, (req, res) => {
|
||||
const { from, to } = req.query;
|
||||
|
||||
// Default: 30 days ago to now
|
||||
const fromDate = from ? new Date(from) : new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
|
||||
const toDate = to ? new Date(to) : new Date();
|
||||
|
||||
let userCigarettes = cigarettes.filter(c => {
|
||||
if (c.userId !== req.userId) return false;
|
||||
const smokedDate = new Date(c.smokedAt);
|
||||
return smokedDate >= fromDate && smokedDate <= toDate;
|
||||
});
|
||||
|
||||
// Group by date
|
||||
const dailyStats = {};
|
||||
userCigarettes.forEach(c => {
|
||||
const date = c.smokedAt.split('T')[0]; // YYYY-MM-DD
|
||||
dailyStats[date] = (dailyStats[date] || 0) + 1;
|
||||
});
|
||||
|
||||
// Convert to array and sort
|
||||
const result = Object.entries(dailyStats)
|
||||
.map(([date, count]) => ({ date, count }))
|
||||
.sort((a, b) => a.date.localeCompare(b.date));
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
body: result
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user