Compare commits
No commits in common. "main" and "Kartik_Task_DailyProgress#1232" have entirely different histories.
main
...
Kartik_Tas
119
package-lock.json
generated
119
package-lock.json
generated
@ -809,9 +809,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@jridgewell/source-map": {
|
"node_modules/@jridgewell/source-map": {
|
||||||
"version": "0.3.11",
|
"version": "0.3.6",
|
||||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
|
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||||
"integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
|
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -1552,13 +1552,13 @@
|
|||||||
"peer": true
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "24.5.2",
|
"version": "22.13.13",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz",
|
||||||
"integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
|
"integrity": "sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"undici-types": "~7.12.0"
|
"undici-types": "~6.20.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/prop-types": {
|
"node_modules/@types/prop-types": {
|
||||||
@ -1835,10 +1835,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.15.0",
|
"version": "8.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
|
||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
|
||||||
"license": "MIT",
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@ -1846,19 +1845,6 @@
|
|||||||
"node": ">=0.4.0"
|
"node": ">=0.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/acorn-import-phases": {
|
|
||||||
"version": "1.0.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
|
|
||||||
"integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10.13.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"acorn": "^8.14.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/acorn-jsx": {
|
"node_modules/acorn-jsx": {
|
||||||
"version": "5.3.2",
|
"version": "5.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
||||||
@ -2639,9 +2625,9 @@
|
|||||||
"integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw=="
|
"integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw=="
|
||||||
},
|
},
|
||||||
"node_modules/enhanced-resolve": {
|
"node_modules/enhanced-resolve": {
|
||||||
"version": "5.18.3",
|
"version": "5.18.1",
|
||||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
|
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
|
||||||
"integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
|
"integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -2755,9 +2741,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/es-module-lexer": {
|
"node_modules/es-module-lexer": {
|
||||||
"version": "1.7.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
|
||||||
"integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
|
"integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true
|
"peer": true
|
||||||
},
|
},
|
||||||
@ -3152,9 +3138,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/fast-uri": {
|
"node_modules/fast-uri": {
|
||||||
"version": "3.1.0",
|
"version": "3.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
|
||||||
"integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
|
"integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
"type": "github",
|
"type": "github",
|
||||||
@ -5177,9 +5163,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/schema-utils": {
|
"node_modules/schema-utils": {
|
||||||
"version": "4.3.2",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
|
||||||
"integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
|
"integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -5581,28 +5567,24 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/tapable": {
|
"node_modules/tapable": {
|
||||||
"version": "2.2.3",
|
"version": "2.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||||
"integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
|
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/webpack"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/terser": {
|
"node_modules/terser": {
|
||||||
"version": "5.44.0",
|
"version": "5.39.0",
|
||||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
|
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
|
||||||
"integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
|
"integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
|
||||||
"license": "BSD-2-Clause",
|
"license": "BSD-2-Clause",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@jridgewell/source-map": "^0.3.3",
|
"@jridgewell/source-map": "^0.3.3",
|
||||||
"acorn": "^8.15.0",
|
"acorn": "^8.8.2",
|
||||||
"commander": "^2.20.0",
|
"commander": "^2.20.0",
|
||||||
"source-map-support": "~0.5.20"
|
"source-map-support": "~0.5.20"
|
||||||
},
|
},
|
||||||
@ -5795,9 +5777,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/undici-types": {
|
"node_modules/undici-types": {
|
||||||
"version": "7.12.0",
|
"version": "6.20.0",
|
||||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
|
||||||
"integrity": "sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==",
|
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true
|
"peer": true
|
||||||
},
|
},
|
||||||
@ -5925,9 +5907,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/watchpack": {
|
"node_modules/watchpack": {
|
||||||
"version": "2.4.4",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
|
||||||
"integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
|
"integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -5945,23 +5927,21 @@
|
|||||||
"license": "BSD-2-Clause"
|
"license": "BSD-2-Clause"
|
||||||
},
|
},
|
||||||
"node_modules/webpack": {
|
"node_modules/webpack": {
|
||||||
"version": "5.101.3",
|
"version": "5.98.0",
|
||||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.3.tgz",
|
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.98.0.tgz",
|
||||||
"integrity": "sha512-7b0dTKR3Ed//AD/6kkx/o7duS8H3f1a4w3BYpIriX4BzIhjkn4teo05cptsxvLesHFKK5KObnadmCHBwGc+51A==",
|
"integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/eslint-scope": "^3.7.7",
|
"@types/eslint-scope": "^3.7.7",
|
||||||
"@types/estree": "^1.0.8",
|
"@types/estree": "^1.0.6",
|
||||||
"@types/json-schema": "^7.0.15",
|
|
||||||
"@webassemblyjs/ast": "^1.14.1",
|
"@webassemblyjs/ast": "^1.14.1",
|
||||||
"@webassemblyjs/wasm-edit": "^1.14.1",
|
"@webassemblyjs/wasm-edit": "^1.14.1",
|
||||||
"@webassemblyjs/wasm-parser": "^1.14.1",
|
"@webassemblyjs/wasm-parser": "^1.14.1",
|
||||||
"acorn": "^8.15.0",
|
"acorn": "^8.14.0",
|
||||||
"acorn-import-phases": "^1.0.3",
|
|
||||||
"browserslist": "^4.24.0",
|
"browserslist": "^4.24.0",
|
||||||
"chrome-trace-event": "^1.0.2",
|
"chrome-trace-event": "^1.0.2",
|
||||||
"enhanced-resolve": "^5.17.3",
|
"enhanced-resolve": "^5.17.1",
|
||||||
"es-module-lexer": "^1.2.1",
|
"es-module-lexer": "^1.2.1",
|
||||||
"eslint-scope": "5.1.1",
|
"eslint-scope": "5.1.1",
|
||||||
"events": "^3.2.0",
|
"events": "^3.2.0",
|
||||||
@ -5971,11 +5951,11 @@
|
|||||||
"loader-runner": "^4.2.0",
|
"loader-runner": "^4.2.0",
|
||||||
"mime-types": "^2.1.27",
|
"mime-types": "^2.1.27",
|
||||||
"neo-async": "^2.6.2",
|
"neo-async": "^2.6.2",
|
||||||
"schema-utils": "^4.3.2",
|
"schema-utils": "^4.3.0",
|
||||||
"tapable": "^2.1.1",
|
"tapable": "^2.1.1",
|
||||||
"terser-webpack-plugin": "^5.3.11",
|
"terser-webpack-plugin": "^5.3.11",
|
||||||
"watchpack": "^2.4.1",
|
"watchpack": "^2.4.1",
|
||||||
"webpack-sources": "^3.3.3"
|
"webpack-sources": "^3.2.3"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"webpack": "bin/webpack.js"
|
"webpack": "bin/webpack.js"
|
||||||
@ -5994,22 +5974,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/webpack-sources": {
|
"node_modules/webpack-sources": {
|
||||||
"version": "3.3.3",
|
"version": "3.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
|
||||||
"integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
|
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10.13.0"
|
"node": ">=10.13.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/webpack/node_modules/@types/estree": {
|
|
||||||
"version": "1.0.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
|
||||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
|
||||||
"license": "MIT",
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/webpack/node_modules/eslint-scope": {
|
"node_modules/webpack/node_modules/eslint-scope": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
|
||||||
|
|||||||
@ -9,274 +9,4 @@
|
|||||||
}
|
}
|
||||||
.table_header_border {
|
.table_header_border {
|
||||||
border-bottom:2px solid var(--bs-table-border-color) ;
|
border-bottom:2px solid var(--bs-table-border-color) ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.text-xxs { font-size: 0.55rem; } /* 8px */
|
|
||||||
.text-xs { font-size: 0.75rem; } /* 12px */
|
|
||||||
.text-sm { font-size: 0.875rem; } /* 14px */
|
|
||||||
.text-base { font-size: 1rem; } /* 16px */
|
|
||||||
.text-lg { font-size: 1.125rem; } /* 18px */
|
|
||||||
.text-xl { font-size: 1.25rem; } /* 20px */
|
|
||||||
.text-2xl { font-size: 1.5rem; } /* 24px */
|
|
||||||
.text-3xl { font-size: 1.875rem; } /* 30px */
|
|
||||||
.text-4xl { font-size: 2.25rem; } /* 36px */
|
|
||||||
.text-5xl { font-size: 3rem; } /* 48px */
|
|
||||||
.text-6xl { font-size: 3.75rem; } /* 60px */
|
|
||||||
.text-7xl { font-size: 4.5rem; } /* 72px */
|
|
||||||
.text-8xl { font-size: 6rem; } /* 96px */
|
|
||||||
.text-9xl { font-size: 8rem; } /* 128px */
|
|
||||||
|
|
||||||
|
|
||||||
/* */
|
|
||||||
|
|
||||||
.w-0 { width: 0px; }
|
|
||||||
.w-px { width: 1px; }
|
|
||||||
.w-1 { width: 0.25rem; } /* 4px */
|
|
||||||
.w-2 { width: 0.5rem; } /* 8px */
|
|
||||||
.w-3 { width: 0.75rem; } /* 12px */
|
|
||||||
.w-4 { width: 1rem; } /* 16px */
|
|
||||||
.w-5 { width: 1.25rem; } /* 20px */
|
|
||||||
.w-6 { width: 1.5rem; } /* 24px */
|
|
||||||
.w-8 { width: 2rem; } /* 32px */
|
|
||||||
.w-10 { width: 2.5rem; } /* 40px */
|
|
||||||
.w-12 { width: 3rem; } /* 48px */
|
|
||||||
.w-16 { width: 4rem; } /* 64px */
|
|
||||||
.w-20 { width: 5rem; } /* 80px */
|
|
||||||
.w-24 { width: 6rem; } /* 96px */
|
|
||||||
.w-32 { width: 8rem; } /* 128px */
|
|
||||||
.w-40 { width: 10rem; } /* 160px */
|
|
||||||
.w-48 { width: 12rem; } /* 192px */
|
|
||||||
.w-56 { width: 14rem; } /* 224px */
|
|
||||||
.w-64 { width: 16rem; } /* 256px */
|
|
||||||
.w-auto { width: auto; }
|
|
||||||
.w-full { width: 100%; }
|
|
||||||
.w-screen{ width: 100vw; }
|
|
||||||
.w-min { width: min-content; }
|
|
||||||
.w-max { width: max-content; }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.h-0 { height: 0px; }
|
|
||||||
.h-px { height: 1px; }
|
|
||||||
.h-1 { height: 0.25rem; } /* 4px */
|
|
||||||
.h-2 { height: 0.5rem; } /* 8px */
|
|
||||||
.h-3 { height: 0.75rem; } /* 12px */
|
|
||||||
.h-4 { height: 1rem; } /* 16px */
|
|
||||||
.h-5 { height: 1.25rem; } /* 20px */
|
|
||||||
.h-6 { height: 1.5rem; } /* 24px */
|
|
||||||
.h-8 { height: 2rem; } /* 32px */
|
|
||||||
.h-10 { height: 2.5rem; } /* 40px */
|
|
||||||
.h-12 { height: 3rem; } /* 48px */
|
|
||||||
.h-16 { height: 4rem; } /* 64px */
|
|
||||||
.h-20 { height: 5rem; } /* 80px */
|
|
||||||
.h-24 { height: 6rem; } /* 96px */
|
|
||||||
.h-32 { height: 8rem; } /* 128px */
|
|
||||||
.h-40 { height: 10rem; } /* 160px */
|
|
||||||
.h-48 { height: 12rem; } /* 192px */
|
|
||||||
.h-56 { height: 14rem; } /* 224px */
|
|
||||||
.h-64 { height: 16rem; } /* 256px */
|
|
||||||
.h-auto { height: auto; }
|
|
||||||
.h-full { height: 100%; }
|
|
||||||
.h-screen{ height: 100vh; }
|
|
||||||
.h-min { height: min-content; }
|
|
||||||
.h-max { height: max-content; }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ==========================
|
|
||||||
Base Font Sizes (mobile first)
|
|
||||||
========================== */
|
|
||||||
.text-xxs { font-size: 0.55rem; } /* 8px */
|
|
||||||
.text-xs { font-size: 0.75rem; } /* 12px */
|
|
||||||
.text-sm { font-size: 0.875rem; } /* 14px */
|
|
||||||
.text-base{ font-size: 1rem; } /* 16px */
|
|
||||||
.text-lg { font-size: 1.125rem; } /* 18px */
|
|
||||||
.text-xl { font-size: 1.25rem; } /* 20px */
|
|
||||||
.text-2xl { font-size: 1.5rem; } /* 24px */
|
|
||||||
.text-3xl { font-size: 1.875rem; } /* 30px */
|
|
||||||
.text-4xl { font-size: 2.25rem; } /* 36px */
|
|
||||||
.text-5xl { font-size: 3rem; } /* 48px */
|
|
||||||
.text-6xl { font-size: 3.75rem; } /* 60px */
|
|
||||||
.text-7xl { font-size: 4.5rem; } /* 72px */
|
|
||||||
.text-8xl { font-size: 6rem; } /* 96px */
|
|
||||||
.text-9xl { font-size: 8rem; } /* 128px */
|
|
||||||
|
|
||||||
/* ==========================
|
|
||||||
Base Heights
|
|
||||||
========================== */
|
|
||||||
.h-0 { height: 0; }
|
|
||||||
.h-px { height: 1px; }
|
|
||||||
.h-1 { height: 0.25rem; } /* 4px */
|
|
||||||
.h-2 { height: 0.5rem; } /* 8px */
|
|
||||||
.h-3 { height: 0.75rem; } /* 12px */
|
|
||||||
.h-4 { height: 1rem; } /* 16px */
|
|
||||||
.h-5 { height: 1.25rem; } /* 20px */
|
|
||||||
.h-6 { height: 1.5rem; } /* 24px */
|
|
||||||
.h-8 { height: 2rem; } /* 32px */
|
|
||||||
.h-10 { height: 2.5rem; } /* 40px */
|
|
||||||
.h-12 { height: 3rem; } /* 48px */
|
|
||||||
.h-16 { height: 4rem; } /* 64px */
|
|
||||||
.h-20 { height: 5rem; } /* 80px */
|
|
||||||
.h-24 { height: 6rem; } /* 96px */
|
|
||||||
.h-32 { height: 8rem; } /* 128px */
|
|
||||||
.h-40 { height: 10rem; } /* 160px */
|
|
||||||
.h-48 { height: 12rem; } /* 192px */
|
|
||||||
.h-56 { height: 14rem; } /* 224px */
|
|
||||||
.h-64 { height: 16rem; } /* 256px */
|
|
||||||
.h-full { height: 100%; }
|
|
||||||
.h-screen{ height: 100vh; }
|
|
||||||
|
|
||||||
/* ==========================
|
|
||||||
Base Widths
|
|
||||||
========================== */
|
|
||||||
.w-0 { width: 0; }
|
|
||||||
.w-px { width: 1px; }
|
|
||||||
.w-1 { width: 0.25rem; }
|
|
||||||
.w-2 { width: 0.5rem; }
|
|
||||||
.w-3 { width: 0.75rem; }
|
|
||||||
.w-4 { width: 1rem; }
|
|
||||||
.w-5 { width: 1.25rem; }
|
|
||||||
.w-6 { width: 1.5rem; }
|
|
||||||
.w-8 { width: 2rem; }
|
|
||||||
.w-10 { width: 2.5rem; }
|
|
||||||
.w-12 { width: 3rem; }
|
|
||||||
.w-16 { width: 4rem; }
|
|
||||||
.w-20 { width: 5rem; }
|
|
||||||
.w-24 { width: 6rem; }
|
|
||||||
.w-32 { width: 8rem; }
|
|
||||||
.w-40 { width: 10rem; }
|
|
||||||
.w-48 { width: 12rem; }
|
|
||||||
.w-56 { width: 14rem; }
|
|
||||||
.w-64 { width: 16rem; }
|
|
||||||
.w-full { width: 100%; }
|
|
||||||
.w-screen{ width: 100vw; }
|
|
||||||
|
|
||||||
/* ==========================
|
|
||||||
Responsive Variants
|
|
||||||
========================== */
|
|
||||||
@media (min-width: 576px) { /* sm */
|
|
||||||
/* Font */
|
|
||||||
.text-xxs-sm { font-size: 0.55rem; }
|
|
||||||
.text-xs-sm { font-size: 0.75rem; }
|
|
||||||
.text-sm-sm { font-size: 0.875rem; }
|
|
||||||
.text-base-sm{ font-size: 1rem; }
|
|
||||||
.text-lg-sm { font-size: 1.125rem; }
|
|
||||||
.text-xl-sm { font-size: 1.25rem; }
|
|
||||||
.text-2xl-sm{ font-size: 1.5rem; }
|
|
||||||
|
|
||||||
/* Height */
|
|
||||||
.h-1-sm{ height: 0.25rem; }
|
|
||||||
.h-2-sm{ height: 0.5rem; }
|
|
||||||
.h-3-sm{ height: 0.75rem; }
|
|
||||||
.h-4-sm{ height: 1rem; }
|
|
||||||
.h-5-sm{ height: 1.25rem; }
|
|
||||||
.h-6-sm{ height: 1.5rem; }
|
|
||||||
.h-8-sm{ height: 2rem; }
|
|
||||||
.h-10-sm{ height: 2.5rem; }
|
|
||||||
|
|
||||||
/* Width */
|
|
||||||
.w-1-sm{ width: 0.25rem; }
|
|
||||||
.w-2-sm{ width: 0.5rem; }
|
|
||||||
.w-3-sm{ width: 0.75rem; }
|
|
||||||
.w-4-sm{ width: 1rem; }
|
|
||||||
.w-5-sm{ width: 1.25rem; }
|
|
||||||
.w-6-sm{ width: 1.5rem; }
|
|
||||||
.w-8-sm{ width: 2rem; }
|
|
||||||
.w-10-sm{ width: 2.5rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) { /* md */
|
|
||||||
/* Font */
|
|
||||||
.text-xxs-md { font-size: 0.55rem; }
|
|
||||||
.text-xs-md { font-size: 0.75rem; }
|
|
||||||
.text-sm-md { font-size: 0.875rem; }
|
|
||||||
.text-base-md{ font-size: 1rem; }
|
|
||||||
.text-lg-md { font-size: 1.125rem; }
|
|
||||||
.text-xl-md { font-size: 1.25rem; }
|
|
||||||
.text-2xl-md{ font-size: 1.5rem; }
|
|
||||||
|
|
||||||
/* Height */
|
|
||||||
.h-1-md{ height: 0.25rem; }
|
|
||||||
.h-2-md{ height: 0.5rem; }
|
|
||||||
.h-3-md{ height: 0.75rem; }
|
|
||||||
.h-4-md{ height: 1rem; }
|
|
||||||
.h-5-md{ height: 1.25rem; }
|
|
||||||
.h-6-md{ height: 1.5rem; }
|
|
||||||
.h-8-md{ height: 2rem; }
|
|
||||||
.h-10-md{ height: 2.5rem; }
|
|
||||||
|
|
||||||
/* Width */
|
|
||||||
.w-1-md{ width: 0.25rem; }
|
|
||||||
.w-2-md{ width: 0.5rem; }
|
|
||||||
.w-3-md{ width: 0.75rem; }
|
|
||||||
.w-4-md{ width: 1rem; }
|
|
||||||
.w-5-md{ width: 1.25rem; }
|
|
||||||
.w-6-md{ width: 1.5rem; }
|
|
||||||
.w-8-md{ width: 2rem; }
|
|
||||||
.w-10-md{ width: 2.5rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) { /* lg */
|
|
||||||
/* Font */
|
|
||||||
.text-xxs-lg { font-size: 0.55rem; }
|
|
||||||
.text-xs-lg { font-size: 0.75rem; }
|
|
||||||
.text-sm-lg { font-size: 0.875rem; }
|
|
||||||
.text-base-lg{ font-size: 1rem; }
|
|
||||||
.text-lg-lg { font-size: 1.125rem; }
|
|
||||||
.text-xl-lg { font-size: 1.25rem; }
|
|
||||||
.text-2xl-lg{ font-size: 1.5rem; }
|
|
||||||
|
|
||||||
/* Height */
|
|
||||||
.h-1-lg{ height: 0.25rem; }
|
|
||||||
.h-2-lg{ height: 0.5rem; }
|
|
||||||
.h-3-lg{ height: 0.75rem; }
|
|
||||||
.h-4-lg{ height: 1rem; }
|
|
||||||
.h-5-lg{ height: 1.25rem; }
|
|
||||||
.h-6-lg{ height: 1.5rem; }
|
|
||||||
.h-8-lg{ height: 2rem; }
|
|
||||||
.h-10-lg{ height: 2.5rem; }
|
|
||||||
|
|
||||||
/* Width */
|
|
||||||
.w-1-lg{ width: 0.25rem; }
|
|
||||||
.w-2-lg{ width: 0.5rem; }
|
|
||||||
.w-3-lg{ width: 0.75rem; }
|
|
||||||
.w-4-lg{ width: 1rem; }
|
|
||||||
.w-5-lg{ width: 1.25rem; }
|
|
||||||
.w-6-lg{ width: 1.5rem; }
|
|
||||||
.w-8-lg{ width: 2rem; }
|
|
||||||
.w-10-lg{ width: 2.5rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) { /* xl */
|
|
||||||
/* Font */
|
|
||||||
.text-xxs-xl { font-size: 0.55rem; }
|
|
||||||
.text-xs-xl { font-size: 0.75rem; }
|
|
||||||
.text-sm-xl { font-size: 0.875rem; }
|
|
||||||
.text-base-xl{ font-size: 1rem; }
|
|
||||||
.text-lg-xl { font-size: 1.125rem; }
|
|
||||||
.text-xl-xl { font-size: 1.25rem; }
|
|
||||||
.text-2xl-xl{ font-size: 1.5rem; }
|
|
||||||
|
|
||||||
/* Height */
|
|
||||||
.h-1-xl{ height: 0.25rem; }
|
|
||||||
.h-2-xl{ height: 0.5rem; }
|
|
||||||
.h-3-xl{ height: 0.75rem; }
|
|
||||||
.h-4-xl{ height: 1rem; }
|
|
||||||
.h-5-xl{ height: 1.25rem; }
|
|
||||||
.h-6-xl{ height: 1.5rem; }
|
|
||||||
.h-8-xl{ height: 2rem; }
|
|
||||||
.h-10-xl{ height: 2.5rem; }
|
|
||||||
|
|
||||||
/* Width */
|
|
||||||
.w-1-xl{ width: 0.25rem; }
|
|
||||||
.w-2-xl{ width: 0.5rem; }
|
|
||||||
.w-3-xl{ width: 0.75rem; }
|
|
||||||
.w-4-xl{ width: 1rem; }
|
|
||||||
.w-5-xl{ width: 1.25rem; }
|
|
||||||
.w-6-xl{ width: 1.5rem; }
|
|
||||||
.w-8-xl{ width: 2rem; }
|
|
||||||
.w-10-xl{ width: 2.5rem; }
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect width="120" height="120" fill="#EFF1F3"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z" fill="#687787"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 888 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
4
public/assets/vendor/css/core.css
vendored
4
public/assets/vendor/css/core.css
vendored
@ -18613,10 +18613,6 @@ li:not(:first-child) .dropdown-item,
|
|||||||
min-height: 70vh !important;
|
min-height: 70vh !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-min-h{
|
|
||||||
min-height: 60vh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-fill {
|
.flex-fill {
|
||||||
flex: 1 1 auto !important;
|
flex: 1 1 auto !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,12 @@
|
|||||||
import React, { useEffect } from "react";
|
import React from 'react'
|
||||||
import { useOrganizationModal } from "./hooks/useOrganization";
|
import ManageOrganization from './components/Organization/ManageOrganization'
|
||||||
import OrganizationModal from "./components/Organization/OrganizationModal";
|
import { useOrganizationModal } from './hooks/useOrganization';
|
||||||
import { useAuthModal, useModal } from "./hooks/useAuth";
|
|
||||||
import SwitchTenant from "./pages/authentication/SwitchTenant";
|
|
||||||
import ChangePasswordPage from "./pages/authentication/ChangePassword";
|
|
||||||
|
|
||||||
const ModalProvider = () => {
|
const ModalProvider = () => {
|
||||||
const { isOpen, onClose } = useOrganizationModal();
|
const { isOpen } = useOrganizationModal();
|
||||||
const { isOpen: isAuthOpen } = useAuthModal();
|
|
||||||
const {isOpen:isChangePass} = useModal("ChangePassword")
|
|
||||||
|
|
||||||
return (
|
return <>{isOpen && <ManageOrganization />}</>;
|
||||||
<>
|
|
||||||
{isOpen && <OrganizationModal />}
|
|
||||||
{isAuthOpen && <SwitchTenant />}
|
|
||||||
{isChangePass && <ChangePasswordPage /> }
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ModalProvider;
|
|
||||||
|
export default ModalProvider
|
||||||
@ -12,19 +12,22 @@ import { useQueryClient } from "@tanstack/react-query";
|
|||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||||
|
|
||||||
const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, }) => {
|
const Attendance = ({ getRole, handleModalData, searchTerm }) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [todayDate, setTodayDate] = useState(new Date());
|
const [todayDate, setTodayDate] = useState(new Date());
|
||||||
const [ShowPending, setShowPending] = useState(false);
|
const [ShowPending, setShowPending] = useState(false);
|
||||||
|
// const selectedProject = useSelector(
|
||||||
|
// (store) => store.localVariables.projectId
|
||||||
|
// );
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const {
|
const {
|
||||||
attendance,
|
attendance,
|
||||||
loading: attLoading,
|
loading: attLoading,
|
||||||
recall: attrecall,
|
recall: attrecall,
|
||||||
isFetching
|
isFetching
|
||||||
} = useAttendance(selectedProject, organizationId);
|
} = useAttendance(selectedProject);
|
||||||
const filteredAttendance = ShowPending
|
const filteredAttendance = ShowPending
|
||||||
? attendance?.filter(
|
? attendance?.filter(
|
||||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||||
@ -59,11 +62,12 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
|||||||
const role = item.jobRoleName?.toLowerCase() || "";
|
const role = item.jobRoleName?.toLowerCase() || "";
|
||||||
return (
|
return (
|
||||||
fullName.includes(lowercasedSearchTerm) ||
|
fullName.includes(lowercasedSearchTerm) ||
|
||||||
role.includes(lowercasedSearchTerm) // also search by role
|
role.includes(lowercasedSearchTerm) // ✅ also search by role
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}, [group1, group2, searchTerm]);
|
}, [group1, group2, searchTerm]);
|
||||||
|
|
||||||
|
|
||||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||||
finalFilteredData,
|
finalFilteredData,
|
||||||
ITEMS_PER_PAGE
|
ITEMS_PER_PAGE
|
||||||
@ -112,7 +116,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
|||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="table-responsive text-nowrap h-100"
|
className="table-responsive text-nowrap h-100"
|
||||||
style={{ minHeight: "200px" }} // Ensures fixed height
|
style={{ minHeight: "200px" }} // 🔹 Ensures fixed height
|
||||||
>
|
>
|
||||||
<div className="d-flex text-start align-items-center py-2">
|
<div className="d-flex text-start align-items-center py-2">
|
||||||
<strong>Date : {formatUTCToLocalTime(todayDate)}</strong>
|
<strong>Date : {formatUTCToLocalTime(todayDate)}</strong>
|
||||||
@ -138,7 +142,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
|||||||
<tr className="border-top-1">
|
<tr className="border-top-1">
|
||||||
<th colSpan={2}>Name</th>
|
<th colSpan={2}>Name</th>
|
||||||
<th>Role</th>
|
<th>Role</th>
|
||||||
<th>Organization</th>
|
|
||||||
<th>
|
<th>
|
||||||
<i className="bx bxs-down-arrow-alt text-success"></i>
|
<i className="bx bxs-down-arrow-alt text-success"></i>
|
||||||
Check-In
|
Check-In
|
||||||
@ -187,8 +190,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>{item.jobRoleName}</td>
|
<td>{item.jobRoleName}</td>
|
||||||
<td>{item.organizationName || "--"}</td>
|
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
{item.checkInTime
|
{item.checkInTime
|
||||||
? convertShortTime(item.checkInTime)
|
? convertShortTime(item.checkInTime)
|
||||||
@ -212,11 +213,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
|||||||
))}
|
))}
|
||||||
{!attendance && (
|
{!attendance && (
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td colSpan={6} className="text-center text-secondary" style={{ height: "200px" }}>
|
||||||
colSpan={7}
|
|
||||||
className="text-center text-secondary"
|
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
|
||||||
No employees assigned to the project!
|
No employees assigned to the project!
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -224,7 +221,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
{!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
|
{!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
|
||||||
<nav aria-label="Page ">
|
<nav aria-label="Page ">
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||||
|
|||||||
@ -5,11 +5,7 @@ import { convertShortTime } from "../../utils/dateUtils";
|
|||||||
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||||
import { useSelector, useDispatch } from "react-redux";
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
import DateRangePicker from "../common/DateRangePicker";
|
import DateRangePicker from "../common/DateRangePicker";
|
||||||
import {
|
import { clearCacheKey, getCachedData, useSelectedProject } from "../../slices/apiDataManager";
|
||||||
clearCacheKey,
|
|
||||||
getCachedData,
|
|
||||||
useSelectedProject,
|
|
||||||
} from "../../slices/apiDataManager";
|
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||||
import { useAttendancesLogs } from "../../hooks/useAttendance";
|
import { useAttendancesLogs } from "../../hooks/useAttendance";
|
||||||
@ -37,142 +33,195 @@ const usePagination = (data, itemsPerPage) => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
const AttendanceLog = ({ handleModalData, searchTerm }) => {
|
||||||
const selectedProject = useSelectedProject();
|
// const selectedProject = useSelector(
|
||||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
// (store) => store.localVariables.projectId
|
||||||
const dispatch = useDispatch();
|
// );
|
||||||
const [loading, setLoading] = useState(false);
|
const selectedProject = useSelectedProject();
|
||||||
const [showPending, setShowPending] = useState(false);
|
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
const dispatch = useDispatch();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showPending, setShowPending] = useState(false)
|
||||||
|
|
||||||
const today = new Date();
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||||
today.setHours(0, 0, 0, 0);
|
const [processedData, setProcessedData] = useState([]);
|
||||||
|
|
||||||
const yesterday = new Date();
|
const today = new Date();
|
||||||
yesterday.setDate(yesterday.getDate() - 1);
|
today.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
const isSameDay = (dateStr) => {
|
const yesterday = new Date();
|
||||||
if (!dateStr) return false;
|
yesterday.setDate(yesterday.getDate() - 1);
|
||||||
const d = new Date(dateStr);
|
|
||||||
d.setHours(0, 0, 0, 0);
|
|
||||||
return d.getTime() === today.getTime();
|
|
||||||
};
|
|
||||||
|
|
||||||
const isBeforeToday = (dateStr) => {
|
const isSameDay = (dateStr) => {
|
||||||
if (!dateStr) return false;
|
if (!dateStr) return false;
|
||||||
const d = new Date(dateStr);
|
const d = new Date(dateStr);
|
||||||
d.setHours(0, 0, 0, 0);
|
d.setHours(0, 0, 0, 0);
|
||||||
return d.getTime() < today.getTime();
|
return d.getTime() === today.getTime();
|
||||||
};
|
};
|
||||||
|
|
||||||
const sortByName = (a, b) => {
|
const isBeforeToday = (dateStr) => {
|
||||||
const nameA = (a.firstName + a.lastName).toLowerCase();
|
if (!dateStr) return false;
|
||||||
const nameB = (b.firstName + b.lastName).toLowerCase();
|
const d = new Date(dateStr);
|
||||||
return nameA.localeCompare(nameB);
|
d.setHours(0, 0, 0, 0);
|
||||||
};
|
return d.getTime() < today.getTime();
|
||||||
|
};
|
||||||
|
|
||||||
const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
|
const sortByName = (a, b) => {
|
||||||
selectedProject,
|
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||||
dateRange.startDate,
|
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||||
dateRange.endDate,
|
return nameA?.localeCompare(nameB);
|
||||||
organizationId
|
};
|
||||||
);
|
|
||||||
|
|
||||||
const processedData = useMemo(() => {
|
const {
|
||||||
const filteredData = showPending
|
data = [],
|
||||||
? data.filter((item) => item.checkOutTime === null)
|
isLoading,
|
||||||
: data;
|
error,
|
||||||
|
refetch,
|
||||||
const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
|
isFetching,
|
||||||
const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
|
} = useAttendancesLogs(
|
||||||
const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
|
selectedProject,
|
||||||
const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
|
dateRange.startDate,
|
||||||
const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName);
|
dateRange.endDate
|
||||||
const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
|
|
||||||
|
|
||||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
|
||||||
|
|
||||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
|
||||||
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
|
||||||
if (date) {
|
|
||||||
acc[date] = acc[date] || [];
|
|
||||||
acc[date].push(item);
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
|
|
||||||
return sortedDates.flatMap((date) => groupedByDate[date]);
|
|
||||||
}, [data, showPending]);
|
|
||||||
|
|
||||||
const filteredSearchData = useMemo(() => {
|
|
||||||
if (!searchTerm) return processedData;
|
|
||||||
|
|
||||||
const lowercased = searchTerm.toLowerCase();
|
|
||||||
return processedData.filter((item) =>
|
|
||||||
`${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
|
|
||||||
);
|
);
|
||||||
}, [processedData, searchTerm]);
|
const filtering = (data) => {
|
||||||
|
const filteredData = showPending
|
||||||
|
? data.filter((item) => item.checkOutTime === null)
|
||||||
|
: data;
|
||||||
|
|
||||||
const {
|
const group1 = filteredData
|
||||||
currentPage,
|
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||||
totalPages,
|
.sort(sortByName);
|
||||||
currentItems: paginatedAttendances,
|
const group2 = filteredData
|
||||||
paginate,
|
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||||
resetPage,
|
.sort(sortByName);
|
||||||
} = usePagination(filteredSearchData, 20);
|
const group3 = filteredData
|
||||||
|
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||||
|
.sort(sortByName);
|
||||||
|
const group4 = filteredData.filter(
|
||||||
|
(d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
|
||||||
|
);
|
||||||
|
const group5 = filteredData
|
||||||
|
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||||
|
.sort(sortByName);
|
||||||
|
const group6 = filteredData
|
||||||
|
.filter((d) => d.activity === 5)
|
||||||
|
.sort(sortByName);
|
||||||
|
|
||||||
useEffect(() => {
|
const sortedList = [
|
||||||
resetPage();
|
...group1,
|
||||||
}, [filteredSearchData]);
|
...group2,
|
||||||
|
...group3,
|
||||||
|
...group4,
|
||||||
|
...group5,
|
||||||
|
...group6,
|
||||||
|
];
|
||||||
|
|
||||||
const handler = useCallback(
|
// Group by date
|
||||||
(msg) => {
|
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||||
const { startDate, endDate } = dateRange;
|
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
||||||
const checkIn = msg.response.checkInTime.substring(0, 10);
|
if (date) {
|
||||||
|
acc[date] = acc[date] || [];
|
||||||
|
acc[date].push(item);
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
|
const sortedDates = Object.keys(groupedByDate).sort(
|
||||||
queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
|
(a, b) => new Date(b) - new Date(a)
|
||||||
if (!oldData) {
|
);
|
||||||
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
|
|
||||||
return;
|
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||||
}
|
setProcessedData(finalData);
|
||||||
return oldData.map((record) =>
|
};
|
||||||
record.id === msg.response.id ? { ...record, ...msg.response } : record
|
|
||||||
);
|
useEffect(() => {
|
||||||
});
|
filtering(data);
|
||||||
resetPage();
|
}, [data, showPending]);
|
||||||
|
|
||||||
|
// New useEffect to handle search filtering
|
||||||
|
const filteredSearchData = useMemo(() => {
|
||||||
|
if (!searchTerm) {
|
||||||
|
return processedData;
|
||||||
}
|
}
|
||||||
},
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||||
[selectedProject, dateRange, resetPage]
|
return processedData.filter((item) => {
|
||||||
);
|
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||||
|
return fullName.includes(lowercasedSearchTerm);
|
||||||
|
});
|
||||||
|
}, [processedData, searchTerm]);
|
||||||
|
|
||||||
useEffect(() => {
|
const {
|
||||||
eventBus.on("attendance_log", handler);
|
currentPage,
|
||||||
return () => eventBus.off("attendance_log", handler);
|
totalPages,
|
||||||
}, [handler]);
|
currentItems: paginatedAttendances,
|
||||||
|
paginate,
|
||||||
|
resetPage,
|
||||||
|
} = usePagination(filteredSearchData, 20);
|
||||||
|
|
||||||
const employeeHandler = useCallback(
|
useEffect(() => {
|
||||||
(msg) => {
|
resetPage();
|
||||||
const { startDate, endDate } = dateRange;
|
}, [filteredSearchData, resetPage]);
|
||||||
if (data.some((item) => item.employeeId == msg.employeeId)) {
|
|
||||||
refetch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[data, refetch]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
const handler = useCallback(
|
||||||
eventBus.on("employee", employeeHandler);
|
(msg) => {
|
||||||
return () => eventBus.off("employee", employeeHandler);
|
const { startDate, endDate } = dateRange;
|
||||||
}, [employeeHandler]);
|
const checkIn = msg.response.checkInTime.substring(0, 10);
|
||||||
|
if (
|
||||||
|
selectedProject === msg.projectId &&
|
||||||
|
startDate <= checkIn &&
|
||||||
|
checkIn <= endDate
|
||||||
|
) {
|
||||||
|
queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
|
||||||
|
if (!oldData) {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const updatedAttendance = oldData.map((record) =>
|
||||||
|
record.id === msg.response.id
|
||||||
|
? { ...record, ...msg.response }
|
||||||
|
: record
|
||||||
|
);
|
||||||
|
filtering(updatedAttendance);
|
||||||
|
return updatedAttendance;
|
||||||
|
});
|
||||||
|
resetPage();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[selectedProject, dateRange, filtering, resetPage]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
eventBus.on("attendance_log", handler);
|
||||||
|
return () => eventBus.off("attendance_log", handler);
|
||||||
|
}, [handler]);
|
||||||
|
|
||||||
|
const employeeHandler = useCallback(
|
||||||
|
(msg) => {
|
||||||
|
const { startDate, endDate } = dateRange;
|
||||||
|
if (data.some((item) => item.employeeId == msg.employeeId)) {
|
||||||
|
// dispatch(
|
||||||
|
// fetchAttendanceData({
|
||||||
|
// ,
|
||||||
|
// fromDate: startDate,
|
||||||
|
// toDate: endDate,
|
||||||
|
// })
|
||||||
|
// );
|
||||||
|
|
||||||
|
refetch()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[selectedProject, dateRange, data, refetch]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
eventBus.on("employee", employeeHandler);
|
||||||
|
return () => eventBus.off("employee", employeeHandler);
|
||||||
|
}, [employeeHandler]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||||
id="DataTables_Table_0_length"
|
id="DataTables_Table_0_length"
|
||||||
>
|
>
|
||||||
<div className="d-flex align-items-center my-0 ">
|
<div className="d-flex align-items-center my-0 ">
|
||||||
@ -180,7 +229,7 @@ useEffect(() => {
|
|||||||
onRangeChange={setDateRange}
|
onRangeChange={setDateRange}
|
||||||
defaultStartDate={yesterday}
|
defaultStartDate={yesterday}
|
||||||
/>
|
/>
|
||||||
<div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
|
<div className="form-check form-switch text-start m-0 ms-5">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
@ -193,16 +242,18 @@ useEffect(() => {
|
|||||||
<label className="form-check-label ms-0">Show Pending</label>
|
<label className="form-check-label ms-0">Show Pending</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-md-2 m-0 text-end">
|
||||||
|
<i
|
||||||
|
className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
|
||||||
|
}`}
|
||||||
|
title="Refresh"
|
||||||
|
onClick={() => refetch()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
|
||||||
className="table-responsive text-nowrap"
|
|
||||||
style={{ minHeight: "200px" }}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div
|
<div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
|
||||||
className="d-flex justify-content-center align-items-center"
|
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
|
||||||
<p className="text-secondary">Loading...</p>
|
<p className="text-secondary">Loading...</p>
|
||||||
</div>
|
</div>
|
||||||
) : filteredSearchData?.length > 0 ? (
|
) : filteredSearchData?.length > 0 ? (
|
||||||
@ -213,7 +264,6 @@ useEffect(() => {
|
|||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
<th className="border-top-1">Date</th>
|
<th className="border-top-1">Date</th>
|
||||||
<th>Organization</th>
|
|
||||||
<th>
|
<th>
|
||||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||||
Check-In
|
Check-In
|
||||||
@ -232,9 +282,9 @@ useEffect(() => {
|
|||||||
const previousAttendance = arr[index - 1];
|
const previousAttendance = arr[index - 1];
|
||||||
const previousDate = previousAttendance
|
const previousDate = previousAttendance
|
||||||
? moment(
|
? moment(
|
||||||
previousAttendance.checkInTime ||
|
previousAttendance.checkInTime ||
|
||||||
previousAttendance.checkOutTime
|
previousAttendance.checkOutTime
|
||||||
).format("YYYY-MM-DD")
|
).format("YYYY-MM-DD")
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
if (!previousDate || currentDate !== previousDate) {
|
if (!previousDate || currentDate !== previousDate) {
|
||||||
@ -243,7 +293,7 @@ useEffect(() => {
|
|||||||
key={`header-${currentDate}`}
|
key={`header-${currentDate}`}
|
||||||
className="table-row-header"
|
className="table-row-header"
|
||||||
>
|
>
|
||||||
<td colSpan={8} className="text-start">
|
<td colSpan={6} className="text-start">
|
||||||
<strong>
|
<strong>
|
||||||
{moment(currentDate).format("DD-MM-YYYY")}
|
{moment(currentDate).format("DD-MM-YYYY")}
|
||||||
</strong>
|
</strong>
|
||||||
@ -273,7 +323,6 @@ useEffect(() => {
|
|||||||
attendance.checkInTime || attendance.checkOutTime
|
attendance.checkInTime || attendance.checkOutTime
|
||||||
).format("DD-MMM-YYYY")}
|
).format("DD-MMM-YYYY")}
|
||||||
</td>
|
</td>
|
||||||
<td>{attendance.organizationName || "--"}</td>
|
|
||||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||||
<td>
|
<td>
|
||||||
{attendance.checkOutTime
|
{attendance.checkOutTime
|
||||||
@ -295,12 +344,7 @@ useEffect(() => {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
) : (
|
) : (
|
||||||
<div className="my-12">
|
<div className="my-4"><span className="text-secondary">No Record Available !</span></div>
|
||||||
<span className="text-secondary">
|
|
||||||
No data available for the selected date range. Please Select
|
|
||||||
another date.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
|
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
|
||||||
@ -326,9 +370,8 @@ useEffect(() => {
|
|||||||
(pageNumber) => (
|
(pageNumber) => (
|
||||||
<li
|
<li
|
||||||
key={pageNumber}
|
key={pageNumber}
|
||||||
className={`page-item ${
|
className={`page-item ${currentPage === pageNumber ? "active" : ""
|
||||||
currentPage === pageNumber ? "active" : ""
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
@ -340,9 +383,8 @@ useEffect(() => {
|
|||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
<li
|
<li
|
||||||
className={`page-item ${
|
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||||
currentPage === totalPages ? "disabled" : ""
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
|
|||||||
@ -33,7 +33,7 @@ const createSchema = (modeldata) => {
|
|||||||
const checkOut = new Date(checkIn);
|
const checkOut = new Date(checkIn);
|
||||||
checkOut.setHours(hour, minute, 0, 0);
|
checkOut.setHours(hour, minute, 0, 0);
|
||||||
|
|
||||||
return checkOut >= checkIn;
|
return checkOut > checkIn;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}, {
|
}, {
|
||||||
@ -96,12 +96,12 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 d-flex justify-content-center mb-4">
|
<div className="col-12 d-flex justify-content-center">
|
||||||
<label className="fs-5 tex-semibold text-center">
|
<label className="fs-5 text-dark text-center">
|
||||||
{modeldata?.checkInTime && !modeldata?.checkOutTime
|
{modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||||
? "Check-Out "
|
? "Check-out :"
|
||||||
: "Check-In "}
|
: "Check-in :"}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -120,7 +120,7 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
|||||||
modeldata?.checkInTime && !modeldata?.checkOutTime
|
modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||||
? formatDate(modeldata?.checkInTime?.split("T")[0]) || ""
|
? formatDate(modeldata?.checkInTime?.split("T")[0]) || ""
|
||||||
: formatDate(today)
|
: formatDate(today)
|
||||||
}
|
}
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import "../../components/Project/ProjectInfra.css";
|
import "../../components/Project/ProjectInfra.css";
|
||||||
import BuildingModel from "../Project/Infrastructure/BuildingModel";
|
import BuildingModel from "../Project/Infrastructure/BuildingModel";
|
||||||
@ -7,33 +8,25 @@ import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
|
|||||||
import TaskModel from "../Project/Infrastructure/TaskModel";
|
import TaskModel from "../Project/Infrastructure/TaskModel";
|
||||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import {
|
import {useProjectDetails, useProjectInfra, useProjects} from "../../hooks/useProjects";
|
||||||
useCurrentService,
|
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
||||||
useProjectDetails,
|
import {APPROVE_TASK, ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA} from "../../utils/constants";
|
||||||
useProjectInfra,
|
import {useDispatch, useSelector} from "react-redux";
|
||||||
useProjects,
|
import {useProfile} from "../../hooks/useProfile";
|
||||||
} from "../../hooks/useProjects";
|
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import {
|
|
||||||
APPROVE_TASK,
|
|
||||||
ASSIGN_REPORT_TASK,
|
|
||||||
MANAGE_PROJECT_INFRA,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import { useProfile } from "../../hooks/useProfile";
|
|
||||||
import { refreshData, setProjectId } from "../../slices/localVariablesSlice";
|
|
||||||
import InfraTable from "../Project/Infrastructure/InfraTable";
|
import InfraTable from "../Project/Infrastructure/InfraTable";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||||
import Loader from "../common/Loader";
|
import Loader from "../common/Loader";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const InfraPlanning = () => {
|
const InfraPlanning = () => {
|
||||||
const { profile: LoggedUser, refetch: fetchData } = useProfile();
|
const { profile: LoggedUser, refetch: fetchData } = useProfile();
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const selectedService = useCurrentService();
|
|
||||||
|
|
||||||
const { projectInfra, isLoading, isError, error, isFetched } =
|
const { projectInfra, isLoading, isError, error, isFetched } = useProjectInfra(selectedProject);
|
||||||
useProjectInfra(selectedProject, selectedService || "" );
|
|
||||||
|
|
||||||
const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||||
const canApproveTask = useHasUserPermission(APPROVE_TASK);
|
const canApproveTask = useHasUserPermission(APPROVE_TASK);
|
||||||
@ -62,7 +55,7 @@ const InfraPlanning = () => {
|
|||||||
|
|
||||||
if (isFetched && (!projectInfra || projectInfra.length === 0)) {
|
if (isFetched && (!projectInfra || projectInfra.length === 0)) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center">
|
<div className="card text-center">
|
||||||
<p className="my-3">No Result Found</p>
|
<p className="my-3">No Result Found</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -70,9 +63,11 @@ const InfraPlanning = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
||||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
<div className="card">
|
||||||
<div className="row">
|
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||||
<InfraTable buildings={projectInfra} projectId={selectedProject} />
|
<div className="row">
|
||||||
|
<InfraTable buildings={projectInfra} projectId={selectedProject} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -80,3 +75,4 @@ const InfraPlanning = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default InfraPlanning;
|
export default InfraPlanning;
|
||||||
|
|
||||||
|
|||||||
@ -1,43 +1,25 @@
|
|||||||
import React, { useCallback, useEffect, useState, useMemo } from "react";
|
import React, { useCallback, useEffect, useState, useMemo } from "react";
|
||||||
import Avatar from "../common/Avatar";
|
import Avatar from "../common/Avatar";
|
||||||
import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
|
import { convertShortTime } from "../../utils/dateUtils";
|
||||||
import RegularizationActions from "./RegularizationActions";
|
import RegularizationActions from "./RegularizationActions";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useRegularizationRequests } from "../../hooks/useAttendance";
|
import { useRegularizationRequests } from "../../hooks/useAttendance";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import usePagination from "../../hooks/usePagination";
|
import usePagination from "../../hooks/usePagination";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import {
|
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
||||||
cacheData,
|
|
||||||
clearCacheKey,
|
|
||||||
useSelectedProject,
|
|
||||||
} from "../../slices/apiDataManager";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import Pagination from "../../components/common/Pagination";
|
|
||||||
|
|
||||||
const Regularization = ({
|
const Regularization = ({ handleRequest, searchTerm }) => {
|
||||||
handleRequest,
|
|
||||||
searchTerm,
|
|
||||||
projectId,
|
|
||||||
organizationId,
|
|
||||||
IncludeInActive,
|
|
||||||
}) => {
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
// var selectedProject = useSelector((store) => store.localVariables.projectId);
|
// var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const [regularizesList, setregularizedList] = useState([]);
|
const [regularizesList, setregularizedList] = useState([]);
|
||||||
const { regularizes, loading, error, refetch } = useRegularizationRequests(
|
const { regularizes, loading, error, refetch } =
|
||||||
selectedProject,
|
useRegularizationRequests(selectedProject);
|
||||||
organizationId,
|
|
||||||
IncludeInActive
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(!regularizes) return
|
|
||||||
if(regularizes?.length) {
|
|
||||||
setregularizedList(regularizes);
|
setregularizedList(regularizes);
|
||||||
|
|
||||||
}
|
|
||||||
}, [regularizes]);
|
}, [regularizes]);
|
||||||
|
|
||||||
const sortByName = (a, b) => {
|
const sortByName = (a, b) => {
|
||||||
@ -72,15 +54,18 @@ const Regularization = ({
|
|||||||
}
|
}
|
||||||
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||||
return sortedList.filter((item) => {
|
return sortedList.filter((item) => {
|
||||||
const fullName = `${item?.firstName} ${item?.lastName}`.toLowerCase();
|
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||||
return fullName.includes(lowercasedSearchTerm);
|
return fullName.includes(lowercasedSearchTerm);
|
||||||
});
|
});
|
||||||
}, [regularizesList, searchTerm]);
|
}, [regularizesList, searchTerm]);
|
||||||
|
|
||||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
const { currentPage, totalPages, currentItems, paginate } =
|
||||||
filteredSearchData,
|
usePagination(filteredSearchData, 20);
|
||||||
20
|
|
||||||
);
|
// Reset pagination when the search term or data changes
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
}, [filteredSearchData]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
eventBus.on("regularization", handler);
|
eventBus.on("regularization", handler);
|
||||||
@ -102,15 +87,9 @@ const Regularization = ({
|
|||||||
}, [employeeHandler]);
|
}, [employeeHandler]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
|
||||||
className="table-responsive text-nowrap pb-4"
|
|
||||||
style={{ minHeight: "200px" }}
|
|
||||||
>
|
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div
|
<div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
|
||||||
className="d-flex justify-content-center align-items-center"
|
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
|
||||||
<p className="text-secondary">Loading...</p>
|
<p className="text-secondary">Loading...</p>
|
||||||
</div>
|
</div>
|
||||||
) : currentItems?.length > 0 ? (
|
) : currentItems?.length > 0 ? (
|
||||||
@ -119,28 +98,24 @@ const Regularization = ({
|
|||||||
<tr>
|
<tr>
|
||||||
<th colSpan={2}>Name</th>
|
<th colSpan={2}>Name</th>
|
||||||
<th>Date</th>
|
<th>Date</th>
|
||||||
<th>Organization</th>
|
|
||||||
<th>
|
<th>
|
||||||
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In
|
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
||||||
</th>
|
</th>
|
||||||
<th colSpan={2}>
|
|
||||||
Requested By
|
|
||||||
</th>
|
|
||||||
<th >
|
|
||||||
Requested At
|
|
||||||
</th>
|
|
||||||
<th>Action</th>
|
<th>Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{currentItems?.map((att, index) => (
|
{currentItems?.map((att, index) => (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td colSpan={2}>
|
<td colSpan={2}>
|
||||||
<div className="d-flex justify-content-start align-items-center">
|
<div className="d-flex justify-content-start align-items-center">
|
||||||
<Avatar firstName={att.firstName} lastName={att.lastName} />
|
<Avatar
|
||||||
|
firstName={att.firstName}
|
||||||
|
lastName={att.lastName}
|
||||||
|
></Avatar>
|
||||||
<div className="d-flex flex-column">
|
<div className="d-flex flex-column">
|
||||||
<a href="#" className="text-heading text-truncate">
|
<a href="#" className="text-heading text-truncate">
|
||||||
<span className="fw-normal">
|
<span className="fw-normal">
|
||||||
@ -151,28 +126,9 @@ const Regularization = ({
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
|
<td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
|
||||||
|
|
||||||
<td>{att.organizationName || "--"}</td>
|
|
||||||
|
|
||||||
<td>{convertShortTime(att.checkInTime)}</td>
|
<td>{convertShortTime(att.checkInTime)}</td>
|
||||||
<td>
|
<td>
|
||||||
{att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
|
{att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
|
||||||
</td>
|
|
||||||
|
|
||||||
<td colSpan={2}>
|
|
||||||
{att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
|
|
||||||
<Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
|
|
||||||
<div className="d-flex flex-column">
|
|
||||||
<a href="#" className="text-heading text-truncate">
|
|
||||||
<span className="fw-normal">
|
|
||||||
{att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>):(<small>--</small>)}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
|
|
||||||
</td>
|
</td>
|
||||||
<td className="text-center ">
|
<td className="text-center ">
|
||||||
<RegularizationActions
|
<RegularizationActions
|
||||||
@ -180,6 +136,7 @@ const Regularization = ({
|
|||||||
handleRequest={handleRequest}
|
handleRequest={handleRequest}
|
||||||
refresh={refetch}
|
refresh={refetch}
|
||||||
/>
|
/>
|
||||||
|
{/* </div> */}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
@ -197,7 +154,7 @@ const Regularization = ({
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* {!loading && totalPages > 1 && (
|
{!loading && totalPages > 1 && (
|
||||||
<nav aria-label="Page ">
|
<nav aria-label="Page ">
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1 mt-3">
|
<ul className="pagination pagination-sm justify-content-end py-1 mt-3">
|
||||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
@ -235,14 +192,6 @@ const Regularization = ({
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
)} */}
|
|
||||||
|
|
||||||
{totalPages > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -77,7 +77,7 @@ export const ReportTask = ({ report, closeModal }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="container m-0">
|
<div className="container m-0">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="fs-5 fw-semibold">Report Task</p>
|
<p className="fs-6 fw-semibold">Report Task</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-1 row text-start">
|
<div className="mb-1 row text-start">
|
||||||
<label htmlFor="html5-text-input" className="col-md-4 col-form-label">
|
<label htmlFor="html5-text-input" className="col-md-4 col-form-label">
|
||||||
@ -101,14 +101,16 @@ export const ReportTask = ({ report, closeModal }) => {
|
|||||||
<label htmlFor="html5-email-input" className="col-md-4 col-form-label">
|
<label htmlFor="html5-email-input" className="col-md-4 col-form-label">
|
||||||
Wrok Area :
|
Wrok Area :
|
||||||
</label>
|
</label>
|
||||||
<div className="col-md-8 text-start">
|
<div className="col-md-8 text-start text-wrap">
|
||||||
<div className="text-wrap">
|
<label className=" col-form-label">
|
||||||
{report?.workItem?.workArea?.floor?.building?.name} <i className="bx bx-chevron-right"></i>
|
{" "}
|
||||||
{report?.workItem?.workArea?.floor?.floorName} <i className="bx bx-chevron-right"></i>
|
{report?.workItem?.workArea?.floor?.building?.name}{" "}
|
||||||
{report?.workItem?.workArea?.areaName}
|
<i className="bx bx-chevron-right"></i>{" "}
|
||||||
</div>
|
{report?.workItem?.workArea?.floor?.floorName}{" "}
|
||||||
</div>
|
<i className="bx bx-chevron-right"> </i>
|
||||||
|
{report?.workItem?.workArea?.areaName}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-1 row text-start">
|
<div className="mb-1 row text-start">
|
||||||
<label htmlFor="html5-email-input" className="col-md-4 col-form-label">
|
<label htmlFor="html5-email-input" className="col-md-4 col-form-label">
|
||||||
|
|||||||
@ -110,8 +110,6 @@ const ReportTaskComments = ({
|
|||||||
approvedTask: defaultCompletedTask || 0,
|
approvedTask: defaultCompletedTask || 0,
|
||||||
});
|
});
|
||||||
}, [defaultCompletedTask]);
|
}, [defaultCompletedTask]);
|
||||||
|
|
||||||
const completed_Task = watch("approvedTask")
|
|
||||||
return (
|
return (
|
||||||
<div className="p-2 p-sm-1">
|
<div className="p-2 p-sm-1">
|
||||||
<div className="modal-body p-sm-4 p-0">
|
<div className="modal-body p-sm-4 p-0">
|
||||||
@ -341,13 +339,13 @@ const ReportTaskComments = ({
|
|||||||
<div
|
<div
|
||||||
className={` ${
|
className={` ${
|
||||||
actionAllow && !commentsData.approvedBy
|
actionAllow && !commentsData.approvedBy
|
||||||
? " d-flex justify-content-between align-items-center"
|
? " d-flex justify-content-between"
|
||||||
: "text-end"
|
: "text-end"
|
||||||
} mt-2`}
|
} mt-2`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`form-check ${
|
className={`form-check ${
|
||||||
!(actionAllow && !commentsData.approvedBy && defaultCompletedTask > completed_Task ) && "d-none"
|
!(actionAllow && !commentsData.approvedBy) && "d-none"
|
||||||
} `}
|
} `}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
@ -385,7 +383,7 @@ const ReportTaskComments = ({
|
|||||||
: "Comment"}
|
: "Comment"}
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
|||||||
@ -4,7 +4,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
|||||||
import { string, z } from "zod";
|
import { string, z } from "zod";
|
||||||
import {
|
import {
|
||||||
useActivitiesMaster,
|
useActivitiesMaster,
|
||||||
useServices,
|
|
||||||
useWorkCategoriesMaster,
|
useWorkCategoriesMaster,
|
||||||
} from "../../hooks/masterHook/useMaster";
|
} from "../../hooks/masterHook/useMaster";
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
@ -26,8 +25,6 @@ const SubTask = ({ activity, onClose }) => {
|
|||||||
const { activities, loading } = useActivitiesMaster();
|
const { activities, loading } = useActivitiesMaster();
|
||||||
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
||||||
const { Task, loading: TaskLoading } = useTaskById(activity?.id);
|
const { Task, loading: TaskLoading } = useTaskById(activity?.id);
|
||||||
const {data,isError,isLoading,error} = useServices();
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
@ -100,8 +97,8 @@ const SubTask = ({ activity, onClose }) => {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className="container-xxl my-1">
|
<div className="container-xxl my-1">
|
||||||
<p className="fw-semibold fs-5">Create Sub Task</p>
|
<p className="fw-semibold">Create Sub Task</p>
|
||||||
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||||
<div className="col-6">
|
<div className="col-6">
|
||||||
<label className="form-label">Building</label>
|
<label className="form-label">Building</label>
|
||||||
<input
|
<input
|
||||||
@ -131,15 +128,27 @@ const SubTask = ({ activity, onClose }) => {
|
|||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">Service</label>
|
<div className="col-12">
|
||||||
<input
|
<label className="form-label">Work Category</label>
|
||||||
type="text"
|
<select
|
||||||
className="form-control form-control-sm"
|
className="form-select form-select-sm"
|
||||||
value={activity?.workItem?.activityMaster?.activityGroup?.service?.name || ""}
|
{...register("workCategoryId")}
|
||||||
disabled
|
onChange={handleCategoryChange}
|
||||||
/>
|
>
|
||||||
</div>
|
<option value="">
|
||||||
|
{categoryLoading ? "Loading..." : "-- Select Category --"}
|
||||||
|
</option>
|
||||||
|
{categoryData.map((category) => (
|
||||||
|
<option key={category.id} value={category.id}>
|
||||||
|
{category.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{errors.workCategoryId && (
|
||||||
|
<div className="danger-text">{errors.workCategoryId.message}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<label className="form-label">Select Activity</label>
|
<label className="form-label">Select Activity</label>
|
||||||
<select
|
<select
|
||||||
@ -163,27 +172,6 @@ const SubTask = ({ activity, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">Work Category</label>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
{...register("workCategoryId")}
|
|
||||||
onChange={handleCategoryChange}
|
|
||||||
>
|
|
||||||
<option value="">
|
|
||||||
{categoryLoading ? "Loading..." : "-- Select Category --"}
|
|
||||||
</option>
|
|
||||||
{categoryData.map((category) => (
|
|
||||||
<option key={category.id} value={category.id}>
|
|
||||||
{category.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{errors.workCategoryId && (
|
|
||||||
<div className="danger-text">{errors.workCategoryId.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<label className="form-label">Planned Work</label>
|
<label className="form-label">Planned Work</label>
|
||||||
<input
|
<input
|
||||||
@ -231,15 +219,7 @@ const SubTask = ({ activity, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex flex-row gap-3 justify-content-end py-2">
|
<div className="col-12 text-center">
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-label-secondary"
|
|
||||||
onClick={() => onClose()}
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-sm btn-primary me-2"
|
className="btn btn-sm btn-primary me-2"
|
||||||
@ -247,7 +227,14 @@ const SubTask = ({ activity, onClose }) => {
|
|||||||
>
|
>
|
||||||
{isPending ? "Please wait..." : "Submit"}
|
{isPending ? "Please wait..." : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-secondary"
|
||||||
|
onClick={() => onClose()}
|
||||||
|
disabled={isPending}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
42
src/components/Context/ChangePasswordContext.jsx
Normal file
42
src/components/Context/ChangePasswordContext.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import React, { createContext, useState, useContext } from "react";
|
||||||
|
import ChangePasswordPage from "../../pages/authentication/ChangePassword";
|
||||||
|
|
||||||
|
const ChangePasswordContext = createContext();
|
||||||
|
|
||||||
|
export const ChangePasswordProvider = ({ children }) => {
|
||||||
|
const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
|
||||||
|
|
||||||
|
const openChangePassword = () => setIsChangePasswordOpen(true);
|
||||||
|
const closeChangePassword = () => setIsChangePasswordOpen(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChangePasswordContext.Provider
|
||||||
|
value={{ isChangePasswordOpen, openChangePassword, closeChangePassword }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
|
||||||
|
{isChangePasswordOpen && (
|
||||||
|
<>
|
||||||
|
{/* This is the main Bootstrap modal container */}
|
||||||
|
{/* It provides the fixed positioning and high z-index */}
|
||||||
|
<div
|
||||||
|
className="modal fade show" // 'fade' for animation, 'show' to make it visible
|
||||||
|
style={{ display: 'block' }} // Explicitly set display: block for immediate visibility
|
||||||
|
tabIndex="-1" // Makes the modal focusable
|
||||||
|
role="dialog" // ARIA role for accessibility
|
||||||
|
aria-labelledby="changePasswordModalLabel" // Link to a heading for accessibility
|
||||||
|
aria-modal="true" // Indicate it's a modal dialog
|
||||||
|
>
|
||||||
|
{/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */}
|
||||||
|
<ChangePasswordPage onClose={closeChangePassword} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The modal backdrop */}
|
||||||
|
<div className="modal-backdrop fade show"></div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</ChangePasswordContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useChangePassword = () => useContext(ChangePasswordContext);
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { useCurrentService } from "../../hooks/useProjects";
|
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
||||||
import { FormProvider, useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import {
|
|
||||||
TaskReportDefaultValue,
|
|
||||||
TaskReportFilterSchema,
|
|
||||||
} from "./TaskRportScheam";
|
|
||||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
import { localToUtc } from "../../utils/appUtils";
|
|
||||||
import { useTaskFilter } from "../../hooks/useTasks";
|
|
||||||
|
|
||||||
const TaskReportFilterPanel = ({ handleFilter }) => {
|
|
||||||
const [resetKey, setResetKey] = useState(0);
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const selectedService = useCurrentService();
|
|
||||||
const { data } = useTaskFilter(selectedProject);
|
|
||||||
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: zodResolver(TaskReportFilterSchema),
|
|
||||||
defaultValues: TaskReportDefaultValue,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
reset,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
const filterPayload = {
|
|
||||||
...formData,
|
|
||||||
dateFrom: localToUtc(formData.dateFrom),
|
|
||||||
dateTo: localToUtc(formData.dateTo),
|
|
||||||
};
|
|
||||||
handleFilter(filterPayload);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClear = () => {
|
|
||||||
setResetKey((prev) => prev + 1);
|
|
||||||
handleFilter(TaskReportDefaultValue);
|
|
||||||
reset(TaskReportDefaultValue);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<FormProvider {...methods}>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
|
||||||
<div className="mb-3 w-100">
|
|
||||||
<label className="fw-semibold">Choose Date Range:</label>
|
|
||||||
<DateRangePicker1
|
|
||||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
|
||||||
startField="dateFrom"
|
|
||||||
endField="dateTo"
|
|
||||||
resetSignal={resetKey}
|
|
||||||
defaultRange={false}
|
|
||||||
maxDate={new Date()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="buildingIds"
|
|
||||||
label="Building"
|
|
||||||
options={data?.buildings}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="row mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="floorIds"
|
|
||||||
label="Floor"
|
|
||||||
options={data?.floors}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="row mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="activityIds"
|
|
||||||
label="Activities"
|
|
||||||
options={data?.activities}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end py-3 gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-label-secondary btn-sm"
|
|
||||||
onClick={onClear}
|
|
||||||
>
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn btn-primary btn-sm">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</FormProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TaskReportFilterPanel;
|
|
||||||
@ -1,301 +0,0 @@
|
|||||||
import React, { useState, useEffect, useMemo } from "react";
|
|
||||||
import { useTaskList } from "../../hooks/useTasks";
|
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
||||||
import { useProjectName } from "../../hooks/useProjects";
|
|
||||||
import DailyProgrssReport, {
|
|
||||||
useDailyProgrssContext,
|
|
||||||
} from "../../pages/DailyProgressReport/DailyProgrssReport";
|
|
||||||
import { useDispatch } from "react-redux";
|
|
||||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
||||||
import {
|
|
||||||
APPROVE_TASK,
|
|
||||||
ASSIGN_REPORT_TASK,
|
|
||||||
ITEMS_PER_PAGE,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
import { TaskReportListSkeleton } from "./TaskRepprtListSkeleton";
|
|
||||||
import HoverPopup from "../common/HoverPopup";
|
|
||||||
|
|
||||||
const TaskReportList = () => {
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const [filters, setFilters] = useState({
|
|
||||||
selectedBuilding: "",
|
|
||||||
selectedFloors: [],
|
|
||||||
selectedActivities: [],
|
|
||||||
});
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
|
|
||||||
const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
|
|
||||||
|
|
||||||
const { service, openModal, closeModal,filter } = useDailyProgrssContext();
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const { projectNames } = useProjectName();
|
|
||||||
|
|
||||||
const { data, isLoading, isError, error } = useTaskList(
|
|
||||||
selectedProject,
|
|
||||||
ITEMS_PER_PAGE,
|
|
||||||
currentPage,
|
|
||||||
service,filter
|
|
||||||
);
|
|
||||||
|
|
||||||
const ProgrssReportColumn = [
|
|
||||||
{
|
|
||||||
key: "activity",
|
|
||||||
label: "Activity",
|
|
||||||
getValue: (task) => task.workItem.activityMaster?.activityName || "N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "assigned",
|
|
||||||
label: "Total Assigned",
|
|
||||||
getValue: (task) => task.plannedTask ?? "N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "completed",
|
|
||||||
label: "Completed",
|
|
||||||
getValue: (task) => task.completedTask ?? "N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "assignAt",
|
|
||||||
label: "Assign Date",
|
|
||||||
getValue: (task) =>
|
|
||||||
task.assignmentDate ? formatUTCToLocalTime(task.assignmentDate) : "N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "team",
|
|
||||||
label: "Team",
|
|
||||||
getValue: (task) =>
|
|
||||||
task.teamMembers?.map((m) => `${m.firstName} ${m.lastName}`).join(", ") ||
|
|
||||||
"N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const paginate = (page) => {
|
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedProject && projectNames.length > 0) {
|
|
||||||
dispatch(setProjectId(projectNames[0].id));
|
|
||||||
}
|
|
||||||
}, [selectedProject, projectNames, dispatch]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setFilters({
|
|
||||||
selectedBuilding: "",
|
|
||||||
selectedFloors: [],
|
|
||||||
selectedActivities: [],
|
|
||||||
});
|
|
||||||
}, [selectedProject]);
|
|
||||||
|
|
||||||
// Filter and Group wise data
|
|
||||||
|
|
||||||
const filteredTasks = useMemo(() => {
|
|
||||||
if (!data?.data) return [];
|
|
||||||
return data?.data.filter((task) => {
|
|
||||||
const { selectedBuilding, selectedFloors, selectedActivities } = filters;
|
|
||||||
|
|
||||||
if (
|
|
||||||
selectedBuilding &&
|
|
||||||
task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding
|
|
||||||
)
|
|
||||||
return false;
|
|
||||||
if (
|
|
||||||
selectedFloors.length > 0 &&
|
|
||||||
!selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
|
|
||||||
)
|
|
||||||
return false;
|
|
||||||
if (
|
|
||||||
selectedActivities.length > 0 &&
|
|
||||||
!selectedActivities.includes(
|
|
||||||
task?.workItem?.activityMaster?.activityName
|
|
||||||
)
|
|
||||||
)
|
|
||||||
return false;
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}, [data?.data, filters, currentPage]);
|
|
||||||
|
|
||||||
const groupedTasks = useMemo(() => {
|
|
||||||
const groups = {};
|
|
||||||
filteredTasks.forEach((task) => {
|
|
||||||
const date = task.assignmentDate.split("T")[0];
|
|
||||||
if (!groups[date]) groups[date] = [];
|
|
||||||
groups[date].push(task);
|
|
||||||
});
|
|
||||||
return Object.keys(groups)
|
|
||||||
.sort((a, b) => new Date(b) - new Date(a))
|
|
||||||
.map((date) => ({ date, tasks: groups[date] }));
|
|
||||||
}, [filteredTasks, paginate, currentPage, selectedProject]);
|
|
||||||
|
|
||||||
const renderTeamMembers = (task, refIndex) => (
|
|
||||||
<div
|
|
||||||
key={refIndex}
|
|
||||||
tabIndex="0"
|
|
||||||
className="d-flex align-items-center avatar-group justify-content-center"
|
|
||||||
data-bs-toggle="popover"
|
|
||||||
data-bs-trigger="focus"
|
|
||||||
data-bs-placement="left"
|
|
||||||
data-bs-html="true"
|
|
||||||
data-bs-content={`
|
|
||||||
<div class="border border-secondary rounded custom-popover p-2 px-3">
|
|
||||||
${task.teamMembers
|
|
||||||
.map(
|
|
||||||
(m) => `
|
|
||||||
<div class="d-flex align-items-center gap-2 mb-2">
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
|
||||||
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span>${m.firstName} ${m.lastName}</span>
|
|
||||||
</div>`
|
|
||||||
)
|
|
||||||
.join("")}
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
{task.teamMembers.slice(0, 3).map((m) => (
|
|
||||||
<div
|
|
||||||
key={m.id}
|
|
||||||
className="avatar avatar-xs"
|
|
||||||
title={`${m.firstName} ${m.lastName}`}
|
|
||||||
>
|
|
||||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
|
||||||
{m?.firstName.slice(0, 1)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{task.teamMembers.length > 3 && (
|
|
||||||
<div
|
|
||||||
className="avatar avatar-xs"
|
|
||||||
title={`${task.teamMembers.length - 3} more`}
|
|
||||||
>
|
|
||||||
<span className="avatar-initial rounded-circle bg-label-secondary">
|
|
||||||
+{task.teamMembers.length - 3}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (isLoading) return <TaskReportListSkeleton />;
|
|
||||||
if (isError) return <div>Loading....</div>;
|
|
||||||
return (
|
|
||||||
<div className="mt-2 table-responsive text-nowrap">
|
|
||||||
<table className="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th className="text-start">Activity</th>
|
|
||||||
<th>
|
|
||||||
<span>
|
|
||||||
Total Pending{" "}
|
|
||||||
<HoverPopup
|
|
||||||
title="Total Pending Task"
|
|
||||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
|
||||||
>
|
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
|
||||||
</HoverPopup>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<span>
|
|
||||||
Reported/Planned{" "}
|
|
||||||
<HoverPopup
|
|
||||||
title="Reported and Planned Task"
|
|
||||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
|
||||||
>
|
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
|
||||||
</HoverPopup>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th>Assign Date</th>
|
|
||||||
<th>Team</th>
|
|
||||||
<th className="text-center">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{groupedTasks.length === 0 && (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
|
|
||||||
No reports available
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{groupedTasks.map(({ date, tasks }) => (
|
|
||||||
<React.Fragment key={date}>
|
|
||||||
<tr className="table-row-header text-start">
|
|
||||||
<td colSpan={6}>
|
|
||||||
<strong>{formatUTCToLocalTime(date)}</strong>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{tasks.map((task, idx) => (
|
|
||||||
<tr key={task.id || idx}>
|
|
||||||
<td className="flex-wrap text-start">
|
|
||||||
<div>
|
|
||||||
{task.workItem.activityMaster?.activityName || "No Activity Name"}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm py-2">
|
|
||||||
{task.workItem.workArea?.floor?.building?.name} ›{" "}
|
|
||||||
{task.workItem.workArea?.floor?.floorName} ›{" "}
|
|
||||||
{task.workItem.workArea?.areaName}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{formatNumber(task.workItem.plannedWork)}
|
|
||||||
</td>
|
|
||||||
<td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
|
|
||||||
<td>{formatUTCToLocalTime(task.assignmentDate)}</td>
|
|
||||||
<td className="text-center">{renderTeamMembers(task, idx)}</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<div className="d-flex justify-content-end gap-2">
|
|
||||||
{ReportTaskRights && !task.reportedDate && (
|
|
||||||
<button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
|
|
||||||
Report
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
|
|
||||||
<button
|
|
||||||
className="btn btn-xs btn-warning"
|
|
||||||
onClick={() => openModal("comments", { task, isActionAllow: true })}
|
|
||||||
>
|
|
||||||
QC
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
className="btn btn-xs btn-primary"
|
|
||||||
onClick={() => openModal("comments", { task, isActionAllow: false })}
|
|
||||||
>
|
|
||||||
Comment
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TaskReportList;
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
|
|
||||||
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
||||||
<div
|
|
||||||
className={`skeleton mb-2 ${className}`}
|
|
||||||
style={{
|
|
||||||
height,
|
|
||||||
width,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
);
|
|
||||||
export const TaskReportListSkeleton = () => {
|
|
||||||
const skeletonRows = 8; // Number of placeholder rows
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<table className="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Activity</th>
|
|
||||||
<th>Assigned</th>
|
|
||||||
<th>Completed</th>
|
|
||||||
<th>Assign On</th>
|
|
||||||
<th>Team</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{[...Array(skeletonRows)].map((_, idx) => (
|
|
||||||
<tr key={idx}>
|
|
||||||
<td>
|
|
||||||
<SkeletonLine height={16} width="70%" />
|
|
||||||
<SkeletonLine height={12} width="50%" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<SkeletonLine height={16} width="60%" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<SkeletonLine height={16} width="60%" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<SkeletonLine height={16} width="80%" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<div className="d-flex justify-content-center gap-1">
|
|
||||||
{[...Array(3)].map((_, i) => (
|
|
||||||
<SkeletonLine key={i} height={24} width={24} className="rounded-circle" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="d-flex justify-content-end gap-2">
|
|
||||||
<SkeletonLine height={24} width="60px" />
|
|
||||||
<SkeletonLine height={24} width="60px" />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
export const TaskReportFilterSchema = z.object({
|
|
||||||
buildingIds: z.array(z.string()).optional(),
|
|
||||||
floorIds: z.array(z.string()).optional(),
|
|
||||||
activityIds: z.array(z.string()).optional(),
|
|
||||||
dateFrom: z.string().optional(),
|
|
||||||
dateTo: z.string().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const TaskReportDefaultValue = {
|
|
||||||
buildingIds:[],
|
|
||||||
floorIds:[],
|
|
||||||
activityIds:[],
|
|
||||||
dateFrom:null,
|
|
||||||
dateTo:null
|
|
||||||
}
|
|
||||||
@ -1,194 +1,194 @@
|
|||||||
// import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
// import LineChart from "../Charts/LineChart";
|
import LineChart from "../Charts/LineChart";
|
||||||
// import { useProjects } from "../../hooks/useProjects";
|
import { useProjects } from "../../hooks/useProjects";
|
||||||
// import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
|
import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
|
||||||
// import ApexChart from "../Charts/Circlechart";
|
import ApexChart from "../Charts/Circlechart";
|
||||||
|
|
||||||
// const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
|
const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
|
||||||
|
|
||||||
// const Activity = () => {
|
const Activity = () => {
|
||||||
// const { projects } = useProjects();
|
const { projects } = useProjects();
|
||||||
// const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
||||||
// const [selectedDate, setSelectedDate] = useState(today);
|
const [selectedDate, setSelectedDate] = useState(today);
|
||||||
// const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
||||||
// const initialProjectId = storedProjectId || "all";
|
const initialProjectId = storedProjectId || "all";
|
||||||
// const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
||||||
// const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
|
const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
|
||||||
// const [activeTab, setActiveTab] = useState("all");
|
const [activeTab, setActiveTab] = useState("all");
|
||||||
|
|
||||||
// const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
|
const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
|
||||||
// useDashboard_ActivityData(selectedDate, selectedProjectId);
|
useDashboard_ActivityData(selectedDate, selectedProjectId);
|
||||||
|
|
||||||
// useEffect(() => {
|
useEffect(() => {
|
||||||
// if (selectedProjectId === "all") {
|
if (selectedProjectId === "all") {
|
||||||
// setDisplayedProjectName("All Projects");
|
setDisplayedProjectName("All Projects");
|
||||||
// } else if (projects) {
|
} else if (projects) {
|
||||||
// const foundProject = projects.find((p) => p.id === selectedProjectId);
|
const foundProject = projects.find((p) => p.id === selectedProjectId);
|
||||||
// setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
|
setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
|
||||||
// } else {
|
} else {
|
||||||
// setDisplayedProjectName("Select Project");
|
setDisplayedProjectName("Select Project");
|
||||||
// }
|
}
|
||||||
|
|
||||||
// localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
||||||
// }, [selectedProjectId, projects]);
|
}, [selectedProjectId, projects]);
|
||||||
|
|
||||||
// const handleProjectSelect = (projectId) => {
|
const handleProjectSelect = (projectId) => {
|
||||||
// setSelectedProjectId(projectId);
|
setSelectedProjectId(projectId);
|
||||||
// };
|
};
|
||||||
|
|
||||||
// const handleDateChange = (e) => {
|
const handleDateChange = (e) => {
|
||||||
// setSelectedDate(e.target.value);
|
setSelectedDate(e.target.value);
|
||||||
// };
|
};
|
||||||
|
|
||||||
// return (
|
return (
|
||||||
// <div className="card h-100">
|
<div className="card h-100">
|
||||||
// <div className="card-header">
|
<div className="card-header">
|
||||||
// <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
|
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
|
||||||
// <div className="card-title mb-0 text-start">
|
<div className="card-title mb-0 text-start">
|
||||||
// <h5 className="mb-1">Activity</h5>
|
<h5 className="mb-1">Activity</h5>
|
||||||
// <p className="card-subtitle text-primary">Activity Progress Chart</p>
|
<p className="card-subtitle">Activity Progress Chart</p>
|
||||||
// </div>
|
</div>
|
||||||
|
|
||||||
// <div className="btn-group">
|
<div className="btn-group">
|
||||||
// <button
|
<button
|
||||||
// className="btn btn-outline-primary btn-sm dropdown-toggle"
|
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||||
// type="button"
|
type="button"
|
||||||
// data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
// aria-expanded="false"
|
aria-expanded="false"
|
||||||
// >
|
>
|
||||||
// {displayedProjectName}
|
{displayedProjectName}
|
||||||
// </button>
|
</button>
|
||||||
// <ul className="dropdown-menu">
|
<ul className="dropdown-menu">
|
||||||
// <li>
|
<li>
|
||||||
// <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
|
<button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
|
||||||
// All Projects
|
All Projects
|
||||||
// </button>
|
</button>
|
||||||
// </li>
|
</li>
|
||||||
// {projects?.map((project) => (
|
{projects?.map((project) => (
|
||||||
// <li key={project.id}>
|
<li key={project.id}>
|
||||||
// <button
|
<button
|
||||||
// className="dropdown-item"
|
className="dropdown-item"
|
||||||
// onClick={() => handleProjectSelect(project.id)}
|
onClick={() => handleProjectSelect(project.id)}
|
||||||
// >
|
>
|
||||||
// {project.name}
|
{project.name}
|
||||||
// </button>
|
</button>
|
||||||
// </li>
|
</li>
|
||||||
// ))}
|
))}
|
||||||
// </ul>
|
</ul>
|
||||||
// </div>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
|
|
||||||
// {/* ✅ Date Picker Aligned Left with Padding */}
|
{/* ✅ Date Picker Aligned Left with Padding */}
|
||||||
// <div className="d-flex justify-content-start ps-3 mb-3">
|
<div className="d-flex justify-content-start ps-3 mb-3">
|
||||||
// <div style={{ width: "150px" }}>
|
<div style={{ width: "150px" }}>
|
||||||
// <input
|
<input
|
||||||
// type="date"
|
type="date"
|
||||||
// className="form-control"
|
className="form-control"
|
||||||
// value={selectedDate}
|
value={selectedDate}
|
||||||
// onChange={handleDateChange}
|
onChange={handleDateChange}
|
||||||
// />
|
/>
|
||||||
// </div>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
|
|
||||||
// {/* Tabs */}
|
{/* Tabs */}
|
||||||
// <ul className="nav nav-tabs " role="tablist">
|
<ul className="nav nav-tabs " role="tablist">
|
||||||
// <li className="nav-item">
|
<li className="nav-item">
|
||||||
// <button
|
<button
|
||||||
// type="button"
|
type="button"
|
||||||
// className={`nav-link ${activeTab === "all" ? "active" : ""}`}
|
className={`nav-link ${activeTab === "all" ? "active" : ""}`}
|
||||||
// onClick={() => setActiveTab("all")}
|
onClick={() => setActiveTab("all")}
|
||||||
// data-bs-toggle="tab"
|
data-bs-toggle="tab"
|
||||||
// >
|
>
|
||||||
// Summary
|
Summary
|
||||||
// </button>
|
</button>
|
||||||
// </li>
|
</li>
|
||||||
// <li className="nav-item">
|
<li className="nav-item">
|
||||||
// <button
|
<button
|
||||||
// type="button"
|
type="button"
|
||||||
// className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
|
className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
|
||||||
// onClick={() => setActiveTab("logs")}
|
onClick={() => setActiveTab("logs")}
|
||||||
// data-bs-toggle="tab"
|
data-bs-toggle="tab"
|
||||||
// >
|
>
|
||||||
// Details
|
Details
|
||||||
// </button>
|
</button>
|
||||||
// </li>
|
</li>
|
||||||
// </ul>
|
</ul>
|
||||||
|
|
||||||
// <div className="card-body">
|
<div className="card-body">
|
||||||
// {activeTab === "all" && (
|
{activeTab === "all" && (
|
||||||
// <div className="row justify-content-between">
|
<div className="row justify-content-between">
|
||||||
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||||
// {isLoading ? (
|
{isLoading ? (
|
||||||
// <p>Loading activity data...</p>
|
<p>Loading activity data...</p>
|
||||||
// ) : isError ? (
|
) : isError ? (
|
||||||
// <p>No data available.</p>
|
<p>No data available.</p>
|
||||||
// ) : (
|
) : (
|
||||||
// ActivityData && (
|
ActivityData && (
|
||||||
// <>
|
<>
|
||||||
// <h5 className="fw-bold mb-0 text-start w-80">
|
<h5 className="fw-bold mb-0 text-start w-80">
|
||||||
// <i className="bx bx-task text-info"></i> Allocated Task
|
<i className="bx bx-task text-info"></i> Allocated Task
|
||||||
// </h5>
|
</h5>
|
||||||
// <h4 className="mb-0 fw-bold">
|
<h4 className="mb-0 fw-bold">
|
||||||
// {ActivityData.totalCompletedWork?.toLocaleString()}/
|
{ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||||
// {ActivityData.totalPlannedWork?.toLocaleString()}
|
{ActivityData.totalPlannedWork?.toLocaleString()}
|
||||||
// </h4>
|
</h4>
|
||||||
// <small className="text-muted">Completed / Assigned</small>
|
<small className="text-muted">Completed / Assigned</small>
|
||||||
// <div style={{ maxWidth: "180px" }}>
|
<div style={{ maxWidth: "180px" }}>
|
||||||
// <ApexChart />
|
<ApexChart />
|
||||||
// </div>
|
</div>
|
||||||
// </>
|
</>
|
||||||
// )
|
)
|
||||||
// )}
|
)}
|
||||||
// </div>
|
</div>
|
||||||
|
|
||||||
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||||
// {!isLoading && !isError && ActivityData && (
|
{!isLoading && !isError && ActivityData && (
|
||||||
// <>
|
<>
|
||||||
// <h5 className="fw-bold mb-0 text-start w-110">
|
<h5 className="fw-bold mb-0 text-start w-110">
|
||||||
// <i className="bx bx-task text-info"></i> Activities
|
<i className="bx bx-task text-info"></i> Activities
|
||||||
// </h5>
|
</h5>
|
||||||
// <h4 className="mb-0 fw-bold">
|
<h4 className="mb-0 fw-bold">
|
||||||
// {ActivityData.totalCompletedWork?.toLocaleString()}/
|
{ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||||
// {ActivityData.totalPlannedWork?.toLocaleString()}
|
{ActivityData.totalPlannedWork?.toLocaleString()}
|
||||||
// </h4>
|
</h4>
|
||||||
// <small className="text-muted ">Pending / Assigned</small>
|
<small className="text-muted ">Pending / Assigned</small>
|
||||||
// <div style={{ maxWidth: "180px" }}>
|
<div style={{ maxWidth: "180px" }}>
|
||||||
// <ApexChart />
|
<ApexChart />
|
||||||
// </div>
|
</div>
|
||||||
// </>
|
</>
|
||||||
// )}
|
)}
|
||||||
// </div>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
// )}
|
)}
|
||||||
|
|
||||||
// {activeTab === "logs" && (
|
{activeTab === "logs" && (
|
||||||
// <div className="table-responsive">
|
<div className="table-responsive">
|
||||||
// <table className="table table-bordered table-hover">
|
<table className="table table-bordered table-hover">
|
||||||
// <thead>
|
<thead>
|
||||||
// <tr>
|
<tr>
|
||||||
// <th>Activity / Location</th>
|
<th>Activity / Location</th>
|
||||||
// <th>Assigned / Completed</th>
|
<th>Assigned / Completed</th>
|
||||||
// </tr>
|
</tr>
|
||||||
// </thead>
|
</thead>
|
||||||
// <tbody>
|
<tbody>
|
||||||
// {[{
|
{[{
|
||||||
// activity: "Code Review / Remote",
|
activity: "Code Review / Remote",
|
||||||
// assignedToday: 3,
|
assignedToday: 3,
|
||||||
// completed: 2
|
completed: 2
|
||||||
// }].map((log, index) => (
|
}].map((log, index) => (
|
||||||
// <tr key={index}>
|
<tr key={index}>
|
||||||
// <td>{log.activity}</td>
|
<td>{log.activity}</td>
|
||||||
// <td>{log.assignedToday} / {log.completed}</td>
|
<td>{log.assignedToday} / {log.completed}</td>
|
||||||
// </tr>
|
</tr>
|
||||||
// ))}
|
))}
|
||||||
// </tbody>
|
</tbody>
|
||||||
// </table>
|
</table>
|
||||||
// </div>
|
</div>
|
||||||
// )}
|
)}
|
||||||
// </div>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
// );
|
);
|
||||||
// };
|
};
|
||||||
|
|
||||||
// export default Activity;
|
export default Activity;
|
||||||
|
|||||||
@ -1,16 +1,21 @@
|
|||||||
import React, { useState, useMemo } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import ApexChart from "../Charts/Circle";
|
import LineChart from "../Charts/LineChart";
|
||||||
import { useProjects } from "../../hooks/useProjects";
|
import { useProjects } from "../../hooks/useProjects";
|
||||||
import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
|
import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
|
||||||
import { useSelectedProject } from "../../hooks/useSelectedProject"; // ✅ your custom hook
|
import ApexChart from "../Charts/Circle";
|
||||||
|
|
||||||
|
const LOCAL_STORAGE_PROJECT_KEY = "selectedAttendanceProjectId";
|
||||||
|
|
||||||
const Attendance = () => {
|
const Attendance = () => {
|
||||||
const { projects } = useProjects();
|
const { projects } = useProjects();
|
||||||
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
||||||
const [selectedDate, setSelectedDate] = useState(today);
|
const [selectedDate, setSelectedDate] = useState(today);
|
||||||
|
const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
||||||
// central project selection hook
|
const initialProjectId = storedProjectId || "all";
|
||||||
const selectedProjectId = useSelectedProject()
|
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
||||||
|
const [displayedProjectName, setDisplayedProjectName] =
|
||||||
|
useState("Select Project");
|
||||||
|
const [activeTab, setActiveTab] = useState("Summary");
|
||||||
|
|
||||||
const {
|
const {
|
||||||
dashboard_Attendancedata: AttendanceData,
|
dashboard_Attendancedata: AttendanceData,
|
||||||
@ -18,24 +23,38 @@ const selectedProjectId = useSelectedProject()
|
|||||||
error: isError,
|
error: isError,
|
||||||
} = useDashboard_AttendanceData(selectedDate, selectedProjectId);
|
} = useDashboard_AttendanceData(selectedDate, selectedProjectId);
|
||||||
|
|
||||||
// project name derived once
|
useEffect(() => {
|
||||||
const displayedProjectName = useMemo(() => {
|
if (selectedProjectId === "all") {
|
||||||
if (selectedProjectId === "all") return "All Projects";
|
setDisplayedProjectName("All Projects");
|
||||||
const found = projects?.find((p) => p.id === selectedProjectId);
|
} else if (projects) {
|
||||||
return found?.name || "Select Project";
|
const foundProject = projects.find((p) => p.id === selectedProjectId);
|
||||||
|
setDisplayedProjectName(
|
||||||
|
foundProject ? foundProject.name : "Select Project"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setDisplayedProjectName("Select Project");
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
||||||
}, [selectedProjectId, projects]);
|
}, [selectedProjectId, projects]);
|
||||||
|
|
||||||
|
const handleProjectSelect = (projectId) => {
|
||||||
|
setSelectedProjectId(projectId);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDateChange = (e) => {
|
||||||
|
setSelectedDate(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card h-100">
|
<div className="card h-100">
|
||||||
{/* Header */}
|
<div className="card-header mb-1 pb-0 ">
|
||||||
<div className="card-header mb-1 pb-0">
|
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0 ">
|
||||||
<div className="d-flex flex-wrap justify-content-between align-items-center">
|
|
||||||
<div className="card-title mb-0 text-start">
|
<div className="card-title mb-0 text-start">
|
||||||
<h5 className="mb-1">Attendance</h5>
|
<h5 className="mb-1">Attendance</h5>
|
||||||
<p className="card-subtitle">Daily Attendance Data</p>
|
<p className="card-subtitle">Daily Attendance Data</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Project Dropdown */}
|
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button
|
<button
|
||||||
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||||
@ -49,7 +68,7 @@ const selectedProjectId = useSelectedProject()
|
|||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
onClick={() => setSelectedProjectId("all")}
|
onClick={() => handleProjectSelect("all")}
|
||||||
>
|
>
|
||||||
All Projects
|
All Projects
|
||||||
</button>
|
</button>
|
||||||
@ -58,7 +77,7 @@ const selectedProjectId = useSelectedProject()
|
|||||||
<li key={project.id}>
|
<li key={project.id}>
|
||||||
<button
|
<button
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
onClick={() => setSelectedProjectId(project.id)}
|
onClick={() => handleProjectSelect(project.id)}
|
||||||
>
|
>
|
||||||
{project.name}
|
{project.name}
|
||||||
</button>
|
</button>
|
||||||
@ -69,43 +88,52 @@ const selectedProjectId = useSelectedProject()
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs + Date Picker */}
|
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
|
||||||
<div className="d-flex flex-wrap justify-content-between align-items-center me-5 ms-5">
|
{/* Tabs */}
|
||||||
<ul className="nav nav-tabs">
|
<div>
|
||||||
<li className="nav-item">
|
<ul className="nav nav-tabs " role="tablist">
|
||||||
<button
|
<li className="nav-item">
|
||||||
type="button"
|
<button
|
||||||
className={`nav-link ${AttendanceData?.activeTab === "Summary" ? "active" : ""}`}
|
type="button"
|
||||||
onClick={() => (AttendanceData.activeTab = "Summary")}
|
className={`nav-link ${
|
||||||
>
|
activeTab === "Summary" ? "active" : ""
|
||||||
Summary
|
}`}
|
||||||
</button>
|
onClick={() => setActiveTab("Summary")}
|
||||||
</li>
|
data-bs-toggle="tab"
|
||||||
<li className="nav-item">
|
>
|
||||||
<button
|
Summary
|
||||||
type="button"
|
</button>
|
||||||
className={`nav-link ${AttendanceData?.activeTab === "Details" ? "active" : ""}`}
|
</li>
|
||||||
onClick={() => (AttendanceData.activeTab = "Details")}
|
<li className="nav-item">
|
||||||
>
|
<button
|
||||||
Details
|
type="button"
|
||||||
</button>
|
className={`nav-link ${
|
||||||
</li>
|
activeTab === "Details" ? "active" : ""
|
||||||
</ul>
|
}`}
|
||||||
<div className="ps-6 mb-3">
|
onClick={() => setActiveTab("Details")}
|
||||||
<input
|
data-bs-toggle="tab"
|
||||||
type="date"
|
>
|
||||||
className="form-control p-1"
|
Details
|
||||||
style={{ width: "120px" }}
|
</button>
|
||||||
value={selectedDate}
|
</li>
|
||||||
onChange={(e) => setSelectedDate(e.target.value)}
|
</ul>
|
||||||
/>
|
</div>
|
||||||
|
{/* ✅ Date Picker Aligned Left with Padding */}
|
||||||
|
<div className="ps-6 mb-3 mt-0">
|
||||||
|
<div style={{ width: "120px" }}>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
className="form-control p-1"
|
||||||
|
// style={{ fontSize: "1rem" }}
|
||||||
|
value={selectedDate}
|
||||||
|
onChange={handleDateChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Body */}
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
{/* Summary */}
|
{activeTab === "Summary" && (
|
||||||
{AttendanceData?.activeTab === "Summary" && (
|
|
||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
<div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
@ -115,7 +143,7 @@ const selectedProjectId = useSelectedProject()
|
|||||||
) : (
|
) : (
|
||||||
AttendanceData && (
|
AttendanceData && (
|
||||||
<>
|
<>
|
||||||
<h5 className="fw-bold mb-0">
|
<h5 className="fw-bold mb-0 text-center w-100">
|
||||||
<i className="bx bx-task text-info"></i> Attendance
|
<i className="bx bx-task text-info"></i> Attendance
|
||||||
</h5>
|
</h5>
|
||||||
<h4 className="mb-0 fw-bold">
|
<h4 className="mb-0 fw-bold">
|
||||||
@ -136,9 +164,11 @@ const selectedProjectId = useSelectedProject()
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Details */}
|
{activeTab === "Details" && (
|
||||||
{AttendanceData?.activeTab === "Details" && (
|
<div
|
||||||
<div className="table-responsive" style={{ maxHeight: "300px" }}>
|
className="table-responsive"
|
||||||
|
style={{ maxHeight: "300px", overflowY: "auto" }}
|
||||||
|
>
|
||||||
<table className="table table-hover mb-0 text-start">
|
<table className="table table-hover mb-0 text-start">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -148,17 +178,32 @@ const selectedProjectId = useSelectedProject()
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{AttendanceData?.attendanceTable?.length ? (
|
{AttendanceData?.attendanceTable &&
|
||||||
AttendanceData.attendanceTable.map((r, i) => (
|
AttendanceData.attendanceTable.length > 0 ? (
|
||||||
<tr key={i}>
|
AttendanceData.attendanceTable.map((record, index) => (
|
||||||
<td>{r.firstName} {r.lastName}</td>
|
<tr key={index}>
|
||||||
<td>{r.inTime ? new Date(r.inTime).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "-"}</td>
|
<td>
|
||||||
<td>{r.outTime ? new Date(r.outTime).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "-"}</td>
|
{record.firstName} {record.lastName}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{new Date(record.inTime).toLocaleTimeString([], {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{new Date(record.outTime).toLocaleTimeString([], {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan="3" className="text-center">No attendance data available</td>
|
<td colSpan="3" className="text-center">
|
||||||
|
No attendance data available
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@ -132,7 +132,7 @@ const AttendanceOverview = () => {
|
|||||||
onClick={() => setView("table")}
|
onClick={() => setView("table")}
|
||||||
title="Table View"
|
title="Table View"
|
||||||
>
|
>
|
||||||
<i className="bx bx-list-ul fs-5"></i>
|
<i class="bx bx-list-ul fs-5"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,28 +1,33 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
|
import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
|
import GlobalRepository from "../../repositories/GlobalRepository";
|
||||||
|
|
||||||
const Projects = () => {
|
const Projects = () => {
|
||||||
const {
|
const { projectsCardData } = useDashboardProjectsCardData();
|
||||||
data: projectsCardData,
|
const [projectData, setProjectsData] = useState(projectsCardData);
|
||||||
isLoading,
|
|
||||||
isError,
|
|
||||||
error,
|
|
||||||
refetch,
|
|
||||||
} = useDashboardProjectsCardData();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// When "project" event happens, just refetch
|
setProjectsData(projectsCardData);
|
||||||
const handler = () => {
|
}, [projectsCardData]);
|
||||||
refetch();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
const handler = useCallback(
|
||||||
|
async (msg) => {
|
||||||
|
try {
|
||||||
|
const response =
|
||||||
|
await GlobalRepository.getDashboardProjectsCardData();
|
||||||
|
setProjectsData(response.data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[GlobalRepository]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
eventBus.on("project", handler);
|
eventBus.on("project", handler);
|
||||||
return () => eventBus.off("project", handler);
|
return () => eventBus.off("project", handler);
|
||||||
}, [refetch]);
|
}, [handler]);
|
||||||
|
|
||||||
const totalProjects = projectsCardData?.totalProjects ?? 0;
|
|
||||||
const ongoingProjects = projectsCardData?.ongoingProjects ?? 0;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||||
@ -32,29 +37,20 @@ const Projects = () => {
|
|||||||
Projects
|
Projects
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||||
{isLoading ? (
|
<div>
|
||||||
<div className="d-flex justify-content-center align-items-center flex-grow-1">
|
<h4 className="mb-0 fw-bold">
|
||||||
<div className="spinner-border text-primary" role="status">
|
{projectData.totalProjects?.toLocaleString()}
|
||||||
<span className="visually-hidden">Loading...</span>
|
</h4>
|
||||||
</div>
|
<small className="text-muted">Total</small>
|
||||||
</div>
|
</div>
|
||||||
) : isError ? (
|
<div>
|
||||||
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
|
<h4 className="mb-0 fw-bold">
|
||||||
{error?.message || "Error loading data"}
|
{projectData.ongoingProjects?.toLocaleString()}
|
||||||
|
</h4>
|
||||||
|
<small className="text-muted">Ongoing</small>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
</div>
|
||||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
|
||||||
<div>
|
|
||||||
<h4 className="mb-0 fw-bold">{totalProjects.toLocaleString()}</h4>
|
|
||||||
<small className="text-muted">Total</small>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 className="mb-0 fw-bold">{ongoingProjects.toLocaleString()}</h4>
|
|
||||||
<small className="text-muted">Ongoing</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,16 +1,10 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { useSelector } from "react-redux";
|
||||||
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
|
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
|
||||||
|
|
||||||
const TasksCard = () => {
|
const TasksCard = () => {
|
||||||
const projectId = useSelectedProject();
|
const projectId = useSelector((store) => store.localVariables?.projectId);
|
||||||
|
const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId);
|
||||||
const {
|
|
||||||
data: tasksCardData,
|
|
||||||
isLoading,
|
|
||||||
isError,
|
|
||||||
error,
|
|
||||||
} = useDashboardTasksCardData(projectId);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||||
@ -20,30 +14,28 @@ const TasksCard = () => {
|
|||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isLoading ? (
|
{loading ? (
|
||||||
// Loader while fetching
|
// Loader will be displayed when loading is true
|
||||||
<div className="d-flex justify-content-center align-items-center flex-grow-1">
|
<div className="d-flex justify-content-center align-items-center flex-grow-1">
|
||||||
<div className="spinner-border text-primary" role="status">
|
<div className="spinner-border text-primary" role="status">
|
||||||
<span className="visually-hidden">Loading...</span>
|
<span className="visually-hidden">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : isError ? (
|
) : error ? (
|
||||||
// Show error
|
// Error message if there's an error
|
||||||
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
|
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
|
||||||
{error?.message || "Error loading data"}
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
// Show data
|
// Actual data when loaded successfully
|
||||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-0 fw-bold">
|
<h4 className="mb-0 fw-bold">
|
||||||
{tasksCardData?.totalTasks?.toLocaleString() ?? 0}
|
{tasksCardData?.totalTasks?.toLocaleString()}
|
||||||
</h4>
|
</h4>
|
||||||
<small className="text-muted">Total</small>
|
<small className="text-muted">Total</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-0 fw-bold">
|
<h4 className="mb-0 fw-bold">
|
||||||
{tasksCardData?.completedTasks?.toLocaleString() ?? 0}
|
{tasksCardData?.completedTasks?.toLocaleString()}
|
||||||
</h4>
|
</h4>
|
||||||
<small className="text-muted">Completed</small>
|
<small className="text-muted">Completed</small>
|
||||||
</div>
|
</div>
|
||||||
@ -53,4 +45,4 @@ const TasksCard = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TasksCard;
|
export default TasksCard;
|
||||||
@ -1,45 +1,33 @@
|
|||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
|
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
||||||
|
|
||||||
const Teams = () => {
|
const Teams = () => {
|
||||||
const queryClient = useQueryClient();
|
const projectId = useSelector((store) => store.localVariables?.projectId);
|
||||||
const projectId = useSelectedProject()
|
const { teamsCardData, loading, error } = useDashboardTeamsCardData(projectId);
|
||||||
|
|
||||||
const {
|
const [totalEmployees, setTotalEmployee] = useState(0);
|
||||||
data: teamsCardData,
|
const [inToday, setInToday] = useState(0);
|
||||||
isLoading,
|
|
||||||
isError,
|
// Update state when API data arrives
|
||||||
error,
|
useEffect(() => {
|
||||||
} = useDashboardTeamsCardData(projectId);
|
setTotalEmployee(teamsCardData?.totalEmployees || 0);
|
||||||
|
setInToday(teamsCardData?.inToday || 0);
|
||||||
|
}, [teamsCardData]);
|
||||||
|
|
||||||
// Handle real-time updates via eventBus
|
// Handle real-time updates via eventBus
|
||||||
const handler = useCallback(
|
const handler = useCallback((msg) => {
|
||||||
(msg) => {
|
if (msg.activity === 1) {
|
||||||
if (msg.activity === 1) {
|
setInToday((prev) => prev + 1);
|
||||||
queryClient.setQueryData(["dashboardTeams", projectId], (old) => {
|
}
|
||||||
if (!old) return old;
|
}, []);
|
||||||
return {
|
|
||||||
...old,
|
|
||||||
inToday: (old.inToday || 0) + 1,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[queryClient, projectId]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
eventBus.on("attendance", handler);
|
eventBus.on("attendance", handler);
|
||||||
return () => eventBus.off("attendance", handler);
|
return () => eventBus.off("attendance", handler);
|
||||||
}, [handler]);
|
}, [handler]);
|
||||||
|
|
||||||
const inToday = teamsCardData?.inToday ?? 0;
|
|
||||||
const totalEmployees = teamsCardData?.totalEmployees ?? 0;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||||
@ -48,17 +36,18 @@ const Teams = () => {
|
|||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isLoading ? (
|
{loading ? (
|
||||||
|
// Blue spinner loader
|
||||||
<div className="d-flex justify-content-center align-items-center flex-grow-1">
|
<div className="d-flex justify-content-center align-items-center flex-grow-1">
|
||||||
<div className="spinner-border text-primary" role="status">
|
<div className="spinner-border text-primary" role="status">
|
||||||
<span className="visually-hidden">Loading...</span>
|
<span className="visually-hidden">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : isError ? (
|
) : error ? (
|
||||||
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
|
// Error message if data fetching fails
|
||||||
{error?.message || "Error loading data"}
|
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
|
// Display data once loaded
|
||||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-0 fw-bold">{totalEmployees.toLocaleString()}</h4>
|
<h4 className="mb-0 fw-bold">{totalEmployees.toLocaleString()}</h4>
|
||||||
@ -74,4 +63,4 @@ const Teams = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Teams;
|
export default Teams;
|
||||||
@ -179,7 +179,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
|||||||
<tr style={{ height: "200px" }}>
|
<tr style={{ height: "200px" }}>
|
||||||
<td
|
<td
|
||||||
colSpan={contactList.length + 1}
|
colSpan={contactList.length + 1}
|
||||||
className="text-center border-0 align-middle"
|
className="text-center align-middle"
|
||||||
>
|
>
|
||||||
No contacts found
|
No contacts found
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -23,6 +23,7 @@ const ManageBucket1 = () => {
|
|||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setAction(null);
|
setAction(null);
|
||||||
setSelectedBucket(null);
|
setSelectedBucket(null);
|
||||||
|
setDeleteId(null);
|
||||||
};
|
};
|
||||||
const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
|
const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
|
||||||
handleClose();
|
handleClose();
|
||||||
@ -48,26 +49,23 @@ const ManageBucket1 = () => {
|
|||||||
<p className="fs-5 fw-semibold m-0">Manage Buckets</p>
|
<p className="fs-5 fw-semibold m-0">Manage Buckets</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{action ? (
|
{action == "create" ? (
|
||||||
<>
|
<>
|
||||||
{action && (
|
<BucketForm
|
||||||
<div>
|
selectedBucket={selectedBucket}
|
||||||
<BucketForm
|
mode={action} // pass create | edit
|
||||||
selectedBucket={selectedBucket}
|
onSubmit={handleSubmit}
|
||||||
mode={action} // pass create | edit
|
onCancel={() => {
|
||||||
onSubmit={handleSubmit}
|
setAction(null);
|
||||||
onCancel={() => {
|
setSelectedBucket(null);
|
||||||
setAction(null);
|
}}
|
||||||
setSelectedBucket(null);
|
isPending={creating || updating}
|
||||||
}}
|
/>
|
||||||
isPending={creating || updating}
|
{action === "edit" && selectedBucket && (
|
||||||
/>
|
<AssignedBucket
|
||||||
{action === "edit" && (
|
selectedBucket={selectedBucket}
|
||||||
<AssignedBucket
|
handleClose={handleClose}
|
||||||
selectedBucket={selectedBucket}
|
/>
|
||||||
handleClose={handleClose}
|
|
||||||
/>)}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
@ -93,19 +91,11 @@ const ManageBucket1 = () => {
|
|||||||
buckets={data}
|
buckets={data}
|
||||||
loading={isLoading}
|
loading={isLoading}
|
||||||
searchTerm={searchTerm}
|
searchTerm={searchTerm}
|
||||||
onDelete={(id) => setDeleteBucket({ isOpen: true, bucketId: id })}
|
onDelete={(id) => setDeleteBucket({isOpen:true,bucketId:id})}
|
||||||
onEdit={(b) => {
|
|
||||||
setAction("edit")
|
|
||||||
setSelectedBucket(b)
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default ManageBucket1;
|
export default ManageBucket1;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@ import Label from "../common/Label";
|
|||||||
const ManageContact = ({ contactId, closeModal }) => {
|
const ManageContact = ({ contactId, closeModal }) => {
|
||||||
// fetch master data
|
// fetch master data
|
||||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||||
const { data:projects, loading: projectLoading } = useProjects();
|
const { projects, loading: projectLoading } = useProjects();
|
||||||
const { contactCategory, loading: contactCategoryLoading } =
|
const { contactCategory, loading: contactCategoryLoading } =
|
||||||
useContactCategory();
|
useContactCategory();
|
||||||
const { organizationList } = useOrganization();
|
const { organizationList } = useOrganization();
|
||||||
|
|||||||
@ -96,7 +96,7 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
|
|||||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||||
startField="startDate"
|
startField="startDate"
|
||||||
endField="endDate"
|
endField="endDate"
|
||||||
defaultRange={false}
|
defaultRange={true}
|
||||||
resetSignal={resetKey}
|
resetSignal={resetKey}
|
||||||
maxDate={new Date()}
|
maxDate={new Date()}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
|||||||
return (
|
return (
|
||||||
<DocumentContext.Provider value={contextValues}>
|
<DocumentContext.Provider value={contextValues}>
|
||||||
<div className="mt-5">
|
<div className="mt-5">
|
||||||
<div className="card page-min-h d-flex p-2">
|
<div className="card d-flex p-2">
|
||||||
<div className="row align-items-center">
|
<div className="row align-items-center">
|
||||||
{/* Search */}
|
{/* Search */}
|
||||||
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
|
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
|
||||||
@ -149,11 +149,30 @@ const Documents = ({ Document_Entity, Entity }) => {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
<div className="col-6 col-md-6 col-lg-8 text-end">
|
<div className="col-6 col-md-6 col-lg-8 text-end">
|
||||||
|
{/* <span
|
||||||
|
className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
|
||||||
|
disabled={isRefetching}
|
||||||
|
onClick={() => {
|
||||||
|
setSearchText("");
|
||||||
|
setFilter(DocumentFilterDefaultValues);
|
||||||
|
refetchFn && refetchFn();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Refresh
|
||||||
|
<i
|
||||||
|
className={`bx bx-refresh ms-1 ${
|
||||||
|
isRefetching ? "bx-spin" : ""
|
||||||
|
}`}
|
||||||
|
></i>
|
||||||
|
</span> */}
|
||||||
|
|
||||||
{(isSelf || canUploadDocument) && (
|
{(isSelf || canUploadDocument) && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-primary me-3"
|
|
||||||
type="button"
|
type="button"
|
||||||
|
title="Add New Document"
|
||||||
|
className="p-1 bg-primary rounded-circle cursor-pointer"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
setManageDoc({
|
setManageDoc({
|
||||||
document: null,
|
document: null,
|
||||||
@ -161,10 +180,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
<i className="bx bx-plus fs-4 text-white"></i>
|
||||||
<span className="d-none d-md-inline-block">
|
|
||||||
Add New Document
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
172
src/components/Employee/DemoTable.jsx
Normal file
172
src/components/Employee/DemoTable.jsx
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const DemoTable = () => {
|
||||||
|
return (
|
||||||
|
<div className="content-wrapper">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-datatable table-responsive">
|
||||||
|
<table className="datatables-basic table border-top">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th>id</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="offcanvas offcanvas-end" id="add-new-record">
|
||||||
|
<div className="offcanvas-header border-bottom">
|
||||||
|
<h5 className="offcanvas-title" id="exampleModalLabel">
|
||||||
|
New Record
|
||||||
|
</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn-close text-reset"
|
||||||
|
data-bs-dismiss="offcanvas"
|
||||||
|
aria-label="Close"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div className="offcanvas-body flex-grow-1">
|
||||||
|
<form
|
||||||
|
className="add-new-record pt-0 row g-2"
|
||||||
|
id="form-add-new-record"
|
||||||
|
onsubmit="return false"
|
||||||
|
>
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<label className="form-label" for="basicFullname">
|
||||||
|
Full Name
|
||||||
|
</label>
|
||||||
|
<div className="input-group input-group-merge">
|
||||||
|
<span id="basicFullname2" className="input-group-text">
|
||||||
|
<i className="bx bx-user"></i>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="basicFullname"
|
||||||
|
className="form-control dt-full-name"
|
||||||
|
name="basicFullname"
|
||||||
|
placeholder="John Doe"
|
||||||
|
aria-label="John Doe"
|
||||||
|
aria-describedby="basicFullname2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<label className="form-label" for="basicPost">
|
||||||
|
Post
|
||||||
|
</label>
|
||||||
|
<div className="input-group input-group-merge">
|
||||||
|
<span id="basicPost2" className="input-group-text">
|
||||||
|
<i className="bx bxs-briefcase"></i>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="basicPost"
|
||||||
|
name="basicPost"
|
||||||
|
className="form-control dt-post"
|
||||||
|
placeholder="Web Developer"
|
||||||
|
aria-label="Web Developer"
|
||||||
|
aria-describedby="basicPost2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<label className="form-label" for="basicEmail">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<div className="input-group input-group-merge">
|
||||||
|
<span className="input-group-text">
|
||||||
|
<i className="bx bx-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="basicEmail"
|
||||||
|
name="basicEmail"
|
||||||
|
className="form-control dt-email"
|
||||||
|
placeholder="john.doe@example.com"
|
||||||
|
aria-label="john.doe@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-text">
|
||||||
|
You can use letters, numbers & periods
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<label className="form-label" for="basicDate">
|
||||||
|
Joining Date
|
||||||
|
</label>
|
||||||
|
<div className="input-group input-group-merge">
|
||||||
|
<span id="basicDate2" className="input-group-text">
|
||||||
|
<i className="bx bx-calendar"></i>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control dt-date"
|
||||||
|
id="basicDate"
|
||||||
|
name="basicDate"
|
||||||
|
aria-describedby="basicDate2"
|
||||||
|
placeholder="MM/DD/YYYY"
|
||||||
|
aria-label="MM/DD/YYYY"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<label className="form-label" for="basicSalary">
|
||||||
|
Salary
|
||||||
|
</label>
|
||||||
|
<div className="input-group input-group-merge">
|
||||||
|
<span id="basicSalary2" className="input-group-text">
|
||||||
|
<i className="bx bx-dollar"></i>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="basicSalary"
|
||||||
|
name="basicSalary"
|
||||||
|
className="form-control dt-salary"
|
||||||
|
placeholder="12000"
|
||||||
|
aria-label="12000"
|
||||||
|
aria-describedby="basicSalary2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-primary data-submit me-sm-4 me-1"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="reset"
|
||||||
|
className="btn btn-outline-secondary"
|
||||||
|
data-bs-dismiss="offcanvas"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="my-12" />
|
||||||
|
|
||||||
|
<hr className="my-12" />
|
||||||
|
|
||||||
|
<hr className="my-12" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="content-backdrop fade"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DemoTable;
|
||||||
@ -14,24 +14,28 @@ import { FormProvider, useForm } from "react-hook-form";
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { localToUtc } from "../../utils/appUtils";
|
import { localToUtc } from "../../utils/appUtils";
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
|
|
||||||
const EmpAttendance = () => {
|
const EmpAttendance = ({ employee }) => {
|
||||||
const { employeeId } = useParams();
|
|
||||||
const [attendances, setAttendnaces] = useState([]);
|
const [attendances, setAttendnaces] = useState([]);
|
||||||
const [selectedDate, setSelectedDate] = useState("");
|
const [selectedDate, setSelectedDate] = useState("");
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [attendanceId, setAttendanecId] = useState();
|
const [attendanceId, setAttendanecId] = useState();
|
||||||
|
|
||||||
const methods = useForm({
|
const methods = useForm({
|
||||||
|
resolver: zodResolver(
|
||||||
|
z.object({
|
||||||
|
startDate: z.string(),
|
||||||
|
endDate: z.string(),
|
||||||
|
})
|
||||||
|
),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
startDate: moment().subtract(6, "days").format("DD-MM-YYYY"),
|
startDate: "",
|
||||||
endDate: moment().format("DD-MM-YYYY"),
|
endDate: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { watch } = methods;
|
const { control, register, handleSubmit, reset, watch } = methods;
|
||||||
|
const startDate = watch("startDate");
|
||||||
const [startDate, endDate] = watch(["startDate", "endDate"]);
|
const endDate = watch("endDate");
|
||||||
const {
|
const {
|
||||||
data = [],
|
data = [],
|
||||||
isLoading: loading,
|
isLoading: loading,
|
||||||
@ -40,21 +44,76 @@ const EmpAttendance = () => {
|
|||||||
error,
|
error,
|
||||||
refetch,
|
refetch,
|
||||||
} = useAttendanceByEmployee(
|
} = useAttendanceByEmployee(
|
||||||
employeeId,
|
employee,
|
||||||
startDate ? localToUtc(startDate) : null,
|
localToUtc(startDate),
|
||||||
endDate ? localToUtc(endDate) : null
|
localToUtc(endDate)
|
||||||
);
|
);
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const sorted = [...data].sort(
|
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const isSameDay = (dateStr) => {
|
||||||
|
if (!dateStr) return false;
|
||||||
|
const d = new Date(dateStr);
|
||||||
|
d.setHours(0, 0, 0, 0);
|
||||||
|
return d.getTime() === today.getTime();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isBeforeToday = (dateStr) => {
|
||||||
|
if (!dateStr) return false;
|
||||||
|
const d = new Date(dateStr);
|
||||||
|
d.setHours(0, 0, 0, 0);
|
||||||
|
return d.getTime() < today.getTime();
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortByName = (a, b) => {
|
||||||
|
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||||
|
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||||
|
return nameA?.localeCompare(nameB);
|
||||||
|
};
|
||||||
|
|
||||||
|
const group1 = data
|
||||||
|
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||||
|
.sort(sortByName);
|
||||||
|
const group2 = data
|
||||||
|
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||||
|
.sort(sortByName);
|
||||||
|
const group3 = data
|
||||||
|
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||||
|
.sort(sortByName);
|
||||||
|
const group4 = data
|
||||||
|
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
|
||||||
|
.sort(sortByName);
|
||||||
|
const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||||
|
|
||||||
|
|
||||||
|
const uniqueMap = new Map();
|
||||||
|
|
||||||
|
[...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
|
||||||
|
const date = moment(rec.checkInTime || rec.checkOutTime).format(
|
||||||
|
"YYYY-MM-DD"
|
||||||
|
);
|
||||||
|
const key = `${rec.employeeId}-${date}`;
|
||||||
|
const existing = uniqueMap.get(key);
|
||||||
|
if (
|
||||||
|
!existing ||
|
||||||
|
new Date(rec.checkInTime || rec.checkOutTime) >
|
||||||
|
new Date(existing.checkInTime || existing.checkOutTime)
|
||||||
|
) {
|
||||||
|
uniqueMap.set(key, rec);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedFinalList = [...uniqueMap.values()].sort(
|
||||||
(a, b) =>
|
(a, b) =>
|
||||||
new Date(b?.checkInTime).getTime() - new Date(a?.checkInTime).getTime()
|
new Date(b.checkInTime || b.checkOutTime) -
|
||||||
|
new Date(a.checkInTime || a.checkOutTime)
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log(sorted);
|
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||||
|
|
||||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||||
sorted,
|
sortedFinalList,
|
||||||
ITEMS_PER_PAGE
|
ITEMS_PER_PAGE
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -64,6 +123,7 @@ const EmpAttendance = () => {
|
|||||||
};
|
};
|
||||||
const closeModal = () => setIsModalOpen(false);
|
const closeModal = () => setIsModalOpen(false);
|
||||||
|
|
||||||
|
const onSubmit = (formData) => {};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isModalOpen && (
|
{isModalOpen && (
|
||||||
@ -76,10 +136,20 @@ const EmpAttendance = () => {
|
|||||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||||
id="DataTables_Table_0_length"
|
id="DataTables_Table_0_length"
|
||||||
>
|
>
|
||||||
<div className="col-4 col-md-3 my-0 ">
|
<div className="col-3 my-0 ">
|
||||||
<>
|
<>
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<DateRangePicker1 />
|
<form
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
className="p-2 text-start"
|
||||||
|
>
|
||||||
|
<DateRangePicker1
|
||||||
|
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||||
|
startField="startDate"
|
||||||
|
endField="endDate"
|
||||||
|
defaultRange={true}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</>
|
</>
|
||||||
</div>
|
</div>
|
||||||
@ -164,7 +234,7 @@ const EmpAttendance = () => {
|
|||||||
</table>
|
</table>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{!loading && data.length > 20 && (
|
{!loading && sortedFinalList.length > 20 && (
|
||||||
<nav aria-label="Page ">
|
<nav aria-label="Page ">
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||||
<li
|
<li
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
||||||
import GlobalModel from "../common/GlobalModel";
|
import GlobalModel from "../common/GlobalModel";
|
||||||
import ManageEmployee from "./ManageEmployee";
|
import ManageEmployee from "./ManageEmployee";
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
import { useModal } from "../../hooks/useAuth";
|
|
||||||
|
|
||||||
const EmpBanner = ({ profile, loggedInUser }) => {
|
const EmpBanner = ({ profile, loggedInUser }) => {
|
||||||
const {onOpen} = useModal("ChangePassword")
|
const { openChangePassword } = useChangePassword();
|
||||||
const [showModal, setShowModal] = useState(false);
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -87,7 +86,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
|
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
|
||||||
{profile?.isActive && (
|
{profile?.isActive && ( // ✅ show only if active
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-primary btn-block"
|
className="btn btn-sm btn-primary btn-block"
|
||||||
@ -102,7 +101,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
|
|||||||
{profile?.id === loggedInUser?.employeeInfo?.id && (
|
{profile?.id === loggedInUser?.employeeInfo?.id && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-outline-primary btn-block"
|
className="btn btn-sm btn-outline-primary btn-block"
|
||||||
onClick={onOpen}
|
onClick={() => openChangePassword()}
|
||||||
>
|
>
|
||||||
Change Password
|
Change Password
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
7
src/components/Employee/EmployeeList.jsx
Normal file
7
src/components/Employee/EmployeeList.jsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const EmployeeList = () => {
|
||||||
|
return <div>EmployeeList</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EmployeeList;
|
||||||
@ -1,124 +0,0 @@
|
|||||||
import { z } from "zod"
|
|
||||||
|
|
||||||
|
|
||||||
const mobileNumberRegex = /^[0-9]\d{9}$/;
|
|
||||||
|
|
||||||
export const employeeSchema =
|
|
||||||
z.object({
|
|
||||||
firstName: z.string().min(1, { message: "First Name is required" }),
|
|
||||||
middleName: z.string().optional(),
|
|
||||||
lastName: z.string().min(1, { message: "Last Name is required" }),
|
|
||||||
email: z
|
|
||||||
.string()
|
|
||||||
.max(80, "Email cannot exceed 80 characters")
|
|
||||||
.optional()
|
|
||||||
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
|
|
||||||
message: "Invalid email format",
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(val) => {
|
|
||||||
if (!val) return true;
|
|
||||||
const [local, domain] = val.split("@");
|
|
||||||
return (
|
|
||||||
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
|
|
||||||
);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Email local or domain part is too long",
|
|
||||||
}
|
|
||||||
),
|
|
||||||
currentAddress: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Current Address is required" })
|
|
||||||
.max(500, { message: "Address cannot exceed 500 characters" }),
|
|
||||||
birthDate: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Birth Date is required" })
|
|
||||||
.refine(
|
|
||||||
(date, ctx) => {
|
|
||||||
return new Date(date) <= new Date();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Birth date cannot be in the future",
|
|
||||||
}
|
|
||||||
),
|
|
||||||
joiningDate: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Joining Date is required" })
|
|
||||||
.refine(
|
|
||||||
(date, ctx) => {
|
|
||||||
return new Date(date) <= new Date();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Joining date cannot be in the future",
|
|
||||||
}
|
|
||||||
),
|
|
||||||
emergencyPhoneNumber: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Phone Number is required" })
|
|
||||||
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
|
||||||
emergencyContactPerson: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Emergency Contact Person is required" })
|
|
||||||
.regex(/^[A-Za-z\s]+$/, {
|
|
||||||
message: "Emergency Contact Person must contain only letters",
|
|
||||||
}),
|
|
||||||
aadharNumber: z
|
|
||||||
.string()
|
|
||||||
.optional()
|
|
||||||
.refine((val) => !val || /^\d{12}$/.test(val), {
|
|
||||||
message: "Aadhar card must be exactly 12 digits long",
|
|
||||||
}),
|
|
||||||
gender: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Gender is required" })
|
|
||||||
.refine((val) => val !== "Select Gender", {
|
|
||||||
message: "Please select a gender",
|
|
||||||
}),
|
|
||||||
panNumber: z
|
|
||||||
.string()
|
|
||||||
.optional()
|
|
||||||
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
|
|
||||||
message: "Invalid PAN number",
|
|
||||||
}),
|
|
||||||
permanentAddress: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Permanent Address is required" })
|
|
||||||
.max(500, { message: "Address cannot exceed 500 characters" }),
|
|
||||||
phoneNumber: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Phone Number is required" })
|
|
||||||
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
|
||||||
jobRoleId: z.string().min(1, { message: "Role is required" }),
|
|
||||||
organizationId:z.string().min(1,{message:"Organization is required"}),
|
|
||||||
hasApplicationAccess:z.boolean().default(false),
|
|
||||||
}).refine((data) => {
|
|
||||||
if (data.hasApplicationAccess) {
|
|
||||||
return data.email && data.email.trim() !== "";
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}, {
|
|
||||||
message: "Email is required when employee has access",
|
|
||||||
path: ["email"],
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
export const defatEmployeeObj = {
|
|
||||||
firstName: "",
|
|
||||||
middleName: "",
|
|
||||||
lastName: "",
|
|
||||||
email: "",
|
|
||||||
currentAddress: "",
|
|
||||||
birthDate: "",
|
|
||||||
joiningDate: "",
|
|
||||||
emergencyPhoneNumber: "",
|
|
||||||
emergencyContactPerson: "",
|
|
||||||
aadharNumber: "",
|
|
||||||
gender: "",
|
|
||||||
panNumber: "",
|
|
||||||
permanentAddress: "",
|
|
||||||
phoneNumber: "",
|
|
||||||
jobRoleId: null,
|
|
||||||
organizationId:"",
|
|
||||||
hasApplicationAccess:false
|
|
||||||
}
|
|
||||||
@ -1,37 +1,36 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import showToast from "../../services/toastService";
|
||||||
|
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
import useMaster from "../../hooks/masterHook/useMaster";
|
import useMaster from "../../hooks/masterHook/useMaster";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||||
import { formatDate } from "../../utils/dateUtils";
|
import { formatDate } from "../../utils/dateUtils";
|
||||||
|
import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
|
||||||
import {
|
import {
|
||||||
useEmployeeProfile,
|
cacheData,
|
||||||
useUpdateEmployee,
|
clearCacheKey,
|
||||||
} from "../../hooks/useEmployees";
|
getCachedData,
|
||||||
|
} from "../../slices/apiDataManager";
|
||||||
|
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import DatePicker from "../common/DatePicker";
|
import DatePicker from "../common/DatePicker";
|
||||||
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
|
||||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
||||||
|
|
||||||
const ManageEmployee = ({ employeeId, onClosed }) => {
|
const mobileNumberRegex = /^[0-9]\d{9}$/;
|
||||||
|
|
||||||
|
const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { mutate: updateEmployee, isPending } = useUpdateEmployee();
|
const { mutate: updateEmployee, isPending } = useUpdateEmployee();
|
||||||
const {
|
|
||||||
data: organzationList,
|
|
||||||
isLoading,
|
|
||||||
isError,
|
|
||||||
error: EempError,
|
|
||||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
|
|
||||||
const {
|
const {
|
||||||
employee,
|
employee,
|
||||||
error,
|
error,
|
||||||
loading: empLoading,
|
loading: empLoading,
|
||||||
refetch,
|
refetch
|
||||||
} = useEmployeeProfile(employeeId);
|
} = useEmployeeProfile(employeeId);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -39,7 +38,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
}, [employeeId]);
|
}, [employeeId]);
|
||||||
|
|
||||||
const [disabledEmail, setDisabledEmail] = useState(false);
|
const [disabledEmail, setDisabledEmail] = useState(false);
|
||||||
|
|
||||||
const { data: job_role, loading } = useMaster();
|
const { data: job_role, loading } = useMaster();
|
||||||
const [isloading, setLoading] = useState(false);
|
const [isloading, setLoading] = useState(false);
|
||||||
const navigation = useNavigate();
|
const navigation = useNavigate();
|
||||||
@ -47,9 +45,98 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
const [currentAddressLength, setCurrentAddressLength] = useState(0);
|
const [currentAddressLength, setCurrentAddressLength] = useState(0);
|
||||||
const [permanentAddressLength, setPermanentAddressLength] = useState(0);
|
const [permanentAddressLength, setPermanentAddressLength] = useState(0);
|
||||||
|
|
||||||
|
const userSchema = z.object({
|
||||||
|
...(employeeId ? { id: z.string().optional() } : {}),
|
||||||
|
firstName: z.string().min(1, { message: "First Name is required" }),
|
||||||
|
middleName: z.string().optional(),
|
||||||
|
lastName: z.string().min(1, { message: "Last Name is required" }),
|
||||||
|
email: z
|
||||||
|
.string()
|
||||||
|
.max(80, "Email cannot exceed 80 characters")
|
||||||
|
.optional()
|
||||||
|
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
|
||||||
|
message: "Invalid email format",
|
||||||
|
})
|
||||||
|
.refine(
|
||||||
|
(val) => {
|
||||||
|
if (!val) return true;
|
||||||
|
const [local, domain] = val.split("@");
|
||||||
|
return (
|
||||||
|
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
|
||||||
|
);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: "Email local or domain part is too long",
|
||||||
|
}
|
||||||
|
),
|
||||||
|
currentAddress: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Current Address is required" })
|
||||||
|
.max(500, { message: "Address cannot exceed 500 characters" }),
|
||||||
|
birthDate: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Birth Date is required" })
|
||||||
|
.refine(
|
||||||
|
(date, ctx) => {
|
||||||
|
return new Date(date) <= new Date();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: "Birth date cannot be in the future",
|
||||||
|
}
|
||||||
|
),
|
||||||
|
joiningDate: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Joining Date is required" })
|
||||||
|
.refine(
|
||||||
|
(date, ctx) => {
|
||||||
|
return new Date(date) <= new Date();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: "Joining date cannot be in the future",
|
||||||
|
}
|
||||||
|
),
|
||||||
|
emergencyPhoneNumber: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Phone Number is required" })
|
||||||
|
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
||||||
|
emergencyContactPerson: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Emergency Contact Person is required" })
|
||||||
|
.regex(/^[A-Za-z\s]+$/, {
|
||||||
|
message: "Emergency Contact Person must contain only letters",
|
||||||
|
}),
|
||||||
|
aadharNumber: z
|
||||||
|
.string()
|
||||||
|
.optional()
|
||||||
|
.refine((val) => !val || /^\d{12}$/.test(val), {
|
||||||
|
message: "Aadhar card must be exactly 12 digits long",
|
||||||
|
}),
|
||||||
|
gender: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Gender is required" })
|
||||||
|
.refine((val) => val !== "Select Gender", {
|
||||||
|
message: "Please select a gender",
|
||||||
|
}),
|
||||||
|
panNumber: z
|
||||||
|
.string()
|
||||||
|
.optional()
|
||||||
|
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
|
||||||
|
message: "Invalid PAN number",
|
||||||
|
}),
|
||||||
|
permanentAddress: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Permanent Address is required" })
|
||||||
|
.max(500, { message: "Address cannot exceed 500 characters" }),
|
||||||
|
phoneNumber: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Phone Number is required" })
|
||||||
|
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
||||||
|
jobRoleId: z.string().min(1, { message: "Role is required" }),
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refetch();
|
refetch()
|
||||||
}, []);
|
}, [])
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -60,8 +147,25 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
reset,
|
reset,
|
||||||
getValues,
|
getValues,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(employeeSchema),
|
resolver: zodResolver(userSchema),
|
||||||
defaultValues: defatEmployeeObj,
|
defaultValues: {
|
||||||
|
id: currentEmployee?.id || null,
|
||||||
|
firstName: currentEmployee?.firstName || "",
|
||||||
|
middleName: currentEmployee?.middleName || "",
|
||||||
|
lastName: currentEmployee?.lastName || "",
|
||||||
|
email: currentEmployee?.email || "",
|
||||||
|
currentAddress: currentEmployee?.currentAddress || "",
|
||||||
|
birthDate: formatDate(currentEmployee?.birthDate) || "",
|
||||||
|
joiningDate: formatDate(currentEmployee?.joiningDate) || "",
|
||||||
|
emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
|
||||||
|
emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
|
||||||
|
aadharNumber: currentEmployee?.aadharNumber || "",
|
||||||
|
gender: currentEmployee?.gender || "",
|
||||||
|
panNumber: currentEmployee?.panNumber || "",
|
||||||
|
permanentAddress: currentEmployee?.permanentAddress || "",
|
||||||
|
phoneNumber: currentEmployee?.phoneNumber || "",
|
||||||
|
jobRoleId: currentEmployee?.jobRoleId.toString() || null,
|
||||||
|
},
|
||||||
mode: "onChange",
|
mode: "onChange",
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -72,13 +176,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
data.email = null;
|
data.email = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload = { ...data };
|
updateEmployee({ ...data, IsAllEmployee }, {
|
||||||
|
|
||||||
if (employeeId) {
|
|
||||||
payload.id = employeeId;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateEmployee(payload, {
|
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
reset();
|
reset();
|
||||||
onClosed();
|
onClosed();
|
||||||
@ -86,6 +184,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!loading && !error && employee) {
|
if (!loading && !error && employee) {
|
||||||
setCurrentEmployee(employee);
|
setCurrentEmployee(employee);
|
||||||
@ -96,47 +195,37 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
reset(
|
reset(
|
||||||
currentEmployee
|
currentEmployee
|
||||||
? {
|
? {
|
||||||
id: currentEmployee.id || null,
|
id: currentEmployee.id || null,
|
||||||
firstName: currentEmployee.firstName || "",
|
firstName: currentEmployee.firstName || "",
|
||||||
middleName: currentEmployee.middleName || "",
|
middleName: currentEmployee.middleName || "",
|
||||||
lastName: currentEmployee.lastName || "",
|
lastName: currentEmployee.lastName || "",
|
||||||
email: currentEmployee.email || "",
|
email: currentEmployee.email || "",
|
||||||
currentAddress: currentEmployee.currentAddress || "",
|
currentAddress: currentEmployee.currentAddress || "",
|
||||||
birthDate: formatDate(currentEmployee.birthDate) || "",
|
birthDate: formatDate(currentEmployee.birthDate) || "",
|
||||||
joiningDate: formatDate(currentEmployee.joiningDate) || "",
|
joiningDate: formatDate(currentEmployee.joiningDate) || "",
|
||||||
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
|
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
|
||||||
emergencyContactPerson:
|
emergencyContactPerson:
|
||||||
currentEmployee.emergencyContactPerson || "",
|
currentEmployee.emergencyContactPerson || "",
|
||||||
aadharNumber: currentEmployee.aadharNumber || "",
|
aadharNumber: currentEmployee.aadharNumber || "",
|
||||||
gender: currentEmployee.gender || "",
|
gender: currentEmployee.gender || "",
|
||||||
panNumber: currentEmployee.panNumber || "",
|
panNumber: currentEmployee.panNumber || "",
|
||||||
permanentAddress: currentEmployee.permanentAddress || "",
|
permanentAddress: currentEmployee.permanentAddress || "",
|
||||||
phoneNumber: currentEmployee.phoneNumber || "",
|
phoneNumber: currentEmployee.phoneNumber || "",
|
||||||
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
|
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
|
||||||
organizationId: currentEmployee.organizationId || "",
|
}
|
||||||
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
|
|
||||||
}
|
|
||||||
: {}
|
: {}
|
||||||
);
|
);
|
||||||
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
|
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
|
||||||
setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
|
setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
|
||||||
}, [currentEmployee, reset]);
|
}, [currentEmployee, reset]);
|
||||||
|
|
||||||
const hasAccessAplication = watch("hasApplicationAccess");
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
|
<form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
|
||||||
<div className="text-center">
|
<div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
|
||||||
<p className="fs-5 fw-semibold">
|
|
||||||
{" "}
|
|
||||||
{employee ? "Update Employee" : "Create Employee"}
|
|
||||||
</p>{" "}
|
|
||||||
</div>
|
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>First Name</Label>
|
||||||
First Name
|
|
||||||
</Label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="firstName"
|
name="firstName"
|
||||||
@ -155,10 +244,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{errors.firstName && (
|
{errors.firstName && (
|
||||||
<div
|
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.firstName.message}
|
{errors.firstName.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -181,18 +267,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{errors.middleName && (
|
{errors.middleName && (
|
||||||
<div
|
<div className="danger-text text-start " style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start "
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.middleName.message}
|
{errors.middleName.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>Last Name</Label>
|
||||||
Last Name
|
|
||||||
</Label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("lastName", {
|
{...register("lastName", {
|
||||||
@ -209,24 +291,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{errors.lastName && (
|
{errors.lastName && (
|
||||||
<div
|
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.lastName.message}
|
{errors.lastName.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-6">
|
<div className="col-sm-6">
|
||||||
<Label
|
<div className="form-text text-start">Email</div>
|
||||||
htmlFor="email"
|
|
||||||
className="text-start form-text"
|
|
||||||
required={hasAccessAplication}
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</Label>
|
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email"
|
id="email"
|
||||||
@ -247,9 +321,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-6">
|
<div className="col-sm-6">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>Phone Number</Label>
|
||||||
Phone Number
|
|
||||||
</Label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
@ -273,9 +345,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
<div className="row mb-3"></div>
|
<div className="row mb-3"></div>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>Gender</Label>
|
||||||
Gender
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<select
|
<select
|
||||||
@ -317,10 +387,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors.birthDate && (
|
{errors.birthDate && (
|
||||||
<div
|
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.birthDate.message}
|
{errors.birthDate.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -341,10 +408,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors.joiningDate && (
|
{errors.joiningDate && (
|
||||||
<div
|
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.joiningDate.message}
|
{errors.joiningDate.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -352,9 +416,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-6">
|
<div className="col-sm-6">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>Current Address</Label>
|
||||||
Current Address
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
id="currentAddress"
|
id="currentAddress"
|
||||||
@ -366,11 +428,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
maxLength={500}
|
maxLength={500}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setCurrentAddressLength(e.target.value.length);
|
setCurrentAddressLength(e.target.value.length);
|
||||||
|
// let react-hook-form still handle it
|
||||||
register("currentAddress").onChange(e);
|
register("currentAddress").onChange(e);
|
||||||
}}
|
}}
|
||||||
></textarea>
|
></textarea>
|
||||||
<div className="text-end muted">
|
<div className="text-end muted">
|
||||||
<small> {500 - currentAddressLength} characters left</small>
|
<small>
|
||||||
|
{" "}
|
||||||
|
{500 - currentAddressLength} characters left
|
||||||
|
</small>
|
||||||
</div>
|
</div>
|
||||||
{errors.currentAddress && (
|
{errors.currentAddress && (
|
||||||
<div
|
<div
|
||||||
@ -400,7 +466,9 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
}}
|
}}
|
||||||
></textarea>
|
></textarea>
|
||||||
<div className="text-end muted">
|
<div className="text-end muted">
|
||||||
<small>{500 - permanentAddressLength} characters left</small>
|
<small>
|
||||||
|
{500 - permanentAddressLength} characters left
|
||||||
|
</small>
|
||||||
</div>
|
</div>
|
||||||
{errors.permanentAddress && (
|
{errors.permanentAddress && (
|
||||||
<div
|
<div
|
||||||
@ -412,55 +480,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* -------------- */}
|
|
||||||
<div className="row mb-3">
|
|
||||||
<div className="col-sm-6">
|
|
||||||
<Label className="form-text text-start" required>
|
|
||||||
Organization
|
|
||||||
</Label>
|
|
||||||
<div className="input-group">
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
{...register("organizationId")}
|
|
||||||
id="organizationId"
|
|
||||||
aria-label=""
|
|
||||||
>
|
|
||||||
<option disabled value="">
|
|
||||||
Select Organization
|
|
||||||
</option>
|
|
||||||
{organzationList?.data
|
|
||||||
.sort((a, b) => a?.name?.localeCompare(b?.name))
|
|
||||||
.map((item) => (
|
|
||||||
<option value={item?.id} key={item?.id}>
|
|
||||||
{item?.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{errors.organizationId && (
|
|
||||||
<div
|
|
||||||
className="danger-text text-start justify-content-center"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.organizationId.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-sm-6 d-flex align-items-center mt-2">
|
|
||||||
<label className="form-check-label d-flex align-items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input me-2"
|
|
||||||
{...register("hasApplicationAccess")}
|
|
||||||
/>
|
|
||||||
Has Application Access ?
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --------------- */}
|
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
{" "}
|
{" "}
|
||||||
<div className="divider">
|
<div className="divider">
|
||||||
@ -469,9 +488,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>Official Designation</Label>
|
||||||
Official Designation
|
|
||||||
</Label>
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<select
|
<select
|
||||||
className="form-select form-select-sm"
|
className="form-select form-select-sm"
|
||||||
@ -584,6 +601,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{employeeId && (
|
||||||
|
<div className="row mb-3 d-none">
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<input type="text" name="id" {...register("id")} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="row text-end">
|
<div className="row text-end">
|
||||||
<div className="col-sm-12">
|
<div className="col-sm-12">
|
||||||
<button
|
<button
|
||||||
@ -600,11 +626,18 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
className="btn btn-sm btn-primary"
|
className="btn btn-sm btn-primary"
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
>
|
>
|
||||||
{isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
|
{isPending
|
||||||
|
? "Please Wait..."
|
||||||
|
: employeeId
|
||||||
|
? "Update"
|
||||||
|
: "Create"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState, useMemo } from "react";
|
import React, { useEffect, useState,useMemo } from "react";
|
||||||
import { FormProvider, useForm, Controller } from "react-hook-form";
|
import { FormProvider, useForm, Controller } from "react-hook-form";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
||||||
@ -16,11 +16,8 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
|
|||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
|
|
||||||
const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||||
const selectedProjectId = useSelector(
|
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||||
(store) => store.localVariables.projectId
|
const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
|
||||||
);
|
|
||||||
const { data, isLoading, isError, error, isFetching, isFetched } =
|
|
||||||
useExpenseFilter();
|
|
||||||
|
|
||||||
const groupByList = useMemo(() => {
|
const groupByList = useMemo(() => {
|
||||||
return [
|
return [
|
||||||
@ -30,10 +27,11 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
|||||||
{ id: "project", name: "Project" },
|
{ id: "project", name: "Project" },
|
||||||
{ id: "paymentMode", name: "Payment Mode" },
|
{ id: "paymentMode", name: "Payment Mode" },
|
||||||
{ id: "expensesType", name: "Expense Type" },
|
{ id: "expensesType", name: "Expense Type" },
|
||||||
{ id: "createdAt", name: "Submitted Date" },
|
{ id: "createdAt", name: "Submitted Date" }
|
||||||
].sort((a, b) => a.name.localeCompare(b.name));
|
].sort((a, b) => a.name.localeCompare(b.name));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
|
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
|
||||||
const [resetKey, setResetKey] = useState(0);
|
const [resetKey, setResetKey] = useState(0);
|
||||||
|
|
||||||
@ -42,7 +40,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
|||||||
defaultValues: defaultFilter,
|
defaultValues: defaultFilter,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { control, handleSubmit, reset, setValue, watch } = methods;
|
const { control, register, handleSubmit, reset, watch } = methods;
|
||||||
const isTransactionDate = watch("isTransactionDate");
|
const isTransactionDate = watch("isTransactionDate");
|
||||||
|
|
||||||
const closePanel = () => {
|
const closePanel = () => {
|
||||||
@ -80,44 +78,34 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
|||||||
}, [location]);
|
}, [location]);
|
||||||
|
|
||||||
if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
|
if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
|
||||||
if (isError && isFetched)
|
if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
|
||||||
return <div>Something went wrong Here- {error.message} </div>;
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
||||||
<div className="mb-3 w-100">
|
<div className="mb-3 w-100">
|
||||||
<div className="d-flex align-items-center mb-2">
|
<div className="d-flex align-items-center mb-2">
|
||||||
<label className="form-label me-2">Filter By:</label>
|
<label className="form-label me-2">Choose Date:</label>
|
||||||
<div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
|
<div className="form-check form-switch m-0">
|
||||||
<button
|
<input
|
||||||
type="button"
|
className="form-check-input"
|
||||||
className={`btn px-2 py-1 rounded-0 text-tiny ${
|
type="checkbox"
|
||||||
isTransactionDate ? "active btn-primary text-white" : ""
|
id="switchOption1"
|
||||||
}`}
|
{...register("isTransactionDate")}
|
||||||
onClick={() => setValue("isTransactionDate", true)}
|
/>
|
||||||
>
|
|
||||||
Transaction Date
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`btn px-2 py-1 rounded-0 text-tiny ${
|
|
||||||
!isTransactionDate ? "active btn-primary text-white" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => setValue("isTransactionDate", false)}
|
|
||||||
>
|
|
||||||
Submitted Date
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<label className="form-label mb-0 ms-2">
|
||||||
|
{isTransactionDate ? "Submitted": "Transaction" }
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label className="fw-semibold">Choose Date Range:</label>
|
|
||||||
<DateRangePicker1
|
<DateRangePicker1
|
||||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||||
startField="startDate"
|
startField="startDate"
|
||||||
endField="endDate"
|
endField="endDate"
|
||||||
resetSignal={resetKey}
|
resetSignal={resetKey}
|
||||||
defaultRange={false}
|
defaultRange={false}
|
||||||
maxDate={new Date()}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -181,9 +169,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2 text-start ">
|
<div className="mb-2 text-start ">
|
||||||
<label htmlFor="groupBySelect" className="form-label">
|
<label htmlFor="groupBySelect" className="form-label">Group By :</label>
|
||||||
Group By :
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
id="groupBySelect"
|
id="groupBySelect"
|
||||||
className="form-select form-select-sm"
|
className="form-select form-select-sm"
|
||||||
@ -201,19 +187,20 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
|||||||
<div className="d-flex justify-content-end py-3 gap-2">
|
<div className="d-flex justify-content-end py-3 gap-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-label-secondary btn-sm"
|
className="btn btn-label-secondary btn-xs"
|
||||||
onClick={onClear}
|
onClick={onClear}
|
||||||
>
|
>
|
||||||
Clear
|
Clear
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn btn-primary btn-sm">
|
<button type="submit" className="btn btn-primary btn-xs">
|
||||||
Apply
|
Apply
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ExpenseFilterPanel;
|
export default ExpenseFilterPanel;
|
||||||
@ -28,7 +28,6 @@ import moment from "moment";
|
|||||||
import DatePicker from "../common/DatePicker";
|
import DatePicker from "../common/DatePicker";
|
||||||
import ErrorPage from "../../pages/ErrorPage";
|
import ErrorPage from "../../pages/ErrorPage";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
|
||||||
|
|
||||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||||
const {
|
const {
|
||||||
@ -58,7 +57,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const selectedproject = watch("projectId");
|
const selectedproject = watch("projectId");
|
||||||
|
|
||||||
const {
|
const {
|
||||||
projectNames,
|
projectNames,
|
||||||
loading: projectLoading,
|
loading: projectLoading,
|
||||||
@ -143,7 +142,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (expenseToEdit && data) {
|
if (expenseToEdit && data ) {
|
||||||
|
|
||||||
reset({
|
reset({
|
||||||
projectId: data.project.id || "",
|
projectId: data.project.id || "",
|
||||||
expensesTypeId: data.expensesType.id || "",
|
expensesTypeId: data.expensesType.id || "",
|
||||||
@ -156,7 +156,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
supplerName: data.supplerName || "",
|
supplerName: data.supplerName || "",
|
||||||
amount: data.amount || "",
|
amount: data.amount || "",
|
||||||
noOfPersons: data.noOfPersons || "",
|
noOfPersons: data.noOfPersons || "",
|
||||||
gstNumber: data.gstNumber || "",
|
gstNumber:data.gstNumber || "",
|
||||||
billAttachments: data.documents
|
billAttachments: data.documents
|
||||||
? data.documents.map((doc) => ({
|
? data.documents.map((doc) => ({
|
||||||
fileName: doc.fileName,
|
fileName: doc.fileName,
|
||||||
@ -183,7 +183,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
const onSubmit = (fromdata) => {
|
const onSubmit = (fromdata) => {
|
||||||
let payload = {
|
let payload = {
|
||||||
...fromdata,
|
...fromdata,
|
||||||
transactionDate: localToUtc(fromdata.transactionDate),
|
transactionDate: localToUtc(fromdata.transactionDate)
|
||||||
|
|
||||||
};
|
};
|
||||||
if (expenseToEdit) {
|
if (expenseToEdit) {
|
||||||
const editPayload = { ...payload, id: data.id };
|
const editPayload = { ...payload, id: data.id };
|
||||||
@ -205,6 +206,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
|
if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
|
||||||
return <ExpenseSkeleton />;
|
return <ExpenseSkeleton />;
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container p-3">
|
<div className="container p-3">
|
||||||
<h5 className="m-0">
|
<h5 className="m-0">
|
||||||
@ -213,9 +215,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>Select Project</Label>
|
||||||
Select Project
|
|
||||||
</Label>
|
|
||||||
<select
|
<select
|
||||||
className="form-select form-select-sm"
|
className="form-select form-select-sm"
|
||||||
{...register("projectId")}
|
{...register("projectId")}
|
||||||
@ -296,11 +296,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="paidById" className="form-label" required>
|
<Label htmlFor="paidById" className="form-label" required>
|
||||||
Paid By
|
Paid By
|
||||||
</Label>
|
</Label>
|
||||||
{/* <select
|
<select
|
||||||
className="form-select form-select-sm"
|
className="form-select form-select-sm"
|
||||||
id="paymentModeId"
|
id="paymentModeId"
|
||||||
{...register("paidById")}
|
{...register("paidById")}
|
||||||
@ -321,14 +321,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</select>
|
</select>
|
||||||
{errors.paidById && (
|
{errors.paidById && (
|
||||||
<small className="danger-text">{errors.paidById.message}</small>
|
<small className="danger-text">{errors.paidById.message}</small>
|
||||||
)} */}
|
)}
|
||||||
|
|
||||||
<EmployeeSearchInput
|
|
||||||
control={control}
|
|
||||||
name="paidById"
|
|
||||||
projectId={null}
|
|
||||||
forAll={expenseToEdit ? true : false}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -337,11 +330,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<Label htmlFor="transactionDate" className="form-label" required>
|
<Label htmlFor="transactionDate" className="form-label" required>
|
||||||
Transaction Date
|
Transaction Date
|
||||||
</Label>
|
</Label>
|
||||||
<DatePicker
|
<DatePicker name="transactionDate" control={control} maxDate={new Date()}/>
|
||||||
name="transactionDate"
|
|
||||||
control={control}
|
|
||||||
maxDate={new Date()}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.transactionDate && (
|
{errors.transactionDate && (
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
@ -420,9 +409,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label htmlFor="statusId" className="form-label ">
|
<label htmlFor="statusId" className="form-label ">
|
||||||
GST Number
|
GST Number
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -432,7 +421,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
{...register("gstNumber")}
|
{...register("gstNumber")}
|
||||||
/>
|
/>
|
||||||
{errors.gstNumber && (
|
{errors.gstNumber && (
|
||||||
<small className="danger-text">{errors.gstNumber.message}</small>
|
<small className="danger-text">
|
||||||
|
{errors.gstNumber.message}
|
||||||
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -457,9 +448,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
|
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label htmlFor="description" className="form-label" required>
|
<Label htmlFor="description" className="form-label" required>Description</Label>
|
||||||
Description
|
|
||||||
</Label>
|
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-sm"
|
||||||
@ -476,9 +465,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
|
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>Upload Bill </Label>
|
||||||
Upload Bill{" "}
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||||
@ -562,7 +549,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
|
|
||||||
<div className="d-flex justify-content-end gap-3">
|
<div className="d-flex justify-content-end gap-3">
|
||||||
{" "}
|
{" "}
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
disabled={isPending || createPending}
|
disabled={isPending || createPending}
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
@ -581,6 +568,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
? "Update"
|
? "Update"
|
||||||
: "Submit"}
|
: "Submit"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
||||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||||
import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
|
import { getColorNameFromHex, getIconByFileType } from "../../utils/appUtils";
|
||||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
import {
|
import {
|
||||||
@ -91,7 +91,9 @@ const ViewExpense = ({ ExpenseId }) => {
|
|||||||
const onSubmit = (formData) => {
|
const onSubmit = (formData) => {
|
||||||
const Payload = {
|
const Payload = {
|
||||||
...formData,
|
...formData,
|
||||||
reimburseDate: localToUtc(formData.reimburseDate),
|
reimburseDate: moment
|
||||||
|
.utc(formData.reimburseDate, "DD-MM-YYYY")
|
||||||
|
.toISOString(),
|
||||||
expenseId: ExpenseId,
|
expenseId: ExpenseId,
|
||||||
comment: formData.comment,
|
comment: formData.comment,
|
||||||
};
|
};
|
||||||
@ -396,7 +398,6 @@ const ViewExpense = ({ ExpenseId }) => {
|
|||||||
name="reimburseDate"
|
name="reimburseDate"
|
||||||
control={control}
|
control={control}
|
||||||
minDate={data?.transactionDate}
|
minDate={data?.transactionDate}
|
||||||
maxDate={new Date()}
|
|
||||||
/>
|
/>
|
||||||
{errors.reimburseDate && (
|
{errors.reimburseDate && (
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
|
|||||||
@ -12,13 +12,13 @@ import useMaster from "../../hooks/masterHook/useMaster";
|
|||||||
import { useProfile } from "../../hooks/useProfile";
|
import { useProfile } from "../../hooks/useProfile";
|
||||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||||
import Avatar from "../../components/common/Avatar";
|
import Avatar from "../../components/common/Avatar";
|
||||||
|
import { useChangePassword } from "../Context/ChangePasswordContext";
|
||||||
import { useProjects } from "../../hooks/useProjects";
|
import { useProjects } from "../../hooks/useProjects";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import { useProjectName } from "../../hooks/useProjects";
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||||
import { useAuthModal, useLogout, useModal } from "../../hooks/useAuth";
|
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const { profile } = useProfile();
|
const { profile } = useProfile();
|
||||||
@ -26,10 +26,10 @@ const Header = () => {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { data, loading } = useMaster();
|
const { data, loading } = useMaster();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const {onOpen} = useAuthModal()
|
|
||||||
const { onOpen:changePass } = useModal("ChangePassword");
|
|
||||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||||
const { mutate : logout,isPending:logouting} = useLogout()
|
// {
|
||||||
|
// console.log(location.pathname);
|
||||||
|
// }
|
||||||
|
|
||||||
const isDashboardPath =
|
const isDashboardPath =
|
||||||
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
||||||
@ -59,9 +59,41 @@ const Header = () => {
|
|||||||
return role ? role.name : "User";
|
return role ? role.name : "User";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleLogout = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
logout();
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = async () => {
|
||||||
|
try {
|
||||||
|
let data = {
|
||||||
|
refreshToken: localStorage.getItem("refreshToken"),
|
||||||
|
};
|
||||||
|
|
||||||
|
AuthRepository.logout(data)
|
||||||
|
.then(() => {
|
||||||
|
localStorage.removeItem("jwtToken");
|
||||||
|
localStorage.removeItem("refreshToken");
|
||||||
|
localStorage.removeItem("user");
|
||||||
|
localStorage.clear();
|
||||||
|
clearAllCache();
|
||||||
|
window.location.href = "/auth/login";
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
localStorage.removeItem("jwtToken");
|
||||||
|
localStorage.removeItem("refreshToken");
|
||||||
|
localStorage.removeItem("user");
|
||||||
|
localStorage.clear();
|
||||||
|
clearAllCache();
|
||||||
|
window.location.href = "/auth/login";
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Error during logout:",
|
||||||
|
error?.response?.data || error.message
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleProfilePage = () => {
|
const handleProfilePage = () => {
|
||||||
navigate(`/employee/${profile?.employeeInfo?.id}`);
|
navigate(`/employee/${profile?.employeeInfo?.id}`);
|
||||||
@ -97,7 +129,7 @@ const Header = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { openChangePassword } = useChangePassword();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
@ -189,8 +221,7 @@ const Header = () => {
|
|||||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||||
id="navbar-collapse"
|
id="navbar-collapse"
|
||||||
>
|
>
|
||||||
<div className="d-flex align-items-center">
|
{showProjectDropdown(location.pathname) && (
|
||||||
{showProjectDropdown(location.pathname) && (
|
|
||||||
<div className="align-items-center">
|
<div className="align-items-center">
|
||||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
@ -248,7 +279,6 @@ const Header = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
||||||
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
||||||
@ -396,15 +426,6 @@ const Header = () => {
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div className="dropdown-divider"></div>
|
<div className="dropdown-divider"></div>
|
||||||
</li>
|
|
||||||
<li onClick={()=>onOpen()}>
|
|
||||||
{" "}
|
|
||||||
<a
|
|
||||||
className="dropdown-item cusor-pointer"
|
|
||||||
>
|
|
||||||
<i className="bx bx-transfer-alt me-2"></i>
|
|
||||||
<span className="align-middle">Switch Workspace</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li onClick={handleProfilePage}>
|
<li onClick={handleProfilePage}>
|
||||||
<a
|
<a
|
||||||
@ -424,7 +445,7 @@ const Header = () => {
|
|||||||
<span className="align-middle">Settings</span>
|
<span className="align-middle">Settings</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li onClick={changePass}>
|
<li onClick={openChangePassword}>
|
||||||
{" "}
|
{" "}
|
||||||
<a
|
<a
|
||||||
aria-label="go to profile"
|
aria-label="go to profile"
|
||||||
@ -434,8 +455,6 @@ const Header = () => {
|
|||||||
<span className="align-middle">Change Password</span>
|
<span className="align-middle">Change Password</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<div className="dropdown-divider"></div>
|
<div className="dropdown-divider"></div>
|
||||||
</li>
|
</li>
|
||||||
@ -443,10 +462,11 @@ const Header = () => {
|
|||||||
<a
|
<a
|
||||||
aria-label="click to log out"
|
aria-label="click to log out"
|
||||||
className="dropdown-item cusor-pointer"
|
className="dropdown-item cusor-pointer"
|
||||||
onClick={()=>logout()}
|
href="/logout"
|
||||||
|
onClick={handleLogout}
|
||||||
>
|
>
|
||||||
{logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
|
<i className="bx bx-power-off me-2"></i>
|
||||||
<span className="align-middle">SignOut</span></>}
|
<span className="align-middle">Log Out</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -1,268 +1,9 @@
|
|||||||
import React, { useMemo, useState } from "react";
|
import React from 'react'
|
||||||
import { useProjectAssignedServices } from "../../hooks/useProjects";
|
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
||||||
import {
|
|
||||||
useOrganizationType,
|
|
||||||
useServices,
|
|
||||||
} from "../../hooks/masterHook/useMaster";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { assignedOrgToProject } from "./OrganizationSchema";
|
|
||||||
import {
|
|
||||||
useAssignOrgToProject,
|
|
||||||
useAssignOrgToTenant,
|
|
||||||
useOrganizationModal,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
|
|
||||||
const AssignOrg = ({ setStep }) => {
|
|
||||||
const { isOpen, orgData, startStep, onOpen, flowType, prevStep, onClose } =
|
|
||||||
useOrganizationModal();
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const { data: masterService, isLoading: isMasterserviceLoading } =
|
|
||||||
useServices();
|
|
||||||
const { data: projectServices, isLoading } =
|
|
||||||
useProjectAssignedServices(selectedProject);
|
|
||||||
const { data: orgType, isLoading: orgLoading } = useOrganizationType();
|
|
||||||
|
|
||||||
const { mutate: AssignToProject, isPending: isPendingProject } =
|
|
||||||
useAssignOrgToProject(() => onClose());
|
|
||||||
const { mutate: AssignToTenant, isPending: isPendingTenat } =
|
|
||||||
useAssignOrgToTenant(() => {
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
const isPending = isPendingProject || isPendingTenat;
|
|
||||||
const mergedServices = useMemo(() => {
|
|
||||||
if (!masterService || !projectServices) return [];
|
|
||||||
const combined = [...masterService?.data, ...projectServices];
|
|
||||||
return combined.filter(
|
|
||||||
(item, index, self) => index === self.findIndex((s) => s.id === item.id)
|
|
||||||
);
|
|
||||||
}, [masterService, projectServices]);
|
|
||||||
|
|
||||||
const resolver =
|
|
||||||
flowType === "default" ? undefined : zodResolver(assignedOrgToProject);
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setValue,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
resolver,
|
|
||||||
defaultValues: {
|
|
||||||
organizationTypeId: "",
|
|
||||||
serviceIds: [],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
if (flowType === "default") {
|
|
||||||
const payload = orgData.id;
|
|
||||||
|
|
||||||
AssignToTenant(payload);
|
|
||||||
} else {
|
|
||||||
const payload = {
|
|
||||||
...formData,
|
|
||||||
projectId: selectedProject,
|
|
||||||
organizationId: orgData.id,
|
|
||||||
parentOrganizationId: null,
|
|
||||||
};
|
|
||||||
AssignToProject(payload);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEdit = () => {
|
|
||||||
onOpen({ startStep: 4, orgData });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
if (prevStep === 1 && flowType === "assign") {
|
|
||||||
onOpen({ startStep: prevStep });
|
|
||||||
} else if (prevStep === 1 && flowType !== "assign") {
|
|
||||||
onOpen({ startStep: 1 });
|
|
||||||
} else {
|
|
||||||
onOpen({ startStep: 2 });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isMasterserviceLoading || isLoading)
|
|
||||||
return <div className="text-center">Loading....</div>;
|
|
||||||
|
|
||||||
|
const AssignOrg = () => {
|
||||||
return (
|
return (
|
||||||
<div className="row text-black text-start mb-3">
|
<div>AssignOrg</div>
|
||||||
{/* Organization Info Display */}
|
)
|
||||||
<div className="col-12 mb-3">
|
}
|
||||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
|
||||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
|
||||||
<img
|
|
||||||
src="/public/assets/img/orgLogo.png"
|
|
||||||
alt="logo"
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleEdit}
|
|
||||||
className="btn btn-link p-0"
|
|
||||||
>
|
|
||||||
<i className="bx bx-edit text-secondary"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
|
|
||||||
{/* Contact Info */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{orgData.contactPerson}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{orgData.contactNumber}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{orgData.email}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ maxWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
|
||||||
Service Provider Id (SPRID) :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{orgData.sprid}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-1 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className='bx bx-sm me-1 bx-map'></i> Address :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted text-start">{orgData.address}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form */}
|
export default AssignOrg
|
||||||
<div className="text-black text-start">
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
{/* Show fields only if flowType is NOT default */}
|
|
||||||
{flowType !== "default" && (
|
|
||||||
<>
|
|
||||||
{/* Organization Type */}
|
|
||||||
<div className="mb-3 text-start">
|
|
||||||
<Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
|
|
||||||
Organization Type
|
|
||||||
</Label>
|
|
||||||
<div className="d-flex flex-wrap gap-3 mt-1">
|
|
||||||
{orgType?.data.map((type) => (
|
|
||||||
<div
|
|
||||||
key={type.id}
|
|
||||||
className="form-check d-flex align-items-center gap-2 p-0 m-0"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id={`organizationType-${type.id}`}
|
|
||||||
value={type.id}
|
|
||||||
{...register("organizationTypeId")}
|
|
||||||
className="form-check-input m-0"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label m-0"
|
|
||||||
htmlFor={`organizationType-${type.id}`}
|
|
||||||
>
|
|
||||||
{type.name}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{errors.organizationTypeId && (
|
|
||||||
<span className="text-danger">
|
|
||||||
{errors.organizationTypeId.message}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Services */}
|
|
||||||
<div className="mb-3">
|
|
||||||
<Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
|
|
||||||
Select Services
|
|
||||||
</Label>
|
|
||||||
{mergedServices?.map((service) => (
|
|
||||||
<div key={service.id} className="form-check mb-3">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
value={service.id}
|
|
||||||
{...register("serviceIds")}
|
|
||||||
className="form-check-input"
|
|
||||||
/>
|
|
||||||
<label className="form-check-label">{service.name}</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{errors.serviceIds && (
|
|
||||||
<div className="text-danger small">
|
|
||||||
{errors.serviceIds.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Buttons: Always visible */}
|
|
||||||
<div className="d-flex justify-content-between mt-5">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-outline-secondary"
|
|
||||||
onClick={handleBack}
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
<i className="bx bx-chevron-left"></i>Back
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
{isPending
|
|
||||||
? "Please wait..."
|
|
||||||
: flowType === "default"
|
|
||||||
? "Assign to Organization"
|
|
||||||
: "Assign to Project"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AssignOrg;
|
|
||||||
@ -1,212 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
import { FormProvider, useForm } from "react-hook-form";
|
|
||||||
import {
|
|
||||||
useCreateOrganization,
|
|
||||||
useOrganization,
|
|
||||||
useOrganizationModal,
|
|
||||||
useUpdateOrganization,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
import {
|
|
||||||
defaultOrganizationValues,
|
|
||||||
organizationSchema,
|
|
||||||
} from "./OrganizationSchema";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
|
|
||||||
const ManagOrg = () => {
|
|
||||||
const { data: service, isLoading } = useGlobalServices();
|
|
||||||
const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
|
|
||||||
useOrganizationModal();
|
|
||||||
const {
|
|
||||||
data: organization,
|
|
||||||
isLoading: organizationLoading,
|
|
||||||
isError,
|
|
||||||
error,
|
|
||||||
} = useOrganization(orgData?.id);
|
|
||||||
|
|
||||||
const method = useForm({
|
|
||||||
resolver: zodResolver(organizationSchema),
|
|
||||||
defaultValues: defaultOrganizationValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
register,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = method;
|
|
||||||
|
|
||||||
// Create & Update mutations
|
|
||||||
const { mutate: createOrganization, isPending: isCreating } =
|
|
||||||
useCreateOrganization(() => {
|
|
||||||
reset(defaultOrganizationValues);
|
|
||||||
onOpen({ startStep: 1 });
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
|
|
||||||
const { mutate: updateOrganization, isPending: isUpdating } =
|
|
||||||
useUpdateOrganization(() => {
|
|
||||||
reset(defaultOrganizationValues);
|
|
||||||
onOpen({ startStep: 1 });
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
// Prefill form if editing
|
|
||||||
useEffect(() => {
|
|
||||||
if (organization) {
|
|
||||||
reset({
|
|
||||||
name: organization.name || "",
|
|
||||||
contactPerson: organization.contactPerson || "",
|
|
||||||
contactNumber: organization.contactNumber || "",
|
|
||||||
email: organization.email || "",
|
|
||||||
serviceIds: organization.services?.map((s) => s.id) || [],
|
|
||||||
address: organization.address || "",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [organization, reset, service?.data]);
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
let payload = { ...formData };
|
|
||||||
if (organization?.id) {
|
|
||||||
updateOrganization({
|
|
||||||
orgId: organization.id,
|
|
||||||
payload: { ...payload, id: organization.id },
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
createOrganization(payload);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const handleBack = () => {
|
|
||||||
if (flowType === "edit") {
|
|
||||||
onClose();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (flowType === "assign") {
|
|
||||||
if (prevStep === 1) {
|
|
||||||
onOpen({ startStep: 1 });
|
|
||||||
} else {
|
|
||||||
onOpen({ startStep: prevStep ?? 2 });
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onOpen({ startStep: 2 });
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<FormProvider {...method}>
|
|
||||||
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="mb-1 text-start">
|
|
||||||
<Label htmlFor="name" required>
|
|
||||||
Organization Name
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("name")}
|
|
||||||
/>
|
|
||||||
{errors.name && (
|
|
||||||
<span className="danger-text">{errors.name.message}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-1 text-start">
|
|
||||||
<Label htmlFor="contactPerson" required>
|
|
||||||
Contact Person
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("contactPerson")}
|
|
||||||
/>
|
|
||||||
{errors.contactPerson && (
|
|
||||||
<span className="danger-text">{errors.contactPerson.message}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-1 text-start">
|
|
||||||
<Label htmlFor="contactNumber" required>
|
|
||||||
Contact Number
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("contactNumber")}
|
|
||||||
/>
|
|
||||||
{errors.contactNumber && (
|
|
||||||
<span className="danger-text">{errors.contactNumber.message}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-1 text-start">
|
|
||||||
<Label htmlFor="email" required>
|
|
||||||
Email Address
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("email")}
|
|
||||||
/>
|
|
||||||
{errors.email && (
|
|
||||||
<span className="danger-text">{errors.email.message}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-1 text-start">
|
|
||||||
<SelectMultiple
|
|
||||||
name="serviceIds"
|
|
||||||
label="Select Service"
|
|
||||||
options={service?.data}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
IsLoading={isLoading}
|
|
||||||
/>
|
|
||||||
{errors.serviceIds && (
|
|
||||||
<span className="danger-text">{errors.serviceIds.message}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-1 text-start">
|
|
||||||
<Label htmlFor="address" required>
|
|
||||||
Address
|
|
||||||
</Label>
|
|
||||||
<textarea
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("address")}
|
|
||||||
rows={2}
|
|
||||||
/>
|
|
||||||
{errors.address && (
|
|
||||||
<span className="danger-text">{errors.address.message}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between gap-2 my-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-outline-secondary"
|
|
||||||
onClick={handleBack}
|
|
||||||
>
|
|
||||||
{flowType === "edit" ? (
|
|
||||||
"Close"
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<i className="bx bx-chevron-left"></i>Back
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
disabled={isCreating || isUpdating || isLoading}
|
|
||||||
>
|
|
||||||
{isCreating || isUpdating
|
|
||||||
? "Please Wait..."
|
|
||||||
: orgData
|
|
||||||
? "Update"
|
|
||||||
: "Submit"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</FormProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManagOrg;
|
|
||||||
471
src/components/Organization/ManageOrganization.jsx
Normal file
471
src/components/Organization/ManageOrganization.jsx
Normal file
@ -0,0 +1,471 @@
|
|||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import React, { useMemo, useState } from "react";
|
||||||
|
import { FormProvider, useForm } from "react-hook-form";
|
||||||
|
import {
|
||||||
|
defaultOrganizationValues,
|
||||||
|
organizationSchema,
|
||||||
|
} from "./OrganizationSchema";
|
||||||
|
import Modal from "../common/Modal";
|
||||||
|
import {
|
||||||
|
useCreateOrganization,
|
||||||
|
useOrganizationBySPRID,
|
||||||
|
useOrganizationModal,
|
||||||
|
useOrganizationsList,
|
||||||
|
} from "../../hooks/useOrganization";
|
||||||
|
import Label from "../common/Label";
|
||||||
|
import SelectMultiple from "../common/SelectMultiple";
|
||||||
|
import { useServices } from "../../hooks/masterHook/useMaster";
|
||||||
|
|
||||||
|
const ManageOrganization = ({
|
||||||
|
projectOrganizations = ["ee"],
|
||||||
|
organizationId = null,
|
||||||
|
}) => {
|
||||||
|
const [step, setStep] = useState(1);
|
||||||
|
const orgModal = useOrganizationModal();
|
||||||
|
const { data: masterService, isLoading } = useServices();
|
||||||
|
const [searchText, setSearchText] = useState();
|
||||||
|
const [SPRID, setSPRID] = useState("");
|
||||||
|
const { data: orgList, isLoading: orgLoading } = useOrganizationsList(
|
||||||
|
20,
|
||||||
|
1,
|
||||||
|
true,
|
||||||
|
searchText
|
||||||
|
);
|
||||||
|
const { data: OrgListbySPRID, isLoading: isLoadingBySPRID } =
|
||||||
|
useOrganizationBySPRID(SPRID);
|
||||||
|
const [Organization, setOrganization] = useState({});
|
||||||
|
|
||||||
|
const method = useForm({
|
||||||
|
resolver: zodResolver(organizationSchema),
|
||||||
|
defaultValues: defaultOrganizationValues,
|
||||||
|
});
|
||||||
|
console.log(masterService);
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
register,
|
||||||
|
reset,
|
||||||
|
formState: { errors },
|
||||||
|
} = method;
|
||||||
|
|
||||||
|
const { mutate: CreateOrganization, isPending } = useCreateOrganization(
|
||||||
|
() => {
|
||||||
|
reset(defaultOrganizationValues);
|
||||||
|
orgModal.onClose();
|
||||||
|
setStep(1); // reset to first step
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSubmit = (OrgPayload) => {
|
||||||
|
CreateOrganization(OrgPayload);
|
||||||
|
};
|
||||||
|
|
||||||
|
const RenderTitle = useMemo(() => {
|
||||||
|
if (organizationId) {
|
||||||
|
return "Update Organization";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === 1) {
|
||||||
|
return projectOrganizations && projectOrganizations !== null
|
||||||
|
? "Add Organization"
|
||||||
|
: "Find Organization";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === 2) {
|
||||||
|
return "Organization Details";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === 3) {
|
||||||
|
return "Create Organization";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "Manage Organization"; // fallback
|
||||||
|
}, [step, orgModal?.orgData, organizationId]);
|
||||||
|
|
||||||
|
const contentBody = (
|
||||||
|
<div>
|
||||||
|
{/* ---------- STEP 1: Service Provider- Form Own Tenant list ---------- */}
|
||||||
|
{step === 1 && (
|
||||||
|
<div className="d-block">
|
||||||
|
<div className="text-start mb-1">
|
||||||
|
<Label className="text-secondary">Find Organization</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={SPRID}
|
||||||
|
className="form-control form-control-sm w-auto"
|
||||||
|
placeholder="Enter Organization"
|
||||||
|
aria-describedby="search-label"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="py-2 text-tiny text-center">
|
||||||
|
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||||
|
{orgList?.map((org) => (
|
||||||
|
<div className="list-group-item list-group-item-action d-flex align-items-center cursor-pointer border-0">
|
||||||
|
<div className="d-flex align-items-center justify-content-center me-3">
|
||||||
|
<i className="bx bx-building-house bx-md text-primary"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-100">
|
||||||
|
<div className="d-flex justify-content-between">
|
||||||
|
<div className="user-info text-start">
|
||||||
|
<h6 className="mb-1 fw-normal">{org.name}</h6>
|
||||||
|
<small className="text-body-secondary">
|
||||||
|
{org.contactPerson}
|
||||||
|
</small>
|
||||||
|
<div className="user-status">
|
||||||
|
<small>In Meeting</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="add-btn">
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-xs"
|
||||||
|
onClick={() => {
|
||||||
|
setOrganization(org);
|
||||||
|
setStep(3);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{orgModal.orgData && (
|
||||||
|
<p className="text-secondary">
|
||||||
|
Don't have required organization, Please find using{" "}
|
||||||
|
<span
|
||||||
|
className="text-mutes cursor-pointer text-decoration-underline"
|
||||||
|
onClick={() => setStep(2)}
|
||||||
|
>
|
||||||
|
SPRID
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`d-flex ${
|
||||||
|
projectOrganizations
|
||||||
|
? "justify-content-end"
|
||||||
|
: "justify-content-between"
|
||||||
|
} text-secondary mt-3`}
|
||||||
|
>
|
||||||
|
{!projectOrganizations && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-outline-secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-left-arrow-alt"></i> Back
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-secondary"
|
||||||
|
onClick={() => setStep(4)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Add New Organization
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---------- STEP 1: Service Provider From Own Other Tenant ---------- */}
|
||||||
|
{step === 2 && (
|
||||||
|
<div className="d-block">
|
||||||
|
<div className="text-start mb-1">
|
||||||
|
<Label className="text-secondary">Find Organization</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm w-auto"
|
||||||
|
placeholder="Enter Servicee Provider Id"
|
||||||
|
aria-describedby="search-label"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* ======== org list ======*/}
|
||||||
|
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||||
|
{OrgListbySPRID?.map((org) => (
|
||||||
|
<div className="list-group-item list-group-item-action d-flex align-items-center cursor-pointer border-0">
|
||||||
|
<div className="d-flex align-items-center justify-content-center me-3">
|
||||||
|
<i className="bx bx-building-house bx-md text-primary"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-100">
|
||||||
|
<div className="d-flex justify-content-between">
|
||||||
|
<div className="user-info text-start">
|
||||||
|
<h6 className="mb-1 fw-normal">Icing sweet gummies</h6>
|
||||||
|
<small className="text-body-secondary">15 minutes</small>
|
||||||
|
<div className="user-status">
|
||||||
|
<small>In Meeting</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="add-btn">
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-xs"
|
||||||
|
onClick={() => setStep(3)}
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-between gap-2 mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-outline-secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-left-arrow-alt"></i> Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-secondary"
|
||||||
|
onClick={() => setStep(4)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Add New Organization
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---------- STEP 2: Existing Organization Details ---------- */}
|
||||||
|
{step === 3 && (
|
||||||
|
<div className="row text-black mb-3">
|
||||||
|
<div className="col-12 mb-3"></div>
|
||||||
|
<div className="text-start mb-2">
|
||||||
|
<div className="text-muted">{Organization.name}</div>
|
||||||
|
</div>
|
||||||
|
{/* Row 1 */}
|
||||||
|
<div className="col-md-6 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Constact Person :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{Organization.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Contact Number :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{Organization.contactNumber}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Email Address :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{Organization.email}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start text-wrap"
|
||||||
|
style={{ maxWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Service provider Id (SPRID) :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{Organization.sprid}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-12 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-1 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Address :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted text-start">
|
||||||
|
{Organization.address}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-black text-start">
|
||||||
|
<div className="mb-2">
|
||||||
|
<Label className="fs-6">Add Services</Label>
|
||||||
|
<ul className="list-group list-group-flush">
|
||||||
|
{masterService.data &&
|
||||||
|
masterService.data?.map((serv) => (
|
||||||
|
<li className="list-group-item py-1">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input me-2"
|
||||||
|
/>
|
||||||
|
{serv.name}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-between mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-outline-secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-left-arrow-alt"></i> Back
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-sm btn-primary">
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---------- STEP 3: Add New Organization ---------- */}
|
||||||
|
{step === 4 && (
|
||||||
|
<FormProvider {...method}>
|
||||||
|
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<div className="mb-1 text-start">
|
||||||
|
<Label htmlFor="name" required>
|
||||||
|
Organization Name
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("name")}
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<span className="danger-text">{errors.name.message}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-1 text-start">
|
||||||
|
<Label htmlFor="contactPerson" required>
|
||||||
|
Contact Person
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("contactPerson")}
|
||||||
|
/>
|
||||||
|
{errors.contactPerson && (
|
||||||
|
<span className="danger-text">
|
||||||
|
{errors.contactPerson.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-1 text-start">
|
||||||
|
<Label htmlFor="contactNumber" required>
|
||||||
|
Contact Number
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("contactNumber")}
|
||||||
|
/>
|
||||||
|
{errors.contactNumber && (
|
||||||
|
<span className="danger-text">
|
||||||
|
{errors.contactNumber.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-1 text-start">
|
||||||
|
<Label htmlFor="email" required>
|
||||||
|
Email Address
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("email")}
|
||||||
|
/>
|
||||||
|
{errors.email && (
|
||||||
|
<span className="danger-text">{errors.email.message}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-1 text-start">
|
||||||
|
<SelectMultiple
|
||||||
|
name="serviceIds"
|
||||||
|
label="Services"
|
||||||
|
required
|
||||||
|
valueKey="id"
|
||||||
|
options={services?.data || []}
|
||||||
|
/>
|
||||||
|
{errors.serviceIds && (
|
||||||
|
<span className="danger-text">{errors.serviceIds.message}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-1 text-start">
|
||||||
|
<Label htmlFor="address" required>
|
||||||
|
Address
|
||||||
|
</Label>
|
||||||
|
<textarea
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("address")}
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
|
{errors.address && (
|
||||||
|
<span className="danger-text">{errors.address.message}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-between gap-2 my-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-outline-secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
← Back
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-secondary me-2"
|
||||||
|
onClick={orgModal.onClose}
|
||||||
|
disabled={isPending || isLoading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
disabled={isPending || isLoading}
|
||||||
|
>
|
||||||
|
{isPending ? "Please Wait..." : "Submit"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</FormProvider>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={orgModal.isOpen}
|
||||||
|
onClose={orgModal.onClose}
|
||||||
|
title={RenderTitle}
|
||||||
|
body={contentBody}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ManageOrganization;
|
||||||
193
src/components/Organization/ManageOrganization1.jsx
Normal file
193
src/components/Organization/ManageOrganization1.jsx
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
const ManageOrganization1 = ({
|
||||||
|
projectOrganizations = [],
|
||||||
|
organizationId = null,
|
||||||
|
}) => {
|
||||||
|
const [step, setStep] = useState(1); // default = scenario decision
|
||||||
|
const orgModal = useOrganizationModal();
|
||||||
|
const { data: services, isLoading } = useServices();
|
||||||
|
|
||||||
|
const method = useForm({
|
||||||
|
resolver: zodResolver(organizationSchema),
|
||||||
|
defaultValues: defaultOrganizationValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
register,
|
||||||
|
reset,
|
||||||
|
formState: { errors },
|
||||||
|
} = method;
|
||||||
|
|
||||||
|
const { mutate: CreateOrganization, isPending } = useCreateOrganization(
|
||||||
|
() => {
|
||||||
|
reset(defaultOrganizationValues);
|
||||||
|
orgModal.onClose();
|
||||||
|
setStep(1); // reset to first step
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 🔹 Decide first step when modal opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (orgModal.isOpen) {
|
||||||
|
if (organizationId) {
|
||||||
|
setStep(3); // update flow → show org details directly
|
||||||
|
} else if (projectOrganizations && projectOrganizations.length > 0) {
|
||||||
|
setStep(1); // Scenario 1 → from current tenant list
|
||||||
|
} else {
|
||||||
|
setStep(2); // Scenario 2 → search with SPRID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [orgModal.isOpen, organizationId, projectOrganizations]);
|
||||||
|
|
||||||
|
const onSubmit = (OrgPayload) => {
|
||||||
|
CreateOrganization(OrgPayload);
|
||||||
|
};
|
||||||
|
|
||||||
|
const RenderTitle = useMemo(() => {
|
||||||
|
if (organizationId) return "Update Organization";
|
||||||
|
if (step === 1) return "Add Organization"; // current tenant
|
||||||
|
if (step === 2) return "Find Organization"; // search with SPRID
|
||||||
|
if (step === 3) return "Organization Details";
|
||||||
|
if (step === 4) return "Create Organization";
|
||||||
|
return "Manage Organization";
|
||||||
|
}, [step, organizationId]);
|
||||||
|
|
||||||
|
const contentBody = (
|
||||||
|
<div>
|
||||||
|
{/* ---------- STEP 1: From Current Tenant Organizations ---------- */}
|
||||||
|
{step === 1 && (
|
||||||
|
<div className="d-block">
|
||||||
|
<div className="list-group mt-3">
|
||||||
|
{projectOrganizations.map((org, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="list-group-item list-group-item-action cursor-pointer"
|
||||||
|
onClick={() => setStep(3)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-building-house me-2"></i>
|
||||||
|
{org}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-between text-secondary mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-outline-secondary"
|
||||||
|
onClick={() => setStep(2)} // jump to SPRID search
|
||||||
|
>
|
||||||
|
<i className="bx bx-search-alt"></i> Find with SPRID
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-secondary"
|
||||||
|
onClick={() => setStep(4)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Add New Organization
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---------- STEP 2: Search by Service Provider ID ---------- */}
|
||||||
|
{step === 2 && (
|
||||||
|
<div className="d-block">
|
||||||
|
<div className="text-start mb-1">
|
||||||
|
<Label className="text-secondary">Enter Service Provider ID</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm w-auto"
|
||||||
|
placeholder="SPR - ID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Example SPR results */}
|
||||||
|
<div className="list-group mt-3">
|
||||||
|
<div
|
||||||
|
className="list-group-item list-group-item-action cursor-pointer"
|
||||||
|
onClick={() => setStep(3)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-building-house me-2"></i>
|
||||||
|
Sample Organization (SPRID)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-between gap-2 mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-outline-secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-left-arrow-alt"></i> Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-secondary"
|
||||||
|
onClick={() => setStep(4)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Add New Organization
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---------- STEP 3: Organization Details ---------- */}
|
||||||
|
{step === 3 && (
|
||||||
|
<div>
|
||||||
|
<p className="text-muted small">
|
||||||
|
Show organization details here (from SPR or tenant list). User
|
||||||
|
selects services and clicks Add.
|
||||||
|
</p>
|
||||||
|
<div className="mb-2">
|
||||||
|
<Label>Services Offered</Label>
|
||||||
|
<ul className="list-group">
|
||||||
|
<li className="list-group-item">
|
||||||
|
<input type="checkbox" className="form-check-input me-2" />
|
||||||
|
Service 1
|
||||||
|
</li>
|
||||||
|
<li className="list-group-item">
|
||||||
|
<input type="checkbox" className="form-check-input me-2" />
|
||||||
|
Service 2
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-between mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-outline-secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
← Back
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-sm btn-primary">
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---------- STEP 4: Create New Organization ---------- */}
|
||||||
|
{step === 4 && (
|
||||||
|
<FormProvider {...method}>
|
||||||
|
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{/* same form as your code, unchanged */}
|
||||||
|
{/* ... */}
|
||||||
|
</form>
|
||||||
|
</FormProvider>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={orgModal.isOpen}
|
||||||
|
onClose={orgModal.onClose}
|
||||||
|
title={RenderTitle}
|
||||||
|
body={contentBody}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ManageOrganization;
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/* Default: hide scrollbar */
|
|
||||||
.scrollable-tbody {
|
|
||||||
max-height: 350px;
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: none; /* Firefox */
|
|
||||||
}
|
|
||||||
.scrollable-tbody::-webkit-scrollbar {
|
|
||||||
width: 0; /* Chrome, Safari */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* On hover: show scrollbar */
|
|
||||||
.scrollable-tbody:hover {
|
|
||||||
scrollbar-width: thin; /* Firefox */
|
|
||||||
}
|
|
||||||
.scrollable-tbody:hover::-webkit-scrollbar {
|
|
||||||
width: 6px; /* Adjust width */
|
|
||||||
}
|
|
||||||
.scrollable-tbody:hover::-webkit-scrollbar-thumb {
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.scrollable-tbody:hover::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
useAssignOrgToTenant,
|
|
||||||
useOrganizationBySPRID,
|
|
||||||
useOrganizationModal,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { spridSchema } from "./OrganizationSchema";
|
|
||||||
import { OrgCardSkeleton } from "./OrganizationSkeleton";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
|
|
||||||
// Zod schema: only allow exactly 4 digits
|
|
||||||
|
|
||||||
const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|
||||||
const { onClose, startStep, flowType, onOpen, prevStep,orgData } =
|
|
||||||
useOrganizationModal();
|
|
||||||
const clientQuery = useQueryClient()
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
watch,
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(spridSchema),
|
|
||||||
defaultValues: { spridSearchText: "" },
|
|
||||||
});
|
|
||||||
|
|
||||||
const [SPRID, setSPRID] = useState("");
|
|
||||||
|
|
||||||
const { data, isLoading, isError, error, refetch } =
|
|
||||||
useOrganizationBySPRID(SPRID);
|
|
||||||
|
|
||||||
const onSubmit = (formdata) => {
|
|
||||||
setSPRID(formdata.spridSearchText);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCrateOrg = () => {
|
|
||||||
clientQuery.removeQueries({queryKey:["organization"]})
|
|
||||||
onOpen({ startStep: 4,orgData:null })
|
|
||||||
};
|
|
||||||
const SP = watch("spridSearchText");
|
|
||||||
return (
|
|
||||||
<div className="d-block">
|
|
||||||
<form
|
|
||||||
className="d-flex flex-row gap-6 text-start align-items-center"
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
>
|
|
||||||
<div className="d-flex flex-row align-items-center gap-2">
|
|
||||||
<Label className="text-secondary">Search by SPRID</Label>
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
{...register("spridSearchText")}
|
|
||||||
className="form-control form-control-sm w-auto"
|
|
||||||
placeholder="Enter SPRID"
|
|
||||||
maxLength={4}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" className="btn btn-sm btn-primary">
|
|
||||||
<i className="bx bx-sm bx-search-alt-2"></i> Search
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<div className="text-start danger-text">
|
|
||||||
{" "}
|
|
||||||
{errors.spridSearchText && (
|
|
||||||
<p className="text-danger small mt-1">
|
|
||||||
{errors.spridSearchText.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ---- Organization list ---- */}
|
|
||||||
{isLoading ? (
|
|
||||||
<OrgCardSkeleton />
|
|
||||||
) : data && data?.data.length > 0 ? (
|
|
||||||
<div className="py-2 text-tiny text-center">
|
|
||||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
|
||||||
{data.data.map((org) => (
|
|
||||||
<div className="d-flex flex-row gap-2 text-start text-black ">
|
|
||||||
<div className="mt-1">
|
|
||||||
<img
|
|
||||||
src="/public/assets/img/orgLogo.png"
|
|
||||||
alt="logo"
|
|
||||||
width={50}
|
|
||||||
height={50}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
|
|
||||||
<span className="fs-6 fw-semibold">{org.name}</span>
|
|
||||||
<div className="d-flex gap-2">
|
|
||||||
<small
|
|
||||||
className=" fw-semibold text-uppercase"
|
|
||||||
style={{ letterSpacing: "1px" }}
|
|
||||||
>
|
|
||||||
SPRID :{" "}
|
|
||||||
</small>
|
|
||||||
<small className="fs-6">{org.sprid}</small>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex flex-row gap-2">
|
|
||||||
<small className="text-small fw-semibold">Address:</small>
|
|
||||||
<div className="d-flex text-wrap">{org.address}</div>
|
|
||||||
</div>
|
|
||||||
<div className="m-0 p-0">
|
|
||||||
{" "}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
|
||||||
>
|
|
||||||
Select
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : SPRID ? (
|
|
||||||
<div className="py-3 text-center text-secondary">
|
|
||||||
No organization found for "{SPRID}"
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="py-12 text-center text-tiny text-black">
|
|
||||||
<small className="d-block text-secondary">
|
|
||||||
Do not have SPRID or could not find organization ?
|
|
||||||
</small>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-primary mt-3"
|
|
||||||
onClick={handleCrateOrg}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
|
||||||
Create New Organization
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ---- Footer buttons ---- */}
|
|
||||||
<div className={`d-flex text-secondary mt-3`}>
|
|
||||||
{flowType !== "default" && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-xs btn-outline-secondary"
|
|
||||||
onClick={() => onOpen({ startStep: prevStep })}
|
|
||||||
>
|
|
||||||
<i className="bx bx-chevron-left"></i> Back
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrgPickerFromSPId;
|
|
||||||
@ -1,182 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
useOrganizationModal,
|
|
||||||
useOrganizationsList,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
import "./OrgPicker.css"
|
|
||||||
|
|
||||||
const OrgPickerfromTenant = ({ title }) => {
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const { data, isLoading } = useOrganizationsList(
|
|
||||||
ITEMS_PER_PAGE - 10,
|
|
||||||
1,
|
|
||||||
true,
|
|
||||||
null,
|
|
||||||
searchText
|
|
||||||
);
|
|
||||||
|
|
||||||
const paginate = (page) => {
|
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const { isOpen, orgData, startStep, onOpen, flowType, prevStep } =
|
|
||||||
useOrganizationModal();
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
if (prevStep == 1 && flowType == "assign") {
|
|
||||||
onOpen({ startStep: prevStep });
|
|
||||||
} else if (prevStep == 1 && flowType == "assign") {
|
|
||||||
onOpen({ startStep: 1 });
|
|
||||||
} else {
|
|
||||||
onOpen({ startStep: 2 });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const contactList = [
|
|
||||||
{
|
|
||||||
key: "name",
|
|
||||||
label: "Name",
|
|
||||||
getValue: (org) => (
|
|
||||||
<div className="d-flex gap-2 py-1 ">
|
|
||||||
<i class="bx bx-buildings"></i>
|
|
||||||
<span
|
|
||||||
className="text-truncate d-inline-block "
|
|
||||||
style={{ maxWidth: "150px" }}
|
|
||||||
>
|
|
||||||
{org?.name || "N/A"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "sprid",
|
|
||||||
label: "SPRID",
|
|
||||||
getValue: (org) => (
|
|
||||||
<span
|
|
||||||
className="text-truncate d-inline-block"
|
|
||||||
style={{ maxWidth: "200px" }}
|
|
||||||
>
|
|
||||||
{org?.sprid || "N/A"}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
align: "text-center",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="d-block">
|
|
||||||
<div className="d-flex align-items-center gap-2 mb-1">
|
|
||||||
<Label className="mb-0">{title}</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText?.(e.target.value)}
|
|
||||||
className="form-control form-control-sm w-auto"
|
|
||||||
placeholder="Enter Organization Name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{/* ---- Organization list ---- */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div>Loading....</div>
|
|
||||||
) : data && data?.data?.length > 0 ? (
|
|
||||||
<div className="dataTables_wrapper no-footer pb-5">
|
|
||||||
<table className="table dataTable text-nowrap">
|
|
||||||
<thead>
|
|
||||||
<tr className="table_header_border">
|
|
||||||
{contactList.map((col) => (
|
|
||||||
<th key={col.key} className={col.align}>
|
|
||||||
{col.label}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
<th className="sticky-action-column bg-white text-center">
|
|
||||||
Action
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="scrollable-tbody overflow-y-auto"
|
|
||||||
style={{ maxHeight: "350px" }}
|
|
||||||
>
|
|
||||||
<table className="table dataTable text-nowrap mb-0">
|
|
||||||
<tbody>
|
|
||||||
{Array.isArray(data.data) && data.data.length > 0
|
|
||||||
? data.data.map((row, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
{contactList.map((col) => (
|
|
||||||
<td key={col.key} className={col.align}>
|
|
||||||
{col.getValue(row)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
<td className="sticky-action-column p-0 bg-white">
|
|
||||||
<div className="p-1">
|
|
||||||
<span
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm"
|
|
||||||
onClick={() =>
|
|
||||||
onOpen({ startStep: 3, orgData: row })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<i class='bx bx-right-arrow-circle text-primary'></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
: null}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">
|
|
||||||
<small className="mb-1">
|
|
||||||
Could not find organization in your database? Please search within the
|
|
||||||
global database.
|
|
||||||
</small>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-primary w-auto"
|
|
||||||
onClick={() => onOpen({ startStep: 2 })}
|
|
||||||
>
|
|
||||||
Search Using SPRID
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/* ---- Footer buttons ---- */}
|
|
||||||
<div
|
|
||||||
className={`d-flex justify-content-end
|
|
||||||
text-secondary mt-3`}
|
|
||||||
>
|
|
||||||
{flowType == "default" && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-outline-secondary"
|
|
||||||
onClick={handleBack}
|
|
||||||
>
|
|
||||||
<i className="bx bx-left-arrow-alt"></i> Back
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* <button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-secondary"
|
|
||||||
onClick={() => onOpen({ startStep: 4 })}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
|
||||||
Add New Organization
|
|
||||||
</button> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrgPickerfromTenant;
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import React, { useMemo, useState } from "react";
|
|
||||||
import { FormProvider, useForm } from "react-hook-form";
|
|
||||||
import {
|
|
||||||
defaultOrganizationValues,
|
|
||||||
organizationSchema,
|
|
||||||
} from "./OrganizationSchema";
|
|
||||||
import Modal from "../common/Modal";
|
|
||||||
import {
|
|
||||||
useCreateOrganization,
|
|
||||||
useOrganizationBySPRID,
|
|
||||||
useOrganizationModal,
|
|
||||||
useOrganizationsList,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
import { useServices } from "../../hooks/masterHook/useMaster";
|
|
||||||
import AssignOrg from "./AssignOrg";
|
|
||||||
import ManagOrg from "./ManagOrg";
|
|
||||||
import OrgPickerFromSPId from "./OrgPickerFromSPId";
|
|
||||||
import OrgPickerfromTenant from "./OrgPickerfromTenant";
|
|
||||||
import ViewOrganization from "./ViewOrganization";
|
|
||||||
|
|
||||||
const OrganizationModal = () => {
|
|
||||||
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
|
|
||||||
useOrganizationModal();
|
|
||||||
const { data: masterService, isLoading } = useServices();
|
|
||||||
const [searchText, setSearchText] = useState();
|
|
||||||
const [SPRID, setSPRID] = useState("");
|
|
||||||
|
|
||||||
const [Organization, setOrganization] = useState({});
|
|
||||||
|
|
||||||
const method = useForm({
|
|
||||||
resolver: zodResolver(organizationSchema),
|
|
||||||
defaultValues: defaultOrganizationValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
register,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = method;
|
|
||||||
|
|
||||||
const { mutate: CreateOrganization, isPending } = useCreateOrganization(
|
|
||||||
() => {
|
|
||||||
reset(defaultOrganizationValues);
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const onSubmit = (OrgPayload) => {
|
|
||||||
CreateOrganization(OrgPayload);
|
|
||||||
};
|
|
||||||
|
|
||||||
const RenderTitle = useMemo(() => {
|
|
||||||
if (orgData && startStep === 3 ) {
|
|
||||||
return "Assign Organization";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (startStep === 1) {
|
|
||||||
return orgData && orgData !== null
|
|
||||||
? "Add Organization"
|
|
||||||
: "Choose Organization";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (startStep === 2) {
|
|
||||||
return "Add Organization";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (startStep === 3) {
|
|
||||||
return "Assign Organization";
|
|
||||||
}
|
|
||||||
if(startStep === 5){
|
|
||||||
return "Organization Details"
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${orgData ? "Update":"Create"} Organization`;
|
|
||||||
}, [startStep, orgData]);
|
|
||||||
|
|
||||||
const contentBody = (
|
|
||||||
<div>
|
|
||||||
{/* ---------- STEP 1: Service Provider- Form Own Tenant list ---------- */}
|
|
||||||
{startStep === 1 && <OrgPickerfromTenant title="Find Organization" />}
|
|
||||||
|
|
||||||
{startStep === 2 && (
|
|
||||||
<OrgPickerFromSPId
|
|
||||||
title="Find Organization"
|
|
||||||
placeholder="Enter Service Provider Id"
|
|
||||||
projectOrganizations={orgData}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ---------- STEP 2: Existing Organization Details ---------- */}
|
|
||||||
{startStep === 3 && Organization && (
|
|
||||||
<AssignOrg Organization={Organization} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ---------- STEP 3: Add New Organization ---------- */}
|
|
||||||
{startStep === 4 && <ManagOrg />}
|
|
||||||
|
|
||||||
{/* ---------- STEP 3: View Organization ---------- */}
|
|
||||||
{startStep === 5 && <ViewOrganization orgId={orgData}/>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={isOpen}
|
|
||||||
onClose={onClose}
|
|
||||||
title={RenderTitle}
|
|
||||||
body={contentBody}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrganizationModal;
|
|
||||||
@ -7,19 +7,19 @@ export const organizationSchema = z.object({
|
|||||||
contactNumber: z
|
contactNumber: z
|
||||||
.string()
|
.string()
|
||||||
.trim()
|
.trim()
|
||||||
.min(7, { message: "Contact number must be at least 7 digits" })
|
.min(7, { message: "Contact number must be at least 7 digits" })
|
||||||
.max(20, { message: "Contact number cannot exceed 12 digits" })
|
.max(20, { message: "Contact number cannot exceed 12 digits" })
|
||||||
|
|
||||||
.regex(phoneRegex, { message: "Invalid phone number" }),
|
.regex(phoneRegex, { message: "Invalid phone number" }),
|
||||||
contactPerson: z.string().min(1, { message: "Person name required" }),
|
contactPerson: z.string().min(1, { message: "Person name required" }),
|
||||||
address: z.string().min(1, { message: "Address is required!" }),
|
address: z.string().min(1, { message: "Address is required!" }),
|
||||||
email: z
|
email: z
|
||||||
.string().trim()
|
.string()
|
||||||
.min(1, { message: "Email is required" })
|
.min(1, { message: "Email is required" })
|
||||||
.email("Invalid email address"),
|
.email("Invalid email address"),
|
||||||
serviceIds: z
|
serviceIds: z
|
||||||
.array(z.string())
|
.array(z.string())
|
||||||
.min(1, { message: "Service isrequired" }),
|
.min(1, { message: "Please insert service id" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const defaultOrganizationValues = {
|
export const defaultOrganizationValues = {
|
||||||
@ -30,28 +30,3 @@ export const defaultOrganizationValues = {
|
|||||||
email: "",
|
email: "",
|
||||||
serviceIds: [],
|
serviceIds: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
export const assignedOrgToProject = z.object({
|
|
||||||
// projectId: z.string().uuid({ message: "Invalid projectId format" }),
|
|
||||||
// organizationId: z.string().string({ message: "Invalid organizationId format" }),
|
|
||||||
// parentOrganizationId: z
|
|
||||||
// .string()
|
|
||||||
// .nullable()
|
|
||||||
// .optional(),
|
|
||||||
serviceIds: z.preprocess(
|
|
||||||
(val) => (Array.isArray(val) ? val : []),
|
|
||||||
z
|
|
||||||
.array(z.string().uuid({ message: "Invalid serviceId format" }))
|
|
||||||
.nonempty({ message: "At least one service must be selected" })
|
|
||||||
),
|
|
||||||
|
|
||||||
organizationTypeId: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Organization is required" }),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const spridSchema = z.object({
|
|
||||||
spridSearchText: z
|
|
||||||
.string()
|
|
||||||
.regex(/^\d{4}$/, { message: "SPRID must be exactly 4 digits" }),
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,123 +0,0 @@
|
|||||||
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
||||||
<div
|
|
||||||
className={`skeleton mb-2 ${className}`}
|
|
||||||
style={{
|
|
||||||
height,
|
|
||||||
width,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
);
|
|
||||||
export const OrgCardSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<div className="row p-3">
|
|
||||||
{[...Array(1)].map((_, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="list-group-item d-flex flex-row gap-2 align-items-start border-0 shadow-sm rounded mb-3 p-3"
|
|
||||||
>
|
|
||||||
{/* Left: Logo/avatar placeholder */}
|
|
||||||
<div className="mt-1">
|
|
||||||
<SkeletonLine height={50} width={50} className="rounded-circle" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right: Info section */}
|
|
||||||
<div className="d-flex flex-column flex-grow-1 text-start">
|
|
||||||
{/* Org name */}
|
|
||||||
<SkeletonLine height={18} width="160px" className="mb-2" />
|
|
||||||
|
|
||||||
{/* SPRID */}
|
|
||||||
<div className="d-flex gap-2 mb-2">
|
|
||||||
<SkeletonLine height={14} width="60px" />
|
|
||||||
<SkeletonLine height={14} width="100px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address */}
|
|
||||||
<div className="d-flex gap-2">
|
|
||||||
<SkeletonLine height={14} width="70px" />
|
|
||||||
<SkeletonLine height={14} width="100%" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const OrgDetailsSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<div className="row text-start p-3">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex justify-content-between align-items-center">
|
|
||||||
{/* Logo + Name */}
|
|
||||||
<div className="d-flex flex-row gap-2 align-items-center">
|
|
||||||
<SkeletonLine height={40} width={40} className="rounded-circle" />
|
|
||||||
<SkeletonLine height={18} width="180px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status Badge */}
|
|
||||||
<SkeletonLine height={20} width="70px" className="rounded-pill" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Section Title */}
|
|
||||||
<div className="d-flex text-secondary mb-2">
|
|
||||||
<SkeletonLine height={16} width="140px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Person */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
||||||
<SkeletonLine height={16} width="140px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Number */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
||||||
<SkeletonLine height={16} width="140px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Email */}
|
|
||||||
<div className="col-md-12 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
||||||
<SkeletonLine height={16} width="220px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* SPRID */}
|
|
||||||
<div className="col-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
||||||
<SkeletonLine height={16} width="160px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Employees */}
|
|
||||||
<div className="col-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
||||||
<SkeletonLine height={16} width="60px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address */}
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
||||||
<SkeletonLine height={16} width="100%" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Section Title 2 */}
|
|
||||||
<div className="d-flex text-secondary mb-2">
|
|
||||||
<SkeletonLine height={16} width="200px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,12 +1,10 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { useOrganizationModal, useOrganizationsList } from "../../hooks/useOrganization";
|
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import Avatar from "../common/Avatar";
|
import Avatar from "../common/Avatar";
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
import { useDebounce } from "../../utils/appUtils";
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
|
|
||||||
const OrganizationsList = ({searchText}) => {
|
const OrganizationsList = ({searchText}) => {
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const searchString = useDebounce(searchText,500)
|
const searchString = useDebounce(searchText,500)
|
||||||
const {
|
const {
|
||||||
data = [],
|
data = [],
|
||||||
@ -15,7 +13,6 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
isError,
|
isError,
|
||||||
error,
|
error,
|
||||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
|
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
|
||||||
const {onClose, startStep, flowType, onOpen,orgData } = useOrganizationModal();
|
|
||||||
|
|
||||||
const organizationsColumns = [
|
const organizationsColumns = [
|
||||||
{
|
{
|
||||||
@ -23,7 +20,7 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
label: "Organization Name",
|
label: "Organization Name",
|
||||||
getValue: (org) => (
|
getValue: (org) => (
|
||||||
<div className="d-flex gap-2 py-1 ">
|
<div className="d-flex gap-2 py-1 ">
|
||||||
<i className="bx bx-buildings"></i>
|
<i class="bx bx-buildings"></i>
|
||||||
<span
|
<span
|
||||||
className="text-truncate d-inline-block "
|
className="text-truncate d-inline-block "
|
||||||
style={{ maxWidth: "150px" }}
|
style={{ maxWidth: "150px" }}
|
||||||
@ -84,16 +81,11 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const paginate = (page) => {
|
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (isFetching && !isFetching) return <div>Loading...</div>;
|
if (isFetching && !isFetching) return <div>Loading...</div>;
|
||||||
if (isError) return <div>{error?.message || "Something went wrong"}</div>;
|
if (isError) return <div>{error?.message || "Something went wrong"}</div>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card px-0 px-sm-4 pb-12 pt-5">
|
<div className="card px-0 px-sm-4">
|
||||||
<div className="card-datatable table-responsive" id="horizontal-example">
|
<div className="card-datatable table-responsive" id="horizontal-example">
|
||||||
<div className="dataTables_wrapper no-footer px-2">
|
<div className="dataTables_wrapper no-footer px-2">
|
||||||
<table className="table border-top dataTable text-nowrap">
|
<table className="table border-top dataTable text-nowrap">
|
||||||
@ -114,8 +106,8 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{data?.data?.length > 0 ? (
|
{data.length > 0 ? (
|
||||||
data?.data?.map((org) => (
|
data.map((org) => (
|
||||||
<tr key={org.id}>
|
<tr key={org.id}>
|
||||||
{organizationsColumns.map((col) => (
|
{organizationsColumns.map((col) => (
|
||||||
<td
|
<td
|
||||||
@ -128,9 +120,9 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
<td className="sticky-action-column ">
|
<td className="sticky-action-column ">
|
||||||
<div className="d-flex justify-content-center gap-2">
|
<div className="d-flex justify-content-center gap-2 ">
|
||||||
<i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
|
<i className="bx bx-show text-primary cursor-pointer"></i>
|
||||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
|
<i className="bx bx-edit text-secondary cursor-pointer"></i>
|
||||||
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -142,19 +134,12 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
colSpan={organizationsColumns.length + 1}
|
colSpan={organizationsColumns.length + 1}
|
||||||
className="text-center"
|
className="text-center"
|
||||||
>
|
>
|
||||||
<p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
|
<p className="fw-semibold">Not Found</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,116 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useOrganization } from "../../hooks/useOrganization";
|
|
||||||
import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
|
|
||||||
|
|
||||||
const VieworgDataanization = ({ orgId }) => {
|
|
||||||
const { data, isLoading, isError, error } = useOrganization(orgId);
|
|
||||||
if (isLoading) return <OrgDetailsSkeleton />;
|
|
||||||
if (isError) return <div>{error.message}</div>;
|
|
||||||
return (
|
|
||||||
<div className="row text-black text-black text-start ">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
|
||||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
|
||||||
<img
|
|
||||||
src="/public/assets/img/orgLogo.png"
|
|
||||||
alt="logo"
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
/>{" "}
|
|
||||||
<p className="fw-semibold fs-6 m-0">{data?.name}</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-end">
|
|
||||||
<span
|
|
||||||
className={`badge bg-label-${
|
|
||||||
data?.isActive ? "primary" : "secondary"
|
|
||||||
} `}
|
|
||||||
>
|
|
||||||
{data?.isActive ? "Active" : "In-Active"}{" "}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex text-secondary mb-2">
|
|
||||||
{" "}
|
|
||||||
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
|
||||||
</div>
|
|
||||||
{/* Contact Info */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.contactPerson}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.contactNumber}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-12 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.email}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ maxWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
|
||||||
Service Provider Id (SPRID) :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.sprid}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ maxWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm me-1 bx-group"></i>
|
|
||||||
Employees :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.activeEmployeeCount}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-1 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
<i className="bx bx-sm me-1 bx-map"></i> Address :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted text-start">{data?.address}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex text-secondary mb-2">
|
|
||||||
{" "}
|
|
||||||
<i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default VieworgDataanization;
|
|
||||||
@ -1 +0,0 @@
|
|||||||
useAssignOrgToTenant
|
|
||||||
@ -42,7 +42,7 @@ const AboutProject = () => {
|
|||||||
{IsOpenModal && (
|
{IsOpenModal && (
|
||||||
<GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
|
<GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
|
||||||
<ManageProjectInfo
|
<ManageProjectInfo
|
||||||
project={projects_Details?.id}
|
project={projects_Details}
|
||||||
handleSubmitForm={handleFormSubmit}
|
handleSubmitForm={handleFormSubmit}
|
||||||
onClose={() => setIsOpenModal(false)}
|
onClose={() => setIsOpenModal(false)}
|
||||||
isPending={isPending}
|
isPending={isPending}
|
||||||
|
|||||||
@ -1,26 +1,24 @@
|
|||||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||||
import useMaster, { useServices } from "../../hooks/masterHook/useMaster";
|
import useMaster from "../../hooks/masterHook/useMaster";
|
||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
import {
|
import { useProjectDetails } from "../../hooks/useProjects";
|
||||||
useEmployeeForTaskAssign,
|
|
||||||
useProjectAssignedOrganizationsName,
|
|
||||||
useProjectAssignedServices,
|
|
||||||
useProjectDetails,
|
|
||||||
} from "../../hooks/useProjects";
|
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { useCreateTask } from "../../hooks/useTasks";
|
import { useCreateTask } from "../../hooks/useTasks";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
|
|
||||||
const TaskSchema = (maxPlanned) => {
|
const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||||
return z.object({
|
const maxPlanned =
|
||||||
|
assignData?.workItem?.plannedWork - assignData?.workItem?.completedWork;
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
selectedEmployees: z
|
selectedEmployees: z
|
||||||
.array(z.string())
|
.array(z.string())
|
||||||
.min(1, { message: "At least one employee must be selected" }),
|
.min(1, { message: "At least one employee must be selected" }),
|
||||||
@ -39,26 +37,20 @@ const TaskSchema = (maxPlanned) => {
|
|||||||
})
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|
||||||
const planned = assignData?.workItem?.plannedWork || 0;
|
|
||||||
const completed = assignData?.workItem?.completedWork || 0;
|
|
||||||
const maxPlanned = planned - completed;
|
|
||||||
|
|
||||||
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
|
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
|
||||||
const helpPopupRefTarget = useRef(null);
|
const helpPopupRefTarget = useRef(null);
|
||||||
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
||||||
const [selectedService, setSelectedService] = useState(null);
|
|
||||||
const [selectedOrganization, setSelectedOrganization] = useState(null);
|
|
||||||
|
|
||||||
const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
|
const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
|
||||||
onSuccessCallback: closedModel,
|
onSuccessCallback: () => {
|
||||||
|
closedModel();
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
// Close dropdown on outside click
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (event) => {
|
const handleClickOutside = (event) => {
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||||
@ -71,47 +63,48 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
|
|
||||||
const infoRef = useRef(null);
|
const infoRef = useRef(null);
|
||||||
const infoRef1 = useRef(null);
|
const infoRef1 = useRef(null);
|
||||||
|
|
||||||
|
// State for search term
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof bootstrap !== "undefined") {
|
if (typeof bootstrap !== "undefined") {
|
||||||
infoRef.current &&
|
if (infoRef.current) {
|
||||||
new bootstrap.Popover(infoRef.current, {
|
new bootstrap.Popover(infoRef.current, {
|
||||||
trigger: "focus",
|
trigger: "focus",
|
||||||
placement: "right",
|
placement: "right",
|
||||||
html: true,
|
html: true,
|
||||||
content: `<div>Total Pending tasks of the Activity</div>`,
|
content: `<div>Total Pending tasks of the Activity</div>`,
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
infoRef1.current &&
|
if (infoRef1.current) {
|
||||||
new bootstrap.Popover(infoRef1.current, {
|
new bootstrap.Popover(infoRef1.current, {
|
||||||
trigger: "focus",
|
trigger: "focus",
|
||||||
placement: "right",
|
placement: "right",
|
||||||
html: true,
|
html: true,
|
||||||
content: `<div>Target task for today</div>`,
|
content: `<div>Target task for today</div>`,
|
||||||
});
|
});
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
console.warn("Bootstrap is not available. Popovers might not function.");
|
console.warn("Bootstrap is not available. Popovers might not function.");
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
const selectedProject = useSelector(
|
||||||
const selectedProject = useSelectedProject();
|
(store) => store.localVariables.projectId
|
||||||
const { data: serviceList, isLoading: isServiceLoading } = useProjectAssignedServices(selectedProject);
|
);
|
||||||
const { data: organizationList, isLoading: isOrgLoading } =
|
const {
|
||||||
useProjectAssignedOrganizationsName(selectedProject);
|
employees,
|
||||||
const { data: employees, isLoading: isEmployeeLoading } =
|
loading: employeeLoading,
|
||||||
useEmployeeForTaskAssign(
|
recallEmployeeData,
|
||||||
selectedProject,
|
} = useEmployeesAllOrByProjectId(false, selectedProject, false);
|
||||||
selectedService,
|
|
||||||
selectedOrganization
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { loading, data: jobRoleData } = useMaster();
|
const { loading } = useMaster();
|
||||||
|
const { data: jobRoleData } = useMaster();
|
||||||
|
|
||||||
|
// Changed to an array to hold multiple selected roles
|
||||||
const [selectedRoles, setSelectedRoles] = useState(["all"]);
|
const [selectedRoles, setSelectedRoles] = useState(["all"]);
|
||||||
const [displayedSelection, setDisplayedSelection] = useState("");
|
const [displayedSelection, setDisplayedSelection] = useState("");
|
||||||
|
|
||||||
const {
|
const {
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
control,
|
control,
|
||||||
@ -121,98 +114,133 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
reset,
|
reset,
|
||||||
trigger,
|
trigger,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
defaultValues: { selectedEmployees: [], description: "", plannedTask: "" },
|
defaultValues: {
|
||||||
resolver: zodResolver(TaskSchema(maxPlanned)),
|
selectedEmployees: [],
|
||||||
|
description: "",
|
||||||
|
plannedTask: "",
|
||||||
|
},
|
||||||
|
resolver: zodResolver(schema),
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleCheckboxChange = (event, user) => {
|
const handleCheckboxChange = (event, user) => {
|
||||||
const updatedSelectedEmployees = event.target.checked
|
const isChecked = event.target.checked;
|
||||||
? [...(watch("selectedEmployees") || []), user.id].filter(
|
let updatedSelectedEmployees = watch("selectedEmployees") || [];
|
||||||
(v, i, a) => a.indexOf(v) === i
|
|
||||||
)
|
|
||||||
: (watch("selectedEmployees") || []).filter((id) => id !== user.id);
|
|
||||||
|
|
||||||
|
if (isChecked) {
|
||||||
|
if (!updatedSelectedEmployees.includes(user.id)) {
|
||||||
|
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
updatedSelectedEmployees = updatedSelectedEmployees?.filter(
|
||||||
|
(id) => id !== user.id
|
||||||
|
);
|
||||||
|
}
|
||||||
setValue("selectedEmployees", updatedSelectedEmployees);
|
setValue("selectedEmployees", updatedSelectedEmployees);
|
||||||
trigger("selectedEmployees");
|
trigger("selectedEmployees");
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(changeMaster("Job Role"));
|
dispatch(changeMaster("Job Role"));
|
||||||
|
// Initial state should reflect "All Roles" selected
|
||||||
setSelectedRoles(["all"]);
|
setSelectedRoles(["all"]);
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
|
// Modified handleRoleChange to handle multiple selections
|
||||||
const handleRoleChange = (event, roleId) => {
|
const handleRoleChange = (event, roleId) => {
|
||||||
setSelectedRoles((prev) => {
|
// If 'all' is selected, clear other selections
|
||||||
if (roleId === "all") return ["all"];
|
if (roleId === "all") {
|
||||||
const newRoles = prev.filter((r) => r !== "all");
|
setSelectedRoles(["all"]);
|
||||||
return newRoles.includes(roleId)
|
} else {
|
||||||
? newRoles.filter((r) => r !== roleId)
|
setSelectedRoles((prevSelectedRoles) => {
|
||||||
: [...newRoles, roleId];
|
// If "all" was previously selected, remove it
|
||||||
});
|
const newRoles = prevSelectedRoles.filter((role) => role !== "all");
|
||||||
|
if (newRoles.includes(roleId)) {
|
||||||
|
// If role is already selected, unselect it
|
||||||
|
return newRoles.filter((id) => id !== roleId);
|
||||||
|
} else {
|
||||||
|
// If role is not selected, add it
|
||||||
|
return [...newRoles, roleId];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// Update displayedSelection based on selectedRoles
|
||||||
if (selectedRoles.includes("all")) {
|
if (selectedRoles.includes("all")) {
|
||||||
setDisplayedSelection("All Roles");
|
setDisplayedSelection("All Roles");
|
||||||
} else if (selectedRoles.length > 0) {
|
} else if (selectedRoles.length > 0) {
|
||||||
setDisplayedSelection(
|
const selectedRoleNames = selectedRoles.map(roleId => {
|
||||||
selectedRoles
|
const role = jobRoleData?.find(r => String(r.id) === roleId);
|
||||||
.map((id) => jobRoleData?.find((r) => String(r.id) === id)?.name)
|
return role ? role.name : '';
|
||||||
.filter(Boolean)
|
}).filter(Boolean); // Filter out empty strings for roles not found
|
||||||
.join(", ")
|
setDisplayedSelection(selectedRoleNames.join(', '));
|
||||||
);
|
} else {
|
||||||
} else setDisplayedSelection("Select Roles");
|
setDisplayedSelection("Select Roles");
|
||||||
|
}
|
||||||
}, [selectedRoles, jobRoleData]);
|
}, [selectedRoles, jobRoleData]);
|
||||||
|
|
||||||
const handleSearchChange = (e) => setSearchTerm(e.target.value);
|
|
||||||
|
|
||||||
const filteredEmployees = employees?.data?.filter((emp) => {
|
const handleSearchChange = (event) => {
|
||||||
|
setSearchTerm(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter employees first by role, then by search term AND job role name
|
||||||
|
const filteredEmployees = employees?.filter((emp) => {
|
||||||
const matchesRole =
|
const matchesRole =
|
||||||
selectedRoles.includes("all") ||
|
selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
|
||||||
selectedRoles.includes(String(emp.jobRoleId));
|
// Convert both first and last names and job role name to lowercase for case-insensitive matching
|
||||||
const searchLower = searchTerm.toLowerCase();
|
|
||||||
const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
|
const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
|
||||||
const jobRoleName =
|
|
||||||
jobRoleData
|
const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
|
||||||
?.find((role) => role.id === emp.jobRoleId)
|
|
||||||
?.name?.toLowerCase() || "";
|
const searchLower = searchTerm.toLowerCase();
|
||||||
return (
|
// Check if the full name OR job role name includes the search term
|
||||||
matchesRole &&
|
const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
|
||||||
(fullName.includes(searchLower) || jobRoleName.includes(searchLower))
|
return matchesRole && matchesSearch;
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const jobRolesForDropdown = jobRoleData?.filter((role) =>
|
// Determine unique job role IDs from the filtered employees (for dropdown options)
|
||||||
new Set(employees?.data?.map((emp) => emp.jobRoleId).filter(Boolean)).has(
|
const uniqueJobRoleIdsInFilteredEmployees = new Set(
|
||||||
role.id
|
employees?.map(emp => emp.jobRoleId).filter(Boolean)
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
|
||||||
|
const jobRolesForDropdown = jobRoleData?.filter(role =>
|
||||||
|
uniqueJobRoleIdsInFilteredEmployees.has(role.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Calculate the count of selected roles for display
|
||||||
const selectedRolesCount = selectedRoles.includes("all")
|
const selectedRolesCount = selectedRoles.includes("all")
|
||||||
? 0
|
? 0 // "All Roles" doesn't contribute to a specific count
|
||||||
: selectedRoles.length;
|
: selectedRoles.length;
|
||||||
|
|
||||||
const onSubmit = (data) => {
|
const onSubmit = (data) => {
|
||||||
|
const selectedEmployeeIds = data.selectedEmployees;
|
||||||
|
|
||||||
|
const taskTeamWithDetails = selectedEmployeeIds
|
||||||
|
?.map((empId) => empId)
|
||||||
|
?.filter(Boolean);
|
||||||
|
const formattedData = {
|
||||||
|
taskTeam: taskTeamWithDetails,
|
||||||
|
plannedTask: data.plannedTask,
|
||||||
|
description: data.description,
|
||||||
|
assignmentDate: new Date().toISOString(),
|
||||||
|
workItemId: assignData?.workItem.id,
|
||||||
|
};
|
||||||
assignTask({
|
assignTask({
|
||||||
payload: {
|
payload: formattedData,
|
||||||
taskTeam: data.selectedEmployees.filter(Boolean),
|
|
||||||
plannedTask: data.plannedTask,
|
|
||||||
description: data.description,
|
|
||||||
assignmentDate: new Date().toISOString(),
|
|
||||||
workItemId: assignData?.workItem.id,
|
|
||||||
},
|
|
||||||
workAreaId: assignData?.workArea?.id,
|
workAreaId: assignData?.workArea?.id,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function closedModel() {
|
const closedModel = () => {
|
||||||
reset();
|
reset();
|
||||||
onClose();
|
onClose();
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
|
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
|
||||||
<p className="align-items-center flex-wrap m-0">Assign Task</p>
|
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
|
||||||
<div className="container my-3">
|
<div className="container my-3">
|
||||||
<div className="mb-1">
|
<div className="mb-1">
|
||||||
<p className="mb-0">
|
<p className="mb-0">
|
||||||
@ -224,7 +252,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
assignData?.workArea?.areaName,
|
assignData?.workArea?.areaName,
|
||||||
assignData?.workItem?.activityMaster?.activityName,
|
assignData?.workItem?.activityMaster?.activityName,
|
||||||
]
|
]
|
||||||
.filter(Boolean)
|
.filter(Boolean) // Filter out any undefined/null values
|
||||||
.map((item, index, array) => (
|
.map((item, index, array) => (
|
||||||
<span key={index} className="d-flex align-items-center">
|
<span key={index} className="d-flex align-items-center">
|
||||||
{item}
|
{item}
|
||||||
@ -240,64 +268,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
<div className="form-label text-start">
|
<div className="form-label text-start">
|
||||||
<div className="row mb-1">
|
<div className="row mb-1">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="row text-start">
|
<div className="form-text text-start">
|
||||||
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
|
|
||||||
<div>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
value={selectedOrganization || ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
setSelectedOrganization(e.target.value)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{isServiceLoading ? (
|
|
||||||
<option>Loading...</option>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<option value="">--Select Organization--</option>
|
|
||||||
{organizationList?.map((org,index) => (
|
|
||||||
<option key={`${org.id}-${index}`} value={org.id}>
|
|
||||||
{org.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
value={selectedService || ""}
|
|
||||||
onChange={(e) => setSelectedService(e.target.value)}
|
|
||||||
>
|
|
||||||
{isOrgLoading ? (
|
|
||||||
<option>Loading...</option>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<option value="">--Select Service--</option>
|
|
||||||
{serviceList?.map((service,index) => (
|
|
||||||
<option key={`${service.id}-${index}`} value={service.id}>
|
|
||||||
{service.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
|
className="d-flex align-items-center form-text fs-7"
|
||||||
ref={dropdownRef}
|
ref={dropdownRef}
|
||||||
>
|
>
|
||||||
|
<span className="text-dark">Select Team</span>
|
||||||
|
|
||||||
{/* Dropdown */}
|
{/* Dropdown */}
|
||||||
<div className="dropdown position-relative d-inline-block">
|
<div className="dropdown position-relative d-inline-block">
|
||||||
<a
|
<a
|
||||||
className={`dropdown-toggle hide-arrow cursor-pointer ${
|
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
|
||||||
selectedRoles.includes("all") ||
|
|
||||||
selectedRoles.length === 0
|
|
||||||
? "text-secondary"
|
? "text-secondary"
|
||||||
: "text-primary"
|
: "text-primary"
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setOpen(!open)}
|
onClick={() => setOpen(!open)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-slider-alt ms-2"></i>
|
<i className="bx bx-slider-alt ms-2"></i>
|
||||||
@ -306,7 +290,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
{/* Badge */}
|
{/* Badge */}
|
||||||
{selectedRolesCount > 0 && (
|
{selectedRolesCount > 0 && (
|
||||||
<span
|
<span
|
||||||
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
|
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
|
||||||
style={{
|
style={{
|
||||||
fontSize: "0.65rem",
|
fontSize: "0.65rem",
|
||||||
minWidth: "18px",
|
minWidth: "18px",
|
||||||
@ -336,9 +320,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
id="checkboxAllRoles"
|
id="checkboxAllRoles"
|
||||||
value="all"
|
value="all"
|
||||||
checked={selectedRoles.includes("all")}
|
checked={selectedRoles.includes("all")}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleRoleChange(e, e.target.value)}
|
||||||
handleRoleChange(e, e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className="form-check-label ms-2"
|
className="form-check-label ms-2"
|
||||||
@ -358,12 +340,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
id={`checkboxRole-${role.id}`}
|
id={`checkboxRole-${role.id}`}
|
||||||
value={role.id}
|
value={role.id}
|
||||||
checked={selectedRoles.includes(
|
checked={selectedRoles.includes(String(role.id))}
|
||||||
String(role.id)
|
onChange={(e) => handleRoleChange(e, e.target.value)}
|
||||||
)}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleRoleChange(e, e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className="form-check-label ms-2"
|
className="form-check-label ms-2"
|
||||||
@ -379,15 +357,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Search Box */}
|
{/* Search Box */}
|
||||||
<div>
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
className="form-control form-control-sm ms-auto mb-2 mt-2"
|
||||||
className="form-control form-control-sm ms-auto mb-2 mt-2"
|
placeholder="Search employees or roles..."
|
||||||
placeholder="Search employees or roles..."
|
value={searchTerm}
|
||||||
value={searchTerm}
|
onChange={handleSearchChange}
|
||||||
onChange={handleSearchChange}
|
style={{ maxWidth: "200px" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -404,19 +381,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
>
|
>
|
||||||
{selectedRoles?.length > 0 && (
|
{selectedRoles?.length > 0 && (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{isEmployeeLoading ? (
|
{employeeLoading ? (
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<p className="text-center">Loading employees...</p>
|
<p className="text-center">Loading employees...</p>
|
||||||
</div>
|
</div>
|
||||||
) : filteredEmployees?.length > 0 ? (
|
) : filteredEmployees?.length > 0 ? (
|
||||||
filteredEmployees.map((emp,index) => {
|
filteredEmployees.map((emp) => {
|
||||||
const jobRole = jobRoleData?.find(
|
const jobRole = jobRoleData?.find(
|
||||||
(role) => role?.id === emp?.jobRoleId
|
(role) => role?.id === emp?.jobRoleId
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={`${emp.index}-${index}`}
|
key={emp.id}
|
||||||
className="col-6 col-md-4 col-lg-3 mb-3"
|
className="col-6 col-md-4 col-lg-3 mb-3"
|
||||||
>
|
>
|
||||||
<div className="form-check d-flex align-items-start">
|
<div className="form-check d-flex align-items-start">
|
||||||
@ -464,7 +441,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
) : (
|
) : (
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
No employees found for the selected filter.
|
No employees found for the selected role.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -479,14 +456,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
{watch("selectedEmployees")?.length > 0 && (
|
{watch("selectedEmployees")?.length > 0 && (
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
<div className="text-start px-2">
|
<div className="text-start px-2">
|
||||||
{watch("selectedEmployees")?.map((empId,ind) => {
|
{watch("selectedEmployees")?.map((empId) => {
|
||||||
const emp = employees?.data?.find(
|
const emp = employees.find((emp) => emp.id === empId);
|
||||||
(emp) => emp.id === empId
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
emp && (
|
emp && (
|
||||||
<span
|
<span
|
||||||
key={`${empId}-${ind}`}
|
key={empId}
|
||||||
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
||||||
>
|
>
|
||||||
{emp.firstName} {emp.lastName}
|
{emp.firstName} {emp.lastName}
|
||||||
@ -531,12 +506,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
{assignData?.workItem?.plannedWork -
|
{assignData?.workItem?.plannedWork -
|
||||||
assignData?.workItem?.completedWork}
|
assignData?.workItem?.completedWork}
|
||||||
</strong>{" "}
|
</strong>{" "}
|
||||||
<u>
|
<u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
||||||
{
|
|
||||||
assignData?.workItem?.activityMaster
|
|
||||||
?.unitOfMeasurement
|
|
||||||
}
|
|
||||||
</u>
|
|
||||||
</label>
|
</label>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -567,15 +537,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
className="form-control form-control-sm"
|
className="form-control form-control-sm"
|
||||||
{...field}
|
{...field}
|
||||||
/>
|
/>
|
||||||
<span
|
<span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
|
||||||
style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}
|
<u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
||||||
>
|
|
||||||
<u>
|
|
||||||
{
|
|
||||||
assignData?.workItem?.activityMaster
|
|
||||||
?.unitOfMeasurement
|
|
||||||
}
|
|
||||||
</u>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -583,17 +546,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors.plannedTask && (
|
{errors.plannedTask && (
|
||||||
<div className="danger-text mt-1">
|
<div className="danger-text mt-1">{errors.plannedTask.message}</div>
|
||||||
{errors.plannedTask.message}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Label
|
|
||||||
|
{/* <label
|
||||||
className="form-text fs-7 m-1 text-lg text-dark"
|
className="form-text fs-7 m-1 text-lg text-dark"
|
||||||
htmlFor="descriptionTextarea"
|
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
|
||||||
required
|
|
||||||
>
|
>
|
||||||
Description
|
Description
|
||||||
|
</label> */}
|
||||||
|
<Label className="form-text fs-7 m-1 text-lg text-dark"
|
||||||
|
htmlFor="descriptionTextarea" required>
|
||||||
|
Description
|
||||||
</Label>
|
</Label>
|
||||||
<Controller
|
<Controller
|
||||||
name="description"
|
name="description"
|
||||||
@ -627,6 +592,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
{isSubmitting ? "Please Wait" : "Submit"}
|
{isSubmitting ? "Please Wait" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,8 +32,9 @@ const EditActivityModal = ({
|
|||||||
building,
|
building,
|
||||||
floor,
|
floor,
|
||||||
onClose,
|
onClose,
|
||||||
}) => {
|
} ) =>
|
||||||
|
{
|
||||||
|
|
||||||
const { activities, loading: loadingActivities } = useActivitiesMaster();
|
const { activities, loading: loadingActivities } = useActivitiesMaster();
|
||||||
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
|
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
|
||||||
const [selectedActivity, setSelectedActivity] = useState(null);
|
const [selectedActivity, setSelectedActivity] = useState(null);
|
||||||
@ -56,12 +57,13 @@ const EditActivityModal = ({
|
|||||||
comment: "",
|
comment: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { mutate: UpdateTask, isPending } = useManageTask({
|
const { mutate: UpdateTask, isPending } = useManageTask({
|
||||||
onSuccessCallback: (response) => {
|
onSuccessCallback: (response) =>
|
||||||
showToast(response?.message, "success")
|
{
|
||||||
onClose()
|
showToast( response?.message, "success" )
|
||||||
}
|
onClose()
|
||||||
});
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -80,33 +82,34 @@ const EditActivityModal = ({
|
|||||||
[categories]
|
[categories]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!workItem) return;
|
if (!workItem) return;
|
||||||
console.log(workItem)
|
console.log(workItem)
|
||||||
reset({
|
reset({
|
||||||
activityID: String(
|
activityID: String(
|
||||||
workItem?.workItem?.activityId || workItem?.activityMaster?.id
|
workItem?.workItem?.activityId || workItem?.activityMaster?.id
|
||||||
),
|
),
|
||||||
workCategoryId: String(
|
workCategoryId: String(
|
||||||
workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
|
workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
|
||||||
),
|
),
|
||||||
plannedWork:
|
plannedWork:
|
||||||
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
|
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
|
||||||
completedWork:
|
completedWork:
|
||||||
workItem?.workItem?.completedWork || workItem?.completedWork || 0,
|
workItem?.workItem?.completedWork || workItem?.completedWork || 0,
|
||||||
comment: workItem?.workItem?.description || workItem?.description || "",
|
comment: workItem?.workItem?.description || workItem?.description || "",
|
||||||
});
|
});
|
||||||
}, [workItem?.id, selectedActivity]);
|
}, [workItem?.id,selectedActivity]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const selected = activities?.find((a) => a.id === activityID);
|
const selected = activities?.find((a) => a.id === activityID);
|
||||||
setSelectedActivity(selected || null);
|
setSelectedActivity( selected || null );
|
||||||
}, [activityID, activities]);
|
}, [activityID, activities]);
|
||||||
|
|
||||||
const onSubmitForm = (data) => {
|
const onSubmitForm = (data) =>
|
||||||
const payload = {
|
{
|
||||||
|
const payload = {
|
||||||
...data,
|
...data,
|
||||||
id: workItem?.workItem?.id ?? workItem?.id,
|
id: workItem?.workItem?.id ?? workItem?.id,
|
||||||
buildingID: building?.id,
|
buildingID: building?.id,
|
||||||
@ -122,9 +125,9 @@ const EditActivityModal = ({
|
|||||||
buildingId: building?.id,
|
buildingId: building?.id,
|
||||||
floorId: floor?.id,
|
floorId: floor?.id,
|
||||||
workAreaId: workArea?.id,
|
workAreaId: workArea?.id,
|
||||||
previousCompletedWork: completedTask
|
previousCompletedWork:completedTask
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||||
<div className="text-center mb-1">
|
<div className="text-center mb-1">
|
||||||
@ -159,26 +162,14 @@ const EditActivityModal = ({
|
|||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 text-start">
|
|
||||||
<label className="form-label">Select Service</label>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
value={
|
|
||||||
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
|
|
||||||
}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<label className="form-label">Select Activity</label>
|
<label className="form-label">Select Activity</label>
|
||||||
<select
|
<select
|
||||||
{...register("activityID")}
|
{...register("activityID")}
|
||||||
className="form-select form-select-sm"
|
className="form-select form-select-sm"
|
||||||
disabled
|
|
||||||
>
|
>
|
||||||
<option >Select Activity</option>
|
<option disabled>Select Activity</option>
|
||||||
{loadingActivities ? (
|
{loadingActivities ? (
|
||||||
<option>Loading...</option>
|
<option>Loading...</option>
|
||||||
) : (
|
) : (
|
||||||
@ -273,7 +264,7 @@ const EditActivityModal = ({
|
|||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
>
|
>
|
||||||
{isPending ? "Please Wait..." : "Edit Task"}
|
{isPending ? "Please Wait..." : "Edit Task"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import {
|
|||||||
getCachedData,
|
getCachedData,
|
||||||
} from "../../../slices/apiDataManager";
|
} from "../../../slices/apiDataManager";
|
||||||
|
|
||||||
const InfraTable = ({ buildings, projectId }) => {
|
const InfraTable = ({ buildings, projectId}) => {
|
||||||
const [projectBuilding, setProjectBuilding] = useState([]);
|
const [projectBuilding, setProjectBuilding] = useState([]);
|
||||||
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
||||||
const [showFloorModal, setShowFloorModal] = useState(false);
|
const [showFloorModal, setShowFloorModal] = useState(false);
|
||||||
@ -100,7 +100,7 @@ const InfraTable = ({ buildings, projectId }) => {
|
|||||||
No floors have been added yet. Start by adding floors to manage
|
No floors have been added yet. Start by adding floors to manage
|
||||||
this building.
|
this building.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -143,7 +143,7 @@ const InfraTable = ({ buildings, projectId }) => {
|
|||||||
// }, [handler]);
|
// }, [handler]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-6">
|
<div>
|
||||||
{projectBuilding && projectBuilding.length > 0 && (
|
{projectBuilding && projectBuilding.length > 0 && (
|
||||||
<table className="table table-bordered">
|
<table className="table table-bordered">
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|||||||
@ -3,22 +3,17 @@ import { useForm } from "react-hook-form";
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import {
|
import {
|
||||||
useActivitiesByGroups,
|
|
||||||
useActivitiesMaster,
|
useActivitiesMaster,
|
||||||
useGroups,
|
|
||||||
useWorkCategoriesMaster,
|
useWorkCategoriesMaster,
|
||||||
} from "../../../hooks/masterHook/useMaster";
|
} from "../../../hooks/masterHook/useMaster";
|
||||||
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
|
import { useManageTask } from "../../../hooks/useProjects";
|
||||||
import showToast from "../../../services/toastService";
|
import showToast from "../../../services/toastService";
|
||||||
import Label from "../../common/Label";
|
import Label from "../../common/Label";
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
||||||
|
|
||||||
const taskSchema = z.object({
|
const taskSchema = z.object({
|
||||||
buildingID: z.string().min(1, "Building is required"),
|
buildingID: z.string().min(1, "Building is required"),
|
||||||
floorId: z.string().min(1, "Floor is required"),
|
floorId: z.string().min(1, "Floor is required"),
|
||||||
workAreaId: z.string().min(1, "Work Area is required"),
|
workAreaId: z.string().min(1, "Work Area is required"),
|
||||||
serviceId: z.string().min(1, "Service is required"),
|
|
||||||
activityGroupId: z.string().min(1, "Activity Group is required"),
|
|
||||||
activityID: z.string().min(1, "Activity is required"),
|
activityID: z.string().min(1, "Activity is required"),
|
||||||
workCategoryId: z.string().min(1, "Work Category is required"),
|
workCategoryId: z.string().min(1, "Work Category is required"),
|
||||||
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
|
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
|
||||||
@ -31,8 +26,6 @@ const defaultModel = {
|
|||||||
buildingID: "",
|
buildingID: "",
|
||||||
floorId: "",
|
floorId: "",
|
||||||
workAreaId: "",
|
workAreaId: "",
|
||||||
serviceId: "",
|
|
||||||
activityGroupId: "",
|
|
||||||
activityID: "",
|
activityID: "",
|
||||||
workCategoryId: "",
|
workCategoryId: "",
|
||||||
plannedWork: 0,
|
plannedWork: 0,
|
||||||
@ -41,42 +34,9 @@ const defaultModel = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const TaskModel = ({ project, onSubmit, onClose }) => {
|
const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||||
// const { activities, loading: activityLoading } = useActivitiesMaster();
|
const { activities, loading: activityLoading } = useActivitiesMaster();
|
||||||
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
||||||
|
|
||||||
const projectId = useSelectedProject();
|
|
||||||
|
|
||||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
|
||||||
const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizationsName(projectId);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const [selectedService, setSelectedService] = useState("");
|
|
||||||
const [selectedGroup, setSelectedGroup] = useState("");
|
|
||||||
const { data: groupsResponse, isLoading: groupsLoading } = useGroups(selectedService);
|
|
||||||
const groups = groupsResponse?.data ?? [];
|
|
||||||
|
|
||||||
const { data: activitiesResponse, isLoading: activitiesLoading } = useActivitiesByGroups(selectedGroup);
|
|
||||||
const activities = activitiesResponse?.data ?? [];
|
|
||||||
// Fetch Assigned Organizations (Activity Groups)
|
|
||||||
|
|
||||||
const [selectedOrg, setSelectedOrg] = useState("");
|
|
||||||
const handleServiceChange = (e) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
setSelectedService(value);
|
|
||||||
setSelectedGroup("");
|
|
||||||
setValue("activityGroupId", "");
|
|
||||||
setValue("activityID", "");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGroupChange = (e) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
setSelectedGroup(value);
|
|
||||||
setValue("activityGroupId", value);
|
|
||||||
setValue("activityID", "");
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
@ -112,10 +72,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
const { mutate: CreateTask, isPending } = useManageTask({
|
const { mutate: CreateTask, isPending } = useManageTask({
|
||||||
onSuccessCallback: (response) => {
|
onSuccessCallback: (response) => {
|
||||||
showToast(response?.message, "success");
|
showToast(response?.message, "success");
|
||||||
setValue("activityID",""),
|
onClose?.();
|
||||||
setValue("plannedWork",0),
|
|
||||||
setValue("completedWork",0)
|
|
||||||
setValue("comment","")
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -139,12 +96,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
}, [categories]);
|
}, [categories]);
|
||||||
|
|
||||||
const onSubmitForm = async (data) => {
|
const onSubmitForm = async (data) => {
|
||||||
const payload = [data];
|
const payload = [data];
|
||||||
CreateTask({
|
CreateTask({payload:payload,buildingId: data.buildingID,
|
||||||
payload: payload, buildingId: data.buildingID,
|
|
||||||
floorId: data.floorId,
|
floorId: data.floorId,
|
||||||
workAreaId: data.workAreaId, PreviousPlannedWork: 0, previousCompletedWork: 0
|
workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -195,7 +150,6 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Work Area Selection */}
|
|
||||||
{selectedFloor && (
|
{selectedFloor && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label className="form-label" required>Select Work Area</Label>
|
<Label className="form-label" required>Select Work Area</Label>
|
||||||
@ -218,68 +172,27 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Services Selection */}
|
|
||||||
{selectedWorkArea && (
|
{selectedWorkArea && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label className="form-label" required>Select Service</Label>
|
<Label className="form-label" required>Select Activity</Label>
|
||||||
<select
|
<select
|
||||||
className="form-select form-select-sm"
|
className="form-select form-select-sm"
|
||||||
{...register("serviceId")}
|
{...register("activityID")}
|
||||||
value={selectedService}
|
|
||||||
// onChange={handleServiceChange}
|
|
||||||
onChange={(e) => {
|
|
||||||
handleServiceChange(e);
|
|
||||||
setValue("serviceId", e.target.value);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<option value="">Select Service</option>
|
<option value="">Select Activity</option>
|
||||||
{servicesLoading && <option>Loading...</option>}
|
{activityData.map((a) => (
|
||||||
{assignedServices?.map((service) => (
|
<option key={a.id} value={a.id}>
|
||||||
<option key={service.id} value={service.id}>
|
{a.activityName}
|
||||||
{service.name}
|
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
{errors.activityID && (
|
||||||
|
<p className="danger-text">{errors.activityID.message}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Activity Group (Organization) Selection */}
|
{selectedWorkArea && (
|
||||||
{selectedService && (
|
|
||||||
<div className="col-12 text-start">
|
|
||||||
<Label className="form-label" required>Select Activity Group</Label>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
{...register("activityGroupId")}
|
|
||||||
value={selectedGroup}
|
|
||||||
onChange={handleGroupChange}
|
|
||||||
>
|
|
||||||
<option value="">Select Group</option>
|
|
||||||
{groupsLoading && <option>Loading...</option>}
|
|
||||||
{groups?.map((g) => (
|
|
||||||
<option key={g.id} value={g.id}>{g.name}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
{/* Activity Selection */}
|
|
||||||
{selectedGroup && (
|
|
||||||
<div className="col-12 text-start">
|
|
||||||
<Label className="form-label" required>Select Activity</Label>
|
|
||||||
<select className="form-select form-select-sm" {...register("activityID")}>
|
|
||||||
<option value="">Select Activity</option>
|
|
||||||
{activitiesLoading && <option>Loading...</option>}
|
|
||||||
{activities?.map((a) => (
|
|
||||||
<option key={a.id} value={a.id}>{a.activityName}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{watchActivityId && (
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<label className="form-label">Select Work Category</label>
|
<label className="form-label">Select Work Category</label>
|
||||||
<select
|
<select
|
||||||
@ -348,7 +261,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="col-12 text-end mt-5">
|
<div className="col-12 text-end mt-5">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
@ -359,10 +272,9 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-sm btn-primary"
|
className="btn btn-sm btn-primary"
|
||||||
// disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
disabled={isPending}
|
|
||||||
>
|
>
|
||||||
{isPending ? "Please Wait..." : "Add Task"}
|
{isSubmitting ? "Please Wait..." : "Add Task"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import WorkItem from "./WorkItem";
|
import WorkItem from "./WorkItem";
|
||||||
import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
|
import { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
|
||||||
import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
|
import { cacheData } from "../../../slices/apiDataManager";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
import ProjectRepository from "../../../repositories/ProjectRepository";
|
||||||
@ -14,20 +14,20 @@ import {
|
|||||||
} from "../../../utils/constants";
|
} from "../../../utils/constants";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import ProgressBar from "../../common/ProgressBar";
|
import ProgressBar from "../../common/ProgressBar";
|
||||||
import { formatNumber } from "../../../utils/dateUtils";
|
import {formatNumber} from "../../../utils/dateUtils";
|
||||||
import { useServices } from "../../../hooks/masterHook/useMaster";
|
|
||||||
|
|
||||||
const WorkArea = ({ workArea, floor, forBuilding }) => {
|
const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||||
const selectedProject = useSelectedProject()
|
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||||
const selectedService = useCurrentService()
|
|
||||||
const { projects_Details, loading } = useProjectDetails(selectedProject);
|
const { projects_Details, loading } = useProjectDetails(selectedProject);
|
||||||
const [IsExpandedArea, setIsExpandedArea] = useState(false);
|
const [IsExpandedArea, setIsExpandedArea] = useState(false);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const [Project, setProject] = useState();
|
const [Project, setProject] = useState();
|
||||||
|
// const { projectId } = useParams();
|
||||||
|
|
||||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||||
const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
|
const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
|
||||||
const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, selectedService, IsExpandedArea);
|
|
||||||
|
const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, IsExpandedArea);
|
||||||
|
|
||||||
const [workAreaStatus, setWorkAreaStatus] = useState({
|
const [workAreaStatus, setWorkAreaStatus] = useState({
|
||||||
completed: 0,
|
completed: 0,
|
||||||
@ -82,8 +82,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
|||||||
aria-controls={`collapse-${workArea.id}`}
|
aria-controls={`collapse-${workArea.id}`}
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
className={`bx me-2 toggle-icon ${IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
|
className={`bx me-2 toggle-icon ${
|
||||||
}`}
|
IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
|
||||||
|
}`}
|
||||||
style={{
|
style={{
|
||||||
fontSize: "1.2rem",
|
fontSize: "1.2rem",
|
||||||
color: "black",
|
color: "black",
|
||||||
@ -104,13 +105,13 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-2">
|
<div className="col-2">
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
completedWork={formatNumber(workArea?.completedWork)}
|
completedWork={formatNumber(workArea?.completedWork)}
|
||||||
plannedWork={formatNumber(workArea?.plannedWork)}
|
plannedWork={formatNumber(workArea?.plannedWork)}
|
||||||
className="m-0 my-2 " height="6px"rounded showLabel={true}
|
className="m-0 text-info"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
@ -120,17 +121,16 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
|||||||
className="accordion-collapse collapse"
|
className="accordion-collapse collapse"
|
||||||
aria-labelledby={`heading-${workArea.id}`}
|
aria-labelledby={`heading-${workArea.id}`}
|
||||||
>
|
>
|
||||||
<div className="accordion-body px-6">
|
<div className="accordion-body px-1">
|
||||||
{isLoading || ProjectTaskList === undefined ? (
|
{isLoading || ProjectTaskList === undefined ? (
|
||||||
<div className="text-center py-2 text-muted">Loading activities...</div>
|
<div className="text-center py-2 text-muted">Loading activities...</div>
|
||||||
) : ProjectTaskList?.length === 0 ? (
|
) : ProjectTaskList?.length === 0 ? (
|
||||||
<div className="text-center py-2 text-muted">No activities available for this work area.</div>
|
<div className="text-center py-2 text-muted">No activities available for this work area.</div>
|
||||||
) : ProjectTaskList?.length > 0 ? (
|
):ProjectTaskList?.length > 0 ? (
|
||||||
<table className="table table-sm mx-1">
|
<table className="table table-sm mx-1">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th className="infra-activity-table-header-first">Activity</th>
|
<th className="infra-activity-table-header-first">Activity</th>
|
||||||
<th className="infra-activity-table-header-second">Service</th>
|
|
||||||
<th className="infra-activity-table-header d-sm-table-cell d-md-none">
|
<th className="infra-activity-table-header d-sm-table-cell d-md-none">
|
||||||
Status
|
Status
|
||||||
</th>
|
</th>
|
||||||
@ -152,9 +152,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="table-border-bottom-0">
|
<tbody className="table-border-bottom-0">
|
||||||
{ProjectTaskList.map((workItem, index) => (
|
{ProjectTaskList.map((workItem,index) => (
|
||||||
<WorkItem
|
<WorkItem
|
||||||
key={workItem.workItemId || `fallback-${index}`}
|
key={workItem.workItemId || `fallback-${index}`}
|
||||||
workItem={workItem}
|
workItem={workItem}
|
||||||
forBuilding={forBuilding}
|
forBuilding={forBuilding}
|
||||||
forFloor={floor}
|
forFloor={floor}
|
||||||
|
|||||||
@ -50,8 +50,8 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
: "Work Area created Successfully",
|
: "Work Area created Successfully",
|
||||||
"success"
|
"success"
|
||||||
);
|
);
|
||||||
setValue("id", "0");
|
reset({ id: "0", buildingId: "0", areaName: "", floorId: "0" });
|
||||||
setValue("areaName", "");
|
// onClose?.();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -194,7 +194,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||||
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
|
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -157,17 +157,7 @@ const WorkItem = ({
|
|||||||
: "NA"}
|
: "NA"}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-center d-sm-table-cell ">
|
|
||||||
{hasWorkItem
|
|
||||||
? NewWorkItem?.workItem?.activityMaster?.activityGroupMaster?.service?.name ??
|
|
||||||
workItem?.activityMaster?.activityGroupMaster?.service?.name ??
|
|
||||||
"NA"
|
|
||||||
: "NA"}
|
|
||||||
{" "}
|
|
||||||
{hasWorkItem
|
|
||||||
? NewWorkItem?.workItem?.activityMaster?.activityGroupMaster?.service?.name
|
|
||||||
: "NA"}
|
|
||||||
</td>
|
|
||||||
{/* Status - visible only on small screens */}
|
{/* Status - visible only on small screens */}
|
||||||
<td className="text-center d-sm-table-cell d-md-none">
|
<td className="text-center d-sm-table-cell d-md-none">
|
||||||
{hasWorkItem
|
{hasWorkItem
|
||||||
|
|||||||
@ -77,7 +77,13 @@ const ManageProject = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{isProjectCreated && (
|
||||||
|
<div>
|
||||||
|
<h3>Additional Content</h3>
|
||||||
|
<p>Now that the project is created, you can access this content.</p>
|
||||||
|
{/* Add more content here */}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,24 +1,11 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { projectSchema, projectDefault } from "./ProjectSchema";
|
|
||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import DatePicker from "../common/DatePicker";
|
import DatePicker from "../common/DatePicker";
|
||||||
import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
|
|
||||||
|
|
||||||
import {
|
const currentDate = new Date().toLocaleDateString('en-CA');
|
||||||
DEFAULT_EMPTY_STATUS_ID,
|
|
||||||
ITEMS_PER_PAGE,
|
|
||||||
PROJECT_STATUS,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import {
|
|
||||||
useOrganizationModal,
|
|
||||||
useOrganizationsList,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
import { localToUtc } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
|
||||||
const formatDate = (date) => {
|
const formatDate = (date) => {
|
||||||
if (!date) {
|
if (!date) {
|
||||||
return currentDate;
|
return currentDate;
|
||||||
@ -27,23 +14,54 @@ const formatDate = (date) => {
|
|||||||
if (isNaN(d.getTime())) {
|
if (isNaN(d.getTime())) {
|
||||||
return currentDate;
|
return currentDate;
|
||||||
}
|
}
|
||||||
return d.toLocaleDateString("en-CA");
|
return d.toLocaleDateString('en-CA');
|
||||||
};
|
};
|
||||||
const ManageProjectInfo = ({ project, onClose }) => {
|
const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
|
||||||
|
const [CurrentProject, setCurrentProject] = useState();
|
||||||
const [addressLength, setAddressLength] = useState(0);
|
const [addressLength, setAddressLength] = useState(0);
|
||||||
const maxAddressLength = 500;
|
const maxAddressLength = 500;
|
||||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
|
||||||
|
|
||||||
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
||||||
|
const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||||
|
|
||||||
const { projects_Details, loading } = useProjectDetails(project);
|
const projectSchema = z
|
||||||
const { data, isLoading, isError, error } = useOrganizationsList(
|
.object({
|
||||||
ITEMS_PER_PAGE,
|
...(project?.id ? { id: z.string().optional() } : {}),
|
||||||
1,
|
name: z.string().min(1, { message: "Project Name is required" }),
|
||||||
true
|
shortName: z.string().optional(),
|
||||||
);
|
contactPerson: z
|
||||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
.string()
|
||||||
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
|
.min(1, { message: "Contact Person Name is required" })
|
||||||
|
.regex(/^[A-Za-z\s]+$/, {
|
||||||
|
message: "Contact Person must contain only letters",
|
||||||
|
}),
|
||||||
|
projectAddress: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Address is required" })
|
||||||
|
.max(500, "Address must not exceed 150 characters"),
|
||||||
|
startDate: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Start Date is required" })
|
||||||
|
.default(currentDate),
|
||||||
|
endDate: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "End Date is required" })
|
||||||
|
.default(currentDate),
|
||||||
|
projectStatusId: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Status is required" })
|
||||||
|
})
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
const start = new Date(data.startDate);
|
||||||
|
const end = new Date(data.endDate);
|
||||||
|
return end >= start;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: ["endDate"], // attaches the error to the endDate field
|
||||||
|
message: "End Date must be greater than Start Date",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -54,66 +72,80 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
getValues,
|
getValues,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(projectSchema),
|
resolver: zodResolver(projectSchema),
|
||||||
defaultValues: projectDefault,
|
defaultValues: {
|
||||||
|
id: project?.id || "",
|
||||||
|
name: project?.name || "",
|
||||||
|
shortName: project?.shortName || "",
|
||||||
|
contactPerson: project?.contactPerson || "",
|
||||||
|
projectAddress: project?.projectAddress || "",
|
||||||
|
startDate: formatDate(project?.startDate) || currentDate,
|
||||||
|
endDate: formatDate(project?.endDate) || currentDate,
|
||||||
|
// projectStatusId: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"),
|
||||||
|
projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
|
||||||
|
|
||||||
|
? String(project.projectStatusId)
|
||||||
|
|
||||||
|
: ACTIVE_STATUS_ID,
|
||||||
|
},
|
||||||
mode: "onChange",
|
mode: "onChange",
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (project && projects_Details)
|
setCurrentProject(project);
|
||||||
reset({
|
reset(
|
||||||
name: projects_Details?.name || "",
|
project
|
||||||
shortName: projects_Details?.shortName || "",
|
? {
|
||||||
contactPerson: projects_Details?.contactPerson || "",
|
id: project?.id || "",
|
||||||
projectAddress: projects_Details?.projectAddress || "",
|
name: project?.name || "",
|
||||||
startDate: formatDate(projects_Details?.startDate) || "",
|
shortName: project?.shortName || "",
|
||||||
endDate: formatDate(projects_Details?.endDate) || "",
|
contactPerson: project?.contactPerson || "",
|
||||||
projectStatusId:
|
projectAddress: project?.projectAddress || "",
|
||||||
String(projects_Details?.projectStatus?.id) ||
|
startDate: formatDate(project?.startDate) || "",
|
||||||
DEFAULT_EMPTY_STATUS_IDF,
|
endDate: formatDate(project?.endDate) || "",
|
||||||
promoterId: projects_Details?.promoter?.id || "",
|
projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
|
||||||
pmcId: projects_Details?.pmc?.id || "",
|
}
|
||||||
});
|
: {}
|
||||||
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
);
|
||||||
}, [project, projects_Details, reset,data]);
|
setAddressLength(project?.projectAddress?.length || 0);
|
||||||
|
}, [project, reset]);
|
||||||
|
|
||||||
const onSubmitForm = (formData) => {
|
/**
|
||||||
if (project) {
|
|
||||||
let payload = {
|
* Handles the form submission.
|
||||||
...formData,
|
|
||||||
startDate: localToUtc(formData.startDate),
|
* @param {object} updatedProject - The project data from the form.
|
||||||
endDate: localToUtc(formData.endDate),
|
|
||||||
id: project,
|
*/
|
||||||
};
|
|
||||||
UpdateProject({ projectId: project, payload: payload });
|
const onSubmitForm = (updatedProject) => {
|
||||||
}else{
|
|
||||||
let payload = {
|
handleSubmitForm(updatedProject);
|
||||||
...formData,
|
|
||||||
startDate: localToUtc(formData.startDate),
|
|
||||||
endDate: localToUtc(formData.endDate),
|
|
||||||
};
|
|
||||||
CeateProject(payload)
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
reset(projectDefault);
|
reset({
|
||||||
|
id: project?.id || "",
|
||||||
|
name: project?.name || "",
|
||||||
|
shortName: project?.shortName || "",
|
||||||
|
contactPerson: project?.contactPerson || "",
|
||||||
|
projectAddress: project?.projectAddress || "",
|
||||||
|
startDate: formatDate(project?.startDate) || currentDate,
|
||||||
|
endDate: formatDate(project?.endDate) || currentDate,
|
||||||
|
projectStatusId: String(project?.projectStatus?.id || "00000000-0000-0000-0000-000000000000"),
|
||||||
|
});
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
const handleOrganizaioFinder = () => {
|
|
||||||
onClose();
|
|
||||||
onOpen({ startStep: 2, flowType: "default" });
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="p-sm-2 p-2">
|
<div className="p-sm-2 p-2">
|
||||||
|
|
||||||
<div className="text-center mb-2">
|
<div className="text-center mb-2">
|
||||||
<h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
|
<h5 className="mb-2">
|
||||||
|
{project?.id ? "Edit Project" : "Create Project"}
|
||||||
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
<form
|
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
|
||||||
className="row g-2 text-start"
|
|
||||||
onSubmit={handleSubmit(onSubmitForm)}
|
|
||||||
>
|
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<Label htmlFor="name" required>
|
<Label htmlFor="name" required>
|
||||||
Project Name
|
Project Name
|
||||||
@ -193,10 +225,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.startDate && (
|
{errors.startDate && (
|
||||||
<div
|
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.startDate.message}
|
{errors.startDate.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -211,21 +240,18 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
name="endDate"
|
name="endDate"
|
||||||
control={control}
|
control={control}
|
||||||
placeholder="DD-MM-YYYY"
|
placeholder="DD-MM-YYYY"
|
||||||
minDate={getValues("startDate")} // optional: restrict future dates
|
minDate={getValues("startDate")} // optional: restrict future dates
|
||||||
className="w-100"
|
className="w-100"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.endDate && (
|
{errors.endDate && (
|
||||||
<div
|
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.endDate.message}
|
{errors.endDate.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 ">
|
<div className="col-12 col-md-6">
|
||||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||||
Status
|
Status
|
||||||
</label>
|
</label>
|
||||||
@ -239,11 +265,15 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
valueAsNumber: false,
|
valueAsNumber: false,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{PROJECT_STATUS.map((status) => (
|
{/* <option disabled>Status</option>
|
||||||
<option key={status.id} value={status.id}>
|
<option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
|
||||||
{status.label}
|
<option value={ACTIVE_STATUS_ID}>Active</option>
|
||||||
</option>
|
<option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
|
||||||
))}
|
|
||||||
|
<option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
|
||||||
|
<option value="ef1c356e-0fe0-42df-a5d3-8daee355492d">Inactive</option>
|
||||||
|
|
||||||
|
<option value="33deaef9-9af1-4f2a-b443-681ea0d04f81">Completed</option>
|
||||||
</select>
|
</select>
|
||||||
{errors.projectStatusId && (
|
{errors.projectStatusId && (
|
||||||
<div
|
<div
|
||||||
@ -254,83 +284,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 ">
|
|
||||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
|
||||||
Promoter
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
className="select2 form-select form-select-sm"
|
|
||||||
aria-label="Default select example"
|
|
||||||
{...register("promoterId", {
|
|
||||||
required: "Promoter is required",
|
|
||||||
valueAsNumber: false,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<option>Loading...</option>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<option value="">Select Promoter</option>
|
|
||||||
{data?.data?.map((org) => (
|
|
||||||
<option key={org.id} value={org.id}>
|
|
||||||
{org.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
{errors.promoterId && (
|
|
||||||
<div
|
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.promoterId.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 ">
|
|
||||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
|
||||||
PMC
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
className="select2 form-select form-select-sm"
|
|
||||||
aria-label="Default select example"
|
|
||||||
{...register("pmcId", {
|
|
||||||
required: "Promoter is required",
|
|
||||||
valueAsNumber: false,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<option>Loading...</option>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<option value="">Select PMC</option>
|
|
||||||
{data?.data?.map((org) => (
|
|
||||||
<option key={org.id} value={org.id}>
|
|
||||||
{org.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
{errors.pmcId && (
|
|
||||||
<div
|
|
||||||
className="danger-text text-start"
|
|
||||||
style={{ fontSize: "12px" }}
|
|
||||||
>
|
|
||||||
{errors.pmcId.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
|
||||||
<span>
|
|
||||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
|
||||||
Pomoter, find through SPRID or create new
|
|
||||||
</span>
|
|
||||||
<small className="cursor-pointer" onClick={handleOrganizaioFinder} >
|
|
||||||
<i className="bx bx-plus-circle text-primary"></i>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<Label htmlFor="projectAddress" required>
|
<Label htmlFor="projectAddress" required>
|
||||||
@ -348,7 +301,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-end" style={{ fontSize: "12px" }}>
|
<div className="text-end" style={{ fontSize: "12px" }}>
|
||||||
{maxAddressLength - addressLength} characters left
|
{maxAddressLength - addressLength} characters left
|
||||||
</div>
|
</div>
|
||||||
@ -367,21 +319,22 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
className="btn btn-label-secondary btn-sm me-2"
|
className="btn btn-label-secondary btn-sm me-2"
|
||||||
onClick={handleCancel}
|
onClick={handleCancel}
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
disabled={isPending || isCreating || loading}
|
disabled={isPending}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary btn-sm"
|
className="btn btn-primary btn-sm"
|
||||||
disabled={isPending || isCreating || loading}
|
disabled={isPending}
|
||||||
>
|
>
|
||||||
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
{isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ManageProjectInfo;
|
export default ManageProjectInfo;
|
||||||
211
src/components/Project/MapUsers.jsx
Normal file
211
src/components/Project/MapUsers.jsx
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||||
|
import { useAllEmployees } from "../../hooks/useEmployees";
|
||||||
|
import useSearch from "../../hooks/useSearch";
|
||||||
|
import AssignEmployeeTable from "./AssignEmployeeTable";
|
||||||
|
import showToast from "../../services/toastService";
|
||||||
|
import "./MapUser.css";
|
||||||
|
|
||||||
|
const MapUsers = ({
|
||||||
|
projectId,
|
||||||
|
onClose,
|
||||||
|
empJobRoles,
|
||||||
|
onSubmit,
|
||||||
|
allocation,
|
||||||
|
assignedLoading,
|
||||||
|
setAssignedLoading,
|
||||||
|
}) => {
|
||||||
|
const {
|
||||||
|
employeesList,
|
||||||
|
loading: employeeLoading,
|
||||||
|
error,
|
||||||
|
} = useAllEmployees(false);
|
||||||
|
const [selectedEmployees, setSelectedEmployees] = useState([]);
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
|
||||||
|
const handleAllocationData = Array.isArray(allocation) ? allocation : [];
|
||||||
|
|
||||||
|
const allocationEmployees = employeesList.map((employee) => {
|
||||||
|
const allocationItem = handleAllocationData.find(
|
||||||
|
(alloc) => alloc.employeeId === employee.id
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
...employee,
|
||||||
|
isActive: allocationItem ? allocationItem.isActive : false,
|
||||||
|
jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
function parseDate(dateStr) {
|
||||||
|
return new Date(dateStr.split(".")[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
|
||||||
|
const existingAlloc = acc[alloc.employeeId];
|
||||||
|
|
||||||
|
if (!existingAlloc) {
|
||||||
|
acc[alloc.employeeId] = alloc;
|
||||||
|
} else {
|
||||||
|
const existingDate = parseDate(
|
||||||
|
existingAlloc.reAllocationDate || existingAlloc.allocationDate
|
||||||
|
);
|
||||||
|
const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);
|
||||||
|
|
||||||
|
if (newDate > existingDate) {
|
||||||
|
acc[alloc.employeeId] = alloc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
const allocationEmployeesData = employeesList
|
||||||
|
.map((employee) => {
|
||||||
|
const allocationItem = latestAllocations[employee.id];
|
||||||
|
return {
|
||||||
|
...employee,
|
||||||
|
isActive: allocationItem ? allocationItem.isActive : false,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter((employee) => employee.isActive === false);
|
||||||
|
|
||||||
|
const { filteredData, setSearchQuery } = useSearch(
|
||||||
|
allocationEmployeesData,
|
||||||
|
searchText
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleRoleChange = (employeeId, newRoleId) => {
|
||||||
|
setSelectedEmployees((prevSelectedEmployees) =>
|
||||||
|
prevSelectedEmployees.map((emp) =>
|
||||||
|
emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCheckboxChange = (employeeId) => {
|
||||||
|
setSelectedEmployees((prevSelectedEmployees) => {
|
||||||
|
const updatedEmployees = [...prevSelectedEmployees];
|
||||||
|
const employeeIndex = updatedEmployees.findIndex(
|
||||||
|
(emp) => emp.id === employeeId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (employeeIndex !== -1) {
|
||||||
|
const isSelected = !updatedEmployees[employeeIndex].isSelected;
|
||||||
|
updatedEmployees[employeeIndex].isSelected = isSelected;
|
||||||
|
} else {
|
||||||
|
updatedEmployees.push({
|
||||||
|
id: employeeId,
|
||||||
|
isSelected: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return updatedEmployees;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
setAssignedLoading(true);
|
||||||
|
const selected = selectedEmployees
|
||||||
|
.filter((emp) => emp.isSelected)
|
||||||
|
.map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
|
||||||
|
if (selected.length > 0) {
|
||||||
|
onSubmit(selected);
|
||||||
|
setSelectedEmployees([]);
|
||||||
|
} else {
|
||||||
|
showToast("Please select Employee", "error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header text-center">
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="m-0 fw-semibold fs-5">Assign Employee</p>
|
||||||
|
|
||||||
|
<div className="px-4 mt-4 col-md-4 text-start">
|
||||||
|
{(filteredData.length > 0 ||
|
||||||
|
allocationEmployeesData.length > 0) && (
|
||||||
|
<div className="input-group input-group-sm mb-2">
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Search employees..."
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<p className="mb-0 small text-muted fw-semibold">Select Employee</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-body p-sm-4 p-0">
|
||||||
|
<table
|
||||||
|
className="datatables-users table border-top dataTable no-footer dtr-column "
|
||||||
|
id="DataTables_Table_0"
|
||||||
|
aria-describedby="DataTables_Table_0_info"
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
>
|
||||||
|
<tbody>
|
||||||
|
{employeeLoading && allocationEmployeesData.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td>Loading..</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!employeeLoading &&
|
||||||
|
allocationEmployeesData.length === 0 &&
|
||||||
|
filteredData.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td>All employee assigned to Project.</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!employeeLoading &&
|
||||||
|
allocationEmployeesData.length > 0 &&
|
||||||
|
filteredData.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td>No matching employees found.</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(filteredData.length > 0 ||
|
||||||
|
allocationEmployeesData.length > 0) &&
|
||||||
|
filteredData.map((emp) => (
|
||||||
|
<AssignEmployeeTable
|
||||||
|
key={emp.id}
|
||||||
|
employee={emp}
|
||||||
|
jobRoles={empJobRoles}
|
||||||
|
isChecked={emp.isSelected}
|
||||||
|
onRoleChange={handleRoleChange}
|
||||||
|
onCheckboxChange={handleCheckboxChange}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer mt-5 d-flex justify-content-end gap-0">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-label-secondary"
|
||||||
|
data-dismiss="modal"
|
||||||
|
aria-label="Close"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
|
||||||
|
<button className="btn btn-sm btn-primary" onClick={handleSubmit}>
|
||||||
|
{assignedLoading ? "Please Wait..." : "Assign to Project"}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MapUsers;
|
||||||
@ -14,15 +14,41 @@ import {
|
|||||||
getProjectStatusName,
|
getProjectStatusName,
|
||||||
} from "../../utils/projectStatus";
|
} from "../../utils/projectStatus";
|
||||||
import GlobalModel from "../common/GlobalModel";
|
import GlobalModel from "../common/GlobalModel";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
import { useProjectContext } from "../../pages/project/ProjectPage";
|
|
||||||
|
|
||||||
const ProjectCard = ({ project }) => {
|
const ProjectCard = ({ projectData, recall }) => {
|
||||||
const dispatch = useDispatch();
|
const [ projectInfo, setProjectInfo ] = useState( projectData );
|
||||||
|
const { projects_Details, loading, error, refetch } = useProjectDetails(
|
||||||
|
projectInfo?.id,false
|
||||||
|
);
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const dispatch = useDispatch()
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||||
const { setMangeProject } = useProjectContext();
|
const {
|
||||||
|
mutate: updateProject,
|
||||||
|
isPending,
|
||||||
|
isSuccess,
|
||||||
|
isError,
|
||||||
|
} = useUpdateProject({
|
||||||
|
onSuccessCallback: () => {
|
||||||
|
setShowModal(false);
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
setProjectInfo(projectData);
|
||||||
|
}, [ projectData ] )
|
||||||
|
|
||||||
|
const handleShow = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await refetch();
|
||||||
|
setShowModal(true);
|
||||||
|
} catch (err) {
|
||||||
|
showToast("Failed to load project details", "error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const getProgress = (planned, completed) => {
|
const getProgress = (planned, completed) => {
|
||||||
return (completed * 100) / planned + "%";
|
return (completed * 100) / planned + "%";
|
||||||
@ -34,17 +60,35 @@ const ProjectCard = ({ project }) => {
|
|||||||
const handleClose = () => setShowModal(false);
|
const handleClose = () => setShowModal(false);
|
||||||
|
|
||||||
const handleViewProject = () => {
|
const handleViewProject = () => {
|
||||||
dispatch(setProjectId(project.id));
|
dispatch(setProjectId(projectInfo.id))
|
||||||
navigate(`/projects/details`);
|
navigate(`/projects/details`);
|
||||||
};
|
};
|
||||||
const handleViewActivities = () => {
|
|
||||||
dispatch(setProjectId(project.id));
|
const handleFormSubmit = (updatedProject) => {
|
||||||
navigate(`/activities/records?project=${project.id}`);
|
if (projectInfo?.id) {
|
||||||
};
|
updateProject({
|
||||||
|
projectId: projectInfo.id,
|
||||||
|
updatedData: updatedProject,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
||||||
|
{showModal && projects_Details && (
|
||||||
|
<GlobalModel isOpen={showModal} closeModal={handleClose}>
|
||||||
|
<ManageProjectInfo
|
||||||
|
project={projects_Details}
|
||||||
|
handleSubmitForm={handleFormSubmit}
|
||||||
|
onClose={handleClose}
|
||||||
|
isPending={isPending}
|
||||||
|
/>
|
||||||
|
</GlobalModel>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
||||||
<div className={`card cursor-pointer`}>
|
<div className={`card cursor-pointer ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
|
||||||
<div className="card-header pb-4">
|
<div className="card-header pb-4">
|
||||||
<div className="d-flex align-items-start">
|
<div className="d-flex align-items-start">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
@ -58,11 +102,13 @@ const ProjectCard = ({ project }) => {
|
|||||||
<h5
|
<h5
|
||||||
className="mb-0 stretched-link text-heading text-start"
|
className="mb-0 stretched-link text-heading text-start"
|
||||||
onClick={handleViewProject}
|
onClick={handleViewProject}
|
||||||
>
|
>
|
||||||
{project?.shortName ? project?.shortName : project?.name}
|
{projectInfo.shortName
|
||||||
|
? projectInfo.shortName
|
||||||
|
: projectInfo.name}
|
||||||
</h5>
|
</h5>
|
||||||
<div className="client-info text-body">
|
<div className="client-info text-body">
|
||||||
<span>{project?.shortName ? project?.name : ""}</span>
|
<span>{projectInfo.shortName ? projectInfo.name : ""}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -74,14 +120,23 @@ const ProjectCard = ({ project }) => {
|
|||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
>
|
>
|
||||||
<i
|
{loading ? (
|
||||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
<div
|
||||||
data-bs-toggle="tooltip"
|
className="spinner-border spinner-border-sm text-secondary"
|
||||||
data-bs-offset="0,8"
|
role="status"
|
||||||
data-bs-placement="top"
|
>
|
||||||
data-bs-custom-class="tooltip-dark"
|
<span className="visually-hidden">Loading...</span>
|
||||||
title="More Action"
|
</div>
|
||||||
></i>
|
) : (
|
||||||
|
<i
|
||||||
|
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-offset="0,8"
|
||||||
|
data-bs-placement="top"
|
||||||
|
data-bs-custom-class="tooltip-dark"
|
||||||
|
title="More Action"
|
||||||
|
></i>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
<ul className="dropdown-menu dropdown-menu-end">
|
<ul className="dropdown-menu dropdown-menu-end">
|
||||||
<li>
|
<li>
|
||||||
@ -95,18 +150,19 @@ const ProjectCard = ({ project }) => {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li onClick={handleShow}>
|
||||||
<a className="dropdown-item" onClick={() =>
|
<a className="dropdown-item">
|
||||||
setMangeProject({
|
|
||||||
isOpen: true,
|
|
||||||
Project: project.id,
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<i className="bx bx-pencil me-2"></i>
|
<i className="bx bx-pencil me-2"></i>
|
||||||
<span className="align-left">Modify</span>
|
<span className="align-left">Modify</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li onClick={handleViewActivities}>
|
<li
|
||||||
|
onClick={() =>
|
||||||
|
navigate(
|
||||||
|
`/activities/records?project=${projectInfo.id}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
<a className="dropdown-item">
|
<a className="dropdown-item">
|
||||||
<i className="bx bx-task me-2"></i>
|
<i className="bx bx-task me-2"></i>
|
||||||
<span className="align-left">Activities</span>
|
<span className="align-left">Activities</span>
|
||||||
@ -124,22 +180,22 @@ const ProjectCard = ({ project }) => {
|
|||||||
<span className="text-heading fw-medium">
|
<span className="text-heading fw-medium">
|
||||||
Contact Person:{" "}
|
Contact Person:{" "}
|
||||||
</span>
|
</span>
|
||||||
{project?.contactPerson ? project.contactPerson : "NA"}
|
{projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-1">
|
<p className="mb-1">
|
||||||
<span className="text-heading fw-medium">Start Date: </span>
|
<span className="text-heading fw-medium">Start Date: </span>
|
||||||
{project.startDate
|
{projectInfo.startDate
|
||||||
? moment(project?.startDate).format("DD-MMM-YYYY")
|
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
||||||
: "NA"}
|
: "NA"}
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-1">
|
<p className="mb-1">
|
||||||
<span className="text-heading fw-medium">Deadline: </span>
|
<span className="text-heading fw-medium">Deadline: </span>
|
||||||
|
|
||||||
{project?.endDate
|
{projectInfo.endDate
|
||||||
? moment(project?.endDate).format("DD-MMM-YYYY")
|
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
||||||
: "NA"}
|
: "NA"}
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-0">{project?.projectAddress}</p>
|
<p className="mb-0">{projectInfo.projectAddress}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -149,37 +205,36 @@ const ProjectCard = ({ project }) => {
|
|||||||
<span
|
<span
|
||||||
className={
|
className={
|
||||||
`badge rounded-pill ` +
|
`badge rounded-pill ` +
|
||||||
getProjectStatusColor(project?.projectStatusId)
|
getProjectStatusColor(projectInfo.projectStatusId)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{getProjectStatusName(project?.projectStatusId)}
|
{getProjectStatusName(projectInfo.projectStatusId)}
|
||||||
</span>
|
</span>
|
||||||
</p>{" "}
|
</p>{" "}
|
||||||
{getDateDifferenceInDays(project?.endDate,new Date() ) >= 0 && (
|
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
|
||||||
<span className="badge bg-label-success ms-auto">
|
<span className="badge bg-label-success ms-auto">
|
||||||
{project?.endDate &&
|
{projectInfo.endDate &&
|
||||||
getDateDifferenceInDays(project?.endDate, new Date())}{" "}
|
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||||
Days left
|
Days left
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{getDateDifferenceInDays(project?.endDate, new Date()) < 0 && (
|
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
|
||||||
<span className="badge bg-label-danger ms-auto">
|
<span className="badge bg-label-danger ms-auto">
|
||||||
{project?.endDate &&
|
{projectInfo.endDate &&
|
||||||
getDateDifferenceInDays(project?.endDate, new Date())}{" "}
|
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||||
Days overdue
|
Days overdue
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||||
<small className="text-body">
|
<small className="text-body">
|
||||||
Task: {formatNumber(project?.completedWork)} /{" "}
|
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
||||||
{formatNumber(project?.plannedWork)}
|
|
||||||
</small>
|
</small>
|
||||||
<small className="text-body">
|
<small className="text-body">
|
||||||
{Math.floor(
|
{Math.floor(
|
||||||
getProgressInNumber(
|
getProgressInNumber(
|
||||||
project?.plannedWork,
|
projectInfo.plannedWork,
|
||||||
project?.completedWork
|
projectInfo.completedWork
|
||||||
)
|
)
|
||||||
) || 0}{" "}
|
) || 0}{" "}
|
||||||
% Completed
|
% Completed
|
||||||
@ -191,20 +246,22 @@ const ProjectCard = ({ project }) => {
|
|||||||
role="progressbar"
|
role="progressbar"
|
||||||
style={{
|
style={{
|
||||||
width: getProgress(
|
width: getProgress(
|
||||||
project?.plannedWork,
|
projectInfo.plannedWork,
|
||||||
project?.completedWork
|
projectInfo.completedWork
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
aria-valuenow={project?.completedWork}
|
aria-valuenow={projectInfo.completedWork}
|
||||||
aria-valuemin="0"
|
aria-valuemin="0"
|
||||||
aria-valuemax={project?.plannedWork}
|
aria-valuemax={projectInfo.plannedWork}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex align-items-center justify-content-between">
|
<div className="d-flex align-items-center justify-content-between">
|
||||||
|
{/* <div className="d-flex align-items-center ">
|
||||||
|
</div> */}
|
||||||
<div>
|
<div>
|
||||||
<a className="text-muted d-flex " alt="Active team size">
|
<a className="text-muted d-flex " alt="Active team size">
|
||||||
<i className="bx bx-group bx-sm me-1_5"></i>
|
<i className="bx bx-group bx-sm me-1_5"></i>
|
||||||
{project?.teamSize} Members
|
{projectInfo?.teamSize} Members
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -221,4 +278,4 @@ const ProjectCard = ({ project }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ProjectCard;
|
export default ProjectCard;
|
||||||
@ -1,70 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { useProjects } from '../../hooks/useProjects'
|
|
||||||
import Loader from '../common/Loader'
|
|
||||||
import ProjectCard from './ProjectCard'
|
|
||||||
|
|
||||||
const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="row page-min-h">
|
|
||||||
|
|
||||||
{ currentItems.length === 0 && (
|
|
||||||
<p className="text-center text-muted">No projects found.</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentItems.map((project) => (
|
|
||||||
<ProjectCard
|
|
||||||
key={project.id}
|
|
||||||
project={project}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
|
|
||||||
|
|
||||||
{ totalPages > 1 && (
|
|
||||||
<nav>
|
|
||||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
|
||||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
|
||||||
>
|
|
||||||
«
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{[...Array(totalPages)].map((_, i) => (
|
|
||||||
<li
|
|
||||||
key={i}
|
|
||||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage(i + 1)}
|
|
||||||
>
|
|
||||||
{i + 1}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
<li
|
|
||||||
className={`page-item ${currentPage === totalPages && "disabled"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() =>
|
|
||||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProjectCardView
|
|
||||||
@ -17,173 +17,113 @@ import {
|
|||||||
getCachedData,
|
getCachedData,
|
||||||
useSelectedProject,
|
useSelectedProject,
|
||||||
} from "../../slices/apiDataManager";
|
} from "../../slices/apiDataManager";
|
||||||
import {
|
import { useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
|
||||||
useCurrentService,
|
|
||||||
useProjectAssignedServices,
|
|
||||||
useProjectDetails,
|
|
||||||
useProjectInfra,
|
|
||||||
} from "../../hooks/useProjects";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { refreshData } from "../../slices/localVariablesSlice";
|
import { refreshData } from "../../slices/localVariablesSlice";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { useParams } from "react-router-dom";
|
import {useParams} from "react-router-dom";
|
||||||
import GlobalModel from "../common/GlobalModel";
|
import GlobalModel from "../common/GlobalModel";
|
||||||
import { setService } from "../../slices/globalVariablesSlice";
|
|
||||||
|
|
||||||
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
|
||||||
|
{
|
||||||
|
// const projectId = useSelector((store)=>store.localVariables.projectId)
|
||||||
const projectId = useSelectedProject();
|
const projectId = useSelectedProject();
|
||||||
const selectedService = useCurrentService();
|
|
||||||
const reloadedData = useSelector((store) => store.localVariables.reload);
|
const reloadedData = useSelector((store) => store.localVariables.reload);
|
||||||
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
|
||||||
const { projectInfra, isLoading, error } = useProjectInfra(
|
const {projectInfra,isLoading,error} = useProjectInfra(projectId)
|
||||||
projectId,
|
|
||||||
selectedService
|
|
||||||
);
|
|
||||||
const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
|
const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
|
||||||
const [project, setProject] = useState(projects_Details);
|
const [ project, setProject ] = useState( projects_Details );
|
||||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||||
const ManageTask = useHasUserPermission(MANAGE_TASK);
|
const ManageTask = useHasUserPermission(MANAGE_TASK)
|
||||||
const [showModalFloor, setshowModalFloor] = useState(false);
|
const [showModalFloor, setshowModalFloor] = useState(false);
|
||||||
const [showModalWorkArea, setshowModalWorkArea] = useState(false);
|
const [showModalWorkArea, setshowModalWorkArea] = useState(false);
|
||||||
const [showModalTask, setshowModalTask] = useState(false);
|
const [showModalTask, setshowModalTask] = useState(false);
|
||||||
const [showModalBuilding, setshowModalBuilding] = useState(false);
|
const [showModalBuilding, setshowModalBuilding] = useState(false);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { data: assignedServices, isLoading: servicesLoading } =
|
|
||||||
useProjectAssignedServices(projectId);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setProject(projectInfra);
|
setProject(projectInfra);
|
||||||
}, [data, projects_Details]);
|
}, [data, projects_Details]);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (reloadedData) {
|
||||||
|
// refetch();
|
||||||
|
// dispatch(refreshData(false));
|
||||||
|
// }
|
||||||
|
// }, [reloadedData]);
|
||||||
|
|
||||||
const signalRHandler = (response) => {
|
const signalRHandler = (response) => {
|
||||||
setProject(response);
|
setProject(response);
|
||||||
};
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{showModalBuilding && (
|
{showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding( false )}>
|
||||||
<GlobalModel
|
<BuildingModel
|
||||||
isOpen={showModalBuilding}
|
project={projectInfra}
|
||||||
size="md"
|
onClose={() => setshowModalBuilding( false )}
|
||||||
closeModal={() => setshowModalBuilding(false)}
|
/>
|
||||||
>
|
</GlobalModel>}
|
||||||
<BuildingModel
|
{showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={()=>setshowModalFloor(false)}>
|
||||||
|
<FloorModel
|
||||||
project={projectInfra}
|
project={projectInfra}
|
||||||
onClose={() => setshowModalBuilding(false)}
|
onClose={()=>setshowModalFloor(false)}
|
||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>}
|
||||||
)}
|
{showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={()=>setshowModalWorkArea(false)} >
|
||||||
{showModalFloor && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen={showModalFloor}
|
|
||||||
size="md"
|
|
||||||
closeModal={() => setshowModalFloor(false)}
|
|
||||||
>
|
|
||||||
<FloorModel
|
|
||||||
project={projectInfra}
|
|
||||||
onClose={() => setshowModalFloor(false)}
|
|
||||||
/>
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
{showModalWorkArea && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen={showModalWorkArea}
|
|
||||||
size="lg"
|
|
||||||
closeModal={() => setshowModalWorkArea(false)}
|
|
||||||
>
|
|
||||||
<WorkAreaModel
|
<WorkAreaModel
|
||||||
project={projectInfra}
|
project={projectInfra}
|
||||||
onClose={() => setshowModalWorkArea(false)}
|
onClose={()=>setshowModalWorkArea(false)}
|
||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>}
|
||||||
)}
|
{showModalTask && ( <GlobalModel isOpen={showModalTask} size="lg" closeModal={()=>setshowModalTask(false)}>
|
||||||
{showModalTask && (
|
<TaskModel
|
||||||
<GlobalModel
|
|
||||||
isOpen={showModalTask}
|
|
||||||
size="lg"
|
|
||||||
closeModal={() => setshowModalTask(false)}
|
|
||||||
>
|
|
||||||
<TaskModel
|
|
||||||
project={projectInfra}
|
project={projectInfra}
|
||||||
onClose={() => setshowModalTask(false)}
|
onClose={()=>setshowModalTask(false)}
|
||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>)}
|
||||||
)}
|
|
||||||
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||||
<div className="align-items-center">
|
<div className="align-items-center">
|
||||||
<div className="row ">
|
<div className="row ">
|
||||||
<div
|
<div
|
||||||
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
|
className={`col-12 text-end mb-1 `}
|
||||||
id="DataTables_Table_0_length"
|
|
||||||
>
|
>
|
||||||
{!servicesLoading &&
|
{ManageInfra && (<>
|
||||||
assignedServices?.length > 0 &&
|
|
||||||
(assignedServices.length > 1 ? (
|
|
||||||
<label>
|
|
||||||
<select
|
|
||||||
name="DataTables_Table_0_length"
|
|
||||||
aria-controls="DataTables_Table_0"
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
aria-label="Select Service"
|
|
||||||
value={selectedService}
|
|
||||||
onChange={(e) => dispatch(setService(e.target.value))}
|
|
||||||
>
|
|
||||||
<option value="">All Services</option>
|
|
||||||
{assignedServices.map((service) => (
|
|
||||||
<option key={service.id} value={service.id}>
|
|
||||||
{service.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
) : (
|
|
||||||
<h5>{assignedServices[0].name}</h5>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Buttons Section (aligned to right) */}
|
|
||||||
<div className="col-md-8 col-12 text-end mb-1">
|
|
||||||
{ManageInfra && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
|
|
||||||
onClick={() => setshowModalBuilding(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
|
||||||
Manage Building
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
|
||||||
onClick={() => setshowModalFloor(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
|
||||||
Manage Floors
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
|
||||||
onClick={() => setshowModalWorkArea(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
|
||||||
Manage Work Areas
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(ManageTask || ManageInfra) && (
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
|
||||||
onClick={() => setshowModalTask(true)}
|
onClick={()=>setshowModalBuilding(true)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
Create Tasks
|
Manage Building
|
||||||
</button>
|
</button>
|
||||||
)}
|
<button
|
||||||
|
type="button"
|
||||||
|
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
||||||
|
onClick={()=>setshowModalFloor(true)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Manage Floors
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
||||||
|
onClick={() => setshowModalWorkArea(true)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Manage Work Areas
|
||||||
|
</button></>)}
|
||||||
|
|
||||||
|
{(ManageTask || ManageInfra) && (<button
|
||||||
|
type="button"
|
||||||
|
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
||||||
|
onClick={()=>setshowModalTask(true)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Create Tasks
|
||||||
|
</button>)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row ">
|
<div className="row ">
|
||||||
@ -192,14 +132,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
|||||||
<InfraTable
|
<InfraTable
|
||||||
buildings={projectInfra}
|
buildings={projectInfra}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
serviceId={selectedService}
|
// handleFloor={submitData}
|
||||||
|
// signalRHandler ={signalRHandler}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{!isLoading && projectInfra?.length == 0 && (
|
{!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
|
||||||
<div className="mt-5">
|
|
||||||
<p>No Infra Avaiable</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,285 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
|
|
||||||
import { useProjects } from "../../hooks/useProjects";
|
|
||||||
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import ProgressBar from "../common/ProgressBar";
|
|
||||||
import {
|
|
||||||
getProjectStatusColor,
|
|
||||||
getProjectStatusName,
|
|
||||||
} from "../../utils/projectStatus";
|
|
||||||
import { useDispatch } from "react-redux";
|
|
||||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import { useProjectContext } from "../../pages/project/ProjectPage";
|
|
||||||
import usePagination from "../../hooks/usePagination";
|
|
||||||
|
|
||||||
const ProjectListView = ({
|
|
||||||
currentItems,
|
|
||||||
selectedStatuses,
|
|
||||||
handleStatusChange,
|
|
||||||
setCurrentPage,
|
|
||||||
totalPages,
|
|
||||||
isLoading,
|
|
||||||
}) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { setMangeProject } = useProjectContext();
|
|
||||||
// const { data, isLoading, isError, error } = useProjects();
|
|
||||||
|
|
||||||
// check Permissions
|
|
||||||
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
|
||||||
|
|
||||||
const projectColumns = [
|
|
||||||
{
|
|
||||||
key: "projectName",
|
|
||||||
label: "Project Name",
|
|
||||||
className: "text-start py-3",
|
|
||||||
getValue: (p) => (
|
|
||||||
<div
|
|
||||||
className="text-primary cursor-pointer fw-bold py-3"
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(setProjectId(p.id));
|
|
||||||
navigate(`/projects/details`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "contactPerson",
|
|
||||||
label: "Contact Person",
|
|
||||||
className: "text-start small",
|
|
||||||
getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "startDate",
|
|
||||||
label: "Start Date",
|
|
||||||
className: "text-center small",
|
|
||||||
getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "deadline",
|
|
||||||
label: "Deadline",
|
|
||||||
className: "text-center small",
|
|
||||||
getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "task",
|
|
||||||
label: "Task",
|
|
||||||
colSpan: 2,
|
|
||||||
className: "text-center small",
|
|
||||||
getValue: (p) => formatNumber(p?.plannedWork) || "0",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "progress",
|
|
||||||
label: "Progress",
|
|
||||||
className: "text-start small",
|
|
||||||
|
|
||||||
getValue: (p) => (
|
|
||||||
<ProgressBar
|
|
||||||
plannedWork={p.plannedWork}
|
|
||||||
completedWork={p.completedWork}
|
|
||||||
className="mb-0"
|
|
||||||
height="6px"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "status",
|
|
||||||
label: "Status",
|
|
||||||
className: "text-center small",
|
|
||||||
isFilter: true,
|
|
||||||
customRender: (_, selectedStatuses, handleStatusChange) => (
|
|
||||||
<div className="dropdown">
|
|
||||||
<a
|
|
||||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
Status <i className="bx bx-filter bx-sm"></i>
|
|
||||||
</a>
|
|
||||||
<ul className="dropdown-menu p-2 text-capitalize">
|
|
||||||
{PROJECT_STATUS.map(({ id, label }) => (
|
|
||||||
<li key={id}>
|
|
||||||
<div className="form-check">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedStatuses.includes(id)}
|
|
||||||
onChange={() => handleStatusChange(id)}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label">{label}</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
getValue: (p) => (
|
|
||||||
<span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
|
|
||||||
{getProjectStatusName(p.projectStatusId)}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleViewActivities = (project) => {
|
|
||||||
dispatch(setProjectId(project));
|
|
||||||
navigate(`/activities/records?project=${project}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="table-responsive text-nowrap page-min-h"
|
|
||||||
>
|
|
||||||
<table className="table table-hover align-middle m-0">
|
|
||||||
<thead className="border-bottom ">
|
|
||||||
<tr>
|
|
||||||
{projectColumns.map((col) => (
|
|
||||||
<th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
|
|
||||||
{col.label}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
<th className="text-center py-3">Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{currentItems?.map((project) => (
|
|
||||||
<tr key={project.id}>
|
|
||||||
{projectColumns.map((col) => (
|
|
||||||
<td
|
|
||||||
key={col.key}
|
|
||||||
colSpan={col.colSpan}
|
|
||||||
className={`${col.className} py-5`}
|
|
||||||
style={{ paddingTop: "20px", paddingBottom: "20px" }}
|
|
||||||
>
|
|
||||||
{col.getValue
|
|
||||||
? col.getValue(project)
|
|
||||||
: project[col.key] || "N/A"}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
<td
|
|
||||||
className={`mx-2 ${
|
|
||||||
canManageProject ? "d-sm-table-cell" : "d-none"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="dropdown z-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-offset="0,8"
|
|
||||||
data-bs-placement="top"
|
|
||||||
data-bs-custom-class="tooltip-dark"
|
|
||||||
title="More Action"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
<ul className="dropdown-menu dropdown-menu-end">
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
aria-label="click to View details"
|
|
||||||
className="dropdown-item cursor-pointer"
|
|
||||||
>
|
|
||||||
<i className="bx bx-detail me-2"></i>
|
|
||||||
<span className="align-left">View details</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className="dropdown-item cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setMangeProject({
|
|
||||||
isOpen: true,
|
|
||||||
Project: project.id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<i className="bx bx-pencil me-2"></i>
|
|
||||||
<span className="align-left">Modify</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li onClick={() => handleViewActivities(project.id)}>
|
|
||||||
<a className="dropdown-item cursor-pointer">
|
|
||||||
<i className="bx bx-task me-2"></i>
|
|
||||||
<span className="align-left">Activities</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isLoading && (
|
|
||||||
<div className="py-4">
|
|
||||||
{" "}
|
|
||||||
{isLoading && <p className="text-center">Loading...</p>}
|
|
||||||
{!isLoading && filteredProjects.length === 0 && (
|
|
||||||
<p className="text-center text-muted">No projects found.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isLoading && currentItems.length === 0 && (
|
|
||||||
<div className="py-6">
|
|
||||||
<p className="text-center text-muted">No projects found.</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isLoading && totalPages > 1 && (
|
|
||||||
<nav>
|
|
||||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
|
||||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
|
||||||
>
|
|
||||||
«
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{[...Array(totalPages)].map((_, i) => (
|
|
||||||
<li
|
|
||||||
key={i}
|
|
||||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage(i + 1)}
|
|
||||||
>
|
|
||||||
{i + 1}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
<li
|
|
||||||
className={`page-item ${
|
|
||||||
currentPage === totalPages && "disabled"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() =>
|
|
||||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProjectListView;
|
|
||||||
@ -1,35 +1,36 @@
|
|||||||
import React from "react";
|
import React from 'react'
|
||||||
import AssignRole from "./AssignTask";
|
import AssignRole from './AssignTask'
|
||||||
|
|
||||||
const ProjectModal = ({ modalConfig, closeModal }) => {
|
const ProjectModal = ({modalConfig,closeModal}) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal fade"
|
className="modal fade"
|
||||||
id="project-modal"
|
id="project-modal"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
>
|
>
|
||||||
<div className="modal-dialog modal-lg modal-simple">
|
<div className="modal-dialog modal-lg modal-simple">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn-close"
|
className="btn-close"
|
||||||
data-bs-dismiss="modal"
|
data-bs-dismiss="modal"
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
onClick={closeModal}
|
onClick={closeModal}
|
||||||
></button>
|
></button>
|
||||||
<div className="text-center mb-2"></div>
|
<div className="text-center mb-2"></div>
|
||||||
|
|
||||||
|
|
||||||
|
{modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
{modalConfig?.type === "assignRole" && (
|
export default ProjectModal
|
||||||
<AssignRole assignData={modalConfig?.data} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProjectModal;
|
|
||||||
@ -1,4 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { hasUserPermission } from "../../utils/authUtils";
|
||||||
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
import {
|
import {
|
||||||
DIRECTORY_ADMIN,
|
DIRECTORY_ADMIN,
|
||||||
DIRECTORY_MANAGER,
|
DIRECTORY_MANAGER,
|
||||||
@ -11,7 +13,6 @@ import {
|
|||||||
VIEW_DOCUMENT,
|
VIEW_DOCUMENT,
|
||||||
VIEW_PROJECT_INFRA,
|
VIEW_PROJECT_INFRA,
|
||||||
} from "../../utils/constants";
|
} from "../../utils/constants";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
|
|
||||||
const ProjectNav = ({ onPillClick, activePill }) => {
|
const ProjectNav = ({ onPillClick, activePill }) => {
|
||||||
const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
|
const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
|
||||||
@ -21,7 +22,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
|||||||
const DireManager = useHasUserPermission(DIRECTORY_MANAGER);
|
const DireManager = useHasUserPermission(DIRECTORY_MANAGER);
|
||||||
const DirUser = useHasUserPermission(DIRECTORY_USER);
|
const DirUser = useHasUserPermission(DIRECTORY_USER);
|
||||||
const isManageTeam = useHasUserPermission(MANAGE_TEAM)
|
const isManageTeam = useHasUserPermission(MANAGE_TEAM)
|
||||||
const isViewDocuments = useHasUserPermission(VIEW_DOCUMENT);
|
const isViewDocuments = hasUserPermission(VIEW_DOCUMENT);
|
||||||
const isUploadDocument = useHasUserPermission(UPLOAD_DOCUMENT)
|
const isUploadDocument = useHasUserPermission(UPLOAD_DOCUMENT)
|
||||||
const isModifyDocument = useHasUserPermission(MODIFY_DOCUMENT)
|
const isModifyDocument = useHasUserPermission(MODIFY_DOCUMENT)
|
||||||
|
|
||||||
@ -41,8 +42,8 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
|||||||
hidden: !(DirAdmin || DireManager || DirUser),
|
hidden: !(DirAdmin || DireManager || DirUser),
|
||||||
},
|
},
|
||||||
{ key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
|
{ key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
|
||||||
{ key: "organization", icon: "bx bx-buildings", label: "Organization"},
|
|
||||||
{ key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
|
{ key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
|
||||||
|
{ key: "organization", icon: "bx bx-buildings", label: "Organization"},
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
<div className="nav-align-top">
|
<div className="nav-align-top">
|
||||||
|
|||||||
@ -1,125 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
|
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
||||||
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
|
||||||
|
|
||||||
const ProjectAssignedOrgs = () => {
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const { data, isLoading, isError, error } =
|
|
||||||
useProjectAssignedOrganizations(selectedProject);
|
|
||||||
|
|
||||||
const orgList = [
|
|
||||||
{
|
|
||||||
key: "name",
|
|
||||||
label: "Organization Name",
|
|
||||||
getValue: (org) => (
|
|
||||||
<div className="d-flex gap-2 py-1 ">
|
|
||||||
<i class="bx bx-buildings"></i>
|
|
||||||
<span
|
|
||||||
className="text-truncate d-inline-block "
|
|
||||||
style={{ maxWidth: "150px" }}
|
|
||||||
>
|
|
||||||
{org?.name || "N/A"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "service",
|
|
||||||
label: "Service Name",
|
|
||||||
getValue: (org) => (
|
|
||||||
<div className="d-flex gap-2 py-1 ">
|
|
||||||
{org?.service?.name}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "sprid",
|
|
||||||
label: "Service Provider Id",
|
|
||||||
getValue: (org) => (
|
|
||||||
<span
|
|
||||||
className="text-truncate d-inline-block"
|
|
||||||
style={{ maxWidth: "200px" }}
|
|
||||||
>
|
|
||||||
{org?.sprid || "N/A"}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
align: "text-center",
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
key: "organizationType",
|
|
||||||
label: "Organization Type",
|
|
||||||
getValue: (org) => (
|
|
||||||
<span
|
|
||||||
className="text-truncate d-inline-block"
|
|
||||||
style={{ maxWidth: "200px" }}
|
|
||||||
>
|
|
||||||
{org?.organizationType || "N/A"}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
align: "text-center",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "assignedDate",
|
|
||||||
label: "Assigned Date",
|
|
||||||
getValue: (org) => (
|
|
||||||
<span
|
|
||||||
className="text-truncate d-inline-block"
|
|
||||||
style={{ maxWidth: "200px" }}
|
|
||||||
>
|
|
||||||
{/* {org?.assignedDate || "N/A"} */}
|
|
||||||
{formatUTCToLocalTime(org?.assignedDate)}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
align: "text-center",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (isLoading) return <div>Loading...</div>;
|
|
||||||
if (isError) return <div>{error.message}</div>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="dataTables_wrapper no-footer mx-5 pb-2 page">
|
|
||||||
<table className="table dataTable text-nowrap">
|
|
||||||
<thead>
|
|
||||||
<tr className="table_header_border">
|
|
||||||
{orgList.map((col) => (
|
|
||||||
<th key={col.key} className={col.align}>
|
|
||||||
{col.label}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{Array.isArray(data) && data.length > 0 ? (
|
|
||||||
data.map((row, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
{orgList.map((col) => (
|
|
||||||
<td key={col.key} className={col.align}>
|
|
||||||
{col.getValue(row)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<tr style={{ height: "200px" }}>
|
|
||||||
<td
|
|
||||||
colSpan={orgList.length}
|
|
||||||
className="text-center align-middle"
|
|
||||||
>
|
|
||||||
Not Assigned yet
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProjectAssignedOrgs;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
const ProjectServices = () => {
|
|
||||||
return (
|
|
||||||
<div className='row'>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProjectServices
|
|
||||||
@ -1,28 +1,29 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { useOrganizationModal } from "../../hooks/useOrganization";
|
import { useOrganizationModal } from "../../hooks/useOrganization";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||||
import ProjectAssignedOrgs from "./ProjectOrganization/ProjectAssignedOrgs";
|
|
||||||
|
|
||||||
const ProjectOrganizations = () => {
|
const ProjectOrganizations = () => {
|
||||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
const orgModal = useOrganizationModal();
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject()
|
||||||
return (
|
return (
|
||||||
<div className="card pb-10" >
|
<div className="card">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<div className="d-flex justify-content-end px-2">
|
<div className="d-flex justify-content-end px-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="link-button btn btn-sm rounded-md link-button-sm m-1 btn-primary"
|
className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
|
||||||
onClick={() => onOpen({ startStep: 1, flowType: "assign" })}
|
onClick={() => orgModal.onOpen(selectedProject)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
Add Organization
|
Add Organization
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="row">
|
<div className="card-body">
|
||||||
<ProjectAssignedOrgs />
|
<p className="text-secondary">
|
||||||
|
Not found Organization connected with current Project
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
import Chart from "react-apexcharts";
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
const ProjectOverview = ({ project }) => {
|
const ProjectOverview = ({ project }) => {
|
||||||
const { data } = useProjects();
|
const { projects } = useProjects();
|
||||||
const [current_project, setCurrentProject] = useState(
|
const [current_project, setCurrentProject] = useState(
|
||||||
data?.find((pro) => pro.id == project)
|
projects.find((pro) => pro.id == project)
|
||||||
);
|
);
|
||||||
|
|
||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
|
|||||||
}, [current_project]);
|
}, [current_project]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentProject(data?.find((pro) => pro.id == selectedProject));
|
setCurrentProject(projects.find((pro) => pro.id == selectedProject));
|
||||||
if (current_project) {
|
if (current_project) {
|
||||||
let val = getProgressInPercentage(
|
let val = getProgressInPercentage(
|
||||||
current_project.plannedWork,
|
current_project.plannedWork,
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
import { DEFAULT_EMPTY_STATUS_ID } from "../../utils/constants";
|
|
||||||
const currentDate = new Date()
|
|
||||||
|
|
||||||
|
|
||||||
export const projectDefault = {
|
|
||||||
name: "",
|
|
||||||
shortName: "",
|
|
||||||
contactPerson: "",
|
|
||||||
projectAddress: "",
|
|
||||||
startDate: currentDate.toISOString().split("T")[0],
|
|
||||||
endDate: currentDate.toISOString().split("T")[0],
|
|
||||||
projectStatusId: DEFAULT_EMPTY_STATUS_ID,
|
|
||||||
promoterId: "",
|
|
||||||
pmcId: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const projectSchema = z
|
|
||||||
.object({
|
|
||||||
name: z.string().min(1, { message: "Project Name is required" }),
|
|
||||||
shortName: z.string().optional(),
|
|
||||||
contactPerson: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Contact Person Name is required" })
|
|
||||||
.regex(/^[A-Za-z\s]+$/, {
|
|
||||||
message: "Contact Person must contain only letters",
|
|
||||||
}),
|
|
||||||
projectAddress: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Address is required" })
|
|
||||||
.max(500, "Address must not exceed 150 characters"),
|
|
||||||
startDate: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Start Date is required" })
|
|
||||||
.default(projectDefault),
|
|
||||||
endDate: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "End Date is required" })
|
|
||||||
.default(projectDefault),
|
|
||||||
projectStatusId: z.string().min(1, { message: "Status is required" }),
|
|
||||||
promoterId: z.string().min(1, { message: "Promoter is required" }),
|
|
||||||
pmcId: z.string().min(1, { message: "PMC is required" }),
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
const start = new Date(data.startDate);
|
|
||||||
const end = new Date(data.endDate);
|
|
||||||
return end >= start;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: ["endDate"],
|
|
||||||
message: "End Date must be greater than Start Date",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import TeamEmployeeList from "./TeamEmployeeList";
|
|
||||||
import { useOrganization } from "../../../hooks/useDirectory";
|
|
||||||
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
|
||||||
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
||||||
|
|
||||||
const TeamAssignToProject = ({ closeModal }) => {
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
|
||||||
const project = useSelectedProject();
|
|
||||||
const { data, isLoading, isError, error } =
|
|
||||||
useProjectAssignedOrganizationsName(project);
|
|
||||||
return (
|
|
||||||
<div className="container">
|
|
||||||
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
|
||||||
|
|
||||||
<div className="row align-items-center gx-5">
|
|
||||||
<div className="col">
|
|
||||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
|
||||||
{isLoading ? (
|
|
||||||
<select className="form-select form-select-sm w-100" disabled>
|
|
||||||
<option value="">Loading...</option>
|
|
||||||
</select>
|
|
||||||
) : data?.length === 0 ? (
|
|
||||||
<p className="mb-0 badge bg-label-secondary">No organizations found</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<label
|
|
||||||
htmlFor="organization"
|
|
||||||
className="form-label mb-0 text-nowrap"
|
|
||||||
>
|
|
||||||
Select Organization
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="organization"
|
|
||||||
className="form-select form-select-sm w-100"
|
|
||||||
value={selectedOrg || ""}
|
|
||||||
onChange={(e) => setSelectedOrg(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Select</option>
|
|
||||||
{data.map((org) => (
|
|
||||||
<option key={org.id} value={org.id}>
|
|
||||||
{org.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col">
|
|
||||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
|
||||||
<label htmlFor="search" className="form-label mb-0 text-nowrap">
|
|
||||||
Search Employee
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="search"
|
|
||||||
type="search"
|
|
||||||
className="form-control form-control-sm w-100"
|
|
||||||
placeholder="Search..."
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div >
|
|
||||||
<TeamEmployeeList
|
|
||||||
organizationId={selectedOrg}
|
|
||||||
searchTerm={searchText}
|
|
||||||
closeModal={closeModal}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TeamAssignToProject;
|
|
||||||
@ -1,251 +0,0 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import Avatar from "../../common/Avatar";
|
|
||||||
import { useDebounce } from "../../../utils/appUtils";
|
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
||||||
import {
|
|
||||||
useEmployeesByProjectAllocated,
|
|
||||||
useManageProjectAllocation,
|
|
||||||
useProjectAssignedServices,
|
|
||||||
} from "../../../hooks/useProjects";
|
|
||||||
import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
|
|
||||||
import showToast from "../../../services/toastService";
|
|
||||||
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
|
||||||
|
|
||||||
const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const debounceSearchTerm = useDebounce(searchTerm, 500);
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: employeesData = [],
|
|
||||||
isLoading,
|
|
||||||
isError,
|
|
||||||
error,
|
|
||||||
} = useOrganizationEmployees(
|
|
||||||
selectedProject,
|
|
||||||
organizationId,
|
|
||||||
debounceSearchTerm
|
|
||||||
);
|
|
||||||
|
|
||||||
const { projectEmployees, loading: employeeLodaing } =
|
|
||||||
useEmployeesByProjectAllocated(selectedProject, null);
|
|
||||||
|
|
||||||
const { data: jobRoles } = useMaster();
|
|
||||||
const { data: services } = useProjectAssignedServices(selectedProject);
|
|
||||||
|
|
||||||
const [employees, setEmployees] = useState([]);
|
|
||||||
|
|
||||||
const { mutate: handleAssignEmployee, isPending } =
|
|
||||||
useManageProjectAllocation({
|
|
||||||
onSuccessCallback: () => {
|
|
||||||
closeModal();
|
|
||||||
},
|
|
||||||
onErrorCallback: () => {
|
|
||||||
closeModal();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (employeesData?.data?.length > 0) {
|
|
||||||
const available = employeesData.data.filter((emp) => {
|
|
||||||
const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
|
|
||||||
return !projEmp || projEmp.isActive === false;
|
|
||||||
});
|
|
||||||
|
|
||||||
setEmployees(
|
|
||||||
available.map((emp) => ({
|
|
||||||
...emp,
|
|
||||||
isChecked: false,
|
|
||||||
jobRole: emp?.jobRoleId || null,
|
|
||||||
serviceId: "",
|
|
||||||
errors: {},
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [employeesData, projectEmployees, organizationId]);
|
|
||||||
|
|
||||||
const handleCheckboxChange = (index) => {
|
|
||||||
setEmployees((prev) => {
|
|
||||||
const newArr = [...prev];
|
|
||||||
newArr[index].isChecked = !newArr[index].isChecked;
|
|
||||||
newArr[index].errors = {};
|
|
||||||
return newArr;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectChange = (index, field, value) => {
|
|
||||||
setEmployees((prev) => {
|
|
||||||
const newArr = [...prev];
|
|
||||||
newArr[index][field] = value;
|
|
||||||
newArr[index].errors[field] = "";
|
|
||||||
return newArr;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = () => {
|
|
||||||
const checkedEmployees = employees.filter((emp) => emp.isChecked);
|
|
||||||
|
|
||||||
setEmployees((prev) => prev.map((emp) => ({ ...emp, errors: {} })));
|
|
||||||
|
|
||||||
if (checkedEmployees.length === 0) {
|
|
||||||
showToast("Select at least one employee", "info");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let hasError = false;
|
|
||||||
const newEmployees = employees.map((emp) => {
|
|
||||||
const empErrors = {};
|
|
||||||
if (emp.isChecked) {
|
|
||||||
if (!emp.jobRole) {
|
|
||||||
empErrors.jobRole = "Job role is required";
|
|
||||||
hasError = true;
|
|
||||||
}
|
|
||||||
if (!emp.serviceId) {
|
|
||||||
empErrors.serviceId = "Service is required";
|
|
||||||
hasError = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { ...emp, errors: empErrors };
|
|
||||||
});
|
|
||||||
|
|
||||||
setEmployees(newEmployees);
|
|
||||||
|
|
||||||
if (hasError) return; // stop submit if validation fails
|
|
||||||
|
|
||||||
const payload = checkedEmployees.map((emp) => ({
|
|
||||||
employeeId: emp.id,
|
|
||||||
jobRoleId: emp.jobRole,
|
|
||||||
serviceId: emp.serviceId,
|
|
||||||
projectId: selectedProject,
|
|
||||||
status: true,
|
|
||||||
}));
|
|
||||||
|
|
||||||
handleAssignEmployee({ payload,actionType:"assign"} );
|
|
||||||
|
|
||||||
setEmployees((prev) =>
|
|
||||||
prev.map((emp) => ({
|
|
||||||
...emp,
|
|
||||||
isChecked: false,
|
|
||||||
jobRole: "",
|
|
||||||
serviceId: "",
|
|
||||||
errors: {},
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return ( <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError) {
|
|
||||||
return (
|
|
||||||
<div className="page-min-h d-flex justify-content-center align-items-center ">
|
|
||||||
{error?.status === 400 ? (
|
|
||||||
<p className="m-0">Enter employee you want to find.</p>
|
|
||||||
) : (
|
|
||||||
<p className="m-0 dange-text">Something went wrong. Please try again later.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (employees.length === 0) {
|
|
||||||
return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className=" position-relative">
|
|
||||||
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
|
|
||||||
<thead className=" position-sticky top-0">
|
|
||||||
<tr>
|
|
||||||
<th>Employee</th>
|
|
||||||
<th>Service</th>
|
|
||||||
<th>Job Role</th>
|
|
||||||
<th>Select</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{employees.map((emp, index) => (
|
|
||||||
<tr key={emp.id}>
|
|
||||||
<td>
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<Avatar firstName={emp.firstName} lastName={emp.lastName} />
|
|
||||||
<span className="ms-2 fw-semibold">
|
|
||||||
{emp.firstName} {emp.lastName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<select
|
|
||||||
value={emp.serviceId}
|
|
||||||
disabled={!emp.isChecked}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleSelectChange(index, "serviceId", e.target.value)
|
|
||||||
}
|
|
||||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
|
||||||
emp.errors.serviceId ? "is-invalid" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<option value="">Select Service</option>
|
|
||||||
{services?.map((s) => (
|
|
||||||
<option key={s.id} value={s.id}>
|
|
||||||
{s.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{emp.errors.serviceId && (
|
|
||||||
<div className="danger-text">{emp.errors.serviceId}</div>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<select
|
|
||||||
value={emp.jobRole}
|
|
||||||
disabled={!emp.isChecked}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleSelectChange(index, "jobRole", e.target.value)
|
|
||||||
}
|
|
||||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
|
||||||
emp.errors.jobRole ? "is-invalid" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<option value="">Select Job Role</option>
|
|
||||||
{jobRoles?.map((r) => (
|
|
||||||
<option key={r.id} value={r.id}>
|
|
||||||
{r.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{emp.errors.jobRole && (
|
|
||||||
<div className="danger-text">{emp.errors.jobRole}</div>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input"
|
|
||||||
checked={emp.isChecked}
|
|
||||||
onChange={() => handleCheckboxChange(index)}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 ">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-label-secondary"
|
|
||||||
onClick={() => closeModal()}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button onClick={onSubmit} className="btn btn-primary">
|
|
||||||
{isPending ? "Please Wait..." : "Assign to Project"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TeamEmployeeList;
|
|
||||||
@ -1,339 +0,0 @@
|
|||||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
||||||
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
|
||||||
|
|
||||||
import showToast from "../../../services/toastService";
|
|
||||||
import Avatar from "../../common/Avatar";
|
|
||||||
import moment from "moment";
|
|
||||||
|
|
||||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import { changeMaster } from "../../../slices/localVariablesSlice";
|
|
||||||
import useMaster from "../../../hooks/masterHook/useMaster";
|
|
||||||
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
|
|
||||||
import { ASSIGN_TO_PROJECT } from "../../../utils/constants";
|
|
||||||
import ConfirmModal from "../../common/ConfirmModal";
|
|
||||||
import eventBus from "../../../services/eventBus";
|
|
||||||
import {
|
|
||||||
useEmployeesByProjectAllocated,
|
|
||||||
useManageProjectAllocation,
|
|
||||||
useProjectAssignedServices,
|
|
||||||
} from "../../../hooks/useProjects";
|
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
||||||
import GlobalModel from "../../common/GlobalModel";
|
|
||||||
import TeamAssignToProject from "./TeamAssignToProject";
|
|
||||||
|
|
||||||
const Teams = () => {
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [AssigTeam, setAssignTeam] = useState(false);
|
|
||||||
const [employees, setEmployees] = useState([]);
|
|
||||||
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
|
||||||
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
|
||||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
|
||||||
const [selectedService, setSelectedService] = useState(null);
|
|
||||||
const [activeEmployee, setActiveEmployee] = useState(false);
|
|
||||||
|
|
||||||
const { data: assignedServices, isLoading: servicesLoading } =
|
|
||||||
useProjectAssignedServices(selectedProject);
|
|
||||||
const { data: empJobRoles, loading } = useMaster();
|
|
||||||
const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
|
|
||||||
|
|
||||||
const handleServiceChange = (e) => {
|
|
||||||
setSelectedService(e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
|
|
||||||
const [IsDeleteModal, setIsDeleteModal] = useState(false);
|
|
||||||
const {
|
|
||||||
projectEmployees,
|
|
||||||
loading: employeeLodaing,
|
|
||||||
refetch,
|
|
||||||
} = useEmployeesByProjectAllocated(
|
|
||||||
selectedProject,
|
|
||||||
selectedService,
|
|
||||||
null,
|
|
||||||
activeEmployee
|
|
||||||
);
|
|
||||||
const {
|
|
||||||
mutate: submitAllocations,
|
|
||||||
isPending,
|
|
||||||
isSuccess,
|
|
||||||
isError,
|
|
||||||
} = useManageProjectAllocation({
|
|
||||||
onSuccessCallback: () => {
|
|
||||||
setSelectedEmployee(null);
|
|
||||||
},
|
|
||||||
onErrorCallback: () => {
|
|
||||||
setSelectedEmployee(null);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleDelete = (employee) => {
|
|
||||||
let payload = [
|
|
||||||
{
|
|
||||||
employeeId: employee?.employeeId,
|
|
||||||
jobRoleId: employee?.jobRoleId,
|
|
||||||
projectId: selectedProject,
|
|
||||||
serviceId: employee?.serviceId,
|
|
||||||
status: false,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
submitAllocations({ payload: payload, actionType: "remove" });
|
|
||||||
};
|
|
||||||
const getJobRole = (jobRoleId) => {
|
|
||||||
if (loading) return "Loading...";
|
|
||||||
if (!Array.isArray(empJobRoles)) return "Unassigned";
|
|
||||||
if (!jobRoleId) return "Unassigned";
|
|
||||||
|
|
||||||
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
|
||||||
return role ? role.name : "Unassigned";
|
|
||||||
};
|
|
||||||
|
|
||||||
const filteredEmployees = useMemo(() => {
|
|
||||||
if (!projectEmployees) return [];
|
|
||||||
|
|
||||||
let filtered = projectEmployees;
|
|
||||||
|
|
||||||
if (activeEmployee) {
|
|
||||||
filtered = projectEmployees.filter((emp) => !emp.isActive);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply search filter if present
|
|
||||||
if (searchTerm?.trim()) {
|
|
||||||
const lower = searchTerm.toLowerCase();
|
|
||||||
filtered = filtered.filter((emp) => {
|
|
||||||
const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
|
|
||||||
const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
|
|
||||||
return fullName.includes(lower) || jobRole.includes(lower);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
}, [projectEmployees, searchTerm, activeEmployee]);
|
|
||||||
const handleSearch = (e) => setSearchTerm(e.target.value);
|
|
||||||
const employeeHandler = useCallback(
|
|
||||||
(msg) => {
|
|
||||||
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
|
||||||
refetch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[filteredEmployees, refetch]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
eventBus.on("employee", employeeHandler);
|
|
||||||
return () => eventBus.off("employee", employeeHandler);
|
|
||||||
}, [employeeHandler]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{AssigTeam && (
|
|
||||||
<GlobalModel
|
|
||||||
size="lg"
|
|
||||||
isOpen={AssigTeam}
|
|
||||||
closeModal={() => setAssignTeam(false)}
|
|
||||||
>
|
|
||||||
<TeamAssignToProject closeModal={() => setAssignTeam(false)} />
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ConfirmModal
|
|
||||||
type="delete"
|
|
||||||
header={"Remove Employee"}
|
|
||||||
message={"Are you sure you want to remove?"}
|
|
||||||
isOpen={!!selectedEmployee}
|
|
||||||
loading={isPending}
|
|
||||||
onSubmit={() => handleDelete(selectedEmployee)}
|
|
||||||
onClose={() => setSelectedEmployee(null)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="card card-action mb-6">
|
|
||||||
<div className="card-body">
|
|
||||||
<div className="row align-items-center justify-content-between mb-4 g-3">
|
|
||||||
<div className="col-md-6 col-12 algin-items-center">
|
|
||||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
|
||||||
<div>
|
|
||||||
{!servicesLoading && (
|
|
||||||
<>
|
|
||||||
{(!assignedServices || assignedServices.length === 0) && (
|
|
||||||
<span className="badge bg-label-secondary">
|
|
||||||
Not Service Assigned
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{assignedServices?.length === 1 && (
|
|
||||||
<span className="badge bg-label-secondary">
|
|
||||||
{assignedServices[0].name}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{assignedServices?.length > 1 && (
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
aria-label="Select Service"
|
|
||||||
value={selectedService}
|
|
||||||
onChange={handleServiceChange}
|
|
||||||
>
|
|
||||||
<option value="">All Services</option>
|
|
||||||
{assignedServices.map((service) => (
|
|
||||||
<option key={service.id} value={service.id}>
|
|
||||||
{service.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-check form-switch d-flex align-items-center text-nowrap">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input"
|
|
||||||
id="activeEmployeeSwitch"
|
|
||||||
checked={activeEmployee}
|
|
||||||
onChange={handleToggleActive}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label ms-2"
|
|
||||||
htmlFor="activeEmployeeSwitch"
|
|
||||||
>
|
|
||||||
{activeEmployee ? "Active Employees" : "Include Inactive Employees"}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
placeholder="Search by Name or Role"
|
|
||||||
aria-controls="DataTables_Table_0"
|
|
||||||
style={{ maxWidth: "200px" }}
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={handleSearch}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{HasAssignUserPermission && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-primary btn-sm text-nowrap"
|
|
||||||
onClick={() => setAssignTeam(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-1"></i>
|
|
||||||
Assign Employee
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="table-responsive text-nowrap modal-min-h">
|
|
||||||
{employeeLodaing && <p>Loading..</p>}
|
|
||||||
{projectEmployees && projectEmployees.length > 0 && (
|
|
||||||
<table className="table ">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<div className="text-start ms-5">Name</div>
|
|
||||||
</th>
|
|
||||||
<th>Services</th>
|
|
||||||
<th>Organization</th>
|
|
||||||
<th>Assigned Date</th>
|
|
||||||
{activeEmployee && <th>Release Date</th>}
|
|
||||||
<th>Project Role</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="table-border-bottom-0">
|
|
||||||
{filteredEmployees &&
|
|
||||||
filteredEmployees
|
|
||||||
.sort((a, b) =>
|
|
||||||
(a.firstName || "").localeCompare(b.firstName || "")
|
|
||||||
)
|
|
||||||
.map((emp) => (
|
|
||||||
<tr key={emp.id}>
|
|
||||||
<td>
|
|
||||||
<div className="d-flex justify-content-start align-items-center">
|
|
||||||
<Avatar
|
|
||||||
firstName={emp.firstName}
|
|
||||||
lastName={emp.lastName}
|
|
||||||
/>
|
|
||||||
<div className="d-flex flex-column">
|
|
||||||
<a
|
|
||||||
onClick={() =>
|
|
||||||
navigate(
|
|
||||||
`/employee/${emp.employeeId}?for=attendance`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="text-heading text-truncate cursor-pointer"
|
|
||||||
>
|
|
||||||
<span className="fw-normal">
|
|
||||||
{emp.firstName}{" "}
|
|
||||||
{emp.lastName}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>{emp.serviceName || "N/A"}</td>
|
|
||||||
<td>{emp.organizationName || "N/A"}</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
{moment(emp.allocationDate).format("DD-MMM-YYYY")}
|
|
||||||
</td>
|
|
||||||
{activeEmployee && (
|
|
||||||
<td>
|
|
||||||
{emp.reAllocationDate
|
|
||||||
? moment(emp.reAllocationDate).format(
|
|
||||||
"DD-MMM-YYYY"
|
|
||||||
)
|
|
||||||
: "Present"}
|
|
||||||
</td>
|
|
||||||
)}
|
|
||||||
<td>
|
|
||||||
<span className="badge bg-label-primary me-1">
|
|
||||||
{getJobRole(emp.jobRoleId)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{emp.isActive ? (
|
|
||||||
<button
|
|
||||||
aria-label="Delete"
|
|
||||||
type="button"
|
|
||||||
title="Remove from project"
|
|
||||||
className="btn p-0 dropdown-toggle hide-arrow"
|
|
||||||
onClick={() => setSelectedEmployee(emp)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-trash me-1 text-danger"></i>
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<span>Not in project</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
)}
|
|
||||||
{!employeeLodaing && filteredEmployees.length === 0 && (
|
|
||||||
<div className="text-center text-muted py-3 d-flex justify-content-center align-items-center py-12">
|
|
||||||
<p>
|
|
||||||
{activeEmployee
|
|
||||||
? "No active employees assigned to the project"
|
|
||||||
: "No inactive employees assigned to the project"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Teams;
|
|
||||||
420
src/components/Project/Teams.jsx
Normal file
420
src/components/Project/Teams.jsx
Normal file
@ -0,0 +1,420 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
|
import MapUsers from "./MapUsers";
|
||||||
|
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
import showToast from "../../services/toastService";
|
||||||
|
import Avatar from "../common/Avatar";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
|
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||||
|
import useMaster from "../../hooks/masterHook/useMaster";
|
||||||
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
|
import { ASSIGN_TO_PROJECT } from "../../utils/constants";
|
||||||
|
import ConfirmModal from "../common/ConfirmModal";
|
||||||
|
import eventBus from "../../services/eventBus";
|
||||||
|
import {
|
||||||
|
useEmployeesByProjectAllocated,
|
||||||
|
useManageProjectAllocation,
|
||||||
|
} from "../../hooks/useProjects";
|
||||||
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||||
|
|
||||||
|
const Teams = () => {
|
||||||
|
// const {projectId} = useParams()
|
||||||
|
// const projectId = useSelector((store)=>store.localVariables.projectId)
|
||||||
|
const projectId = useSelectedProject();
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const { data, loading } = useMaster();
|
||||||
|
const [isModalOpen, setIsModelOpen] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [empJobRoles, setEmpJobRoles] = useState(null);
|
||||||
|
const [employees, setEmployees] = useState([]);
|
||||||
|
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
||||||
|
const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
|
||||||
|
const [assignedLoading, setAssignedLoading] = useState(false);
|
||||||
|
const [activeEmployee, setActiveEmployee] = useState(true);
|
||||||
|
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
||||||
|
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
|
||||||
|
const [IsDeleteModal, setIsDeleteModal] = useState(false);
|
||||||
|
const {
|
||||||
|
projectEmployees,
|
||||||
|
loading: employeeLodaing,
|
||||||
|
refetch,
|
||||||
|
} = useEmployeesByProjectAllocated(projectId);
|
||||||
|
const {
|
||||||
|
mutate: submitAllocations,
|
||||||
|
isPending,
|
||||||
|
isSuccess,
|
||||||
|
isError,
|
||||||
|
} = useManageProjectAllocation({
|
||||||
|
onSuccessCallback: () => {
|
||||||
|
setRemovingEmployeeId(null);
|
||||||
|
setAssignedLoading(false);
|
||||||
|
setDeleteEmplyee(null);
|
||||||
|
closeDeleteModal();
|
||||||
|
},
|
||||||
|
onErrorCallback: () => {
|
||||||
|
closeDeleteModal();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeAllocation = (item) => {
|
||||||
|
setRemovingEmployeeId(item.id);
|
||||||
|
|
||||||
|
submitAllocations({
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
empID: item.employeeId,
|
||||||
|
jobRoleId: item.jobRoleId,
|
||||||
|
projectId: projectId,
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
added: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEmpAlicationFormSubmit = (allocaionObj) => {
|
||||||
|
let items = allocaionObj.map((item) => {
|
||||||
|
return {
|
||||||
|
empID: item.empID,
|
||||||
|
jobRoleId: item.jobRoleId,
|
||||||
|
projectId: projectId,
|
||||||
|
status: true,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
submitAllocations({ items, added: true });
|
||||||
|
|
||||||
|
setActiveEmployee(true);
|
||||||
|
setFilteredEmployees(employees.filter((emp) => emp.isActive));
|
||||||
|
|
||||||
|
const dropdown = document.querySelector(
|
||||||
|
'select[name="DataTables_Table_0_length"]'
|
||||||
|
);
|
||||||
|
if (dropdown) dropdown.value = "true";
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRole = (jobRoleId) => {
|
||||||
|
if (loading) return "Loading...";
|
||||||
|
if (!Array.isArray(empJobRoles)) return "Unassigned";
|
||||||
|
if (!jobRoleId) return "Unassigned";
|
||||||
|
|
||||||
|
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
||||||
|
return role ? role.name : "Unassigned";
|
||||||
|
};
|
||||||
|
const openModel = () => {
|
||||||
|
setIsModelOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onModelClose = () => {
|
||||||
|
setIsModelOpen(false);
|
||||||
|
const modalElement = document.getElementById("user-model");
|
||||||
|
if (modalElement) {
|
||||||
|
modalElement.classList.remove("show");
|
||||||
|
modalElement.style.display = "none";
|
||||||
|
document.body.classList.remove("modal-open");
|
||||||
|
document.querySelector(".modal-backdrop").remove();
|
||||||
|
}
|
||||||
|
const modalBackdropElement = document.querySelector(".modal-backdrop");
|
||||||
|
if (modalBackdropElement) {
|
||||||
|
modalBackdropElement.remove();
|
||||||
|
}
|
||||||
|
document.body.style.overflow = "auto";
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(changeMaster("Job Role"));
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (projectEmployees) {
|
||||||
|
setEmployees(projectEmployees);
|
||||||
|
//setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive));
|
||||||
|
const filtered = projectEmployees.filter((emp) => emp.isActive);
|
||||||
|
setFilteredEmployees(filtered);
|
||||||
|
}
|
||||||
|
}, [projectEmployees, employeeLodaing]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
setEmpJobRoles(data);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const filterAndSearchEmployees = useCallback(() => {
|
||||||
|
const statusFiltered = employees.filter((emp) =>
|
||||||
|
activeEmployee ? emp.isActive : !emp.isActive
|
||||||
|
);
|
||||||
|
|
||||||
|
if (searchTerm === "") {
|
||||||
|
setFilteredEmployees(statusFiltered);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||||
|
const searchedAndFiltered = statusFiltered.filter((item) => {
|
||||||
|
const fullName =
|
||||||
|
`${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
|
||||||
|
const roleName = getRole(item.jobRoleId).toLowerCase();
|
||||||
|
|
||||||
|
return (
|
||||||
|
fullName.includes(lowercasedSearchTerm) ||
|
||||||
|
roleName.includes(lowercasedSearchTerm)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
setFilteredEmployees(searchedAndFiltered);
|
||||||
|
}, [employees, activeEmployee, searchTerm, getRole]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
filterAndSearchEmployees();
|
||||||
|
}, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
|
||||||
|
|
||||||
|
const handleFilterEmployee = (e) => {
|
||||||
|
const filterValue = e.target.value;
|
||||||
|
// if (filterValue === "true") {
|
||||||
|
// setActiveEmployee(true);
|
||||||
|
// setFilteredEmployees(employees.filter((emp) => emp.isActive));
|
||||||
|
// } else {
|
||||||
|
// setFilteredEmployees(employees.filter((emp) => !emp.isActive));
|
||||||
|
// setActiveEmployee(false);
|
||||||
|
// }
|
||||||
|
setActiveEmployee(filterValue === "true");
|
||||||
|
setSearchTerm("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = (e) => {
|
||||||
|
setSearchTerm(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteModalOpen = (item) => {
|
||||||
|
setDeleteEmplyee(item);
|
||||||
|
setIsDeleteModal(true);
|
||||||
|
};
|
||||||
|
const closeDeleteModal = () => setIsDeleteModal(false);
|
||||||
|
|
||||||
|
const handler = useCallback(
|
||||||
|
(msg) => {
|
||||||
|
if (msg.projectIds.some((item) => item === projectId)) {
|
||||||
|
refetch();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[projectId, refetch]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
eventBus.on("assign_project_all", handler);
|
||||||
|
return () => eventBus.off("assign_project_all", handler);
|
||||||
|
}, [handler]);
|
||||||
|
|
||||||
|
const employeeHandler = useCallback(
|
||||||
|
(msg) => {
|
||||||
|
if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
|
||||||
|
refetch();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[filteredEmployees, refetch]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
eventBus.on("employee", employeeHandler);
|
||||||
|
return () => eventBus.off("employee", employeeHandler);
|
||||||
|
}, [employeeHandler]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="modal fade"
|
||||||
|
id="user-model"
|
||||||
|
tabIndex="-1"
|
||||||
|
aria-labelledby="userModalLabel"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<MapUsers
|
||||||
|
projectId={projectId}
|
||||||
|
onClose={onModelClose}
|
||||||
|
empJobRoles={empJobRoles}
|
||||||
|
onSubmit={handleEmpAlicationFormSubmit}
|
||||||
|
allocation={employees}
|
||||||
|
assignedLoading={assignedLoading}
|
||||||
|
setAssignedLoading={setAssignedLoading}
|
||||||
|
></MapUsers>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{IsDeleteModal && (
|
||||||
|
<ConfirmModal
|
||||||
|
isOpen={IsDeleteModal}
|
||||||
|
type="delete"
|
||||||
|
header="Removed Employee"
|
||||||
|
message="Are you sure you want delete?"
|
||||||
|
onSubmit={() => removeAllocation(deleteEmployee)}
|
||||||
|
onClose={closeDeleteModal}
|
||||||
|
loading={isPending}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="card card-action mb-6">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row d-flex justify-content-between mb-4">
|
||||||
|
<div className="col-md-6 col-12 d-flex align-items-center">
|
||||||
|
<div className="dataTables_filter d-inline-flex align-items-center ms-2">
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
className="form-control form-control-sm me-4"
|
||||||
|
placeholder="Search by Name or Role"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={handleSearch}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
|
||||||
|
<div
|
||||||
|
className="dataTables_length text-start py-2 px-2"
|
||||||
|
id="DataTables_Table_0_length"
|
||||||
|
>
|
||||||
|
<label>
|
||||||
|
<select
|
||||||
|
name="DataTables_Table_0_length"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
onChange={handleFilterEmployee}
|
||||||
|
// value={false}
|
||||||
|
aria-label=""
|
||||||
|
defaultValue="true"
|
||||||
|
>
|
||||||
|
<option value="true">Active Employee</option>
|
||||||
|
<option value="false">In-Active Employee</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`link-button btn-primary btn-sm ${
|
||||||
|
HasAssignUserPermission ? "" : "d-none"
|
||||||
|
}`}
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#user-model"
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Assign Employee
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive text-nowrap">
|
||||||
|
{employeeLodaing && <p>Loading..</p>}
|
||||||
|
{!employeeLodaing &&
|
||||||
|
filteredEmployees &&
|
||||||
|
filteredEmployees.length > 0 && (
|
||||||
|
<table className="table ">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<div className="text-start ms-5">Name</div>
|
||||||
|
</th>
|
||||||
|
<th>Assigned Date</th>
|
||||||
|
{!activeEmployee && <th>Release Date</th>}
|
||||||
|
<th>Project Role</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="table-border-bottom-0">
|
||||||
|
{filteredEmployees &&
|
||||||
|
filteredEmployees.map((item) => (
|
||||||
|
<tr key={item.id}>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex justify-content-start align-items-center">
|
||||||
|
<Avatar
|
||||||
|
firstName={item.firstName}
|
||||||
|
lastName={item.lastName}
|
||||||
|
></Avatar>
|
||||||
|
<div className="d-flex flex-column">
|
||||||
|
<a
|
||||||
|
onClick={() =>
|
||||||
|
navigate(
|
||||||
|
`/employee/${item.employeeId}?for=attendance`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="text-heading text-truncate cursor-pointer"
|
||||||
|
>
|
||||||
|
<span className="fw-normal">
|
||||||
|
{item.firstName} {item.middleName}{" "}
|
||||||
|
{item.lastName}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{" "}
|
||||||
|
{moment(item.allocationDate).format(
|
||||||
|
"DD-MMM-YYYY"
|
||||||
|
)}{" "}
|
||||||
|
</td>
|
||||||
|
{!activeEmployee && (
|
||||||
|
<td>
|
||||||
|
{item.reAllocationDate
|
||||||
|
? moment(item.reAllocationDate).format(
|
||||||
|
"DD-MMM-YYYY"
|
||||||
|
)
|
||||||
|
: "Present"}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
<td>
|
||||||
|
<span className="badge bg-label-primary me-1">
|
||||||
|
{getRole(item.jobRoleId)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{item.isActive && (
|
||||||
|
<button
|
||||||
|
aria-label="Delete"
|
||||||
|
type="button"
|
||||||
|
title="Remove from project"
|
||||||
|
className="btn p-0 dropdown-toggle hide-arrow"
|
||||||
|
onClick={() => deleteModalOpen(item)}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
{removingEmployeeId === item.id ? (
|
||||||
|
<div
|
||||||
|
className="spinner-border spinner-border-sm text-primary"
|
||||||
|
role="status"
|
||||||
|
>
|
||||||
|
<span className="visually-hidden">
|
||||||
|
Loading...
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<i className="bx bx-trash me-1 text-danger"></i>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{!item.isActive && <span>Not in project</span>}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
{!employeeLodaing && filteredEmployees.length === 0 && (
|
||||||
|
<div className="text-center text-muted py-3">
|
||||||
|
{activeEmployee
|
||||||
|
? "No active employees assigned to the project"
|
||||||
|
: "No inactive employees assigned to the project"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Teams;
|
||||||
@ -72,15 +72,15 @@ const EditProfile = ({ TenantId, onClose }) => {
|
|||||||
return (
|
return (
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<h5>Edit Tenant</h5>
|
<h6>Edit Tenant</h6>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="firstName" required>First Name</Label>
|
<Label htmlFor="firstName" required>First Name</Label>
|
||||||
<input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
|
<input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
|
||||||
{errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
|
{errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="lastName" required>Last Name</Label>
|
<Label htmlFor="lastName" required>Last Name</Label>
|
||||||
<input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
|
<input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
|
||||||
{errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
|
{errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
|
||||||
@ -88,32 +88,32 @@ const EditProfile = ({ TenantId, onClose }) => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="contactNumber" required>Contact Number</Label>
|
<Label htmlFor="contactNumber" required>Contact Number</Label>
|
||||||
<input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
|
<input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
|
||||||
placeholder="+91 9876543210" />
|
placeholder="+91 9876543210" />
|
||||||
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
|
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="domainName" >Domain Name</Label>
|
<Label htmlFor="domainName" >Domain Name</Label>
|
||||||
<input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
|
<input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
|
||||||
{errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
|
{errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="taxId" >Tax ID</Label>
|
<Label htmlFor="taxId" >Tax ID</Label>
|
||||||
<input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
|
<input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
|
||||||
{errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
|
{errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="officeNumber" >Office Number</Label>
|
<Label htmlFor="officeNumber" >Office Number</Label>
|
||||||
<input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
|
<input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
|
||||||
{errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
|
{errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="industryId" required>Industry</Label>
|
<Label htmlFor="industryId" required>Industry</Label>
|
||||||
<select className="form-select form-select-sm" {...register("industryId")}>
|
<select className="form-select form-select-sm" {...register("industryId")}>
|
||||||
{industryLoading ? <option value="">Loading...</option> :
|
{industryLoading ? <option value="">Loading...</option> :
|
||||||
@ -125,7 +125,7 @@ const EditProfile = ({ TenantId, onClose }) => {
|
|||||||
{errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
|
{errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mt-1 text-start">
|
<div className="col-sm-6 mt-1">
|
||||||
<Label htmlFor="reference">Reference</Label>
|
<Label htmlFor="reference">Reference</Label>
|
||||||
<select className="form-select form-select-sm" {...register("reference")}>
|
<select className="form-select form-select-sm" {...register("reference")}>
|
||||||
{reference.map((org) => (
|
{reference.map((org) => (
|
||||||
@ -134,7 +134,7 @@ const EditProfile = ({ TenantId, onClose }) => {
|
|||||||
</select>
|
</select>
|
||||||
{errors.reference && <div className="danger-text">{errors.reference.message}</div>}
|
{errors.reference && <div className="danger-text">{errors.reference.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-6 text-start">
|
<div className="col-sm-6">
|
||||||
<Label htmlFor="organizationSize" required>
|
<Label htmlFor="organizationSize" required>
|
||||||
Organization Size
|
Organization Size
|
||||||
</Label>
|
</Label>
|
||||||
@ -154,19 +154,19 @@ const EditProfile = ({ TenantId, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 mt-1 text-start">
|
<div className="col-12 mt-1">
|
||||||
<Label htmlFor="billingAddress" required>Billing Address</Label>
|
<Label htmlFor="billingAddress" required>Billing Address</Label>
|
||||||
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
|
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
|
||||||
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
|
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 mt-1 text-start">
|
<div className="col-12 mt-1">
|
||||||
<Label htmlFor="description">Description</Label>
|
<Label htmlFor="description">Description</Label>
|
||||||
<textarea id="description" className="form-control" {...register("description")} rows={2} />
|
<textarea id="description" className="form-control" {...register("description")} rows={2} />
|
||||||
{errors.description && <div className="danger-text">{errors.description.message}</div>}
|
{errors.description && <div className="danger-text">{errors.description.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-12 text-start">
|
<div className="col-sm-12">
|
||||||
<Label htmlFor="logImage">Logo Image</Label>
|
<Label htmlFor="logImage">Logo Image</Label>
|
||||||
<LogoUpload
|
<LogoUpload
|
||||||
preview={logoPreview}
|
preview={logoPreview}
|
||||||
@ -176,9 +176,9 @@ const EditProfile = ({ TenantId, onClose }) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex justify-content-end gap-2 mt-3">
|
<div className="d-flex justify-content-center gap-2 mt-3">
|
||||||
<button type="button" disabled={isPending} className="btn btn-sm btn-label-secondary" onClick={onClose}>Cancel</button>
|
|
||||||
<button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
|
<button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
|
||||||
|
<button type="button" disabled={isPending} className="btn btn-sm btn-secondary" onClick={onClose}>Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React from "react";
|
||||||
import { useFormContext } from "react-hook-form";
|
import { useFormContext } from "react-hook-form";
|
||||||
|
|
||||||
const toBase64 = (file) =>
|
const toBase64 = (file) =>
|
||||||
@ -10,15 +10,11 @@ const toBase64 = (file) =>
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
|
export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
|
||||||
const { register, setValue, watch, formState: { errors } } = useFormContext();
|
const {
|
||||||
const logoImage = watch("logoImage");
|
register,
|
||||||
|
setValue,
|
||||||
// Sync preview when the form value changes
|
formState: { errors },
|
||||||
useEffect(() => {
|
} = useFormContext();
|
||||||
if (logoImage && !preview) {
|
|
||||||
setPreview(logoImage); // Use base64 as preview
|
|
||||||
}
|
|
||||||
}, [logoImage, preview, setPreview]);
|
|
||||||
|
|
||||||
const handleUpload = async (e) => {
|
const handleUpload = async (e) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useFormContext, Controller } from "react-hook-form";
|
import { useFormContext, Controller } from "react-hook-form";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import DatePicker from "../common/DatePicker";
|
import DatePicker from "../common/DatePicker";
|
||||||
@ -6,14 +6,11 @@ import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
|
|||||||
import { LogoUpload } from "./LogoUpload";
|
import { LogoUpload } from "./LogoUpload";
|
||||||
import { orgSize, reference } from "../../utils/constants";
|
import { orgSize, reference } from "../../utils/constants";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
|
|
||||||
const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||||
const { data, isError, isLoading: industryLoading } = useIndustries();
|
const { data, isError, isLoading: industryLoading } = useIndustries();
|
||||||
const [logoPreview, setLogoPreview] = useState(null);
|
const [logoPreview, setLogoPreview] = useState(null);
|
||||||
const [logoName, setLogoName] = useState("");
|
const [logoName, setLogoName] = useState("");
|
||||||
const { data: services, isLoading: serviceLoading } = useGlobalServices();
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
control,
|
control,
|
||||||
@ -45,7 +42,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
"industryId",
|
"industryId",
|
||||||
"reference",
|
"reference",
|
||||||
"logoImage",
|
"logoImage",
|
||||||
"serviceIds",
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (valid) {
|
if (valid) {
|
||||||
@ -57,13 +53,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const logoImage = getValues("logoImage");
|
|
||||||
if (logoImage) {
|
|
||||||
setLogoPreview(logoImage);
|
|
||||||
setLogoName("Uploaded Logo");
|
|
||||||
}
|
|
||||||
}, [getValues]);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -192,7 +181,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6">
|
<div className="col-sm-6">
|
||||||
<Label htmlFor="reference" required>Reference</Label>
|
<Label htmlFor="reference">Reference</Label>
|
||||||
<select
|
<select
|
||||||
id="reference"
|
id="reference"
|
||||||
className="form-select shadow-none border py-1 px-2 small"
|
className="form-select shadow-none border py-1 px-2 small"
|
||||||
@ -209,20 +198,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6">
|
|
||||||
<SelectMultiple
|
|
||||||
name="serviceIds"
|
|
||||||
label="Services"
|
|
||||||
options={services?.data}
|
|
||||||
isLoading={serviceLoading}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
{errors.serviceIds && (
|
|
||||||
<div className="danger-text">{errors.serviceIds.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="col-sm-12">
|
<div className="col-sm-12">
|
||||||
<Label htmlFor="description">Description</Label>
|
<Label htmlFor="description">Description</Label>
|
||||||
|
|||||||
@ -5,12 +5,12 @@ import GlobalModel from "../common/GlobalModel";
|
|||||||
import { useTenantContext } from "../../pages/Tenant/TenantPage";
|
import { useTenantContext } from "../../pages/Tenant/TenantPage";
|
||||||
import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
|
import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
|
||||||
import IconButton from "../common/IconButton";
|
import IconButton from "../common/IconButton";
|
||||||
|
import { hasUserPermission } from "../../utils/authUtils";
|
||||||
import { MANAGE_TENANTS } from "../../utils/constants";
|
import { MANAGE_TENANTS } from "../../utils/constants";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
|
|
||||||
const Profile = ({ data }) => {
|
const Profile = ({ data }) => {
|
||||||
const {setEditTenant} = useTenantDetailsContext()
|
const {setEditTenant} = useTenantDetailsContext()
|
||||||
const canUpdateTenant = useHasUserPermission(MANAGE_TENANTS)
|
const canUpdateTenant = hasUserPermission(MANAGE_TENANTS)
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="container-fuid">
|
<div className="container-fuid">
|
||||||
|
|||||||
@ -224,7 +224,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{Object.keys(errors).length > 0 && (
|
{Object.keys(errors).length > 0 && (
|
||||||
<div role="alert">
|
<div class="alert alert-danger" role="alert">
|
||||||
{Object.entries(errors).map(([key, error]) => (
|
{Object.entries(errors).map(([key, error]) => (
|
||||||
<div key={key} className="danger-text">
|
<div key={key} className="danger-text">
|
||||||
{error?.message}
|
{error?.message}
|
||||||
|
|||||||
@ -14,7 +14,7 @@ const SkeletonCell = ({ width = "100%", height = 20, style = {} }) => (
|
|||||||
|
|
||||||
export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
|
export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
|
||||||
return (
|
return (
|
||||||
<div className="p-2 mt-3">
|
<div className="card p-2 mt-3">
|
||||||
<div className="card-datatable text-nowrap table-responsive">
|
<div className="card-datatable text-nowrap table-responsive">
|
||||||
<table className="table border-top dataTable text-nowrap">
|
<table className="table border-top dataTable text-nowrap">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@ -38,7 +38,7 @@ const TenantFilterPanel = ({ onApply }) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
// Close popup when navigating to another component
|
// ✅ Close popup when navigating to another component
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleClosePanel();
|
handleClosePanel();
|
||||||
@ -106,13 +106,13 @@ const TenantFilterPanel = ({ onApply }) => {
|
|||||||
<div className="d-flex justify-content-end py-3 gap-2">
|
<div className="d-flex justify-content-end py-3 gap-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-label-secondary btn-sm"
|
className="btn btn-label-secondary btn-xs"
|
||||||
onClick={onClear}
|
onClick={onClear}
|
||||||
|
|
||||||
>
|
>
|
||||||
Clear
|
Clear
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn btn-primary btn-sm" >
|
<button type="submit" className="btn btn-primary btn-xs" >
|
||||||
Apply
|
Apply
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,7 +33,6 @@ export const newTenantSchema = z.object({
|
|||||||
organizationSize: z.string().nonempty("Organization size is required"),
|
organizationSize: z.string().nonempty("Organization size is required"),
|
||||||
industryId: z.string().uuid("Invalid industry ID"),
|
industryId: z.string().uuid("Invalid industry ID"),
|
||||||
reference: z.string().nonempty("Reference is required"),
|
reference: z.string().nonempty("Reference is required"),
|
||||||
serviceIds: z.array(z.string()).optional(),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const tenantDefaultValues = {
|
export const tenantDefaultValues = {
|
||||||
@ -52,14 +51,13 @@ export const tenantDefaultValues = {
|
|||||||
organizationSize: "",
|
organizationSize: "",
|
||||||
industryId: "", // should be a valid UUID if pre-filled
|
industryId: "", // should be a valid UUID if pre-filled
|
||||||
reference: "",
|
reference: "",
|
||||||
serviceIds:[]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const getSubscriptionSchema = (minUsers) =>
|
export const getSubscriptionSchema = (minUsers) =>
|
||||||
z.object({
|
z.object({
|
||||||
planId: z.string().min(1, { message: "Please select a plan to continue" }),
|
planId: z.string().min(1, { message: "Please select Plan" }),
|
||||||
currencyId: z.string().uuid("Invalid currency"),
|
currencyId: z.string().uuid("Invalid currency"),
|
||||||
maxUsers: z
|
maxUsers: z
|
||||||
.number({ invalid_type_error: "Must be a number" })
|
.number({ invalid_type_error: "Must be a number" })
|
||||||
|
|||||||
@ -137,7 +137,7 @@ const TenantsList = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="p-2 mt-3">
|
<div className="p-2 mt-3">
|
||||||
<div className=" text-nowrap table-responsive">
|
<div className="card-datatable text-nowrap table-responsive">
|
||||||
<table className="table border-top dataTable text-nowrap">
|
<table className="table border-top dataTable text-nowrap">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="shadow-sm">
|
<tr className="shadow-sm">
|
||||||
|
|||||||
@ -1,13 +1,14 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import { useController } from "react-hook-form";
|
import { useController } from "react-hook-form";
|
||||||
|
|
||||||
|
|
||||||
const DatePicker = ({
|
const DatePicker = ({
|
||||||
name,
|
name,
|
||||||
control,
|
control,
|
||||||
placeholder = "DD-MM-YYYY",
|
placeholder = "DD-MM-YYYY",
|
||||||
className = "",
|
className = "",
|
||||||
allowText = false,
|
allowText = false,
|
||||||
maxDate,
|
maxDate, // removed default new Date()
|
||||||
minDate,
|
minDate,
|
||||||
...rest
|
...rest
|
||||||
}) => {
|
}) => {
|
||||||
@ -21,43 +22,43 @@ const DatePicker = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!inputRef.current) return;
|
if (inputRef.current) {
|
||||||
|
flatpickr(inputRef.current, {
|
||||||
const fp = flatpickr(inputRef.current, {
|
dateFormat: "d-m-Y",
|
||||||
dateFormat: "d-m-Y",
|
allowInput: allowText,
|
||||||
allowInput: allowText,
|
defaultDate: value
|
||||||
defaultDate: value ? new Date(value) : null, // safely convert to Date
|
? flatpickr.parseDate(value, "Y-m-d")
|
||||||
maxDate: maxDate ? new Date(maxDate) : undefined,
|
: null,
|
||||||
minDate: minDate ? new Date(minDate) : undefined,
|
maxDate: maxDate ?? undefined, // only applied if passed
|
||||||
onChange: (selectedDates) => {
|
minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
|
||||||
if (selectedDates.length > 0) {
|
onChange: function (selectedDates) {
|
||||||
onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
|
if (selectedDates.length > 0) {
|
||||||
} else {
|
// store in YYYY-MM-DD
|
||||||
onChange("");
|
const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
|
||||||
}
|
onChange(formatted);
|
||||||
},
|
} else {
|
||||||
...rest
|
onChange("");
|
||||||
});
|
}
|
||||||
|
},
|
||||||
return () => {
|
...rest
|
||||||
fp.destroy(); // clean up on unmount
|
});
|
||||||
};
|
}
|
||||||
}, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
|
}, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
|
||||||
|
|
||||||
const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`position-relative ${className}`}>
|
<div className={` position-relative ${className}`}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-sm "
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
value={displayValue}
|
defaultValue={
|
||||||
onChange={(e) => {
|
value
|
||||||
if (allowText) {
|
? flatpickr.formatDate(
|
||||||
onChange(e.target.value); // allow manual typing if enabled
|
flatpickr.parseDate(value, "Y-m-d"),
|
||||||
}
|
"d-m-Y"
|
||||||
}}
|
)
|
||||||
|
: ""
|
||||||
|
}
|
||||||
ref={(el) => {
|
ref={(el) => {
|
||||||
inputRef.current = el;
|
inputRef.current = el;
|
||||||
ref(el);
|
ref(el);
|
||||||
@ -69,7 +70,7 @@ const DatePicker = ({
|
|||||||
<span
|
<span
|
||||||
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
|
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (inputRef.current?._flatpickr) {
|
if (inputRef.current && inputRef.current._flatpickr) {
|
||||||
inputRef.current._flatpickr.open();
|
inputRef.current._flatpickr.open();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -1,39 +1,27 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useController, useFormContext, useWatch } from "react-hook-form";
|
import { useController, useFormContext, useWatch } from "react-hook-form";
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
|
|
||||||
const DateRangePicker = ({
|
const DateRangePicker = ({
|
||||||
md=12,
|
md,
|
||||||
sm=6,
|
sm,
|
||||||
onRangeChange,
|
onRangeChange,
|
||||||
DateDifference = 7,
|
DateDifference = 7,
|
||||||
endDateMode = "yesterday",
|
endDateMode = "yesterday",
|
||||||
}) => {
|
}) => {
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
|
|
||||||
const persistedRange = useSelector(
|
|
||||||
(store) => store.localVariables.attendance.defaultDateRange
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let startDate, endDate;
|
const endDate = new Date();
|
||||||
|
if (endDateMode === "yesterday") {
|
||||||
if (persistedRange?.startDate && persistedRange?.endDate) {
|
endDate.setDate(endDate.getDate() - 1);
|
||||||
startDate = new Date(persistedRange.startDate);
|
|
||||||
endDate = new Date(persistedRange.endDate);
|
|
||||||
} else {
|
|
||||||
endDate = new Date();
|
|
||||||
if (endDateMode === "yesterday") {
|
|
||||||
endDate.setDate(endDate.getDate() - 1);
|
|
||||||
}
|
|
||||||
endDate.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
startDate = new Date(endDate);
|
|
||||||
startDate.setDate(endDate.getDate() - (DateDifference - 1));
|
|
||||||
startDate.setHours(0, 0, 0, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fp = flatpickr(inputRef.current, {
|
endDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const startDate = new Date(endDate);
|
||||||
|
startDate.setDate(endDate.getDate() - (DateDifference - 1));
|
||||||
|
startDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const fp = flatpickr(inputRef.current, {
|
||||||
mode: "range",
|
mode: "range",
|
||||||
dateFormat: "Y-m-d",
|
dateFormat: "Y-m-d",
|
||||||
altInput: true,
|
altInput: true,
|
||||||
@ -53,32 +41,32 @@ const DateRangePicker = ({
|
|||||||
endDate: endDate.toLocaleDateString("en-CA"),
|
endDate: endDate.toLocaleDateString("en-CA"),
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => fp.destroy();
|
return () => {
|
||||||
}, [onRangeChange, DateDifference, endDateMode, persistedRange]);
|
fp.destroy();
|
||||||
|
};
|
||||||
|
}, [onRangeChange, DateDifference, endDateMode]);
|
||||||
|
|
||||||
const handleIconClick = () => {
|
const handleIconClick = () => {
|
||||||
if (inputRef.current?._flatpickr) {
|
if (inputRef.current) {
|
||||||
inputRef.current._flatpickr.open();
|
inputRef.current._flatpickr.open(); // directly opens flatpickr
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`position-relative w-auto justify-content-center`}>
|
<div className={`col-${sm} col-sm-${md} px-1`}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control form-control-sm w-100 pe-8 "
|
className="form-control form-control-sm ps-2 pe-5 me-4"
|
||||||
placeholder="From to End"
|
placeholder="From to End"
|
||||||
id="flatpickr-range"
|
id="flatpickr-range"
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<i
|
|
||||||
className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
|
|
||||||
onClick={handleIconClick}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
<i
|
||||||
|
className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y " onClick={handleIconClick}
|
||||||
|
style={{ right: "22px", bottom: "-8px" }}
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -88,7 +76,6 @@ export default DateRangePicker;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const DateRangePicker1 = ({
|
export const DateRangePicker1 = ({
|
||||||
startField = "startDate",
|
startField = "startDate",
|
||||||
endField = "endDate",
|
endField = "endDate",
|
||||||
@ -161,20 +148,10 @@ export const DateRangePicker1 = ({
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (resetSignal !== undefined) {
|
if (defaultRange && resetSignal !== undefined) {
|
||||||
if (defaultRange) {
|
|
||||||
applyDefaultDates();
|
applyDefaultDates();
|
||||||
} else {
|
|
||||||
setValue(startField, "", { shouldValidate: true });
|
|
||||||
setValue(endField, "", { shouldValidate: true });
|
|
||||||
|
|
||||||
if (inputRef.current?._flatpickr) {
|
|
||||||
inputRef.current._flatpickr.clear();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}, [resetSignal, defaultRange]);
|
||||||
}, [resetSignal, defaultRange, setValue, startField, endField]);
|
|
||||||
|
|
||||||
|
|
||||||
const start = getValues(startField);
|
const start = getValues(startField);
|
||||||
const end = getValues(endField);
|
const end = getValues(endField);
|
||||||
|
|||||||
@ -4,13 +4,10 @@ import { useDebounce } from "../../utils/appUtils";
|
|||||||
import { useController } from "react-hook-form";
|
import { useController } from "react-hook-form";
|
||||||
import Avatar from "./Avatar";
|
import Avatar from "./Avatar";
|
||||||
|
|
||||||
const EmployeeSearchInput = ({
|
|
||||||
control,
|
|
||||||
name,
|
|
||||||
projectId,
|
const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
|
||||||
placeholder,
|
|
||||||
forAll,
|
|
||||||
}) => {
|
|
||||||
const {
|
const {
|
||||||
field: { onChange, value, ref },
|
field: { onChange, value, ref },
|
||||||
fieldState: { error },
|
fieldState: { error },
|
||||||
@ -20,20 +17,17 @@ const EmployeeSearchInput = ({
|
|||||||
const [showDropdown, setShowDropdown] = useState(false);
|
const [showDropdown, setShowDropdown] = useState(false);
|
||||||
const debouncedSearch = useDebounce(search, 500);
|
const debouncedSearch = useDebounce(search, 500);
|
||||||
|
|
||||||
const { data: employees, isLoading } = useEmployeesName(
|
const {
|
||||||
projectId,
|
data: employees,
|
||||||
debouncedSearch,
|
isLoading,
|
||||||
forAll
|
} = useEmployeesName(projectId, debouncedSearch);
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (value && employees?.data) {
|
if (value && !search) {
|
||||||
const found = employees.data.find((emp) => emp.id === value);
|
const found = employees?.data?.find((emp) => emp.id === value);
|
||||||
if (found && forAll) {
|
if (found) setSearch(found.firstName + " " + found.lastName);
|
||||||
setSearch(found.firstName + " " + found.lastName);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [value, employees?.data]);
|
}, [value, employees]);
|
||||||
|
|
||||||
const handleSelect = (employee) => {
|
const handleSelect = (employee) => {
|
||||||
onChange(employee.id);
|
onChange(employee.id);
|
||||||
@ -52,7 +46,7 @@ const EmployeeSearchInput = ({
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSearch(e.target.value);
|
setSearch(e.target.value);
|
||||||
setShowDropdown(true);
|
setShowDropdown(true);
|
||||||
onChange("");
|
onChange("");
|
||||||
}}
|
}}
|
||||||
onFocus={() => {
|
onFocus={() => {
|
||||||
if (search) setShowDropdown(true);
|
if (search) setShowDropdown(true);
|
||||||
@ -67,27 +61,28 @@ const EmployeeSearchInput = ({
|
|||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<li className="list-group-item">
|
<li className="list-group-item">
|
||||||
<a>Searching...</a>
|
<a>Searching...</a>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
employees?.data?.map((emp) => (
|
employees?.data?.map((emp) => (
|
||||||
<li
|
<li
|
||||||
key={emp.id}
|
key={emp.id}
|
||||||
className="list-group-item list-group-item-action py-1 px-1"
|
className="list-group-item list-group-item-action py-1 px-1"
|
||||||
style={{ cursor: "pointer" }}
|
style={{ cursor: "pointer" }}
|
||||||
onClick={() => handleSelect(emp)}
|
onClick={() => handleSelect(emp)}
|
||||||
>
|
>
|
||||||
<div className="d-flex align-items-center px-0">
|
<div className="d-flex align-items-center px-0">
|
||||||
<Avatar
|
<Avatar
|
||||||
size="xs"
|
size="xs"
|
||||||
classAvatar="m-0 me-2"
|
classAvatar="m-0 me-2"
|
||||||
firstName={emp.firstName}
|
firstName={emp.firstName}
|
||||||
lastName={emp.lastName}
|
lastName={emp.lastName}
|
||||||
/>
|
/>
|
||||||
<span className="text-muted">
|
<span className="text-muted">
|
||||||
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -1,65 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
|
||||||
|
|
||||||
const HoverPopup = ({ title, content, children }) => {
|
|
||||||
const [visible, setVisible] = useState(false);
|
|
||||||
const triggerRef = useRef(null);
|
|
||||||
const popupRef = useRef(null);
|
|
||||||
|
|
||||||
// Toggle on hover or click
|
|
||||||
const handleMouseEnter = () => setVisible(true);
|
|
||||||
const handleClick = () => setVisible((prev) => !prev);
|
|
||||||
|
|
||||||
// Hide on outside click
|
|
||||||
useEffect(() => {
|
|
||||||
const handleDocumentClick = (e) => {
|
|
||||||
if (
|
|
||||||
!popupRef.current?.contains(e.target) &&
|
|
||||||
!triggerRef.current?.contains(e.target)
|
|
||||||
) {
|
|
||||||
setVisible(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (visible) {
|
|
||||||
document.addEventListener("click", handleDocumentClick);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener("click", handleDocumentClick);
|
|
||||||
};
|
|
||||||
}, [visible]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="d-inline-block position-relative"
|
|
||||||
ref={triggerRef}
|
|
||||||
onMouseEnter={handleMouseEnter}
|
|
||||||
onClick={handleClick}
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
|
|
||||||
{visible && (
|
|
||||||
<div
|
|
||||||
ref={popupRef}
|
|
||||||
className="bg-white border rounded shadow-sm py-1 px-2 text-start text-lowercase"
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "100%",
|
|
||||||
left: "50%",
|
|
||||||
transform: "translateX(-50%)",
|
|
||||||
zIndex: 1050,
|
|
||||||
minWidth: "220px",
|
|
||||||
marginTop: "8px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title && <h6 className="mb-2 text-capitalize">{title}</h6>}
|
|
||||||
<div className="text-capitalize">{content}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HoverPopup;
|
|
||||||
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import { useCallback } from "react";
|
import { useCallback } from "react";
|
||||||
|
|
||||||
const Modal = ({
|
const Modal = ({
|
||||||
@ -6,14 +7,16 @@ const Modal = ({
|
|||||||
title,
|
title,
|
||||||
body,
|
body,
|
||||||
disabled,
|
disabled,
|
||||||
size = "md",
|
size="md",
|
||||||
position = "top",
|
position="top",
|
||||||
}) => {
|
}) => {
|
||||||
const handleClose = useCallback(() => {
|
const handleClose = useCallback(() => {
|
||||||
if (disabled) return;
|
if (disabled) return;
|
||||||
onClose();
|
onClose();
|
||||||
}, [disabled, onClose]);
|
}, [disabled, onClose]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (!isOpen) return null;
|
if (!isOpen) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -23,24 +26,26 @@ const Modal = ({
|
|||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
>
|
>
|
||||||
<div
|
<div className={`modal-dialog modal-${size} modal-dialog-${position}`} role="document">
|
||||||
className={`modal-dialog modal-${size} modal-dialog-${position}`}
|
<div className="modal-content text-white shadow-lg">
|
||||||
role="document"
|
|
||||||
>
|
|
||||||
<div className="modal-content text-white shadow-lg">
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="modal-header justify-content-center pb-2 border-0">
|
<div className="modal-header pb-2 border-0">
|
||||||
<h5 className="modal-title">{title}</h5>
|
<h5 className="modal-title">{title}</h5>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn-close btn-close-white"
|
className="btn-close btn-close-white"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
></button>
|
>
|
||||||
|
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Body */}
|
{/* Body */}
|
||||||
<div className="modal-body pt-0">{body}</div>
|
<div className="modal-body pt-0">{body}</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,65 +3,35 @@ import React from "react";
|
|||||||
const ProgressBar = ({
|
const ProgressBar = ({
|
||||||
plannedWork = 100,
|
plannedWork = 100,
|
||||||
completedWork = 0,
|
completedWork = 0,
|
||||||
height = "6px",
|
height = "8px",
|
||||||
className = "mb-4",
|
className = "mb-4",
|
||||||
rounded = true,
|
rounded = true,
|
||||||
showLabel = true,
|
|
||||||
}) => {
|
}) => {
|
||||||
const getProgress = (planned, completed) => {
|
const getProgress = (planned, completed) => {
|
||||||
if (!planned || planned === 0) return 0;
|
if (!planned || planned === 0) return "0%";
|
||||||
return Math.min((completed / planned) * 100, 100);
|
return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const percentage = getProgress(plannedWork, completedWork);
|
const progressStyle = {
|
||||||
|
width: getProgress(plannedWork, completedWork),
|
||||||
const progressBarStyle = {
|
|
||||||
width: ` ${percentage.toFixed(2)}%`,
|
|
||||||
transition: "width 0.4s ease",
|
|
||||||
};
|
|
||||||
|
|
||||||
const containerStyle = {
|
|
||||||
height,
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "8px",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`d-flex align-items-center ${className}`}
|
className={`progress ${className} ${rounded ? "rounded" : ""}`}
|
||||||
style={containerStyle}
|
style={{ height }}
|
||||||
>
|
>
|
||||||
<div className="flex-grow-1">
|
<div
|
||||||
<div
|
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
||||||
className={`progress ${rounded ? "rounded" : ""}`}
|
role="progressbar"
|
||||||
style={{ height, backgroundColor: "#f0f0f0" }}
|
style={progressStyle}
|
||||||
>
|
aria-valuenow={completedWork}
|
||||||
<div
|
aria-valuemin="0"
|
||||||
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
aria-valuemax={plannedWork}
|
||||||
role="progressbar"
|
></div>
|
||||||
style={progressBarStyle}
|
|
||||||
aria-valuenow={completedWork}
|
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuemax={plannedWork}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showLabel && (
|
|
||||||
<span
|
|
||||||
className="fw-semibold text-secondary"
|
|
||||||
style={{
|
|
||||||
minWidth: "45px",
|
|
||||||
textAlign: "right",
|
|
||||||
fontSize: "0.8rem",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{percentage.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ProgressBar;
|
export default ProgressBar;
|
||||||
|
|
||||||
|
|||||||
@ -8,24 +8,24 @@ const SelectMultiple = ({
|
|||||||
name,
|
name,
|
||||||
options = [],
|
options = [],
|
||||||
label = "Select options",
|
label = "Select options",
|
||||||
labelKey = "name",
|
labelKey = "name",
|
||||||
valueKey = "id",
|
valueKey = "id",
|
||||||
placeholder = "Please select...",
|
placeholder = "Please select...",
|
||||||
IsLoading = false,required = false
|
IsLoading = false,
|
||||||
}) => {
|
}) => {
|
||||||
const { setValue, watch,register } = useFormContext();
|
const { setValue, watch } = useFormContext();
|
||||||
useEffect(() => {
|
const selectedValues = watch(name) || [];
|
||||||
register(name, { value: [] });
|
|
||||||
}, [register, name]);
|
|
||||||
|
|
||||||
const selectedValues = watch(name) || [];
|
|
||||||
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
||||||
const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
|
const [dropdownStyles, setDropdownStyles] = useState({
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: 0,
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (e) => {
|
const handleClickOutside = (e) => {
|
||||||
@ -64,14 +64,10 @@ const selectedValues = watch(name) || [];
|
|||||||
setValue(name, updated, { shouldValidate: true });
|
setValue(name, updated, { shouldValidate: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredOptions = (options || []).filter((item) => {
|
const filteredOptions = options.filter((item) => {
|
||||||
const label = getLabel(item);
|
const label = getLabel(item);
|
||||||
return (
|
return label?.toLowerCase().includes(searchText.toLowerCase());
|
||||||
typeof label === "string" &&
|
});
|
||||||
label.toLowerCase().includes(searchText.toLowerCase())
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const dropdownElement = (
|
const dropdownElement = (
|
||||||
<div
|
<div
|
||||||
@ -109,8 +105,14 @@ const selectedValues = watch(name) || [];
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={valueVal}
|
key={valueVal}
|
||||||
className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
|
className={`multi-select-dropdown-option ${
|
||||||
style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
|
isChecked ? "selected" : ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: "4px 8px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -139,9 +141,12 @@ const selectedValues = watch(name) || [];
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
|
<div
|
||||||
<label className="form-label mb-1">{label}</label>
|
ref={containerRef}
|
||||||
<Label className={name} required={required}></Label>
|
className="multi-select-dropdown-container"
|
||||||
|
style={{ position: "relative" }}
|
||||||
|
>
|
||||||
|
<label>{label}</label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="multi-select-dropdown-header"
|
className="multi-select-dropdown-header"
|
||||||
@ -150,7 +155,9 @@ const selectedValues = watch(name) || [];
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={
|
className={
|
||||||
selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
|
selectedValues.length > 0
|
||||||
|
? "placeholder-style-selected"
|
||||||
|
: "placeholder-style"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="selected-badges-container">
|
<div className="selected-badges-container">
|
||||||
@ -159,7 +166,10 @@ const selectedValues = watch(name) || [];
|
|||||||
const found = options.find((opt) => opt[valueKey] === val);
|
const found = options.find((opt) => opt[valueKey] === val);
|
||||||
const label = found ? getLabel(found) : "";
|
const label = found ? getLabel(found) : "";
|
||||||
return (
|
return (
|
||||||
<span key={val} className="badge badge-selected-item mx-1 mb-1">
|
<span
|
||||||
|
key={val}
|
||||||
|
className="badge badge-selected-item mx-1 mb-1"
|
||||||
|
>
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,143 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { useImageGalleryFilter } from "../../hooks/useImageGallery";
|
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
||||||
import { FormProvider, useForm } from "react-hook-form";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { defaultGalleryFilterValue, gallerySchema } from "./GallerySchema";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
import { localToUtc } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const GalleryFilterPanel = ({ onApply }) => {
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const [resetKey, setResetKey] = useState(0);
|
|
||||||
|
|
||||||
const { data, isLoading, isError, error } =
|
|
||||||
useImageGalleryFilter(selectedProject);
|
|
||||||
|
|
||||||
const closePanel = () => {
|
|
||||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
|
||||||
};
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: zodResolver(gallerySchema),
|
|
||||||
defaultValues: defaultGalleryFilterValue,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
register,
|
|
||||||
setValue,reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
onApply({
|
|
||||||
...formData,
|
|
||||||
startDate: localToUtc(formData.startDate),
|
|
||||||
endDate: localToUtc(formData.endDate),
|
|
||||||
});
|
|
||||||
closePanel()
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClear=()=>{
|
|
||||||
reset(defaultGalleryFilterValue);
|
|
||||||
setResetKey((prev) => prev + 1);
|
|
||||||
closePanel()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading) return <div>Loading....</div>;
|
|
||||||
if (isError) return <div>{error.message}</div>;
|
|
||||||
return (
|
|
||||||
<div className="d-block text-start">
|
|
||||||
<FormProvider {...methods}>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="mb-2">
|
|
||||||
<Label>Select Date:</Label>
|
|
||||||
<DateRangePicker1
|
|
||||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
|
||||||
startField="startDate"
|
|
||||||
endField="endDate"
|
|
||||||
resetSignal={resetKey}
|
|
||||||
defaultRange={false}
|
|
||||||
maxDate={new Date()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="buildingIds"
|
|
||||||
label="Select building:"
|
|
||||||
options={data?.buildings}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="floorIds"
|
|
||||||
label="Select Floor:"
|
|
||||||
options={data?.floors}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="workAreaIds"
|
|
||||||
label="Select Work Area:"
|
|
||||||
options={data?.workAreas}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="workCategoryIds"
|
|
||||||
label="Select Work Category:"
|
|
||||||
options={data?.workCategories}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="activityIds"
|
|
||||||
label="Select Activity:"
|
|
||||||
options={data?.activities}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="uploadedByIds"
|
|
||||||
label="Select Uploaded By:"
|
|
||||||
options={data?.UploadedBys}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="serviceIds"
|
|
||||||
label="Select Service:"
|
|
||||||
options={data?.services}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex flex-row gap-3 justify-content-end">
|
|
||||||
<button className="btn btn-sm btn-label-secondary" onClick={onClear}>Cancel</button>
|
|
||||||
<button type="submit" className="btn btn-sm btn-primary">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</FormProvider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GalleryFilterPanel;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
export const gallerySchema = z.object({
|
|
||||||
buildingIds: z.array(z.string()).optional(),
|
|
||||||
floorIds: z.array(z.string()).optional(),
|
|
||||||
workAreaIds: z.array(z.string()).optional(),
|
|
||||||
activityIds: z.array(z.string()).optional(),
|
|
||||||
workCategoryIds: z.array(z.string()).optional(),
|
|
||||||
startDate: z.string().optional(),
|
|
||||||
endDate: z.string().optional(),
|
|
||||||
uploadedByIds: z.array(z.string()).optional(),
|
|
||||||
serviceIds: z.array(z.string()).optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const defaultGalleryFilterValue = {
|
|
||||||
buildingIds: [],
|
|
||||||
floorIds: [],
|
|
||||||
workAreaIds: [],
|
|
||||||
activityIds: [],
|
|
||||||
workCategoryIds:[],
|
|
||||||
startDate: null,
|
|
||||||
endDate: null,
|
|
||||||
uploadedByIds:[],
|
|
||||||
serviceIds: [],
|
|
||||||
};
|
|
||||||
@ -1,169 +0,0 @@
|
|||||||
import React, { useRef, useState, useCallback, useEffect } from "react";
|
|
||||||
import moment from "moment";
|
|
||||||
import Avatar from "../../components/common/Avatar";
|
|
||||||
import { useGalleryContext } from "../../pages/Gallary/ImageGallaryPage";
|
|
||||||
import useImageGallery from "../../hooks/useImageGallery";
|
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import Loader from "../common/Loader";
|
|
||||||
|
|
||||||
const ImageGalleryListView = ({filter}) => {
|
|
||||||
const [hoveredImage, setHoveredImage] = useState(null);
|
|
||||||
const selectedProject = useSelectedProject();
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const { setOpenGallery } = useGalleryContext();
|
|
||||||
|
|
||||||
const { data, isLoading, isError, error } = useImageGallery(
|
|
||||||
selectedProject,
|
|
||||||
currentPage,
|
|
||||||
10,
|
|
||||||
filter
|
|
||||||
);
|
|
||||||
|
|
||||||
const paginate = (page) => {
|
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!data?.data?.length && !isLoading) {
|
|
||||||
return (
|
|
||||||
<p className="text-center text-muted mt-5">
|
|
||||||
{selectedProject ? " No images match the selected filters.":"Please Select Project!"}
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="page-min-h d-flex justify-content-center align-items-center">
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="main-content">
|
|
||||||
<div className="activity-section">
|
|
||||||
{data?.data?.map((batch) => {
|
|
||||||
if (!batch.documents?.length) return null;
|
|
||||||
|
|
||||||
const doc = batch.documents[0];
|
|
||||||
const userName = `${doc.uploadedBy?.firstName || ""} ${
|
|
||||||
doc.uploadedBy?.lastName || ""
|
|
||||||
}`.trim();
|
|
||||||
const date = formatUTCToLocalTime(doc.uploadedAt);
|
|
||||||
// const hasArrows = batch.documents.length > scrollThreshold;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={batch.batchId} className="grouped-section">
|
|
||||||
<div className="group-heading">
|
|
||||||
<div className="d-flex align-items-center mb-1">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
firstName={doc.uploadedBy?.firstName}
|
|
||||||
lastName={doc.uploadedBy?.lastName}
|
|
||||||
className="me-2"
|
|
||||||
/>
|
|
||||||
<div className="d-flex flex-column align-items-start">
|
|
||||||
<strong className="user-name-text">{userName}</strong>
|
|
||||||
<span className="text-muted small">{date}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="location-line text-secondary">
|
|
||||||
<div className="d-flex align-items-center flex-wrap gap-1 text-secondary">
|
|
||||||
<span className="d-flex align-items-center">
|
|
||||||
<span>{batch.buildingName}</span>
|
|
||||||
<i className="bx bx-chevron-right " />
|
|
||||||
</span>
|
|
||||||
<span className="d-flex align-items-center">
|
|
||||||
<span>{batch.floorName}</span>
|
|
||||||
<i className="bx bx-chevron-right m" />
|
|
||||||
</span>
|
|
||||||
<span className="d-flex align-items-center ">
|
|
||||||
<span>{batch.workAreaName || "Unknown"}</span>
|
|
||||||
<i className="bx bx-chevron-right " />
|
|
||||||
<span>{batch.activityName}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{batch.workCategoryName && (
|
|
||||||
<span className="badge bg-label-primary ms-2">
|
|
||||||
{batch.workCategoryName}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="image-group-wrapper">
|
|
||||||
{/* {hasArrows && (
|
|
||||||
<button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>
|
|
||||||
‹
|
|
||||||
</button>
|
|
||||||
)} */}
|
|
||||||
<div
|
|
||||||
className="image-group-horizontal"
|
|
||||||
// ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
|
|
||||||
>
|
|
||||||
{batch.documents.map((d, i) => {
|
|
||||||
const hoverDate = moment().format("DD MMMM, YYYY");
|
|
||||||
const hoverTime = moment(d.uploadedAt).format("hh:mm A");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={d.id}
|
|
||||||
className="image-card"
|
|
||||||
onMouseEnter={() => setHoveredImage(d)}
|
|
||||||
onMouseLeave={() => setHoveredImage(null)}
|
|
||||||
onClick={() =>
|
|
||||||
setOpenGallery({
|
|
||||||
isOpen: true,
|
|
||||||
data: { data: batch, index: i },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="image-wrapper">
|
|
||||||
<img src={d.url} alt={`Image ${i + 1}`} />
|
|
||||||
</div>
|
|
||||||
{hoveredImage === d && (
|
|
||||||
<div className="image-hover-description">
|
|
||||||
<p>
|
|
||||||
<strong>Date:</strong> {hoverDate}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Time:</strong> {hoverTime}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Activity:</strong> {batch.activityName}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{/* {hasArrows && (
|
|
||||||
<button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>
|
|
||||||
‹
|
|
||||||
</button>
|
|
||||||
)} */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data?.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ImageGalleryListView;
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
|
|
||||||
const ViewGallery = ({ batch, index }) => {
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [currentIndex, setCurrentIndex] = useState(index);
|
|
||||||
console.log(batch);
|
|
||||||
useEffect(() => {
|
|
||||||
setCurrentIndex(index);
|
|
||||||
}, [index, batch]);
|
|
||||||
|
|
||||||
if (!batch || !batch.documents || batch.documents.length === 0) return null;
|
|
||||||
|
|
||||||
const image = batch.documents[currentIndex];
|
|
||||||
if (!image) return null;
|
|
||||||
|
|
||||||
const fullName = `${image.uploadedBy?.firstName || ""} ${
|
|
||||||
image.uploadedBy?.lastName || ""
|
|
||||||
}`.trim();
|
|
||||||
const date = formatUTCToLocalTime(image.uploadedAt);
|
|
||||||
|
|
||||||
const buildingName = batch.buildingName;
|
|
||||||
const floorName = batch.floorName;
|
|
||||||
const workAreaName = batch.workAreaName;
|
|
||||||
const activityName = batch.activityName;
|
|
||||||
const batchComment = batch.comment;
|
|
||||||
|
|
||||||
const handlePrev = () => {
|
|
||||||
setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNext = () => {
|
|
||||||
setCurrentIndex((prevIndex) =>
|
|
||||||
Math.min(batch.documents.length - 1, prevIndex + 1)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const hasPrev = currentIndex > 0;
|
|
||||||
const hasNext = currentIndex < batch.documents.length - 1;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
|
|
||||||
{loading && <p>Loading...</p>}
|
|
||||||
<div className="position-relative d-flex justify-content-center align-items-center">
|
|
||||||
{hasPrev && (
|
|
||||||
<button
|
|
||||||
className="btn btn-icon btn-outline-primary rounded-circle position-absolute start-0 top-50 translate-middle-y shadow"
|
|
||||||
onClick={handlePrev}
|
|
||||||
>
|
|
||||||
<i className="bx bx-chevron-left fs-4"></i>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<img
|
|
||||||
src={image.url}
|
|
||||||
alt="Preview"
|
|
||||||
className="img-fluid rounded"
|
|
||||||
style={{
|
|
||||||
maxHeight: "500px",
|
|
||||||
width: "100%",
|
|
||||||
objectFit: "contain",
|
|
||||||
}}
|
|
||||||
onLoad={() => setLoading(false)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{hasNext && (
|
|
||||||
<button
|
|
||||||
className="btn btn-icon btn-outline-primary position-absolute end-0 top-50 translate-middle-y rounded-circle shadow"
|
|
||||||
onClick={handleNext}
|
|
||||||
>
|
|
||||||
<i className="bx bx-chevron-right fs-4"></i>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Details */}
|
|
||||||
<div className="mt-3 text-start small">
|
|
||||||
<p className="mb-1">
|
|
||||||
<i className="bx bxs-user me-2"></i>
|
|
||||||
<span className="text-muted">Uploaded By: </span>
|
|
||||||
<span className="fw-semibold">{fullName}</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="mb-1">
|
|
||||||
<i className="bx bxs-calendar me-2"></i>
|
|
||||||
<span className="text-muted">Date: </span>
|
|
||||||
<span className="fw-semibold">{date}</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="mb-1">
|
|
||||||
<i className="bx bx-map me-2"></i>
|
|
||||||
<span className="text-muted">Location: </span>
|
|
||||||
<span className="fw-semibold">
|
|
||||||
{buildingName} <i className="bx bx-chevron-right"></i> {floorName}{" "}
|
|
||||||
<i className="bx bx-chevron-right"></i> {workAreaName || "Unknown"}{" "}
|
|
||||||
<i className="bx bx-chevron-right"></i> {activityName}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="mb-0">
|
|
||||||
<i className="bx bx-comment-dots me-2"></i>
|
|
||||||
<span className="text-muted">Comment: </span>
|
|
||||||
<span className="fw-semibold">{batchComment}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ViewGallery;
|
|
||||||
@ -3,23 +3,20 @@ import { useFieldArray, useForm } from "react-hook-form";
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
|
||||||
import {
|
import { MasterRespository } from "../../repositories/MastersRepository";
|
||||||
useCreateActivity,
|
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
|
||||||
useUpdateActivity,
|
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||||
} from "../../../hooks/masterHook/useMaster";
|
import showToast from "../../services/toastService";
|
||||||
import Label from "../../common/Label";
|
import { useCreateActivity } from "../../hooks/masterHook/useMaster";
|
||||||
|
import Label from "../common/Label";
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
activityName: z.string().min(1, { message: "Activity Name is required" }),
|
activityName: z.string().min(1, { message: "Activity Name is required" }),
|
||||||
unitOfMeasurement: z
|
unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
|
||||||
.string()
|
|
||||||
.min(1, { message: "Unit of Measurement is required" }),
|
|
||||||
checkList: z
|
checkList: z
|
||||||
.array(
|
.array(
|
||||||
z.object({
|
z.object({
|
||||||
description: z
|
description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
|
||||||
.string()
|
|
||||||
.min(1, { message: "descriptionlist item cannot be empty" }),
|
|
||||||
isMandatory: z.boolean().default(false),
|
isMandatory: z.boolean().default(false),
|
||||||
id: z.any().default(null),
|
id: z.any().default(null),
|
||||||
})
|
})
|
||||||
@ -27,14 +24,9 @@ const schema = z.object({
|
|||||||
.optional(),
|
.optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
const CreateActivity = ({ onClose }) => {
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(
|
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
|
||||||
() => close?.()
|
|
||||||
);
|
|
||||||
const { mutate: UpdateActivity, isPending: isUpdating } = useUpdateActivity(
|
|
||||||
() => close?.()
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -83,107 +75,82 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
|||||||
append({ id: null, description: "", isMandatory: false });
|
append({ id: null, description: "", isMandatory: false });
|
||||||
}, [checkListItems, getValues, append, setError, clearErrors]);
|
}, [checkListItems, getValues, append, setError, clearErrors]);
|
||||||
|
|
||||||
const removeChecklistItem = useCallback(
|
const removeChecklistItem = useCallback((index) => {
|
||||||
(index) => {
|
remove(index);
|
||||||
remove(index);
|
}, [remove]);
|
||||||
},
|
|
||||||
[remove]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleChecklistChange = useCallback(
|
const handleChecklistChange = useCallback((index, value) => {
|
||||||
(index, value) => {
|
setValue(`checkList.${index}`, value);
|
||||||
setValue(`checkList.${index}`, value);
|
}, [setValue]);
|
||||||
},
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
const onSubmit = (formData) => {
|
||||||
let payload = {
|
createActivity(formData);
|
||||||
...formData,
|
|
||||||
activityGroupId: whichGroup,
|
|
||||||
};
|
|
||||||
if (activity) {
|
|
||||||
UpdateActivity({ id: activity.id, payload: payload });
|
|
||||||
} else {
|
|
||||||
createActivity(payload);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
// const onSubmit = (data) => {
|
||||||
|
// setIsLoading(true);
|
||||||
|
|
||||||
useEffect(() => {
|
// MasterRespository.createActivity(data)
|
||||||
if (activity) {
|
// .then( ( resp ) =>
|
||||||
reset({
|
// {
|
||||||
activityName: activity.activityName || "",
|
|
||||||
unitOfMeasurement: activity.unitOfMeasurement || "",
|
// const cachedData = getCachedData("Activity");
|
||||||
checkList: activity.checkLists?.map((check) => ({
|
// const updatedData = [ ...cachedData, resp?.data ];
|
||||||
id: check.id || null, // Use the ID provided in the checklist
|
// cacheData("Activity", updatedData);
|
||||||
description: check.description || "",
|
// showToast("Activity Successfully Added.", "success");
|
||||||
isMandatory: check.isMandatory || false,
|
// setIsLoading(false);
|
||||||
})) || [{ description: "", isMandatory: false }], // Default to an empty checklist item
|
// handleClose()
|
||||||
});
|
// })
|
||||||
}
|
// .catch((error) => {
|
||||||
}, [activity, reset]);
|
// showToast(error.message, "error");
|
||||||
|
// setIsLoading(false);
|
||||||
|
// });
|
||||||
|
// };
|
||||||
const handleClose = useCallback(() => {
|
const handleClose = useCallback(() => {
|
||||||
reset();
|
reset();
|
||||||
close();
|
onClose();
|
||||||
}, [reset, close]);
|
}, [reset, onClose]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tooltipTriggerList = Array.from(
|
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
|
||||||
);
|
|
||||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||||
}, []);
|
}, []);
|
||||||
let isPending = isLoading || isUpdating;
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="px-7">
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* <h6>Create Activity</h6> */}
|
{/* <h6>Create Activity</h6> */}
|
||||||
<div className="row border border-1 border-secondary rounded-3 mt-2">
|
<div className="row">
|
||||||
<div className="col-6 text-start mt-3">
|
<div className="col-6 text-start">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>Activity</Label>
|
||||||
Activity
|
|
||||||
</Label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("activityName")}
|
{...register("activityName")}
|
||||||
className={`form-control form-control-sm ${
|
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
|
||||||
errors.activityName ? "is-invalid" : ""
|
}`}
|
||||||
}`}
|
|
||||||
/>
|
/>
|
||||||
{errors.activityName && (
|
{errors.activityName && (
|
||||||
<p className="danger-text">{errors.activityName.message}</p>
|
<p className="danger-text">{errors.activityName.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-6 text-start mt-3">
|
<div className="col-6 text-start">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>Measurement</Label>
|
||||||
Measurement
|
|
||||||
</Label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("unitOfMeasurement")}
|
{...register("unitOfMeasurement")}
|
||||||
className={`form-control form-control-sm ${
|
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
|
||||||
errors.unitOfMeasurement ? "is-invalid" : ""
|
}`}
|
||||||
}`}
|
|
||||||
/>
|
/>
|
||||||
{errors.unitOfMeasurement && (
|
{errors.unitOfMeasurement && (
|
||||||
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
|
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-12 text-start mt-3">
|
<div className="col-md-12 text-start mt-1">
|
||||||
<label className="py-1 form-label my-0">
|
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
|
||||||
Add Check List <i
|
{checkListItems.length > 0 && (
|
||||||
className="bx bx-plus-circle text-primary cursor-pointer"
|
<table className="table mt-1 border-0">
|
||||||
data-bs-toggle="tooltip"
|
<thead className="py-0 my-0 table-border-top-0">
|
||||||
title="Add Check"
|
<tr className="py-1">
|
||||||
data-bs-original-title="Add check"
|
|
||||||
onClick={addChecklistItem}
|
|
||||||
></i>
|
|
||||||
</label>
|
|
||||||
{checkListItems.length > 0 ? (
|
|
||||||
<table className="table mt-1 border-none">
|
|
||||||
<thead className="py-0 my-0 border-none ">
|
|
||||||
<tr className="py-1 border-secondary ">
|
|
||||||
<th colSpan={2} className="py-1">
|
<th colSpan={2} className="py-1">
|
||||||
<small>Name</small>
|
<small>Name</small>
|
||||||
</th>
|
</th>
|
||||||
@ -193,10 +160,10 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
|||||||
<th className="text-center py-1">Action</th>
|
<th className="text-center py-1">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="table-border-bottom-0 border-secondary ">
|
<tbody className="table-border-bottom-0 ">
|
||||||
{checkListItems.map((item, index) => (
|
{checkListItems.map((item, index) => (
|
||||||
<tr key={index}>
|
<tr key={index} className="border-top-0">
|
||||||
<td colSpan={2} className="border-none" >
|
<td colSpan={2} className="border-top-0 border-0">
|
||||||
<input
|
<input
|
||||||
className="d-none"
|
className="d-none"
|
||||||
{...register(`checkList.${index}.id`)}
|
{...register(`checkList.${index}.id`)}
|
||||||
@ -218,7 +185,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
|||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td colSpan={2} className="text-center border-none">
|
<td colSpan={2} className="text-center border-0">
|
||||||
<input
|
<input
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -226,44 +193,49 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
|||||||
defaultChecked={item.isMandatory}
|
defaultChecked={item.isMandatory}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-center border-none">
|
<td className="text-center border-0">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => removeChecklistItem(index)}
|
onClick={() => removeChecklistItem(index)}
|
||||||
className="btn btn-xs btn-icon btn-text-secondary"
|
className="btn btn-xs btn-icon btn-text-secondary"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
|
||||||
className="bx bxs-minus-circle text-danger"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
title="Remove Check"
|
title="Remove Check"
|
||||||
data-bs-original-title="Remove check"
|
data-bs-original-title="Remove check"></i>
|
||||||
></i>
|
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
):(<div className="d-flex justify-content-center my-0"><p className="text-secondary m-0">Not Yet Added</p> </div>)}
|
)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-primary mt-2"
|
||||||
|
onClick={addChecklistItem}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
|
||||||
|
title="Add Check"
|
||||||
|
data-bs-original-title="Add check" ></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-end mt-3 mb-4">
|
<div className="col-12 text-end mt-3">
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
disabled={isPending}
|
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn btn-sm btn-primary">
|
<button type="submit" className="btn btn-sm btn-primary">
|
||||||
{isPending ? "Please Wait" : activity ? "Update" : "Submit"}
|
{isLoading ? "Please Wait" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ManageActivity;
|
export default CreateActivity;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user