commit
c01db516b1
209
package-lock.json
generated
209
package-lock.json
generated
@ -50,7 +50,9 @@
|
|||||||
"date-fns": "4.1.0",
|
"date-fns": "4.1.0",
|
||||||
"emoji-mart": "5.6.0",
|
"emoji-mart": "5.6.0",
|
||||||
"fs-extra": "11.2.0",
|
"fs-extra": "11.2.0",
|
||||||
|
"html2canvas": "^1.4.1",
|
||||||
"input-otp": "1.4.1",
|
"input-otp": "1.4.1",
|
||||||
|
"jspdf": "^3.0.1",
|
||||||
"keen-slider": "6.8.6",
|
"keen-slider": "6.8.6",
|
||||||
"mapbox-gl": "3.9.0",
|
"mapbox-gl": "3.9.0",
|
||||||
"negotiator": "1.0.0",
|
"negotiator": "1.0.0",
|
||||||
@ -3572,6 +3574,13 @@
|
|||||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/raf": {
|
||||||
|
"version": "3.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
|
||||||
|
"integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/@types/react": {
|
"node_modules/@types/react": {
|
||||||
"version": "18.3.23",
|
"version": "18.3.23",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
|
||||||
@ -3621,6 +3630,13 @@
|
|||||||
"minipass": "^4.0.0"
|
"minipass": "^4.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/trusted-types": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/@types/use-sync-external-store": {
|
"node_modules/@types/use-sync-external-store": {
|
||||||
"version": "0.0.6",
|
"version": "0.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||||
@ -4239,6 +4255,18 @@
|
|||||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/atob": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
|
||||||
|
"license": "(MIT OR Apache-2.0)",
|
||||||
|
"bin": {
|
||||||
|
"atob": "bin/atob.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/attr-accept": {
|
"node_modules/attr-accept": {
|
||||||
"version": "2.2.5",
|
"version": "2.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
|
||||||
@ -4355,6 +4383,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/base64-arraybuffer": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/binary-extensions": {
|
"node_modules/binary-extensions": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||||
@ -4447,6 +4484,18 @@
|
|||||||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/btoa": {
|
||||||
|
"version": "1.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
|
||||||
|
"integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
|
||||||
|
"license": "(MIT OR Apache-2.0)",
|
||||||
|
"bin": {
|
||||||
|
"btoa": "bin/btoa.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/buffer-crc32": {
|
"node_modules/buffer-crc32": {
|
||||||
"version": "0.2.13",
|
"version": "0.2.13",
|
||||||
"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
|
"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
|
||||||
@ -4575,6 +4624,26 @@
|
|||||||
],
|
],
|
||||||
"license": "CC-BY-4.0"
|
"license": "CC-BY-4.0"
|
||||||
},
|
},
|
||||||
|
"node_modules/canvg": {
|
||||||
|
"version": "3.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
|
||||||
|
"integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.12.5",
|
||||||
|
"@types/raf": "^3.4.0",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"raf": "^3.4.1",
|
||||||
|
"regenerator-runtime": "^0.13.7",
|
||||||
|
"rgbcolor": "^1.0.1",
|
||||||
|
"stackblur-canvas": "^2.0.0",
|
||||||
|
"svg-pathdata": "^6.0.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/chalk": {
|
"node_modules/chalk": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||||
@ -4840,6 +4909,18 @@
|
|||||||
"toggle-selection": "^1.0.6"
|
"toggle-selection": "^1.0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/core-js": {
|
||||||
|
"version": "3.45.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.0.tgz",
|
||||||
|
"integrity": "sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/core-js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cosmiconfig": {
|
"node_modules/cosmiconfig": {
|
||||||
"version": "7.1.0",
|
"version": "7.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
|
||||||
@ -4896,6 +4977,15 @@
|
|||||||
"hyphenate-style-name": "^1.0.3"
|
"hyphenate-style-name": "^1.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/css-line-break": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"utrie": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/css-select": {
|
"node_modules/css-select": {
|
||||||
"version": "5.2.2",
|
"version": "5.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
|
||||||
@ -5405,6 +5495,16 @@
|
|||||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dompurify": {
|
||||||
|
"version": "3.2.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
|
||||||
|
"integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
|
||||||
|
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||||
|
"optional": true,
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@types/trusted-types": "^2.0.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/domutils": {
|
"node_modules/domutils": {
|
||||||
"version": "3.2.2",
|
"version": "3.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
|
||||||
@ -6540,6 +6640,12 @@
|
|||||||
"pend": "~1.2.0"
|
"pend": "~1.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fflate": {
|
||||||
|
"version": "0.8.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
|
||||||
|
"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/file-entry-cache": {
|
"node_modules/file-entry-cache": {
|
||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
||||||
@ -7321,6 +7427,19 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/html2canvas": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
|
||||||
|
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"css-line-break": "^2.1.0",
|
||||||
|
"text-segmentation": "^1.0.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/htmlparser2": {
|
"node_modules/htmlparser2": {
|
||||||
"version": "9.1.0",
|
"version": "9.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
|
||||||
@ -8115,6 +8234,24 @@
|
|||||||
"graceful-fs": "^4.1.6"
|
"graceful-fs": "^4.1.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/jspdf": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.26.7",
|
||||||
|
"atob": "^2.1.2",
|
||||||
|
"btoa": "^1.2.1",
|
||||||
|
"fflate": "^0.8.1"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"canvg": "^3.0.11",
|
||||||
|
"core-js": "^3.6.0",
|
||||||
|
"dompurify": "^3.2.4",
|
||||||
|
"html2canvas": "^1.0.0-rc.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/jsx-ast-utils": {
|
"node_modules/jsx-ast-utils": {
|
||||||
"version": "3.3.5",
|
"version": "3.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
|
||||||
@ -9176,6 +9313,13 @@
|
|||||||
"integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==",
|
"integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/performance-now": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/picocolors": {
|
"node_modules/picocolors": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||||
@ -9779,6 +9923,16 @@
|
|||||||
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
|
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
|
"node_modules/raf": {
|
||||||
|
"version": "3.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
||||||
|
"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"performance-now": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "18.3.1",
|
"version": "18.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||||
@ -10252,6 +10406,13 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/regenerator-runtime": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/regexp.prototype.flags": {
|
"node_modules/regexp.prototype.flags": {
|
||||||
"version": "1.5.4",
|
"version": "1.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
|
||||||
@ -10360,6 +10521,16 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/rgbcolor": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
|
||||||
|
"license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
|
||||||
|
"optional": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.15"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/rope-sequence": {
|
"node_modules/rope-sequence": {
|
||||||
"version": "1.3.4",
|
"version": "1.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
|
||||||
@ -10913,6 +11084,16 @@
|
|||||||
"stackframe": "^1.3.4"
|
"stackframe": "^1.3.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/stackblur-canvas": {
|
||||||
|
"version": "2.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
|
||||||
|
"integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.1.14"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/stackframe": {
|
"node_modules/stackframe": {
|
||||||
"version": "1.3.4",
|
"version": "1.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
|
||||||
@ -11601,6 +11782,16 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/svg-pathdata": {
|
||||||
|
"version": "6.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
|
||||||
|
"integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/svg-tags": {
|
"node_modules/svg-tags": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
|
||||||
@ -12148,6 +12339,15 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/text-segmentation": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"utrie": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/text-table": {
|
"node_modules/text-table": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||||
@ -12630,6 +12830,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/utrie": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"base64-arraybuffer": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/valibot": {
|
"node_modules/valibot": {
|
||||||
"version": "0.42.1",
|
"version": "0.42.1",
|
||||||
"resolved": "https://registry.npmjs.org/valibot/-/valibot-0.42.1.tgz",
|
"resolved": "https://registry.npmjs.org/valibot/-/valibot-0.42.1.tgz",
|
||||||
|
|||||||
@ -55,7 +55,9 @@
|
|||||||
"date-fns": "4.1.0",
|
"date-fns": "4.1.0",
|
||||||
"emoji-mart": "5.6.0",
|
"emoji-mart": "5.6.0",
|
||||||
"fs-extra": "11.2.0",
|
"fs-extra": "11.2.0",
|
||||||
|
"html2canvas": "^1.4.1",
|
||||||
"input-otp": "1.4.1",
|
"input-otp": "1.4.1",
|
||||||
|
"jspdf": "^3.0.1",
|
||||||
"keen-slider": "6.8.6",
|
"keen-slider": "6.8.6",
|
||||||
"mapbox-gl": "3.9.0",
|
"mapbox-gl": "3.9.0",
|
||||||
"negotiator": "1.0.0",
|
"negotiator": "1.0.0",
|
||||||
|
|||||||
@ -0,0 +1,428 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import {
|
||||||
|
useProductSalesAnalytics,
|
||||||
|
useProfitLossAnalytics,
|
||||||
|
useSalesAnalytics,
|
||||||
|
usePaymentAnalytics
|
||||||
|
} from '@/services/queries/analytics'
|
||||||
|
import { useOutletById } from '@/services/queries/outlets'
|
||||||
|
import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform'
|
||||||
|
import ReportGeneratorComponent from '@/views/dashboards/daily-report/report-generator'
|
||||||
|
import ReportHeader from '@/views/dashboards/daily-report/report-header'
|
||||||
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
|
const DailyPOSReport = () => {
|
||||||
|
const reportRef = useRef<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
const [now, setNow] = useState(new Date())
|
||||||
|
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||||
|
const [dateRange, setDateRange] = useState({
|
||||||
|
startDate: new Date(),
|
||||||
|
endDate: new Date()
|
||||||
|
})
|
||||||
|
const [filterType, setFilterType] = useState('single') // 'single' or 'range'
|
||||||
|
|
||||||
|
// Use selectedDate for single date filter, or dateRange for range filter
|
||||||
|
const getDateParams = () => {
|
||||||
|
if (filterType === 'single') {
|
||||||
|
return {
|
||||||
|
date_from: formatDateDDMMYYYY(selectedDate),
|
||||||
|
date_to: formatDateDDMMYYYY(selectedDate)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
date_from: formatDateDDMMYYYY(dateRange.startDate),
|
||||||
|
date_to: formatDateDDMMYYYY(dateRange.endDate)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateParams = getDateParams()
|
||||||
|
|
||||||
|
const { data: outlet } = useOutletById()
|
||||||
|
const { data: sales } = useSalesAnalytics(dateParams)
|
||||||
|
const { data: profitLoss } = useProfitLossAnalytics(dateParams)
|
||||||
|
const { data: products } = useProductSalesAnalytics(dateParams)
|
||||||
|
const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
|
||||||
|
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate profit loss product summary
|
||||||
|
const profitLossProductSummary = {
|
||||||
|
totalRevenue: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalCost: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.cost || 0), 0) || 0,
|
||||||
|
totalGrossProfit: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.gross_profit || 0), 0) || 0,
|
||||||
|
totalQuantity: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setNow(new Date())
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Format date for input field (YYYY-MM-DD)
|
||||||
|
const formatDateForInput = (date: Date) => {
|
||||||
|
return date.toISOString().split('T')[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get display text for the report period
|
||||||
|
const getReportPeriodText = () => {
|
||||||
|
if (filterType === 'single') {
|
||||||
|
return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}`
|
||||||
|
} else {
|
||||||
|
return `${formatDateDDMMYYYY(dateRange.startDate)} - ${formatDateDDMMYYYY(dateRange.endDate)}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get report title based on filter type
|
||||||
|
const getReportTitle = () => {
|
||||||
|
if (filterType === 'single') {
|
||||||
|
return 'Laporan Transaksi'
|
||||||
|
} else {
|
||||||
|
const daysDiff = Math.ceil((dateRange.endDate.getTime() - dateRange.startDate.getTime()) / (1000 * 3600 * 24)) + 1
|
||||||
|
// return `Laporan Transaksi ${daysDiff} Hari`
|
||||||
|
return `Laporan Transaksi`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGeneratePDF = async () => {
|
||||||
|
const reportElement = reportRef.current
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Import jsPDF dan html2canvas
|
||||||
|
const jsPDF = (await import('jspdf')).default
|
||||||
|
const html2canvas = (await import('html2canvas')).default
|
||||||
|
|
||||||
|
// Optimized canvas capture dengan scale lebih rendah
|
||||||
|
const canvas = await html2canvas(reportElement!, {
|
||||||
|
scale: 1.5, // Reduced from 2 to 1.5
|
||||||
|
useCORS: true,
|
||||||
|
allowTaint: true,
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
logging: false, // Disable logging for performance
|
||||||
|
removeContainer: true, // Clean up after capture
|
||||||
|
imageTimeout: 0, // No timeout for image loading
|
||||||
|
height: reportElement!.scrollHeight,
|
||||||
|
width: reportElement!.scrollWidth
|
||||||
|
})
|
||||||
|
|
||||||
|
// Compress canvas using JPEG with quality setting
|
||||||
|
const imgData = canvas.toDataURL('image/jpeg', 0.85) // JPEG with 85% quality instead of PNG
|
||||||
|
|
||||||
|
// Create PDF with compression
|
||||||
|
const pdf = new jsPDF({
|
||||||
|
orientation: 'portrait',
|
||||||
|
unit: 'mm',
|
||||||
|
format: 'a4',
|
||||||
|
compress: true // Enable built-in compression
|
||||||
|
})
|
||||||
|
|
||||||
|
const imgWidth = 210
|
||||||
|
const pageHeight = 295
|
||||||
|
const imgHeight = (canvas.height * imgWidth) / canvas.width
|
||||||
|
let heightLeft = imgHeight
|
||||||
|
let position = 0
|
||||||
|
|
||||||
|
// Add first page with compressed image
|
||||||
|
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST') // Use FAST compression
|
||||||
|
heightLeft -= pageHeight
|
||||||
|
|
||||||
|
// Handle multiple pages if needed
|
||||||
|
while (heightLeft >= 0) {
|
||||||
|
position = heightLeft - imgHeight
|
||||||
|
pdf.addPage()
|
||||||
|
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST')
|
||||||
|
heightLeft -= pageHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional compression options
|
||||||
|
pdf.setProperties({
|
||||||
|
title: `${getReportTitle()}`,
|
||||||
|
subject: 'Daily Transaction Report',
|
||||||
|
author: 'Apskel POS System',
|
||||||
|
creator: 'Apskel'
|
||||||
|
})
|
||||||
|
|
||||||
|
// Save with optimized settings
|
||||||
|
const fileName =
|
||||||
|
filterType === 'single'
|
||||||
|
? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf`
|
||||||
|
: `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`
|
||||||
|
|
||||||
|
pdf.save(fileName, {
|
||||||
|
returnPromise: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// Clean up canvas to free memory
|
||||||
|
canvas.width = canvas.height = 0
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error generating PDF:', error)
|
||||||
|
alert('Terjadi kesalahan saat membuat PDF. Pastikan jsPDF dan html2canvas sudah terinstall.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='min-h-screen'>
|
||||||
|
{/* Control Panel */}
|
||||||
|
<ReportGeneratorComponent
|
||||||
|
// Props wajib
|
||||||
|
reportTitle='Laporan Penjualan'
|
||||||
|
filterType={filterType}
|
||||||
|
selectedDate={selectedDate}
|
||||||
|
dateRange={dateRange}
|
||||||
|
onFilterTypeChange={setFilterType}
|
||||||
|
onSingleDateChange={setSelectedDate}
|
||||||
|
onDateRangeChange={setDateRange}
|
||||||
|
onGeneratePDF={handleGeneratePDF}
|
||||||
|
// Props opsional
|
||||||
|
// isGenerating={isGenerating}
|
||||||
|
// customQuickActions={customQuickActions}
|
||||||
|
// labels={customLabels}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Report Template */}
|
||||||
|
<div ref={reportRef} className='max-w-4xl mx-auto bg-white min-h-[297mm]' style={{ width: '210mm' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<ReportHeader
|
||||||
|
outlet={outlet}
|
||||||
|
reportTitle={getReportTitle()}
|
||||||
|
reportSubtitle='Laporan Bulanan'
|
||||||
|
brandName='Apskel'
|
||||||
|
brandColor='#36175e'
|
||||||
|
periode={getReportPeriodText()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Performance Summary */}
|
||||||
|
<div className='p-8'>
|
||||||
|
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||||
|
1. Ringkasan Kinerja
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-2 gap-6'>
|
||||||
|
<div className='space-y-4'>
|
||||||
|
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||||
|
<span className='text-gray-700'>TOTAL PENJUALAN (termasuk rasik)</span>
|
||||||
|
<span className='font-semibold text-gray-800'>
|
||||||
|
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||||
|
<span className='text-gray-700'>Total Terjual</span>
|
||||||
|
<span className='font-semibold text-gray-800'>{productSummary.totalQuantitySold}</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||||
|
<span className='text-gray-700'>HPP</span>
|
||||||
|
<span className='font-semibold text-gray-800'>
|
||||||
|
{formatCurrency(profitLoss?.summary.total_cost ?? 0)} |{' '}
|
||||||
|
{(((profitLoss?.summary.total_cost ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(
|
||||||
|
0
|
||||||
|
)}
|
||||||
|
%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
|
||||||
|
<span className='text-lg font-semibold text-green-800'>Laba Kotor</span>
|
||||||
|
<span className='text-lg font-bold text-green-800'>
|
||||||
|
{formatCurrency(profitLoss?.summary.gross_profit ?? 0)} |{' '}
|
||||||
|
{(profitLoss?.summary.gross_profit_margin ?? 0).toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='space-y-4'>
|
||||||
|
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||||
|
<span className='text-gray-700'>Biaya lain²</span>
|
||||||
|
<span className='font-semibold text-gray-800'>
|
||||||
|
{formatCurrency(profitLoss?.summary.total_tax ?? 0)} |{' '}
|
||||||
|
{(((profitLoss?.summary.total_tax ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(0)}
|
||||||
|
%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
|
||||||
|
<span className='text-lg font-bold text-blue-800'>Laba/Rugi</span>
|
||||||
|
<span className='text-lg font-bold text-blue-800'>
|
||||||
|
{formatCurrency(profitLoss?.summary.net_profit ?? 0)} |{' '}
|
||||||
|
{(profitLoss?.summary.net_profit_margin ?? 0).toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profit Loss Product Table */}
|
||||||
|
<div className='px-8 pb-8'>
|
||||||
|
<h3 className='text-lg font-medium mb-6' style={{ color: '#36175e' }}>
|
||||||
|
Laba Rugi Per Produk
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||||
|
<th className='text-left p-3 font-semibold'>Produk</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Qty</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>HPP</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Laba Kotor</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Margin (%)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{profitLoss?.product_data?.map((item, index) => (
|
||||||
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-red-600'>{formatCurrency(item.cost)}</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-green-600'>{formatCurrency(item.gross_profit)}</td>
|
||||||
|
<td className='p-3 text-center font-semibold' style={{ color: '#36175e' }}>
|
||||||
|
{(item.gross_profit_margin ?? 0).toFixed(1)}%
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) || []}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||||
|
<td className='p-3 font-bold'>TOTAL</td>
|
||||||
|
<td className='p-3 text-center font-bold'>{profitLossProductSummary.totalQuantity}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>{formatCurrency(profitLossProductSummary.totalRevenue)}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>{formatCurrency(profitLossProductSummary.totalCost)}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>
|
||||||
|
{formatCurrency(profitLossProductSummary.totalGrossProfit)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-bold'>
|
||||||
|
{profitLossProductSummary.totalRevenue > 0
|
||||||
|
? (
|
||||||
|
(profitLossProductSummary.totalGrossProfit / profitLossProductSummary.totalRevenue) *
|
||||||
|
100
|
||||||
|
).toFixed(1)
|
||||||
|
: 0}
|
||||||
|
%
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment Method Summary */}
|
||||||
|
<div className='px-8 pb-8'>
|
||||||
|
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||||
|
2. Ringkasan Metode Pembayaran
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||||
|
<th className='text-left p-3 font-semibold'>Metode Pembayaran</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Tipe</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Jumlah Order</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Total Amount</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Persentase</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{paymentAnalytics?.data?.map((payment, index) => (
|
||||||
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{payment.payment_method_name}</td>
|
||||||
|
<td className='p-3 text-center'>
|
||||||
|
<span
|
||||||
|
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||||
|
payment.payment_method_type === 'cash'
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-blue-100 text-blue-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{payment.payment_method_type.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{payment.order_count}</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800'>
|
||||||
|
{formatCurrency(payment.total_amount)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-medium' style={{ color: '#36175e' }}>
|
||||||
|
{(payment.percentage ?? 0).toFixed(1)}%
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) || []}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||||
|
<td className='p-3 font-bold'>TOTAL</td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
<td className='p-3 text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>
|
||||||
|
{formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-bold'>100.0%</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Transaction Summary */}
|
||||||
|
<div className='px-8 pb-8'>
|
||||||
|
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||||
|
3. Ringkasan Transaksi
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||||
|
<th className='text-left p-3 font-semibold'>Produk</th>
|
||||||
|
<th className='text-left p-3 font-semibold'>Kategori</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Qty</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Order</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Rata Rata</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{products?.data?.map((item, index) => (
|
||||||
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{item.category_name}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{item.order_count ?? 0}</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
|
||||||
|
<td className='p-3 text-right font-medium text-gray-800'>{formatCurrency(item.average_price)}</td>
|
||||||
|
</tr>
|
||||||
|
)) || []}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||||
|
<td className='p-3 font-bold'>TOTAL</td>
|
||||||
|
<td className='p-3 text-center'></td>
|
||||||
|
<td className='p-3 text-center font-bold'>{productSummary.totalQuantitySold ?? 0}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>{productSummary.totalOrders ?? 0}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>{formatCurrency(productSummary.totalRevenue ?? 0)}</td>
|
||||||
|
<td className='p-3 text-right font-bold'></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profit Loss Product Table */}
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
|
||||||
|
<div className='flex justify-between items-center text-sm text-gray-600'>
|
||||||
|
<p>© 2025 Apskel - Sistem POS Terpadu</p>
|
||||||
|
<p></p>
|
||||||
|
<p>Dicetak pada: {now.toLocaleDateString('id-ID')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DailyPOSReport
|
||||||
@ -31,8 +31,7 @@ import { ReactQueryProvider } from '../../providers/ReactQueryProvider'
|
|||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'APSKEL',
|
title: 'APSKEL',
|
||||||
description:
|
description: 'Apsekel'
|
||||||
'Apsekel'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const RootLayout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => {
|
const RootLayout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => {
|
||||||
|
|||||||
@ -88,6 +88,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
<MenuItem href={`/${locale}/dashboards/products`}>{dictionary['navigation'].products}</MenuItem>
|
<MenuItem href={`/${locale}/dashboards/products`}>{dictionary['navigation'].products}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/dashboards/orders`}>{dictionary['navigation'].orders}</MenuItem>
|
<MenuItem href={`/${locale}/dashboards/orders`}>{dictionary['navigation'].orders}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/dashboards/payment-methods`}>{dictionary['navigation'].paymentMethods}</MenuItem>
|
<MenuItem href={`/${locale}/dashboards/payment-methods`}>{dictionary['navigation'].paymentMethods}</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<MenuSection label={dictionary['navigation'].appsPages}>
|
<MenuSection label={dictionary['navigation'].appsPages}>
|
||||||
<SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-salad' />}>
|
<SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-salad' />}>
|
||||||
@ -111,7 +112,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].orders}>
|
<SubMenu label={dictionary['navigation'].orders}>
|
||||||
<MenuItem href={`/${locale}/apps/ecommerce/orders/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/orders/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
<MenuItem className='hidden' href={`/${locale}/apps/ecommerce/orders/${params.id}/details`}>{dictionary['navigation'].details}</MenuItem>
|
<MenuItem className='hidden' href={`/${locale}/apps/ecommerce/orders/${params.id}/details`}>
|
||||||
|
{dictionary['navigation'].details}
|
||||||
|
</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].customers}>
|
<SubMenu label={dictionary['navigation'].customers}>
|
||||||
<MenuItem href={`/${locale}/apps/ecommerce/customers/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/customers/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
|
|||||||
@ -110,6 +110,7 @@
|
|||||||
"menuLevels": "مستويات القائمة",
|
"menuLevels": "مستويات القائمة",
|
||||||
"menuLevel2": "مستوى القائمة 2",
|
"menuLevel2": "مستوى القائمة 2",
|
||||||
"menuLevel3": "مستوى القائمة 3",
|
"menuLevel3": "مستوى القائمة 3",
|
||||||
"disabledMenu": "قائمة المعوقين"
|
"disabledMenu": "قائمة المعوقين",
|
||||||
|
"dailyReport": "تقرير يومي"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -110,6 +110,7 @@
|
|||||||
"menuLevels": "Menu Levels",
|
"menuLevels": "Menu Levels",
|
||||||
"menuLevel2": "Menu Level 2",
|
"menuLevel2": "Menu Level 2",
|
||||||
"menuLevel3": "Menu Level 3",
|
"menuLevel3": "Menu Level 3",
|
||||||
"disabledMenu": "Disabled Menu"
|
"disabledMenu": "Disabled Menu",
|
||||||
|
"dailyReport": "Daily Report"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -110,6 +110,7 @@
|
|||||||
"menuLevels": "Niveaux de menus",
|
"menuLevels": "Niveaux de menus",
|
||||||
"menuLevel2": "Niveau menu 2",
|
"menuLevel2": "Niveau menu 2",
|
||||||
"menuLevel3": "Niveau menu 3",
|
"menuLevel3": "Niveau menu 3",
|
||||||
"disabledMenu": "Menu désactivé"
|
"disabledMenu": "Menu désactivé",
|
||||||
|
"dailyReport": "Rapport quotidien"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { useQuery } from "@tanstack/react-query"
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import { Outlets } from "../../types/services/outlet"
|
import { Outlet, Outlets } from '../../types/services/outlet'
|
||||||
import { api } from "../api"
|
import { api } from '../api'
|
||||||
|
|
||||||
interface OutletsQueryParams {
|
interface OutletsQueryParams {
|
||||||
page?: number
|
page?: number
|
||||||
@ -31,6 +31,28 @@ export function useOutlets(params: OutletsQueryParams = {}) {
|
|||||||
|
|
||||||
const res = await api.get(`/outlets/list?${queryParams.toString()}`)
|
const res = await api.get(`/outlets/list?${queryParams.toString()}`)
|
||||||
return res.data.data
|
return res.data.data
|
||||||
},
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useOutletById() {
|
||||||
|
const user = (() => {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem('user') || '{}')
|
||||||
|
} catch {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
const outletId = user?.outlet_id // atau sesuai struktur data user
|
||||||
|
|
||||||
|
return useQuery<Outlet>({
|
||||||
|
queryKey: ['outlet', outletId],
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!outletId) throw new Error('Outlet ID not found in localStorage')
|
||||||
|
const res = await api.get(`/outlets/detail/${outletId}`)
|
||||||
|
return res.data.data
|
||||||
|
},
|
||||||
|
enabled: !!outletId // query hanya jalan kalau ada outletId
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,9 +34,23 @@ export const formatDate = (dateString: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const formatDateDDMMYYYY = (date: Date) => {
|
export const formatDateDDMMYYYY = (dateString: Date | string) => {
|
||||||
|
const date = new Date(dateString)
|
||||||
const day = String(date.getDate()).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
const year = date.getFullYear()
|
const year = date.getFullYear()
|
||||||
return `${day}-${month}-${year}`
|
return `${day}-${month}-${year}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const formatDatetime = (dateString: string | number | Date) => {
|
||||||
|
const date = new Date(dateString)
|
||||||
|
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const month = date.toLocaleString('id-ID', { month: 'long' }) // Aug
|
||||||
|
const year = date.getFullYear()
|
||||||
|
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
|
||||||
|
return `${day} ${month} ${year} ${hours}:${minutes}`
|
||||||
|
}
|
||||||
|
|||||||
519
src/views/dashboards/daily-report/report-generator.tsx
Normal file
519
src/views/dashboards/daily-report/report-generator.tsx
Normal file
@ -0,0 +1,519 @@
|
|||||||
|
import React, { ReactNode } from 'react'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
FormControl,
|
||||||
|
FormControlLabel,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
TextField,
|
||||||
|
Box,
|
||||||
|
Chip,
|
||||||
|
Divider,
|
||||||
|
Grid,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
|
||||||
|
// Type definitions
|
||||||
|
interface DateRange {
|
||||||
|
startDate: Date
|
||||||
|
endDate: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
interface QuickAction {
|
||||||
|
label: string
|
||||||
|
handler: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CustomQuickActions {
|
||||||
|
single?: QuickAction[]
|
||||||
|
range?: QuickAction[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Labels {
|
||||||
|
filterLabel?: string
|
||||||
|
singleDateLabel?: string
|
||||||
|
rangeDateLabel?: string
|
||||||
|
selectDateLabel?: string
|
||||||
|
fromLabel?: string
|
||||||
|
toLabel?: string
|
||||||
|
todayLabel?: string
|
||||||
|
yesterdayLabel?: string
|
||||||
|
last7DaysLabel?: string
|
||||||
|
last30DaysLabel?: string
|
||||||
|
periodLabel?: string
|
||||||
|
exportHelpText?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReportGeneratorProps {
|
||||||
|
// Required props
|
||||||
|
reportTitle: string
|
||||||
|
filterType: 'single' | 'range'
|
||||||
|
selectedDate: Date
|
||||||
|
dateRange: DateRange
|
||||||
|
onFilterTypeChange: (filterType: 'single' | 'range') => void
|
||||||
|
onSingleDateChange: (date: Date) => void
|
||||||
|
onDateRangeChange: (dateRange: DateRange) => void
|
||||||
|
onGeneratePDF: () => void
|
||||||
|
|
||||||
|
// Optional props dengan default values
|
||||||
|
maxWidth?: string
|
||||||
|
showQuickActions?: boolean
|
||||||
|
customQuickActions?: CustomQuickActions | null
|
||||||
|
periodFormat?: string
|
||||||
|
downloadButtonText?: string
|
||||||
|
cardShadow?: string
|
||||||
|
primaryColor?: string
|
||||||
|
|
||||||
|
// Optional helper functions
|
||||||
|
formatDateForInput?: ((date: Date) => string) | null
|
||||||
|
getReportPeriodText?: (() => string) | null
|
||||||
|
|
||||||
|
// Additional customization
|
||||||
|
className?: string
|
||||||
|
style?: React.CSSProperties
|
||||||
|
children?: ReactNode
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
isGenerating?: boolean
|
||||||
|
|
||||||
|
// Custom labels
|
||||||
|
labels?: Labels
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom styled components yang responsif terhadap theme
|
||||||
|
const StyledCard = styled(Card)(({ theme }) => ({
|
||||||
|
maxWidth: '1024px',
|
||||||
|
margin: '0 auto 24px',
|
||||||
|
boxShadow: theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff'
|
||||||
|
}))
|
||||||
|
|
||||||
|
const PurpleButton = styled(Button)(({ theme }) => ({
|
||||||
|
backgroundColor: '#36175e',
|
||||||
|
color: 'white',
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
padding: '8px 24px',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: '#2d1350',
|
||||||
|
opacity: 0.9
|
||||||
|
},
|
||||||
|
'&:disabled': {
|
||||||
|
backgroundColor: theme.palette.mode === 'dark' ? '#444' : '#ccc',
|
||||||
|
color: theme.palette.mode === 'dark' ? '#888' : '#666'
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
const QuickActionButton = styled(Button)(({ theme }) => ({
|
||||||
|
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.08)' : '#f8f7fa',
|
||||||
|
color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : '#6f6b7d',
|
||||||
|
textTransform: 'none',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
padding: '6px 16px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.16)' : '#ebe9f1'
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
const InfoBox = styled(Box)(({ theme }) => ({
|
||||||
|
marginTop: theme.spacing(3),
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.04)' : '#f8f7fa',
|
||||||
|
borderRadius: theme.shape.borderRadius,
|
||||||
|
border: theme.palette.mode === 'dark' ? '1px solid rgba(231, 227, 252, 0.12)' : 'none'
|
||||||
|
}))
|
||||||
|
|
||||||
|
const ReportGeneratorComponent: React.FC<ReportGeneratorProps> = ({
|
||||||
|
// Required props
|
||||||
|
reportTitle,
|
||||||
|
filterType,
|
||||||
|
selectedDate,
|
||||||
|
dateRange,
|
||||||
|
onFilterTypeChange,
|
||||||
|
onSingleDateChange,
|
||||||
|
onDateRangeChange,
|
||||||
|
onGeneratePDF,
|
||||||
|
|
||||||
|
// Optional props dengan default values
|
||||||
|
maxWidth = '1024px',
|
||||||
|
showQuickActions = true,
|
||||||
|
customQuickActions = null,
|
||||||
|
periodFormat = 'id-ID',
|
||||||
|
downloadButtonText = 'Download PDF',
|
||||||
|
cardShadow,
|
||||||
|
primaryColor = '#36175e',
|
||||||
|
|
||||||
|
// Optional helper functions
|
||||||
|
formatDateForInput = null,
|
||||||
|
getReportPeriodText = null,
|
||||||
|
|
||||||
|
// Additional customization
|
||||||
|
className = '',
|
||||||
|
style = {},
|
||||||
|
children = null,
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
isGenerating = false,
|
||||||
|
|
||||||
|
// Custom labels
|
||||||
|
labels = {
|
||||||
|
filterLabel: 'Filter Tanggal:',
|
||||||
|
singleDateLabel: 'Hari Tunggal',
|
||||||
|
rangeDateLabel: 'Rentang Tanggal',
|
||||||
|
selectDateLabel: 'Pilih Tanggal:',
|
||||||
|
fromLabel: 'Dari:',
|
||||||
|
toLabel: 'Sampai:',
|
||||||
|
todayLabel: 'Hari Ini',
|
||||||
|
yesterdayLabel: 'Kemarin',
|
||||||
|
last7DaysLabel: '7 Hari Terakhir',
|
||||||
|
last30DaysLabel: '30 Hari Terakhir',
|
||||||
|
periodLabel: 'Periode:',
|
||||||
|
exportHelpText: 'Klik tombol download untuk mengeksport laporan ke PDF'
|
||||||
|
}
|
||||||
|
}) => {
|
||||||
|
const theme = useTheme()
|
||||||
|
|
||||||
|
// Dynamic colors berdasarkan theme
|
||||||
|
const textPrimary = theme.palette.text.primary
|
||||||
|
const textSecondary = theme.palette.text.secondary
|
||||||
|
const dynamicCardShadow =
|
||||||
|
cardShadow ||
|
||||||
|
(theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)')
|
||||||
|
|
||||||
|
// Default format date function
|
||||||
|
const defaultFormatDateForInput = (date: Date): string => {
|
||||||
|
return date.toISOString().split('T')[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default period text function
|
||||||
|
const defaultGetReportPeriodText = (): string => {
|
||||||
|
if (filterType === 'single') {
|
||||||
|
return selectedDate.toLocaleDateString(periodFormat, {
|
||||||
|
weekday: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return `${dateRange.startDate.toLocaleDateString(periodFormat)} - ${dateRange.endDate.toLocaleDateString(periodFormat)}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use provided functions or defaults
|
||||||
|
const formatDate = formatDateForInput || defaultFormatDateForInput
|
||||||
|
const getPeriodText = getReportPeriodText || defaultGetReportPeriodText
|
||||||
|
|
||||||
|
// Quick action handlers
|
||||||
|
const handleToday = (): void => {
|
||||||
|
onSingleDateChange(new Date())
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleYesterday = (): void => {
|
||||||
|
const yesterday = new Date()
|
||||||
|
yesterday.setDate(yesterday.getDate() - 1)
|
||||||
|
onSingleDateChange(yesterday)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLast7Days = (): void => {
|
||||||
|
const today = new Date()
|
||||||
|
const weekAgo = new Date()
|
||||||
|
weekAgo.setDate(today.getDate() - 6)
|
||||||
|
onDateRangeChange({ startDate: weekAgo, endDate: today })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLast30Days = (): void => {
|
||||||
|
const today = new Date()
|
||||||
|
const monthAgo = new Date()
|
||||||
|
monthAgo.setDate(today.getDate() - 29)
|
||||||
|
onDateRangeChange({ startDate: monthAgo, endDate: today })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default quick actions
|
||||||
|
const defaultQuickActions: CustomQuickActions = {
|
||||||
|
single: [
|
||||||
|
{ label: labels.todayLabel || 'Hari Ini', handler: handleToday },
|
||||||
|
{ label: labels.yesterdayLabel || 'Kemarin', handler: handleYesterday }
|
||||||
|
],
|
||||||
|
range: [
|
||||||
|
{ label: labels.last7DaysLabel || '7 Hari Terakhir', handler: handleLast7Days },
|
||||||
|
{ label: labels.last30DaysLabel || '30 Hari Terakhir', handler: handleLast30Days }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const quickActions = customQuickActions || defaultQuickActions
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledCard
|
||||||
|
className={className}
|
||||||
|
style={{
|
||||||
|
...style,
|
||||||
|
maxWidth,
|
||||||
|
boxShadow: dynamicCardShadow
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Typography
|
||||||
|
variant='h4'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 600,
|
||||||
|
color: textPrimary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Generator {reportTitle}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
action={
|
||||||
|
<PurpleButton
|
||||||
|
onClick={onGeneratePDF}
|
||||||
|
variant='contained'
|
||||||
|
disabled={isGenerating}
|
||||||
|
sx={{ backgroundColor: primaryColor }}
|
||||||
|
>
|
||||||
|
{isGenerating ? 'Generating...' : downloadButtonText}
|
||||||
|
</PurpleButton>
|
||||||
|
}
|
||||||
|
sx={{ pb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
<Divider sx={{ mb: 3 }} />
|
||||||
|
|
||||||
|
{/* Filter Controls */}
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<Typography
|
||||||
|
variant='subtitle2'
|
||||||
|
sx={{
|
||||||
|
mb: 2,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: textPrimary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels.filterLabel || 'Filter Tanggal:'}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<FormControl component='fieldset' sx={{ mb: 3 }}>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
value={filterType}
|
||||||
|
onChange={e => onFilterTypeChange(e.target.value as 'single' | 'range')}
|
||||||
|
sx={{ gap: 3 }}
|
||||||
|
>
|
||||||
|
<FormControlLabel
|
||||||
|
value='single'
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
sx={{
|
||||||
|
color: primaryColor,
|
||||||
|
'&.Mui-checked': { color: primaryColor }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<Typography variant='body2' sx={{ color: textSecondary }}>
|
||||||
|
{labels.singleDateLabel || 'Hari Tunggal'}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
value='range'
|
||||||
|
control={
|
||||||
|
<Radio
|
||||||
|
sx={{
|
||||||
|
color: primaryColor,
|
||||||
|
'&.Mui-checked': { color: primaryColor }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<Typography variant='body2' sx={{ color: textSecondary }}>
|
||||||
|
{labels.rangeDateLabel || 'Rentang Tanggal'}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
{/* Single Date Filter */}
|
||||||
|
{filterType === 'single' && (
|
||||||
|
<Grid container spacing={2} alignItems='center'>
|
||||||
|
<Grid item xs={12} sm='auto'>
|
||||||
|
<Typography
|
||||||
|
variant='subtitle2'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 600,
|
||||||
|
color: textPrimary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels.selectDateLabel || 'Pilih Tanggal:'}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm='auto'>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={formatDate(selectedDate)}
|
||||||
|
onChange={e => onSingleDateChange(new Date(e.target.value))}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: primaryColor
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
color: textPrimary
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
{showQuickActions && (
|
||||||
|
<Grid item xs={12} sm='auto'>
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||||
|
{quickActions.single?.map((action, index) => (
|
||||||
|
<QuickActionButton key={index} onClick={action.handler}>
|
||||||
|
{action.label}
|
||||||
|
</QuickActionButton>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Date Range Filter */}
|
||||||
|
{filterType === 'range' && (
|
||||||
|
<Grid container spacing={2} alignItems='center'>
|
||||||
|
<Grid item xs={12} sm='auto'>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Typography
|
||||||
|
variant='subtitle2'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 600,
|
||||||
|
color: textPrimary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels.fromLabel || 'Dari:'}
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={formatDate(dateRange.startDate)}
|
||||||
|
onChange={e =>
|
||||||
|
onDateRangeChange({
|
||||||
|
...dateRange,
|
||||||
|
startDate: new Date(e.target.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: primaryColor
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor:
|
||||||
|
theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
color: textPrimary
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm='auto'>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Typography
|
||||||
|
variant='subtitle2'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 600,
|
||||||
|
color: textPrimary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels.toLabel || 'Sampai:'}
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={formatDate(dateRange.endDate)}
|
||||||
|
onChange={e =>
|
||||||
|
onDateRangeChange({
|
||||||
|
...dateRange,
|
||||||
|
endDate: new Date(e.target.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: primaryColor
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor:
|
||||||
|
theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
color: textPrimary
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
{showQuickActions && (
|
||||||
|
<Grid item xs={12} sm='auto'>
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||||
|
{quickActions.range?.map((action, index) => (
|
||||||
|
<QuickActionButton key={index} onClick={action.handler}>
|
||||||
|
{action.label}
|
||||||
|
</QuickActionButton>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<InfoBox>
|
||||||
|
<Typography variant='body2' sx={{ color: textSecondary }}>
|
||||||
|
{labels.periodLabel || 'Periode:'}{' '}
|
||||||
|
<Chip
|
||||||
|
label={getPeriodText()}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
backgroundColor: primaryColor,
|
||||||
|
color: 'white',
|
||||||
|
fontWeight: 500,
|
||||||
|
ml: 1
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant='body2'
|
||||||
|
sx={{
|
||||||
|
color: textSecondary,
|
||||||
|
mt: 1
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels.exportHelpText || 'Klik tombol download untuk mengeksport laporan ke PDF'}
|
||||||
|
</Typography>
|
||||||
|
</InfoBox>
|
||||||
|
|
||||||
|
{/* Custom content dapat ditambahkan di sini */}
|
||||||
|
{children}
|
||||||
|
</CardContent>
|
||||||
|
</StyledCard>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportGeneratorComponent
|
||||||
123
src/views/dashboards/daily-report/report-header.tsx
Normal file
123
src/views/dashboards/daily-report/report-header.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import { Box, Typography, Divider } from '@mui/material'
|
||||||
|
import { useTheme } from '@mui/material/styles'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import Logo from '@core/svg/Logo'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { Outlet } from '@/types/services/outlet'
|
||||||
|
|
||||||
|
// Props Interface
|
||||||
|
export interface ReportHeaderProps {
|
||||||
|
outlet?: Outlet
|
||||||
|
reportTitle: string
|
||||||
|
reportSubtitle?: string
|
||||||
|
brandName?: string
|
||||||
|
brandColor?: string
|
||||||
|
className?: string
|
||||||
|
periode?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReportHeader: FC<ReportHeaderProps> = ({
|
||||||
|
outlet,
|
||||||
|
reportTitle,
|
||||||
|
reportSubtitle = 'Laporan Operasional',
|
||||||
|
brandName = 'Apskel',
|
||||||
|
brandColor,
|
||||||
|
className,
|
||||||
|
periode
|
||||||
|
}) => {
|
||||||
|
// Hooks
|
||||||
|
const theme = useTheme()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box className={className}>
|
||||||
|
<Box sx={{ p: theme.spacing(8, 8, 6) }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
||||||
|
{/* Left Section - Brand & Outlet Info */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||||
|
<Logo />
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
variant='h3'
|
||||||
|
component='h1'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 700,
|
||||||
|
color: brandColor || theme.palette.primary.main
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{brandName}
|
||||||
|
</Typography>
|
||||||
|
{outlet?.name && (
|
||||||
|
<Typography
|
||||||
|
variant='h5'
|
||||||
|
component='h2'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 600,
|
||||||
|
mt: 1,
|
||||||
|
color: theme.palette.text.primary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{outlet.name}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
{outlet?.address && (
|
||||||
|
<Typography
|
||||||
|
variant='body2'
|
||||||
|
sx={{
|
||||||
|
mt: 1,
|
||||||
|
color: theme.palette.text.secondary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{outlet.address}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Right Section - Report Info */}
|
||||||
|
<Box sx={{ textAlign: 'right' }}>
|
||||||
|
<Typography
|
||||||
|
variant='h4'
|
||||||
|
component='h3'
|
||||||
|
sx={{
|
||||||
|
fontWeight: 700,
|
||||||
|
color: theme.palette.text.primary
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{reportTitle}
|
||||||
|
</Typography>
|
||||||
|
{periode && (
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
|
||||||
|
<Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
|
||||||
|
{periode}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{reportSubtitle && (
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
|
||||||
|
<Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
|
||||||
|
{reportSubtitle}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Divider
|
||||||
|
sx={{
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: brandColor || theme.palette.primary.main
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportHeader
|
||||||
Loading…
x
Reference in New Issue
Block a user