From 3440aaa76481e13984486bc190449b68245978a9 Mon Sep 17 00:00:00 2001 From: efrilm Date: Mon, 11 Aug 2025 02:12:19 +0700 Subject: [PATCH] feat: daily report --- package-lock.json | 209 +++++++++ package.json | 2 + .../dashboards/daily-report/page.tsx | 414 ++++++++++++++++++ src/app/[lang]/layout.tsx | 3 +- .../layout/vertical/VerticalMenu.tsx | 5 +- src/data/dictionaries/ar.json | 3 +- src/data/dictionaries/en.json | 3 +- src/data/dictionaries/fr.json | 3 +- src/services/queries/outlets.ts | 30 +- src/utils/transform.ts | 16 +- .../daily-report/daily-report-pdf.tsx | 0 11 files changed, 677 insertions(+), 11 deletions(-) create mode 100644 src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx create mode 100644 src/views/dashboards/daily-report/daily-report-pdf.tsx 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..40e686e --- /dev/null +++ b/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx @@ -0,0 +1,414 @@ +'use client' + +import Logo from '@/@core/svg/Logo' +import { useProductSalesAnalytics, useProfitLossAnalytics, useSalesAnalytics } from '@/services/queries/analytics' +import { useOutletById } from '@/services/queries/outlets' +import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform' +import React, { useEffect, useRef, useState } from 'react' + +const DailyPOSReport = () => { + const reportRef = useRef(null) + + const [now, setNow] = useState(new Date()) + + const { data: outlet } = useOutletById() + const { data: sales } = useSalesAnalytics({ + date_from: formatDateDDMMYYYY(now), + date_to: formatDateDDMMYYYY(now) + }) + const { data: profitLoss } = useProfitLossAnalytics({ + date_from: formatDateDDMMYYYY(now), + date_to: formatDateDDMMYYYY(now) + }) + const { data: products } = useProductSalesAnalytics({ + date_from: formatDateDDMMYYYY(now), + date_to: formatDateDDMMYYYY(now) + }) + + const user = (() => { + try { + return JSON.parse(localStorage.getItem('user') || '{}') + } catch { + return {} + } + })() + + const productSummary = { + totalQuantitySold: products?.data.reduce((sum, item) => sum + item.quantity_sold, 0), + totalRevenue: products?.data.reduce((sum, item) => sum + item.revenue, 0), + totalOrders: products?.data.reduce((sum, item) => sum + item.order_count, 0) + } + + useEffect(() => { + setNow(new Date()) + }, []) + + const calculateCOGS = (totalRevenue: number, grossProfit: number) => { + return totalRevenue - grossProfit + } + + const calculateAveragePerTransaction = (totalRevenue: number, totalOrders: number) => { + if (totalOrders === 0) return 0 + return totalRevenue / totalOrders + } + + const generatePDF = 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: `Laporan Transaksi Harian`, + subject: 'Daily Transaction Report', + author: 'Apskel POS System', + creator: 'Apskel' + }) + + // Save with optimized settings + pdf.save(`laporan-transaksi-harian.pdf`, { + 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 */} +
+
+
+

Generator Laporan Transaksi Harian

+ +
+

Klik tombol download untuk mengeksport laporan ke PDF

+
+
+ + {/* Report Template */} +
+ {/* Header */} +
+
+
+ +
+

+ Apskel +

+

{outlet?.name}

+

{outlet?.address}

+
+
+
+

Laporan Transaksi Harian

+
+ Laporan Operasional +
+
+
+
+ + {/* Information Section */} +
+
+
+
+ Tanggal Laporan +

{formatDate(now)}

+
+
+ Periode Operasional +

+ {formatDateDDMMYYYY(now)} / {formatDateDDMMYYYY(now)} +

+
+
+
+
+ Dicetak Oleh +

{user.name}

+
+
+ Waktu Cetak +

{formatDatetime(now)}

+
+
+
+
+ + {/* Performance Summary */} +
+

+ 1. Ringkasan Kinerja +

+ +
+
+

Total Transaksi

+

{sales?.summary.total_orders}

+
+
+

Item Terjual

+

{sales?.summary.total_items}

+
+
+

Margin Laba Kotor

+

{profitLoss?.summary.gross_profit_margin.toFixed(2)}%

+
+
+ +
+
+
+ Pendapatan Kotor + + {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} + +
+
+ Total Diskon + + -{formatCurrency(profitLoss?.summary.total_discount ?? 0)} + +
+
+ Pajak + + {formatCurrency(profitLoss?.summary.total_tax ?? 0)} + +
+
+ Pendapatan Bersih + + {formatCurrency(profitLoss?.summary.net_profit ?? 0)} + +
+
+
+
+ HPP (COGS) + + {formatCurrency( + calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) + )} + +
+
+ Laba Kotor + + {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} + +
+
+
+
+ + {/* Transaction Summary */} +
+

+ 2. Ringkasan Transaksi +

+ +
+ + + + + + + + + + + + + {products?.data.map((item, index) => ( + + + + + + + + + ))} + + + + + + + + + + + +
ProdukKategoriQtyOrderPendapatanRata Rata
{item.product_name}{item.category_name}{item.quantity_sold}{item.order_count}{formatCurrency(item.revenue)}{formatCurrency(item.average_price)}
TOTAL{productSummary.totalQuantitySold}{productSummary.totalOrders}{formatCurrency(productSummary.totalRevenue ?? 0)}
+
+
+ + {/* Financial Summary */} +
+

+ 3. Ringkasan Finansial +

+ +
+
+

Pendapatan

+
+
+ Penjualan Kotor + + {formatCurrency(sales?.summary.total_sales ?? 0)} + +
+
+ Diskon + + -{formatCurrency(sales?.summary.total_discount ?? 0)} + +
+
+ Net Sales + + {formatCurrency(sales?.summary.net_sales ?? 0)} + +
+
+
+ +
+

Profitabilitas

+
+
+ Laba Kotor + + {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} + +
+
+ Margin Laba + + {profitLoss?.summary.net_profit_margin.toFixed(2) ?? 0}% + +
+
+ HPP + + {formatCurrency( + calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) + )} + +
+
+
+
+ +
+
+
+

Rata-rata per Transaksi

+

+ {formatCurrency( + calculateAveragePerTransaction(sales?.summary.net_sales ?? 0, sales?.summary.total_orders ?? 0) + )} +

+
+
+

Item per Transaksi

+

+ {Math.round(((sales?.summary.total_items ?? 0) / (sales?.summary.total_orders ?? 0)) * 10) / 10} +

+
+
+

Efisiensi Operasional

+

+ {Math.round(profitLoss?.summary.profitability_ratio ?? 0)}% +

+
+
+
+
+ + {/* 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