diff --git a/package-lock.json b/package-lock.json index c18ef60..52d1762 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,7 +50,9 @@ "date-fns": "4.1.0", "emoji-mart": "5.6.0", "fs-extra": "11.2.0", + "html2canvas": "^1.4.1", "input-otp": "1.4.1", + "jspdf": "^3.0.1", "keen-slider": "6.8.6", "mapbox-gl": "3.9.0", "negotiator": "1.0.0", @@ -3572,6 +3574,13 @@ "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", "license": "MIT" }, + "node_modules/@types/raf": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz", + "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==", + "license": "MIT", + "optional": true + }, "node_modules/@types/react": { "version": "18.3.23", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz", @@ -3621,6 +3630,13 @@ "minipass": "^4.0.0" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true + }, "node_modules/@types/use-sync-external-store": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", @@ -4239,6 +4255,18 @@ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", "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": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz", @@ -4355,6 +4383,15 @@ "dev": true, "license": "MIT" }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/binary-extensions": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", @@ -4447,6 +4484,18 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_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": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", @@ -4575,6 +4624,26 @@ ], "license": "CC-BY-4.0" }, + "node_modules/canvg": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz", + "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==", + "license": "MIT", + "optional": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/raf": "^3.4.0", + "core-js": "^3.8.3", + "raf": "^3.4.1", + "regenerator-runtime": "^0.13.7", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^2.0.0", + "svg-pathdata": "^6.0.3" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -4840,6 +4909,18 @@ "toggle-selection": "^1.0.6" } }, + "node_modules/core-js": { + "version": "3.45.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.0.tgz", + "integrity": "sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -4896,6 +4977,15 @@ "hyphenate-style-name": "^1.0.3" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "license": "MIT", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/css-select": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz", @@ -5405,6 +5495,16 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz", + "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optional": true, + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/domutils": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", @@ -6540,6 +6640,12 @@ "pend": "~1.2.0" } }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "license": "MIT" + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -7321,6 +7427,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "license": "MIT", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/htmlparser2": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz", @@ -8115,6 +8234,24 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jspdf": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz", + "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.7", + "atob": "^2.1.2", + "btoa": "^1.2.1", + "fflate": "^0.8.1" + }, + "optionalDependencies": { + "canvg": "^3.0.11", + "core-js": "^3.6.0", + "dompurify": "^3.2.4", + "html2canvas": "^1.0.0-rc.5" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -9176,6 +9313,13 @@ "integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==", "license": "MIT" }, + "node_modules/performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", + "license": "MIT", + "optional": true + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -9779,6 +9923,16 @@ "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==", "license": "ISC" }, + "node_modules/raf": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "license": "MIT", + "optional": true, + "dependencies": { + "performance-now": "^2.1.0" + } + }, "node_modules/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", @@ -10252,6 +10406,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "license": "MIT", + "optional": true + }, "node_modules/regexp.prototype.flags": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz", @@ -10360,6 +10521,16 @@ "node": ">=0.10.0" } }, + "node_modules/rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "license": "MIT OR SEE LICENSE IN FEEL-FREE.md", + "optional": true, + "engines": { + "node": ">= 0.8.15" + } + }, "node_modules/rope-sequence": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz", @@ -10913,6 +11084,16 @@ "stackframe": "^1.3.4" } }, + "node_modules/stackblur-canvas": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz", + "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=0.1.14" + } + }, "node_modules/stackframe": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", @@ -11601,6 +11782,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-pathdata": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz", + "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/svg-tags": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", @@ -12148,6 +12339,15 @@ "node": ">=8" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "license": "MIT", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -12630,6 +12830,15 @@ "dev": true, "license": "MIT" }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "license": "MIT", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/valibot": { "version": "0.42.1", "resolved": "https://registry.npmjs.org/valibot/-/valibot-0.42.1.tgz", diff --git a/package.json b/package.json index abbf895..0e92148 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,9 @@ "date-fns": "4.1.0", "emoji-mart": "5.6.0", "fs-extra": "11.2.0", + "html2canvas": "^1.4.1", "input-otp": "1.4.1", + "jspdf": "^3.0.1", "keen-slider": "6.8.6", "mapbox-gl": "3.9.0", "negotiator": "1.0.0", diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx new file mode 100644 index 0000000..da88704 --- /dev/null +++ b/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx @@ -0,0 +1,428 @@ +'use client' + +import { + useProductSalesAnalytics, + useProfitLossAnalytics, + useSalesAnalytics, + usePaymentAnalytics +} from '@/services/queries/analytics' +import { useOutletById } from '@/services/queries/outlets' +import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform' +import ReportGeneratorComponent from '@/views/dashboards/daily-report/report-generator' +import ReportHeader from '@/views/dashboards/daily-report/report-header' +import React, { useEffect, useRef, useState } from 'react' + +const DailyPOSReport = () => { + const reportRef = useRef(null) + + const [now, setNow] = useState(new Date()) + const [selectedDate, setSelectedDate] = useState(new Date()) + const [dateRange, setDateRange] = useState({ + startDate: new Date(), + endDate: new Date() + }) + const [filterType, setFilterType] = useState('single') // 'single' or 'range' + + // Use selectedDate for single date filter, or dateRange for range filter + const getDateParams = () => { + if (filterType === 'single') { + return { + date_from: formatDateDDMMYYYY(selectedDate), + date_to: formatDateDDMMYYYY(selectedDate) + } + } else { + return { + date_from: formatDateDDMMYYYY(dateRange.startDate), + date_to: formatDateDDMMYYYY(dateRange.endDate) + } + } + } + + const dateParams = getDateParams() + + const { data: outlet } = useOutletById() + const { data: sales } = useSalesAnalytics(dateParams) + const { data: profitLoss } = useProfitLossAnalytics(dateParams) + const { data: products } = useProductSalesAnalytics(dateParams) + const { data: paymentAnalytics } = usePaymentAnalytics(dateParams) + + const productSummary = { + totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0, + totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0, + totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0 + } + + // Calculate profit loss product summary + const profitLossProductSummary = { + totalRevenue: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0, + totalCost: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.cost || 0), 0) || 0, + totalGrossProfit: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.gross_profit || 0), 0) || 0, + totalQuantity: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0 + } + + useEffect(() => { + setNow(new Date()) + }, []) + + // Format date for input field (YYYY-MM-DD) + const formatDateForInput = (date: Date) => { + return date.toISOString().split('T')[0] + } + + // Get display text for the report period + const getReportPeriodText = () => { + if (filterType === 'single') { + return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}` + } else { + return `${formatDateDDMMYYYY(dateRange.startDate)} - ${formatDateDDMMYYYY(dateRange.endDate)}` + } + } + + // Get report title based on filter type + const getReportTitle = () => { + if (filterType === 'single') { + return 'Laporan Transaksi' + } else { + const daysDiff = Math.ceil((dateRange.endDate.getTime() - dateRange.startDate.getTime()) / (1000 * 3600 * 24)) + 1 + // return `Laporan Transaksi ${daysDiff} Hari` + return `Laporan Transaksi` + } + } + + const handleGeneratePDF = async () => { + const reportElement = reportRef.current + + try { + // Import jsPDF dan html2canvas + const jsPDF = (await import('jspdf')).default + const html2canvas = (await import('html2canvas')).default + + // Optimized canvas capture dengan scale lebih rendah + const canvas = await html2canvas(reportElement!, { + scale: 1.5, // Reduced from 2 to 1.5 + useCORS: true, + allowTaint: true, + backgroundColor: '#ffffff', + logging: false, // Disable logging for performance + removeContainer: true, // Clean up after capture + imageTimeout: 0, // No timeout for image loading + height: reportElement!.scrollHeight, + width: reportElement!.scrollWidth + }) + + // Compress canvas using JPEG with quality setting + const imgData = canvas.toDataURL('image/jpeg', 0.85) // JPEG with 85% quality instead of PNG + + // Create PDF with compression + const pdf = new jsPDF({ + orientation: 'portrait', + unit: 'mm', + format: 'a4', + compress: true // Enable built-in compression + }) + + const imgWidth = 210 + const pageHeight = 295 + const imgHeight = (canvas.height * imgWidth) / canvas.width + let heightLeft = imgHeight + let position = 0 + + // Add first page with compressed image + pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST') // Use FAST compression + heightLeft -= pageHeight + + // Handle multiple pages if needed + while (heightLeft >= 0) { + position = heightLeft - imgHeight + pdf.addPage() + pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST') + heightLeft -= pageHeight + } + + // Additional compression options + pdf.setProperties({ + title: `${getReportTitle()}`, + subject: 'Daily Transaction Report', + author: 'Apskel POS System', + creator: 'Apskel' + }) + + // Save with optimized settings + const fileName = + filterType === 'single' + ? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf` + : `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf` + + pdf.save(fileName, { + returnPromise: true + }) + + // Clean up canvas to free memory + canvas.width = canvas.height = 0 + } catch (error) { + console.error('Error generating PDF:', error) + alert('Terjadi kesalahan saat membuat PDF. Pastikan jsPDF dan html2canvas sudah terinstall.') + } + } + + return ( +
+ {/* Control Panel */} + + + {/* Report Template */} +
+ {/* Header */} + + + {/* Performance Summary */} +
+

+ 1. Ringkasan Kinerja +

+ +
+
+
+ TOTAL PENJUALAN (termasuk rasik) + + {formatCurrency(profitLoss?.summary.total_revenue ?? 0)} + +
+
+ Total Terjual + {productSummary.totalQuantitySold} +
+
+ HPP + + {formatCurrency(profitLoss?.summary.total_cost ?? 0)} |{' '} + {(((profitLoss?.summary.total_cost ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed( + 0 + )} + % + +
+
+ Laba Kotor + + {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} |{' '} + {(profitLoss?.summary.gross_profit_margin ?? 0).toFixed(0)}% + +
+
+ +
+
+ Biaya lain² + + {formatCurrency(profitLoss?.summary.total_tax ?? 0)} |{' '} + {(((profitLoss?.summary.total_tax ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(0)} + % + +
+
+ Laba/Rugi + + {formatCurrency(profitLoss?.summary.net_profit ?? 0)} |{' '} + {(profitLoss?.summary.net_profit_margin ?? 0).toFixed(0)}% + +
+
+
+
+ + {/* Profit Loss Product Table */} +
+

+ Laba Rugi Per Produk +

+ +
+ + + + + + + + + + + + + {profitLoss?.product_data?.map((item, index) => ( + + + + + + + + + )) || []} + + + + + + + + + + + +
ProdukQtyPendapatanHPPLaba KotorMargin (%)
{item.product_name}{item.quantity_sold}{formatCurrency(item.revenue)}{formatCurrency(item.cost)}{formatCurrency(item.gross_profit)} + {(item.gross_profit_margin ?? 0).toFixed(1)}% +
TOTAL{profitLossProductSummary.totalQuantity}{formatCurrency(profitLossProductSummary.totalRevenue)}{formatCurrency(profitLossProductSummary.totalCost)} + {formatCurrency(profitLossProductSummary.totalGrossProfit)} + + {profitLossProductSummary.totalRevenue > 0 + ? ( + (profitLossProductSummary.totalGrossProfit / profitLossProductSummary.totalRevenue) * + 100 + ).toFixed(1) + : 0} + % +
+
+
+ + {/* Payment Method Summary */} +
+

+ 2. Ringkasan Metode Pembayaran +

+ +
+ + + + + + + + + + + + {paymentAnalytics?.data?.map((payment, index) => ( + + + + + + + + )) || []} + + + + + + + + + + +
Metode PembayaranTipeJumlah OrderTotal AmountPersentase
{payment.payment_method_name} + + {payment.payment_method_type.toUpperCase()} + + {payment.order_count} + {formatCurrency(payment.total_amount)} + + {(payment.percentage ?? 0).toFixed(1)}% +
TOTAL{paymentAnalytics?.summary.total_orders ?? 0} + {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)} + 100.0%
+
+
+ + {/* Transaction Summary */} +
+

+ 3. Ringkasan Transaksi +

+ +
+ + + + + + + + + + + + + {products?.data?.map((item, index) => ( + + + + + + + + + )) || []} + + + + + + + + + + + +
ProdukKategoriQtyOrderPendapatanRata Rata
{item.product_name}{item.category_name}{item.quantity_sold}{item.order_count ?? 0}{formatCurrency(item.revenue)}{formatCurrency(item.average_price)}
TOTAL{productSummary.totalQuantitySold ?? 0}{productSummary.totalOrders ?? 0}{formatCurrency(productSummary.totalRevenue ?? 0)}
+
+
+ + {/* Profit Loss Product Table */} + + {/* Footer */} +
+
+

© 2025 Apskel - Sistem POS Terpadu

+

+

Dicetak pada: {now.toLocaleDateString('id-ID')}

+
+
+
+
+ ) +} + +export default DailyPOSReport diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx index 2650c16..d3cc1ef 100644 --- a/src/app/[lang]/layout.tsx +++ b/src/app/[lang]/layout.tsx @@ -31,8 +31,7 @@ import { ReactQueryProvider } from '../../providers/ReactQueryProvider' export const metadata = { title: 'APSKEL', - description: - 'Apsekel' + description: 'Apsekel' } const RootLayout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => { diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx index abaa722..8d72d1d 100644 --- a/src/components/layout/vertical/VerticalMenu.tsx +++ b/src/components/layout/vertical/VerticalMenu.tsx @@ -88,6 +88,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => { {dictionary['navigation'].products} {dictionary['navigation'].orders} {dictionary['navigation'].paymentMethods} + {dictionary['navigation'].dailyReport} }> @@ -111,7 +112,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => { {dictionary['navigation'].list} - {dictionary['navigation'].details} + + {dictionary['navigation'].details} + {dictionary['navigation'].list} diff --git a/src/data/dictionaries/ar.json b/src/data/dictionaries/ar.json index c99d8e2..1b06a26 100644 --- a/src/data/dictionaries/ar.json +++ b/src/data/dictionaries/ar.json @@ -110,6 +110,7 @@ "menuLevels": "مستويات القائمة", "menuLevel2": "مستوى القائمة 2", "menuLevel3": "مستوى القائمة 3", - "disabledMenu": "قائمة المعوقين" + "disabledMenu": "قائمة المعوقين", + "dailyReport": "تقرير يومي" } } diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json index 18771ed..b7cf345 100644 --- a/src/data/dictionaries/en.json +++ b/src/data/dictionaries/en.json @@ -110,6 +110,7 @@ "menuLevels": "Menu Levels", "menuLevel2": "Menu Level 2", "menuLevel3": "Menu Level 3", - "disabledMenu": "Disabled Menu" + "disabledMenu": "Disabled Menu", + "dailyReport": "Daily Report" } } diff --git a/src/data/dictionaries/fr.json b/src/data/dictionaries/fr.json index 3215e14..8a7ade1 100644 --- a/src/data/dictionaries/fr.json +++ b/src/data/dictionaries/fr.json @@ -110,6 +110,7 @@ "menuLevels": "Niveaux de menus", "menuLevel2": "Niveau menu 2", "menuLevel3": "Niveau menu 3", - "disabledMenu": "Menu désactivé" + "disabledMenu": "Menu désactivé", + "dailyReport": "Rapport quotidien" } } diff --git a/src/services/queries/outlets.ts b/src/services/queries/outlets.ts index b16322a..3ce45d0 100644 --- a/src/services/queries/outlets.ts +++ b/src/services/queries/outlets.ts @@ -1,6 +1,6 @@ -import { useQuery } from "@tanstack/react-query" -import { Outlets } from "../../types/services/outlet" -import { api } from "../api" +import { useQuery } from '@tanstack/react-query' +import { Outlet, Outlets } from '../../types/services/outlet' +import { api } from '../api' interface OutletsQueryParams { page?: number @@ -31,6 +31,28 @@ export function useOutlets(params: OutletsQueryParams = {}) { const res = await api.get(`/outlets/list?${queryParams.toString()}`) return res.data.data - }, + } + }) +} + +export function useOutletById() { + const user = (() => { + try { + return JSON.parse(localStorage.getItem('user') || '{}') + } catch { + return {} + } + })() + + const outletId = user?.outlet_id // atau sesuai struktur data user + + return useQuery({ + queryKey: ['outlet', outletId], + queryFn: async () => { + if (!outletId) throw new Error('Outlet ID not found in localStorage') + const res = await api.get(`/outlets/detail/${outletId}`) + return res.data.data + }, + enabled: !!outletId // query hanya jalan kalau ada outletId }) } diff --git a/src/utils/transform.ts b/src/utils/transform.ts index df861eb..5df90b2 100644 --- a/src/utils/transform.ts +++ b/src/utils/transform.ts @@ -23,9 +23,23 @@ export const formatDate = (dateString: any) => { }) } -export const formatDateDDMMYYYY = (date: Date) => { +export const formatDateDDMMYYYY = (dateString: Date | string) => { + const date = new Date(dateString) const day = String(date.getDate()).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0') const year = date.getFullYear() return `${day}-${month}-${year}` } + +export const formatDatetime = (dateString: string | number | Date) => { + const date = new Date(dateString) + + const day = String(date.getDate()).padStart(2, '0') + const month = date.toLocaleString('id-ID', { month: 'long' }) // Aug + const year = date.getFullYear() + + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + + return `${day} ${month} ${year} ${hours}:${minutes}` +} diff --git a/src/views/dashboards/daily-report/daily-report-pdf.tsx b/src/views/dashboards/daily-report/daily-report-pdf.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/views/dashboards/daily-report/report-generator.tsx b/src/views/dashboards/daily-report/report-generator.tsx new file mode 100644 index 0000000..46ee875 --- /dev/null +++ b/src/views/dashboards/daily-report/report-generator.tsx @@ -0,0 +1,519 @@ +import React, { ReactNode } from 'react' +import { + Card, + CardContent, + CardHeader, + Button, + Typography, + FormControl, + FormControlLabel, + Radio, + RadioGroup, + TextField, + Box, + Chip, + Divider, + Grid, + useTheme +} from '@mui/material' +import { styled } from '@mui/material/styles' + +// Type definitions +interface DateRange { + startDate: Date + endDate: Date +} + +interface QuickAction { + label: string + handler: () => void +} + +interface CustomQuickActions { + single?: QuickAction[] + range?: QuickAction[] +} + +interface Labels { + filterLabel?: string + singleDateLabel?: string + rangeDateLabel?: string + selectDateLabel?: string + fromLabel?: string + toLabel?: string + todayLabel?: string + yesterdayLabel?: string + last7DaysLabel?: string + last30DaysLabel?: string + periodLabel?: string + exportHelpText?: string +} + +interface ReportGeneratorProps { + // Required props + reportTitle: string + filterType: 'single' | 'range' + selectedDate: Date + dateRange: DateRange + onFilterTypeChange: (filterType: 'single' | 'range') => void + onSingleDateChange: (date: Date) => void + onDateRangeChange: (dateRange: DateRange) => void + onGeneratePDF: () => void + + // Optional props dengan default values + maxWidth?: string + showQuickActions?: boolean + customQuickActions?: CustomQuickActions | null + periodFormat?: string + downloadButtonText?: string + cardShadow?: string + primaryColor?: string + + // Optional helper functions + formatDateForInput?: ((date: Date) => string) | null + getReportPeriodText?: (() => string) | null + + // Additional customization + className?: string + style?: React.CSSProperties + children?: ReactNode + + // Loading state + isGenerating?: boolean + + // Custom labels + labels?: Labels +} + +// Custom styled components yang responsif terhadap theme +const StyledCard = styled(Card)(({ theme }) => ({ + maxWidth: '1024px', + margin: '0 auto 24px', + boxShadow: theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)', + borderRadius: '8px', + backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff' +})) + +const PurpleButton = styled(Button)(({ theme }) => ({ + backgroundColor: '#36175e', + color: 'white', + textTransform: 'none', + fontWeight: 500, + padding: '8px 24px', + '&:hover': { + backgroundColor: '#2d1350', + opacity: 0.9 + }, + '&:disabled': { + backgroundColor: theme.palette.mode === 'dark' ? '#444' : '#ccc', + color: theme.palette.mode === 'dark' ? '#888' : '#666' + } +})) + +const QuickActionButton = styled(Button)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.08)' : '#f8f7fa', + color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : '#6f6b7d', + textTransform: 'none', + fontSize: '0.875rem', + padding: '6px 16px', + borderRadius: '6px', + '&:hover': { + backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.16)' : '#ebe9f1' + } +})) + +const InfoBox = styled(Box)(({ theme }) => ({ + marginTop: theme.spacing(3), + padding: theme.spacing(2), + backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.04)' : '#f8f7fa', + borderRadius: theme.shape.borderRadius, + border: theme.palette.mode === 'dark' ? '1px solid rgba(231, 227, 252, 0.12)' : 'none' +})) + +const ReportGeneratorComponent: React.FC = ({ + // Required props + reportTitle, + filterType, + selectedDate, + dateRange, + onFilterTypeChange, + onSingleDateChange, + onDateRangeChange, + onGeneratePDF, + + // Optional props dengan default values + maxWidth = '1024px', + showQuickActions = true, + customQuickActions = null, + periodFormat = 'id-ID', + downloadButtonText = 'Download PDF', + cardShadow, + primaryColor = '#36175e', + + // Optional helper functions + formatDateForInput = null, + getReportPeriodText = null, + + // Additional customization + className = '', + style = {}, + children = null, + + // Loading state + isGenerating = false, + + // Custom labels + labels = { + filterLabel: 'Filter Tanggal:', + singleDateLabel: 'Hari Tunggal', + rangeDateLabel: 'Rentang Tanggal', + selectDateLabel: 'Pilih Tanggal:', + fromLabel: 'Dari:', + toLabel: 'Sampai:', + todayLabel: 'Hari Ini', + yesterdayLabel: 'Kemarin', + last7DaysLabel: '7 Hari Terakhir', + last30DaysLabel: '30 Hari Terakhir', + periodLabel: 'Periode:', + exportHelpText: 'Klik tombol download untuk mengeksport laporan ke PDF' + } +}) => { + const theme = useTheme() + + // Dynamic colors berdasarkan theme + const textPrimary = theme.palette.text.primary + const textSecondary = theme.palette.text.secondary + const dynamicCardShadow = + cardShadow || + (theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)') + + // Default format date function + const defaultFormatDateForInput = (date: Date): string => { + return date.toISOString().split('T')[0] + } + + // Default period text function + const defaultGetReportPeriodText = (): string => { + if (filterType === 'single') { + return selectedDate.toLocaleDateString(periodFormat, { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + }) + } else { + return `${dateRange.startDate.toLocaleDateString(periodFormat)} - ${dateRange.endDate.toLocaleDateString(periodFormat)}` + } + } + + // Use provided functions or defaults + const formatDate = formatDateForInput || defaultFormatDateForInput + const getPeriodText = getReportPeriodText || defaultGetReportPeriodText + + // Quick action handlers + const handleToday = (): void => { + onSingleDateChange(new Date()) + } + + const handleYesterday = (): void => { + const yesterday = new Date() + yesterday.setDate(yesterday.getDate() - 1) + onSingleDateChange(yesterday) + } + + const handleLast7Days = (): void => { + const today = new Date() + const weekAgo = new Date() + weekAgo.setDate(today.getDate() - 6) + onDateRangeChange({ startDate: weekAgo, endDate: today }) + } + + const handleLast30Days = (): void => { + const today = new Date() + const monthAgo = new Date() + monthAgo.setDate(today.getDate() - 29) + onDateRangeChange({ startDate: monthAgo, endDate: today }) + } + + // Default quick actions + const defaultQuickActions: CustomQuickActions = { + single: [ + { label: labels.todayLabel || 'Hari Ini', handler: handleToday }, + { label: labels.yesterdayLabel || 'Kemarin', handler: handleYesterday } + ], + range: [ + { label: labels.last7DaysLabel || '7 Hari Terakhir', handler: handleLast7Days }, + { label: labels.last30DaysLabel || '30 Hari Terakhir', handler: handleLast30Days } + ] + } + + const quickActions = customQuickActions || defaultQuickActions + + return ( + + + Generator {reportTitle} + + } + action={ + + {isGenerating ? 'Generating...' : downloadButtonText} + + } + sx={{ pb: 2 }} + /> + + + + + {/* Filter Controls */} + + + {labels.filterLabel || 'Filter Tanggal:'} + + + + onFilterTypeChange(e.target.value as 'single' | 'range')} + sx={{ gap: 3 }} + > + + } + label={ + + {labels.singleDateLabel || 'Hari Tunggal'} + + } + /> + + } + label={ + + {labels.rangeDateLabel || 'Rentang Tanggal'} + + } + /> + + + + {/* Single Date Filter */} + {filterType === 'single' && ( + + + + {labels.selectDateLabel || 'Pilih Tanggal:'} + + + + onSingleDateChange(new Date(e.target.value))} + size='small' + sx={{ + '& .MuiOutlinedInput-root': { + '&.Mui-focused fieldset': { + borderColor: primaryColor + }, + '& fieldset': { + borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider + } + }, + '& .MuiInputBase-input': { + color: textPrimary + } + }} + /> + + {showQuickActions && ( + + + {quickActions.single?.map((action, index) => ( + + {action.label} + + ))} + + + )} + + )} + + {/* Date Range Filter */} + {filterType === 'range' && ( + + + + + {labels.fromLabel || 'Dari:'} + + + onDateRangeChange({ + ...dateRange, + startDate: new Date(e.target.value) + }) + } + size='small' + sx={{ + '& .MuiOutlinedInput-root': { + '&.Mui-focused fieldset': { + borderColor: primaryColor + }, + '& fieldset': { + borderColor: + theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider + } + }, + '& .MuiInputBase-input': { + color: textPrimary + } + }} + /> + + + + + + {labels.toLabel || 'Sampai:'} + + + onDateRangeChange({ + ...dateRange, + endDate: new Date(e.target.value) + }) + } + size='small' + sx={{ + '& .MuiOutlinedInput-root': { + '&.Mui-focused fieldset': { + borderColor: primaryColor + }, + '& fieldset': { + borderColor: + theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider + } + }, + '& .MuiInputBase-input': { + color: textPrimary + } + }} + /> + + + {showQuickActions && ( + + + {quickActions.range?.map((action, index) => ( + + {action.label} + + ))} + + + )} + + )} + + + + + {labels.periodLabel || 'Periode:'}{' '} + + + + {labels.exportHelpText || 'Klik tombol download untuk mengeksport laporan ke PDF'} + + + + {/* Custom content dapat ditambahkan di sini */} + {children} + + + ) +} + +export default ReportGeneratorComponent diff --git a/src/views/dashboards/daily-report/report-header.tsx b/src/views/dashboards/daily-report/report-header.tsx new file mode 100644 index 0000000..a6c9d99 --- /dev/null +++ b/src/views/dashboards/daily-report/report-header.tsx @@ -0,0 +1,123 @@ +'use client' + +// React Imports +import type { FC } from 'react' + +// MUI Imports +import { Box, Typography, Divider } from '@mui/material' +import { useTheme } from '@mui/material/styles' + +// Component Imports +import Logo from '@core/svg/Logo' + +// Type Imports +import type { Outlet } from '@/types/services/outlet' + +// Props Interface +export interface ReportHeaderProps { + outlet?: Outlet + reportTitle: string + reportSubtitle?: string + brandName?: string + brandColor?: string + className?: string + periode?: string +} + +const ReportHeader: FC = ({ + outlet, + reportTitle, + reportSubtitle = 'Laporan Operasional', + brandName = 'Apskel', + brandColor, + className, + periode +}) => { + // Hooks + const theme = useTheme() + + return ( + + + + {/* Left Section - Brand & Outlet Info */} + + + + + {brandName} + + {outlet?.name && ( + + {outlet.name} + + )} + {outlet?.address && ( + + {outlet.address} + + )} + + + + {/* Right Section - Report Info */} + + + {reportTitle} + + {periode && ( + + + {periode} + + + )} + {reportSubtitle && ( + + + {reportSubtitle} + + + )} + + + + + + ) +} + +export default ReportHeader