Merge branch 'development' of https://github.com/defuj/eis
This commit is contained in:
Dede Fuji Abdul
commit
af05f641f3
430
package-lock.json
generated
430
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "eis",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.8.7",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
"@heroicons/vue": "^2.0.18",
|
||||
@ -21,6 +22,8 @@
|
||||
"encrypt-storage": "^2.12.16",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"graphql": "^16.8.1",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"jspdf": "^2.5.1",
|
||||
"pinia": "^2.1.3",
|
||||
"qs": "^6.11.2",
|
||||
@ -92,6 +95,52 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@apollo/client": {
|
||||
"version": "3.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.7.tgz",
|
||||
"integrity": "sha512-DnQtFkQrCyxHTSa9gR84YRLmU/al6HeXcLZazVe+VxKBmx/Hj4rV8xWtzfWYX5ijartsqDR7SJgV037MATEecA==",
|
||||
"dependencies": {
|
||||
"@graphql-typed-document-node/core": "^3.1.1",
|
||||
"@wry/context": "^0.7.3",
|
||||
"@wry/equality": "^0.5.6",
|
||||
"@wry/trie": "^0.4.3",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"optimism": "^0.17.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"response-iterator": "^0.2.6",
|
||||
"symbol-observable": "^4.0.0",
|
||||
"ts-invariant": "^0.10.3",
|
||||
"tslib": "^2.3.0",
|
||||
"zen-observable-ts": "^1.2.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
|
||||
"graphql-ws": "^5.5.5",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"graphql-ws": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"subscriptions-transport-ws": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@apollo/client/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.22.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
|
||||
@ -1015,6 +1064,14 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
|
||||
"integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
|
||||
},
|
||||
"node_modules/@graphql-typed-document-node/core": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
|
||||
"integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
|
||||
"peerDependencies": {
|
||||
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@headlessui/tailwindcss": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
|
||||
@ -2198,6 +2255,54 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@wry/context": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
|
||||
"integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@wry/context/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/@wry/equality": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
|
||||
"integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@wry/equality/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/@wry/trie": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
|
||||
"integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@wry/trie/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/abab": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
@ -4883,6 +4988,33 @@
|
||||
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/graphql": {
|
||||
"version": "16.8.1",
|
||||
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
|
||||
"integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/graphql-tag": {
|
||||
"version": "2.12.6",
|
||||
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
|
||||
"integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/graphql-tag/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
|
||||
@ -5031,6 +5163,19 @@
|
||||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hosted-git-info": {
|
||||
"version": "2.8.9",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
|
||||
@ -5624,8 +5769,7 @@
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
"version": "4.1.0",
|
||||
@ -5984,6 +6128,17 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
|
||||
"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lottie-web": {
|
||||
"version": "5.12.2",
|
||||
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
|
||||
@ -6528,6 +6683,21 @@
|
||||
"opencollective-postinstall": "index.js"
|
||||
}
|
||||
},
|
||||
"node_modules/optimism": {
|
||||
"version": "0.17.5",
|
||||
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.17.5.tgz",
|
||||
"integrity": "sha512-TEcp8ZwK1RczmvMnvktxHSF2tKgMWjJ71xEFGX5ApLh67VsMSTy1ZUlipJw8W+KaqgOmQ+4pqwkeivY89j+4Vw==",
|
||||
"dependencies": {
|
||||
"@wry/context": "^0.7.0",
|
||||
"@wry/trie": "^0.4.3",
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/optimism/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/optionator": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
|
||||
@ -7020,6 +7190,21 @@
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/proto-list": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
|
||||
@ -7303,6 +7488,14 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/response-iterator": {
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.6.tgz",
|
||||
"integrity": "sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/reusify": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
|
||||
@ -7973,6 +8166,14 @@
|
||||
"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/symbol-observable": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
|
||||
"integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
@ -8230,6 +8431,22 @@
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
|
||||
},
|
||||
"node_modules/ts-invariant": {
|
||||
"version": "0.10.3",
|
||||
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
|
||||
"integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-invariant/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/ts-node": {
|
||||
"version": "10.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
|
||||
@ -9154,6 +9371,19 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/zen-observable": {
|
||||
"version": "0.8.15",
|
||||
"resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
|
||||
"integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
|
||||
},
|
||||
"node_modules/zen-observable-ts": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
|
||||
"integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
|
||||
"dependencies": {
|
||||
"zen-observable": "0.8.15"
|
||||
}
|
||||
},
|
||||
"node_modules/zip-stream": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
|
||||
@ -9242,6 +9472,33 @@
|
||||
"@jridgewell/trace-mapping": "^0.3.9"
|
||||
}
|
||||
},
|
||||
"@apollo/client": {
|
||||
"version": "3.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.7.tgz",
|
||||
"integrity": "sha512-DnQtFkQrCyxHTSa9gR84YRLmU/al6HeXcLZazVe+VxKBmx/Hj4rV8xWtzfWYX5ijartsqDR7SJgV037MATEecA==",
|
||||
"requires": {
|
||||
"@graphql-typed-document-node/core": "^3.1.1",
|
||||
"@wry/context": "^0.7.3",
|
||||
"@wry/equality": "^0.5.6",
|
||||
"@wry/trie": "^0.4.3",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"optimism": "^0.17.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"response-iterator": "^0.2.6",
|
||||
"symbol-observable": "^4.0.0",
|
||||
"ts-invariant": "^0.10.3",
|
||||
"tslib": "^2.3.0",
|
||||
"zen-observable-ts": "^1.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/code-frame": {
|
||||
"version": "7.22.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
|
||||
@ -9827,6 +10084,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@graphql-typed-document-node/core": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
|
||||
"integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"@headlessui/tailwindcss": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
|
||||
@ -10710,6 +10973,51 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@wry/context": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
|
||||
"integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
|
||||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@wry/equality": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
|
||||
"integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
|
||||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@wry/trie": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
|
||||
"integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
|
||||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"abab": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
@ -12737,6 +13045,26 @@
|
||||
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
|
||||
"dev": true
|
||||
},
|
||||
"graphql": {
|
||||
"version": "16.8.1",
|
||||
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
|
||||
"integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw=="
|
||||
},
|
||||
"graphql-tag": {
|
||||
"version": "2.12.6",
|
||||
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
|
||||
"integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
|
||||
"requires": {
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
|
||||
@ -12834,6 +13162,21 @@
|
||||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"hosted-git-info": {
|
||||
"version": "2.8.9",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
|
||||
@ -13241,8 +13584,7 @@
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "4.1.0",
|
||||
@ -13551,6 +13893,14 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
|
||||
"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"lottie-web": {
|
||||
"version": "5.12.2",
|
||||
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
|
||||
@ -13963,6 +14313,23 @@
|
||||
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
|
||||
"integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
|
||||
},
|
||||
"optimism": {
|
||||
"version": "0.17.5",
|
||||
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.17.5.tgz",
|
||||
"integrity": "sha512-TEcp8ZwK1RczmvMnvktxHSF2tKgMWjJ71xEFGX5ApLh67VsMSTy1ZUlipJw8W+KaqgOmQ+4pqwkeivY89j+4Vw==",
|
||||
"requires": {
|
||||
"@wry/context": "^0.7.0",
|
||||
"@wry/trie": "^0.4.3",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"optionator": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
|
||||
@ -14274,6 +14641,23 @@
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"proto-list": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
|
||||
@ -14506,6 +14890,11 @@
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
|
||||
"dev": true
|
||||
},
|
||||
"response-iterator": {
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.6.tgz",
|
||||
"integrity": "sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw=="
|
||||
},
|
||||
"reusify": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
|
||||
@ -14998,6 +15387,11 @@
|
||||
"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
|
||||
"dev": true
|
||||
},
|
||||
"symbol-observable": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
|
||||
"integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ=="
|
||||
},
|
||||
"symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
@ -15201,6 +15595,21 @@
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
|
||||
},
|
||||
"ts-invariant": {
|
||||
"version": "0.10.3",
|
||||
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
|
||||
"integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
|
||||
"requires": {
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"ts-node": {
|
||||
"version": "10.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
|
||||
@ -15806,6 +16215,19 @@
|
||||
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"zen-observable": {
|
||||
"version": "0.8.15",
|
||||
"resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
|
||||
"integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
|
||||
},
|
||||
"zen-observable-ts": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
|
||||
"integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
|
||||
"requires": {
|
||||
"zen-observable": "0.8.15"
|
||||
}
|
||||
},
|
||||
"zip-stream": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.8.7",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
"@heroicons/vue": "^2.0.18",
|
||||
@ -27,6 +28,8 @@
|
||||
"encrypt-storage": "^2.12.16",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"graphql": "^16.8.1",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"jspdf": "^2.5.1",
|
||||
"pinia": "^2.1.3",
|
||||
"qs": "^6.11.2",
|
||||
|
||||
@ -1095,6 +1095,10 @@ select {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.line-clamp-1 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
@ -1158,6 +1162,10 @@ select {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
@ -1195,6 +1203,10 @@ select {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.h-\[56px\] {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.max-h-0 {
|
||||
max-height: 0px;
|
||||
}
|
||||
@ -1219,6 +1231,10 @@ select {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-\[56px\] {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
@ -1287,6 +1303,10 @@ select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-\[170px\] {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
@ -1448,6 +1468,10 @@ select {
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@ -1542,6 +1566,12 @@ select {
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
@ -1682,11 +1712,6 @@ select {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.\!bg-primary-500 {
|
||||
--tw-bg-opacity: 1 !important;
|
||||
background-color: rgb(3 91 113 / var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
@ -2576,6 +2601,11 @@ select {
|
||||
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-primary-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
@ -2669,6 +2699,10 @@ select {
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.focus\:ring-offset-0:focus {
|
||||
--tw-ring-offset-width: 0px;
|
||||
}
|
||||
|
||||
.focus-visible\:outline:focus-visible {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
76
src/components/Dialogs/DetailDialog.vue
Normal file
76
src/components/Dialogs/DetailDialog.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
TransitionChild,
|
||||
TransitionRoot
|
||||
} from '@headlessui/vue'
|
||||
defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['onClose'])
|
||||
const handleOnClose = () => {
|
||||
emit('onClose')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TransitionRoot as="template" :show="open">
|
||||
<Dialog as="div" class="relative z-20" @close="handleOnClose">
|
||||
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
|
||||
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
|
||||
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
|
||||
<TransitionChild as="template" enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
||||
<DialogPanel
|
||||
:class="['sm:max-w-lg relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
|
||||
<!-- Body Section -->
|
||||
<div class="px-4 py-4 bg-gray-50">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex items-start justify-between w-full">
|
||||
<DialogTitle as="h3" class="flex-1 text-2xl font-semibold leading-6 text-gray-900">
|
||||
{{ title }}
|
||||
</DialogTitle>
|
||||
<div class="flex items-center ml-3 h-7">
|
||||
<button type="button"
|
||||
class="rounded-full focus:outline-none focus:ring-0 focus:ring-offset-0"
|
||||
@click="handleOnClose">
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 2.75C10.0716 2.75 8.18657 3.32183 6.58319 4.39317C4.97982 5.46451 3.73013 6.98726 2.99218 8.76884C2.25422 10.5504 2.06114 12.5108 2.43735 14.4021C2.81355 16.2934 3.74215 18.0307 5.10571 19.3943C6.46928 20.7579 8.20656 21.6865 10.0979 22.0627C11.9892 22.4389 13.9496 22.2458 15.7312 21.5078C17.5127 20.7699 19.0355 19.5202 20.1068 17.9168C21.1782 16.3134 21.75 14.4284 21.75 12.5C21.7473 9.91498 20.7192 7.43661 18.8913 5.60872C17.0634 3.78084 14.585 2.75273 12 2.75ZM15.5306 14.9694C15.6003 15.0391 15.6556 15.1218 15.6933 15.2128C15.731 15.3039 15.7504 15.4015 15.7504 15.5C15.7504 15.5985 15.731 15.6961 15.6933 15.7872C15.6556 15.8782 15.6003 15.9609 15.5306 16.0306C15.4609 16.1003 15.3782 16.1556 15.2872 16.1933C15.1961 16.231 15.0986 16.2504 15 16.2504C14.9015 16.2504 14.8039 16.231 14.7128 16.1933C14.6218 16.1556 14.5391 16.1003 14.4694 16.0306L12 13.5603L9.53063 16.0306C9.46095 16.1003 9.37822 16.1556 9.28718 16.1933C9.19613 16.231 9.09855 16.2504 9 16.2504C8.90146 16.2504 8.80388 16.231 8.71283 16.1933C8.62179 16.1556 8.53906 16.1003 8.46938 16.0306C8.3997 15.9609 8.34442 15.8782 8.30671 15.7872C8.269 15.6961 8.24959 15.5985 8.24959 15.5C8.24959 15.4015 8.269 15.3039 8.30671 15.2128C8.34442 15.1218 8.3997 15.0391 8.46938 14.9694L10.9397 12.5L8.46938 10.0306C8.32865 9.88989 8.24959 9.69902 8.24959 9.5C8.24959 9.30098 8.32865 9.11011 8.46938 8.96937C8.61011 8.82864 8.80098 8.74958 9 8.74958C9.19903 8.74958 9.3899 8.82864 9.53063 8.96937L12 11.4397L14.4694 8.96937C14.5391 8.89969 14.6218 8.84442 14.7128 8.8067C14.8039 8.76899 14.9015 8.74958 15 8.74958C15.0986 8.74958 15.1961 8.76899 15.2872 8.8067C15.3782 8.84442 15.4609 8.89969 15.5306 8.96937C15.6003 9.03906 15.6556 9.12178 15.6933 9.21283C15.731 9.30387 15.7504 9.40145 15.7504 9.5C15.7504 9.59855 15.731 9.69613 15.6933 9.78717C15.6556 9.87822 15.6003 9.96094 15.5306 10.0306L13.0603 12.5L15.5306 14.9694Z"
|
||||
fill="#343330" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full mt-6">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
@ -43,8 +43,8 @@ const switchInputType = () => {
|
||||
|
||||
<template>
|
||||
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
|
||||
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value"
|
||||
:disabled="disabled" :readonly="readonly"
|
||||
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" :disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-50 focus:outline-0 focus:border-0 focus:ring-0']" />
|
||||
<span @click="switchInputType" v-if="type == 'password'"
|
||||
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
|
||||
|
||||
@ -16,48 +16,181 @@
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="no-laporan" />
|
||||
caption="No Laporan" cell-template="data" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan" />
|
||||
caption="Pembuat Laporan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
|
||||
caption="Tgl Lapor" />
|
||||
caption="Tgl Lapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
|
||||
caption="Tgl Dialihkan" />
|
||||
caption="Tgl Dialihkan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
|
||||
caption="Tgl Response" />
|
||||
caption="Tgl Response" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
|
||||
caption="Tgl Recovery" />
|
||||
caption="Tgl Recovery" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
|
||||
caption="Durasi Response Time" />
|
||||
caption="Durasi Response Time" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
|
||||
caption="Durasi Recovery Time" />
|
||||
caption="Durasi Recovery Time" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
|
||||
caption="Posko Awal" />
|
||||
caption="Posko Awal" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
|
||||
caption="Posko Tujuan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status"
|
||||
caption="Status" />
|
||||
caption="Posko Tujuan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
|
||||
cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
|
||||
caption="IDPEL/NO METER" />
|
||||
caption="IDPEL/NO METER" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" />
|
||||
caption="Nama Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" />
|
||||
caption="Alamat Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" />
|
||||
caption="No Telp Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" />
|
||||
caption="Keterangan Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan"
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
|
||||
<template #no-laporan="{ data }">
|
||||
<span class="cursor-pointer" @click="showData(data.text)">
|
||||
caption="Sumber Lapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
|
||||
cell-template="data" />
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Pembuat Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Dialihkan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Respon:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Durasi Response Time:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Durasi Recovery Time:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko Awal:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko Tujuan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Pembuat Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -73,9 +206,16 @@ import { Workbook } from 'exceljs'
|
||||
import { writeDataJson } from '@/utils/storage'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
|
||||
const dialog = useDialogStore()
|
||||
const data = ref<Data1[]>([])
|
||||
const dataDetail = ref<Data1>()
|
||||
const showDetail = ref(false)
|
||||
const closeDetail = () => {
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
@ -135,15 +275,12 @@ const createDummy = () => {
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const showData = (data: string) => {
|
||||
dialog.type = 'success'
|
||||
dialog.title = 'Detail Data'
|
||||
dialog.content = data
|
||||
dialog.confirmText = 'Tutup'
|
||||
dialog.open = true
|
||||
const showData = () => {
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -13,8 +13,9 @@
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column"
|
||||
:group-index="0" />
|
||||
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
|
||||
css-class="custom-table-column" :group-index="0" />
|
||||
<DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
@ -104,25 +105,24 @@
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
|
||||
display-format="{0}" />
|
||||
|
||||
<DxTotalItem name="total" summary-type="sum" display-format="Total" show-in-column="no"
|
||||
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
|
||||
<DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" summary-type="sum" display-format="{0}" show-in-column="laporan.total"
|
||||
column="laporan.total" css-class="text-white" />
|
||||
<DxTotalItem name="total" column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="responseTime.menit.total" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="responseTime.menit.max" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem name="total" column="responseTime.menit.min" summary-type="sum" display-format="{0}"
|
||||
<DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
|
||||
css-class="text-white" />
|
||||
@ -147,7 +147,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
|
||||
@ -191,125 +191,79 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
no: 1,
|
||||
posko: 'POSKO CONDET',
|
||||
laporan: {
|
||||
total: 10,
|
||||
sudahSelesai: {
|
||||
jml: 5,
|
||||
persen: 50,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 5,
|
||||
persen: 50,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 10,
|
||||
rataRata: 10,
|
||||
max: 10,
|
||||
min: 10,
|
||||
},
|
||||
const poskoOptions = ['POSKO A', 'POSKO B', 'POSKO C', 'POSKO D', 'POSKO E'];
|
||||
|
||||
const createDummy = () => {
|
||||
var dummy = data.value;
|
||||
for (let i = 1; i <= 50; i++) {
|
||||
const randomPosko = poskoOptions[Math.floor(Math.random() * poskoOptions.length)];
|
||||
|
||||
const totalLaporan = Math.floor(Math.random() * 21);
|
||||
const laporanSelesai = Math.floor(Math.random() * (totalLaporan + 1));
|
||||
const laporanBelumSelesai = totalLaporan - laporanSelesai;
|
||||
|
||||
const responseTimeTotal = Math.floor(Math.random() * 31);
|
||||
const responseTimeRataRata = (Math.random() * 21) + 10;
|
||||
const responseTimeMax = responseTimeRataRata + Math.floor(Math.random() * 11);
|
||||
const responseTimeMin = responseTimeRataRata - Math.floor(Math.random() * 11);
|
||||
|
||||
const responseTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
|
||||
const responseTimeKurangSla = laporanSelesai - responseTimeLebihSla;
|
||||
|
||||
const recoveryTimeTotal = Math.floor(Math.random() * 31);
|
||||
const recoveryTimeRataRata = (Math.random() * 21) + 10;
|
||||
const recoveryTimeMax = recoveryTimeRataRata + Math.floor(Math.random() * 11);
|
||||
const recoveryTimeMin = recoveryTimeRataRata - Math.floor(Math.random() * 11);
|
||||
|
||||
const recoveryTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
|
||||
const recoveryTimeKurangSla = laporanSelesai - recoveryTimeLebihSla;
|
||||
|
||||
const entry = {
|
||||
no: i,
|
||||
posko: randomPosko,
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 5,
|
||||
total: totalLaporan,
|
||||
sudahSelesai: {
|
||||
jml: laporanSelesai,
|
||||
persen: (laporanSelesai / totalLaporan) * 100,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: laporanBelumSelesai,
|
||||
persen: (laporanBelumSelesai / totalLaporan) * 100,
|
||||
},
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 10,
|
||||
rataRata: 10,
|
||||
max: 10,
|
||||
min: 10,
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: responseTimeTotal,
|
||||
rataRata: responseTimeRataRata,
|
||||
max: responseTimeMax,
|
||||
min: responseTimeMin,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: responseTimeLebihSla,
|
||||
kurangSla: responseTimeKurangSla,
|
||||
},
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 5,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
posko: 'POSKO CONDET',
|
||||
laporan: {
|
||||
total: 10,
|
||||
sudahSelesai: {
|
||||
jml: 5,
|
||||
persen: 50,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 5,
|
||||
persen: 50,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 10,
|
||||
rataRata: 10,
|
||||
max: 10,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 5,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 10,
|
||||
rataRata: 10,
|
||||
max: 10,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 5,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
posko: 'POSKO ANGKREK',
|
||||
laporan: {
|
||||
total: 10,
|
||||
sudahSelesai: {
|
||||
jml: 5,
|
||||
persen: 50,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 5,
|
||||
persen: 50,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 10,
|
||||
rataRata: 10,
|
||||
max: 10,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 5,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 10,
|
||||
rataRata: 10,
|
||||
max: 10,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 5,
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: recoveryTimeTotal,
|
||||
rataRata: recoveryTimeRataRata,
|
||||
max: recoveryTimeMax,
|
||||
min: recoveryTimeMin,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: recoveryTimeLebihSla,
|
||||
kurangSla: recoveryTimeKurangSla,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
dummy.push(entry);
|
||||
}
|
||||
data.value = dummy;
|
||||
}
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
@ -318,5 +272,6 @@ onMounted(() => {
|
||||
type: 'type-8',
|
||||
reportButton: true
|
||||
})
|
||||
createDummy()
|
||||
})
|
||||
</script>
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
@ -11,43 +12,213 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" alignment="center" data-field="" caption="Jml Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Nama Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Alamat Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="no" data-type="number"
|
||||
caption="No" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
|
||||
caption="Tgl Lapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
|
||||
caption="Tgl Response" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
|
||||
caption="Tgl Recovery" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
|
||||
cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
|
||||
cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_no_meter"
|
||||
caption="IDPEL/NO METER" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_lapor"
|
||||
caption="Sumber Lapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
|
||||
cell-template="data" />
|
||||
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tgl_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Response:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tgl_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tgl_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Jumlah Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Durasi Response Time:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Durasi Response Time:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status :
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_no_meter" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Telp Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumper Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.sumber_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.posko" class-name="flex-1 h-[56px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
|
||||
import InputText from '@/components/InputText.vue';
|
||||
|
||||
const dataDetail = ref<any>({})
|
||||
const showDetail = ref(false)
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
}
|
||||
|
||||
const showData = () => {
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
const closeDetail = () => {
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
no: 1,
|
||||
no_laporan: 'G5223091900003',
|
||||
tgl_lapor: '31/01/2023 15:33:19',
|
||||
tgl_response: '31/01/2023 16:56:25',
|
||||
tgl_recovery: '31/01/2023 17:08:28',
|
||||
jml_lapor: 1,
|
||||
durasi_response_time: '0-01:23:06',
|
||||
durasi_recovery_time: '0-01:35:08',
|
||||
status: 'Selesai',
|
||||
idpel_no_meter: '523013252126 / 1731807',
|
||||
nama_pelapor: 'IBU FELISIA',
|
||||
alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
|
||||
no_telp_pelapor: '082229870235',
|
||||
keterangan_pelapor: '-',
|
||||
sumber_lapor: '-',
|
||||
posko: 'POSKO ULP SEMARANG',
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
no_laporan: 'G5223091900673',
|
||||
tgl_lapor: '31/01/2023 12:35:37',
|
||||
tgl_response: '31/01/2023 13:39:01',
|
||||
tgl_recovery: '31/01/2023 14:10:53',
|
||||
jml_lapor: 1,
|
||||
durasi_response_time: '0-01:03:24',
|
||||
durasi_recovery_time: '0-01:35:16',
|
||||
status: 'Selesai',
|
||||
idpel_no_meter: '523013252126 / 1731807',
|
||||
nama_pelapor: 'BP TUPANDIYO',
|
||||
alamat_pelapor: 'JL TAMBAKA RT-4 / RW-12 NO.24 GG ABU',
|
||||
no_telp_pelapor: '0248660457',
|
||||
keterangan_pelapor: '-',
|
||||
sumber_lapor: '-',
|
||||
posko: 'POSKO ULP SEMARANG',
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
@ -16,8 +16,10 @@
|
||||
|
||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" name="jenisGangguanGroup" data-field="jenisGangguan"
|
||||
caption="Jenis Gangguan" css-class="custom-table-column" :group-index="0" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
|
||||
css-class="custom-table-column" :group-index="0" />
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
@ -277,6 +279,606 @@ const data = [
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
kode: 'B',
|
||||
jenisGangguan: 'Gangguan B',
|
||||
laporan: {
|
||||
total: 12,
|
||||
sudahSelesai: {
|
||||
jml: 6,
|
||||
persen: 50,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 6,
|
||||
persen: 50,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 15,
|
||||
rataRata: 12.5,
|
||||
max: 18,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 7,
|
||||
kurangSla: 5,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 18,
|
||||
rataRata: 15,
|
||||
max: 20,
|
||||
min: 12,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 8,
|
||||
kurangSla: 4,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 5,
|
||||
kode: 'C',
|
||||
jenisGangguan: 'Gangguan C',
|
||||
laporan: {
|
||||
total: 8,
|
||||
sudahSelesai: {
|
||||
jml: 4,
|
||||
persen: 50,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 50,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 14,
|
||||
rataRata: 14,
|
||||
max: 16,
|
||||
min: 12,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 6,
|
||||
kurangSla: 2,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 22,
|
||||
rataRata: 16,
|
||||
max: 26,
|
||||
min: 14,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 9,
|
||||
kurangSla: 3,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 6,
|
||||
kode: 'A',
|
||||
jenisGangguan: 'Gangguan A',
|
||||
laporan: {
|
||||
total: 8,
|
||||
sudahSelesai: {
|
||||
jml: 4,
|
||||
persen: 50,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 50,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 12,
|
||||
rataRata: 15,
|
||||
max: 18,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 6,
|
||||
kurangSla: 2,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 16,
|
||||
rataRata: 18,
|
||||
max: 22,
|
||||
min: 14,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 8,
|
||||
kurangSla: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 7,
|
||||
kode: 'C',
|
||||
jenisGangguan: 'Gangguan C',
|
||||
laporan: {
|
||||
total: 15,
|
||||
sudahSelesai: {
|
||||
jml: 10,
|
||||
persen: 66.67,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 5,
|
||||
persen: 33.33,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 20,
|
||||
rataRata: 13.33,
|
||||
max: 24,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 9,
|
||||
kurangSla: 6,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 25,
|
||||
rataRata: 16.67,
|
||||
max: 30,
|
||||
min: 14,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 12,
|
||||
kurangSla: 3,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 8,
|
||||
kode: 'D',
|
||||
jenisGangguan: 'Gangguan D',
|
||||
laporan: {
|
||||
total: 7,
|
||||
sudahSelesai: {
|
||||
jml: 2,
|
||||
persen: 28.57,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 5,
|
||||
persen: 71.43,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 18,
|
||||
rataRata: 9,
|
||||
max: 20,
|
||||
min: 6,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 1,
|
||||
kurangSla: 6,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 28,
|
||||
rataRata: 14,
|
||||
max: 30,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 4,
|
||||
kurangSla: 3,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 9,
|
||||
kode: 'D',
|
||||
jenisGangguan: 'Gangguan D',
|
||||
laporan: {
|
||||
total: 12,
|
||||
sudahSelesai: {
|
||||
jml: 8,
|
||||
persen: 66.67,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 33.33,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 24,
|
||||
rataRata: 20,
|
||||
max: 28,
|
||||
min: 16,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 9,
|
||||
kurangSla: 3,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 32,
|
||||
rataRata: 26,
|
||||
max: 36,
|
||||
min: 22,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 11,
|
||||
kurangSla: 1,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 10,
|
||||
kode: 'E',
|
||||
jenisGangguan: 'Gangguan E',
|
||||
laporan: {
|
||||
total: 15,
|
||||
sudahSelesai: {
|
||||
jml: 12,
|
||||
persen: 80,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 3,
|
||||
persen: 20,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 22,
|
||||
rataRata: 14.67,
|
||||
max: 26,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 11,
|
||||
kurangSla: 4,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 30,
|
||||
rataRata: 20,
|
||||
max: 36,
|
||||
min: 16,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 13,
|
||||
kurangSla: 2,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 11,
|
||||
kode: 'F',
|
||||
jenisGangguan: 'Gangguan F',
|
||||
laporan: {
|
||||
total: 9,
|
||||
sudahSelesai: {
|
||||
jml: 6,
|
||||
persen: 66.67,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 3,
|
||||
persen: 33.33,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 18,
|
||||
rataRata: 12,
|
||||
max: 22,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 8,
|
||||
kurangSla: 1,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 28,
|
||||
rataRata: 18.67,
|
||||
max: 34,
|
||||
min: 16,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 10,
|
||||
kurangSla: 2,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 12,
|
||||
kode: 'G',
|
||||
jenisGangguan: 'Gangguan G',
|
||||
laporan: {
|
||||
total: 11,
|
||||
sudahSelesai: {
|
||||
jml: 7,
|
||||
persen: 63.64,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 36.36,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 20,
|
||||
rataRata: 14.29,
|
||||
max: 24,
|
||||
min: 12,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 8,
|
||||
kurangSla: 3,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 32,
|
||||
rataRata: 22.86,
|
||||
max: 36,
|
||||
min: 18,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 11,
|
||||
kurangSla: 1,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 13,
|
||||
kode: 'H',
|
||||
jenisGangguan: 'Gangguan H',
|
||||
laporan: {
|
||||
total: 7,
|
||||
sudahSelesai: {
|
||||
jml: 5,
|
||||
persen: 71.43,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 2,
|
||||
persen: 28.57,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 16,
|
||||
rataRata: 12.8,
|
||||
max: 20,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 4,
|
||||
kurangSla: 3,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 26,
|
||||
rataRata: 20.8,
|
||||
max: 30,
|
||||
min: 18,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 7,
|
||||
kurangSla: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 14,
|
||||
kode: 'I',
|
||||
jenisGangguan: 'Gangguan I',
|
||||
laporan: {
|
||||
total: 14,
|
||||
sudahSelesai: {
|
||||
jml: 10,
|
||||
persen: 71.43,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 28.57,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 22,
|
||||
rataRata: 15.71,
|
||||
max: 28,
|
||||
min: 10,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 6,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 32,
|
||||
rataRata: 22.86,
|
||||
max: 36,
|
||||
min: 18,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 7,
|
||||
kurangSla: 7,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 15,
|
||||
kode: 'J',
|
||||
jenisGangguan: 'Gangguan J',
|
||||
laporan: {
|
||||
total: 10,
|
||||
sudahSelesai: {
|
||||
jml: 8,
|
||||
persen: 80,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 2,
|
||||
persen: 20,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 20,
|
||||
rataRata: 16,
|
||||
max: 26,
|
||||
min: 12,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 6,
|
||||
kurangSla: 4,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 30,
|
||||
rataRata: 23,
|
||||
max: 36,
|
||||
min: 18,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 8,
|
||||
kurangSla: 2,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 16,
|
||||
kode: 'K',
|
||||
jenisGangguan: 'Gangguan K',
|
||||
laporan: {
|
||||
total: 13,
|
||||
sudahSelesai: {
|
||||
jml: 9,
|
||||
persen: 69.23,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 30.77,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 24,
|
||||
rataRata: 18.46,
|
||||
max: 28,
|
||||
min: 16,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 6,
|
||||
kurangSla: 7,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 34,
|
||||
rataRata: 25.38,
|
||||
max: 40,
|
||||
min: 20,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 9,
|
||||
kurangSla: 4,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 17,
|
||||
kode: 'L',
|
||||
jenisGangguan: 'Gangguan L',
|
||||
laporan: {
|
||||
total: 16,
|
||||
sudahSelesai: {
|
||||
jml: 11,
|
||||
persen: 68.75,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 5,
|
||||
persen: 31.25,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 26,
|
||||
rataRata: 19.38,
|
||||
max: 32,
|
||||
min: 16,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 7,
|
||||
kurangSla: 4,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 36,
|
||||
rataRata: 24,
|
||||
max: 42,
|
||||
min: 20,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 8,
|
||||
kurangSla: 5,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
no: 18,
|
||||
kode: 'M',
|
||||
jenisGangguan: 'Gangguan M',
|
||||
laporan: {
|
||||
total: 12,
|
||||
sudahSelesai: {
|
||||
jml: 8,
|
||||
persen: 66.67,
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: 4,
|
||||
persen: 33.33,
|
||||
},
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: 22,
|
||||
rataRata: 18.33,
|
||||
max: 28,
|
||||
min: 14,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 5,
|
||||
kurangSla: 7,
|
||||
},
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: 32,
|
||||
rataRata: 24,
|
||||
max: 36,
|
||||
min: 18,
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: 6,
|
||||
kurangSla: 6,
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
16
src/utils/graphql.ts
Normal file
16
src/utils/graphql.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
|
||||
|
||||
// HTTP connection to the API
|
||||
const httpLink = createHttpLink({
|
||||
// You should use an absolute URL here
|
||||
uri: 'http://localhost:3020/graphql',
|
||||
})
|
||||
|
||||
// Cache implementation
|
||||
const cache = new InMemoryCache()
|
||||
|
||||
// Create the apollo client
|
||||
export const apolloClient = new ApolloClient({
|
||||
link: httpLink,
|
||||
cache,
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user