Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
bf0f4cfa38 | ||
|
|
82e79463b5 | ||
|
|
c3ad938a79 | ||
|
|
69c49238d4 | ||
|
|
191937e647 | ||
|
|
ce9120e7e6 | ||
|
|
52879b58fe | ||
|
|
a7b6e15818 | ||
|
|
8ac6ff6d14 | ||
|
|
0dc6e967bb | ||
|
|
daa3c4e9a2 | ||
|
|
27ddd137eb | ||
|
|
073f3dd89c | ||
|
|
07c0bdb3af | ||
|
|
e6bcf287ea | ||
|
|
d317e8d06f | ||
|
|
dc32c8553b | ||
|
|
79cd4f9dcb | ||
|
|
cfa3686de3 | ||
|
|
c7d29f4041 |
201
package-lock.json
generated
201
package-lock.json
generated
@ -52,8 +52,10 @@
|
|||||||
"emoji-mart": "5.6.0",
|
"emoji-mart": "5.6.0",
|
||||||
"fs-extra": "11.2.0",
|
"fs-extra": "11.2.0",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
|
"html2pdf.js": "^0.12.1",
|
||||||
"input-otp": "1.4.1",
|
"input-otp": "1.4.1",
|
||||||
"jspdf": "^3.0.1",
|
"jspdf": "^3.0.3",
|
||||||
|
"jspdf-autotable": "^5.0.2",
|
||||||
"keen-slider": "6.8.6",
|
"keen-slider": "6.8.6",
|
||||||
"lucide-react": "^0.544.0",
|
"lucide-react": "^0.544.0",
|
||||||
"mapbox-gl": "3.9.0",
|
"mapbox-gl": "3.9.0",
|
||||||
@ -74,7 +76,8 @@
|
|||||||
"react-use": "17.6.0",
|
"react-use": "17.6.0",
|
||||||
"recharts": "2.15.0",
|
"recharts": "2.15.0",
|
||||||
"use-debounce": "^10.0.5",
|
"use-debounce": "^10.0.5",
|
||||||
"valibot": "0.42.1"
|
"valibot": "0.42.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify/json": "2.2.286",
|
"@iconify/json": "2.2.286",
|
||||||
@ -82,6 +85,7 @@
|
|||||||
"@iconify/types": "2.0.0",
|
"@iconify/types": "2.0.0",
|
||||||
"@iconify/utils": "2.2.1",
|
"@iconify/utils": "2.2.1",
|
||||||
"@types/fs-extra": "^11.0.4",
|
"@types/fs-extra": "^11.0.4",
|
||||||
|
"@types/jspdf": "^1.3.3",
|
||||||
"@types/mapbox-gl": "^3.4.1",
|
"@types/mapbox-gl": "^3.4.1",
|
||||||
"@types/negotiator": "^0.6.3",
|
"@types/negotiator": "^0.6.3",
|
||||||
"@types/node": "^22.10.2",
|
"@types/node": "^22.10.2",
|
||||||
@ -3507,6 +3511,13 @@
|
|||||||
"@types/node": "*"
|
"@types/node": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/jspdf": {
|
||||||
|
"version": "1.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/jspdf/-/jspdf-1.3.3.tgz",
|
||||||
|
"integrity": "sha512-DqwyAKpVuv+7DniCp2Deq1xGvfdnKSNgl9Agun2w6dFvR5UKamiv4VfYUgcypd8S9ojUyARFIlZqBrYrBMQlew==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/linkify-it": {
|
"node_modules/@types/linkify-it": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||||
@ -3572,6 +3583,12 @@
|
|||||||
"undici-types": "~6.21.0"
|
"undici-types": "~6.21.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/pako": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/parse-json": {
|
"node_modules/@types/parse-json": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
|
||||||
@ -3936,6 +3953,15 @@
|
|||||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/adler-32": {
|
||||||
|
"version": "1.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
|
||||||
|
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ajv": {
|
"node_modules/ajv": {
|
||||||
"version": "6.12.6",
|
"version": "6.12.6",
|
||||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||||
@ -4271,18 +4297,6 @@
|
|||||||
"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",
|
||||||
@ -4500,18 +4514,6 @@
|
|||||||
"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",
|
||||||
@ -4660,6 +4662,19 @@
|
|||||||
"node": ">=10.0.0"
|
"node": ">=10.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/cfb": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"adler-32": "~1.3.0",
|
||||||
|
"crc-32": "~1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"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",
|
||||||
@ -4812,6 +4827,15 @@
|
|||||||
"react-dom": "^18 || ^19 || ^19.0.0-rc"
|
"react-dom": "^18 || ^19 || ^19.0.0-rc"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/codepage": {
|
||||||
|
"version": "1.15.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
|
||||||
|
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/color": {
|
"node_modules/color": {
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||||
@ -4953,6 +4977,18 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/crc-32": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"bin": {
|
||||||
|
"crc32": "bin/crc32.njs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/crelt": {
|
"node_modules/crelt": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
|
||||||
@ -6598,6 +6634,17 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/fast-png": {
|
||||||
|
"version": "6.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
|
||||||
|
"integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/pako": "^2.0.3",
|
||||||
|
"iobuffer": "^5.3.2",
|
||||||
|
"pako": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fast-shallow-equal": {
|
"node_modules/fast-shallow-equal": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
|
||||||
@ -6877,6 +6924,15 @@
|
|||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/frac": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fraction.js": {
|
"node_modules/fraction.js": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||||
@ -7456,6 +7512,16 @@
|
|||||||
"node": ">=8.0.0"
|
"node": ">=8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/html2pdf.js": {
|
||||||
|
"version": "0.12.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.12.1.tgz",
|
||||||
|
"integrity": "sha512-3rBWQ96H5oOU9jtoz3MnE/epGi27ig9h8aonBk4JTpvUERM3lMRxhIRckhJZEi4wE0YfRINoYOIDY0hLY0CHgQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"html2canvas": "^1.0.0",
|
||||||
|
"jspdf": "^3.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",
|
||||||
@ -7630,6 +7696,12 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/iobuffer": {
|
||||||
|
"version": "5.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
|
||||||
|
"integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/is-array-buffer": {
|
"node_modules/is-array-buffer": {
|
||||||
"version": "3.0.5",
|
"version": "3.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
|
||||||
@ -8251,14 +8323,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/jspdf": {
|
"node_modules/jspdf": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.3.tgz",
|
||||||
"integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
|
"integrity": "sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.26.7",
|
"@babel/runtime": "^7.26.9",
|
||||||
"atob": "^2.1.2",
|
"fast-png": "^6.2.0",
|
||||||
"btoa": "^1.2.1",
|
|
||||||
"fflate": "^0.8.1"
|
"fflate": "^0.8.1"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
@ -8268,6 +8339,15 @@
|
|||||||
"html2canvas": "^1.0.0-rc.5"
|
"html2canvas": "^1.0.0-rc.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/jspdf-autotable": {
|
||||||
|
"version": "5.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
|
||||||
|
"integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"jspdf": "^2 || ^3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"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",
|
||||||
@ -9143,6 +9223,12 @@
|
|||||||
"quansync": "^0.2.7"
|
"quansync": "^0.2.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/pako": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
|
||||||
|
"license": "(MIT AND Zlib)"
|
||||||
|
},
|
||||||
"node_modules/parent-module": {
|
"node_modules/parent-module": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||||
@ -11093,6 +11179,18 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/ssf": {
|
||||||
|
"version": "0.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
|
||||||
|
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"frac": "~1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/stable-hash": {
|
"node_modules/stable-hash": {
|
||||||
"version": "0.0.4",
|
"version": "0.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.4.tgz",
|
||||||
@ -13045,6 +13143,24 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/wmf": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/word": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/word-wrap": {
|
"node_modules/word-wrap": {
|
||||||
"version": "1.2.5",
|
"version": "1.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
||||||
@ -13177,6 +13293,27 @@
|
|||||||
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/xlsx": {
|
||||||
|
"version": "0.18.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
|
||||||
|
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"adler-32": "~1.3.0",
|
||||||
|
"cfb": "~1.2.1",
|
||||||
|
"codepage": "~1.15.0",
|
||||||
|
"crc-32": "~1.2.1",
|
||||||
|
"ssf": "~0.11.2",
|
||||||
|
"wmf": "~1.0.1",
|
||||||
|
"word": "~0.3.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"xlsx": "bin/xlsx.njs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/yallist": {
|
"node_modules/yallist": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||||
|
|||||||
@ -58,8 +58,10 @@
|
|||||||
"emoji-mart": "5.6.0",
|
"emoji-mart": "5.6.0",
|
||||||
"fs-extra": "11.2.0",
|
"fs-extra": "11.2.0",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
|
"html2pdf.js": "^0.12.1",
|
||||||
"input-otp": "1.4.1",
|
"input-otp": "1.4.1",
|
||||||
"jspdf": "^3.0.1",
|
"jspdf": "^3.0.3",
|
||||||
|
"jspdf-autotable": "^5.0.2",
|
||||||
"keen-slider": "6.8.6",
|
"keen-slider": "6.8.6",
|
||||||
"lucide-react": "^0.544.0",
|
"lucide-react": "^0.544.0",
|
||||||
"mapbox-gl": "3.9.0",
|
"mapbox-gl": "3.9.0",
|
||||||
@ -80,7 +82,8 @@
|
|||||||
"react-use": "17.6.0",
|
"react-use": "17.6.0",
|
||||||
"recharts": "2.15.0",
|
"recharts": "2.15.0",
|
||||||
"use-debounce": "^10.0.5",
|
"use-debounce": "^10.0.5",
|
||||||
"valibot": "0.42.1"
|
"valibot": "0.42.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify/json": "2.2.286",
|
"@iconify/json": "2.2.286",
|
||||||
@ -88,6 +91,7 @@
|
|||||||
"@iconify/types": "2.0.0",
|
"@iconify/types": "2.0.0",
|
||||||
"@iconify/utils": "2.2.1",
|
"@iconify/utils": "2.2.1",
|
||||||
"@types/fs-extra": "^11.0.4",
|
"@types/fs-extra": "^11.0.4",
|
||||||
|
"@types/jspdf": "^1.3.3",
|
||||||
"@types/mapbox-gl": "^3.4.1",
|
"@types/mapbox-gl": "^3.4.1",
|
||||||
"@types/negotiator": "^0.6.3",
|
"@types/negotiator": "^0.6.3",
|
||||||
"@types/node": "^22.10.2",
|
"@types/node": "^22.10.2",
|
||||||
|
|||||||
@ -13,10 +13,11 @@ export const metadata: Metadata = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const LoginPage = async () => {
|
const LoginPage = async () => {
|
||||||
// Vars
|
return (
|
||||||
const mode = await getServerMode()
|
<div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
|
||||||
|
<Login />
|
||||||
return <Login mode={mode} />
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default LoginPage
|
export default LoginPage
|
||||||
|
|||||||
@ -0,0 +1,18 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportPaymentMethodContent from '@/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const SalesProductReportPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laporan Metode Pembayaran' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportPaymentMethodContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesProductReportPage
|
||||||
@ -1,22 +1,72 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
import ReportTitle from '@/components/report/ReportTitle'
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
|
import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
|
||||||
import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
|
import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
|
||||||
import Grid from '@mui/material/Grid2'
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import { CircularProgress, Box } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useProfitLossAnalytics } from '@/services/queries/analytics'
|
||||||
|
import { formatDateDDMMYYYY } from '@/utils/transform'
|
||||||
|
import Loading from '@/components/layout/shared/Loading'
|
||||||
|
|
||||||
|
const ProfitLossPage = () => {
|
||||||
|
const today = new Date()
|
||||||
|
const monthAgo = new Date()
|
||||||
|
monthAgo.setDate(today.getDate() - 30)
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(monthAgo)
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(today)
|
||||||
|
|
||||||
|
// Single API call at parent level
|
||||||
|
const {
|
||||||
|
data: profitData,
|
||||||
|
isLoading,
|
||||||
|
error
|
||||||
|
} = useProfitLossAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Handle loading state
|
||||||
|
if (isLoading) {
|
||||||
|
return <Loading />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle error state
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laba Rugi' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<Box display='flex' justifyContent='center' alignItems='center' minHeight={400}>
|
||||||
|
<span>Error loading data: {error.message}</span>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const ProfiltLossPage = () => {
|
|
||||||
return (
|
return (
|
||||||
<Grid container spacing={6}>
|
<Grid container spacing={6}>
|
||||||
<Grid size={{ xs: 12 }}>
|
<Grid size={{ xs: 12 }}>
|
||||||
<ReportTitle title='Laba Rugi' />
|
<ReportTitle title='Laba Rugi' />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid size={{ xs: 12 }}>
|
<Grid size={{ xs: 12 }}>
|
||||||
<ReportProfitLossCard />
|
<ReportProfitLossCard profitData={profitData} />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid size={{ xs: 12 }}>
|
<Grid size={{ xs: 12 }}>
|
||||||
<ReportProfitLossContent />
|
<ReportProfitLossContent
|
||||||
|
profitData={profitData}
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ProfiltLossPage
|
export default ProfitLossPage
|
||||||
|
|||||||
@ -0,0 +1,19 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportSalesOrderContent from '@/views/apps/report/sales/sales-order/ReportSalesOrderContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const SalesOrderReportPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laporan Penjualan Pesanan' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportSalesOrderContent />
|
||||||
|
</Grid>
|
||||||
|
z
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesOrderReportPage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportSalesProductCategoryContent from '@/views/apps/report/sales/sales-product-category/ReportSalesProductCategoryReport'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const SalesProductCategoryReportPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laporan Penjualan per Kategori Produk' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportSalesProductCategoryContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesProductCategoryReportPage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportSalesPerProductContent from '@/views/apps/report/sales/sales-per-product/ReportSalesPerProductContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const SalesProductReportPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laporan Penjualan per Produk' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportSalesPerProductContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesProductReportPage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportSalesContent from '@/views/apps/report/sales/sales-report/ReportSalesContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const SalesReportPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laporan Penjualan' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportSalesContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesReportPage
|
||||||
@ -303,6 +303,7 @@ const DailyPOSReport = () => {
|
|||||||
{/* Control Panel */}
|
{/* Control Panel */}
|
||||||
<ReportGeneratorComponent
|
<ReportGeneratorComponent
|
||||||
// Props wajib
|
// Props wajib
|
||||||
|
className='min-w-full'
|
||||||
reportTitle='Laporan Penjualan'
|
reportTitle='Laporan Penjualan'
|
||||||
filterType={filterType}
|
filterType={filterType}
|
||||||
selectedDate={selectedDate}
|
selectedDate={selectedDate}
|
||||||
|
|||||||
@ -31,27 +31,27 @@ import { getLocalizedUrl } from '@/utils/i18n'
|
|||||||
const shortcuts: ShortcutsType[] = [
|
const shortcuts: ShortcutsType[] = [
|
||||||
{
|
{
|
||||||
url: '/apps/calendar',
|
url: '/apps/calendar',
|
||||||
icon: 'tabler-calendar',
|
icon: 'tabler-box',
|
||||||
title: 'Calendar',
|
title: 'Produk',
|
||||||
subtitle: 'Appointments'
|
subtitle: 'Kelola Produk'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/apps/invoice/list',
|
url: '/apps/invoice/list',
|
||||||
icon: 'tabler-file-dollar',
|
icon: 'tabler-file-dollar',
|
||||||
title: 'Invoice App',
|
title: 'Pembelian',
|
||||||
subtitle: 'Manage Accounts'
|
subtitle: 'Kelola Pembelian'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/apps/user/list',
|
url: '/apps/user/list',
|
||||||
icon: 'tabler-user',
|
icon: 'tabler-user',
|
||||||
title: 'Users',
|
title: 'Pengguna',
|
||||||
subtitle: 'Manage Users'
|
subtitle: 'Kelola Pengguna'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/apps/roles',
|
url: '/apps/vendor',
|
||||||
icon: 'tabler-users-group',
|
icon: 'tabler-users-group',
|
||||||
title: 'Role Management',
|
title: 'Vendor',
|
||||||
subtitle: 'Permissions'
|
subtitle: 'Kelola Vendor'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/',
|
url: '/',
|
||||||
@ -60,10 +60,10 @@ const shortcuts: ShortcutsType[] = [
|
|||||||
subtitle: 'User Dashboard'
|
subtitle: 'User Dashboard'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/pages/account-settings',
|
url: '/apps/reports',
|
||||||
icon: 'tabler-settings',
|
icon: 'tabler-settings',
|
||||||
title: 'Settings',
|
title: 'Laporan',
|
||||||
subtitle: 'Account Settings'
|
subtitle: 'Lihat Laporan'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -20,28 +20,28 @@ import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
|
|||||||
// Vars
|
// Vars
|
||||||
const shortcuts: ShortcutsType[] = [
|
const shortcuts: ShortcutsType[] = [
|
||||||
{
|
{
|
||||||
url: '/apps/calendar',
|
url: '/apps/inventory/products/list',
|
||||||
icon: 'tabler-calendar',
|
icon: 'tabler-box',
|
||||||
title: 'Calendar',
|
title: 'Produk',
|
||||||
subtitle: 'Appointments'
|
subtitle: 'Kelola Produk'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/apps/invoice/list',
|
url: '/apps/purchase/purchase-orders',
|
||||||
icon: 'tabler-file-dollar',
|
icon: 'tabler-file-dollar',
|
||||||
title: 'Invoice App',
|
title: 'Pembelian',
|
||||||
subtitle: 'Manage Accounts'
|
subtitle: 'Kelola Pembelian'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/apps/user/list',
|
url: '/apps/user/list',
|
||||||
icon: 'tabler-user',
|
icon: 'tabler-user',
|
||||||
title: 'Users',
|
title: 'Pengguna',
|
||||||
subtitle: 'Manage Users'
|
subtitle: 'Kelola Pengguna'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/apps/roles',
|
url: '/apps/vendor/list',
|
||||||
icon: 'tabler-users-group',
|
icon: 'tabler-users-group',
|
||||||
title: 'Role Management',
|
title: 'Vendor',
|
||||||
subtitle: 'Permissions'
|
subtitle: 'Kelola Vendor'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/',
|
url: '/',
|
||||||
@ -50,10 +50,10 @@ const shortcuts: ShortcutsType[] = [
|
|||||||
subtitle: 'User Dashboard'
|
subtitle: 'User Dashboard'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/pages/account-settings',
|
url: '/apps/report',
|
||||||
icon: 'tabler-settings',
|
icon: 'tabler-settings',
|
||||||
title: 'Settings',
|
title: 'Laporan',
|
||||||
subtitle: 'Account Settings'
|
subtitle: 'Lihat Laporan'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
251
src/services/export/excel/ExcelExportPaymentService.ts
Normal file
251
src/services/export/excel/ExcelExportPaymentService.ts
Normal file
@ -0,0 +1,251 @@
|
|||||||
|
import type { PaymentReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class ExcelExportPaymentService {
|
||||||
|
/**
|
||||||
|
* Export Payment Method Report to Excel
|
||||||
|
*/
|
||||||
|
static async exportPaymentMethodToExcel(paymentData: PaymentReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk xlsx library
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
// Prepare data untuk Excel
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Header dengan report info (baris 1-2)
|
||||||
|
worksheetData.push(['LAPORAN METODE PEMBAYARAN']) // Row 0 - Main title
|
||||||
|
worksheetData.push([`Periode: ${paymentData.date_from.split('T')[0]} - ${paymentData.date_to.split('T')[0]}`]) // Row 1 - Period
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Summary Section
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const summaryData = [
|
||||||
|
['Total Amount:', `Rp ${paymentData.summary.total_amount.toLocaleString('id-ID')}`],
|
||||||
|
['Total Orders:', paymentData.summary.total_orders.toString()],
|
||||||
|
['Total Payments:', paymentData.summary.total_payments.toString()],
|
||||||
|
['Average Order Value:', `Rp ${paymentData.summary.average_order_value.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]]) // Only 2 columns needed
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Payment Method Details Section Header
|
||||||
|
worksheetData.push(['RINCIAN METODE PEMBAYARAN']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Header row untuk tabel payment method data
|
||||||
|
const headerRow = ['No', 'Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add payment method data rows
|
||||||
|
paymentData.data.forEach((payment, index) => {
|
||||||
|
const rowData = [
|
||||||
|
index + 1, // No
|
||||||
|
payment.payment_method_name,
|
||||||
|
payment.payment_method_type.toUpperCase(),
|
||||||
|
payment.order_count,
|
||||||
|
payment.total_amount, // Store as number for Excel formatting
|
||||||
|
`${(payment.percentage ?? 0).toFixed(1)}%`
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add total row
|
||||||
|
const totalRow = ['TOTAL', '', '', paymentData.summary.total_orders, paymentData.summary.total_amount, '100.0%']
|
||||||
|
worksheetData.push(totalRow)
|
||||||
|
|
||||||
|
// Create workbook dan worksheet
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
// Apply basic formatting
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
// Add worksheet ke workbook
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Metode Pembayaran')
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Metode_Pembayaran')
|
||||||
|
|
||||||
|
// Download file
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply basic formatting (SheetJS compatible)
|
||||||
|
*/
|
||||||
|
private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 8 }, // No
|
||||||
|
{ wch: 25 }, // Metode Pembayaran
|
||||||
|
{ wch: 12 }, // Tipe
|
||||||
|
{ wch: 15 }, // Jumlah Order
|
||||||
|
{ wch: 20 }, // Total Amount
|
||||||
|
{ wch: 12 } // Persentase
|
||||||
|
]
|
||||||
|
worksheet['!cols'] = colWidths
|
||||||
|
|
||||||
|
// Set row heights for better spacing
|
||||||
|
worksheet['!rows'] = [
|
||||||
|
{ hpt: 30 }, // Title row
|
||||||
|
{ hpt: 25 }, // Period row
|
||||||
|
{ hpt: 15 }, // Empty row
|
||||||
|
{ hpt: 25 }, // Summary header
|
||||||
|
{ hpt: 15 } // Empty row
|
||||||
|
]
|
||||||
|
|
||||||
|
// Merge cells untuk headers
|
||||||
|
const merges = [
|
||||||
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title (span across all columns)
|
||||||
|
{ s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Period (span across all columns)
|
||||||
|
{ s: { r: 3, c: 0 }, e: { r: 3, c: 5 } } // Summary header (span across all columns)
|
||||||
|
]
|
||||||
|
|
||||||
|
// Find and add merge for payment method details header
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'RINCIAN METODE PEMBAYARAN') {
|
||||||
|
merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } }) // Span across all columns
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheet['!merges'] = merges
|
||||||
|
|
||||||
|
// Apply number formatting untuk currency cells
|
||||||
|
this.applyNumberFormatting(worksheet, totalRows, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply number formatting for currency and styling
|
||||||
|
*/
|
||||||
|
private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Find table data start (after header row)
|
||||||
|
let dataStartRow = -1
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'No') {
|
||||||
|
dataStartRow = i + 1
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dataStartRow === -1) return
|
||||||
|
|
||||||
|
// Count actual data rows (excluding total row)
|
||||||
|
const dataRowsCount = totalRows - dataStartRow - 1 // -1 for total row
|
||||||
|
|
||||||
|
// Apply currency formatting to Total Amount column (column 4 - index 4)
|
||||||
|
for (let row = dataStartRow; row <= dataStartRow + dataRowsCount; row++) {
|
||||||
|
// Include total row
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: row, c: 4 }) // Total Amount column
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell && typeof cell.v === 'number') {
|
||||||
|
// Apply Indonesian currency format
|
||||||
|
cell.z = '#,##0'
|
||||||
|
cell.t = 'n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to header row
|
||||||
|
const headerRowIndex = dataStartRow - 1
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting (basic approach for SheetJS)
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
|
||||||
|
border: {
|
||||||
|
bottom: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to total row
|
||||||
|
const totalRowIndex = dataStartRow + dataRowsCount
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: totalRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting for total row
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
border: {
|
||||||
|
top: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Payment Method data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomPaymentData(
|
||||||
|
data: any[][],
|
||||||
|
sheetName: string = 'Payment Method',
|
||||||
|
filename?: string,
|
||||||
|
options?: {
|
||||||
|
colWidths?: { wch: number }[]
|
||||||
|
merges?: { s: { r: number; c: number }; e: { r: number; c: number } }[]
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(data)
|
||||||
|
|
||||||
|
// Apply options
|
||||||
|
if (options?.colWidths) {
|
||||||
|
worksheet['!cols'] = options.colWidths
|
||||||
|
}
|
||||||
|
if (options?.merges) {
|
||||||
|
worksheet['!merges'] = options.merges
|
||||||
|
}
|
||||||
|
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
|
||||||
|
|
||||||
|
const exportFilename = filename || this.generateFilename('Payment_Method_Export')
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
278
src/services/export/excel/ExcelExportProfitLossService.ts
Normal file
278
src/services/export/excel/ExcelExportProfitLossService.ts
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
// services/excelExportService.ts
|
||||||
|
import type { ProfitLossReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class ExcelExportProfitLossService {
|
||||||
|
/**
|
||||||
|
* Export Profit Loss Report to Excel
|
||||||
|
*/
|
||||||
|
static async exportProfitLossToExcel(profitData: ProfitLossReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk xlsx library
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
// Prepare data untuk Excel
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Header dengan company info (baris 1-2) - update data
|
||||||
|
worksheetData.push(['LABA RUGI']) // Row 0 - Main title
|
||||||
|
worksheetData.push([`Periode: ${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`]) // Row 1 - Period
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Summary Section
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const summaryData = [
|
||||||
|
['Total Revenue:', `Rp ${profitData.summary.total_revenue.toLocaleString('id-ID')}`],
|
||||||
|
['Total Cost:', `Rp ${profitData.summary.total_cost.toLocaleString('id-ID')}`],
|
||||||
|
['Gross Profit:', `Rp ${profitData.summary.gross_profit.toLocaleString('id-ID')}`],
|
||||||
|
['Gross Profit Margin:', `${profitData.summary.gross_profit_margin.toFixed(1)}%`],
|
||||||
|
['Total Tax:', `Rp ${profitData.summary.total_tax.toLocaleString('id-ID')}`],
|
||||||
|
['Total Discount:', `Rp ${profitData.summary.total_discount.toLocaleString('id-ID')}`],
|
||||||
|
['Net Profit:', `Rp ${profitData.summary.net_profit.toLocaleString('id-ID')}`],
|
||||||
|
['Net Profit Margin:', `${profitData.summary.net_profit_margin.toFixed(1)}%`],
|
||||||
|
['Total Orders:', profitData.summary.total_orders.toString()],
|
||||||
|
['Average Profit:', `Rp ${profitData.summary.average_profit.toLocaleString('id-ID')}`],
|
||||||
|
['Profitability Ratio:', `${profitData.summary.profitability_ratio.toFixed(1)}%`]
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]]) // Only 2 columns needed
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Daily Data Section Header
|
||||||
|
worksheetData.push(['RINCIAN HARIAN']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Prepare date columns - ambil dari daily data
|
||||||
|
const dateColumns = profitData.data.map(daily => {
|
||||||
|
const date = new Date(daily.date)
|
||||||
|
return date.toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'short'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Header row untuk tabel daily data (hanya tanggal)
|
||||||
|
const headerRow = ['NO', 'KET', '', ...dateColumns]
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Prepare data rows
|
||||||
|
const rows = this.prepareProfitLossRows(profitData)
|
||||||
|
|
||||||
|
// Add data rows ke worksheet (hanya nilai per tanggal)
|
||||||
|
rows.forEach(row => {
|
||||||
|
const rowData = [
|
||||||
|
row.no,
|
||||||
|
row.label,
|
||||||
|
':',
|
||||||
|
...row.values.map(val => val.today) // Store as numbers for better Excel handling
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Create workbook dan worksheet
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
// Apply basic formatting
|
||||||
|
this.applyBasicFormatting(worksheet, dateColumns.length, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
// Add worksheet ke workbook
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Laba Rugi')
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laba_Rugi')
|
||||||
|
|
||||||
|
// Download file
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepare profit loss data rows (tanpa percentage)
|
||||||
|
*/
|
||||||
|
private static prepareProfitLossRows(profitData: ProfitLossReport) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
no: 1,
|
||||||
|
label: 'TOTAL PENJ',
|
||||||
|
values: profitData.data.map(daily => ({
|
||||||
|
today: daily.revenue,
|
||||||
|
mtd: daily.revenue // TODO: Replace with actual MTD data from API
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 2,
|
||||||
|
label: 'HPP',
|
||||||
|
values: profitData.data.map(daily => ({
|
||||||
|
today: daily.cost,
|
||||||
|
mtd: daily.cost
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 3,
|
||||||
|
label: 'Laba Kotor (1-2)',
|
||||||
|
values: profitData.data.map(daily => ({
|
||||||
|
today: daily.gross_profit,
|
||||||
|
mtd: daily.gross_profit
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 4,
|
||||||
|
label: 'Biaya lain',
|
||||||
|
values: profitData.data.map(daily => {
|
||||||
|
const totalCosts = daily.tax + daily.discount
|
||||||
|
return {
|
||||||
|
today: totalCosts,
|
||||||
|
mtd: totalCosts
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 5,
|
||||||
|
label: 'Laba/Rugi (3-4)',
|
||||||
|
values: profitData.data.map(daily => ({
|
||||||
|
today: daily.net_profit,
|
||||||
|
mtd: daily.net_profit
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply basic formatting (SheetJS compatible)
|
||||||
|
*/
|
||||||
|
private static applyBasicFormatting(worksheet: any, dateColumnsCount: number, totalRows: number, XLSX: any) {
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 5 }, // NO
|
||||||
|
{ wch: 25 }, // KET
|
||||||
|
{ wch: 3 }, // :
|
||||||
|
...Array(dateColumnsCount).fill({ wch: 18 })
|
||||||
|
]
|
||||||
|
worksheet['!cols'] = colWidths
|
||||||
|
|
||||||
|
// Set row heights for better spacing
|
||||||
|
worksheet['!rows'] = [
|
||||||
|
{ hpt: 30 }, // Title row
|
||||||
|
{ hpt: 25 }, // Period row
|
||||||
|
{ hpt: 15 }, // Empty row
|
||||||
|
{ hpt: 25 }, // Summary header
|
||||||
|
{ hpt: 15 } // Empty row
|
||||||
|
]
|
||||||
|
|
||||||
|
// Merge cells untuk headers
|
||||||
|
const merges = [
|
||||||
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: dateColumnsCount + 2 } }, // Title
|
||||||
|
{ s: { r: 1, c: 0 }, e: { r: 1, c: dateColumnsCount + 2 } }, // Period
|
||||||
|
{ s: { r: 3, c: 0 }, e: { r: 3, c: dateColumnsCount + 2 } } // Summary header
|
||||||
|
]
|
||||||
|
|
||||||
|
// Find and add merge for daily data header
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'RINCIAN HARIAN') {
|
||||||
|
merges.push({ s: { r: i, c: 0 }, e: { r: i, c: dateColumnsCount + 2 } })
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheet['!merges'] = merges
|
||||||
|
|
||||||
|
// Apply number formatting untuk currency cells
|
||||||
|
this.applyNumberFormatting(worksheet, totalRows, dateColumnsCount + 3, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply number formatting for currency
|
||||||
|
*/
|
||||||
|
private static applyNumberFormatting(worksheet: any, totalRows: number, totalCols: number, XLSX: any) {
|
||||||
|
// Find table data start (after "NO" header)
|
||||||
|
let dataStartRow = -1
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'NO') {
|
||||||
|
dataStartRow = i + 1
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dataStartRow === -1) return
|
||||||
|
|
||||||
|
// Apply currency formatting to data cells (starting from column 3 - after NO, KET, :)
|
||||||
|
for (let row = dataStartRow; row < dataStartRow + 5; row++) {
|
||||||
|
// 5 data rows
|
||||||
|
for (let col = 3; col < totalCols; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell && typeof cell.v === 'number') {
|
||||||
|
// Apply Indonesian currency format
|
||||||
|
cell.z = '#,##0'
|
||||||
|
cell.t = 'n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export any data to Excel with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportToExcel(
|
||||||
|
data: any[][],
|
||||||
|
sheetName: string = 'Sheet1',
|
||||||
|
filename?: string,
|
||||||
|
options?: {
|
||||||
|
colWidths?: { wch: number }[]
|
||||||
|
merges?: { s: { r: number; c: number }; e: { r: number; c: number } }[]
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(data)
|
||||||
|
|
||||||
|
// Apply options
|
||||||
|
if (options?.colWidths) {
|
||||||
|
worksheet['!cols'] = options.colWidths
|
||||||
|
}
|
||||||
|
if (options?.merges) {
|
||||||
|
worksheet['!merges'] = options.merges
|
||||||
|
}
|
||||||
|
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
|
||||||
|
|
||||||
|
const exportFilename = filename || this.generateFilename('Export')
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
335
src/services/export/excel/ExcelExportSalesOrderService.ts
Normal file
335
src/services/export/excel/ExcelExportSalesOrderService.ts
Normal file
@ -0,0 +1,335 @@
|
|||||||
|
// services/excelExportSalesOrderService.ts
|
||||||
|
import type { SalesReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class ExcelExportSalesOrderService {
|
||||||
|
/**
|
||||||
|
* Export Sales Order Report to Excel
|
||||||
|
*/
|
||||||
|
static async exportSalesOrderToExcel(salesData: SalesReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk xlsx library
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
// Prepare data untuk Excel
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Header dengan report info (baris 1-2)
|
||||||
|
worksheetData.push(['LAPORAN PESANAN PENJUALAN']) // Row 0 - Main title
|
||||||
|
worksheetData.push([`Periode: ${salesData.date_from.split('T')[0]} - ${salesData.date_to.split('T')[0]}`]) // Row 1 - Period
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Summary Section
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const summaryData = [
|
||||||
|
['Total Sales:', `Rp ${salesData.summary.total_sales.toLocaleString('id-ID')}`],
|
||||||
|
['Total Orders:', salesData.summary.total_orders.toString()],
|
||||||
|
['Total Items:', salesData.summary.total_items.toString()],
|
||||||
|
['Average Order Value:', `Rp ${salesData.summary.average_order_value.toLocaleString('id-ID')}`],
|
||||||
|
['Total Tax:', `Rp ${salesData.summary.total_tax.toLocaleString('id-ID')}`],
|
||||||
|
['Total Discount:', `Rp ${salesData.summary.total_discount.toLocaleString('id-ID')}`],
|
||||||
|
['Net Sales:', `Rp ${salesData.summary.net_sales.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]]) // Only 2 columns needed
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Daily Sales Section Header
|
||||||
|
worksheetData.push(['RINCIAN HARIAN']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Header row untuk tabel daily sales data
|
||||||
|
const headerRow = ['No', 'Tanggal', 'Penjualan', 'Pesanan', 'Qty', 'Pajak', 'Diskon', 'Pendapatan']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add daily sales data rows
|
||||||
|
salesData.data?.forEach((dailySales, index) => {
|
||||||
|
const rowData = [
|
||||||
|
index + 1, // No
|
||||||
|
this.formatDate(dailySales.date),
|
||||||
|
dailySales.sales, // Store as number for Excel formatting
|
||||||
|
dailySales.orders,
|
||||||
|
dailySales.items,
|
||||||
|
dailySales.tax, // Store as number for Excel formatting
|
||||||
|
dailySales.discount, // Store as number for Excel formatting
|
||||||
|
dailySales.net_sales // Store as number for Excel formatting
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add total row
|
||||||
|
const totalRow = [
|
||||||
|
'TOTAL',
|
||||||
|
'',
|
||||||
|
salesData.summary.total_sales,
|
||||||
|
salesData.summary.total_orders,
|
||||||
|
salesData.summary.total_items,
|
||||||
|
salesData.summary.total_tax,
|
||||||
|
salesData.summary.total_discount,
|
||||||
|
salesData.summary.net_sales
|
||||||
|
]
|
||||||
|
worksheetData.push(totalRow)
|
||||||
|
|
||||||
|
// Create workbook dan worksheet
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
// Apply basic formatting
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
// Add worksheet ke workbook
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Pesanan Penjualan')
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Pesanan_Penjualan')
|
||||||
|
|
||||||
|
// Download file
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply basic formatting (SheetJS compatible)
|
||||||
|
*/
|
||||||
|
private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 8 }, // No
|
||||||
|
{ wch: 15 }, // Tanggal
|
||||||
|
{ wch: 18 }, // Penjualan
|
||||||
|
{ wch: 12 }, // Pesanan
|
||||||
|
{ wch: 10 }, // Qty
|
||||||
|
{ wch: 15 }, // Pajak
|
||||||
|
{ wch: 15 }, // Diskon
|
||||||
|
{ wch: 18 } // Pendapatan
|
||||||
|
]
|
||||||
|
worksheet['!cols'] = colWidths
|
||||||
|
|
||||||
|
// Set row heights for better spacing
|
||||||
|
worksheet['!rows'] = [
|
||||||
|
{ hpt: 30 }, // Title row
|
||||||
|
{ hpt: 25 }, // Period row
|
||||||
|
{ hpt: 15 }, // Empty row
|
||||||
|
{ hpt: 25 }, // Summary header
|
||||||
|
{ hpt: 15 } // Empty row
|
||||||
|
]
|
||||||
|
|
||||||
|
// Merge cells untuk headers
|
||||||
|
const merges = [
|
||||||
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: 7 } }, // Title (span across all columns)
|
||||||
|
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }, // Period (span across all columns)
|
||||||
|
{ s: { r: 3, c: 0 }, e: { r: 3, c: 7 } } // Summary header (span across all columns)
|
||||||
|
]
|
||||||
|
|
||||||
|
// Find and add merge for daily sales header
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'RINCIAN HARIAN') {
|
||||||
|
merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 7 } }) // Span across all columns
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheet['!merges'] = merges
|
||||||
|
|
||||||
|
// Apply number formatting untuk currency cells
|
||||||
|
this.applyNumberFormatting(worksheet, totalRows, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply number formatting for currency and styling
|
||||||
|
*/
|
||||||
|
private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Find table data start (after header row)
|
||||||
|
let dataStartRow = -1
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'No') {
|
||||||
|
dataStartRow = i + 1
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dataStartRow === -1) return
|
||||||
|
|
||||||
|
// Count actual data rows (excluding total row)
|
||||||
|
const dataRowsCount = totalRows - dataStartRow - 1 // -1 for total row
|
||||||
|
|
||||||
|
// Apply currency formatting to currency columns (columns 2, 5, 6, 7 - Penjualan, Pajak, Diskon, Pendapatan)
|
||||||
|
const currencyColumns = [2, 5, 6, 7]
|
||||||
|
for (let row = dataStartRow; row <= dataStartRow + dataRowsCount; row++) {
|
||||||
|
// Include total row
|
||||||
|
currencyColumns.forEach(col => {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell && typeof cell.v === 'number') {
|
||||||
|
// Apply Indonesian currency format
|
||||||
|
cell.z = '#,##0'
|
||||||
|
cell.t = 'n'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to header row
|
||||||
|
const headerRowIndex = dataStartRow - 1
|
||||||
|
for (let col = 0; col < 8; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting (basic approach for SheetJS)
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
|
||||||
|
border: {
|
||||||
|
bottom: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to total row
|
||||||
|
const totalRowIndex = dataStartRow + dataRowsCount
|
||||||
|
for (let col = 0; col < 8; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: totalRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting for total row
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
border: {
|
||||||
|
top: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
private static formatDate(dateString: string): string {
|
||||||
|
const date = new Date(dateString)
|
||||||
|
return date.toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Sales Order data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomSalesOrderData(
|
||||||
|
salesData: SalesReport,
|
||||||
|
options?: {
|
||||||
|
includeSummary?: boolean
|
||||||
|
includeItemsColumn?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
sheetName?: string
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Always include title and period
|
||||||
|
worksheetData.push(['LAPORAN PESANAN PENJUALAN'])
|
||||||
|
worksheetData.push([`Periode: ${salesData.date_from.split('T')[0]} - ${salesData.date_to.split('T')[0]}`])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
// Optional summary
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE'])
|
||||||
|
worksheetData.push([])
|
||||||
|
const summaryData = [
|
||||||
|
['Total Sales:', `Rp ${salesData.summary.total_sales.toLocaleString('id-ID')}`],
|
||||||
|
['Total Orders:', salesData.summary.total_orders.toString()],
|
||||||
|
['Total Items:', salesData.summary.total_items.toString()],
|
||||||
|
['Net Sales:', `Rp ${salesData.summary.net_sales.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
summaryData.forEach(row => worksheetData.push([row[0], row[1]]))
|
||||||
|
worksheetData.push([])
|
||||||
|
worksheetData.push([])
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheetData.push(['RINCIAN HARIAN'])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
// Header row based on options
|
||||||
|
const headerRow =
|
||||||
|
options?.includeItemsColumn !== false
|
||||||
|
? ['No', 'Tanggal', 'Penjualan', 'Pesanan', 'Qty', 'Pajak', 'Diskon', 'Pendapatan']
|
||||||
|
: ['No', 'Tanggal', 'Penjualan', 'Pesanan', 'Pajak', 'Diskon', 'Pendapatan']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add daily data based on options
|
||||||
|
salesData.data?.forEach((dailySales, index) => {
|
||||||
|
const rowData =
|
||||||
|
options?.includeItemsColumn !== false
|
||||||
|
? [
|
||||||
|
index + 1,
|
||||||
|
this.formatDate(dailySales.date),
|
||||||
|
dailySales.sales,
|
||||||
|
dailySales.orders,
|
||||||
|
dailySales.items,
|
||||||
|
dailySales.tax,
|
||||||
|
dailySales.discount,
|
||||||
|
dailySales.net_sales
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
index + 1,
|
||||||
|
this.formatDate(dailySales.date),
|
||||||
|
dailySales.sales,
|
||||||
|
dailySales.orders,
|
||||||
|
dailySales.tax,
|
||||||
|
dailySales.discount,
|
||||||
|
dailySales.net_sales
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
const sheetName = options?.sheetName || 'Pesanan Penjualan'
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Sales_Order')
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom sales order data to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,325 @@
|
|||||||
|
// services/excelExportCategoryService.ts
|
||||||
|
import type { CategoryReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class ExcelExportSalesProductCategoryService {
|
||||||
|
/**
|
||||||
|
* Export Category Sales Report to Excel
|
||||||
|
*/
|
||||||
|
static async exportCategorySalesToExcel(categoryData: CategoryReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk xlsx library
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
// Prepare data untuk Excel
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Header dengan report info (baris 1-2)
|
||||||
|
worksheetData.push(['LAPORAN PENJUALAN KATEGORI']) // Row 0 - Main title
|
||||||
|
worksheetData.push([`Periode: ${categoryData.date_from.split('T')[0]} - ${categoryData.date_to.split('T')[0]}`]) // Row 1 - Period
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Calculate summary
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
|
||||||
|
totalCategories: categoryData.data?.length || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Summary Section
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const summaryData = [
|
||||||
|
['Total Kategori:', categorySummary.totalCategories.toString()],
|
||||||
|
['Total Produk:', categorySummary.productCount.toString()],
|
||||||
|
['Total Quantity:', categorySummary.totalQuantity.toString()],
|
||||||
|
['Total Orders:', categorySummary.orderCount.toString()],
|
||||||
|
['Total Revenue:', `Rp ${categorySummary.totalRevenue.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]]) // Only 2 columns needed
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Category Details Section Header
|
||||||
|
worksheetData.push(['RINCIAN KATEGORI']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Header row untuk tabel category data
|
||||||
|
const headerRow = ['No', 'Nama', 'Total Produk', 'Qty', 'Total Orders', 'Pendapatan']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add category data rows
|
||||||
|
categoryData.data?.forEach((category, index) => {
|
||||||
|
const rowData = [
|
||||||
|
index + 1, // No
|
||||||
|
category.category_name,
|
||||||
|
category.product_count,
|
||||||
|
category.total_quantity,
|
||||||
|
category.order_count,
|
||||||
|
category.total_revenue // Store as number for Excel formatting
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add total row
|
||||||
|
const totalRow = [
|
||||||
|
'TOTAL',
|
||||||
|
'',
|
||||||
|
categorySummary.productCount,
|
||||||
|
categorySummary.totalQuantity,
|
||||||
|
categorySummary.orderCount,
|
||||||
|
categorySummary.totalRevenue
|
||||||
|
]
|
||||||
|
worksheetData.push(totalRow)
|
||||||
|
|
||||||
|
// Create workbook dan worksheet
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
// Apply basic formatting
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
// Add worksheet ke workbook
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Penjualan Kategori')
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Penjualan_Kategori')
|
||||||
|
|
||||||
|
// Download file
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply basic formatting (SheetJS compatible)
|
||||||
|
*/
|
||||||
|
private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 8 }, // No
|
||||||
|
{ wch: 30 }, // Nama
|
||||||
|
{ wch: 15 }, // Total Produk
|
||||||
|
{ wch: 12 }, // Qty
|
||||||
|
{ wch: 15 }, // Total Orders
|
||||||
|
{ wch: 20 } // Pendapatan
|
||||||
|
]
|
||||||
|
worksheet['!cols'] = colWidths
|
||||||
|
|
||||||
|
// Set row heights for better spacing
|
||||||
|
worksheet['!rows'] = [
|
||||||
|
{ hpt: 30 }, // Title row
|
||||||
|
{ hpt: 25 }, // Period row
|
||||||
|
{ hpt: 15 }, // Empty row
|
||||||
|
{ hpt: 25 }, // Summary header
|
||||||
|
{ hpt: 15 } // Empty row
|
||||||
|
]
|
||||||
|
|
||||||
|
// Merge cells untuk headers
|
||||||
|
const merges = [
|
||||||
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title (span across all columns)
|
||||||
|
{ s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Period (span across all columns)
|
||||||
|
{ s: { r: 3, c: 0 }, e: { r: 3, c: 5 } } // Summary header (span across all columns)
|
||||||
|
]
|
||||||
|
|
||||||
|
// Find and add merge for category details header
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'RINCIAN KATEGORI') {
|
||||||
|
merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } }) // Span across all columns
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheet['!merges'] = merges
|
||||||
|
|
||||||
|
// Apply number formatting untuk currency cells
|
||||||
|
this.applyNumberFormatting(worksheet, totalRows, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply number formatting for currency and styling
|
||||||
|
*/
|
||||||
|
private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Find table data start (after header row)
|
||||||
|
let dataStartRow = -1
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'No') {
|
||||||
|
dataStartRow = i + 1
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dataStartRow === -1) return
|
||||||
|
|
||||||
|
// Count actual data rows (excluding total row)
|
||||||
|
const dataRowsCount = totalRows - dataStartRow - 1 // -1 for total row
|
||||||
|
|
||||||
|
// Apply currency formatting to Pendapatan column (column 5 - index 5)
|
||||||
|
for (let row = dataStartRow; row <= dataStartRow + dataRowsCount; row++) {
|
||||||
|
// Include total row
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: row, c: 5 }) // Pendapatan column
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell && typeof cell.v === 'number') {
|
||||||
|
// Apply Indonesian currency format
|
||||||
|
cell.z = '#,##0'
|
||||||
|
cell.t = 'n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to header row
|
||||||
|
const headerRowIndex = dataStartRow - 1
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting (basic approach for SheetJS)
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
|
||||||
|
border: {
|
||||||
|
bottom: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to total row
|
||||||
|
const totalRowIndex = dataStartRow + dataRowsCount
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: totalRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting for total row
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
border: {
|
||||||
|
top: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Category Sales data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomCategoryData(
|
||||||
|
categoryData: CategoryReport,
|
||||||
|
options?: {
|
||||||
|
includeSummary?: boolean
|
||||||
|
includeOrderCount?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
sheetName?: string
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Always include title and period
|
||||||
|
worksheetData.push(['LAPORAN PENJUALAN KATEGORI'])
|
||||||
|
worksheetData.push([`Periode: ${categoryData.date_from.split('T')[0]} - ${categoryData.date_to.split('T')[0]}`])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
// Optional summary
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
|
||||||
|
totalCategories: categoryData.data?.length || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE'])
|
||||||
|
worksheetData.push([])
|
||||||
|
const summaryData = [
|
||||||
|
['Total Kategori:', categorySummary.totalCategories.toString()],
|
||||||
|
['Total Produk:', categorySummary.productCount.toString()],
|
||||||
|
['Total Quantity:', categorySummary.totalQuantity.toString()],
|
||||||
|
['Total Revenue:', `Rp ${categorySummary.totalRevenue.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
summaryData.forEach(row => worksheetData.push([row[0], row[1]]))
|
||||||
|
worksheetData.push([])
|
||||||
|
worksheetData.push([])
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheetData.push(['RINCIAN KATEGORI'])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
// Header row based on options
|
||||||
|
const headerRow =
|
||||||
|
options?.includeOrderCount !== false
|
||||||
|
? ['No', 'Nama', 'Total Produk', 'Qty', 'Total Orders', 'Pendapatan']
|
||||||
|
: ['No', 'Nama', 'Total Produk', 'Qty', 'Pendapatan']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add category data based on options
|
||||||
|
categoryData.data?.forEach((category, index) => {
|
||||||
|
const rowData =
|
||||||
|
options?.includeOrderCount !== false
|
||||||
|
? [
|
||||||
|
index + 1,
|
||||||
|
category.category_name,
|
||||||
|
category.product_count,
|
||||||
|
category.total_quantity,
|
||||||
|
category.order_count,
|
||||||
|
category.total_revenue
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
index + 1,
|
||||||
|
category.category_name,
|
||||||
|
category.product_count,
|
||||||
|
category.total_quantity,
|
||||||
|
category.total_revenue
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
const sheetName = options?.sheetName || 'Penjualan Kategori'
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Category_Sales')
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom category data to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
414
src/services/export/excel/ExcelExportSalesProductService.ts
Normal file
414
src/services/export/excel/ExcelExportSalesProductService.ts
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
// services/excelExportProductService.ts
|
||||||
|
import type { ProductSalesReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class ExcelExportSalesProductService {
|
||||||
|
/**
|
||||||
|
* Export Product Sales Report to Excel
|
||||||
|
*/
|
||||||
|
static async exportProductSalesToExcel(productData: ProductSalesReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk xlsx library
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
// Prepare data untuk Excel
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Header dengan report info (baris 1-2)
|
||||||
|
worksheetData.push(['LAPORAN PENJUALAN PRODUK']) // Row 0 - Main title
|
||||||
|
worksheetData.push([`Periode: ${productData.date_from.split('T')[0]} - ${productData.date_to.split('T')[0]}`]) // Row 1 - Period
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Calculate summary
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
averageRevenue: 0
|
||||||
|
}
|
||||||
|
productSummary.averageRevenue =
|
||||||
|
productSummary.totalQuantitySold > 0 ? productSummary.totalRevenue / productSummary.totalQuantitySold : 0
|
||||||
|
|
||||||
|
// Add Summary Section
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const summaryData = [
|
||||||
|
['Total Quantity Sold:', productSummary.totalQuantitySold.toString()],
|
||||||
|
['Total Orders:', productSummary.totalOrders.toString()],
|
||||||
|
['Total Revenue:', `Rp ${productSummary.totalRevenue.toLocaleString('id-ID')}`],
|
||||||
|
['Average Revenue per Item:', `Rp ${productSummary.averageRevenue.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]]) // Only 2 columns needed
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Product Details Section Header
|
||||||
|
worksheetData.push(['RINCIAN PRODUK']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Group products by category
|
||||||
|
const groupedProducts =
|
||||||
|
productData.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
// Header row untuk tabel product data
|
||||||
|
const headerRow = ['Kategori', 'Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add grouped products data
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
|
||||||
|
// Category header row
|
||||||
|
worksheetData.push([categoryName.toUpperCase(), '', '', '', '', ''])
|
||||||
|
|
||||||
|
// Category products
|
||||||
|
categoryProducts.forEach(item => {
|
||||||
|
const rowData = [
|
||||||
|
'', // Empty for category column (indented effect)
|
||||||
|
item.product_name,
|
||||||
|
item.quantity_sold,
|
||||||
|
item.order_count || 0,
|
||||||
|
item.revenue, // Store as number for Excel formatting
|
||||||
|
item.average_price // Store as number for Excel formatting
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category subtotal
|
||||||
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
||||||
|
const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
|
||||||
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
|
|
||||||
|
const categorySubtotalRow = [
|
||||||
|
`Subtotal ${categoryName}`,
|
||||||
|
'',
|
||||||
|
categoryTotalQty,
|
||||||
|
categoryTotalOrders,
|
||||||
|
categoryTotalRevenue,
|
||||||
|
''
|
||||||
|
]
|
||||||
|
worksheetData.push(categorySubtotalRow)
|
||||||
|
worksheetData.push([]) // Empty row between categories
|
||||||
|
})
|
||||||
|
|
||||||
|
// Grand total
|
||||||
|
const grandTotalRow = [
|
||||||
|
'TOTAL KESELURUHAN',
|
||||||
|
'',
|
||||||
|
productSummary.totalQuantitySold,
|
||||||
|
productSummary.totalOrders,
|
||||||
|
productSummary.totalRevenue,
|
||||||
|
''
|
||||||
|
]
|
||||||
|
worksheetData.push(grandTotalRow)
|
||||||
|
|
||||||
|
// Create workbook dan worksheet
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
// Apply basic formatting
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
// Add worksheet ke workbook
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Penjualan Produk')
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Penjualan_Produk')
|
||||||
|
|
||||||
|
// Download file
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply basic formatting (SheetJS compatible)
|
||||||
|
*/
|
||||||
|
private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 25 }, // Kategori
|
||||||
|
{ wch: 40 }, // Produk
|
||||||
|
{ wch: 12 }, // Qty
|
||||||
|
{ wch: 12 }, // Order
|
||||||
|
{ wch: 20 }, // Pendapatan
|
||||||
|
{ wch: 18 } // Rata Rata
|
||||||
|
]
|
||||||
|
worksheet['!cols'] = colWidths
|
||||||
|
|
||||||
|
// Set row heights for better spacing
|
||||||
|
worksheet['!rows'] = [
|
||||||
|
{ hpt: 30 }, // Title row
|
||||||
|
{ hpt: 25 }, // Period row
|
||||||
|
{ hpt: 15 }, // Empty row
|
||||||
|
{ hpt: 25 }, // Summary header
|
||||||
|
{ hpt: 15 } // Empty row
|
||||||
|
]
|
||||||
|
|
||||||
|
// Merge cells untuk headers
|
||||||
|
const merges = [
|
||||||
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title (span across all columns)
|
||||||
|
{ s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Period (span across all columns)
|
||||||
|
{ s: { r: 3, c: 0 }, e: { r: 3, c: 5 } } // Summary header (span across all columns)
|
||||||
|
]
|
||||||
|
|
||||||
|
// Find and add merge for product details header
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'RINCIAN PRODUK') {
|
||||||
|
merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } }) // Span across all columns
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheet['!merges'] = merges
|
||||||
|
|
||||||
|
// Apply number formatting untuk currency cells
|
||||||
|
this.applyNumberFormatting(worksheet, totalRows, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply number formatting for currency and styling
|
||||||
|
*/
|
||||||
|
private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Find table data start (after header row)
|
||||||
|
let dataStartRow = -1
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && cell.v === 'Kategori') {
|
||||||
|
dataStartRow = i + 1
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dataStartRow === -1) return
|
||||||
|
|
||||||
|
// Apply currency formatting to Pendapatan and Rata Rata columns (columns 4 and 5)
|
||||||
|
for (let row = dataStartRow; row < totalRows; row++) {
|
||||||
|
// Pendapatan column (index 4)
|
||||||
|
const revenueCell = worksheet[XLSX.utils.encode_cell({ r: row, c: 4 })]
|
||||||
|
if (revenueCell && typeof revenueCell.v === 'number') {
|
||||||
|
revenueCell.z = '#,##0'
|
||||||
|
revenueCell.t = 'n'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rata Rata column (index 5)
|
||||||
|
const avgCell = worksheet[XLSX.utils.encode_cell({ r: row, c: 5 })]
|
||||||
|
if (avgCell && typeof avgCell.v === 'number') {
|
||||||
|
avgCell.z = '#,##0'
|
||||||
|
avgCell.t = 'n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to header row
|
||||||
|
const headerRowIndex = dataStartRow - 1
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Apply bold formatting (basic approach for SheetJS)
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
|
||||||
|
border: {
|
||||||
|
bottom: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply styling to category headers and totals
|
||||||
|
for (let row = dataStartRow; row < totalRows; row++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: 0 })]
|
||||||
|
|
||||||
|
if (cell && cell.v) {
|
||||||
|
const cellValue = cell.v.toString()
|
||||||
|
|
||||||
|
// Style category headers (uppercase text without "Subtotal" or "TOTAL")
|
||||||
|
if (
|
||||||
|
cellValue === cellValue.toUpperCase() &&
|
||||||
|
!cellValue.includes('Subtotal') &&
|
||||||
|
!cellValue.includes('TOTAL') &&
|
||||||
|
cellValue.length > 0
|
||||||
|
) {
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const categoryCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const categoryCell = worksheet[categoryCellAddress]
|
||||||
|
if (categoryCell) {
|
||||||
|
categoryCell.s = {
|
||||||
|
font: { bold: true, color: { rgb: '36175E' } },
|
||||||
|
fill: { fgColor: { rgb: 'F8F8F8' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style subtotal and total rows
|
||||||
|
if (cellValue.startsWith('Subtotal') || cellValue.startsWith('TOTAL')) {
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const totalCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const totalCell = worksheet[totalCellAddress]
|
||||||
|
if (totalCell) {
|
||||||
|
totalCell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
border: {
|
||||||
|
top: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Product Sales data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomProductData(
|
||||||
|
productData: ProductSalesReport,
|
||||||
|
options?: {
|
||||||
|
includeSummary?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
sheetName?: string
|
||||||
|
groupByCategory?: boolean
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Always include title and period
|
||||||
|
worksheetData.push(['LAPORAN PENJUALAN PRODUK'])
|
||||||
|
worksheetData.push([`Periode: ${productData.date_from.split('T')[0]} - ${productData.date_to.split('T')[0]}`])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
// Optional summary
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE'])
|
||||||
|
worksheetData.push([])
|
||||||
|
const summaryData = [
|
||||||
|
['Total Quantity Sold:', productSummary.totalQuantitySold.toString()],
|
||||||
|
['Total Orders:', productSummary.totalOrders.toString()],
|
||||||
|
['Total Revenue:', `Rp ${productSummary.totalRevenue.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
summaryData.forEach(row => worksheetData.push([row[0], row[1]]))
|
||||||
|
worksheetData.push([])
|
||||||
|
worksheetData.push([])
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheetData.push(['RINCIAN PRODUK'])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
// Header row
|
||||||
|
const headerRow =
|
||||||
|
options?.groupByCategory !== false
|
||||||
|
? ['Kategori', 'Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
|
||||||
|
: ['Produk', 'Kategori', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
|
||||||
|
worksheetData.push(headerRow)
|
||||||
|
|
||||||
|
// Add product data based on grouping option
|
||||||
|
if (options?.groupByCategory !== false) {
|
||||||
|
// Group by category (default)
|
||||||
|
const groupedProducts =
|
||||||
|
productData.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
worksheetData.push([categoryName.toUpperCase(), '', '', '', '', ''])
|
||||||
|
categoryProducts.forEach(item => {
|
||||||
|
worksheetData.push([
|
||||||
|
'',
|
||||||
|
item.product_name,
|
||||||
|
item.quantity_sold,
|
||||||
|
item.order_count || 0,
|
||||||
|
item.revenue,
|
||||||
|
item.average_price
|
||||||
|
])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// Flat list without grouping
|
||||||
|
productData.data?.forEach(item => {
|
||||||
|
worksheetData.push([
|
||||||
|
item.product_name,
|
||||||
|
item.category_name,
|
||||||
|
item.quantity_sold,
|
||||||
|
item.order_count || 0,
|
||||||
|
item.revenue,
|
||||||
|
item.average_price
|
||||||
|
])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
const sheetName = options?.sheetName || 'Penjualan Produk'
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Product_Sales')
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom product data to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
469
src/services/export/excel/ExcelExportSalesService.ts
Normal file
469
src/services/export/excel/ExcelExportSalesService.ts
Normal file
@ -0,0 +1,469 @@
|
|||||||
|
// services/excelExportSalesService.ts
|
||||||
|
import type { CategoryReport, PaymentReport, ProductSalesReport, ProfitLossReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export interface SalesReportData {
|
||||||
|
profitLoss: ProfitLossReport
|
||||||
|
paymentAnalytics: PaymentReport
|
||||||
|
categoryAnalytics: CategoryReport
|
||||||
|
productAnalytics: ProductSalesReport
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ExcelExportSalesService {
|
||||||
|
/**
|
||||||
|
* Export Sales Report to Excel
|
||||||
|
*/
|
||||||
|
static async exportSalesReportToExcel(salesData: SalesReportData, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk xlsx library
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
|
||||||
|
// Prepare data untuk Excel
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Header dengan report info (baris 1-2)
|
||||||
|
worksheetData.push(['LAPORAN TRANSAKSI']) // Row 0 - Main title
|
||||||
|
worksheetData.push([
|
||||||
|
`Periode: ${salesData.profitLoss.date_from.split('T')[0]} - ${salesData.profitLoss.date_to.split('T')[0]}`
|
||||||
|
]) // Row 1 - Period
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Summary Section (Ringkasan)
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const ringkasanData = [
|
||||||
|
['Total Penjualan:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`],
|
||||||
|
['Total Diskon:', `Rp ${salesData.profitLoss.summary.total_discount.toLocaleString('id-ID')}`],
|
||||||
|
['Total Pajak:', `Rp ${salesData.profitLoss.summary.total_tax.toLocaleString('id-ID')}`],
|
||||||
|
['Total:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
|
||||||
|
ringkasanData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]])
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Invoice Section
|
||||||
|
worksheetData.push(['INVOICE']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
const invoiceData = [
|
||||||
|
['Total Invoice:', salesData.profitLoss.summary.total_orders.toString()],
|
||||||
|
['Rata-rata Tagihan Per Invoice:', `Rp ${salesData.profitLoss.summary.average_profit.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
|
||||||
|
invoiceData.forEach(row => {
|
||||||
|
worksheetData.push([row[0], row[1]])
|
||||||
|
})
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Payment Methods Section
|
||||||
|
worksheetData.push(['RINGKASAN METODE PEMBAYARAN']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Payment methods table header
|
||||||
|
const paymentHeaderRow = ['No', 'Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
|
||||||
|
worksheetData.push(paymentHeaderRow)
|
||||||
|
|
||||||
|
// Payment methods data
|
||||||
|
salesData.paymentAnalytics.data?.forEach((payment, index) => {
|
||||||
|
const rowData = [
|
||||||
|
index + 1,
|
||||||
|
payment.payment_method_name,
|
||||||
|
payment.payment_method_type.toUpperCase(),
|
||||||
|
payment.order_count,
|
||||||
|
payment.total_amount,
|
||||||
|
`${(payment.percentage ?? 0).toFixed(1)}%`
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Payment methods total row
|
||||||
|
const paymentTotalRow = [
|
||||||
|
'TOTAL',
|
||||||
|
'',
|
||||||
|
'',
|
||||||
|
salesData.paymentAnalytics.summary?.total_orders ?? 0,
|
||||||
|
salesData.paymentAnalytics.summary?.total_amount ?? 0,
|
||||||
|
'100.0%'
|
||||||
|
]
|
||||||
|
worksheetData.push(paymentTotalRow)
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Category Section
|
||||||
|
worksheetData.push(['RINGKASAN KATEGORI']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Category table header
|
||||||
|
const categoryHeaderRow = ['No', 'Nama', 'Total Produk', 'Qty', 'Pendapatan']
|
||||||
|
worksheetData.push(categoryHeaderRow)
|
||||||
|
|
||||||
|
// Calculate category summaries
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: salesData.categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
productCount: salesData.categoryAnalytics.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity:
|
||||||
|
salesData.categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category data
|
||||||
|
salesData.categoryAnalytics.data?.forEach((category, index) => {
|
||||||
|
const rowData = [
|
||||||
|
index + 1,
|
||||||
|
category.category_name,
|
||||||
|
category.product_count,
|
||||||
|
category.total_quantity,
|
||||||
|
category.total_revenue
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category total row
|
||||||
|
const categoryTotalRow = [
|
||||||
|
'TOTAL',
|
||||||
|
'',
|
||||||
|
categorySummary.productCount,
|
||||||
|
categorySummary.totalQuantity,
|
||||||
|
categorySummary.totalRevenue
|
||||||
|
]
|
||||||
|
worksheetData.push(categoryTotalRow)
|
||||||
|
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Add Product Section
|
||||||
|
worksheetData.push(['RINGKASAN ITEM']) // Section header
|
||||||
|
worksheetData.push([]) // Empty row
|
||||||
|
|
||||||
|
// Group products by category
|
||||||
|
const groupedProducts =
|
||||||
|
salesData.productAnalytics.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
// Calculate product summary
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold:
|
||||||
|
salesData.productAnalytics.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: salesData.productAnalytics.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: salesData.productAnalytics.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Product table header
|
||||||
|
const productHeaderRow = ['Kategori', 'Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
|
||||||
|
worksheetData.push(productHeaderRow)
|
||||||
|
|
||||||
|
// Add grouped products data
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
|
||||||
|
// Category header row
|
||||||
|
worksheetData.push([categoryName.toUpperCase(), '', '', '', '', ''])
|
||||||
|
|
||||||
|
// Category products
|
||||||
|
categoryProducts.forEach(item => {
|
||||||
|
const rowData = [
|
||||||
|
'',
|
||||||
|
item.product_name,
|
||||||
|
item.quantity_sold,
|
||||||
|
item.order_count || 0,
|
||||||
|
item.revenue,
|
||||||
|
item.average_price
|
||||||
|
]
|
||||||
|
worksheetData.push(rowData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category subtotal
|
||||||
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
||||||
|
const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
|
||||||
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
|
const categoryAverage = categoryTotalQty > 0 ? categoryTotalRevenue / categoryTotalQty : 0
|
||||||
|
|
||||||
|
const categorySubtotalRow = [
|
||||||
|
`Subtotal ${categoryName}`,
|
||||||
|
'',
|
||||||
|
categoryTotalQty,
|
||||||
|
categoryTotalOrders,
|
||||||
|
categoryTotalRevenue,
|
||||||
|
categoryAverage
|
||||||
|
]
|
||||||
|
worksheetData.push(categorySubtotalRow)
|
||||||
|
worksheetData.push([]) // Empty row between categories
|
||||||
|
})
|
||||||
|
|
||||||
|
// Grand total
|
||||||
|
const grandTotalAverage =
|
||||||
|
productSummary.totalQuantitySold > 0 ? productSummary.totalRevenue / productSummary.totalQuantitySold : 0
|
||||||
|
const grandTotalRow = [
|
||||||
|
'TOTAL KESELURUHAN',
|
||||||
|
'',
|
||||||
|
productSummary.totalQuantitySold,
|
||||||
|
productSummary.totalOrders,
|
||||||
|
productSummary.totalRevenue,
|
||||||
|
grandTotalAverage
|
||||||
|
]
|
||||||
|
worksheetData.push(grandTotalRow)
|
||||||
|
|
||||||
|
// Create workbook dan worksheet
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
// Apply basic formatting
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
// Add worksheet ke workbook
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Laporan Transaksi')
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Transaksi')
|
||||||
|
|
||||||
|
// Download file
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting sales report to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply basic formatting (SheetJS compatible)
|
||||||
|
*/
|
||||||
|
private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Set column widths
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 25 }, // First column (category/label)
|
||||||
|
{ wch: 30 }, // Second column (description/name)
|
||||||
|
{ wch: 15 }, // Third column (numbers)
|
||||||
|
{ wch: 15 }, // Fourth column (numbers)
|
||||||
|
{ wch: 20 }, // Fifth column (amounts)
|
||||||
|
{ wch: 15 } // Sixth column (percentages/averages)
|
||||||
|
]
|
||||||
|
worksheet['!cols'] = colWidths
|
||||||
|
|
||||||
|
// Set row heights for better spacing
|
||||||
|
worksheet['!rows'] = [
|
||||||
|
{ hpt: 30 }, // Title row
|
||||||
|
{ hpt: 25 }, // Period row
|
||||||
|
{ hpt: 15 }, // Empty row
|
||||||
|
{ hpt: 25 }, // Section headers
|
||||||
|
{ hpt: 15 } // Empty row
|
||||||
|
]
|
||||||
|
|
||||||
|
// Merge cells untuk main headers
|
||||||
|
const merges = [
|
||||||
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Main title
|
||||||
|
{ s: { r: 1, c: 0 }, e: { r: 1, c: 5 } } // Period
|
||||||
|
]
|
||||||
|
|
||||||
|
// Find and add merges for section headers
|
||||||
|
const sectionHeaders = [
|
||||||
|
'RINGKASAN PERIODE',
|
||||||
|
'INVOICE',
|
||||||
|
'RINGKASAN METODE PEMBAYARAN',
|
||||||
|
'RINGKASAN KATEGORI',
|
||||||
|
'RINGKASAN ITEM'
|
||||||
|
]
|
||||||
|
|
||||||
|
for (let i = 0; i < totalRows; i++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
|
||||||
|
if (cell && sectionHeaders.includes(cell.v)) {
|
||||||
|
merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worksheet['!merges'] = merges
|
||||||
|
|
||||||
|
// Apply number formatting untuk currency cells
|
||||||
|
this.applyNumberFormatting(worksheet, totalRows, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply number formatting for currency
|
||||||
|
*/
|
||||||
|
private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Apply currency formatting to amount columns
|
||||||
|
for (let row = 0; row < totalRows; row++) {
|
||||||
|
// Check columns that might contain currency values (columns 1, 4, 5)
|
||||||
|
;[1, 4, 5].forEach(col => {
|
||||||
|
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const cell = worksheet[cellAddress]
|
||||||
|
|
||||||
|
if (cell && typeof cell.v === 'number' && cell.v > 1000) {
|
||||||
|
// Apply Indonesian currency format for large numbers
|
||||||
|
cell.z = '#,##0'
|
||||||
|
cell.t = 'n'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply formatting to specific sections
|
||||||
|
this.applySectionFormatting(worksheet, totalRows, XLSX)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply specific formatting to sections
|
||||||
|
*/
|
||||||
|
private static applySectionFormatting(worksheet: any, totalRows: number, XLSX: any) {
|
||||||
|
// Find and format table headers and total rows
|
||||||
|
const headerKeywords = ['No', 'Metode Pembayaran', 'Nama', 'Kategori', 'Produk']
|
||||||
|
const totalKeywords = ['TOTAL', 'Subtotal']
|
||||||
|
|
||||||
|
for (let row = 0; row < totalRows; row++) {
|
||||||
|
const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: 0 })]
|
||||||
|
|
||||||
|
if (cell) {
|
||||||
|
// Format table headers
|
||||||
|
if (headerKeywords.some(keyword => cell.v === keyword)) {
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const headerCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const headerCell = worksheet[headerCellAddress]
|
||||||
|
if (headerCell) {
|
||||||
|
headerCell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
fill: { fgColor: { rgb: 'F3F4F6' } },
|
||||||
|
border: {
|
||||||
|
bottom: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format total rows
|
||||||
|
if (totalKeywords.some(keyword => cell.v?.toString().startsWith(keyword))) {
|
||||||
|
for (let col = 0; col < 6; col++) {
|
||||||
|
const totalCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
|
||||||
|
const totalCell = worksheet[totalCellAddress]
|
||||||
|
if (totalCell) {
|
||||||
|
totalCell.s = {
|
||||||
|
font: { bold: true },
|
||||||
|
border: {
|
||||||
|
top: { style: 'medium', color: { rgb: '000000' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format section headers
|
||||||
|
const sectionHeaders = [
|
||||||
|
'RINGKASAN PERIODE',
|
||||||
|
'INVOICE',
|
||||||
|
'RINGKASAN METODE PEMBAYARAN',
|
||||||
|
'RINGKASAN KATEGORI',
|
||||||
|
'RINGKASAN ITEM'
|
||||||
|
]
|
||||||
|
if (sectionHeaders.includes(cell.v)) {
|
||||||
|
cell.s = {
|
||||||
|
font: { bold: true, color: { rgb: '662D91' } },
|
||||||
|
fill: { fgColor: { rgb: 'F8F9FA' } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export custom sales data to Excel with configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomSalesData(
|
||||||
|
salesData: SalesReportData,
|
||||||
|
options?: {
|
||||||
|
includeSections?: {
|
||||||
|
ringkasan?: boolean
|
||||||
|
invoice?: boolean
|
||||||
|
paymentMethods?: boolean
|
||||||
|
categories?: boolean
|
||||||
|
products?: boolean
|
||||||
|
}
|
||||||
|
customFilename?: string
|
||||||
|
sheetName?: string
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const XLSX = await import('xlsx')
|
||||||
|
const worksheetData: any[][] = []
|
||||||
|
|
||||||
|
// Always include title and period
|
||||||
|
worksheetData.push(['LAPORAN TRANSAKSI'])
|
||||||
|
worksheetData.push([
|
||||||
|
`Periode: ${salesData.profitLoss.date_from.split('T')[0]} - ${salesData.profitLoss.date_to.split('T')[0]}`
|
||||||
|
])
|
||||||
|
worksheetData.push([])
|
||||||
|
|
||||||
|
const sections = options?.includeSections || {
|
||||||
|
ringkasan: true,
|
||||||
|
invoice: true,
|
||||||
|
paymentMethods: true,
|
||||||
|
categories: true,
|
||||||
|
products: true
|
||||||
|
}
|
||||||
|
|
||||||
|
// Conditionally add sections based on options
|
||||||
|
if (sections.ringkasan) {
|
||||||
|
worksheetData.push(['RINGKASAN PERIODE'])
|
||||||
|
worksheetData.push([])
|
||||||
|
// Add ringkasan data...
|
||||||
|
const ringkasanData = [
|
||||||
|
['Total Penjualan:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`],
|
||||||
|
['Total Diskon:', `Rp ${salesData.profitLoss.summary.total_discount.toLocaleString('id-ID')}`],
|
||||||
|
['Total Pajak:', `Rp ${salesData.profitLoss.summary.total_tax.toLocaleString('id-ID')}`],
|
||||||
|
['Total:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`]
|
||||||
|
]
|
||||||
|
ringkasanData.forEach(row => worksheetData.push([row[0], row[1]]))
|
||||||
|
worksheetData.push([])
|
||||||
|
worksheetData.push([])
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add other sections similarly based on options...
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new()
|
||||||
|
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
|
||||||
|
|
||||||
|
this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
|
||||||
|
|
||||||
|
const sheetName = options?.sheetName || 'Laporan Transaksi'
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Sales_Report')
|
||||||
|
XLSX.writeFile(workbook, exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom sales report to Excel:', error)
|
||||||
|
return { success: false, error: 'Failed to export Excel file' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
364
src/services/export/pdf/PDFExportPaymentService.ts
Normal file
364
src/services/export/pdf/PDFExportPaymentService.ts
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
// services/pdfExportPaymentService.ts
|
||||||
|
import { PaymentReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class PDFExportPaymentService {
|
||||||
|
/**
|
||||||
|
* Export Payment Method Report to PDF
|
||||||
|
*/
|
||||||
|
static async exportPaymentMethodToPDF(paymentData: PaymentReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk jsPDF
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
// Create new PDF document - PORTRAIT A4
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
await this.addPaymentReportContent(pdf, paymentData)
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Metode_Pembayaran', 'pdf')
|
||||||
|
|
||||||
|
// Save PDF
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting payment report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add payment report content to PDF
|
||||||
|
*/
|
||||||
|
private static async addPaymentReportContent(pdf: any, paymentData: PaymentReport) {
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
// Helper function to check page break
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title
|
||||||
|
yPos = this.addReportTitle(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
|
||||||
|
// Section 1: Ringkasan
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Section 2: Payment Methods Detail
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addPaymentMethodsSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add report title
|
||||||
|
*/
|
||||||
|
private static addReportTitle(
|
||||||
|
pdf: any,
|
||||||
|
paymentData: PaymentReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text('Laporan Metode Pembayaran', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Period
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${paymentData.date_from.split('T')[0]} - ${paymentData.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Purple line separator
|
||||||
|
pdf.setDrawColor(102, 45, 145)
|
||||||
|
pdf.setLineWidth(2)
|
||||||
|
pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Ringkasan section - SAMA SEPERTI SALES REPORT STYLE
|
||||||
|
*/
|
||||||
|
private static addRingkasanSection(
|
||||||
|
pdf: any,
|
||||||
|
paymentData: PaymentReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title - SAMA SEPERTI SALES REPORT
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset text color
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
|
||||||
|
const ringkasanItems = [
|
||||||
|
{ label: 'Total Amount', value: this.formatCurrency(paymentData.summary.total_amount), bold: false },
|
||||||
|
{ label: 'Total Orders', value: paymentData.summary.total_orders.toString(), bold: false },
|
||||||
|
{ label: 'Total Payments', value: paymentData.summary.total_payments.toString(), bold: false },
|
||||||
|
{ label: 'Average Order Value', value: this.formatCurrency(paymentData.summary.average_order_value), bold: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
ringkasanItems.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(15)) yPos = 20
|
||||||
|
|
||||||
|
// Set font weight
|
||||||
|
pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
|
||||||
|
|
||||||
|
pdf.text(item.label, marginLeft, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light separator line (except for last row)
|
||||||
|
if (!item.bold) {
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.5)
|
||||||
|
pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos += 8
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Payment Methods section - ORIGINAL STYLE DARI SALES REPORT
|
||||||
|
*/
|
||||||
|
private static addPaymentMethodsSection(
|
||||||
|
pdf: any,
|
||||||
|
paymentData: PaymentReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Metode Pembayaran', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [50, 25, 30, 35, 25] // Method, Type, Order, Amount, %
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
paymentData.data?.forEach((payment, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Method name
|
||||||
|
pdf.text(payment.payment_method_name, currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Type with simple color coding
|
||||||
|
const typeText = payment.payment_method_type.toUpperCase()
|
||||||
|
if (payment.payment_method_type === 'cash') {
|
||||||
|
pdf.setTextColor(0, 120, 0) // Green
|
||||||
|
} else if (payment.payment_method_type === 'card') {
|
||||||
|
pdf.setTextColor(0, 80, 200) // Blue
|
||||||
|
} else {
|
||||||
|
pdf.setTextColor(200, 100, 0) // Orange
|
||||||
|
}
|
||||||
|
pdf.text(typeText, currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
pdf.setTextColor(0, 0, 0) // Reset color
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Order count
|
||||||
|
pdf.text(payment.order_count.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Amount
|
||||||
|
pdf.text(this.formatCurrency(payment.total_amount), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
// Percentage
|
||||||
|
pdf.text(`${(payment.percentage ?? 0).toFixed(1)}%`, currentX + colWidths[4] / 2, yPos + 5, { align: 'center' })
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total) - directly after last row
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0] + colWidths[1]
|
||||||
|
|
||||||
|
pdf.text((paymentData.summary?.total_orders ?? 0).toString(), currentX + colWidths[2] / 2, yPos + 6, {
|
||||||
|
align: 'center'
|
||||||
|
})
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(paymentData.summary?.total_amount ?? 0), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
currentX += colWidths[3]
|
||||||
|
pdf.text('100.0%', currentX + colWidths[4] / 2, yPos + 6, { align: 'center' })
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency for display
|
||||||
|
*/
|
||||||
|
private static formatCurrency(amount: number): string {
|
||||||
|
return `Rp ${amount.toLocaleString('id-ID')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string, extension: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Payment Method data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomPaymentToPDF(
|
||||||
|
paymentData: PaymentReport,
|
||||||
|
options?: {
|
||||||
|
title?: string
|
||||||
|
includeSummary?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom title if provided
|
||||||
|
if (options?.title) {
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 15
|
||||||
|
} else {
|
||||||
|
yPos = this.addReportTitle(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optional summary section
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Payment methods detail
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addPaymentMethodsSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Payment_Report', 'pdf')
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom payment report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
577
src/services/export/pdf/PDFExportProfitLossService.ts
Normal file
577
src/services/export/pdf/PDFExportProfitLossService.ts
Normal file
@ -0,0 +1,577 @@
|
|||||||
|
// services/pdfExportService.ts
|
||||||
|
import type { ProfitLossReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class PDFExportProfitLossService {
|
||||||
|
/**
|
||||||
|
* Export Profit Loss Report to PDF (Simple approach)
|
||||||
|
*/
|
||||||
|
static async exportProfitLossToPDF(profitData: ProfitLossReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk jsPDF
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
// Create new PDF document - PORTRAIT A4
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4') // portrait
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
this.addBasicContent(pdf, profitData)
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laba_Rugi', 'pdf')
|
||||||
|
|
||||||
|
// Save PDF
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add basic content to PDF with proper page management
|
||||||
|
*/
|
||||||
|
private static addBasicContent(pdf: any, profitData: ProfitLossReport) {
|
||||||
|
let yPos = 20 // Reduced from 30
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginBottom = 15 // Reduced from 20
|
||||||
|
|
||||||
|
// Title - Center aligned
|
||||||
|
pdf.setFontSize(18) // Reduced from 20
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.text('Laporan Laba Rugi', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10 // Reduced from 15
|
||||||
|
|
||||||
|
// Period - Center aligned
|
||||||
|
pdf.setFontSize(11) // Reduced from 12
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 12 // Reduced from 20
|
||||||
|
|
||||||
|
// Purple line separator
|
||||||
|
pdf.setDrawColor(102, 45, 145) // Purple color
|
||||||
|
pdf.setLineWidth(1.5) // Reduced from 2
|
||||||
|
pdf.line(20, yPos, pageWidth - 20, yPos)
|
||||||
|
yPos += 15 // Reduced from 25
|
||||||
|
|
||||||
|
// Ringkasan section
|
||||||
|
pdf.setFontSize(14) // Reduced from 16
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145) // Purple color
|
||||||
|
pdf.text('Ringkasan', 20, yPos)
|
||||||
|
yPos += 12 // Reduced from 20
|
||||||
|
|
||||||
|
// Reset text color to black
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(11) // Reduced from 12
|
||||||
|
|
||||||
|
// Summary items with consistent spacing
|
||||||
|
const summaryItems = [
|
||||||
|
{ label: 'Total Penjualan', value: this.formatCurrency(profitData.summary.total_revenue) },
|
||||||
|
{ label: 'Total Biaya', value: this.formatCurrency(profitData.summary.total_cost) },
|
||||||
|
{ label: 'Total Diskon', value: this.formatCurrency(profitData.summary.total_discount) },
|
||||||
|
{ label: 'Total Pajak', value: this.formatCurrency(profitData.summary.total_tax) },
|
||||||
|
{ label: 'Laba Kotor', value: this.formatCurrency(profitData.summary.gross_profit) },
|
||||||
|
{ label: 'Laba Bersih', value: this.formatCurrency(profitData.summary.net_profit) }
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryItems.forEach((item, index) => {
|
||||||
|
// Add some spacing between items
|
||||||
|
if (index > 0) yPos += 8 // Reduced from 12
|
||||||
|
|
||||||
|
// Check if we need new page for summary items
|
||||||
|
if (yPos > pageHeight - marginBottom - 15) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20 // Reduced from 30
|
||||||
|
}
|
||||||
|
|
||||||
|
// Label on left
|
||||||
|
pdf.text(item.label, 20, yPos)
|
||||||
|
|
||||||
|
// Value on right
|
||||||
|
pdf.text(item.value, pageWidth - 20, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light gray line separator
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(20, yPos + 3, pageWidth - 20, yPos + 3)
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 20 // Reduced from 30
|
||||||
|
|
||||||
|
// Check if we need new page before daily breakdown
|
||||||
|
if (yPos > pageHeight - marginBottom - 40) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20 // Reduced from 30
|
||||||
|
}
|
||||||
|
|
||||||
|
// Daily breakdown section
|
||||||
|
pdf.setFontSize(14) // Reduced from 16
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145) // Purple color
|
||||||
|
pdf.text('Rincian Harian', 20, yPos)
|
||||||
|
yPos += 12 // Reduced from 20
|
||||||
|
|
||||||
|
// Reset text color
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Create simple daily breakdown with page management
|
||||||
|
profitData.data.forEach((daily, index) => {
|
||||||
|
// Estimate space needed for this daily section (approx 100mm)
|
||||||
|
const estimatedSpace = 100
|
||||||
|
|
||||||
|
// Check if we need new page before adding daily section
|
||||||
|
if (yPos + estimatedSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20 // Reduced from 30
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos = this.addCleanDailySection(pdf, daily, yPos, pageWidth, pageHeight, marginBottom)
|
||||||
|
yPos += 10 // Reduced from 15 - Space between daily sections
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add clean daily section with page break management
|
||||||
|
*/
|
||||||
|
private static addCleanDailySection(
|
||||||
|
pdf: any,
|
||||||
|
dailyData: any,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
pageHeight: number,
|
||||||
|
marginBottom: number
|
||||||
|
) {
|
||||||
|
const date = new Date(dailyData.date).toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric'
|
||||||
|
})
|
||||||
|
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Check if we have enough space for the header
|
||||||
|
if (yPos > pageHeight - marginBottom - 20) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20 // Reduced from 30
|
||||||
|
}
|
||||||
|
|
||||||
|
// Date header
|
||||||
|
pdf.setFontSize(12) // Reduced from 14
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.text(date, 20, yPos)
|
||||||
|
yPos += 10 // Reduced from 15
|
||||||
|
|
||||||
|
// Daily data items
|
||||||
|
pdf.setFontSize(10) // Reduced from 11
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
|
||||||
|
const dailyItems = [
|
||||||
|
{ label: 'Penjualan', value: this.formatCurrency(dailyData.revenue) },
|
||||||
|
{ label: 'HPP (Biaya Pokok)', value: this.formatCurrency(dailyData.cost) },
|
||||||
|
{ label: 'Laba Kotor', value: this.formatCurrency(dailyData.gross_profit) },
|
||||||
|
{ label: 'Pajak', value: this.formatCurrency(dailyData.tax) },
|
||||||
|
{ label: 'Diskon', value: this.formatCurrency(dailyData.discount) },
|
||||||
|
{ label: 'Jumlah Order', value: dailyData.orders.toString() + ' transaksi' },
|
||||||
|
{ label: 'Laba Bersih', value: this.formatCurrency(dailyData.net_profit), isTotal: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
dailyItems.forEach((item, index) => {
|
||||||
|
if (index > 0) yPos += 7 // Reduced from 10
|
||||||
|
|
||||||
|
// Check if we need new page for each item
|
||||||
|
if (yPos > pageHeight - marginBottom - 15) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20 // Reduced from 30
|
||||||
|
}
|
||||||
|
|
||||||
|
// Special styling for total (Laba Bersih)
|
||||||
|
if (item.isTotal) {
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
|
||||||
|
// Light background for total row - adjusted to center with text
|
||||||
|
pdf.setFillColor(248, 248, 248)
|
||||||
|
pdf.rect(20, yPos - 4, pageWidth - 40, 9, 'F') // Slightly bigger and better positioned
|
||||||
|
} else {
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Label on left - consistent with other rows
|
||||||
|
pdf.text(item.label, 25, yPos)
|
||||||
|
|
||||||
|
// Value on right - consistent with other rows
|
||||||
|
pdf.text(item.value, pageWidth - 25, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Subtle line separator (except for last item)
|
||||||
|
if (index < dailyItems.length - 1) {
|
||||||
|
pdf.setDrawColor(245, 245, 245)
|
||||||
|
pdf.setLineWidth(0.2)
|
||||||
|
pdf.line(25, yPos + 1.5, pageWidth - 25, yPos + 1.5) // Reduced from yPos + 2
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 6 // Reduced from 8
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency for display
|
||||||
|
*/
|
||||||
|
private static formatCurrency(amount: number): string {
|
||||||
|
return `Rp ${amount.toLocaleString('id-ID')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string, extension: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Alternative: More precise page break management
|
||||||
|
*/
|
||||||
|
static async exportWithBetterPageBreaks(profitData: ProfitLossReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
// Use more precise measurements
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight() // ~297mm for A4
|
||||||
|
const safeHeight = pageHeight - 30 // Keep 30mm margin from bottom
|
||||||
|
|
||||||
|
let currentY = 30
|
||||||
|
|
||||||
|
// Helper function to check and add new page
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (currentY + neededSpace > safeHeight) {
|
||||||
|
pdf.addPage()
|
||||||
|
currentY = 30
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add title and header
|
||||||
|
currentY = this.addTitleSection(pdf, profitData, currentY)
|
||||||
|
|
||||||
|
// Add summary with page break check
|
||||||
|
checkPageBreak(80) // Estimate 80mm needed for summary
|
||||||
|
currentY = this.addSummarySection(pdf, profitData, currentY, checkPageBreak)
|
||||||
|
|
||||||
|
// Add daily breakdown
|
||||||
|
checkPageBreak(40) // Space for section header
|
||||||
|
currentY = this.addDailyBreakdownSection(pdf, profitData, currentY, checkPageBreak)
|
||||||
|
|
||||||
|
const exportFilename = filename || this.generateFilename('Laba_Rugi', 'pdf')
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add title section
|
||||||
|
*/
|
||||||
|
private static addTitleSection(pdf: any, profitData: ProfitLossReport, startY: number): number {
|
||||||
|
let yPos = startY
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.text('Laporan Laba Rugi', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
// Period
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 20
|
||||||
|
|
||||||
|
// Separator line
|
||||||
|
pdf.setDrawColor(102, 45, 145)
|
||||||
|
pdf.setLineWidth(2)
|
||||||
|
pdf.line(20, yPos, pageWidth - 20, yPos)
|
||||||
|
yPos += 25
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add summary section with page break callback
|
||||||
|
*/
|
||||||
|
private static addSummarySection(
|
||||||
|
pdf: any,
|
||||||
|
profitData: ProfitLossReport,
|
||||||
|
startY: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(16)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan', 20, yPos)
|
||||||
|
yPos += 20
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
|
||||||
|
const summaryItems = [
|
||||||
|
{ label: 'Total Penjualan', value: this.formatCurrency(profitData.summary.total_revenue) },
|
||||||
|
{ label: 'Total Biaya', value: this.formatCurrency(profitData.summary.total_cost) },
|
||||||
|
{ label: 'Total Diskon', value: this.formatCurrency(profitData.summary.total_discount) },
|
||||||
|
{ label: 'Total Pajak', value: this.formatCurrency(profitData.summary.total_tax) },
|
||||||
|
{ label: 'Laba Kotor', value: this.formatCurrency(profitData.summary.gross_profit) },
|
||||||
|
{ label: 'Laba Bersih', value: this.formatCurrency(profitData.summary.net_profit) }
|
||||||
|
]
|
||||||
|
|
||||||
|
summaryItems.forEach((item, index) => {
|
||||||
|
if (index > 0) yPos += 12
|
||||||
|
|
||||||
|
// Check page break for each item
|
||||||
|
if (checkPageBreak(15)) {
|
||||||
|
yPos = 30
|
||||||
|
}
|
||||||
|
|
||||||
|
pdf.text(item.label, 20, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - 20, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Separator line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(20, yPos + 3, pageWidth - 20, yPos + 3)
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 30
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add daily breakdown section with page break management
|
||||||
|
*/
|
||||||
|
private static addDailyBreakdownSection(
|
||||||
|
pdf: any,
|
||||||
|
profitData: ProfitLossReport,
|
||||||
|
startY: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(16)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Harian', 20, yPos)
|
||||||
|
yPos += 20
|
||||||
|
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
profitData.data.forEach((daily, index) => {
|
||||||
|
// Check if we need space for this daily section (estimate ~90mm)
|
||||||
|
if (checkPageBreak(90)) {
|
||||||
|
yPos = 30
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos = this.addSingleDayData(pdf, daily, yPos)
|
||||||
|
yPos += 15
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add single day data
|
||||||
|
*/
|
||||||
|
private static addSingleDayData(pdf: any, dailyData: any, startY: number): number {
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
const date = new Date(dailyData.date).toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric'
|
||||||
|
})
|
||||||
|
|
||||||
|
// Date header
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.text(date, 20, yPos)
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
// Daily items
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{ label: 'Penjualan', value: this.formatCurrency(dailyData.revenue) },
|
||||||
|
{ label: 'HPP (Biaya Pokok)', value: this.formatCurrency(dailyData.cost) },
|
||||||
|
{ label: 'Laba Kotor', value: this.formatCurrency(dailyData.gross_profit) },
|
||||||
|
{ label: 'Pajak', value: this.formatCurrency(dailyData.tax) },
|
||||||
|
{ label: 'Diskon', value: this.formatCurrency(dailyData.discount) },
|
||||||
|
{ label: 'Jumlah Order', value: dailyData.orders.toString() + ' transaksi' },
|
||||||
|
{ label: 'Laba Bersih', value: this.formatCurrency(dailyData.net_profit), isTotal: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
if (index > 0) yPos += 10
|
||||||
|
|
||||||
|
if (item.isTotal) {
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFillColor(248, 248, 248)
|
||||||
|
pdf.rect(20, yPos - 4, pageWidth - 40, 10, 'F')
|
||||||
|
} else {
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
}
|
||||||
|
|
||||||
|
pdf.text(item.label, 25, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - 25, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
if (index < items.length - 1) {
|
||||||
|
pdf.setDrawColor(245, 245, 245)
|
||||||
|
pdf.setLineWidth(0.2)
|
||||||
|
pdf.line(25, yPos + 2, pageWidth - 25, yPos + 2)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 8
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Alternative HTML to PDF method (if needed)
|
||||||
|
*/
|
||||||
|
static async exportToHTMLPDF(profitData: ProfitLossReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
const htmlContent = this.generateSimpleHTML(profitData)
|
||||||
|
|
||||||
|
// Create a temporary element and trigger print
|
||||||
|
const printWindow = window.open('', '_blank')
|
||||||
|
if (printWindow) {
|
||||||
|
printWindow.document.write(htmlContent)
|
||||||
|
printWindow.document.close()
|
||||||
|
printWindow.focus()
|
||||||
|
printWindow.print()
|
||||||
|
printWindow.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, filename: filename || 'Laba_Rugi.pdf' }
|
||||||
|
} catch (error) {
|
||||||
|
return { success: false, error: `HTML PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate simple HTML for printing
|
||||||
|
*/
|
||||||
|
private static generateSimpleHTML(profitData: ProfitLossReport): string {
|
||||||
|
const dateColumns = profitData.data.map(daily => {
|
||||||
|
const date = new Date(daily.date)
|
||||||
|
return date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' })
|
||||||
|
})
|
||||||
|
|
||||||
|
return `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Laporan Laba Rugi</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||||
|
h1 { color: #1f4e79; text-align: center; }
|
||||||
|
h2 { color: #333; border-bottom: 2px solid #ccc; }
|
||||||
|
.summary { margin-bottom: 30px; }
|
||||||
|
.summary-item { margin: 5px 0; padding: 5px; background: #f9f9f9; }
|
||||||
|
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
|
||||||
|
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
|
||||||
|
th { background-color: #d35400; color: white; text-align: center; }
|
||||||
|
.number { text-align: right; }
|
||||||
|
.center { text-align: center; }
|
||||||
|
@media print {
|
||||||
|
body { margin: 10px; }
|
||||||
|
.page-break { page-break-before: always; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>LAPORAN LABA RUGI</h1>
|
||||||
|
<p style="text-align: center;">
|
||||||
|
Periode: ${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>RINGKASAN PERIODE</h2>
|
||||||
|
<div class="summary">
|
||||||
|
<div class="summary-item">Total Revenue: <strong>${this.formatCurrency(profitData.summary.total_revenue)}</strong></div>
|
||||||
|
<div class="summary-item">Total Cost: <strong>${this.formatCurrency(profitData.summary.total_cost)}</strong></div>
|
||||||
|
<div class="summary-item">Gross Profit: <strong>${this.formatCurrency(profitData.summary.gross_profit)}</strong></div>
|
||||||
|
<div class="summary-item">Net Profit: <strong>${this.formatCurrency(profitData.summary.net_profit)}</strong></div>
|
||||||
|
<div class="summary-item">Total Orders: <strong>${profitData.summary.total_orders}</strong></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-break"></div>
|
||||||
|
<h2>RINCIAN HARIAN</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>NO</th>
|
||||||
|
<th>KETERANGAN</th>
|
||||||
|
<th></th>
|
||||||
|
${dateColumns.map(date => `<th>${date}</th>`).join('')}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="center">1</td>
|
||||||
|
<td><strong>TOTAL PENJ</strong></td>
|
||||||
|
<td class="center">:</td>
|
||||||
|
${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.revenue)}</td>`).join('')}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="center">2</td>
|
||||||
|
<td><strong>HPP</strong></td>
|
||||||
|
<td class="center">:</td>
|
||||||
|
${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.cost)}</td>`).join('')}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="center">3</td>
|
||||||
|
<td><strong>Laba Kotor</strong></td>
|
||||||
|
<td class="center">:</td>
|
||||||
|
${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.gross_profit)}</td>`).join('')}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="center">4</td>
|
||||||
|
<td><strong>Biaya lain</strong></td>
|
||||||
|
<td class="center">:</td>
|
||||||
|
${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.tax + daily.discount)}</td>`).join('')}
|
||||||
|
</tr>
|
||||||
|
<tr style="background-color: #154360; color: white; font-weight: bold;">
|
||||||
|
<td class="center">5</td>
|
||||||
|
<td>Laba/Rugi</td>
|
||||||
|
<td class="center">:</td>
|
||||||
|
${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.net_profit)}</td>`).join('')}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
529
src/services/export/pdf/PDFExportSalesOrderService.ts
Normal file
529
src/services/export/pdf/PDFExportSalesOrderService.ts
Normal file
@ -0,0 +1,529 @@
|
|||||||
|
// services/pdfExportSalesOrderService.ts
|
||||||
|
import { SalesReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class PDFExportSalesOrderService {
|
||||||
|
/**
|
||||||
|
* Export Sales Order Report to PDF
|
||||||
|
*/
|
||||||
|
static async exportSalesOrderToPDF(salesData: SalesReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk jsPDF
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
// Create new PDF document - PORTRAIT A4
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
await this.addSalesOrderReportContent(pdf, salesData)
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Pesanan_Penjualan', 'pdf')
|
||||||
|
|
||||||
|
// Save PDF
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting sales order report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add sales order report content to PDF
|
||||||
|
*/
|
||||||
|
private static async addSalesOrderReportContent(pdf: any, salesData: SalesReport) {
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
// Helper function to check page break
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title
|
||||||
|
yPos = this.addReportTitle(pdf, salesData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
|
||||||
|
// Section 1: Ringkasan
|
||||||
|
checkPageBreak(60)
|
||||||
|
yPos = this.addRingkasanSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Section 2: Daily Sales Details
|
||||||
|
checkPageBreak(100)
|
||||||
|
yPos = this.addDailySalesSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add report title
|
||||||
|
*/
|
||||||
|
private static addReportTitle(
|
||||||
|
pdf: any,
|
||||||
|
salesData: SalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text('Laporan Pesanan Penjualan', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Period
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${salesData.date_from.split('T')[0]} - ${salesData.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Purple line separator
|
||||||
|
pdf.setDrawColor(102, 45, 145)
|
||||||
|
pdf.setLineWidth(2)
|
||||||
|
pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Ringkasan section
|
||||||
|
*/
|
||||||
|
private static addRingkasanSection(
|
||||||
|
pdf: any,
|
||||||
|
salesData: SalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset text color
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
|
||||||
|
const ringkasanItems = [
|
||||||
|
{ label: 'Total Sales', value: this.formatCurrency(salesData.summary.total_sales), bold: false },
|
||||||
|
{ label: 'Total Orders', value: salesData.summary.total_orders.toString(), bold: false },
|
||||||
|
{ label: 'Total Items', value: salesData.summary.total_items.toString(), bold: false },
|
||||||
|
{ label: 'Average Order Value', value: this.formatCurrency(salesData.summary.average_order_value), bold: false },
|
||||||
|
{ label: 'Total Tax', value: this.formatCurrency(salesData.summary.total_tax), bold: false },
|
||||||
|
{ label: 'Total Discount', value: this.formatCurrency(salesData.summary.total_discount), bold: false },
|
||||||
|
{ label: 'Net Sales', value: this.formatCurrency(salesData.summary.net_sales), bold: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
ringkasanItems.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(15)) yPos = 20
|
||||||
|
|
||||||
|
// Set font weight
|
||||||
|
pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
|
||||||
|
|
||||||
|
pdf.text(item.label, marginLeft, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light separator line (except for bold row)
|
||||||
|
if (!item.bold) {
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.5)
|
||||||
|
pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos += 8
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Daily Sales section
|
||||||
|
*/
|
||||||
|
private static addDailySalesSection(
|
||||||
|
pdf: any,
|
||||||
|
salesData: SalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Harian', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup - adjust for 7 columns
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [20, 20, 25, 15, 20, 20, 25] // Date, Sales, Orders, Items, Tax, Discount, Net Sales
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(8) // Smaller font for more columns
|
||||||
|
|
||||||
|
const headers = ['Tanggal', 'Penjualan', 'Pesanan', 'Qty', 'Pajak', 'Diskon', 'Pendapatan']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(8)
|
||||||
|
|
||||||
|
salesData.data?.forEach((dailySales, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(8)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Date
|
||||||
|
pdf.text(this.formatDate(dailySales.date), currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Sales
|
||||||
|
pdf.text(this.formatCurrencyShort(dailySales.sales), currentX + colWidths[1] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Orders
|
||||||
|
pdf.text(dailySales.orders.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Items
|
||||||
|
pdf.text(dailySales.items.toString(), currentX + colWidths[3] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
// Tax
|
||||||
|
pdf.text(this.formatCurrencyShort(dailySales.tax), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[4]
|
||||||
|
|
||||||
|
// Discount
|
||||||
|
pdf.text(this.formatCurrencyShort(dailySales.discount), currentX + colWidths[5] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[5]
|
||||||
|
|
||||||
|
// Net Sales
|
||||||
|
pdf.text(this.formatCurrencyShort(dailySales.net_sales), currentX + colWidths[6] - 2, yPos + 5, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total)
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(8)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrencyShort(salesData.summary.total_sales), currentX + colWidths[1] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(salesData.summary.total_orders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(salesData.summary.total_items.toString(), currentX + colWidths[3] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrencyShort(salesData.summary.total_tax), currentX + colWidths[4] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
currentX += colWidths[4]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrencyShort(salesData.summary.total_discount), currentX + colWidths[5] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
currentX += colWidths[5]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrencyShort(salesData.summary.net_sales), currentX + colWidths[6] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency for display
|
||||||
|
*/
|
||||||
|
private static formatCurrency(amount: number): string {
|
||||||
|
return `Rp ${amount.toLocaleString('id-ID')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency short for table display
|
||||||
|
*/
|
||||||
|
private static formatCurrencyShort(amount: number): string {
|
||||||
|
if (amount >= 1000000) {
|
||||||
|
return `${(amount / 1000000).toFixed(1)}M`
|
||||||
|
} else if (amount >= 1000) {
|
||||||
|
return `${(amount / 1000).toFixed(0)}K`
|
||||||
|
} else {
|
||||||
|
return amount.toString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
private static formatDate(dateString: string): string {
|
||||||
|
const date = new Date(dateString)
|
||||||
|
return date.toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string, extension: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Sales Order data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomSalesOrderToPDF(
|
||||||
|
salesData: SalesReport,
|
||||||
|
options?: {
|
||||||
|
title?: string
|
||||||
|
includeSummary?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
compactMode?: boolean
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom title if provided
|
||||||
|
if (options?.title) {
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 15
|
||||||
|
} else {
|
||||||
|
yPos = this.addReportTitle(pdf, salesData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optional summary section
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
checkPageBreak(60)
|
||||||
|
yPos = this.addRingkasanSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Daily sales details
|
||||||
|
checkPageBreak(100)
|
||||||
|
if (options?.compactMode) {
|
||||||
|
yPos = this.addCompactDailySalesSection(
|
||||||
|
pdf,
|
||||||
|
salesData,
|
||||||
|
yPos,
|
||||||
|
pageWidth,
|
||||||
|
marginLeft,
|
||||||
|
marginRight,
|
||||||
|
checkPageBreak
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
yPos = this.addDailySalesSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Sales_Order', 'pdf')
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom sales order report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Compact Daily Sales section (fewer columns)
|
||||||
|
*/
|
||||||
|
private static addCompactDailySalesSection(
|
||||||
|
pdf: any,
|
||||||
|
salesData: SalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Harian (Compact)', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup - compact with 4 columns
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [30, 40, 30, 40] // Date, Sales, Orders, Net Sales
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Tanggal', 'Penjualan', 'Pesanan', 'Pendapatan']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
salesData.data?.forEach((dailySales, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Date
|
||||||
|
pdf.text(this.formatDate(dailySales.date), currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Sales
|
||||||
|
pdf.text(this.formatCurrency(dailySales.sales), currentX + colWidths[1] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Orders
|
||||||
|
pdf.text(dailySales.orders.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Net Sales
|
||||||
|
pdf.text(this.formatCurrency(dailySales.net_sales), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total)
|
||||||
|
pdf.setFillColor(245, 245, 245)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(salesData.summary.total_sales), currentX + colWidths[1] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(salesData.summary.total_orders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(salesData.summary.net_sales), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
}
|
||||||
556
src/services/export/pdf/PDFExportSalesProductCategoryService.ts
Normal file
556
src/services/export/pdf/PDFExportSalesProductCategoryService.ts
Normal file
@ -0,0 +1,556 @@
|
|||||||
|
// services/pdfExportCategoryService.ts
|
||||||
|
import { CategoryReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class PDFExportSalesProductCategoryService {
|
||||||
|
/**
|
||||||
|
* Export Category Sales Report to PDF
|
||||||
|
*/
|
||||||
|
static async exportCategorySalesToPDF(categoryData: CategoryReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk jsPDF
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
// Create new PDF document - PORTRAIT A4
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
await this.addCategoryReportContent(pdf, categoryData)
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Penjualan_Kategori', 'pdf')
|
||||||
|
|
||||||
|
// Save PDF
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting category report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add category report content to PDF
|
||||||
|
*/
|
||||||
|
private static async addCategoryReportContent(pdf: any, categoryData: CategoryReport) {
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
// Helper function to check page break
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title
|
||||||
|
yPos = this.addReportTitle(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
|
||||||
|
// Section 1: Ringkasan
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Section 2: Category Details
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addCategoryDetailsSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add report title
|
||||||
|
*/
|
||||||
|
private static addReportTitle(
|
||||||
|
pdf: any,
|
||||||
|
categoryData: CategoryReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text('Laporan Penjualan Kategori', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Period
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${categoryData.date_from.split('T')[0]} - ${categoryData.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Purple line separator
|
||||||
|
pdf.setDrawColor(102, 45, 145)
|
||||||
|
pdf.setLineWidth(2)
|
||||||
|
pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Ringkasan section
|
||||||
|
*/
|
||||||
|
private static addRingkasanSection(
|
||||||
|
pdf: any,
|
||||||
|
categoryData: CategoryReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset text color
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
|
||||||
|
// Calculate summary
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
|
||||||
|
totalCategories: categoryData.data?.length || 0,
|
||||||
|
averageRevenuePerCategory: 0
|
||||||
|
}
|
||||||
|
categorySummary.averageRevenuePerCategory =
|
||||||
|
categorySummary.totalCategories > 0 ? categorySummary.totalRevenue / categorySummary.totalCategories : 0
|
||||||
|
|
||||||
|
const ringkasanItems = [
|
||||||
|
{ label: 'Total Kategori', value: categorySummary.totalCategories.toString(), bold: false },
|
||||||
|
{ label: 'Total Produk', value: categorySummary.productCount.toString(), bold: false },
|
||||||
|
{ label: 'Total Quantity', value: categorySummary.totalQuantity.toString(), bold: false },
|
||||||
|
{ label: 'Total Orders', value: categorySummary.orderCount.toString(), bold: false },
|
||||||
|
{ label: 'Total Revenue', value: this.formatCurrency(categorySummary.totalRevenue), bold: true },
|
||||||
|
{
|
||||||
|
label: 'Rata-rata Revenue per Kategori',
|
||||||
|
value: this.formatCurrency(categorySummary.averageRevenuePerCategory),
|
||||||
|
bold: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
ringkasanItems.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(15)) yPos = 20
|
||||||
|
|
||||||
|
// Set font weight
|
||||||
|
pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
|
||||||
|
|
||||||
|
pdf.text(item.label, marginLeft, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light separator line (except for bold row)
|
||||||
|
if (!item.bold) {
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.5)
|
||||||
|
pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos += 8
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Category Details section
|
||||||
|
*/
|
||||||
|
private static addCategoryDetailsSection(
|
||||||
|
pdf: any,
|
||||||
|
categoryData: CategoryReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Kategori', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [50, 30, 25, 35] // Name, Products, Qty, Revenue
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Nama', 'Total Produk', 'Qty', 'Pendapatan']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Calculate summary for footer
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
categoryData.data?.forEach((category, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Category name
|
||||||
|
pdf.text(category.category_name, currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Product count
|
||||||
|
pdf.text(category.product_count.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Quantity
|
||||||
|
pdf.text(category.total_quantity.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Revenue
|
||||||
|
pdf.text(this.formatCurrency(category.total_revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total)
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.productCount.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.totalQuantity.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(categorySummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency for display
|
||||||
|
*/
|
||||||
|
private static formatCurrency(amount: number): string {
|
||||||
|
return `Rp ${amount.toLocaleString('id-ID')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string, extension: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Category Sales data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomCategoryToPDF(
|
||||||
|
categoryData: CategoryReport,
|
||||||
|
options?: {
|
||||||
|
title?: string
|
||||||
|
includeSummary?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
includeOrderCount?: boolean
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom title if provided
|
||||||
|
if (options?.title) {
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 15
|
||||||
|
} else {
|
||||||
|
yPos = this.addReportTitle(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optional summary section
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category details
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addCategoryDetailsSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Category_Sales', 'pdf')
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom category report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Category Sales with extended table including order count
|
||||||
|
*/
|
||||||
|
static async exportExtendedCategoryToPDF(categoryData: CategoryReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title section
|
||||||
|
yPos = this.addReportTitle(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
|
||||||
|
// Summary section
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Extended table with order count
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addExtendedCategoryDetailsSection(
|
||||||
|
pdf,
|
||||||
|
categoryData,
|
||||||
|
yPos,
|
||||||
|
pageWidth,
|
||||||
|
marginLeft,
|
||||||
|
marginRight,
|
||||||
|
checkPageBreak
|
||||||
|
)
|
||||||
|
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Kategori_Extended', 'pdf')
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting extended category report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Extended Category Details section with order count
|
||||||
|
*/
|
||||||
|
private static addExtendedCategoryDetailsSection(
|
||||||
|
pdf: any,
|
||||||
|
categoryData: CategoryReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Kategori (Extended)', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup - wider for 5 columns
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [40, 25, 20, 20, 35] // Name, Products, Qty, Orders, Revenue
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Nama', 'Total Produk', 'Qty', 'Orders', 'Pendapatan']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Calculate summary for footer
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
|
||||||
|
orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
categoryData.data?.forEach((category, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Category name
|
||||||
|
const categoryName =
|
||||||
|
category.category_name.length > 30 ? category.category_name.substring(0, 27) + '...' : category.category_name
|
||||||
|
pdf.text(categoryName, currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Product count
|
||||||
|
pdf.text(category.product_count.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Quantity
|
||||||
|
pdf.text(category.total_quantity.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Order count
|
||||||
|
pdf.text(category.order_count.toString(), currentX + colWidths[3] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
// Revenue
|
||||||
|
pdf.text(this.formatCurrency(category.total_revenue), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total)
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.productCount.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.totalQuantity.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.orderCount.toString(), currentX + colWidths[3] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(categorySummary.totalRevenue), currentX + colWidths[4] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
}
|
||||||
691
src/services/export/pdf/PDFExportSalesService.ts
Normal file
691
src/services/export/pdf/PDFExportSalesService.ts
Normal file
@ -0,0 +1,691 @@
|
|||||||
|
import { CategoryReport, PaymentReport, ProductSalesReport, ProfitLossReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export interface SalesReportData {
|
||||||
|
profitLoss: ProfitLossReport
|
||||||
|
paymentAnalytics: PaymentReport
|
||||||
|
categoryAnalytics: CategoryReport
|
||||||
|
productAnalytics: ProductSalesReport
|
||||||
|
}
|
||||||
|
|
||||||
|
export class PDFExportSalesService {
|
||||||
|
/**
|
||||||
|
* Export Sales Report to PDF
|
||||||
|
*/
|
||||||
|
static async exportSalesReportToPDF(salesData: SalesReportData, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk jsPDF
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
// Create new PDF document - PORTRAIT A4
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
await this.addSalesReportContent(pdf, salesData)
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Transaksi', 'pdf')
|
||||||
|
|
||||||
|
// Save PDF
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting sales report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add sales report content to PDF
|
||||||
|
*/
|
||||||
|
private static async addSalesReportContent(pdf: any, salesData: SalesReportData) {
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
// Helper function to check page break
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title
|
||||||
|
yPos = this.addReportTitle(pdf, salesData.profitLoss, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
|
||||||
|
// Section 1: Ringkasan
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, salesData.profitLoss, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Section 2: Invoice Summary
|
||||||
|
checkPageBreak(40)
|
||||||
|
yPos = this.addInvoiceSection(pdf, salesData.profitLoss, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Section 3: Payment Methods
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addPaymentMethodsSection(
|
||||||
|
pdf,
|
||||||
|
salesData.paymentAnalytics,
|
||||||
|
yPos,
|
||||||
|
pageWidth,
|
||||||
|
marginLeft,
|
||||||
|
marginRight,
|
||||||
|
checkPageBreak
|
||||||
|
)
|
||||||
|
|
||||||
|
// Section 4: Category Summary
|
||||||
|
checkPageBreak(80)
|
||||||
|
yPos = this.addCategorySection(
|
||||||
|
pdf,
|
||||||
|
salesData.categoryAnalytics,
|
||||||
|
yPos,
|
||||||
|
pageWidth,
|
||||||
|
marginLeft,
|
||||||
|
marginRight,
|
||||||
|
checkPageBreak
|
||||||
|
)
|
||||||
|
|
||||||
|
// Section 5: Product Summary
|
||||||
|
checkPageBreak(100)
|
||||||
|
yPos = this.addProductSection(
|
||||||
|
pdf,
|
||||||
|
salesData.productAnalytics,
|
||||||
|
yPos,
|
||||||
|
pageWidth,
|
||||||
|
marginLeft,
|
||||||
|
marginRight,
|
||||||
|
checkPageBreak
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add report title
|
||||||
|
*/
|
||||||
|
private static addReportTitle(
|
||||||
|
pdf: any,
|
||||||
|
profitLoss: ProfitLossReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text('Laporan Transaksi', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Period
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${profitLoss.date_from.split('T')[0]} - ${profitLoss.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Purple line separator
|
||||||
|
pdf.setDrawColor(102, 45, 145)
|
||||||
|
pdf.setLineWidth(2)
|
||||||
|
pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Ringkasan section - SAMAKAN DENGAN PAYMENT METHODS STYLE
|
||||||
|
*/
|
||||||
|
private static addRingkasanSection(
|
||||||
|
pdf: any,
|
||||||
|
profitLoss: ProfitLossReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset text color
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
|
||||||
|
const ringkasanItems = [
|
||||||
|
{ label: 'Total Penjualan', value: this.formatCurrency(profitLoss.summary.total_revenue), bold: false },
|
||||||
|
{ label: 'Total Diskon', value: this.formatCurrency(profitLoss.summary.total_discount), bold: false },
|
||||||
|
{ label: 'Total Pajak', value: this.formatCurrency(profitLoss.summary.total_tax), bold: false },
|
||||||
|
{ label: 'Total', value: this.formatCurrency(profitLoss.summary.total_revenue), bold: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
ringkasanItems.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(15)) yPos = 20
|
||||||
|
|
||||||
|
// Set font weight
|
||||||
|
pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
|
||||||
|
|
||||||
|
pdf.text(item.label, marginLeft, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light separator line (except for total row)
|
||||||
|
if (!item.bold) {
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.5)
|
||||||
|
pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos += 8
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Invoice section - SAMAKAN DENGAN PAYMENT METHODS STYLE
|
||||||
|
*/
|
||||||
|
private static addInvoiceSection(
|
||||||
|
pdf: any,
|
||||||
|
profitLoss: ProfitLossReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Invoice', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
|
||||||
|
const invoiceItems = [
|
||||||
|
{ label: 'Total Invoice', value: profitLoss.summary.total_orders.toString() },
|
||||||
|
{ label: 'Rata-rata Tagihan Per Invoice', value: this.formatCurrency(profitLoss.summary.average_profit) }
|
||||||
|
]
|
||||||
|
|
||||||
|
invoiceItems.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(15)) yPos = 20
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.text(item.label, marginLeft, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light separator line
|
||||||
|
if (index < invoiceItems.length - 1) {
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.5)
|
||||||
|
pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos += 8
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Payment Methods section - ORIGINAL STYLE (3 jam lu bikin ini!)
|
||||||
|
*/
|
||||||
|
private static addPaymentMethodsSection(
|
||||||
|
pdf: any,
|
||||||
|
paymentAnalytics: PaymentReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan Metode Pembayaran', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [50, 25, 30, 35, 25] // Method, Type, Order, Amount, %
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
paymentAnalytics.data?.forEach((payment, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Method name
|
||||||
|
pdf.text(payment.payment_method_name, currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Type with simple color coding
|
||||||
|
const typeText = payment.payment_method_type.toUpperCase()
|
||||||
|
if (payment.payment_method_type === 'cash') {
|
||||||
|
pdf.setTextColor(0, 120, 0) // Green
|
||||||
|
} else if (payment.payment_method_type === 'card') {
|
||||||
|
pdf.setTextColor(0, 80, 200) // Blue
|
||||||
|
} else {
|
||||||
|
pdf.setTextColor(200, 100, 0) // Orange
|
||||||
|
}
|
||||||
|
pdf.text(typeText, currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
pdf.setTextColor(0, 0, 0) // Reset color
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Order count
|
||||||
|
pdf.text(payment.order_count.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Amount
|
||||||
|
pdf.text(this.formatCurrency(payment.total_amount), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
// Percentage
|
||||||
|
pdf.text(`${(payment.percentage ?? 0).toFixed(1)}%`, currentX + colWidths[4] / 2, yPos + 5, { align: 'center' })
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total) - directly after last row
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0] + colWidths[1]
|
||||||
|
|
||||||
|
pdf.text((paymentAnalytics.summary?.total_orders ?? 0).toString(), currentX + colWidths[2] / 2, yPos + 6, {
|
||||||
|
align: 'center'
|
||||||
|
})
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(paymentAnalytics.summary?.total_amount ?? 0), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Category section - SAMAKAN DENGAN PAYMENT METHODS STYLE
|
||||||
|
*/
|
||||||
|
private static addCategorySection(
|
||||||
|
pdf: any,
|
||||||
|
categoryAnalytics: CategoryReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan Kategori', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [50, 30, 25, 35] // Name, Products, Qty, Revenue
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Nama', 'Total Produk', 'Qty', 'Pendapatan']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Calculate summaries
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
productCount: categoryAnalytics.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table rows - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
categoryAnalytics.data?.forEach((category, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Category name
|
||||||
|
pdf.text(category.category_name, currentX + 2, yPos + 5)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Product count
|
||||||
|
pdf.text(category.product_count.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Quantity
|
||||||
|
pdf.text(category.total_quantity.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Revenue
|
||||||
|
pdf.text(this.formatCurrency(category.total_revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
|
||||||
|
// Draw bottom border line - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Table footer (Total) - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.productCount.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(categorySummary.totalQuantity.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(categorySummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Product section - SAMAKAN DENGAN PAYMENT METHODS STYLE
|
||||||
|
*/
|
||||||
|
private static addProductSection(
|
||||||
|
pdf: any,
|
||||||
|
productAnalytics: ProductSalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY // Hapus extra spacing, biar sama dengan section lain
|
||||||
|
|
||||||
|
// Section title - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan Item', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [60, 20, 20, 30, 30] // Product, Qty, Order, Revenue, Average
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Group products by category
|
||||||
|
const groupedProducts =
|
||||||
|
productAnalytics.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
// Calculate product summary
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold: productAnalytics.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: productAnalytics.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: productAnalytics.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table rows - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
// Render grouped products
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
|
||||||
|
// Check page break for category header
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
// Category header - SAMA STYLE SEPERTI PAYMENT METHODS TAPI WARNA LEBIH SOFT
|
||||||
|
pdf.setFillColor(248, 248, 248) // Warna lebih soft
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text(categoryName.toUpperCase(), marginLeft + 2, yPos + 6)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
yPos += 10 // Kurangi jarak, langsung ke 10px seperti row normal
|
||||||
|
|
||||||
|
// Category products
|
||||||
|
categoryProducts.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Product name (indented and truncated if needed)
|
||||||
|
const productName =
|
||||||
|
item.product_name.length > 45 ? item.product_name.substring(0, 42) + '...' : item.product_name
|
||||||
|
|
||||||
|
pdf.text(` ${productName}`, currentX + 2, yPos + 5) // Indented for products
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Quantity
|
||||||
|
pdf.text(item.quantity_sold.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Order count
|
||||||
|
pdf.text((item.order_count || 0).toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Revenue
|
||||||
|
pdf.text(this.formatCurrency(item.revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
// Average price
|
||||||
|
pdf.text(this.formatCurrency(item.average_price), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
|
||||||
|
|
||||||
|
// Draw bottom border line - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category subtotal - WARNA LEBIH SOFT
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
||||||
|
const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
|
||||||
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
|
|
||||||
|
pdf.setFillColor(240, 240, 240) // Sama dengan table header, lebih soft
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text(`Subtotal ${categoryName}`, currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(categoryTotalQty.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(categoryTotalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(categoryTotalRevenue), currentX + colWidths[3] - 2, yPos + 6, { align: 'right' })
|
||||||
|
|
||||||
|
yPos += 10 // Kurangi spacing dari 15 ke 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Grand total - SAMA SEPERTI PAYMENT METHODS FOOTER
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray - SAMA SEPERTI PAYMENT METHODS
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL KESELURUHAN', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(productSummary.totalQuantitySold.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(productSummary.totalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(productSummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 25
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency for display
|
||||||
|
*/
|
||||||
|
private static formatCurrency(amount: number): string {
|
||||||
|
return `Rp ${amount.toLocaleString('id-ID')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string, extension: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
|
||||||
|
}
|
||||||
|
}
|
||||||
439
src/services/export/pdf/PdfExportSalesProductSevice.ts
Normal file
439
src/services/export/pdf/PdfExportSalesProductSevice.ts
Normal file
@ -0,0 +1,439 @@
|
|||||||
|
// services/pdfExportProductService.ts
|
||||||
|
import { ProductSalesReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
export class PDFExportSalesProductService {
|
||||||
|
/**
|
||||||
|
* Export Product Sales Report to PDF
|
||||||
|
*/
|
||||||
|
static async exportProductSalesToPDF(productData: ProductSalesReport, filename?: string) {
|
||||||
|
try {
|
||||||
|
// Dynamic import untuk jsPDF
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
// Create new PDF document - PORTRAIT A4
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
await this.addProductReportContent(pdf, productData)
|
||||||
|
|
||||||
|
// Generate filename
|
||||||
|
const exportFilename = filename || this.generateFilename('Laporan_Penjualan_Produk', 'pdf')
|
||||||
|
|
||||||
|
// Save PDF
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting product report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add product report content to PDF
|
||||||
|
*/
|
||||||
|
private static async addProductReportContent(pdf: any, productData: ProductSalesReport) {
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
// Helper function to check page break
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title
|
||||||
|
yPos = this.addReportTitle(pdf, productData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
|
||||||
|
// Section 1: Ringkasan
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
// Section 2: Product Details
|
||||||
|
checkPageBreak(100)
|
||||||
|
yPos = this.addProductDetailsSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add report title
|
||||||
|
*/
|
||||||
|
private static addReportTitle(
|
||||||
|
pdf: any,
|
||||||
|
productData: ProductSalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Title
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text('Laporan Penjualan Produk', pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Period
|
||||||
|
pdf.setFontSize(12)
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
const periodText = `${productData.date_from.split('T')[0]} - ${productData.date_to.split('T')[0]}`
|
||||||
|
pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Purple line separator
|
||||||
|
pdf.setDrawColor(102, 45, 145)
|
||||||
|
pdf.setLineWidth(2)
|
||||||
|
pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
|
||||||
|
yPos += 15
|
||||||
|
|
||||||
|
return yPos
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Ringkasan section
|
||||||
|
*/
|
||||||
|
private static addRingkasanSection(
|
||||||
|
pdf: any,
|
||||||
|
productData: ProductSalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Ringkasan', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset text color
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.setFontSize(11)
|
||||||
|
|
||||||
|
// Calculate summary
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
averageRevenue: 0,
|
||||||
|
totalProducts: productData.data?.length || 0
|
||||||
|
}
|
||||||
|
productSummary.averageRevenue =
|
||||||
|
productSummary.totalQuantitySold > 0 ? productSummary.totalRevenue / productSummary.totalQuantitySold : 0
|
||||||
|
|
||||||
|
const ringkasanItems = [
|
||||||
|
{ label: 'Total Produk', value: productSummary.totalProducts.toString(), bold: false },
|
||||||
|
{ label: 'Total Quantity Sold', value: productSummary.totalQuantitySold.toString(), bold: false },
|
||||||
|
{ label: 'Total Orders', value: productSummary.totalOrders.toString(), bold: false },
|
||||||
|
{ label: 'Total Revenue', value: this.formatCurrency(productSummary.totalRevenue), bold: true },
|
||||||
|
{ label: 'Average Revenue per Item', value: this.formatCurrency(productSummary.averageRevenue), bold: false }
|
||||||
|
]
|
||||||
|
|
||||||
|
ringkasanItems.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(15)) yPos = 20
|
||||||
|
|
||||||
|
// Set font weight
|
||||||
|
pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
|
||||||
|
|
||||||
|
pdf.text(item.label, marginLeft, yPos)
|
||||||
|
pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
|
||||||
|
|
||||||
|
// Light separator line (except for bold row)
|
||||||
|
if (!item.bold) {
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.5)
|
||||||
|
pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
yPos += 8
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 20
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Product Details section - SAMA STYLE SEPERTI SALES REPORT
|
||||||
|
*/
|
||||||
|
private static addProductDetailsSection(
|
||||||
|
pdf: any,
|
||||||
|
productData: ProductSalesReport,
|
||||||
|
startY: number,
|
||||||
|
pageWidth: number,
|
||||||
|
marginLeft: number,
|
||||||
|
marginRight: number,
|
||||||
|
checkPageBreak: (space: number) => boolean
|
||||||
|
): number {
|
||||||
|
let yPos = startY
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
pdf.setFontSize(14)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text('Rincian Produk', marginLeft, yPos)
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Reset formatting
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Table setup
|
||||||
|
const tableWidth = pageWidth - marginLeft - marginRight
|
||||||
|
const colWidths = [60, 20, 20, 30, 30] // Product, Qty, Order, Revenue, Average
|
||||||
|
let currentX = marginLeft
|
||||||
|
|
||||||
|
// Table header
|
||||||
|
pdf.setFillColor(240, 240, 240)
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
const headers = ['Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
|
||||||
|
currentX = marginLeft
|
||||||
|
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
pdf.text(header, currentX + 2, yPos + 6)
|
||||||
|
} else {
|
||||||
|
pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
|
||||||
|
}
|
||||||
|
currentX += colWidths[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
yPos += 12
|
||||||
|
|
||||||
|
// Group products by category
|
||||||
|
const groupedProducts =
|
||||||
|
productData.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
// Calculate product summary
|
||||||
|
const productSummary = {
|
||||||
|
totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
||||||
|
totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||||
|
totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table rows
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
// Render grouped products
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
|
||||||
|
// Check page break for category header
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
// Category header
|
||||||
|
pdf.setFillColor(248, 248, 248) // Soft background
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(102, 45, 145)
|
||||||
|
pdf.text(categoryName.toUpperCase(), marginLeft + 2, yPos + 6)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
yPos += 10
|
||||||
|
|
||||||
|
// Category products
|
||||||
|
categoryProducts.forEach((item, index) => {
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.setFont('helvetica', 'normal')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
|
||||||
|
// Product name (indented and truncated if needed)
|
||||||
|
const productName =
|
||||||
|
item.product_name.length > 45 ? item.product_name.substring(0, 42) + '...' : item.product_name
|
||||||
|
|
||||||
|
pdf.text(` ${productName}`, currentX + 2, yPos + 5) // Indented for products
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
// Quantity
|
||||||
|
pdf.text(item.quantity_sold.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
// Order count
|
||||||
|
pdf.text((item.order_count || 0).toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
// Revenue
|
||||||
|
pdf.text(this.formatCurrency(item.revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
|
||||||
|
currentX += colWidths[3]
|
||||||
|
|
||||||
|
// Average price
|
||||||
|
pdf.text(this.formatCurrency(item.average_price), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
|
||||||
|
|
||||||
|
// Draw bottom border line
|
||||||
|
pdf.setDrawColor(230, 230, 230)
|
||||||
|
pdf.setLineWidth(0.3)
|
||||||
|
pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category subtotal
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
||||||
|
const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
|
||||||
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
|
|
||||||
|
pdf.setFillColor(240, 240, 240) // Sama dengan table header
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text(`Subtotal ${categoryName}`, currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(categoryTotalQty.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(categoryTotalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(categoryTotalRevenue), currentX + colWidths[3] - 2, yPos + 6, { align: 'right' })
|
||||||
|
|
||||||
|
yPos += 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// Grand total
|
||||||
|
if (checkPageBreak(10)) yPos = 20
|
||||||
|
|
||||||
|
pdf.setFillColor(245, 245, 245) // Lighter gray
|
||||||
|
pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
|
||||||
|
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setFontSize(9)
|
||||||
|
|
||||||
|
currentX = marginLeft
|
||||||
|
pdf.text('TOTAL KESELURUHAN', currentX + 2, yPos + 6)
|
||||||
|
currentX += colWidths[0]
|
||||||
|
|
||||||
|
pdf.text(productSummary.totalQuantitySold.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[1]
|
||||||
|
|
||||||
|
pdf.text(productSummary.totalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
|
||||||
|
currentX += colWidths[2]
|
||||||
|
|
||||||
|
pdf.text(this.formatCurrency(productSummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
|
||||||
|
align: 'right'
|
||||||
|
})
|
||||||
|
|
||||||
|
return yPos + 25
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format currency for display
|
||||||
|
*/
|
||||||
|
private static formatCurrency(amount: number): string {
|
||||||
|
return `Rp ${amount.toLocaleString('id-ID')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate filename with timestamp
|
||||||
|
*/
|
||||||
|
private static generateFilename(prefix: string, extension: string): string {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const day = now.getDate().toString().padStart(2, '0')
|
||||||
|
const hour = now.getHours().toString().padStart(2, '0')
|
||||||
|
const minute = now.getMinutes().toString().padStart(2, '0')
|
||||||
|
|
||||||
|
return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Product Sales data with custom configuration
|
||||||
|
*/
|
||||||
|
static async exportCustomProductToPDF(
|
||||||
|
productData: ProductSalesReport,
|
||||||
|
options?: {
|
||||||
|
title?: string
|
||||||
|
includeSummary?: boolean
|
||||||
|
customFilename?: string
|
||||||
|
groupByCategory?: boolean
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const jsPDFModule = await import('jspdf')
|
||||||
|
const jsPDF = jsPDFModule.default
|
||||||
|
|
||||||
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||||
|
|
||||||
|
let yPos = 20
|
||||||
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
||||||
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
||||||
|
const marginLeft = 20
|
||||||
|
const marginRight = 20
|
||||||
|
const marginBottom = 15
|
||||||
|
|
||||||
|
const checkPageBreak = (neededSpace: number) => {
|
||||||
|
if (yPos + neededSpace > pageHeight - marginBottom) {
|
||||||
|
pdf.addPage()
|
||||||
|
yPos = 20
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom title if provided
|
||||||
|
if (options?.title) {
|
||||||
|
pdf.setFontSize(20)
|
||||||
|
pdf.setFont('helvetica', 'bold')
|
||||||
|
pdf.setTextColor(0, 0, 0)
|
||||||
|
pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
|
||||||
|
yPos += 15
|
||||||
|
} else {
|
||||||
|
yPos = this.addReportTitle(pdf, productData, yPos, pageWidth, marginLeft, marginRight)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optional summary section
|
||||||
|
if (options?.includeSummary !== false) {
|
||||||
|
checkPageBreak(50)
|
||||||
|
yPos = this.addRingkasanSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Product details
|
||||||
|
checkPageBreak(100)
|
||||||
|
yPos = this.addProductDetailsSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
|
||||||
|
|
||||||
|
const exportFilename = options?.customFilename || this.generateFilename('Custom_Product_Sales', 'pdf')
|
||||||
|
pdf.save(exportFilename)
|
||||||
|
|
||||||
|
return { success: true, filename: exportFilename }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error exporting custom product report to PDF:', error)
|
||||||
|
return { success: false, error: `PDF export failed: ${(error as Error).message}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -26,7 +26,7 @@ export const usePurchaseOrdersMutation = () => {
|
|||||||
return response.data
|
return response.data
|
||||||
},
|
},
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
toast.success('Purchase Order created successfully!')
|
toast.success('Purchase Order Payment successfully!')
|
||||||
queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
|
queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
|
||||||
},
|
},
|
||||||
onError: (error: any) => {
|
onError: (error: any) => {
|
||||||
@ -34,5 +34,19 @@ export const usePurchaseOrdersMutation = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return { createPurchaseOrder, sendPaymentPurchaseOrder }
|
const updateStatus = useMutation({
|
||||||
|
mutationFn: async ({ id, payload }: { id: string; payload: 'approved' | 'rejected' }) => {
|
||||||
|
const response = await api.put(`/purchase-orders/${id}`, { status: payload })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('Purchase Order Status successfully!')
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return { createPurchaseOrder, sendPaymentPurchaseOrder, updateStatus }
|
||||||
}
|
}
|
||||||
|
|||||||
43
src/views/AuthIllustrationWrapper.tsx
Normal file
43
src/views/AuthIllustrationWrapper.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
|
||||||
|
// Styled Component
|
||||||
|
const AuthIllustrationWrapper = styled('div')(({ theme }) => ({
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: 450,
|
||||||
|
position: 'relative',
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
'&:before': {
|
||||||
|
zIndex: -1,
|
||||||
|
position: 'absolute',
|
||||||
|
height: '234px',
|
||||||
|
width: '238px',
|
||||||
|
content: '""',
|
||||||
|
top: '-80px',
|
||||||
|
left: '-45px',
|
||||||
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='238' height='234' viewBox='0 0 238 234' fill='none'%3E%3Crect x='87.9395' y='0.5' width='149' height='149' rx='19.5' stroke='%23${theme.palette.primary.main.slice(
|
||||||
|
1
|
||||||
|
)}' stroke-opacity='0.16'/%3E%3Crect y='33.5608' width='200' height='200' rx='10' fill='%23${theme.palette.primary.main.slice(
|
||||||
|
1
|
||||||
|
)}' fill-opacity='0.08'/%3E%3C/svg%3E")`
|
||||||
|
},
|
||||||
|
'&:after': {
|
||||||
|
zIndex: -1,
|
||||||
|
position: 'absolute',
|
||||||
|
height: '180px',
|
||||||
|
width: '180px',
|
||||||
|
content: '""',
|
||||||
|
right: '-57px',
|
||||||
|
bottom: '-64px',
|
||||||
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none'%3E%3Crect x='1' y='1' width='178' height='178' rx='19' stroke='%23${theme.palette.primary.main.slice(
|
||||||
|
1
|
||||||
|
)}' stroke-opacity='0.16' stroke-width='2' stroke-dasharray='8 8'/%3E%3Crect x='22.5' y='22.5' width='135' height='135' rx='10' fill='%23${theme.palette.primary.main.slice(
|
||||||
|
1
|
||||||
|
)}' fill-opacity='0.08'/%3E%3C/svg%3E")`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
export default AuthIllustrationWrapper
|
||||||
@ -8,8 +8,8 @@ import Link from 'next/link'
|
|||||||
import { useParams, useRouter, useSearchParams } from 'next/navigation'
|
import { useParams, useRouter, useSearchParams } from 'next/navigation'
|
||||||
|
|
||||||
// MUI Imports
|
// MUI Imports
|
||||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
import Card from '@mui/material/Card'
|
||||||
import { styled, useTheme } from '@mui/material/styles'
|
import CardContent from '@mui/material/CardContent'
|
||||||
import Typography from '@mui/material/Typography'
|
import Typography from '@mui/material/Typography'
|
||||||
import IconButton from '@mui/material/IconButton'
|
import IconButton from '@mui/material/IconButton'
|
||||||
import InputAdornment from '@mui/material/InputAdornment'
|
import InputAdornment from '@mui/material/InputAdornment'
|
||||||
@ -17,7 +17,7 @@ import Checkbox from '@mui/material/Checkbox'
|
|||||||
import Button from '@mui/material/Button'
|
import Button from '@mui/material/Button'
|
||||||
import FormControlLabel from '@mui/material/FormControlLabel'
|
import FormControlLabel from '@mui/material/FormControlLabel'
|
||||||
import Divider from '@mui/material/Divider'
|
import Divider from '@mui/material/Divider'
|
||||||
import Alert from '@mui/material/Alert'
|
import { CircularProgress } from '@mui/material'
|
||||||
|
|
||||||
// Third-party Imports
|
// Third-party Imports
|
||||||
import { Controller, useForm } from 'react-hook-form'
|
import { Controller, useForm } from 'react-hook-form'
|
||||||
@ -25,11 +25,10 @@ import { valibotResolver } from '@hookform/resolvers/valibot'
|
|||||||
import { email, object, minLength, string, pipe, nonEmpty } from 'valibot'
|
import { email, object, minLength, string, pipe, nonEmpty } from 'valibot'
|
||||||
import type { SubmitHandler } from 'react-hook-form'
|
import type { SubmitHandler } from 'react-hook-form'
|
||||||
import type { InferInput } from 'valibot'
|
import type { InferInput } from 'valibot'
|
||||||
import classnames from 'classnames'
|
import { toast } from 'react-toastify'
|
||||||
|
|
||||||
// Type Imports
|
// Type Imports
|
||||||
import type { SystemMode } from '@core/types'
|
import type { Locale } from '@configs/i18n'
|
||||||
import type { Locale } from '@/configs/i18n'
|
|
||||||
|
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Logo from '@components/layout/shared/Logo'
|
import Logo from '@components/layout/shared/Logo'
|
||||||
@ -38,39 +37,12 @@ import CustomTextField from '@core/components/mui/TextField'
|
|||||||
// Config Imports
|
// Config Imports
|
||||||
import themeConfig from '@configs/themeConfig'
|
import themeConfig from '@configs/themeConfig'
|
||||||
|
|
||||||
// Hook Imports
|
|
||||||
import { useImageVariant } from '@core/hooks/useImageVariant'
|
|
||||||
import { useSettings } from '@core/hooks/useSettings'
|
|
||||||
|
|
||||||
// Util Imports
|
// Util Imports
|
||||||
import { getLocalizedUrl } from '@/utils/i18n'
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
import { useAuthMutation } from '../services/mutations/auth'
|
import { useAuthMutation } from '../services/mutations/auth'
|
||||||
import { CircularProgress } from '@mui/material'
|
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
|
|
||||||
// Styled Custom Components
|
// Styled Component Imports
|
||||||
const LoginIllustration = styled('img')(({ theme }) => ({
|
import AuthIllustrationWrapper from './AuthIllustrationWrapper'
|
||||||
zIndex: 2,
|
|
||||||
blockSize: 'auto',
|
|
||||||
maxBlockSize: 680,
|
|
||||||
maxInlineSize: '100%',
|
|
||||||
margin: theme.spacing(12),
|
|
||||||
[theme.breakpoints.down(1536)]: {
|
|
||||||
maxBlockSize: 550
|
|
||||||
},
|
|
||||||
[theme.breakpoints.down('lg')]: {
|
|
||||||
maxBlockSize: 450
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
|
|
||||||
const MaskImg = styled('img')({
|
|
||||||
blockSize: 'auto',
|
|
||||||
maxBlockSize: 355,
|
|
||||||
inlineSize: '100%',
|
|
||||||
position: 'absolute',
|
|
||||||
insetBlockEnd: 0,
|
|
||||||
zIndex: -1
|
|
||||||
})
|
|
||||||
|
|
||||||
type ErrorType = {
|
type ErrorType = {
|
||||||
message: string[]
|
message: string[]
|
||||||
@ -87,29 +59,17 @@ const schema = object({
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
const Login = ({ mode }: { mode: SystemMode }) => {
|
const Login = () => {
|
||||||
// States
|
// States
|
||||||
const [isPasswordShown, setIsPasswordShown] = useState(false)
|
const [isPasswordShown, setIsPasswordShown] = useState(false)
|
||||||
const [errorState, setErrorState] = useState<ErrorType | null>(null)
|
const [errorState, setErrorState] = useState<ErrorType | null>(null)
|
||||||
|
|
||||||
const { login } = useAuthMutation()
|
const { login } = useAuthMutation()
|
||||||
|
|
||||||
// Vars
|
|
||||||
const darkImg = '/images/pages/auth-mask-dark.png'
|
|
||||||
const lightImg = '/images/pages/auth-mask-light.png'
|
|
||||||
const darkIllustration = '/images/illustrations/auth/v2-login-dark.png'
|
|
||||||
const lightIllustration = '/images/illustrations/auth/v2-login-light.png'
|
|
||||||
const borderedDarkIllustration = '/images/illustrations/auth/v2-login-dark-border.png'
|
|
||||||
const borderedLightIllustration = '/images/illustrations/auth/v2-login-light-border.png'
|
|
||||||
|
|
||||||
// Hooks
|
// Hooks
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const searchParams = useSearchParams()
|
const searchParams = useSearchParams()
|
||||||
const { lang: locale } = useParams()
|
const { lang: locale } = useParams()
|
||||||
const { settings } = useSettings()
|
|
||||||
const theme = useTheme()
|
|
||||||
const hidden = useMediaQuery(theme.breakpoints.down('md'))
|
|
||||||
const authBackground = useImageVariant(mode, lightImg, darkImg)
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
control,
|
control,
|
||||||
@ -123,14 +83,6 @@ const Login = ({ mode }: { mode: SystemMode }) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const characterIllustration = useImageVariant(
|
|
||||||
mode,
|
|
||||||
lightIllustration,
|
|
||||||
darkIllustration,
|
|
||||||
borderedLightIllustration,
|
|
||||||
borderedDarkIllustration
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleClickShowPassword = () => setIsPasswordShown(show => !show)
|
const handleClickShowPassword = () => setIsPasswordShown(show => !show)
|
||||||
|
|
||||||
const onSubmit: SubmitHandler<FormData> = async (data: FormData) => {
|
const onSubmit: SubmitHandler<FormData> = async (data: FormData) => {
|
||||||
@ -138,11 +90,9 @@ const Login = ({ mode }: { mode: SystemMode }) => {
|
|||||||
onSuccess: (data: any) => {
|
onSuccess: (data: any) => {
|
||||||
if (data?.user?.role === 'admin') {
|
if (data?.user?.role === 'admin') {
|
||||||
const redirectURL = searchParams.get('redirectTo') ?? '/dashboards/overview'
|
const redirectURL = searchParams.get('redirectTo') ?? '/dashboards/overview'
|
||||||
|
|
||||||
router.replace(getLocalizedUrl(redirectURL, locale as Locale))
|
router.replace(getLocalizedUrl(redirectURL, locale as Locale))
|
||||||
} else {
|
} else {
|
||||||
const redirectURL = searchParams.get('redirectTo') ?? '/sa/organizations/list'
|
const redirectURL = searchParams.get('redirectTo') ?? '/sa/organizations/list'
|
||||||
|
|
||||||
router.replace(getLocalizedUrl(redirectURL, locale as Locale))
|
router.replace(getLocalizedUrl(redirectURL, locale as Locale))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -153,34 +103,17 @@ const Login = ({ mode }: { mode: SystemMode }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex bs-full justify-center'>
|
<AuthIllustrationWrapper>
|
||||||
<div
|
<Card className='flex flex-col sm:is-[450px]'>
|
||||||
className={classnames(
|
<CardContent className='sm:!p-12'>
|
||||||
'flex bs-full items-center justify-center flex-1 min-bs-[100dvh] relative p-6 max-md:hidden',
|
<Link href={getLocalizedUrl('/', locale as Locale)} className='flex justify-center mbe-6'>
|
||||||
{
|
<Logo />
|
||||||
'border-ie': settings.skin === 'bordered'
|
</Link>
|
||||||
}
|
<div className='flex flex-col gap-1 mbe-6'>
|
||||||
)}
|
|
||||||
>
|
|
||||||
<LoginIllustration src={characterIllustration} alt='character-illustration' />
|
|
||||||
{!hidden && <MaskImg alt='mask' src={authBackground} />}
|
|
||||||
</div>
|
|
||||||
<div className='flex justify-center items-center bs-full bg-backgroundPaper !min-is-full p-6 md:!min-is-[unset] md:p-12 md:is-[480px]'>
|
|
||||||
<div className='absolute block-start-5 sm:block-start-[33px] inline-start-6 sm:inline-start-[38px]'>
|
|
||||||
<Logo />
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col gap-6 is-full sm:is-auto md:is-full sm:max-is-[400px] md:max-is-[unset] mbs-8 sm:mbs-11 md:mbs-0'>
|
|
||||||
<div className='flex flex-col gap-1'>
|
|
||||||
<Typography variant='h4'>{`Welcome to ${themeConfig.templateName}! 👋🏻`}</Typography>
|
<Typography variant='h4'>{`Welcome to ${themeConfig.templateName}! 👋🏻`}</Typography>
|
||||||
<Typography>Please sign-in to your account and start the adventure</Typography>
|
<Typography>Please sign-in to your account and start the adventure</Typography>
|
||||||
</div>
|
</div>
|
||||||
<form
|
<form noValidate autoComplete='off' onSubmit={handleSubmit(onSubmit)} className='flex flex-col gap-6'>
|
||||||
noValidate
|
|
||||||
autoComplete='off'
|
|
||||||
action={() => {}}
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className='flex flex-col gap-6'
|
|
||||||
>
|
|
||||||
<Controller
|
<Controller
|
||||||
name='email'
|
name='email'
|
||||||
control={control}
|
control={control}
|
||||||
@ -214,7 +147,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
|
|||||||
fullWidth
|
fullWidth
|
||||||
label='Password'
|
label='Password'
|
||||||
placeholder='············'
|
placeholder='············'
|
||||||
id='login-password'
|
id='outlined-adornment-password'
|
||||||
type={isPasswordShown ? 'text' : 'password'}
|
type={isPasswordShown ? 'text' : 'password'}
|
||||||
onChange={e => {
|
onChange={e => {
|
||||||
field.onChange(e.target.value)
|
field.onChange(e.target.value)
|
||||||
@ -253,20 +186,10 @@ const Login = ({ mode }: { mode: SystemMode }) => {
|
|||||||
<Button fullWidth variant='contained' type='submit' disabled={login.isPending}>
|
<Button fullWidth variant='contained' type='submit' disabled={login.isPending}>
|
||||||
{login.isPending ? <CircularProgress size={16} /> : 'Login'}
|
{login.isPending ? <CircularProgress size={16} /> : 'Login'}
|
||||||
</Button>
|
</Button>
|
||||||
<div className='flex justify-center items-center flex-wrap gap-2'>
|
|
||||||
<Typography>New on our platform?</Typography>
|
|
||||||
<Typography
|
|
||||||
component={Link}
|
|
||||||
href={getLocalizedUrl('/organization', locale as Locale)}
|
|
||||||
color='primary.main'
|
|
||||||
>
|
|
||||||
Create an account
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
</AuthIllustrationWrapper>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React from 'react'
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@ -14,10 +14,19 @@ import {
|
|||||||
TableRow,
|
TableRow,
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
IconButton
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
DialogContentText,
|
||||||
|
DialogActions,
|
||||||
|
CircularProgress
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import Grid from '@mui/material/Grid2'
|
import Grid from '@mui/material/Grid2'
|
||||||
import { PurchaseOrder } from '@/types/services/purchaseOrder'
|
import { PurchaseOrder, SendPaymentPurchaseOrderRequest } from '@/types/services/purchaseOrder'
|
||||||
|
import { usePurchaseOrdersMutation } from '@/services/mutations/purchaseOrder'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
data?: PurchaseOrder
|
data?: PurchaseOrder
|
||||||
@ -26,6 +35,88 @@ interface Props {
|
|||||||
const PurchaseDetailInformation = ({ data }: Props) => {
|
const PurchaseDetailInformation = ({ data }: Props) => {
|
||||||
const purchaseOrder = data
|
const purchaseOrder = data
|
||||||
|
|
||||||
|
// State for menu and dialog
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [confirmDialog, setConfirmDialog] = useState<{
|
||||||
|
open: boolean
|
||||||
|
type: 'approve' | 'reject' | null
|
||||||
|
title: string
|
||||||
|
message: string
|
||||||
|
}>({
|
||||||
|
open: false,
|
||||||
|
type: null,
|
||||||
|
title: '',
|
||||||
|
message: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const { updateStatus } = usePurchaseOrdersMutation()
|
||||||
|
|
||||||
|
const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleMenuClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleApproveClick = () => {
|
||||||
|
setConfirmDialog({
|
||||||
|
open: true,
|
||||||
|
type: 'approve',
|
||||||
|
title: 'Konfirmasi Persetujuan',
|
||||||
|
message: 'Apakah Anda yakin ingin menyetujui purchase order ini?'
|
||||||
|
})
|
||||||
|
handleMenuClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRejectClick = () => {
|
||||||
|
setConfirmDialog({
|
||||||
|
open: true,
|
||||||
|
type: 'reject',
|
||||||
|
title: 'Konfirmasi Penolakan',
|
||||||
|
message: 'Apakah Anda yakin ingin menolak purchase order ini?'
|
||||||
|
})
|
||||||
|
handleMenuClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConfirmAction = async () => {
|
||||||
|
if (!purchaseOrder?.id) return
|
||||||
|
|
||||||
|
setIsSubmitting(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const status = confirmDialog.type === 'approve' ? 'approved' : 'rejected'
|
||||||
|
|
||||||
|
updateStatus.mutate({
|
||||||
|
id: purchaseOrder.id,
|
||||||
|
payload: status
|
||||||
|
})
|
||||||
|
|
||||||
|
// Close dialog after successful submission
|
||||||
|
setConfirmDialog({
|
||||||
|
open: false,
|
||||||
|
type: null,
|
||||||
|
title: '',
|
||||||
|
message: ''
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating status:', error)
|
||||||
|
// Handle error (you might want to show a toast or error message)
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelAction = () => {
|
||||||
|
setConfirmDialog({
|
||||||
|
open: false,
|
||||||
|
type: null,
|
||||||
|
title: '',
|
||||||
|
message: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// Helper functions
|
// Helper functions
|
||||||
const formatDate = (dateString: string): string => {
|
const formatDate = (dateString: string): string => {
|
||||||
const date = new Date(dateString)
|
const date = new Date(dateString)
|
||||||
@ -46,7 +137,8 @@ const PurchaseDetailInformation = ({ data }: Props) => {
|
|||||||
sent: 'Dikirim',
|
sent: 'Dikirim',
|
||||||
approved: 'Disetujui',
|
approved: 'Disetujui',
|
||||||
received: 'Diterima',
|
received: 'Diterima',
|
||||||
cancelled: 'Dibatalkan'
|
cancelled: 'Dibatalkan',
|
||||||
|
rejected: 'Ditolak'
|
||||||
}
|
}
|
||||||
return statusMap[status] || status
|
return statusMap[status] || status
|
||||||
}
|
}
|
||||||
@ -57,7 +149,8 @@ const PurchaseDetailInformation = ({ data }: Props) => {
|
|||||||
sent: 'warning',
|
sent: 'warning',
|
||||||
approved: 'success',
|
approved: 'success',
|
||||||
received: 'info',
|
received: 'info',
|
||||||
cancelled: 'error'
|
cancelled: 'error',
|
||||||
|
rejected: 'error'
|
||||||
}
|
}
|
||||||
return colorMap[status] || 'info'
|
return colorMap[status] || 'info'
|
||||||
}
|
}
|
||||||
@ -66,144 +159,214 @@ const PurchaseDetailInformation = ({ data }: Props) => {
|
|||||||
const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0)
|
const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0)
|
||||||
const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)
|
const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)
|
||||||
|
|
||||||
|
// Check if actions should be available (only for certain statuses)
|
||||||
|
const canApproveOrReject = purchaseOrder?.status === 'received'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card sx={{ width: '100%' }}>
|
<>
|
||||||
<CardHeader
|
<Card sx={{ width: '100%' }}>
|
||||||
title={
|
<CardHeader
|
||||||
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
title={
|
||||||
<Typography variant='h5' color={getStatusColor(purchaseOrder?.status ?? '')} sx={{ fontWeight: 'bold' }}>
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
||||||
{getStatusLabel(purchaseOrder?.status ?? '')}
|
<Typography variant='h5' color={getStatusColor(purchaseOrder?.status ?? '')} sx={{ fontWeight: 'bold' }}>
|
||||||
</Typography>
|
{getStatusLabel(purchaseOrder?.status ?? '')}
|
||||||
<Box>
|
|
||||||
<Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
|
||||||
Bagikan
|
|
||||||
</Button>
|
|
||||||
<Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
|
||||||
Print
|
|
||||||
</Button>
|
|
||||||
<IconButton>
|
|
||||||
<i className='tabler-dots-vertical' />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
{/* Purchase Information */}
|
|
||||||
<Grid container spacing={3} sx={{ mb: 4 }}>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<Box sx={{ mb: 2 }}>
|
|
||||||
<Typography variant='subtitle2' color='text.secondary'>
|
|
||||||
Vendor
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
|
|
||||||
{purchaseOrder?.vendor?.name ?? ''}
|
|
||||||
</Typography>
|
</Typography>
|
||||||
|
<Box>
|
||||||
|
<Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||||||
|
Bagikan
|
||||||
|
</Button>
|
||||||
|
<Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||||||
|
Print
|
||||||
|
</Button>
|
||||||
|
<IconButton onClick={handleMenuClick}>
|
||||||
|
<i className='tabler-dots-vertical' />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
<Box>
|
<CardContent>
|
||||||
<Typography variant='subtitle2' color='text.secondary'>
|
{/* Purchase Information */}
|
||||||
Tgl. Transaksi
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||||||
</Typography>
|
|
||||||
<Typography variant='body1'>{formatDate(purchaseOrder?.transaction_date ?? '')}</Typography>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<Box sx={{ mb: 2 }}>
|
|
||||||
<Typography variant='subtitle2' color='text.secondary'>
|
|
||||||
Nomor
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='body1'>{purchaseOrder?.po_number}</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box>
|
|
||||||
<Typography variant='subtitle2' color='text.secondary'>
|
|
||||||
Tgl. Jatuh Tempo
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='body1'>{formatDate(purchaseOrder?.due_date ?? '')}</Typography>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Products Table */}
|
|
||||||
<TableContainer>
|
|
||||||
<Table>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell>Produk</TableCell>
|
|
||||||
<TableCell>Deskripsi</TableCell>
|
|
||||||
<TableCell align='center'>Kuantitas</TableCell>
|
|
||||||
<TableCell align='center'>Satuan</TableCell>
|
|
||||||
<TableCell align='right'>Harga</TableCell>
|
|
||||||
<TableCell align='right'>Jumlah</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{(purchaseOrder?.items ?? []).map((item, index) => {
|
|
||||||
return (
|
|
||||||
<TableRow key={item.id}>
|
|
||||||
<TableCell>
|
|
||||||
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
|
||||||
{item.ingredient.name}
|
|
||||||
</Typography>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>{item.description}</TableCell>
|
|
||||||
<TableCell align='center'>{item.quantity}</TableCell>
|
|
||||||
<TableCell align='center'>{item.unit.name}</TableCell>
|
|
||||||
<TableCell align='right'>{formatCurrency(item.amount)}</TableCell>
|
|
||||||
<TableCell align='right'>{formatCurrency(item.amount * item.quantity)}</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
{/* Total Quantity Row */}
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
|
|
||||||
Total Kuantitas
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
|
|
||||||
{totalQuantity}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
|
||||||
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
|
|
||||||
{/* Summary Section */}
|
|
||||||
<Box sx={{ mt: 3 }}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
<Box sx={{ mb: 2 }}>
|
||||||
<Box
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
sx={{
|
Vendor
|
||||||
display: 'flex',
|
</Typography>
|
||||||
justifyContent: 'space-between',
|
<Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
|
||||||
alignItems: 'center',
|
{purchaseOrder?.vendor?.name ?? ''}
|
||||||
py: 2,
|
</Typography>
|
||||||
'&:hover': {
|
</Box>
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
|
||||||
transition: 'background-color 0.15s ease'
|
<Box>
|
||||||
}
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
}}
|
Tgl. Transaksi
|
||||||
>
|
</Typography>
|
||||||
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
<Typography variant='body1'>{formatDate(purchaseOrder?.transaction_date ?? '')}</Typography>
|
||||||
Total
|
</Box>
|
||||||
</Typography>
|
</Grid>
|
||||||
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
|
||||||
{formatCurrency(total)}
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
</Typography>
|
<Box sx={{ mb: 2 }}>
|
||||||
</Box>
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Nomor
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{purchaseOrder?.po_number}</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Tgl. Jatuh Tempo
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{formatDate(purchaseOrder?.due_date ?? '')}</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Box>
|
|
||||||
</CardContent>
|
{/* Products Table */}
|
||||||
</Card>
|
<TableContainer>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Produk</TableCell>
|
||||||
|
<TableCell>Deskripsi</TableCell>
|
||||||
|
<TableCell align='center'>Kuantitas</TableCell>
|
||||||
|
<TableCell align='center'>Satuan</TableCell>
|
||||||
|
<TableCell align='right'>Harga</TableCell>
|
||||||
|
<TableCell align='right'>Jumlah</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{(purchaseOrder?.items ?? []).map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TableRow key={item.id}>
|
||||||
|
<TableCell>
|
||||||
|
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
||||||
|
{item.ingredient.name}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{item.description}</TableCell>
|
||||||
|
<TableCell align='center'>{item.quantity}</TableCell>
|
||||||
|
<TableCell align='center'>{item.unit.name}</TableCell>
|
||||||
|
<TableCell align='right'>{formatCurrency(item.amount)}</TableCell>
|
||||||
|
<TableCell align='right'>{formatCurrency(item.amount * item.quantity)}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Total Quantity Row */}
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
|
||||||
|
Total Kuantitas
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
|
||||||
|
{totalQuantity}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||||||
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||||||
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Summary Section */}
|
||||||
|
<Box sx={{ mt: 3 }}>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||||
|
transition: 'background-color 0.15s ease'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{formatCurrency(total)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Menu */}
|
||||||
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
PaperProps={{
|
||||||
|
sx: {
|
||||||
|
minWidth: 160
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem
|
||||||
|
onClick={handleApproveClick}
|
||||||
|
disabled={!canApproveOrReject}
|
||||||
|
sx={{
|
||||||
|
color: 'success.main',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'success.light',
|
||||||
|
color: 'success.dark'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className='tabler-check' style={{ marginRight: 8 }} />
|
||||||
|
Disetujui
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={handleRejectClick}
|
||||||
|
disabled={!canApproveOrReject}
|
||||||
|
sx={{
|
||||||
|
color: 'error.main',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'error.light',
|
||||||
|
color: 'error.dark'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className='tabler-x' style={{ marginRight: 8 }} />
|
||||||
|
Ditolak
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
{/* Confirmation Dialog */}
|
||||||
|
<Dialog open={confirmDialog.open} onClose={handleCancelAction} maxWidth='sm' fullWidth>
|
||||||
|
<DialogTitle>{confirmDialog.title}</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogContentText>{confirmDialog.message}</DialogContentText>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleCancelAction} color='inherit' disabled={isSubmitting}>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleConfirmAction}
|
||||||
|
variant='contained'
|
||||||
|
color={confirmDialog.type === 'approve' ? 'success' : 'error'}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
startIcon={isSubmitting ? <CircularProgress size={16} /> : null}
|
||||||
|
autoFocus
|
||||||
|
>
|
||||||
|
{isSubmitting ? 'Memproses...' : confirmDialog.type === 'approve' ? 'Setujui' : 'Tolak'}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -11,26 +11,31 @@ const ReportFinancialList: React.FC = () => {
|
|||||||
const { lang: locale } = useParams()
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
const financialReports = [
|
const financialReports = [
|
||||||
{
|
// {
|
||||||
title: 'Arus Kas',
|
// title: 'Arus Kas',
|
||||||
iconClass: 'tabler-cash',
|
// iconClass: 'tabler-cash',
|
||||||
link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
|
// link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
title: 'Laba Rugi',
|
title: 'Laba Rugi',
|
||||||
iconClass: 'tabler-cash',
|
iconClass: 'tabler-cash',
|
||||||
link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
|
link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Neraca',
|
title: 'Metode Pembayaran',
|
||||||
iconClass: 'tabler-cash',
|
iconClass: 'tabler-cash',
|
||||||
link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
|
link: getLocalizedUrl(`/apps/report/financial/payment-method`, locale as Locale)
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Ringkasan Eksekutif',
|
|
||||||
iconClass: 'tabler-cash',
|
|
||||||
link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
|
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// title: 'Neraca',
|
||||||
|
// iconClass: 'tabler-cash',
|
||||||
|
// link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Ringkasan Eksekutif',
|
||||||
|
// iconClass: 'tabler-cash',
|
||||||
|
// link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -12,35 +12,45 @@ const ReportSalesList: React.FC = () => {
|
|||||||
|
|
||||||
const salesReports = [
|
const salesReports = [
|
||||||
{
|
{
|
||||||
title: 'Detail Penjualan',
|
title: 'Penjualan',
|
||||||
iconClass: 'tabler-receipt-2',
|
iconClass: 'tabler-receipt-2',
|
||||||
link: ''
|
link: getLocalizedUrl(`/apps/report/sales/sales-report`, locale as Locale)
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Tagihan Pelanggan',
|
|
||||||
iconClass: 'tabler-receipt-2',
|
|
||||||
link: ''
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// title: 'Detail Penjualan',
|
||||||
|
// iconClass: 'tabler-receipt-2',
|
||||||
|
// link: ''
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Tagihan Pelanggan',
|
||||||
|
// iconClass: 'tabler-receipt-2',
|
||||||
|
// link: ''
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
title: 'Penjualan per Produk',
|
title: 'Penjualan per Produk',
|
||||||
iconClass: 'tabler-receipt-2',
|
iconClass: 'tabler-receipt-2',
|
||||||
link: ''
|
link: getLocalizedUrl(`/apps/report/sales/sales-product`, locale as Locale)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Penjualan per Kategori Produk',
|
title: 'Penjualan per Kategori Produk',
|
||||||
iconClass: 'tabler-receipt-2',
|
iconClass: 'tabler-receipt-2',
|
||||||
link: ''
|
link: getLocalizedUrl(`/apps/report/sales/sales-product-category`, locale as Locale)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Penjualan Produk per Pelanggan',
|
title: 'Penjualan Pesanan',
|
||||||
iconClass: 'tabler-receipt-2',
|
iconClass: 'tabler-receipt-2',
|
||||||
link: ''
|
link: getLocalizedUrl(`/apps/report/sales/sales-order`, locale as Locale)
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Pemesanan per Produk',
|
|
||||||
iconClass: 'tabler-receipt-2',
|
|
||||||
link: ''
|
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// title: 'Penjualan Produk per Pelanggan',
|
||||||
|
// iconClass: 'tabler-receipt-2',
|
||||||
|
// link: ''
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Pemesanan per Produk',
|
||||||
|
// iconClass: 'tabler-receipt-2',
|
||||||
|
// link: ''
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -0,0 +1,173 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||||
|
import { ExcelExportPaymentService } from '@/services/export/excel/ExcelExportPaymentService'
|
||||||
|
import { PDFExportPaymentService } from '@/services/export/pdf/PDFExportPaymentService'
|
||||||
|
import { usePaymentAnalytics } from '@/services/queries/analytics'
|
||||||
|
import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
|
||||||
|
import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const ReportPaymentMethodContent = () => {
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
|
||||||
|
const { data: paymentAnalytics } = usePaymentAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleExportExcel = async () => {
|
||||||
|
if (!paymentAnalytics) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await ExcelExportPaymentService.exportPaymentMethodToExcel(paymentAnalytics)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`File exported successfully: ${result.filename}`)
|
||||||
|
// Optional: Show success message to user
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
// Optional: Show error message to user
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportPDF = async () => {
|
||||||
|
if (!paymentAnalytics) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await PDFExportPaymentService.exportPaymentMethodToPDF(
|
||||||
|
paymentAnalytics,
|
||||||
|
`Laporan_Metode_Pembayaran_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`PDF exported successfully: ${result.filename}`)
|
||||||
|
// Optional: Show success message to user
|
||||||
|
} else {
|
||||||
|
console.error('PDF export failed:', result.error)
|
||||||
|
// Optional: Show error message to user
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('PDF export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<div className='p-6 border-be'>
|
||||||
|
<div className='flex items-center justify-end gap-2'>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
onClick={handleExportClick}
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportExcel()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export Excel
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportPDF()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export PDF
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardContent>
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan Metode Pembayaran'
|
||||||
|
date={`${paymentAnalytics?.date_from.split('T')[0]} - ${paymentAnalytics?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<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 className='text-gray-800 border-t-2 border-gray-300'>
|
||||||
|
<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'></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportPaymentMethodContent
|
||||||
@ -1,89 +1,105 @@
|
|||||||
// MUI Imports
|
|
||||||
import Grid from '@mui/material/Grid2'
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
// Type Imports
|
|
||||||
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
// Component Imports
|
|
||||||
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
import { ProfitLossReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
// Vars
|
// Utility functions
|
||||||
const data: UserDataType[] = [
|
const formatIDR = (amount: number) => {
|
||||||
{
|
return new Intl.NumberFormat('id-ID', {
|
||||||
title: 'Pendapatan',
|
minimumFractionDigits: 0,
|
||||||
stats: '29.004.775',
|
maximumFractionDigits: 0
|
||||||
avatarIcon: 'tabler-trending-down',
|
}).format(amount)
|
||||||
avatarColor: 'error',
|
}
|
||||||
trend: 'negative',
|
|
||||||
trendNumber: '48,8%',
|
const formatPercentage = (value: number) => {
|
||||||
subtitle: 'vs Bulan Lalu'
|
return `${value.toFixed(1)}%`
|
||||||
},
|
}
|
||||||
{
|
|
||||||
title: 'Margin Laba Bersih',
|
interface ReportProfitLossCardProps {
|
||||||
stats: '38%',
|
profitData: ProfitLossReport | undefined
|
||||||
avatarIcon: 'tabler-gauge',
|
}
|
||||||
avatarColor: 'success',
|
|
||||||
trend: 'positive',
|
const ReportProfitLossCard = ({ profitData }: ReportProfitLossCardProps) => {
|
||||||
trendNumber: 'Bulan Ini',
|
if (!profitData) {
|
||||||
subtitle: 'Bulan Ini'
|
return null // Will be handled by parent loading state
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Laba Kotor',
|
|
||||||
stats: '21.076.389',
|
|
||||||
avatarIcon: 'tabler-trending-down',
|
|
||||||
avatarColor: 'error',
|
|
||||||
trend: 'negative',
|
|
||||||
trendNumber: '43,5%',
|
|
||||||
subtitle: 'vs bulan lalu'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Laba Bersih',
|
|
||||||
stats: '11.111.074',
|
|
||||||
avatarIcon: 'tabler-trending-down',
|
|
||||||
avatarColor: 'error',
|
|
||||||
trend: 'negative',
|
|
||||||
trendNumber: '36,8%',
|
|
||||||
subtitle: 'vs bulan lalu'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Margin Laba Kotor',
|
|
||||||
stats: '73%',
|
|
||||||
avatarIcon: 'tabler-gauge',
|
|
||||||
avatarColor: 'success',
|
|
||||||
trend: 'positive',
|
|
||||||
trendNumber: 'Bulan Ini',
|
|
||||||
subtitle: 'Bulan Ini'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Biaya Operasional',
|
|
||||||
stats: '9.965.315',
|
|
||||||
avatarIcon: 'tabler-trending-down',
|
|
||||||
avatarColor: 'error',
|
|
||||||
trend: 'negative',
|
|
||||||
trendNumber: '49,4%',
|
|
||||||
subtitle: 'vs Bulan Lalu'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Rasio Biaya Operasional',
|
|
||||||
stats: '61,7%',
|
|
||||||
avatarIcon: 'tabler-gauge',
|
|
||||||
avatarColor: 'success',
|
|
||||||
trend: 'positive',
|
|
||||||
trendNumber: 'Bulan Ini',
|
|
||||||
subtitle: 'Bulan Ini'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'EBITDA',
|
|
||||||
stats: '11.032.696',
|
|
||||||
avatarIcon: 'tabler-trending-down',
|
|
||||||
avatarColor: 'error',
|
|
||||||
trend: 'negative',
|
|
||||||
trendNumber: '37,3%',
|
|
||||||
subtitle: 'vs bulan lalu'
|
|
||||||
}
|
}
|
||||||
]
|
|
||||||
|
|
||||||
const ReportProfitLossCard = () => {
|
// Using actual data from API response with correct field names
|
||||||
|
const data: UserDataType[] = [
|
||||||
|
{
|
||||||
|
title: 'Pendapatan',
|
||||||
|
stats: formatIDR(profitData.summary.total_revenue),
|
||||||
|
avatarIcon: 'tabler-trending-up',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Total Revenue'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Margin Laba Bersih',
|
||||||
|
stats: formatPercentage(profitData.summary.net_profit_margin),
|
||||||
|
avatarIcon: 'tabler-gauge',
|
||||||
|
avatarColor: profitData.summary.net_profit_margin >= 0 ? 'success' : 'error',
|
||||||
|
trend: profitData.summary.net_profit_margin >= 0 ? 'positive' : 'negative',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Net Profit Margin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Laba Kotor',
|
||||||
|
stats: formatIDR(profitData.summary.gross_profit),
|
||||||
|
avatarIcon: 'tabler-trending-up',
|
||||||
|
avatarColor: profitData.summary.gross_profit >= 0 ? 'success' : 'error',
|
||||||
|
trend: profitData.summary.gross_profit >= 0 ? 'positive' : 'negative',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Gross Profit'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Laba Bersih',
|
||||||
|
stats: formatIDR(profitData.summary.net_profit),
|
||||||
|
avatarIcon: profitData.summary.net_profit >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
|
||||||
|
avatarColor: profitData.summary.net_profit >= 0 ? 'success' : 'error',
|
||||||
|
trend: profitData.summary.net_profit >= 0 ? 'positive' : 'negative',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Net Profit'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Margin Laba Kotor',
|
||||||
|
stats: formatPercentage(profitData.summary.gross_profit_margin),
|
||||||
|
avatarIcon: 'tabler-gauge',
|
||||||
|
avatarColor: profitData.summary.gross_profit_margin >= 0 ? 'success' : 'error',
|
||||||
|
trend: profitData.summary.gross_profit_margin >= 0 ? 'positive' : 'negative',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Gross Profit Margin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Cost',
|
||||||
|
stats: formatIDR(profitData.summary.total_cost),
|
||||||
|
avatarIcon: 'tabler-trending-down',
|
||||||
|
avatarColor: 'error',
|
||||||
|
trend: 'negative',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Total Cost'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tax',
|
||||||
|
stats: formatIDR(profitData.summary.total_tax),
|
||||||
|
avatarIcon: 'tabler-receipt-tax',
|
||||||
|
avatarColor: 'warning',
|
||||||
|
trend: 'neutral',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Total Tax'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Orders',
|
||||||
|
stats: profitData.summary.total_orders.toString(),
|
||||||
|
avatarIcon: 'tabler-shopping-cart',
|
||||||
|
avatarColor: 'info',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: 'Current Period',
|
||||||
|
subtitle: 'Total Orders'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container spacing={6}>
|
<Grid container spacing={6}>
|
||||||
{data.map((item, i) => (
|
{data.map((item, i) => (
|
||||||
|
|||||||
@ -2,12 +2,86 @@
|
|||||||
|
|
||||||
import DateRangePicker from '@/components/RangeDatePicker'
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||||
import { Button, Card, CardContent, Paper } from '@mui/material'
|
import { ExcelExportProfitLossService } from '@/services/export/excel/ExcelExportProfitLossService'
|
||||||
|
import { PDFExportProfitLossService } from '@/services/export/pdf/PDFExportProfitLossService'
|
||||||
|
import { ProfitLossReport } from '@/types/services/analytic'
|
||||||
|
import { Button, Card, CardContent, Box, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
const ReportProfitLossContent = () => {
|
interface ReportProfitLossContentProps {
|
||||||
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
profitData: ProfitLossReport | undefined
|
||||||
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
startDate: Date | null
|
||||||
|
endDate: Date | null
|
||||||
|
onStartDateChange: (date: Date | null) => void
|
||||||
|
onEndDateChange: (date: Date | null) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility function to format date for display
|
||||||
|
const formatDisplayDate = (dateString: string) => {
|
||||||
|
const date = new Date(dateString)
|
||||||
|
return date.toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReportProfitLossContent = ({
|
||||||
|
profitData,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
onStartDateChange,
|
||||||
|
onEndDateChange
|
||||||
|
}: ReportProfitLossContentProps) => {
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
const open = Boolean(anchorEl)
|
||||||
|
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
const handleExportExcel = async () => {
|
||||||
|
if (!profitData) return
|
||||||
|
handleClose()
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await ExcelExportProfitLossService.exportProfitLossToExcel(profitData)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log('Excel export successful:', result.filename)
|
||||||
|
} else {
|
||||||
|
console.error('Excel export failed:', result.error)
|
||||||
|
alert('Export Excel gagal. Silakan coba lagi.')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Excel export error:', error)
|
||||||
|
alert('Terjadi kesalahan saat export Excel.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportPDF = async () => {
|
||||||
|
if (!profitData) return
|
||||||
|
handleClose()
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await PDFExportProfitLossService.exportProfitLossToPDF(profitData)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log('PDF export successful:', result.filename)
|
||||||
|
// Optional: Show success notification
|
||||||
|
} else {
|
||||||
|
console.error('PDF export failed:', result.error)
|
||||||
|
alert('Export PDF gagal. Silakan coba lagi.')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('PDF export error:', error)
|
||||||
|
alert('Terjadi kesalahan saat export PDF.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
@ -16,99 +90,170 @@ const ReportProfitLossContent = () => {
|
|||||||
<Button
|
<Button
|
||||||
color='secondary'
|
color='secondary'
|
||||||
variant='tonal'
|
variant='tonal'
|
||||||
startIcon={<i className='tabler-upload' />}
|
startIcon={<i className='tabler-download' />}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
className='max-sm:is-full'
|
className='max-sm:is-full'
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={!profitData}
|
||||||
|
aria-controls={open ? 'export-menu' : undefined}
|
||||||
|
aria-haspopup='true'
|
||||||
|
aria-expanded={open ? 'true' : undefined}
|
||||||
>
|
>
|
||||||
Ekspor
|
Export
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
<Menu
|
||||||
|
id='export-menu'
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
MenuListProps={{
|
||||||
|
'aria-labelledby': 'export-button'
|
||||||
|
}}
|
||||||
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||||
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={handleExportExcel}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<i className='tabler-file-type-xls text-green-600' />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>Export to Excel</ListItemText>
|
||||||
|
</MenuItem>
|
||||||
|
|
||||||
|
<MenuItem onClick={handleExportPDF}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<i className='tabler-file-type-pdf text-red-600' />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>Export to PDF</ListItemText>
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
<DateRangePicker
|
<DateRangePicker
|
||||||
startDate={startDate}
|
startDate={startDate}
|
||||||
endDate={endDate}
|
endDate={endDate}
|
||||||
onStartDateChange={setStartDate}
|
onStartDateChange={onStartDateChange}
|
||||||
onEndDateChange={setEndDate}
|
onEndDateChange={onEndDateChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<ReportItemHeader title='Pendapatan' date='10/09/2025' />
|
{profitData ? (
|
||||||
<ReportItemSubheader title='Penjualan' />
|
<>
|
||||||
<ReportItem accountCode='4-40000' accountName='Pendapatan' amount={116791108} onClick={() => {}} />
|
{/* Summary Section */}
|
||||||
<ReportItemSubheader title='Penghasilan lain' />
|
<ReportItemHeader
|
||||||
<ReportItem
|
title='Pendapatan'
|
||||||
accountCode='7-70001'
|
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||||
accountName='Pendapatan Bunga - Deposito'
|
/>
|
||||||
amount={-86486}
|
<ReportItemSubheader title='Penjualan' />
|
||||||
onClick={() => {}}
|
<ReportItem
|
||||||
/>
|
accountCode=''
|
||||||
<ReportItem accountCode='7-70099' accountName='Pendapatan Lain - lain' amount={54054} onClick={() => {}} />
|
accountName='Revenue'
|
||||||
<ReportItem
|
amount={profitData.summary.total_revenue}
|
||||||
accountCode='7-70100'
|
onClick={() => {}}
|
||||||
accountName='Pendapatan lainnya (Service Charge)'
|
/>
|
||||||
amount={-15315}
|
|
||||||
onClick={() => {}}
|
|
||||||
/>
|
|
||||||
<ReportItemFooter title='Total Pendapatan' amount={116743360} />
|
|
||||||
<ReportItemSubheader title='' />
|
|
||||||
|
|
||||||
<ReportItemHeader title='Beban Pokok Penjualan' date='10/09/2025' />
|
<ReportItemFooter title='Total Pendapatan' amount={profitData.summary.total_revenue} />
|
||||||
<ReportItem accountCode='5-50000' accountName='Beban Pokok Pendapatan' amount={35018079} onClick={() => {}} />
|
<ReportItemSubheader title='' />
|
||||||
<ReportItem accountCode='5-50300' accountName='Pengiriman & Pengangkutan' amount={-15315} onClick={() => {}} />
|
|
||||||
<ReportItemFooter title='Total Beban Pokok Penjualan' amount={35002764} />
|
|
||||||
<ReportItemSubheader title='' />
|
|
||||||
|
|
||||||
<ReportItemHeader title='Laba Kotor' amount={81740597} />
|
<ReportItemHeader
|
||||||
<ReportItemSubheader title='' />
|
title='Beban Pokok Penjualan'
|
||||||
|
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Cost of Goods Sold'
|
||||||
|
amount={profitData.summary.total_cost}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
<ReportItemFooter title='Total Beban Pokok Penjualan' amount={profitData.summary.total_cost} />
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
|
||||||
<ReportItemHeader title='Biaya Operasional' date='10/09/2025' />
|
<ReportItemHeader title='Laba Kotor' amount={profitData.summary.gross_profit} />
|
||||||
<ReportItemSubheader title='Biaya Operasional' />
|
<ReportItemSubheader title='' />
|
||||||
<ReportItem accountCode='6-60218' accountName='Air' amount={15315} onClick={() => {}} />
|
|
||||||
<ReportItem
|
|
||||||
accountCode='6-60301'
|
|
||||||
accountName='Alat Tulis Kantor & Printing'
|
|
||||||
amount={-19820}
|
|
||||||
onClick={() => {}}
|
|
||||||
/>
|
|
||||||
<ReportItem accountCode='6-60302' accountName='Bea Materai' amount={-40541} onClick={() => {}} />
|
|
||||||
<ReportItem
|
|
||||||
accountCode='6-60003'
|
|
||||||
accountName='Bensin, Tol dan Parkir - Penjualan'
|
|
||||||
amount={6264865}
|
|
||||||
onClick={() => {}}
|
|
||||||
/>
|
|
||||||
<ReportItem accountCode='6-60401' accountName='Biaya Sewa - Kendaraan' amount={62162} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60403' accountName='Biaya Sewa - Lain - lain' amount={63964} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60402' accountName='Biaya Sewa - Operasional' amount={-2703} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60101' accountName='Gaji' amount={6306} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60001' accountName='Iklan & Promosi' amount={7851892} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60002' accountName='Komisi & Fee' amount={6277748} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60005' accountName='Komunikasi - Penjualan' amount={12058018} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60206' accountName='Komunikasi - Umum' amount={85586} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60500' accountName='Penyusutan - Bangunan' amount={73874} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60502' accountName='Penyusutan - Kendaraan' amount={-78378} onClick={() => {}} />
|
|
||||||
<ReportItem
|
|
||||||
accountCode='6-60004'
|
|
||||||
accountName='Perjalanan Dinas - Penjualan'
|
|
||||||
amount={6745045}
|
|
||||||
onClick={() => {}}
|
|
||||||
/>
|
|
||||||
<ReportItem accountCode='6-60204' accountName='Perjalanan Dinas - Umum' amount={-48649} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60304' accountName='Supplies dan Material' amount={58559} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='6-60106' accountName='THR & Bonus' amount={-59459} onClick={() => {}} />
|
|
||||||
|
|
||||||
<ReportItemSubheader title='Biaya Lain-Lain' />
|
{/* Daily Data Breakdown Section */}
|
||||||
<ReportItem
|
{profitData.data && profitData.data.length > 0 && (
|
||||||
accountCode='8-80002'
|
<>
|
||||||
accountName='(Laba)/Rugi Pelepasan Aset Tetap'
|
<ReportItemHeader
|
||||||
amount={2703}
|
title='Rincian Data Harian'
|
||||||
onClick={() => {}}
|
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||||
/>
|
/>
|
||||||
<ReportItem accountCode='8-80999' accountName='Beban Lain - lain' amount={81982} onClick={() => {}} />
|
<ReportItemSubheader title='Breakdown per Hari' />
|
||||||
<ReportItem accountCode='8-80100' accountName='Penyesuaian Persediaan' amount={-1477900} onClick={() => {}} />
|
|
||||||
<ReportItem accountCode='8-80001' accountName='Provisi' amount={-12613} onClick={() => {}} />
|
|
||||||
<ReportItemFooter title='Total Biaya Operasional' amount={37907956} />
|
|
||||||
<ReportItemSubheader title='' />
|
|
||||||
|
|
||||||
<ReportItemHeader title='Laba Bersih' amount={43832641} />
|
{profitData.data.map((dailyData, index) => (
|
||||||
|
<div key={index} className='mb-4'>
|
||||||
|
<ReportItemSubheader title={`Data ${formatDisplayDate(dailyData.date)}`} />
|
||||||
|
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Revenue Harian'
|
||||||
|
amount={dailyData.revenue}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ReportItem accountCode='' accountName='Cost Harian' amount={dailyData.cost} onClick={() => {}} />
|
||||||
|
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Gross Profit Harian'
|
||||||
|
amount={dailyData.gross_profit}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ReportItem accountCode='' accountName='Tax Harian' amount={dailyData.tax} onClick={() => {}} />
|
||||||
|
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Discount Harian'
|
||||||
|
amount={dailyData.discount}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Orders Harian'
|
||||||
|
amount={dailyData.orders}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ReportItemFooter
|
||||||
|
title={`Net Profit ${formatDisplayDate(dailyData.date)}`}
|
||||||
|
amount={dailyData.net_profit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Operational Costs Section */}
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Biaya Operasional'
|
||||||
|
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<ReportItemSubheader title='Biaya Operasional' />
|
||||||
|
|
||||||
|
<ReportItem accountCode='' accountName='Tax' amount={profitData.summary.total_tax} onClick={() => {}} />
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Discount'
|
||||||
|
amount={profitData.summary.total_discount}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ReportItemFooter
|
||||||
|
title='Total Biaya Operasional'
|
||||||
|
amount={profitData.summary.total_tax + profitData.summary.total_discount}
|
||||||
|
/>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
|
||||||
|
<ReportItemHeader title='Laba Bersih' amount={profitData.summary.net_profit} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Box display='flex' justifyContent='center' alignItems='center' minHeight={200}>
|
||||||
|
<span>No data available</span>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -0,0 +1,78 @@
|
|||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
import { ProfitLossReport, SalesReport } from '@/types/services/analytic'
|
||||||
|
|
||||||
|
// Utility functions
|
||||||
|
const formatIDR = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID', {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0
|
||||||
|
}).format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatPercentage = (value: number) => {
|
||||||
|
return `${value.toFixed(1)}%`
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReportSalesOrderCardProps {
|
||||||
|
sales: SalesReport | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReportSalesOrderCard = ({ sales }: ReportSalesOrderCardProps) => {
|
||||||
|
if (!sales) {
|
||||||
|
return null // Will be handled by parent loading state
|
||||||
|
}
|
||||||
|
|
||||||
|
// Using actual data from API response with correct field names
|
||||||
|
const data: UserDataType[] = [
|
||||||
|
{
|
||||||
|
title: 'Penjualan',
|
||||||
|
stats: formatIDR(sales.summary.total_sales),
|
||||||
|
avatarIcon: 'tabler-trending-up',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '',
|
||||||
|
subtitle: 'Total Penjualan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Pesanan',
|
||||||
|
stats: sales.summary.total_orders.toString(),
|
||||||
|
avatarIcon: 'tabler-gauge',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '',
|
||||||
|
subtitle: 'Total Pesanan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Rata Rata',
|
||||||
|
stats: formatIDR(sales.summary.average_order_value),
|
||||||
|
avatarIcon: 'tabler-trending-up',
|
||||||
|
avatarColor: sales.summary.average_order_value >= 0 ? 'success' : 'error',
|
||||||
|
trend: sales.summary.average_order_value >= 0 ? 'positive' : 'negative',
|
||||||
|
trendNumber: '',
|
||||||
|
subtitle: 'Rata Rata Nilai Pesanan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Penjualan Bersih',
|
||||||
|
stats: formatIDR(sales.summary.net_sales),
|
||||||
|
avatarIcon: sales.summary.net_sales >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
|
||||||
|
avatarColor: sales.summary.net_sales >= 0 ? 'success' : 'error',
|
||||||
|
trend: sales.summary.net_sales >= 0 ? 'positive' : 'negative',
|
||||||
|
trendNumber: '',
|
||||||
|
subtitle: 'Net Profit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
{data.map((item, i) => (
|
||||||
|
<Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
|
||||||
|
<HorizontalWithSubtitle {...item} />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportSalesOrderCard
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||||
|
import { useSalesAnalytics } from '@/services/queries/analytics'
|
||||||
|
import { formatCurrency, formatDate, formatDateDDMMYYYY } from '@/utils/transform'
|
||||||
|
import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import ReportSalesOrderCard from './ReportSalesOrderCard'
|
||||||
|
import { PDFExportSalesOrderService } from '@/services/export/pdf/PDFExportSalesOrderService'
|
||||||
|
import { ExcelExportSalesOrderService } from '@/services/export/excel/ExcelExportSalesOrderService'
|
||||||
|
|
||||||
|
const ReportSalesOrderContent = () => {
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
|
||||||
|
const { data: sales } = useSalesAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportExcel = async () => {
|
||||||
|
if (!sales) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await ExcelExportSalesOrderService.exportSalesOrderToExcel(
|
||||||
|
sales,
|
||||||
|
`Pesanan_Penjualan_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`Excel exported successfully: ${result.filename}`)
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportPDF = async () => {
|
||||||
|
if (!sales) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await PDFExportSalesOrderService.exportSalesOrderToPDF(
|
||||||
|
sales,
|
||||||
|
`Laporan_Pesanan_Penjualan_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`PDF exported successfully: ${result.filename}`)
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ReportSalesOrderCard sales={sales} />
|
||||||
|
|
||||||
|
<Card className='mt-5'>
|
||||||
|
<div className='p-6 border-be'>
|
||||||
|
<div className='flex items-center justify-end gap-2'>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
onClick={handleExportClick}
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportExcel()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export Excel
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportPDF()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export PDF
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardContent>
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Pesanan'
|
||||||
|
date={`${sales?.date_from.split('T')[0]} - ${sales?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<th className='text-left p-3 font-semibold'>Date</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Penjualan</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Pesanan</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Qty</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Pajak</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Diskon</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{sales?.data?.map((c, index) => (
|
||||||
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{formatDate(c.date)}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{formatCurrency(c.sales)}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{c.orders}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{c.items}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{formatCurrency(c.tax)}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{formatCurrency(c.discount)}</td>
|
||||||
|
<td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
|
||||||
|
{formatCurrency(c.net_sales)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) || []}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportSalesOrderContent
|
||||||
@ -0,0 +1,281 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||||
|
import { ExcelExportSalesProductService } from '@/services/export/excel/ExcelExportSalesProductService'
|
||||||
|
import { PDFExportSalesProductService } from '@/services/export/pdf/PdfExportSalesProductSevice'
|
||||||
|
import { useProductSalesAnalytics } from '@/services/queries/analytics'
|
||||||
|
import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
|
||||||
|
import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const ReportSalesPerProductContent = () => {
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
|
||||||
|
const { data: products } = useProductSalesAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportExcel = async () => {
|
||||||
|
if (!products) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await ExcelExportSalesProductService.exportProductSalesToExcel(
|
||||||
|
products,
|
||||||
|
`Penjualan_Produk_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`Excel exported successfully: ${result.filename}`)
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportPDF = async () => {
|
||||||
|
if (!products) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await PDFExportSalesProductService.exportProductSalesToPDF(
|
||||||
|
products,
|
||||||
|
`Laporan_Penjualan_Produk_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`PDF exported successfully: ${result.filename}`)
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<div className='p-6 border-be'>
|
||||||
|
<div className='flex items-center justify-end gap-2'>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
onClick={handleExportClick}
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportExcel()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export Excel
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportPDF()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export PDF
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardContent>
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan Item'
|
||||||
|
date={`${products?.date_from.split('T')[0]} - ${products?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-visible'>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className='w-full table-fixed' style={{ minWidth: '100%' }}>
|
||||||
|
<colgroup>
|
||||||
|
<col style={{ width: '40%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th>
|
||||||
|
<th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th>
|
||||||
|
<th className='text-center p-3 font-semibold border-r border-gray-300'>Order</th>
|
||||||
|
<th className='text-right p-3 font-semibold border-r border-gray-300'>Pendapatan</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Rata Rata</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{(() => {
|
||||||
|
// Group products by category
|
||||||
|
const groupedProducts =
|
||||||
|
products?.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
const rows: JSX.Element[] = []
|
||||||
|
let globalIndex = 0
|
||||||
|
|
||||||
|
// Sort categories alphabetically
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
|
||||||
|
// Category header row
|
||||||
|
rows.push(
|
||||||
|
<tr
|
||||||
|
key={`category-${categoryName}`}
|
||||||
|
className='bg-gray-100 border-b border-gray-300'
|
||||||
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className='p-3 font-bold text-gray-900 border-r border-gray-300'
|
||||||
|
style={{ color: '#36175e' }}
|
||||||
|
>
|
||||||
|
{categoryName.toUpperCase()}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 border-r border-gray-300'></td>
|
||||||
|
<td className='p-3 border-r border-gray-300'></td>
|
||||||
|
<td className='p-3 border-r border-gray-300'></td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
|
||||||
|
// Product rows for this category
|
||||||
|
categoryProducts.forEach((item, index) => {
|
||||||
|
globalIndex++
|
||||||
|
rows.push(
|
||||||
|
<tr
|
||||||
|
key={`product-${item.product_name}-${index}`}
|
||||||
|
className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
|
||||||
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200'
|
||||||
|
style={{ wordWrap: 'break-word' }}
|
||||||
|
>
|
||||||
|
{item.product_name}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center text-gray-700 border-r border-gray-200'>
|
||||||
|
{item.quantity_sold}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center text-gray-700 border-r border-gray-200'>
|
||||||
|
{item.order_count ?? 0}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-200'>
|
||||||
|
{formatCurrency(item.revenue)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-medium text-gray-800'>
|
||||||
|
{formatCurrency(item.average_price)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category subtotal row
|
||||||
|
const categoryTotalQty = categoryProducts.reduce(
|
||||||
|
(sum, item) => sum + (item.quantity_sold || 0),
|
||||||
|
0
|
||||||
|
)
|
||||||
|
const categoryTotalOrders = categoryProducts.reduce(
|
||||||
|
(sum, item) => sum + (item.order_count || 0),
|
||||||
|
0
|
||||||
|
)
|
||||||
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
|
|
||||||
|
rows.push(
|
||||||
|
<tr
|
||||||
|
key={`subtotal-${categoryName}`}
|
||||||
|
className='bg-gray-200 border-b-2 border-gray-400'
|
||||||
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
|
>
|
||||||
|
<td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
Subtotal {categoryName}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
{categoryTotalQty}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
{categoryTotalOrders}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
{formatCurrency(categoryTotalRevenue)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
return rows
|
||||||
|
})()}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
|
||||||
|
<td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
|
||||||
|
<td className='p-3 text-center font-bold border-r border-gray-300'>
|
||||||
|
{productSummary.totalQuantitySold ?? 0}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-bold border-r border-gray-300'>
|
||||||
|
{productSummary.totalOrders ?? 0}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-bold border-r border-gray-300'>
|
||||||
|
{formatCurrency(productSummary.totalRevenue ?? 0)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportSalesPerProductContent
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||||
|
import { ExcelExportSalesProductCategoryService } from '@/services/export/excel/ExcelExportSalesProductCategoryService'
|
||||||
|
import { PDFExportSalesProductCategoryService } from '@/services/export/pdf/PDFExportSalesProductCategoryService'
|
||||||
|
import { useCategoryAnalytics } from '@/services/queries/analytics'
|
||||||
|
import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
|
||||||
|
import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const ReportSalesProductCategoryContent = () => {
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
|
||||||
|
const { data: category } = useCategoryAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
productCount: category?.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: category?.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportExcel = async () => {
|
||||||
|
if (!category) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await ExcelExportSalesProductCategoryService.exportCategorySalesToExcel(
|
||||||
|
category,
|
||||||
|
`Penjualan_Kategori_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`Excel exported successfully: ${result.filename}`)
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportPDF = async () => {
|
||||||
|
if (!category) {
|
||||||
|
console.warn('No data available for export')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await PDFExportSalesProductCategoryService.exportCategorySalesToPDF(
|
||||||
|
category,
|
||||||
|
`Laporan_Penjualan_Kategori_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log(`PDF exported successfully: ${result.filename}`)
|
||||||
|
} else {
|
||||||
|
console.error('Export failed:', result.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<div className='p-6 border-be'>
|
||||||
|
<div className='flex items-center justify-end gap-2'>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
onClick={handleExportClick}
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportExcel()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export Excel
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportPDF()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export PDF
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardContent>
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan Kategori'
|
||||||
|
date={`${category?.date_from.split('T')[0]} - ${category?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<th className='text-left p-3 font-semibold'>Nama</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Total Produk</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Qty</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{category?.data?.map((c, index) => (
|
||||||
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{c.category_name}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{c.product_count}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{c.total_quantity}</td>
|
||||||
|
<td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
|
||||||
|
{formatCurrency(c.total_revenue)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) || []}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr className='text-gray-800 border-t-2 border-gray-300'>
|
||||||
|
<td className='p-3 font-bold'>TOTAL</td>
|
||||||
|
<td className='p-3 text-center font-bold'>{categorySummary?.productCount ?? 0}</td>
|
||||||
|
<td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportSalesProductCategoryContent
|
||||||
442
src/views/apps/report/sales/sales-report/ReportSalesContent.tsx
Normal file
442
src/views/apps/report/sales/sales-report/ReportSalesContent.tsx
Normal file
@ -0,0 +1,442 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||||
|
import { ExcelExportSalesService } from '@/services/export/excel/ExcelExportSalesService'
|
||||||
|
import { PDFExportSalesService } from '@/services/export/pdf/PDFExportSalesService'
|
||||||
|
import {
|
||||||
|
useCategoryAnalytics,
|
||||||
|
usePaymentAnalytics,
|
||||||
|
useProductSalesAnalytics,
|
||||||
|
useProfitLossAnalytics
|
||||||
|
} from '@/services/queries/analytics'
|
||||||
|
import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
|
||||||
|
import { Button, Card, CardContent, Menu, MenuItem, Paper } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const ReportSalesContent = () => {
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
|
||||||
|
const { data: profitLoss } = useProfitLossAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: paymentAnalytics } = usePaymentAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: category } = useCategoryAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: products } = useProductSalesAnalytics({
|
||||||
|
date_from: formatDateDDMMYYYY(startDate!),
|
||||||
|
date_to: formatDateDDMMYYYY(endDate!)
|
||||||
|
})
|
||||||
|
|
||||||
|
const categorySummary = {
|
||||||
|
totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
||||||
|
orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
||||||
|
productCount: category?.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
||||||
|
totalQuantity: category?.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportPDF = async () => {
|
||||||
|
try {
|
||||||
|
const salesData = {
|
||||||
|
profitLoss: profitLoss!,
|
||||||
|
paymentAnalytics: paymentAnalytics!,
|
||||||
|
categoryAnalytics: category!,
|
||||||
|
productAnalytics: products!
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await PDFExportSalesService.exportSalesReportToPDF(salesData)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log('PDF export successful:', result.filename)
|
||||||
|
// Optional: Show success notification
|
||||||
|
} else {
|
||||||
|
console.error('PDF export failed:', result.error)
|
||||||
|
alert('Export PDF gagal. Silakan coba lagi.')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('PDF export error:', error)
|
||||||
|
alert('Terjadi kesalahan saat export PDF.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportExcel = async () => {
|
||||||
|
try {
|
||||||
|
const salesData = {
|
||||||
|
profitLoss: profitLoss!,
|
||||||
|
paymentAnalytics: paymentAnalytics!,
|
||||||
|
categoryAnalytics: category!,
|
||||||
|
productAnalytics: products!
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await ExcelExportSalesService.exportSalesReportToExcel(salesData)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
console.log('Excel export successful:', result.filename)
|
||||||
|
// Optional: Show success notification
|
||||||
|
} else {
|
||||||
|
console.error('Excel export failed:', result.error)
|
||||||
|
alert('Export Excel gagal. Silakan coba lagi.')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Excel export error:', error)
|
||||||
|
alert('Terjadi kesalahan saat export Excel.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<div className='p-6 border-be'>
|
||||||
|
<div className='flex items-center justify-end gap-2'>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
onClick={handleExportClick}
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportExcel()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export Excel
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleExportPDF()
|
||||||
|
handleExportClose()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Export PDF
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardContent>
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan'
|
||||||
|
date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Total Penjualan'
|
||||||
|
amount={profitLoss?.summary.total_revenue ?? 0}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Total Diskon'
|
||||||
|
amount={profitLoss?.summary.total_discount ?? 0}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Total Pajak'
|
||||||
|
amount={profitLoss?.summary.total_tax ?? 0}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
<ReportItemFooter title='Total' amount={profitLoss?.summary.total_revenue ?? 0} />
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Invoice'
|
||||||
|
date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Total Invoice'
|
||||||
|
amount={profitLoss?.summary.total_orders ?? 0}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
<ReportItem
|
||||||
|
accountCode=''
|
||||||
|
accountName='Rata-rata Tagihan per Invoice'
|
||||||
|
amount={profitLoss?.summary.average_profit ?? 0}
|
||||||
|
onClick={() => {}}
|
||||||
|
/>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan Metode Pembayaran'
|
||||||
|
date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<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 className='text-gray-800 border-t-2 border-gray-300'>
|
||||||
|
<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'></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan Kategori'
|
||||||
|
date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-hidden'>
|
||||||
|
<table className='w-full'>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<th className='text-left p-3 font-semibold'>Nama</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Total Produk</th>
|
||||||
|
<th className='text-center p-3 font-semibold'>Qty</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{category?.data?.map((c, index) => (
|
||||||
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className='p-3 font-medium text-gray-800'>{c.category_name}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{c.product_count}</td>
|
||||||
|
<td className='p-3 text-center text-gray-700'>{c.total_quantity}</td>
|
||||||
|
<td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
|
||||||
|
{formatCurrency(c.total_revenue)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) || []}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr className='text-gray-800 border-t-2 border-gray-300'>
|
||||||
|
<td className='p-3 font-bold'>TOTAL</td>
|
||||||
|
<td className='p-3 text-center font-bold'>{categorySummary?.productCount ?? 0}</td>
|
||||||
|
<td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
|
||||||
|
<td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
<ReportItemHeader
|
||||||
|
title='Ringkasan Item'
|
||||||
|
date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
|
||||||
|
/>
|
||||||
|
<div className='bg-gray-50 border border-gray-200 overflow-visible'>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className='w-full table-fixed' style={{ minWidth: '100%' }}>
|
||||||
|
<colgroup>
|
||||||
|
<col style={{ width: '40%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
<col style={{ width: '15%' }} />
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||||
|
<th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th>
|
||||||
|
<th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th>
|
||||||
|
<th className='text-center p-3 font-semibold border-r border-gray-300'>Order</th>
|
||||||
|
<th className='text-right p-3 font-semibold border-r border-gray-300'>Pendapatan</th>
|
||||||
|
<th className='text-right p-3 font-semibold'>Rata Rata</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{(() => {
|
||||||
|
// Group products by category
|
||||||
|
const groupedProducts =
|
||||||
|
products?.data?.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
||||||
|
if (!acc[categoryName]) {
|
||||||
|
acc[categoryName] = []
|
||||||
|
}
|
||||||
|
acc[categoryName].push(item)
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{} as Record<string, any[]>
|
||||||
|
) || {}
|
||||||
|
|
||||||
|
const rows: JSX.Element[] = []
|
||||||
|
let globalIndex = 0
|
||||||
|
|
||||||
|
// Sort categories alphabetically
|
||||||
|
Object.keys(groupedProducts)
|
||||||
|
.sort()
|
||||||
|
.forEach(categoryName => {
|
||||||
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
|
|
||||||
|
// Category header row
|
||||||
|
rows.push(
|
||||||
|
<tr
|
||||||
|
key={`category-${categoryName}`}
|
||||||
|
className='bg-gray-100 border-b border-gray-300'
|
||||||
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className='p-3 font-bold text-gray-900 border-r border-gray-300'
|
||||||
|
style={{ color: '#36175e' }}
|
||||||
|
>
|
||||||
|
{categoryName.toUpperCase()}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 border-r border-gray-300'></td>
|
||||||
|
<td className='p-3 border-r border-gray-300'></td>
|
||||||
|
<td className='p-3 border-r border-gray-300'></td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
|
||||||
|
// Product rows for this category
|
||||||
|
categoryProducts.forEach((item, index) => {
|
||||||
|
globalIndex++
|
||||||
|
rows.push(
|
||||||
|
<tr
|
||||||
|
key={`product-${item.product_name}-${index}`}
|
||||||
|
className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
|
||||||
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200'
|
||||||
|
style={{ wordWrap: 'break-word' }}
|
||||||
|
>
|
||||||
|
{item.product_name}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center text-gray-700 border-r border-gray-200'>
|
||||||
|
{item.quantity_sold}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center text-gray-700 border-r border-gray-200'>
|
||||||
|
{item.order_count ?? 0}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-200'>
|
||||||
|
{formatCurrency(item.revenue)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-medium text-gray-800'>
|
||||||
|
{formatCurrency(item.average_price)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Category subtotal row
|
||||||
|
const categoryTotalQty = categoryProducts.reduce(
|
||||||
|
(sum, item) => sum + (item.quantity_sold || 0),
|
||||||
|
0
|
||||||
|
)
|
||||||
|
const categoryTotalOrders = categoryProducts.reduce(
|
||||||
|
(sum, item) => sum + (item.order_count || 0),
|
||||||
|
0
|
||||||
|
)
|
||||||
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
|
|
||||||
|
rows.push(
|
||||||
|
<tr
|
||||||
|
key={`subtotal-${categoryName}`}
|
||||||
|
className='bg-gray-200 border-b-2 border-gray-400'
|
||||||
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
|
>
|
||||||
|
<td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
Subtotal {categoryName}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
{categoryTotalQty}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
{categoryTotalOrders}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-400'>
|
||||||
|
{formatCurrency(categoryTotalRevenue)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
return rows
|
||||||
|
})()}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
|
||||||
|
<td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
|
||||||
|
<td className='p-3 text-center font-bold border-r border-gray-300'>
|
||||||
|
{productSummary.totalQuantitySold ?? 0}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-center font-bold border-r border-gray-300'>
|
||||||
|
{productSummary.totalOrders ?? 0}
|
||||||
|
</td>
|
||||||
|
<td className='p-3 text-right font-bold border-r border-gray-300'>
|
||||||
|
{formatCurrency(productSummary.totalRevenue ?? 0)}
|
||||||
|
</td>
|
||||||
|
<td className='p-3'></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ReportItemSubheader title='' />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportSalesContent
|
||||||
@ -87,8 +87,7 @@ interface ReportGeneratorProps {
|
|||||||
|
|
||||||
// Custom styled components yang responsif terhadap theme
|
// Custom styled components yang responsif terhadap theme
|
||||||
const StyledCard = styled(Card)(({ theme }) => ({
|
const StyledCard = styled(Card)(({ theme }) => ({
|
||||||
maxWidth: '1024px',
|
margin: '0 0 24px',
|
||||||
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)',
|
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',
|
borderRadius: '8px',
|
||||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff'
|
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user