diff --git a/.gitignore b/.gitignore index 9a2f7ecc1..3e33d8a2b 100644 --- a/.gitignore +++ b/.gitignore @@ -130,3 +130,5 @@ test-output.txt server/job/test/fixtures .github +_reference/ragmate/.ragmate.env +docker_data diff --git a/client/package-lock.json b/client/package-lock.json index 189f1fbe3..a9c4eca5d 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -20,8 +20,8 @@ "@firebase/messaging": "^0.12.21", "@jsreport/browser-client": "^3.1.0", "@reduxjs/toolkit": "^2.8.2", - "@sentry/cli": "^2.46.0", - "@sentry/react": "^9.27.0", + "@sentry/cli": "^2.47.1", + "@sentry/react": "^9.38.0", "@sentry/vite-plugin": "^3.5.0", "@splitsoftware/splitio-react": "^2.3.1", "@tanem/react-nprogress": "^5.0.53", @@ -42,7 +42,7 @@ "i18next": "^24.2.3", "i18next-browser-languagedetector": "^8.1.0", "immutability-helper": "^3.1.1", - "libphonenumber-js": "^1.12.9", + "libphonenumber-js": "^1.12.10", "logrocket": "^9.0.2", "markerjs2": "^2.32.4", "memoize-one": "^6.0.0", @@ -91,11 +91,11 @@ "@ant-design/icons": "^6.0.0", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-react": "^7.27.1", - "@dotenvx/dotenvx": "^1.44.1", + "@dotenvx/dotenvx": "^1.47.5", "@emotion/babel-plugin": "^11.13.5", "@emotion/react": "^11.14.0", - "@eslint/js": "^9.28.0", - "@playwright/test": "^1.51.1", + "@eslint/js": "^9.31.0", + "@playwright/test": "^1.54.1", "@sentry/webpack-plugin": "^3.5.0", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", @@ -111,7 +111,7 @@ "jsdom": "^26.0.0", "memfs": "^4.17.2", "os-browserify": "^0.3.0", - "playwright": "^1.51.1", + "playwright": "^1.54.1", "react-error-overlay": "^6.1.0", "redux-logger": "^3.0.6", "source-map-explorer": "^2.5.3", @@ -2588,9 +2588,9 @@ } }, "node_modules/@dotenvx/dotenvx": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.44.1.tgz", - "integrity": "sha512-j1QImCqf/XJmhIjC1OPpgiZV9g370HG9MNT9s/CDwCKsoYzNCPEKK+GfsidahJx7yIlBbm+4dPLlGec+bKn7oA==", + "version": "1.47.5", + "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.47.5.tgz", + "integrity": "sha512-FtDgJyqOXmkj+BTU0qcE4Iq2HKjrEH6ZhRMc7m8fmOwstf1Ms9/9lbLNzyiNqyQrEnVr38W8PTTWMbDB3IX5og==", "dev": true, "license": "BSD-3-Clause", "dependencies": { @@ -2605,8 +2605,7 @@ "which": "^4.0.0" }, "bin": { - "dotenvx": "src/cli/dotenvx.js", - "git-dotenvx": "src/cli/dotenvx.js" + "dotenvx": "src/cli/dotenvx.js" }, "funding": { "url": "https://dotenvx.com" @@ -2913,9 +2912,9 @@ } }, "node_modules/@eslint/js": { - "version": "9.28.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.28.0.tgz", - "integrity": "sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==", + "version": "9.31.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz", + "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==", "dev": true, "license": "MIT", "engines": { @@ -3519,13 +3518,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.52.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz", - "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==", + "version": "1.54.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.1.tgz", + "integrity": "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright": "1.52.0" + "playwright": "1.54.1" }, "bin": { "playwright": "cli.js" @@ -4469,50 +4468,50 @@ "license": "MIT" }, "node_modules/@sentry-internal/browser-utils": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.27.0.tgz", - "integrity": "sha512-SJa7f6Ct1BzP8rWEomnshSGN1CmT+axNKvT+StrbFPD6AyHnYfFLJpKgc2iToIJHB/pmeuOI9dUwqtzVx+5nSw==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.38.0.tgz", + "integrity": "sha512-BkTaMPm4pjgoT1qNsLX5e3HjTCwBmsR/OGyKHFpMUnN+HINi9L1nGGbRroOEtfU49vMKi8MlM7HpuzzYV/3D1A==", "license": "MIT", "dependencies": { - "@sentry/core": "9.27.0" + "@sentry/core": "9.38.0" }, "engines": { "node": ">=18" } }, "node_modules/@sentry-internal/feedback": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.27.0.tgz", - "integrity": "sha512-e7L8eG0y63RulN352lmafoCCfQGg4jLVT8YLx6096eWu/YKLkgmVpgi8livsT5WREnH+HB+iFSrejOwK7cRkhw==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.38.0.tgz", + "integrity": "sha512-vDVufE9WLqHCmUL2sa3nIKz5ARaBdaqCG+b9/hwkmkLnqaQUBiHE+ArxoYuc2toWqaELxSHcMDp2ajkeDBQeLA==", "license": "MIT", "dependencies": { - "@sentry/core": "9.27.0" + "@sentry/core": "9.38.0" }, "engines": { "node": ">=18" } }, "node_modules/@sentry-internal/replay": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.27.0.tgz", - "integrity": "sha512-n2kO1wOfCG7GxkMAqbYYkpgTqJM5tuVLdp0JuNCqTOLTXWvw6svWGaYKlYpKUgsK9X/GDzJYSXZmfe+Dbg+FJQ==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.38.0.tgz", + "integrity": "sha512-LLZuQk5Khvco+EYKg2+woiSNMLyR4XZeoAdgvAa+HZriFoAQR6GFNAuu+TlynCDDt2H+w90HcIAV66NWFy8QoQ==", "license": "MIT", "dependencies": { - "@sentry-internal/browser-utils": "9.27.0", - "@sentry/core": "9.27.0" + "@sentry-internal/browser-utils": "9.38.0", + "@sentry/core": "9.38.0" }, "engines": { "node": ">=18" } }, "node_modules/@sentry-internal/replay-canvas": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.27.0.tgz", - "integrity": "sha512-44rVSt3LCH6qePYRQrl4WUBwnkOk9dzinmnKmuwRksEdDOkVq5KBRhi/IDr7omwSpX8C+KrX5alfKhOx1cP0gQ==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.38.0.tgz", + "integrity": "sha512-87BZDTjszdaSB5p0CTiVav2QgxLMAab/6q1jcIUBzNsrXHZbqcoMaJmd446mCsQkR6wAccM/uAxJlgh9FIqA8w==", "license": "MIT", "dependencies": { - "@sentry-internal/replay": "9.27.0", - "@sentry/core": "9.27.0" + "@sentry-internal/replay": "9.38.0", + "@sentry/core": "9.38.0" }, "engines": { "node": ">=18" @@ -4528,16 +4527,16 @@ } }, "node_modules/@sentry/browser": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.27.0.tgz", - "integrity": "sha512-geR3lhRJOmUQqi1WgovLSYcD/f66zYnctdnDEa7j1BW2XIB1nlTJn0mpYyAHghXKkUN/pBpp1Z+Jk0XlVwFYVg==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.38.0.tgz", + "integrity": "sha512-ZUIeU+3VUD3BntYgB2DkhBD6N9oybsuk1+U7yK1ezHIw/nvkPILcH6MZgPs0Km0RcWWozMUDSbdZNud9/isYmw==", "license": "MIT", "dependencies": { - "@sentry-internal/browser-utils": "9.27.0", - "@sentry-internal/feedback": "9.27.0", - "@sentry-internal/replay": "9.27.0", - "@sentry-internal/replay-canvas": "9.27.0", - "@sentry/core": "9.27.0" + "@sentry-internal/browser-utils": "9.38.0", + "@sentry-internal/feedback": "9.38.0", + "@sentry-internal/replay": "9.38.0", + "@sentry-internal/replay-canvas": "9.38.0", + "@sentry/core": "9.38.0" }, "engines": { "node": ">=18" @@ -4728,9 +4727,9 @@ } }, "node_modules/@sentry/cli": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.46.0.tgz", - "integrity": "sha512-nqoPl7UCr446QFkylrsRrUXF51x8Z9dGquyf4jaQU+OzbOJMqclnYEvU6iwbwvaw3tu/2DnoZE/Og+Nq1h63sA==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.47.1.tgz", + "integrity": "sha512-t45lfyyMYs6L1oFUmtYuLDJFf0o6a0IGbPJvzOZcP3lmidouEG5nloBF6FG39AkL29pwrS2WN41j2gyDjrQ71g==", "hasInstallScript": true, "license": "BSD-3-Clause", "dependencies": { @@ -4747,20 +4746,20 @@ "node": ">= 10" }, "optionalDependencies": { - "@sentry/cli-darwin": "2.46.0", - "@sentry/cli-linux-arm": "2.46.0", - "@sentry/cli-linux-arm64": "2.46.0", - "@sentry/cli-linux-i686": "2.46.0", - "@sentry/cli-linux-x64": "2.46.0", - "@sentry/cli-win32-arm64": "2.46.0", - "@sentry/cli-win32-i686": "2.46.0", - "@sentry/cli-win32-x64": "2.46.0" + "@sentry/cli-darwin": "2.47.1", + "@sentry/cli-linux-arm": "2.47.1", + "@sentry/cli-linux-arm64": "2.47.1", + "@sentry/cli-linux-i686": "2.47.1", + "@sentry/cli-linux-x64": "2.47.1", + "@sentry/cli-win32-arm64": "2.47.1", + "@sentry/cli-win32-i686": "2.47.1", + "@sentry/cli-win32-x64": "2.47.1" } }, "node_modules/@sentry/cli-darwin": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.46.0.tgz", - "integrity": "sha512-5Ll+e5KAdIk9OYiZO8aifMBRNWmNyPjSqdjaHlBC1Qfh7pE3b1zyzoHlsUazG0bv0sNrSGea8e7kF5wIO1hvyg==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.47.1.tgz", + "integrity": "sha512-Vq+8Hs1AR5MFYCI8vkz+rdRJmcNgUf8b8dW8aSLYCHy7wS/X61OB00LupLaaaoN5c/xemb0rZCg4M0ftUqB5Kw==", "license": "BSD-3-Clause", "optional": true, "os": [ @@ -4771,9 +4770,9 @@ } }, "node_modules/@sentry/cli-linux-arm": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.46.0.tgz", - "integrity": "sha512-WRrLNq/TEX/TNJkGqq6Ad0tGyapd5dwlxtsPbVBrIdryuL1mA7VCBoaHBr3kcwJLsgBHFH0lmkMee2ubNZZdkg==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.47.1.tgz", + "integrity": "sha512-Wkcvr0LYP1XMSoaczQnUtOSZPfyBzdGk7wQyloYWyMv9oZWJYkt1wYI0/FaNM+MIX15RqEAx0nI5CjotLMlj8w==", "cpu": [ "arm" ], @@ -4789,9 +4788,9 @@ } }, "node_modules/@sentry/cli-linux-arm64": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.46.0.tgz", - "integrity": "sha512-OEJN8yAjI9y5B4telyqzu27Hi3+S4T8VxZCqJz1+z2Mp0Q/MZ622AahVPpcrVq/5bxrnlZR16+lKh8L1QwNFPg==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.47.1.tgz", + "integrity": "sha512-Kuda8/BFMVyqYayQjP0NQnxnAz5Xpfo2crG1/RRXF9lYQ9O/5YRb3dvlMPX6WasplCzajaSuLrYt/LXcs4McwA==", "cpu": [ "arm64" ], @@ -4807,9 +4806,9 @@ } }, "node_modules/@sentry/cli-linux-i686": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.46.0.tgz", - "integrity": "sha512-xko3/BVa4LX8EmRxVOCipV+PwfcK5Xs8lP6lgF+7NeuAHMNL4DqF6iV9rrN8gkGUHCUI9RXSve37uuZnFy55+Q==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.47.1.tgz", + "integrity": "sha512-WB3FbRjeJmKHhGc5CftaFFJfFc7c+Mu/XKwbI8Es/9f65bVWdB6BA2tH7aHyoAQngA++1ZVXUJwUpxYPNxQEag==", "cpu": [ "x86", "ia32" @@ -4826,9 +4825,9 @@ } }, "node_modules/@sentry/cli-linux-x64": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.46.0.tgz", - "integrity": "sha512-hJ1g5UEboYcOuRia96LxjJ0jhnmk8EWLDvlGnXLnYHkwy3ree/L7sNgdp/QsY8Z4j2PGO5f22Va+UDhSjhzlfQ==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.47.1.tgz", + "integrity": "sha512-C+3GJLDpZQMO45toUKiF4bPZpxQiU5/10LtZg2vhpUyyzFGNseVQO/Bsnu9hG/LVjYGLkTgEaorl1liRQsfKVg==", "cpu": [ "x64" ], @@ -4844,9 +4843,9 @@ } }, "node_modules/@sentry/cli-win32-arm64": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.46.0.tgz", - "integrity": "sha512-mN7cpPoCv2VExFRGHt+IoK11yx4pM4ADZQGEso5BAUZ5duViXB2WrAXCLd8DrwMnP0OE978a7N8OtzsFqjkbNA==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.47.1.tgz", + "integrity": "sha512-K3yb1yLvA6Lh0UaXjsU6lP/2uOMkZ47cVq0dFxL/hEr4fBHRkXuvg3oOJNDkJ2xXt2W2s7AIa83T2EisZ0a/NQ==", "cpu": [ "arm64" ], @@ -4860,9 +4859,9 @@ } }, "node_modules/@sentry/cli-win32-i686": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.46.0.tgz", - "integrity": "sha512-6F73AUE3lm71BISUO19OmlnkFD5WVe4/wA1YivtLZTc1RU3eUYJLYxhDfaH3P77+ycDppQ2yCgemLRaA4A8mNQ==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.47.1.tgz", + "integrity": "sha512-wk+6IIT+VT28c9uPe9PDzxdh+OiTEDb/0PIdFv1khSfAmEuVSNWzuDWsra7MnA7OPfgzzNDPkP4HRW1CKb3Xiw==", "cpu": [ "x86", "ia32" @@ -4877,9 +4876,9 @@ } }, "node_modules/@sentry/cli-win32-x64": { - "version": "2.46.0", - "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.46.0.tgz", - "integrity": "sha512-yuGVcfepnNL84LGA0GjHzdMIcOzMe0bjPhq/rwPsPN+zu11N+nPR2wV2Bum4U0eQdqYH3iAlMdL5/BEQfuLJww==", + "version": "2.47.1", + "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.47.1.tgz", + "integrity": "sha512-blseDhuUJDsb+3Ku9dvR4b0JO4nunRokF/9jzW+qHqTha7UHE2kQYXkCfsoDg65juvJFeKeQASYV7VphEJgIGQ==", "cpu": [ "x64" ], @@ -4914,22 +4913,22 @@ } }, "node_modules/@sentry/core": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.27.0.tgz", - "integrity": "sha512-Zb2SSAdWXQjTem+sVWrrAq9L6YYfxyoTwtapaE6C6qZBR5C8Uak0wcYww8StaCFH7dDA/PSW+VxOwjNXocrQHQ==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.38.0.tgz", + "integrity": "sha512-dUwSv1VXDfsrcY69a/cgZNDsFal6iYOf0C4T+/ylpmgYp5SVe3vQK+2FLXUMuvgnOf+kHO6IeW0RhnhSyUflmA==", "license": "MIT", "engines": { "node": ">=18" } }, "node_modules/@sentry/react": { - "version": "9.27.0", - "resolved": "https://registry.npmjs.org/@sentry/react/-/react-9.27.0.tgz", - "integrity": "sha512-UT7iaGEwTqe06O4mgHfKGTRBHg+U0JSI/id+QxrOji6ksosOsSnSC3Vdq+gPs9pzCCFE+6+DkH6foYNNLIN0lw==", + "version": "9.38.0", + "resolved": "https://registry.npmjs.org/@sentry/react/-/react-9.38.0.tgz", + "integrity": "sha512-MGnrzEJdwCEhGnQrFvljCGM+19agsC5ONAExRM+TuCVjeDJ/ifegZ4eEUyaGHt7YyjAUszddSbWbpEBUg2zBvQ==", "license": "MIT", "dependencies": { - "@sentry/browser": "9.27.0", - "@sentry/core": "9.27.0", + "@sentry/browser": "9.38.0", + "@sentry/core": "9.38.0", "hoist-non-react-statics": "^3.3.2" }, "engines": { @@ -11499,9 +11498,9 @@ } }, "node_modules/libphonenumber-js": { - "version": "1.12.9", - "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.9.tgz", - "integrity": "sha512-VWwAdNeJgN7jFOD+wN4qx83DTPMVPPAUyx9/TUkBXKLiNkuWWk6anV0439tgdtwaJDrEdqkvdN22iA6J4bUCZg==", + "version": "1.12.10", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.10.tgz", + "integrity": "sha512-E91vHJD61jekHHR/RF/E83T/CMoaLXT7cwYA75T4gim4FZjnM6hbJjVIGg7chqlSqRsSvQ3izGmOjHy1SQzcGQ==", "license": "MIT" }, "node_modules/lines-and-columns": { @@ -13340,13 +13339,13 @@ } }, "node_modules/playwright": { - "version": "1.52.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz", - "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==", + "version": "1.54.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.1.tgz", + "integrity": "sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.52.0" + "playwright-core": "1.54.1" }, "bin": { "playwright": "cli.js" @@ -13359,9 +13358,9 @@ } }, "node_modules/playwright-core": { - "version": "1.52.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz", - "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==", + "version": "1.54.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz", + "integrity": "sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==", "dev": true, "license": "Apache-2.0", "bin": { diff --git a/client/package.json b/client/package.json index b8de01625..4175749a2 100644 --- a/client/package.json +++ b/client/package.json @@ -19,8 +19,8 @@ "@firebase/messaging": "^0.12.21", "@jsreport/browser-client": "^3.1.0", "@reduxjs/toolkit": "^2.8.2", - "@sentry/cli": "^2.46.0", - "@sentry/react": "^9.27.0", + "@sentry/cli": "^2.47.1", + "@sentry/react": "^9.38.0", "@sentry/vite-plugin": "^3.5.0", "@splitsoftware/splitio-react": "^2.3.1", "@tanem/react-nprogress": "^5.0.53", @@ -41,7 +41,7 @@ "i18next": "^24.2.3", "i18next-browser-languagedetector": "^8.1.0", "immutability-helper": "^3.1.1", - "libphonenumber-js": "^1.12.9", + "libphonenumber-js": "^1.12.10", "logrocket": "^9.0.2", "markerjs2": "^2.32.4", "memoize-one": "^6.0.0", @@ -131,11 +131,11 @@ "@ant-design/icons": "^6.0.0", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-react": "^7.27.1", - "@dotenvx/dotenvx": "^1.44.1", + "@dotenvx/dotenvx": "^1.47.5", "@emotion/babel-plugin": "^11.13.5", "@emotion/react": "^11.14.0", - "@eslint/js": "^9.28.0", - "@playwright/test": "^1.51.1", + "@eslint/js": "^9.31.0", + "@playwright/test": "^1.54.1", "@sentry/webpack-plugin": "^3.5.0", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", @@ -151,7 +151,7 @@ "jsdom": "^26.0.0", "memfs": "^4.17.2", "os-browserify": "^0.3.0", - "playwright": "^1.51.1", + "playwright": "^1.54.1", "react-error-overlay": "^6.1.0", "redux-logger": "^3.0.6", "source-map-explorer": "^2.5.3", diff --git a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx b/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx index 0da329d6f..ac97c8e81 100644 --- a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx +++ b/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx @@ -1,5 +1,5 @@ import { Select } from "antd"; -import React, { forwardRef } from "react"; +import { forwardRef } from "react"; import { useTranslation } from "react-i18next"; import InstanceRenderMgr from "../../utils/instanceRenderMgr"; @@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, item.oem_partno ? ` - ${item.oem_partno}` : "" }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(), label: ( -
+
{`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${ item.oem_partno ? ` - ${item.oem_partno}` : "" diff --git a/client/src/components/contract-status-select/contract-status-select.component.jsx b/client/src/components/contract-status-select/contract-status-select.component.jsx index 8bd048195..3a4ee82ee 100644 --- a/client/src/components/contract-status-select/contract-status-select.component.jsx +++ b/client/src/components/contract-status-select/contract-status-select.component.jsx @@ -1,10 +1,10 @@ -import React, { forwardRef, useEffect, useState } from "react"; +import { forwardRef, useEffect, useState } from "react"; import { Select } from "antd"; import { useTranslation } from "react-i18next"; const { Option } = Select; -const ContractStatusComponent = ({ value, onChange }, ref) => { +const ContractStatusComponent = ({ value, onChange }) => { const [option, setOption] = useState(value); const { t } = useTranslation(); diff --git a/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx b/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx index ffe1c1f97..a189e0660 100644 --- a/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx +++ b/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx @@ -1,5 +1,5 @@ import { Slider } from "antd"; -import React, { forwardRef } from "react"; +import { forwardRef } from "react"; import { useTranslation } from "react-i18next"; const CourtesyCarFuelComponent = (props, ref) => { diff --git a/client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx b/client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx new file mode 100644 index 000000000..12c2f6569 --- /dev/null +++ b/client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx @@ -0,0 +1,411 @@ +import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons"; +import { Card, Space, Switch, Table, Tooltip, Typography } from "antd"; +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; +import { TimeFormatter } from "../../../utils/DateFormatter"; +import { onlyUnique } from "../../../utils/arrayHelper"; +import dayjs from "../../../utils/day"; +import { alphaSort, dateSort } from "../../../utils/sorters"; +import useLocalStorage from "../../../utils/useLocalStorage"; +import ChatOpenButton from "../../chat-open-button/chat-open-button.component"; +import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../../owner-name-display/owner-name-display.component"; +import DashboardRefreshRequired from "../refresh-required.component"; + +export default function DashboardScheduledDeliveryToday({ data, ...cardProps }) { + const { t } = useTranslation(); + const [state, setState] = useState({ + sortedInfo: {}, + filteredInfo: {} + }); + const [isTvModeScheduledDelivery, setIsTvModeScheduledDelivery] = useLocalStorage("isTvModeScheduledDelivery", false); + if (!data) return null; + if (!data.scheduled_delivery_today) return ; + + const scheduledDeliveryToday = data.scheduled_delivery_today.map((item) => { + const joblines_body = item.joblines + ? item.joblines.filter((l) => l.mod_lbr_ty !== "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0) + : 0; + const joblines_ref = item.joblines + ? item.joblines.filter((l) => l.mod_lbr_ty === "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0) + : 0; + return { + ...item, + joblines_body, + joblines_ref + }; + }); + + const tvFontSize = 18; + const tvFontWeight = "bold"; + + const tvColumns = [ + { + title: t("jobs.fields.scheduled_delivery"), + dataIndex: "scheduled_delivery", + key: "scheduled_delivery", + ellipsis: true, + sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery), + sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order, + render: (text, record) => ( + + {record.scheduled_delivery} + + ) + }, + { + title: t("jobs.fields.ro_number"), + dataIndex: "ro_number", + key: "ro_number", + sorter: (a, b) => alphaSort(a.ro_number, b.ro_number), + sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, + render: (text, record) => ( + e.stopPropagation()}> + + + {record.ro_number || t("general.labels.na")} + {record.production_vars && record.production_vars.alert ? ( + + ) : null} + {record.suspended && } + {record.iouparent && ( + + + + )} + + + + ) + }, + { + title: t("jobs.fields.owner"), + dataIndex: "owner", + key: "owner", + ellipsis: true, + sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)), + sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order, + render: (text, record) => { + return record.ownerid ? ( + e.stopPropagation()}> + + + + + ) : ( + + + + ); + } + }, + { + title: t("jobs.fields.vehicle"), + dataIndex: "vehicle", + key: "vehicle", + ellipsis: true, + sorter: (a, b) => + alphaSort( + `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`, + `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}` + ), + sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, + render: (text, record) => { + return record.vehicleid ? ( + e.stopPropagation()}> + + {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`} + + + ) : ( + {`${ + record.v_model_yr || "" + } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`} + ); + } + }, + { + title: t("appointments.fields.alt_transport"), + dataIndex: "alt_transport", + key: "alt_transport", + ellipsis: true, + sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport), + sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order, + filters: + (scheduledDeliveryToday && + scheduledDeliveryToday + .map((j) => j.alt_transport) + .filter(onlyUnique) + .map((s) => { + return { + text: s || t("dashboard.errors.atp"), + value: [s] + }; + }) + .sort((a, b) => alphaSort(a.text, b.text))) || + [], + onFilter: (value, record) => value.includes(record.alt_transport), + render: (text, record) => ( + {record.alt_transport} + ) + }, + { + title: t("jobs.fields.status"), + dataIndex: "status", + key: "status", + ellipsis: true, + sorter: (a, b) => alphaSort(a.status, b.status), + sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order, + filters: + (scheduledDeliveryToday && + scheduledDeliveryToday + .map((j) => j.status) + .filter(onlyUnique) + .map((s) => { + return { + text: s || t("dashboard.errors.status"), + value: [s] + }; + }) + .sort((a, b) => alphaSort(a.text, b.text))) || + [], + onFilter: (value, record) => value.includes(record.status), + render: (text, record) => {record.status} + }, + { + title: t("jobs.fields.lab"), + dataIndex: "joblines_body", + key: "joblines_body", + sorter: (a, b) => a.joblines_body - b.joblines_body, + sortOrder: state.sortedInfo.columnKey === "joblines_body" && state.sortedInfo.order, + align: "right", + render: (text, record) => ( + {record.joblines_body.toFixed(1)} + ) + }, + { + title: t("jobs.fields.lar"), + dataIndex: "joblines_ref", + key: "joblines_ref", + sorter: (a, b) => a.joblines_ref - b.joblines_ref, + sortOrder: state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order, + align: "right", + render: (text, record) => ( + {record.joblines_ref.toFixed(1)} + ) + } + ]; + + const columns = [ + { + title: t("jobs.fields.scheduled_delivery"), + dataIndex: "scheduled_delivery", + key: "scheduled_delivery", + ellipsis: true, + sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery), + sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order, + render: (text, record) => {record.scheduled_delivery} + }, + { + title: t("jobs.fields.ro_number"), + dataIndex: "ro_number", + key: "ro_number", + sorter: (a, b) => alphaSort(a.ro_number, b.ro_number), + sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, + render: (text, record) => ( + e.stopPropagation()}> + + {record.ro_number || t("general.labels.na")} + {record.production_vars && record.production_vars.alert ? ( + + ) : null} + {record.suspended && } + {record.iouparent && ( + + + + )} + + + ) + }, + { + title: t("jobs.fields.owner"), + dataIndex: "owner", + key: "owner", + ellipsis: true, + sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)), + sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order, + render: (text, record) => { + return record.ownerid ? ( + e.stopPropagation()}> + + + ) : ( + + + + ); + } + }, + { + title: t("dashboard.labels.phone"), + dataIndex: "ownr_ph", + key: "ownr_ph", + ellipsis: true, + responsive: ["md"], + render: (text, record) => ( + + + + + + ) + }, + { + title: t("jobs.fields.ownr_ea"), + dataIndex: "ownr_ea", + key: "ownr_ea", + ellipsis: true, + responsive: ["md"], + render: (text, record) => {record.ownr_ea} + }, + { + title: t("jobs.fields.vehicle"), + dataIndex: "vehicle", + key: "vehicle", + ellipsis: true, + sorter: (a, b) => + alphaSort( + `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`, + `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}` + ), + sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, + render: (text, record) => { + return record.vehicleid ? ( + e.stopPropagation()}> + {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`} + + ) : ( + {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`} + ); + } + }, + { + title: t("jobs.fields.ins_co_nm"), + dataIndex: "ins_co_nm", + key: "ins_co_nm", + ellipsis: true, + responsive: ["md"], + sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm), + sortOrder: state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order, + filters: + (scheduledDeliveryToday && + scheduledDeliveryToday + .map((j) => j.ins_co_nm) + .filter(onlyUnique) + .map((s) => { + return { + text: s || t("dashboard.errors.insco"), + value: [s] + }; + }) + .sort((a, b) => alphaSort(a.text, b.text))) || + [], + onFilter: (value, record) => value.includes(record.ins_co_nm) + }, + { + title: t("appointments.fields.alt_transport"), + dataIndex: "alt_transport", + key: "alt_transport", + ellipsis: true, + sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport), + sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order, + filters: + (scheduledDeliveryToday && + scheduledDeliveryToday + .map((j) => j.alt_transport) + .filter(onlyUnique) + .map((s) => { + return { + text: s || t("dashboard.errors.atp"), + value: [s] + }; + }) + .sort((a, b) => alphaSort(a.text, b.text))) || + [], + onFilter: (value, record) => value.includes(record.alt_transport) + } + ]; + + const handleTableChange = (pagination, filters, sorter) => { + setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); + }; + + return ( + + {t("general.labels.tvmode")} + setIsTvModeScheduledDelivery(!isTvModeScheduledDelivery)} + defaultChecked={isTvModeScheduledDelivery} + /> + + } + {...cardProps} + > +
+ + + + ); +} + +export const DashboardScheduledDeliveryTodayGql = ` + scheduled_delivery_today: jobs(where: { + date_invoiced: {_is_null: true}, + ro_number: {_is_null: false}, + voided: {_eq: false}, + scheduled_delivery: {_gte: "${dayjs().startOf("day").toISOString()}", + _lte: "${dayjs().endOf("day").toISOString()}"}}) { + alt_transport + clm_no + jobid: id + joblines(where: {removed: {_eq: false}}) { + mod_lb_hrs + mod_lbr_ty + } + ins_co_nm + iouparent + ownerid + ownr_co_nm + ownr_ea + ownr_fn + ownr_ln + ownr_ph1 + ownr_ph2 + production_vars + ro_number + scheduled_delivery + status + suspended + v_make_desc + v_model_desc + v_model_yr + v_vin + vehicleid + } +`; diff --git a/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx b/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx index d3caeaca2..05d76983e 100644 --- a/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx +++ b/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx @@ -1,11 +1,11 @@ import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons"; import { Card, Space, Switch, Table, Tooltip, Typography } from "antd"; -import dayjs from "../../../utils/day"; -import React, { useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { TimeFormatter } from "../../../utils/DateFormatter"; import { onlyUnique } from "../../../utils/arrayHelper"; +import dayjs from "../../../utils/day"; import { alphaSort, dateSort } from "../../../utils/sorters"; import useLocalStorage from "../../../utils/useLocalStorage"; import ChatOpenButton from "../../chat-open-button/chat-open-button.component"; @@ -169,7 +169,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Alt. Transport", + text: s || t("dashboard.errors.atp"), value: [s] }; }) @@ -313,7 +313,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Ins. Co.*", + text: s || t("dashboard.errors.insco"), value: [s] }; }) @@ -335,7 +335,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Alt. Transport", + text: s || t("dashboard.errors.atp"), value: [s] }; }) diff --git a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx index f83e2df5d..fdfcc53a5 100644 --- a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx +++ b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx @@ -1,11 +1,11 @@ import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons"; import { Card, Space, Switch, Table, Tooltip, Typography } from "antd"; -import dayjs from "../../../utils/day"; -import React, { useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { TimeFormatter } from "../../../utils/DateFormatter"; import { onlyUnique } from "../../../utils/arrayHelper"; +import dayjs from "../../../utils/day"; import { alphaSort, dateSort } from "../../../utils/sorters"; import useLocalStorage from "../../../utils/useLocalStorage"; import ChatOpenButton from "../../chat-open-button/chat-open-button.component"; @@ -138,7 +138,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Alt. Transport*", + text: s || t("dashboard.errors.atp"), value: [s] }; }) @@ -154,7 +154,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) { dataIndex: "status", key: "status", ellipsis: true, - sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport), + sorter: (a, b) => alphaSort(a.status, b.status), sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order, filters: (scheduledOutToday && @@ -163,7 +163,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Status*", + text: s || t("dashboard.errors.status"), value: [s] }; }) @@ -306,7 +306,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Ins. Co.*", + text: s || t("dashboard.errors.insco"), value: [s] }; }) @@ -328,7 +328,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) { .filter(onlyUnique) .map((s) => { return { - text: s || "No Alt. Transport*", + text: s || t("dashboard.errors.atp"), value: [s] }; }) diff --git a/client/src/components/dashboard-grid/componentList.js b/client/src/components/dashboard-grid/componentList.js index 015d3509e..5bd866927 100644 --- a/client/src/components/dashboard-grid/componentList.js +++ b/client/src/components/dashboard-grid/componentList.js @@ -1,30 +1,33 @@ import i18next from "i18next"; -import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx"; -import { - DashboardTotalProductionHours, - DashboardTotalProductionHoursGql -} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx"; -import DashboardProjectedMonthlySales, { - DashboardProjectedMonthlySalesGql -} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx"; -import DashboardMonthlyRevenueGraph, { - DashboardMonthlyRevenueGraphGql -} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx"; -import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx"; -import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx"; -import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx"; +import JobLifecycleDashboardComponent, { + JobLifecycleDashboardGQL +} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx"; import DashboardMonthlyEmployeeEfficiency, { DashboardMonthlyEmployeeEfficiencyGql } from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx"; +import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx"; +import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx"; +import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx"; +import DashboardMonthlyRevenueGraph, { + DashboardMonthlyRevenueGraphGql +} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx"; +import DashboardProjectedMonthlySales, { + DashboardProjectedMonthlySalesGql +} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx"; +import DashboardScheduledDeliveryToday, { + DashboardScheduledDeliveryTodayGql +} from "../dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx"; import DashboardScheduledInToday, { DashboardScheduledInTodayGql } from "../dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx"; import DashboardScheduledOutToday, { DashboardScheduledOutTodayGql } from "../dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx"; -import JobLifecycleDashboardComponent, { - JobLifecycleDashboardGQL -} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx"; +import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx"; +import { + DashboardTotalProductionHours, + DashboardTotalProductionHoursGql +} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx"; const componentList = { ProductionDollars: { @@ -118,6 +121,15 @@ const componentList = { w: 10, h: 3 }, + ScheduleDeliveryToday: { + label: i18next.t("dashboard.titles.scheduleddeliverytoday"), + component: DashboardScheduledDeliveryToday, + gqlFragment: DashboardScheduledDeliveryTodayGql, + minW: 6, + minH: 2, + w: 10, + h: 3 + }, JobLifecycle: { label: i18next.t("dashboard.titles.joblifecycle"), component: JobLifecycleDashboardComponent, diff --git a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx index 453a935ff..0add659d9 100644 --- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx +++ b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx @@ -1,6 +1,6 @@ import { DatePicker, Space, TimePicker } from "antd"; import PropTypes from "prop-types"; -import React, { useCallback, useState } from "react"; +import { useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -94,7 +94,24 @@ const DateTimePicker = ({ showTime={false} format="MM/DD/YYYY" value={value ? dayjs(value) : null} - onChange={handleChange} + onChange={(dateValue) => { + if (dateValue) { + // When date changes, preserve the existing time if it exists + if (value && dayjs(value).isValid()) { + const existingTime = dayjs(value); + const newDateTime = dayjs(dateValue) + .hour(existingTime.hour()) + .minute(existingTime.minute()) + .second(existingTime.second()); + handleChange(newDateTime); + } else { + // If no existing time, just set the date without time + handleChange(dateValue); + } + } else { + handleChange(dateValue); + } + }} placeholder={t("general.labels.date")} onBlur={handleBlur} disabledDate={handleDisabledDate} @@ -105,13 +122,25 @@ const DateTimePicker = ({ { - handleChange(value); - onBlur(); + onChange={(timeValue) => { + if (timeValue) { + // When time changes, combine it with the existing date + const existingDate = dayjs(value); + const newDateTime = existingDate + .hour(timeValue.hour()) + .minute(timeValue.minute()) + .second(0); + handleChange(newDateTime); + } else { + // If time is cleared, just update with null time but keep date + handleChange(timeValue); + } + if (onBlur) onBlur(); }} placeholder={t("general.labels.time")} {...restProps} diff --git a/client/src/components/header/buildAccountingChildren.jsx b/client/src/components/header/buildAccountingChildren.jsx new file mode 100644 index 000000000..574dbf603 --- /dev/null +++ b/client/src/components/header/buildAccountingChildren.jsx @@ -0,0 +1,190 @@ +import { Link } from "react-router-dom"; +import { FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa"; +import { GiPayMoney, GiPlayerTime } from "react-icons/gi"; +import { BankFilled, ExportOutlined, FieldTimeOutlined } from "@ant-design/icons"; +import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx"; +import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component"; + +// --- Menu Item Builders --- +const buildAccountingChildren = ({ + t, + bodyshop, + currentUser, + setBillEnterContext, + setPaymentContext, + setCardPaymentContext, + setTimeTicketContext, + ImEXPay, + DmsAp, + Simple_Inventory +}) => [ + { + key: "bills", + id: "header-accounting-bills", + icon: , + label: ( + + + {t("menus.header.bills")} + + + ) + }, + { + key: "enterbills", + id: "header-accounting-enterbills", + icon: , + label: ( + + {t("menus.header.enterbills")} + + ), + onClick: () => + HasFeatureAccess({ featureName: "bills", bodyshop }) && setBillEnterContext({ actions: {}, context: {} }) + }, + ...(Simple_Inventory.treatment === "on" + ? [ + { type: "divider" }, + { + key: "inventory", + id: "header-accounting-inventory", + icon: , + label: {t("menus.header.inventory")} + } + ] + : []), + { type: "divider" }, + { + key: "allpayments", + id: "header-accounting-allpayments", + icon: , + label: {t("menus.header.allpayments")} + }, + { + key: "enterpayments", + id: "header-accounting-enterpayments", + icon: , + label: t("menus.header.enterpayment"), + onClick: () => setPaymentContext({ actions: {}, context: null }) + }, + ...(ImEXPay.treatment === "on" + ? [ + { + key: "entercardpayments", + id: "header-accounting-entercardpayments", + icon: , + label: t("menus.header.entercardpayment"), + onClick: () => setCardPaymentContext({ actions: {}, context: {} }) + } + ] + : []), + { type: "divider" }, + { + key: "timetickets", + id: "header-accounting-timetickets", + icon: , + label: ( + + + {t("menus.header.timetickets")} + + + ) + }, + ...(bodyshop?.md_tasks_presets?.use_approvals + ? [ + { + key: "ttapprovals", + id: "header-accounting-ttapprovals", + icon: , + label: {t("menus.header.ttapprovals")} + } + ] + : []), + { + key: "entertimetickets", + id: "header-accounting-entertimetickets", + icon: , + label: ( + + {t("menus.header.entertimeticket")} + + ), + onClick: () => + HasFeatureAccess({ featureName: "timetickets", bodyshop }) && + setTimeTicketContext({ + actions: {}, + context: { + created_by: currentUser.displayName ? `${currentUser.email} | ${currentUser.displayName}` : currentUser.email + } + }) + }, + { type: "divider" }, + { + key: "accountingexport", + id: "header-accounting-export", + icon: , + label: ( + + {t("menus.header.export")} + + ), + children: [ + { + key: "receivables", + id: "header-accounting-receivables", + label: ( + + + {t("menus.header.accounting-receivables")} + + + ) + }, + ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on" + ? [ + { + key: "payables", + id: "header-accounting-payables", + label: ( + + + {t("menus.header.accounting-payables")} + + + ) + } + ] + : []), + ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) + ? [ + { + key: "payments", + id: "header-accounting-payments", + label: ( + + + {t("menus.header.accounting-payments")} + + + ) + } + ] + : []), + { type: "divider" }, + { + key: "exportlogs", + id: "header-accounting-exportlogs", + label: ( + + + {t("menus.header.export-logs")} + + + ) + } + ] + } +]; + +export default buildAccountingChildren; diff --git a/client/src/components/header/buildLeftMenuItems.jsx b/client/src/components/header/buildLeftMenuItems.jsx new file mode 100644 index 000000000..166779572 --- /dev/null +++ b/client/src/components/header/buildLeftMenuItems.jsx @@ -0,0 +1,390 @@ +import { Link } from "react-router-dom"; +import { + BarChartOutlined, + CarFilled, + CheckCircleOutlined, + ClockCircleFilled, + DashboardFilled, + DollarCircleFilled, + FileAddFilled, + FileAddOutlined, + FileFilled, + HomeFilled, + ImportOutlined, + LineChartOutlined, + OneToOneOutlined, + PaperClipOutlined, + PhoneOutlined, + PlusCircleOutlined, + QuestionCircleFilled, + ScheduleOutlined, + SettingOutlined, + TeamOutlined, + ToolFilled, + UnorderedListOutlined, + UsergroupAddOutlined, + UserOutlined +} from "@ant-design/icons"; +import { FaCalendarAlt, FaCarCrash, FaTasks } from "react-icons/fa"; +import { BsKanban } from "react-icons/bs"; +import { FiLogOut } from "react-icons/fi"; +import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi"; +import { RiSurveyLine } from "react-icons/ri"; +import { IoBusinessOutline } from "react-icons/io5"; +import InstanceRenderManager from "../../utils/instanceRenderMgr"; +import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx"; + +const buildLeftMenuItems = ({ + t, + bodyshop, + recentItems, + setTaskUpsertContext, + setReportCenterContext, + signOutStart, + accountingChildren +}) => { + return [ + { + key: "home", + id: "header-home", + icon: , + label: {t("menus.header.home")} + }, + { + key: "schedule", + id: "header-schedule", + icon: , + label: {t("menus.header.schedule")} + }, + { + key: "jobssubmenu", + id: "header-jobs", + icon: , + label: t("menus.header.jobs"), + children: [ + { + key: "activejobs", + id: "header-active-jobs", + icon: , + label: {t("menus.header.activejobs")} + }, + { + key: "readyjobs", + id: "header-ready-jobs", + icon: , + label: {t("menus.header.readyjobs")} + }, + { + key: "parts-queue", + id: "header-parts-queue", + icon: , + label: {t("menus.header.parts-queue")} + }, + { + key: "availablejobs", + id: "header-jobs-available", + icon: , + label: {t("menus.header.availablejobs")} + }, + { + key: "newjob", + id: "header-new-job", + icon: , + label: {t("menus.header.newjob")} + }, + { type: "divider" }, + { + key: "alljobs", + id: "header-all-jobs", + icon: , + label: {t("menus.header.alljobs")} + }, + { type: "divider" }, + { + key: "productionlist", + id: "header-production-list", + icon: , + label: {t("menus.header.productionlist")} + }, + { + key: "productionboard", + id: "header-production-board", + icon: , + label: ( + + + {t("menus.header.productionboard")} + + + ) + }, + { type: "divider" }, + { + key: "scoreboard", + id: "header-scoreboard", + icon: , + label: ( + + + {t("menus.header.scoreboard")} + + + ) + } + ] + }, + { + key: "customers", + id: "header-customers", + icon: , + label: t("menus.header.customers"), + children: [ + { + key: "owners", + id: "header-owners", + icon: , + label: {t("menus.header.owners")} + }, + { + key: "vehicles", + id: "header-vehicles", + icon: , + label: {t("menus.header.vehicles")} + } + ] + }, + { + key: "ccs", + id: "header-css", + icon: , + label: ( + + {t("menus.header.courtesycars")} + + ), + children: [ + { + key: "courtesycarsall", + id: "header-courtesycars-all", + icon: , + label: ( + + + {t("menus.header.courtesycars-all")} + + + ) + }, + { + key: "contracts", + id: "header-contracts", + icon: , + label: ( + + + {t("menus.header.courtesycars-contracts")} + + + ) + }, + { + key: "newcontract", + id: "header-newcontract", + icon: , + label: ( + + + {t("menus.header.courtesycars-newcontract")} + + + ) + } + ] + }, + ...(accountingChildren.length > 0 + ? [ + { + key: "accounting", + id: "header-accounting", + icon: , + label: t("menus.header.accounting"), + children: accountingChildren + } + ] + : []), + { + key: "phonebook", + id: "header-phonebook", + icon: , + label: {t("menus.header.phonebook")} + }, + { + key: "temporarydocs", + id: "header-temporarydocs", + icon: , + label: ( + + + {t("menus.header.temporarydocs")} + + + ) + }, + { + key: "tasks", + id: "tasks", + icon: , + label: t("menus.header.tasks"), + children: [ + { + key: "createTask", + id: "header-create-task", + icon: , + label: t("menus.header.create_task"), + onClick: () => setTaskUpsertContext({ actions: {}, context: {} }) + }, + { + key: "mytasks", + id: "header-my-tasks", + icon: , + label: {t("menus.header.my_tasks")} + }, + { + key: "all_tasks", + id: "header-all-tasks", + icon: , + label: {t("menus.header.all_tasks")} + } + ] + }, + { + key: "shopsubmenu", + id: "header-shopsubmenu", + icon: , + label: t("menus.header.shop"), + children: [ + { + key: "shop", + id: "header-shop", + icon: , + label: {t("menus.header.shop_config")} + }, + { + key: "dashboard", + id: "header-dashboard", + icon: , + label: ( + + {t("menus.header.dashboard")} + + ) + }, + { + key: "reportcenter", + id: "header-reportcenter", + icon: , + label: t("menus.header.reportcenter"), + onClick: () => setReportCenterContext({ actions: {}, context: {} }) + }, + { + key: "shop-vendors", + id: "header-shop-vendors", + icon: , + label: {t("menus.header.shop_vendors")} + }, + { + key: "shop-csi", + id: "header-shop-csi", + icon: , + label: ( + + + {t("menus.header.shop_csi")} + + + ) + } + ] + }, + { + key: "recent", + id: "header-recent", + icon: , + label: t("menus.header.recent"), + children: recentItems.map((i, idx) => ({ + key: idx, + id: `header-recent-${idx}`, + label: {i.label} + })) + }, + { + key: "user", + id: "header-user", + icon: , + label: t("menus.currentuser.profile"), + children: [ + { + key: "signout", + id: "header-signout", + icon: , + danger: true, + label: t("user.actions.signout"), + onClick: () => signOutStart() + }, + { + key: "help", + id: "header-help", + icon: , + label: t("menus.header.help"), + onClick: () => window.open("https://help.imex.online/", "_blank") + }, + { + key: "remoteassist", + id: "header-remote-assist", + icon: , + label: t("menus.header.remoteassist"), + children: [ + ...(InstanceRenderManager({ imex: true, rome: false }) + ? [ + { + key: "rescue", + id: "header-rescue", + icon: , + label: t("menus.header.rescueme"), + onClick: () => window.open("https://imexrescue.com/", "_blank") + } + ] + : []), + { + key: "rescue-zoho", + id: "header-rescue-zoho", + icon: , + label: t("menus.header.rescuemezoho"), + onClick: () => window.open("https://join.zoho.com/", "_blank") + } + ] + }, + { + key: "shiftclock", + id: "header-shiftclock", + icon: , + label: ( + + + {t("menus.header.shiftclock")} + + + ) + }, + { + key: "profile", + id: "header-profile", + icon: , + label: {t("menus.currentuser.profile")} + } + ] + } + ]; +}; + +export default buildLeftMenuItems; diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 826edea54..3312bf9f4 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -1,61 +1,29 @@ -import { - BankFilled, - BarChartOutlined, - BellFilled, - CarFilled, - CheckCircleOutlined, - ClockCircleFilled, - DashboardFilled, - DollarCircleFilled, - ExportOutlined, - FieldTimeOutlined, - FileAddFilled, - FileAddOutlined, - FileFilled, - HomeFilled, - ImportOutlined, - LineChartOutlined, - OneToOneOutlined, - PaperClipOutlined, - PhoneOutlined, - PlusCircleOutlined, - QuestionCircleFilled, - ScheduleOutlined, - SettingOutlined, - TeamOutlined, - ToolFilled, - UnorderedListOutlined, - UsergroupAddOutlined, - UserOutlined -} from "@ant-design/icons"; +// noinspection RegExpAnonymousGroup + +import { BellFilled } from "@ant-design/icons"; import { useQuery } from "@apollo/client"; import { useSplitTreatments } from "@splitsoftware/splitio-react"; -import { Badge, Layout, Menu, Spin } from "antd"; -import { useEffect, useRef, useState } from "react"; +import { Badge, Layout, Menu, Spin, Tooltip } from "antd"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; -import { BsKanban } from "react-icons/bs"; -import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa"; -import { FiLogOut } from "react-icons/fi"; -import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi"; -import { IoBusinessOutline } from "react-icons/io5"; -import { RiSurveyLine } from "react-icons/ri"; +import { FaTasks } from "react-icons/fa"; import { connect } from "react-redux"; -import { Link } from "react-router-dom"; import { createStructuredSelector } from "reselect"; -import { useSocket } from "../../contexts/SocketIO/useSocket.js"; +import { TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket.js"; import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js"; +import { QUERY_MY_TASKS_COUNT } from "../../graphql/tasks.queries.js"; import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors"; import { setModalContext } from "../../redux/modals/modals.actions"; import { signOutStart } from "../../redux/user/user.actions"; import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors"; import day from "../../utils/day.js"; -import InstanceRenderManager from "../../utils/instanceRenderMgr"; import { useIsEmployee } from "../../utils/useIsEmployee.js"; -import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component"; -import LockWrapper from "../lock-wrapper/lock-wrapper.component"; import NotificationCenterContainer from "../notification-center/notification-center.container.jsx"; +import TaskCenterContainer from "../task-center/task-center.container.jsx"; +import buildAccountingChildren from "./buildAccountingChildren.jsx"; +import buildLeftMenuItems from "./buildLeftMenuItems.jsx"; -// Redux mappings +// --- Redux mappings --- const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, recentItems: selectRecentItems, @@ -73,36 +41,8 @@ const mapDispatchToProps = (dispatch) => ({ setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" })) }); -function Header({ - handleMenuClick, - currentUser, - bodyshop, - selectedHeader, - signOutStart, - setBillEnterContext, - setTimeTicketContext, - setPaymentContext, - setReportCenterContext, - recentItems, - setCardPaymentContext, - setTaskUpsertContext -}) { - const { - treatments: { ImEXPay, DmsAp, Simple_Inventory } - } = useSplitTreatments({ - attributes: {}, - names: ["ImEXPay", "DmsAp", "Simple_Inventory"], - splitKey: bodyshop && bodyshop.imexshopid - }); - - const { t } = useTranslation(); - const { isConnected, scenarioNotificationsOn } = useSocket(); - const [notificationVisible, setNotificationVisible] = useState(false); - const baseTitleRef = useRef(document.title || ""); - const lastSetTitleRef = useRef(""); - const userAssociationId = bodyshop?.associations?.[0]?.id; - const isEmployee = useIsEmployee(bodyshop, currentUser); - +// --- Utility Hooks --- +function useUnreadNotifications(userAssociationId, isConnected, scenarioNotificationsOn) { const { data: unreadData, refetch: refetchUnread, @@ -128,633 +68,286 @@ function Header({ } }, [isConnected, unreadLoading, refetchUnread, userAssociationId]); - // Keep The unread count in the title. + return { unreadCount, unreadLoading }; +} + +function useIncompleteTaskCount(assignedToId, bodyshopId, isEmployee, isConnected) { + const { data: taskCountData, loading: taskCountLoading } = useQuery(QUERY_MY_TASKS_COUNT, { + variables: { assigned_to: assignedToId, bodyshopid: bodyshopId }, + skip: !assignedToId || !bodyshopId || !isEmployee, + fetchPolicy: "network-only", + pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL + }); + + const incompleteTaskCount = taskCountData?.tasks_aggregate?.aggregate?.count ?? 0; + return { incompleteTaskCount, taskCountLoading }; +} + +// --- Main Component --- +function Header(props) { + const { + handleMenuClick, + currentUser, + bodyshop, + selectedHeader, + signOutStart, + setBillEnterContext, + setTimeTicketContext, + setPaymentContext, + setReportCenterContext, + recentItems, + setCardPaymentContext, + setTaskUpsertContext + } = props; + + // Feature flags + const { + treatments: { ImEXPay, DmsAp, Simple_Inventory } + } = useSplitTreatments({ + attributes: {}, + names: ["ImEXPay", "DmsAp", "Simple_Inventory"], + splitKey: bodyshop && bodyshop.imexshopid + }); + + // Contexts and hooks + const { t } = useTranslation(); + const { isConnected, scenarioNotificationsOn } = useSocket(); + const [notificationVisible, setNotificationVisible] = useState(false); + const [taskCenterVisible, setTaskCenterVisible] = useState(false); + const baseTitleRef = useRef(document.title || ""); + const lastSetTitleRef = useRef(""); + const taskCenterRef = useRef(null); + const notificationRef = useRef(null); + const userAssociationId = bodyshop?.associations?.[0]?.id; + const isEmployee = useIsEmployee(bodyshop, currentUser); + + // Data hooks + const { unreadCount, unreadLoading } = useUnreadNotifications( + userAssociationId, + isConnected, + scenarioNotificationsOn + ); + const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id; + const { incompleteTaskCount, taskCountLoading } = useIncompleteTaskCount( + assignedToId, + bodyshop?.id, + isEmployee, + isConnected + ); + + // --- Effects --- + + // Update document title with unread count useEffect(() => { const updateTitle = () => { const currentTitle = document.title; - // Check if the current title differs from what we last set if (currentTitle !== lastSetTitleRef.current) { - // Extract base title by removing any unread count prefix const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/); baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle; } - - // Apply unread count to the base title const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current; - - // Only update if the title has changed to avoid unnecessary DOM writes if (document.title !== newTitle) { document.title = newTitle; - lastSetTitleRef.current = newTitle; // Store what we set + lastSetTitleRef.current = newTitle; + } + }; + updateTitle(); + const interval = setInterval(updateTitle, 100); + return () => { + clearInterval(interval); + document.title = baseTitleRef.current; + }; + }, [unreadCount]); + + // Handle outside clicks for popovers + useEffect(() => { + const handleClickOutside = (event) => { + const isNotificationClick = event.target.closest("#header-notifications"); + const isTaskCenterClick = event.target.closest("#header-taskcenter"); + + if (isNotificationClick && scenarioNotificationsOn) { + setTaskCenterVisible(false); // Close task center + return; + } + + if (isTaskCenterClick) { + setNotificationVisible(scenarioNotificationsOn ? false : notificationVisible); // Close notification center if enabled + return; + } + + if (taskCenterVisible && taskCenterRef.current && !taskCenterRef.current.contains(event.target)) { + setTaskCenterVisible(false); + } + + if ( + scenarioNotificationsOn && + notificationVisible && + notificationRef.current && + !notificationRef.current.contains(event.target) + ) { + setNotificationVisible(false); } }; - // Initial update - updateTitle(); + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [taskCenterVisible, notificationVisible, scenarioNotificationsOn]); - // Poll every 100ms to catch child component changes - const interval = setInterval(updateTitle, 100); + // --- Event Handlers --- + const handleTaskCenterClick = useCallback( + (e) => { + setTaskCenterVisible((prev) => { + if (prev) return false; + return true; + }); + if (handleMenuClick) handleMenuClick(e); + }, + [handleMenuClick] + ); - // Cleanup - return () => { - clearInterval(interval); - document.title = baseTitleRef.current; // Reset to base title on unmount - }; - }, [unreadCount]); // Re-run when unreadCount changes + const handleNotificationClick = useCallback( + (e) => { + setNotificationVisible((prev) => { + if (prev) return false; + return true; + }); + if (handleMenuClick) handleMenuClick(e); + }, + [handleMenuClick] + ); - const handleNotificationClick = (e) => { - setNotificationVisible(!notificationVisible); - if (handleMenuClick) handleMenuClick(e); - }; + // --- Menu Items --- - const accountingChildren = [ - { - key: "bills", - id: "header-accounting-bills", - icon: , - label: ( - - - {t("menus.header.bills")} - - - ) - }, - { - key: "enterbills", - id: "header-accounting-enterbills", - icon: , - label: ( - - {t("menus.header.enterbills")} - - ), - onClick: () => - HasFeatureAccess({ featureName: "bills", bodyshop }) && - setBillEnterContext({ - actions: {}, - context: {} - }) - }, - ...(Simple_Inventory.treatment === "on" - ? [ - { type: "divider" }, - { - key: "inventory", - id: "header-accounting-inventory", - icon: , - label: {t("menus.header.inventory")} - } - ] - : []), - { type: "divider" }, - { - key: "allpayments", - id: "header-accounting-allpayments", - icon: , - label: {t("menus.header.allpayments")} - }, - { - key: "enterpayments", - id: "header-accounting-enterpayments", - icon: , - label: t("menus.header.enterpayment"), - onClick: () => - setPaymentContext({ - actions: {}, - context: null - }) - }, - ...(ImEXPay.treatment === "on" - ? [ - { - key: "entercardpayments", - id: "header-accounting-entercardpayments", - icon: , - label: t("menus.header.entercardpayment"), - onClick: () => setCardPaymentContext({ actions: {}, context: {} }) - } - ] - : []), - { type: "divider" }, - { - key: "timetickets", - id: "header-accounting-timetickets", - icon: , - label: ( - - - {t("menus.header.timetickets")} - - - ) - }, - ...(bodyshop?.md_tasks_presets?.use_approvals - ? [ - { - key: "ttapprovals", - id: "header-accounting-ttapprovals", - icon: , - label: {t("menus.header.ttapprovals")} - } - ] - : []), - { - key: "entertimetickets", - id: "header-accounting-entertimetickets", - icon: , - label: ( - - {t("menus.header.entertimeticket")} - - ), - onClick: () => - HasFeatureAccess({ featureName: "timetickets", bodyshop }) && - setTimeTicketContext({ - actions: {}, - context: { - created_by: currentUser.displayName - ? `${currentUser.email} | ${currentUser.displayName}` - : currentUser.email - } - }) - }, - { type: "divider" }, - { - key: "accountingexport", - id: "header-accounting-export", - icon: , - label: ( - - {t("menus.header.export")} - - ), - children: [ - { - key: "receivables", - id: "header-accounting-receivables", - label: ( - - - {t("menus.header.accounting-receivables")} - - - ) - }, - ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || - DmsAp.treatment === "on" - ? [ - { - key: "payables", - id: "header-accounting-payables", - label: ( - - - {t("menus.header.accounting-payables")} - - - ) - } - ] - : []), - ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) - ? [ - { - key: "payments", - id: "header-accounting-payments", - label: ( - - - {t("menus.header.accounting-payments")} - - - ) - } - ] - : []), - { type: "divider" }, - { - key: "exportlogs", - id: "header-accounting-exportlogs", - label: ( - - - {t("menus.header.export-logs")} - - - ) - } - ] + // built externally to keep the component clean, but on this level to prevent unnecessary re-renders + const accountingChildren = useMemo( + () => + buildAccountingChildren({ + t, + bodyshop, + currentUser, + setBillEnterContext, + setPaymentContext, + setCardPaymentContext, + setTimeTicketContext, + ImEXPay, + DmsAp, + Simple_Inventory + }), + [ + t, + bodyshop, + currentUser, + setBillEnterContext, + setPaymentContext, + setCardPaymentContext, + setTimeTicketContext, + ImEXPay, + DmsAp, + Simple_Inventory + ] + ); + + // Built externally to keep the component clean + const leftMenuItems = useMemo( + () => + buildLeftMenuItems({ + t, + bodyshop, + recentItems, + setTaskUpsertContext, + setReportCenterContext, + signOutStart, + accountingChildren + }), + [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren] + ); + + const rightMenuItems = useMemo(() => { + const items = []; + if (scenarioNotificationsOn) { + items.push({ + key: "notifications", + id: "header-notifications", + icon: unreadLoading ? ( + + ) : ( + + + + ), + onClick: handleNotificationClick + }); } - ]; - - // Left menu items (includes original navigation items) - const leftMenuItems = [ - { - key: "home", - id: "header-home", - icon: , - label: {t("menus.header.home")} - }, - { - key: "schedule", - id: "header-schedule", - icon: , - label: {t("menus.header.schedule")} - }, - { - key: "jobssubmenu", - id: "header-jobs", - icon: , - label: t("menus.header.jobs"), - children: [ - { - key: "activejobs", - id: "header-active-jobs", - icon: , - label: {t("menus.header.activejobs")} - }, - { - key: "readyjobs", - id: "header-ready-jobs", - icon: , - label: {t("menus.header.readyjobs")} - }, - { - key: "parts-queue", - id: "header-parts-queue", - icon: , - label: {t("menus.header.parts-queue")} - }, - { - key: "availablejobs", - id: "header-jobs-available", - icon: , - label: {t("menus.header.availablejobs")} - }, - { - key: "newjob", - id: "header-new-job", - icon: , - label: {t("menus.header.newjob")} - }, - { type: "divider" }, - { - key: "alljobs", - id: "header-all-jobs", - icon: , - label: {t("menus.header.alljobs")} - }, - { type: "divider" }, - { - key: "productionlist", - id: "header-production-list", - icon: , - label: {t("menus.header.productionlist")} - }, - { - key: "productionboard", - id: "header-production-board", - icon: , - label: ( - - - {t("menus.header.productionboard")} - - - ) - }, - { type: "divider" }, - { - key: "scoreboard", - id: "header-scoreboard", - icon: , - label: ( - - - {t("menus.header.scoreboard")} - - - ) - } - ] - }, - { - key: "customers", - id: "header-customers", - icon: , - label: t("menus.header.customers"), - children: [ - { - key: "owners", - id: "header-owners", - icon: , - label: {t("menus.header.owners")} - }, - { - key: "vehicles", - id: "header-vehicles", - icon: , - label: {t("menus.header.vehicles")} - } - ] - }, - { - key: "ccs", - id: "header-css", - icon: , - label: ( - - {t("menus.header.courtesycars")} - + items.push({ + key: "taskcenter", + id: "header-taskcenter", + icon: taskCountLoading ? ( + + ) : ( + 0 ? incompleteTaskCount : 0} showZero={false}> + + + + ), - children: [ - { - key: "courtesycarsall", - id: "header-courtesycars-all", - icon: , - label: ( - - - {t("menus.header.courtesycars-all")} - - - ) - }, - { - key: "contracts", - id: "header-contracts", - icon: , - label: ( - - - {t("menus.header.courtesycars-contracts")} - - - ) - }, - { - key: "newcontract", - id: "header-newcontract", - icon: , - label: ( - - - {t("menus.header.courtesycars-newcontract")} - - - ) - } - ] - }, - ...(accountingChildren.length > 0 - ? [ - { - key: "accounting", - id: "header-accounting", - icon: , - label: t("menus.header.accounting"), - children: accountingChildren - } - ] - : []), - { - key: "phonebook", - id: "header-phonebook", - icon: , - label: {t("menus.header.phonebook")} - }, - { - key: "temporarydocs", - id: "header-temporarydocs", - icon: , - label: ( - - - {t("menus.header.temporarydocs")} - - - ) - }, - { - key: "tasks", - id: "tasks", - icon: , - label: t("menus.header.tasks"), - children: [ - { - key: "createTask", - id: "header-create-task", - icon: , - label: t("menus.header.create_task"), - onClick: () => setTaskUpsertContext({ actions: {}, context: {} }) - }, - { - key: "mytasks", - id: "header-my-tasks", - icon: , - label: {t("menus.header.my_tasks")} - }, - { - key: "all_tasks", - id: "header-all-tasks", - icon: , - label: {t("menus.header.all_tasks")} - } - ] - }, - { - key: "shopsubmenu", - id: "header-shopsubmenu", - icon: , - label: t("menus.header.shop"), - children: [ - { - key: "shop", - id: "header-shop", - icon: , - label: {t("menus.header.shop_config")} - }, - { - key: "dashboard", - id: "header-dashboard", - icon: , - label: ( - - {t("menus.header.dashboard")} - - ) - }, - { - key: "reportcenter", - id: "header-reportcenter", - icon: , - label: t("menus.header.reportcenter"), - onClick: () => setReportCenterContext({ actions: {}, context: {} }) - }, - { - key: "shop-vendors", - id: "header-shop-vendors", - icon: , - label: {t("menus.header.shop_vendors")} - }, - { - key: "shop-csi", - id: "header-shop-csi", - icon: , - label: ( - - - {t("menus.header.shop_csi")} - - - ) - } - ] - }, - { - key: "recent", - id: "header-recent", - icon: , - label: t("menus.header.recent"), - children: recentItems.map((i, idx) => ({ - key: idx, - id: `header-recent-${idx}`, - label: {i.label} - })) - }, - { - key: "user", - id: "header-user", - icon: , - label: t("menus.currentuser.profile"), - children: [ - { - key: "signout", - id: "header-signout", - icon: , - danger: true, - label: t("user.actions.signout"), - onClick: () => signOutStart() - }, - { - key: "help", - id: "header-help", - icon: , - label: t("menus.header.help"), - onClick: () => window.open("https://help.imex.online/", "_blank") - }, - { - key: "remoteassist", - id: "header-remote-assist", - icon: , - label: t("menus.header.remoteassist"), - children: [ - ...(InstanceRenderManager({ imex: true, rome: false }) - ? [ - { - key: "rescue", - id: "header-rescue", - icon: , - label: t("menus.header.rescueme"), - onClick: () => window.open("https://imexrescue.com/", "_blank") - } - ] - : []), - { - key: "rescue-zoho", - id: "header-rescue-zoho", - icon: , - label: t("menus.header.rescuemezoho"), - onClick: () => window.open("https://join.zoho.com/", "_blank") - } - ] - }, - { - key: "shiftclock", - id: "header-shiftclock", - icon: , - label: ( - - - {t("menus.header.shiftclock")} - - - ) - }, - { - key: "profile", - id: "header-profile", - icon: , - label: {t("menus.currentuser.profile")} - } - ] - } - ]; - - // Notifications item (always on the right) - const notificationItem = scenarioNotificationsOn - ? [ - { - key: "notifications", - id: "header-notifications", - icon: unreadLoading ? ( - - ) : ( - - - - ), - onClick: handleNotificationClick - } - ] - : []; + onClick: handleTaskCenterClick + }); + return items; + }, [ + scenarioNotificationsOn, + unreadLoading, + unreadCount, + taskCountLoading, + incompleteTaskCount, + isEmployee, + handleNotificationClick, + handleTaskCenterClick, + t + ]); + // --- Render --- return ( -
- - {scenarioNotificationsOn && ( +
+
- )} +
+
+ +
{scenarioNotificationsOn && ( - setNotificationVisible(false)} - unreadCount={unreadCount} - /> +
+ setNotificationVisible(false)} + unreadCount={unreadCount} + /> +
)} +
+ setTaskCenterVisible(false)} + /> +
); } diff --git a/client/src/components/job-at-change/schedule-event.component.jsx b/client/src/components/job-at-change/schedule-event.component.jsx index 6438308da..9bdacfe26 100644 --- a/client/src/components/job-at-change/schedule-event.component.jsx +++ b/client/src/components/job-at-change/schedule-event.component.jsx @@ -385,7 +385,9 @@ export function ScheduleEventComponent({ previousEvent: event.id, color: event.color, alt_transport: event.job && event.job.alt_transport, - note: event.note + note: event.note, + scheduled_in: event.job && event.job.scheduled_in, + scheduled_completion: event.job && event.job.scheduled_completion } }); }} diff --git a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx index 410707cba..9a5f0b6b2 100644 --- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx +++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx @@ -1,13 +1,13 @@ import { Form, Statistic, Tooltip } from "antd"; -import React, { useMemo } from "react"; +import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectJobReadOnly } from "../../redux/application/application.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors"; +import dayjs from "../../utils/day"; import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component"; import FormRow from "../layout-form-row/layout-form-row.component"; -import dayjs from "../../utils/day"; const mapStateToProps = createStructuredSelector({ jobRO: selectJobReadOnly, @@ -43,14 +43,14 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) { @@ -63,7 +63,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) { - + @@ -110,16 +110,16 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) { - + - + - + - +
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx index ec1ec32b6..2dc1c18e6 100644 --- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx +++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx @@ -673,7 +673,9 @@ export function JobsDetailHeaderActions({ context: { jobId: job.id, job: job, - alt_transport: job.alt_transport + alt_transport: job.alt_transport, + scheduled_in: job.scheduled_in, + scheduled_completion: job.scheduled_completion } }); } @@ -1090,11 +1092,7 @@ export function JobsDetailHeaderActions({ {t("menus.jobsactions.deletejob")} ) : ( - e.stopPropagation()} - showCancel={false} - > + e.stopPropagation()} showCancel={false}> {t("menus.jobsactions.deletejob")} ) diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx index b1909a41f..9496b1d95 100644 --- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx +++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx @@ -337,7 +337,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail }) {t("jobs.labels.employeeassignments")} + title={{t("jobs.labels.employeeassignments")}} id={"job-employee-assignments"} >
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx index 65140d6b0..35b4a785c 100644 --- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx +++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx @@ -3,7 +3,6 @@ import axios from "axios"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { logImEXEvent } from "../../firebase/firebase.utils"; -import cleanAxios from "../../utils/CleanAxios"; import formatBytes from "../../utils/formatbytes"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -12,7 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -26,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({ export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyDownloadButton); -export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier, jobId }) { +export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier, jobId }) { const { t } = useTranslation(); const [download, setDownload] = useState(null); const [loading, setLoading] = useState(false); diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx index fe3799c49..a515f682f 100644 --- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx +++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx @@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd"; import axios from "axios"; import _ from "lodash"; import queryString from "query-string"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link, useLocation, useNavigate } from "react-router-dom"; @@ -20,7 +20,7 @@ const mapStateToProps = createStructuredSelector({ //currentUser: selectCurrentUser bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -203,6 +203,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) { return ( {search.search && ( @@ -256,6 +258,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) { rowKey="id" dataSource={search?.search ? openSearchResults : jobs} onChange={handleTableChange} + id="all-jobs-list-table" /> ); diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx index f7164f748..aaf56ba79 100644 --- a/client/src/components/jobs-list/jobs-list.component.jsx +++ b/client/src/components/jobs-list/jobs-list.component.jsx @@ -2,7 +2,7 @@ import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOut import { useQuery } from "@apollo/client"; import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd"; import queryString from "query-string"; -import React, { useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link, useLocation, useNavigate } from "react-router-dom"; @@ -22,7 +22,7 @@ const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({}); +const mapDispatchToProps = () => ({}); export function JobsList({ bodyshop }) { const searchParams = queryString.parse(useLocation().search); @@ -342,13 +342,14 @@ export function JobsList({ bodyshop }) { type: "radio" }} onChange={handleTableChange} - onRow={(record, rowIndex) => { + onRow={(record) => { return { - onClick: (event) => { + onClick: () => { handleOnRowClick(record); } }; }} + id="active-jobs-list-table" /> ); diff --git a/client/src/components/notification-center/notification-center.component.jsx b/client/src/components/notification-center/notification-center.component.jsx index 35dac2af6..a29e675fd 100644 --- a/client/src/components/notification-center/notification-center.component.jsx +++ b/client/src/components/notification-center/notification-center.component.jsx @@ -131,4 +131,6 @@ const NotificationCenterComponent = forwardRef( } ); +NotificationCenterComponent.displayName = "NotificationCenterComponent"; + export default NotificationCenterComponent; diff --git a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx index b00ff0c36..faea7a23d 100644 --- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx +++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx @@ -1,9 +1,9 @@ import Icon from "@ant-design/icons"; import { Card, Popover, Space } from "antd"; -import _ from "lodash"; +import { groupBy } from "lodash"; import dayjs from "../../utils/day"; -import React, { useMemo } from "react"; +import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { MdFileDownload, MdFileUpload } from "react-icons/md"; import { connect } from "react-redux"; @@ -26,21 +26,12 @@ const mapStateToProps = createStructuredSelector({ calculating: selectScheduleLoadCalculating }); -const mapDispatchToProps = (dispatch) => ({}); +const mapDispatchToProps = () => ({}); -export function ScheduleCalendarHeaderComponent({ - bodyshop, - label, - refetch, - date, - load, - calculating, - events, - ...otherProps -}) { +export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date, load, calculating, events }) { const ATSToday = useMemo(() => { if (!events) return []; - return _.groupBy( + return groupBy( events.filter((e) => !e.vacation && e.isintake && dayjs(date).isSame(dayjs(e.start), "day")), "job.alt_transport" ); @@ -155,7 +146,11 @@ export function ScheduleCalendarHeaderComponent({ - {`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`} + + {`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${ + (loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1) + }/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`} + diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx index 23ff4340d..18c5a3cec 100644 --- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx +++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx @@ -1,10 +1,10 @@ import { useMutation, useQuery } from "@apollo/client"; import { Form, Modal } from "antd"; -import dayjs from "../../utils/day"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; +import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; import { logImEXEvent } from "../../firebase/firebase.utils"; import { CANCEL_APPOINTMENT_BY_ID, @@ -19,9 +19,9 @@ import { selectSchedule } from "../../redux/modals/modals.selectors"; import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors"; import AuditTrailMapping from "../../utils/AuditTrailMappings"; import { DateTimeFormat } from "../../utils/DateFormatter"; +import dayjs from "../../utils/day"; import { TemplateList } from "../../utils/TemplateConstants"; import ScheduleJobModalComponent from "./schedule-job-modal.component"; -import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -72,7 +72,7 @@ export function ScheduleJobModalContainer({ variables: { jobid: jobId }, fetchPolicy: "network-only", nextFetchPolicy: "network-only", - skip: !open || !!!jobId + skip: !open || !jobId }); useEffect(() => { @@ -93,12 +93,12 @@ export function ScheduleJobModalContainer({ logImEXEvent("schedule_new_appointment"); setLoading(true); - if (!!previousEvent) { + if (previousEvent) { const cancelAppt = await cancelAppointment({ variables: { appid: previousEvent } }); - if (!!cancelAppt.errors) { + if (cancelAppt.errors) { notification["error"]({ message: t("appointments.errors.canceling", { message: JSON.stringify(cancelAppt.errors) @@ -146,7 +146,7 @@ export function ScheduleJobModalContainer({ }); } - if (!!appt.errors) { + if (appt.errors) { notification["error"]({ message: t("appointments.errors.saving", { message: JSON.stringify(appt.errors) @@ -172,7 +172,7 @@ export function ScheduleJobModalContainer({ } }); - if (!!jobUpdate.errors) { + if (jobUpdate.errors) { notification["error"]({ message: t("appointments.errors.saving", { message: JSON.stringify(jobUpdate.errors) @@ -222,9 +222,9 @@ export function ScheduleJobModalContainer({ initialValues={{ notifyCustomer: !!(job && job.ownr_ea), email: (job && job.ownr_ea) || "", - start: null, // smartDates: [], - scheduled_completion: null, + start: context.scheduled_in, + scheduled_completion: context.scheduled_completion , color: context.color, alt_transport: context.alt_transport, note: context.note diff --git a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx index 7b613aaed..2ab5ba7a3 100644 --- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx +++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx @@ -1,8 +1,7 @@ import { Card } from "antd"; import Dinero from "dinero.js"; -import _ from "lodash"; +import { round } from "lodash"; import dayjs from "../../utils/day"; -import React from "react"; import { connect } from "react-redux"; import { Area, @@ -29,7 +28,7 @@ const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart); @@ -40,7 +39,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) { const data = listOfBusDays.reduce((acc, val) => { //Sum up the current day. let dayhrs; - if (!!sbEntriesByDate[val]) { + if (sbEntriesByDate[val]) { dayhrs = sbEntriesByDate[val].reduce( (dayAcc, dayVal) => { return { @@ -61,9 +60,9 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) { const theValue = { date: dayjs(val).format("D ddd"), - paintHrs: _.round(dayhrs.painthrs, 1), - bodyHrs: _.round(dayhrs.bodyhrs, 1), - accTargetHrs: _.round( + paintHrs: round(dayhrs.painthrs, 1), + bodyHrs: round(dayhrs.bodyhrs, 1), + accTargetHrs: round( Utils.AsOfDateTargetHours( bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget, val @@ -72,14 +71,14 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) { bodyshop.scoreboard_target.dailyPaintTarget, 1 ), - accHrs: _.round( + accHrs: round( acc.length > 0 ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs : dayhrs.painthrs + dayhrs.bodyhrs, 1 ), - sales: _.round(dayhrs.sales, 2), - accSales: _.round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2) + sales: round(dayhrs.sales, 2), + accSales: round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2) }; return [...acc, theValue]; diff --git a/client/src/components/scoreboard-display/scoreboard-display.component.jsx b/client/src/components/scoreboard-display/scoreboard-display.component.jsx index 3d8a2f98a..053aef778 100644 --- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx +++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx @@ -1,23 +1,25 @@ -import { Col, Row } from "antd"; -import { useEffect } from "react"; +import { Col, Row, Spin } from "antd"; +import { useEffect, useState } from "react"; import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component"; import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component"; import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component"; - import { useApolloClient, useQuery } from "@apollo/client"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { GET_BLOCKED_DAYS, QUERY_SCOREBOARD } from "../../graphql/scoreboard.queries"; import { selectBodyshop } from "../../redux/user/user.selectors"; import dayjs from "../../utils/day"; +import { + clearHolidays, + clearWorkingWeekdays, + setHolidays, + setWorkingWeekdays +} from "../scoreboard-targets-table/scoreboard-targets-table.util"; const mapStateToProps = createStructuredSelector({ - //currentUser: selectCurrentUser bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ - //setUserLanguage: language => dispatch(setUserLanguage(language)) -}); +const mapDispatchToProps = () => ({}); export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDisplayComponent); export function ScoreboardDisplayComponent({ bodyshop }) { @@ -32,7 +34,6 @@ export function ScoreboardDisplayComponent({ bodyshop }) { const { data } = scoreboardSubscription; const client = useApolloClient(); const scoreBoardlist = data?.scoreboard || []; - const sbEntriesByDate = {}; scoreBoardlist.forEach((i) => { @@ -43,35 +44,52 @@ export function ScoreboardDisplayComponent({ bodyshop }) { sbEntriesByDate[entryDate].push(i); }); - useEffect(() => { - //Update the locals. - async function setDayJSSettings() { - let appointments; + const [loading, setLoading] = useState(true); // Loading state - if (!bodyshop.scoreboard_target.ignoreblockeddays) { - const { data } = await client.query({ - query: GET_BLOCKED_DAYS, - variables: { - start: dayjs().startOf("month"), - end: dayjs().endOf("month") - } - }); - appointments = data.appointments; - } - dayjs.updateLocale(dayjs.locale(), { - workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays), - ...(appointments?.length - ? { - holidays: appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY")) + useEffect(() => { + async function setDayJSSettings() { + try { + let appointments; + + if (!bodyshop.scoreboard_target.ignoreblockeddays) { + const { data } = await client.query({ + query: GET_BLOCKED_DAYS, + variables: { + start: dayjs().startOf("month"), + end: dayjs().endOf("month") } - : {}), - holidayFormat: "MM-DD-YYYY" - }); + }); + appointments = data.appointments; + } + + const holidays = appointments ? appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY")) : []; + const workingWeekdays = translateSettingsToWorkingDays(bodyshop.workingdays); + + // Set holidays and working weekdays + setHolidays(holidays); + setWorkingWeekdays(workingWeekdays); + } finally { + setLoading(false); // Set loading to false after processing + } } setDayJSSettings(); + + // Cleanup on unmount + return () => { + clearHolidays(); + clearWorkingWeekdays(); + }; }, [client, bodyshop]); + if (loading) { + return ( + + + + ); + } + return (
@@ -89,27 +107,12 @@ export function ScoreboardDisplayComponent({ bodyshop }) { function translateSettingsToWorkingDays(workingdays) { const days = []; - - if (workingdays.monday) { - days.push(1); - } - if (workingdays.tuesday) { - days.push(2); - } - if (workingdays.wednesday) { - days.push(3); - } - if (workingdays.thursday) { - days.push(4); - } - if (workingdays.friday) { - days.push(5); - } - if (workingdays.saturday) { - days.push(6); - } - if (workingdays.sunday) { - days.push(0); - } + if (workingdays.monday) days.push(1); + if (workingdays.tuesday) days.push(2); + if (workingdays.wednesday) days.push(3); + if (workingdays.thursday) days.push(4); + if (workingdays.friday) days.push(5); + if (workingdays.saturday) days.push(6); + if (workingdays.sunday) days.push(0); return days; } diff --git a/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx b/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx index d511bc96e..f0140d8e7 100644 --- a/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx +++ b/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx @@ -1,4 +1,3 @@ -import React from "react"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; @@ -10,7 +9,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -26,7 +25,7 @@ export function ScoreboardLastDays({ bodyshop, sbEntriesByDate }) { {ArrayOfDate.map((a) => ( - {!!sbEntriesByDate ? : } + {sbEntriesByDate ? : } ))} diff --git a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx index c017b0267..ebc3b52b9 100644 --- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx +++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx @@ -1,8 +1,8 @@ import { CalendarOutlined } from "@ant-design/icons"; import { Card, Col, Divider, Row, Statistic } from "antd"; -import _ from "lodash"; +import { groupBy } from "lodash"; import dayjs from "../../utils/day"; -import React, { useMemo } from "react"; +import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -13,7 +13,7 @@ import * as Util from "./scoreboard-targets-table.util"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -24,7 +24,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) { const { t } = useTranslation(); const values = useMemo(() => { - const dateHash = _.groupBy(scoreBoardlist, "date"); + const dateHash = groupBy(scoreBoardlist, "date"); let ret = { todayBody: 0, @@ -213,4 +213,5 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) { ); } + export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTargetsTable); diff --git a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js index 32703881c..af6ace810 100644 --- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js +++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js @@ -1,29 +1,172 @@ import dayjs from "../../utils/day"; -export const CalculateWorkingDaysThisMonth = () => dayjs().endOf("month").businessDaysInMonth().length; +const DEFAULT_WORKING_DAYS = [1, 2, 3, 4, 5]; // Default to Monday-Friday -export const CalculateWorkingDaysInPeriod = (start, end) => dayjs(end).businessDiff(dayjs(start)); +// Module-level state for holidays and working weekdays +let holidays = []; +let workingWeekdays = DEFAULT_WORKING_DAYS; -export const CalculateWorkingDaysAsOfToday = () => dayjs().endOf("day").businessDiff(dayjs().startOf("month")); +/** + * Sets the holidays for the business logic. + * @param newHolidays + */ +export const setHolidays = (newHolidays = []) => { + holidays = newHolidays; +}; -export const CalculateWorkingDaysLastMonth = () => - dayjs().subtract(1, "month").endOf("month").businessDaysInMonth().length; +/** + * Clears the holidays. + */ +export const clearHolidays = () => { + holidays = []; +}; +/** + * Sets the working weekdays for the business logic. + * @param newWorkingWeekdays + */ +export const setWorkingWeekdays = (newWorkingWeekdays = DEFAULT_WORKING_DAYS) => { + workingWeekdays = newWorkingWeekdays; +}; + +/** + * Clears the working weekdays, resetting to default (Monday-Friday). + */ +export const clearWorkingWeekdays = () => { + workingWeekdays = DEFAULT_WORKING_DAYS; // Reset to default +}; + +/** + * Translates the bodyshop working days settings to an array of weekdays. + * @returns {*[]} + */ +export const getHolidays = () => { + return holidays; +}; + +/** + * Translates the working days settings from the bodyshop to an array of weekdays. + * @returns {number[]} + */ +export const getWorkingWeekdays = () => { + return workingWeekdays; +}; + +/** + * Calculates the number of working days in the current month, excluding holidays. + * @returns {number} + * @constructor + */ +export const CalculateWorkingDaysThisMonth = () => { + const businessDays = dayjs().businessDaysInMonth(); + return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length; +}; + +/** + * Calculates the number of working days in a given period, excluding holidays. + * @param start + * @param end + * @returns {number} + * @constructor + */ +export const CalculateWorkingDaysInPeriod = (start, end) => { + let businessDays = dayjs(end).businessDiff(dayjs(start)); + if (dayjs(end).isBusinessDay() && !holidays.includes(dayjs(end).format("MM-DD-YYYY"))) { + businessDays += 1; + } + return businessDays; +}; + +/** + * Calculates the number of working days as of today, excluding holidays. + * @returns {number} + * @constructor + */ +export const CalculateWorkingDaysAsOfToday = () => { + const today = dayjs().startOf("day"); + let businessDays = today.businessDiff(dayjs().startOf("month")); + if (today.isBusinessDay() && !holidays.includes(today.format("MM-DD-YYYY"))) { + businessDays += 1; + } + return businessDays; +}; + +/** + * Calculates the number of working days in the last month, excluding holidays. + * @returns {number} + * @constructor + */ +export const CalculateWorkingDaysLastMonth = () => { + const businessDays = dayjs().subtract(1, "month").businessDaysInMonth(); + return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length; +}; + +/** + * Calculates the weekly target hours based on daily target hours and the number of working days in the current week. + * @param dailyTargetHrs + * @returns {number} + * @constructor + */ export const WeeklyTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysInPeriod(dayjs().startOf("week"), dayjs().endOf("week")); +/** + * Calculates the weekly target hours for a specific period. + * @param dailyTargetHrs + * @param start + * @param end + * @returns {number} + * @constructor + */ export const WeeklyTargetHrsInPeriod = (dailyTargetHrs, start, end) => dailyTargetHrs * CalculateWorkingDaysInPeriod(start, end); +/** + * Calculates the monthly target hours based on daily target hours and the number of working days in the current month. + * @param dailyTargetHrs + * @returns {number} + * @constructor + */ export const MonthlyTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysThisMonth(); +/** + * Calculates the monthly target hours for the last month based on daily target hours and the number of working days + * in the last month. + * @param dailyTargetHrs + * @returns {number} + * @constructor + */ export const LastMonthTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysLastMonth(); +/** + * Calculates the target hours as of today based on daily target hours and the number of working days as of today. + * @param dailyTargetHrs + * @returns {number} + * @constructor + */ export const AsOfTodayTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysAsOfToday(); -export const AsOfDateTargetHours = (dailyTargetHours, date) => - dailyTargetHours * dayjs(date).businessDiff(dayjs().startOf("month")); +/** + * Calculates the target hours as of a specific date based on daily target hours and the number of business days up to + * that date. + * @param dailyTargetHours + * @param date + * @returns {number} + * @constructor + */ +export const AsOfDateTargetHours = (dailyTargetHours, date) => { + let businessDays = dayjs(date).businessDiff(dayjs().startOf("month")); + if (dayjs(date).isBusinessDay() && !holidays.includes(dayjs(date).format("MM-DD-YYYY"))) { + businessDays += 1; + } + return dailyTargetHours * businessDays; +}; +/** + * Generates a list of all days in the current month. + * @returns {*[]} + * @constructor + */ export const ListOfDaysInCurrentMonth = () => { const days = []; let dateStart = dayjs().startOf("month"); @@ -36,6 +179,13 @@ export const ListOfDaysInCurrentMonth = () => { return days; }; +/** + * Generates a list of all days between two dates. + * @param start + * @param end + * @returns {*[]} + * @constructor + */ export const ListDaysBetween = ({ start, end }) => { const days = []; let dateStart = dayjs(start); diff --git a/client/src/components/task-center/task-center.component.jsx b/client/src/components/task-center/task-center.component.jsx new file mode 100644 index 000000000..8b269f7b7 --- /dev/null +++ b/client/src/components/task-center/task-center.component.jsx @@ -0,0 +1,156 @@ +import { Virtuoso } from "react-virtuoso"; +import { Badge, Button, Spin } from "antd"; +import { useTranslation } from "react-i18next"; +import { forwardRef, useMemo, useRef } from "react"; +import day from "../../utils/day.js"; +import "./task-center.styles.scss"; +import { + ArrowRightOutlined, + CalendarOutlined, + ClockCircleOutlined, + PlusCircleOutlined, + QuestionCircleOutlined +} from "@ant-design/icons"; + +const TaskCenterComponent = forwardRef( + ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => { + const { t } = useTranslation(); + const virtuosoRef = useRef(null); + + const sectionIcons = { + [t("tasks.labels.overdue")]: , + [t("tasks.labels.due_today")]: , + [t("tasks.labels.upcoming")]: , + [t("tasks.labels.no_due_date")]: + }; + + const groups = useMemo(() => { + const now = day(); + const today = now.startOf("day"); + + const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today)); + const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day")); + const upcoming = tasks.filter( + (t) => t.due_date && day(t.due_date).isAfter(today) && !day(t.due_date).isSame(today, "day") + ); + const noDueDate = tasks.filter((t) => !t.due_date); + + return [ + { label: t("tasks.labels.overdue"), tasks: overdue }, + { label: t("tasks.labels.due_today"), tasks: dueToday }, + { label: t("tasks.labels.upcoming"), tasks: upcoming }, + { label: t("tasks.labels.no_due_date"), tasks: noDueDate } + ].filter((group) => group.tasks.length > 0); + }, [tasks, t]); + + const groupCounts = useMemo(() => groups.map((group) => group.tasks.length), [groups]); + + const flatTasks = useMemo(() => groups.flatMap((group) => group.tasks), [groups]); + + const priorityColors = { + 1: "red", + 2: "orange", + 3: "green" + }; + + const getPriorityColor = (priority) => priorityColors[priority] || null; + + const groupContent = (groupIndex) => { + const { label, tasks } = groups[groupIndex]; + let displayCount = tasks.length; + if (label === t("tasks.labels.no_due_date")) { + displayCount = + incompleteTaskCount - + groups.reduce((sum, group, idx) => (idx !== groupIndex ? sum + group.tasks.length : sum), 0); + } + return ( +
+ {sectionIcons[label]} + {label} ({displayCount}) +
+ ); + }; + + const itemContent = (index) => { + const task = flatTasks[index]; + const priorityColor = getPriorityColor(task.priority); + return ( +
onTaskClick(task.id)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + onTaskClick(task.id); + } + }} + > +
+
+
{task.title}
+
+ {t("tasks.labels.ro-number", { + ro_number: task.job?.ro_number || t("general.labels.na") + })} +
+
+
+
+ {task.due_date && {day(task.due_date).fromNow()}} + {!!priorityColor && } +
+
+ ); + }; + + if (error) { + return ( +
+
+

{t("tasks.labels.my_tasks_center")}

+
+
{t("tasks.errors.load_failed")}
+
+ ); + } + + return ( +
+
+ +

{t("tasks.labels.my_tasks_center")}

+ +
+
+
+ + {tasks.length === 0 && !loading ? ( +
{t("tasks.labels.no_tasks")}
+ ) : ( + + loading ? ( +
+ +
+ ) : null + }} + /> + )} +
+ ); + } +); + +TaskCenterComponent.displayName = "TaskCenterComponent"; +export default TaskCenterComponent; diff --git a/client/src/components/task-center/task-center.container.jsx b/client/src/components/task-center/task-center.container.jsx new file mode 100644 index 000000000..9291b600d --- /dev/null +++ b/client/src/components/task-center/task-center.container.jsx @@ -0,0 +1,135 @@ +import { useCallback, useEffect, useMemo, useState } from "react"; +import { useQuery } from "@apollo/client"; +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors"; +import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket"; +import { useIsEmployee } from "../../utils/useIsEmployee"; +import TaskCenterComponent from "./task-center.component"; +import { setModalContext } from "../../redux/modals/modals.actions"; +import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from "../../graphql/tasks.queries"; + +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop, + currentUser: selectCurrentUser +}); + +const mapDispatchToProps = (dispatch) => ({ + setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" })) +}); + +const TaskCenterContainer = ({ + visible, + onClose, + bodyshop, + currentUser, + setTaskUpsertContext, + incompleteTaskCount +}) => { + const [tasks, setTasks] = useState([]); + const { isConnected } = useSocket(); + const isEmployee = useIsEmployee(bodyshop, currentUser); + + const assignedToId = useMemo(() => { + const employee = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email); + return employee?.id || null; + }, [bodyshop, currentUser]); + + // Query 1: Tasks with due dates + const { + data: dueDateData, + loading: dueLoading, + error: dueError + } = useQuery(QUERY_TASKS_WITH_DUE_DATES, { + variables: { + bodyshop: bodyshop?.id, + assigned_to: assignedToId, + order: [{ due_date: "asc" }, { created_at: "desc" }] + }, + skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email, + fetchPolicy: "cache-and-network", + pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL + }); + + // Query 2: Tasks with no due date (paginated) + const { + data: noDueDateData, + loading: noDueLoading, + error: noDueError, + fetchMore + } = useQuery(QUERY_TASKS_NO_DUE_DATE_PAGINATED, { + variables: { + bodyshop: bodyshop?.id, + assigned_to: assignedToId, + order: [{ priority: "asc" }, { created_at: "desc" }], + limit: INITIAL_TASKS, // Adjust this constant as needed + offset: 0 + }, + skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email, + fetchPolicy: "cache-and-network", + pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL + }); + + // Combine tasks from both queries + useEffect(() => { + const dueDateTasks = dueDateData?.tasks || []; + const noDueDateTasks = noDueDateData?.tasks || []; + setTasks([...dueDateTasks, ...noDueDateTasks]); + }, [dueDateData, noDueDateData]); + + const noDueDateLength = noDueDateData?.tasks?.length || 0; + const totalNoDueDate = noDueDateData?.tasks_aggregate?.aggregate?.count || 0; + const hasMore = noDueDateLength < totalNoDueDate; + + // Handle pagination for no-due-date tasks + const handleLoadMore = () => { + fetchMore({ + variables: { + offset: noDueDateData?.tasks?.length || 0 + }, + updateQuery: (prev, { fetchMoreResult }) => { + if (!fetchMoreResult) return prev; + return { + ...prev, + tasks: [...prev.tasks, ...fetchMoreResult.tasks], + tasks_aggregate: fetchMoreResult.tasks_aggregate + }; + } + }); + }; + + const handleTaskClick = useCallback( + (id) => { + const task = tasks.find((t) => t.id === id); + if (task) { + setTaskUpsertContext({ + context: { + existingTask: task + } + }); + } + }, + [tasks, setTaskUpsertContext] + ); + + const createNewTask = () => { + setTaskUpsertContext({ actions: {}, context: {} }); + }; + + return ( + + ); +}; + +export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer); diff --git a/client/src/components/task-center/task-center.styles.scss b/client/src/components/task-center/task-center.styles.scss new file mode 100644 index 000000000..062aa133d --- /dev/null +++ b/client/src/components/task-center/task-center.styles.scss @@ -0,0 +1,147 @@ +.task-center { + position: absolute; + top: 64px; + right: 0; + width: 500px; + max-width: 500px; + background: #fff; + color: rgba(0, 0, 0, 0.85); + border: 1px solid #d9d9d9; + border-radius: 6px; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); + z-index: 1000; + display: none; + overflow-x: hidden; + + &.visible { + display: block; + } + + .task-header { + padding: 4px 10px; + border-bottom: 1px solid #f0f0f0; + display: flex; + justify-content: space-between; + align-items: center; + background: #fafafa; + + h3 { + font-size: 14px; + margin: 0; + } + + .create-task-button { + border: none; + color: white; + padding: 4px 12px; + border-radius: 4px; + cursor: pointer; + font-weight: 500; + + &:hover { + background-color: #40a9ff; + } + } + } + + .task-section { + margin: 0; + padding: 0; + } + + .section-title { + padding: 0px 10px; + margin: 0px; + //font-size: 12px; + background: #f5f5f5; + font-weight: 650; + border-bottom: 1px solid #e8e8e8; + position: sticky; + top: 0; + z-index: 1; + } + + .task-row-container { + margin-top: 15px; + margin-bottom: 15px; + } + + .task-row { + cursor: pointer; + border-bottom: 1px solid #f0f0f0; + display: flex; + justify-content: space-between; + align-items: flex-start; + + &:hover { + background: #f5f5f5; + } + + .task-title-cell { + flex: 1; + padding: 6px 8px; + vertical-align: top; + //font-size: 12px; + line-height: 1.2; + max-width: 350px; // or whatever fits your layout + + .task-title { + font-size: 16px; + font-weight: 550; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; // Or a specific width if you want more control + display: inline-block; + vertical-align: middle; + } + + .task-ro-number { + margin-top: 20px; + color: #1677ff; + } + } + + .task-due-cell { + padding: 6px 8px; + vertical-align: top; + //font-size: 12px; + line-height: 1.2; + text-align: right; + white-space: nowrap; + color: rgba(0, 0, 0, 0.45); + } + } + + button { + margin: 8px auto; + padding: 4px 10px; + background-color: #1677ff; + color: white; + border: none; + border-radius: 4px; + //font-size: 12px; + cursor: pointer; + + &:hover { + background-color: #4096ff; + } + + &:disabled { + background-color: #d9d9d9; + cursor: not-allowed; + } + } + + .no-tasks-message, + .error-message { + padding: 16px; + text-align: center; + color: rgba(0, 0, 0, 0.45); + } + + .loading-footer { + padding: 16px; + text-align: center; + } +} diff --git a/client/src/components/task-list/task-list.component.jsx b/client/src/components/task-list/task-list.component.jsx index 3258f29a2..96a587908 100644 --- a/client/src/components/task-list/task-list.component.jsx +++ b/client/src/components/task-list/task-list.component.jsx @@ -4,13 +4,12 @@ import { DeleteFilled, DeleteOutlined, EditFilled, - ExclamationCircleFilled, PlusCircleFilled, SyncOutlined } from "@ant-design/icons"; import { Button, Card, Space, Switch, Table } from "antd"; import queryString from "query-string"; -import React, { useCallback, useEffect } from "react"; +import { useCallback, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link, useLocation, useNavigate } from "react-router-dom"; @@ -19,6 +18,7 @@ import { pageLimit } from "../../utils/config"; import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx"; import dayjs from "../../utils/day"; import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx"; +import PriorityLabel from "../../utils/tasksPriorityLabel.jsx"; /** * Task List Component @@ -54,47 +54,12 @@ const RemindAtRecord = ({ remindAt }) => { ); }; -/** - * Priority Label Component - * @param priority - * @returns {Element} - * @constructor - */ -const PriorityLabel = ({ priority }) => { - switch (priority) { - case 1: - return ( -
- High -
- ); - case 2: - return ( -
- Medium -
- ); - case 3: - return ( -
- Low -
- ); - default: - return ( -
- None -
- ); - } -}; - const mapDispatchToProps = (dispatch) => ({ // Existing dispatch props... setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" })) }); -const mapStateToProps = (state) => ({}); +const mapStateToProps = () => ({}); export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent); diff --git a/client/src/components/task-list/task-list.container.jsx b/client/src/components/task-list/task-list.container.jsx index bcf81b9ce..e34b9c199 100644 --- a/client/src/components/task-list/task-list.container.jsx +++ b/client/src/components/task-list/task-list.container.jsx @@ -4,7 +4,6 @@ import { useMutation, useQuery } from "@apollo/client"; import { MUTATION_TOGGLE_TASK_COMPLETED, MUTATION_TOGGLE_TASK_DELETED } from "../../graphql/tasks.queries.js"; import { pageLimit } from "../../utils/config.js"; import AlertComponent from "../alert/alert.component.jsx"; -import React from "react"; import TaskListComponent from "./task-list.component.jsx"; import { useTranslation } from "react-i18next"; import { connect, useDispatch } from "react-redux"; @@ -20,7 +19,7 @@ const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser }); -const mapDispatchToProps = (dispatch) => ({}); +const mapDispatchToProps = () => ({}); export default connect(mapStateToProps, mapDispatchToProps)(TaskListContainer); @@ -55,8 +54,8 @@ export function TaskListContainer({ bodyshop: bodyshop.id, [relationshipType]: relationshipId, deleted: deleted === "true", - completed: completed === "true", //TODO: Find where mine is set. - assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined, // replace currentUserID with the actual ID of the current user + completed: completed === "true", + assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined, offset: page ? (page - 1) * pageLimit : 0, limit: pageLimit, order: [ diff --git a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx b/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx index 562141a40..0c6482c9d 100644 --- a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx +++ b/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx @@ -1,5 +1,4 @@ import { Col, Form, Input, Row, Select, Switch } from "antd"; -import React from "react"; import { useTranslation } from "react-i18next"; import { createStructuredSelector } from "reselect"; import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js"; @@ -8,6 +7,7 @@ import { connect } from "react-redux"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx"; import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx"; import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx"; +import { Link } from "react-router-dom"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -42,7 +42,7 @@ export function TaskUpsertModalComponent({ ]; const generatePresets = (job) => { - if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected + if (!job || !selectedJobDetails) return datePickerPresets; const relativePresets = []; if (selectedJobDetails?.scheduled_completion) { @@ -97,13 +97,8 @@ export function TaskUpsertModalComponent({ }); }; - /** - * Change the selected job id - * @param jobId - */ const changeJobId = (jobId) => { setSelectedJobId(jobId || null); - // Reset the form fields when selectedJobId changes clearRelations(); }; @@ -163,6 +158,13 @@ export function TaskUpsertModalComponent({ required: true } ]} + extra={ + existingTask && selectedJobId ? ( +
+ {t("tasks.labels.go_to_job")} +
+ ) : null + } > - + + {t("tasks.links.go_to_bill")} ( + {selectedJobDetails?.bills?.find((bill) => bill.id === form.getFieldValue("billid"))?.invoice_number}) + + ) : null + } + >