From d58c6a066434fbc9d55c517d093a7684f49bd8a5 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:20:53 +0600 Subject: [PATCH 1/8] adjusted backend to get landfill Storage status --- server/src/controllers/landfills.ts | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/server/src/controllers/landfills.ts b/server/src/controllers/landfills.ts index 821f78d..713d20b 100644 --- a/server/src/controllers/landfills.ts +++ b/server/src/controllers/landfills.ts @@ -36,13 +36,35 @@ const getLandfillById = errorWrapper( where: { id: landfillId, }, - }); + }); + + if (!landfill) { + throw new CustomError("Landfill not found", 404); + } + + const percentage = await calculatePercentage(landfill); - res.status(200).json(landfill); + res.status(200).json({ landfill, graphData: percentage }); }, { statusCode: 404, message: "Landfill not found" } ); +async function calculatePercentage(landfill: Landfill) { + // Perform calculation to get the percentage + // Return the calculated percentage + var mot: number = parseInt(landfill?.capacity?.toString() || "") || 0; + var ase: number = parseInt(landfill?.currentTotalWaste?.toString() || "") || 0; + + const graphData = { + empty: mot - ase, + full: ase, + emptyPercentage: ((mot - ase) / mot) * 100, + fullPercentage: (ase / mot) * 100, + }; + + return graphData; // Replace with the actual calculation +} + const updateLandfill = errorWrapper( async (req: Request, res: Response) => { const { landfillId } = req.params; From 234c01b77d0e5b2cf2437872024454457afc12ae Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:30:12 +0600 Subject: [PATCH 2/8] added mantine ui library for graphs --- client/package-lock.json | 497 +++++++++++++++++++++++++++++++++++++- client/package.json | 8 +- client/postcss.config.cjs | 14 ++ 3 files changed, 517 insertions(+), 2 deletions(-) create mode 100644 client/postcss.config.cjs diff --git a/client/package-lock.json b/client/package-lock.json index 3210bc0..02ed085 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -12,6 +12,9 @@ "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@mantine/charts": "^7.7.1", + "@mantine/core": "^7.7.1", + "@mantine/hooks": "^7.7.1", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", @@ -44,6 +47,7 @@ "react-icons": "^5.0.1", "react-simple-captcha": "^9.3.1", "react-to-print": "^2.15.1", + "recharts": "^2.12.3", "sonner": "^1.4.41", "tailwind-merge": "^2.2.2", "tailwindcss-animate": "^1.0.7", @@ -59,7 +63,9 @@ "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.4", - "postcss": "^8", + "postcss": "^8.4.38", + "postcss-preset-mantine": "^1.13.0", + "postcss-simple-vars": "^7.0.1", "tailwindcss": "^3.3.0", "typescript": "^5" } @@ -1806,6 +1812,79 @@ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" }, + "node_modules/@mantine/charts": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@mantine/charts/-/charts-7.7.1.tgz", + "integrity": "sha512-7FMsTQcEQZrX5WAxzhvH/yWBwAJ2oVaZga9f5D80dyCtVgSQt0aRYSQejiMpgYCcaohCVSdQ+TL1YS5nZLvjog==", + "peerDependencies": { + "@mantine/core": "7.7.1", + "@mantine/hooks": "7.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "recharts": "^2.10.3" + } + }, + "node_modules/@mantine/core": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.7.1.tgz", + "integrity": "sha512-SdPzjvqvEK7uHFuVD3a8w3OZyQVoCwIXLSUfOtRNouDMQgsq6Ac7QjKXBBOk3wNweOWFVOU1vATLHobSmow0lQ==", + "dependencies": { + "@floating-ui/react": "^0.26.9", + "clsx": "2.1.0", + "react-number-format": "^5.3.1", + "react-remove-scroll": "^2.5.7", + "react-textarea-autosize": "8.5.3", + "type-fest": "^4.12.0" + }, + "peerDependencies": { + "@mantine/hooks": "7.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@mantine/core/node_modules/react-remove-scroll": { + "version": "2.5.9", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.9.tgz", + "integrity": "sha512-bvHCLBrFfM2OgcrpPY2YW84sPdS2o2HKWJUf1xGyGLnSoEnOTOBpahIarjRuYtN0ryahCeP242yf+5TrBX/pZA==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.6", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mantine/core/node_modules/type-fest": { + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.14.0.tgz", + "integrity": "sha512-on5/Cw89wwqGZQu+yWO0gGMGu8VNxsaW9SB2HE8yJjllEk7IDTwnSN1dUVldYILhYPN5HzD7WAaw2cc/jBfn0Q==", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@mantine/hooks": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.7.1.tgz", + "integrity": "sha512-3YH2FzKMlg840tb04PBDcDXyBCi9puFOxEBVgc6Y/pN6KFqfOoAnQE/YvgOtwSNXZlbTWyDlQoYj+3je7pA7og==", + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/@next/env": { "version": "14.1.4", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz", @@ -2923,6 +3002,60 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@types/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==" + }, + "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==" + }, + "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==" + }, + "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==", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", + "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz", + "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz", + "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==" + }, + "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==" + }, "node_modules/@types/google.maps": { "version": "3.55.2", "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.2.tgz", @@ -3895,6 +4028,116 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "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==", + "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==", + "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==", + "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==", + "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==", + "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==", + "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==", + "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==", + "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==", + "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==", + "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==", + "engines": { + "node": ">=12" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -3983,6 +4226,11 @@ } } }, + "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==" + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -4079,6 +4327,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -4761,11 +5018,24 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fast-equals": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz", + "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -5389,6 +5659,14 @@ "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==", + "engines": { + "node": ">=12" + } + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -5952,6 +6230,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -6618,6 +6901,28 @@ "url": "https://github.com/sponsors/antonk52" } }, + "node_modules/postcss-mixins": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz", + "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==", + "dev": true, + "dependencies": { + "fast-glob": "^3.2.11", + "postcss-js": "^4.0.0", + "postcss-simple-vars": "^7.0.0", + "sugarss": "^4.0.1" + }, + "engines": { + "node": ">=14.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, "node_modules/postcss-nested": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", @@ -6636,6 +6941,19 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-preset-mantine": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/postcss-preset-mantine/-/postcss-preset-mantine-1.13.0.tgz", + "integrity": "sha512-1bv/mQz2K+/FixIMxYd83BYH7PusDZaI7LpUtKbb1l/5N5w6t1p/V9ONHfRJeeAZyfa6Xc+AtR+95VKdFXRH1g==", + "dev": true, + "dependencies": { + "postcss-mixins": "^9.0.4", + "postcss-nested": "^6.0.1" + }, + "peerDependencies": { + "postcss": ">=8.0.0" + } + }, "node_modules/postcss-selector-parser": { "version": "6.0.16", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", @@ -6648,6 +6966,22 @@ "node": ">=4" } }, + "node_modules/postcss-simple-vars": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz", + "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==", + "dev": true, + "engines": { + "node": ">=14.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.1" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -6862,6 +7196,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-number-format": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.4.tgz", + "integrity": "sha512-2hHN5mbLuCDUx19bv0Q8wet67QqYK6xmtLQeY5xx+h7UXiMmRtaCwqko4mMPoKXLc6xAzwRrutg8XbTRlsfjRg==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-onclickoutside": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", @@ -6942,6 +7288,20 @@ "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0" } }, + "node_modules/react-smooth": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz", + "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==", + "dependencies": { + "fast-equals": "^5.0.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -6964,6 +7324,22 @@ } } }, + "node_modules/react-textarea-autosize": { + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", + "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "use-composed-ref": "^1.3.0", + "use-latest": "^1.2.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-to-print": { "version": "2.15.1", "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.15.1.tgz", @@ -6973,6 +7349,21 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -7005,6 +7396,36 @@ "node": ">=8.10.0" } }, + "node_modules/recharts": { + "version": "2.12.3", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.3.tgz", + "integrity": "sha512-vE/F7wTlokf5mtCqVDJlVKelCjliLSJ+DJxj79XlMREm7gpV7ljwbrwE3CfeaoDlOaLX+6iwHaVRn9587YkwIg==", + "dependencies": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.21", + "react-is": "^16.10.2", + "react-smooth": "^4.0.0", + "recharts-scale": "^0.4.4", + "tiny-invariant": "^1.3.1", + "victory-vendor": "^36.6.8" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/recharts-scale": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", + "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", + "dependencies": { + "decimal.js-light": "^2.4.1" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", @@ -7594,6 +8015,22 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/sugarss": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz", + "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==", + "dev": true, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.3.3" + } + }, "node_modules/supercluster": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", @@ -7973,6 +8410,43 @@ } } }, + "node_modules/use-composed-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", + "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-latest": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz", + "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==", + "dependencies": { + "use-isomorphic-layout-effect": "^1.1.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -7999,6 +8473,27 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "node_modules/victory-vendor": { + "version": "36.9.2", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", + "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/client/package.json b/client/package.json index e968cba..e9b8b98 100644 --- a/client/package.json +++ b/client/package.json @@ -13,6 +13,9 @@ "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@mantine/charts": "^7.7.1", + "@mantine/core": "^7.7.1", + "@mantine/hooks": "^7.7.1", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", @@ -45,6 +48,7 @@ "react-icons": "^5.0.1", "react-simple-captcha": "^9.3.1", "react-to-print": "^2.15.1", + "recharts": "^2.12.3", "sonner": "^1.4.41", "tailwind-merge": "^2.2.2", "tailwindcss-animate": "^1.0.7", @@ -60,7 +64,9 @@ "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.4", - "postcss": "^8", + "postcss": "^8.4.38", + "postcss-preset-mantine": "^1.13.0", + "postcss-simple-vars": "^7.0.1", "tailwindcss": "^3.3.0", "typescript": "^5" } diff --git a/client/postcss.config.cjs b/client/postcss.config.cjs new file mode 100644 index 0000000..069b052 --- /dev/null +++ b/client/postcss.config.cjs @@ -0,0 +1,14 @@ +module.exports = { + plugins: { + 'postcss-preset-mantine': {}, + 'postcss-simple-vars': { + variables: { + 'mantine-breakpoint-xs': '36em', + 'mantine-breakpoint-sm': '48em', + 'mantine-breakpoint-md': '62em', + 'mantine-breakpoint-lg': '75em', + 'mantine-breakpoint-xl': '88em', + }, + }, + }, + }; \ No newline at end of file From b929d81bcfa330a6d570f78a0a6c1df76e7bc046 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:30:24 +0600 Subject: [PATCH 3/8] added loading page --- client/app/layout.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/client/app/layout.tsx b/client/app/layout.tsx index 6232bd7..b28bdce 100644 --- a/client/app/layout.tsx +++ b/client/app/layout.tsx @@ -1,6 +1,10 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import '@mantine/core/styles.css'; +import '@mantine/charts/styles.css'; + +import { ColorSchemeScript, MantineProvider } from '@mantine/core'; const inter = Inter({ subsets: ["latin"] }); @@ -19,7 +23,10 @@ export default function RootLayout({ }>) { return ( - {children} + + + + {children} ); } From e86422a39e93b34d01da059cb7d8e3144f2205b0 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:30:42 +0600 Subject: [PATCH 4/8] Fixed the header of the main panel --- .../dashboard-componenets/mainContent/mainSectionHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx b/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx index 784cbfb..bfabbba 100644 --- a/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx +++ b/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx @@ -99,14 +99,14 @@ export default function MainSectionHeader({
{getCookie(curActive)?.startsWith(stsManager) && (getCookie(stsName) ? ( - <>YOUR STS : {getCookie(stsName)} + YOUR STS : {getCookie(stsName).toUpperCase()} ) : ( <>{"NO STS ASSIGNED"} ))} {getCookie(curActive)?.startsWith(landfillManager) && (getCookie(landfillName) ? ( - <>YOUR LANDFILL : {getCookie(landfillName)} + YOUR LANDFILL : {getCookie(landfillName).toUpperCase()} ) : ( <>{"NO LANDFILL ASSIGNED"} ))} From 06d897c119678ad7f9f5f8a1befb762183e64720 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:31:06 +0600 Subject: [PATCH 5/8] updated charts and maps --- client/components/graphs/BarChart.tsx | 5 +- client/components/graphs/PieChart.tsx | 35 ++++--- client/components/maps/GoogleMap.tsx | 132 ++++++++++++++------------ 3 files changed, 97 insertions(+), 75 deletions(-) diff --git a/client/components/graphs/BarChart.tsx b/client/components/graphs/BarChart.tsx index 7e1cc71..f8d7e71 100644 --- a/client/components/graphs/BarChart.tsx +++ b/client/components/graphs/BarChart.tsx @@ -8,9 +8,10 @@ interface ChartDataItem { data: number[]; backgroundColor: string[]; borderColor: string[]; + label: string; } -const BarChart: React.FC = ({ labels, data, backgroundColor, borderColor }) => { +const BarChart: React.FC = ({ labels, data, backgroundColor, borderColor, label }) => { const chartRef = useRef(null); const chartInstance = useRef(null); @@ -29,7 +30,7 @@ const BarChart: React.FC = ({ labels, data, backgroundColor, bord labels: labels, datasets: [ { - label: 'My First Dataset', + label: label, data: data, backgroundColor: backgroundColor, borderColor: borderColor, diff --git a/client/components/graphs/PieChart.tsx b/client/components/graphs/PieChart.tsx index 64cb39b..0ea4655 100644 --- a/client/components/graphs/PieChart.tsx +++ b/client/components/graphs/PieChart.tsx @@ -1,8 +1,7 @@ -"use client"; import React, { useRef, useEffect } from 'react'; -import { Chart, CategoryScale } from 'chart.js/auto'; // Import necessary scales +import { Chart, CategoryScale } from 'chart.js/auto'; -Chart.register(CategoryScale); // Register the scales +Chart.register(CategoryScale); interface ChartDataItem { labels: string[]; @@ -10,11 +9,7 @@ interface ChartDataItem { background: string[]; } -// interface DoughnutChartProps { -// chartData: ChartDataItem[]; -// } - -const PieChart: React.FC = ({ labels, data, background }) => { +const PieChart: React.FC = ({ labels, data, background }) => { const chartRef = useRef(null); const chartInstance = useRef(null); @@ -29,15 +24,27 @@ const PieChart: React.FC = ({ labels, data, background }) => { chartInstance.current = new Chart(myChartRef, { type: 'doughnut', data: { - labels: labels, //['Red', 'Blue', 'Yellow'], + labels: labels, datasets: [ { - label: 'My First Dataset', - data: [300, 50, 100], - backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'], + label: 'Storage Status', + data: data, + backgroundColor: background, }, ], }, + options: { + plugins: { + legend: { + labels: { + font: { + weight: 'bold', + size: 13, + }, + }, + }, + }, + }, }); } @@ -49,8 +56,8 @@ const PieChart: React.FC = ({ labels, data, background }) => { }, []); return ( -
- +
+
); }; diff --git a/client/components/maps/GoogleMap.tsx b/client/components/maps/GoogleMap.tsx index f69c490..a89496a 100644 --- a/client/components/maps/GoogleMap.tsx +++ b/client/components/maps/GoogleMap.tsx @@ -1,19 +1,28 @@ "use client"; -import React, { useState } from 'react'; -import { GoogleMap, LoadScript, Marker, Circle, InfoWindow } from '@react-google-maps/api'; -import { threshold } from '@/hooks/functions/threshold'; -import { Button } from '../ui/button'; +import React, { useState } from "react"; +import { + GoogleMap, + LoadScript, + Marker, + Circle, + InfoWindow, +} from "@react-google-maps/api"; +import { threshold } from "@/hooks/functions/threshold"; +import { Button } from "../ui/button"; +import { ReloadIcon } from "@radix-ui/react-icons"; +import { RefreshCcw } from "lucide-react"; const MapContainerStyle = { - width: '100%', - height: 'calc(100% - 44px)', - borderRadius: '12px', - boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', + width: "100%", + height: "calc(100% - 44px)", + minHeight: "400px", + borderRadius: "12px", + boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", }; const defaultCenter = { - lat: 23.7244018, - lng: 90.38871960, + lat: 23.7244018, + lng: 90.3887196, }; interface Coordinate { @@ -28,8 +37,8 @@ interface MapProps { const GoogleMapComponent: React.FC = ({ coordinates, dumpFills }) => { const [hoveredCircle, setHoveredCircle] = useState(null); - const apiKey: string = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''; - const radius= 2000; + const apiKey: string = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ""; + const radius = 2000; const handleCircleHover = (index: number) => { setHoveredCircle(index); @@ -41,55 +50,60 @@ const GoogleMapComponent: React.FC = ({ coordinates, dumpFills }) => { return ( <> -
-

STS DUMP LOAD HEATMAP

- -
- - - - {coordinates.map((coordinate, index) => { - // let circleColor = '#00FF00'; // Default to green +
+

STS DUMP LOAD HEATMAP

+ +
+ + + + {coordinates.map((coordinate, index) => { + // let circleColor = '#00FF00'; // Default to green - // if (dumpFills[index] >= 40 && dumpFills[index] <= 80) { - // circleColor = '#FFFF00'; // Yellow - // } else if (dumpFills[index] > 80) { - // circleColor = '#FF0000'; // Red - // } - let circleColor = threshold(dumpFills[index]); + // if (dumpFills[index] >= 40 && dumpFills[index] <= 80) { + // circleColor = '#FFFF00'; // Yellow + // } else if (dumpFills[index] > 80) { + // circleColor = '#FF0000'; // Red + // } + let circleColor = threshold(dumpFills[index]); - - return ( - handleCircleHover(index)} - onMouseOut={handleCircleMouseOut} - options={{ - fillColor: circleColor, - fillOpacity: 0.35, - strokeColor: circleColor, - strokeOpacity: 0.8, - strokeWeight: 2, - }} - /> - ); - })} - {hoveredCircle !== null && ( - -
- Trash: {dumpFills[hoveredCircle]}% -
- - )} - - + return ( + handleCircleHover(index)} + onMouseOut={handleCircleMouseOut} + options={{ + fillColor: circleColor, + fillOpacity: 0.35, + strokeColor: circleColor, + strokeOpacity: 0.8, + strokeWeight: 2, + }} + /> + ); + })} + {hoveredCircle !== null && ( + +
Trash: {dumpFills[hoveredCircle]}%
+ + )} + + ); }; From 41e18eb70c7d63a0b0203a63eaf3195fa9553398 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:32:27 +0600 Subject: [PATCH 6/8] Showed landfill storage info from backend and also finalized landfill dashboard, bill & storage section --- .../landFillManagerContents/Dashboard.tsx | 51 +++++- .../landFillManagerContents/Storage.tsx | 162 ++++++++++++++---- client/components/maps/OptimizedRoute.tsx | 51 +++--- .../modals/billControl/BillCreationModal.tsx | 6 +- client/data/apiRoutes.ts | 1 + .../landFillDashboard/getLandFillDataById.ts | 58 +++++++ 6 files changed, 255 insertions(+), 74 deletions(-) create mode 100644 client/hooks/landFillDashboard/getLandFillDataById.ts diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Dashboard.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Dashboard.tsx index 919506a..1c9ba51 100644 --- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Dashboard.tsx +++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Dashboard.tsx @@ -1,21 +1,60 @@ +"use client" import { Button } from "@/components/ui/button"; import EmptyFillContainer from "../../cards/EmptyFillContainer"; import { Cog, Download, Send, Upload, UserRoundCog } from "lucide-react"; import LanfFillUpcomingVehiclesInDashboard from "../../../dataTables/LandFillUpcomingVehicleInDashboard"; +import PendingBillList from "@/components/dataTables/PendingBillList"; +import { landfillId } from "@/data/cookieNames"; +import useGetLandfillDatabyID from "@/hooks/landFillDashboard/getLandFillDataById"; +import { getCookie } from "@/lib/cookieFunctions"; +import { useEffect } from "react"; +import { AreaChart, PieChart } from "@mantine/charts"; export default function LandfillManagerDashboard() { + + const { getLandfillDatabyID, landfillData } = useGetLandfillDatabyID(); + + + useEffect(() => { + getLandfillDatabyID(getCookie(landfillId)) + }, []); + + useEffect(() => { + // alert(JSON.stringify(landfillData)) + }, [landfillData]); + return (
-
-
- -
+
- CURRENT STORAGE + +
+ {" "} +
STORAGE STATUS OF
OF {(landfillData?.name)?.toUpperCase()}
+
+ {" "} + {landfillData?.graphData?.emptyPercentage}% EMPTY +
+ {landfillData?.graphData?.fullPercentage}% FULL +
+
+ {(landfillData?.graphData?.empty !== undefined && landfillData?.graphData?.full !== undefined) ? : "loading..."} +
- PENDING BILLS + +
+
+
diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx index fd2cad1..71ff7e3 100644 --- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx +++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx @@ -1,60 +1,154 @@ "use client"; import { Button } from "@/components/ui/button"; -import { Cog, UserRoundCog } from "lucide-react"; +import "@mantine/charts/styles.css"; import EmptyFillContainer from "../../cards/EmptyFillContainer"; import { AllStsMapShow } from "@/components/maps/AllStsShow"; import useGetAllSTS from "@/hooks/stsdata/useGetAllSTS"; import { use, useEffect, useState } from "react"; import GoogleMapComponent from "@/components/maps/GoogleMap"; +// import PieChart from "@/components/graphs/PieChart"; +import BarChart from "@/components/graphs/BarChart"; +import { AreaChart, PieChart } from "@mantine/charts"; +import { landfillId } from "@/data/cookieNames"; +import useGetLandfillDatabyID from "@/hooks/landFillDashboard/getLandFillDataById"; +import { getCookie } from "@/lib/cookieFunctions"; export default function LandfillManagerStorageData() { - const { getAllSTS, stsCoordinate, storagePercentage } = useGetAllSTS(); + const { getAllSTS, stsCoordinate, storagePercentage } = useGetAllSTS(); + const { getLandfillDatabyID, landfillData } = useGetLandfillDatabyID(); + useEffect(() => { getAllSTS(); + getLandfillDatabyID(getCookie(landfillId)) }, []); - useEffect(() => { - }, [stsCoordinate, storagePercentage]); + useEffect(() => { + // alert(JSON.stringify(landfillData)) + }, [landfillData]); return (
-
-

Storage

-
-
- - -
-
-
-
+
+
- - +
-
- Storage history -
-
- Dumping graph +
+ +
+ {" "} +
STORAGE STATUS OF
+
OF {(landfillData?.name)?.toUpperCase()} {" "}
+
+ {" "} + {landfillData?.graphData?.emptyPercentage}% EMPTY +
+
+ {" "} + {landfillData?.graphData?.fullPercentage}% FULL{" "} +
+
+ {(landfillData?.graphData?.empty !== undefined && landfillData?.graphData?.full !== undefined) ? : "loading..."} +
-
- storage status pie +
+ + TOTAL WEIGHT HISTOTY + +
-
- Storage graph +
+ + WEEKLY INCOMING WASTE HISTORY + +
diff --git a/client/components/maps/OptimizedRoute.tsx b/client/components/maps/OptimizedRoute.tsx index 190610e..6c25786 100644 --- a/client/components/maps/OptimizedRoute.tsx +++ b/client/components/maps/OptimizedRoute.tsx @@ -29,16 +29,15 @@ import { ChevronDownIcon } from "@chakra-ui/icons"; const center = { lat: 23.7244018, lng: 90.3887196 }; type StsRouteType = { - coordinate: string, - name: string, -} + coordinate: string; + name: string; +}; type MapProps = { coordinates: StsRouteType[]; -} - +}; -const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ +const OptimizedRouteMap: React.FC = ({ coordinates }) => { const [routeType, setRouteType] = useState( "Location Based Optimal Route" ); @@ -54,7 +53,7 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ const [allCoordinates, setAllCoordinates] = useState([]); const [landFilCoord, setLandFillCoord] = useState({ coordinate: "23.7244018, 90.3887196", - name: "Amin Bazar" + name: "Amin Bazar", }); const suggestionsList: string[] = [ @@ -66,16 +65,14 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ "Gulistan STS", "Rampura STS", ]; - + useEffect(() => { - const coordinateArray: string[] = coordinates.map(route => route.name); + const coordinateArray: string[] = coordinates.map((route) => route.name); setAllCoordinates(coordinateArray); - -}, [coordinates]); + }, [coordinates]); const landfillList: string[] = ["Amin Bazar"]; - //input studds const handleChangeInputType = () => { @@ -146,27 +143,26 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ } const getSTSCoodrdinateByName = (stsName: string): string => { - const vehicle = coordinates.find(sts => sts.name === stsName); + const vehicle = coordinates.find((sts) => sts.name === stsName); if (vehicle) { - return vehicle.coordinate.toString(); + return vehicle.coordinate.toString(); } - + // If vehicle is not found, return undefined return "no vehicle"; -}; - + }; async function calculateRoute() { - if( routeType === "Location Based Optimal Route"){ - if ( + if (routeType === "Location Based Optimal Route") { + if ( !originRef.current || !destinationRef.current || originRef.current.value === "" || - destinationRef.current.value === "") { + destinationRef.current.value === "" + ) { return; } - const directionsService = new google.maps.DirectionsService(); const results = await directionsService.route({ origin: originRef.current.value, @@ -179,11 +175,10 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ setDistance(results.routes[0].legs[0].distance?.text || ""); setDuration(results.routes[0].legs[0].duration?.text || ""); } - }else{ - + } else { const stsCoord = getSTSCoodrdinateByName(searchTerm); const newString = stsCoord.substring(0, 11); - console.log(stsCoord); + console.log(stsCoord); const directionsService = new google.maps.DirectionsService(); const results = await directionsService.route({ origin: stsCoord, @@ -196,13 +191,7 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ setDistance(results.routes[0].legs[0].distance?.text || ""); setDuration(results.routes[0].legs[0].duration?.text || ""); } - } - - - - - } function clearRoute() { @@ -358,6 +347,6 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{ ); -} +}; export default OptimizedRouteMap; diff --git a/client/components/modals/billControl/BillCreationModal.tsx b/client/components/modals/billControl/BillCreationModal.tsx index 1cb45d6..ece447f 100644 --- a/client/components/modals/billControl/BillCreationModal.tsx +++ b/client/components/modals/billControl/BillCreationModal.tsx @@ -12,7 +12,7 @@ import { import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import React, { use, useEffect, useState } from "react"; -import { EditIcon, Trash } from "lucide-react"; +import { EditIcon, Ghost, Receipt, Trash } from "lucide-react"; import deleteUser from "@/hooks/user_data/deleteUser"; import { Select, @@ -40,8 +40,8 @@ export const BillCreationModal = ({ tripInfo }: { tripInfo: Trip }) => { return ( - diff --git a/client/data/apiRoutes.ts b/client/data/apiRoutes.ts index ad3e4dd..7a766df 100644 --- a/client/data/apiRoutes.ts +++ b/client/data/apiRoutes.ts @@ -21,6 +21,7 @@ export const apiRoutes = { }, }, landfill: { + getbyId: `${baseUrl}/landfills/`, create: `${baseUrl}/landfills/create`, getAll: `${baseUrl}/landfills`, delete: `${baseUrl}/landfills/`, diff --git a/client/hooks/landFillDashboard/getLandFillDataById.ts b/client/hooks/landFillDashboard/getLandFillDataById.ts new file mode 100644 index 0000000..9f3e48c --- /dev/null +++ b/client/hooks/landFillDashboard/getLandFillDataById.ts @@ -0,0 +1,58 @@ +"use client"; +import { apiRoutes } from "@/data/apiRoutes"; +import { jwtToken } from "@/data/cookieNames"; +import { admin, landfillManager, stsManager, unassigned } from "@/data/roles"; +import { getCookie } from "@/lib/cookieFunctions"; +import axios from "axios"; +import { useState, useEffect, use } from "react"; +import { set } from "react-hook-form"; + +type LandFill = { + id: string; + name: string; + capacity: number; + currentTotalWaste: number; + latitude: string; + longitude: string; + graphData: { + empty: number; + full: number; + emptyPercentage: number; + fullPercentage: number; + }; +}; + +export default function useGetLandfillDatabyID() { + const [landfillData, setLandfillData] = useState(null); + + async function getLandfillDatabyID(landfillId: string) { + try { + const res = await axios.get(apiRoutes.landfill.getbyId + landfillId, { + headers: { + Authorization: `Bearer ${await getCookie(jwtToken)}`, + }, + }); + setLandfillData({ + id: res.data.landfill.id, + name: res.data.landfill.name, + capacity: parseFloat(res.data.landfill.capacity), + currentTotalWaste: parseFloat(res.data.landfill.currentTotalWaste), + latitude: res.data.landfill.latitude, + longitude: res.data.landfill.longitude, + graphData: { + empty: res.data.graphData.empty, + full: res.data.graphData.full, + emptyPercentage: res.data.graphData.emptyPercentage, + fullPercentage: res.data.graphData.fullPercentage, + }, + }); + console.log(landfillData); + return landfillData; + } catch (error: any) { + alert("Error fetching landfill data... Are you authorized?"); + console.log(error.message); + } + } + + return { landfillData, getLandfillDatabyID }; +} From 5bc613e5095c471b6c2c4f77df212a0d0a386e02 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 08:47:09 +0600 Subject: [PATCH 7/8] landfill manager admin panel completed --- .../landFillManagerContents/DumpEntry.tsx | 131 +++++------------- 1 file changed, 31 insertions(+), 100 deletions(-) diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx index 0fb2970..4129fb1 100644 --- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx +++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx @@ -1,111 +1,42 @@ +"use client"; +import GoogleMapComponent from "@/components/maps/GoogleMap"; +import EmptyFillContainer from "../../cards/EmptyFillContainer"; +import LanfFillUpcomingVehicles from "../../../dataTables/LandFillUpcomingVehicle"; +import LandFillDeliveredVehicles from "../../../dataTables/LandFillDeliveredVehicles"; +import { AllStsMapShow } from "@/components/maps/AllStsShow"; import { Button } from "@/components/ui/button"; -import { - Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, - CardFooter, -} from "@/components/ui/card"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; +import { Cog, LogOut } from "lucide-react"; + export default function LandfillManagerDumpEntries() { + return ( +
-
-

SETTINGS

+
+

DUMP ENTRIES

+
+
+ +
-
-
- {/*

ADD NEW DUMP ENTRY

*/} -
-

ADD STORAGE ENTRIES

- - - Create project - - Deploy your new project in one-click. - - - -
-
-
- - -
-
- - -
-
-
- - - - - - -
-
-

ADD DUMP ENTRIES

- - - Create project - - Deploy your new project in one-click. - - - -
-
-
- - -
-
- - -
-
-
- - - - - - +
+
+
+ + +
+
+ + + +
- ); + ); } From 389f1aee6661dead7a4501e80b213c76cf5655c6 Mon Sep 17 00:00:00 2001 From: codermehraj Date: Sat, 30 Mar 2024 10:02:32 +0600 Subject: [PATCH 8/8] update role info bug fixed --- client/hooks/user_data/editUser.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/hooks/user_data/editUser.tsx b/client/hooks/user_data/editUser.tsx index a7aabe4..6265a02 100644 --- a/client/hooks/user_data/editUser.tsx +++ b/client/hooks/user_data/editUser.tsx @@ -17,6 +17,13 @@ export default async function editUser(user: User) { Authorization: `Bearer ${await getCookie(jwtToken)}`, }, }); + const res2 = res.data.roleName !== user.role ? await axios.put(apiRoutes.user.edit + user.id + "/roles", { + roleName: user.role, + }, { + headers: { + Authorization: `Bearer ${await getCookie(jwtToken)}`, + }, + }) : null; return "user updated successfully"; } catch (error: any) { return error.message?.toString() || "error updating user. You may not have the required permissions.";