ferdiansyah/pos-dashboard-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add grafik at report

Browse Source
This commit is contained in:
efrilm
2025-11-25 18:15:18 +07:00
parent f434373eaf
commit 16deaf1890
3 changed files with 193 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx
+162 -15
View File
@@ -60,8 +60,15 @@ const DailyPOSReport = () => {
const dateParams = getDateParams()
const today = new Date()
const sevenDaysAgo = new Date()
sevenDaysAgo.setDate(today.getDate() - 7)
const { data: outlet } = useOutletById()
const { data: sales } = useSalesAnalytics(dateParams)
const { data: profitLoss7Days } = useProfitLossAnalytics({
date_from: formatDateDDMMYYYY(sevenDaysAgo),
date_to: formatDateDDMMYYYY(today)
})
const { data: profitLoss } = useProfitLossAnalytics(dateParams)
const { data: products } = useProductSalesAnalytics(dateParams)
const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
@@ -202,6 +209,150 @@ const DailyPOSReport = () => {
pdf.addPage()
currentY = 20
// === TREN PENJUALAN (berdasarkan data sales analytics) ===
if (profitLoss7Days?.data && profitLoss7Days.data.length > 0) {
pdf.setFontSize(PDF_FONT_SIZES.heading)
pdf.text('Tren Penjualan 7 Hari Terakhir', 14, currentY)
currentY += 10
// Create canvas for chart
const canvas = document.createElement('canvas')
canvas.width = 800
canvas.height = 400
const ctx = canvas.getContext('2d')
if (ctx) {
const { Chart, registerables } = await import('chart.js')
Chart.register(...registerables)
// Prepare chart data
const chartLabels = profitLoss7Days.data.map(day =>
new Date(day.date).toLocaleDateString('id-ID', { day: '2-digit', month: 'short' })
)
const revenueData = profitLoss7Days.data.map(day => day.revenue)
const ordersData = profitLoss7Days.data.map(day => day.orders)
// Create chart
new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [
{
label: 'Total Penjualan (Rp)',
data: revenueData,
backgroundColor: 'rgba(54, 23, 94, 0.8)',
borderColor: 'rgba(54, 23, 94, 1)',
borderWidth: 1,
yAxisID: 'y'
},
{
label: 'Jumlah Invoice',
data: ordersData,
type: 'line',
borderColor: 'rgba(59, 130, 246, 1)',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 2,
tension: 0.4,
yAxisID: 'y1',
pointRadius: 4,
pointBackgroundColor: 'rgba(59, 130, 246, 1)'
}
]
},
options: {
responsive: false,
animation: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
font: { size: 12 },
padding: 15
}
},
title: {
display: false
}
},
scales: {
y: {
type: 'linear',
position: 'left',
beginAtZero: true,
ticks: {
callback: function (value) {
if (typeof value !== 'number') return ''
return 'Rp ' + (value / 1000).toFixed(0) + 'k'
}
},
title: {
display: true,
text: 'Total Penjualan'
}
},
y1: {
type: 'linear',
position: 'right',
beginAtZero: true,
grid: {
drawOnChartArea: false
},
title: {
display: true,
text: 'Jumlah Invoice'
}
},
x: {
grid: {
display: false
}
}
}
}
})
// Wait for chart to render
await new Promise(resolve => setTimeout(resolve, 500))
// Convert chart to image
const chartImage = canvas.toDataURL('image/png', 1.0)
const chartWidth = 180
const chartHeight = 90
pdf.addImage(chartImage, 'PNG', 15, currentY, chartWidth, chartHeight)
currentY += chartHeight + 10
// Add summary table below chart
autoTable(pdf, {
startY: currentY,
head: [['Total Invoice', 'Total Penjualan']],
body: [
[String(profitLoss7Days.summary.total_orders), formatCurrency(profitLoss7Days.summary.total_revenue)]
],
theme: 'grid',
styles: {
fontSize: PDF_FONT_SIZES.tableContent,
cellPadding: PDF_SPACING.cellPadding,
lineColor: [0, 0, 0],
lineWidth: 0.1,
halign: 'center'
},
headStyles: {
fillColor: [54, 23, 94],
textColor: 255,
fontStyle: 'bold',
fontSize: PDF_FONT_SIZES.tableHeader
},
margin: { left: 14, right: 14 }
})
currentY = (pdf as any).lastAutoTable.finalY + 20
}
}
// Payment Method Summary - DENGAN BORDER HITAM
pdf.setFontSize(PDF_FONT_SIZES.heading)
pdf.text('Ringkasan Metode Pembayaran', 14, currentY)
@@ -259,11 +410,11 @@ const DailyPOSReport = () => {
didParseCell: data => {
if (data.section === 'foot') {
if (data.column.index === 0) {
data.cell.styles.halign = 'left' // Kolom pertama: kiri
data.cell.styles.halign = 'left'
} else if (data.column.index === 1) {
data.cell.styles.halign = 'center' // Kolom kedua: tengah
data.cell.styles.halign = 'center'
} else if (data.column.index === 2) {
data.cell.styles.halign = 'right' // Kolom ketiga: kanan
data.cell.styles.halign = 'right'
}
}
},
@@ -318,11 +469,11 @@ const DailyPOSReport = () => {
didParseCell: data => {
if (data.section === 'foot') {
if (data.column.index === 0) {
data.cell.styles.halign = 'left' // Kolom pertama: kiri
data.cell.styles.halign = 'left'
} else if (data.column.index === 1) {
data.cell.styles.halign = 'center' // Kolom kedua: tengah
data.cell.styles.halign = 'center'
} else if (data.column.index === 2) {
data.cell.styles.halign = 'right' // Kolom ketiga: kanan
data.cell.styles.halign = 'right'
}
}
},
@@ -362,7 +513,6 @@ const DailyPOSReport = () => {
})
.forEach((categoryName, index) => {
const categoryProducts = groupedProducts[categoryName].sort((a, b) => {
// Sort by product_sku ASC
const skuA = a.product_sku || ''
const skuB = b.product_sku || ''
return skuA.localeCompare(skuB)
@@ -377,21 +527,18 @@ const DailyPOSReport = () => {
formatCurrency(item.revenue)
])
// Check if we need a new page
const estimatedHeight = (productBody.length + 3) * 12 // Adjusted for larger font
const estimatedHeight = (productBody.length + 3) * 12
if (currentY + estimatedHeight > 270) {
pdf.addPage()
currentY = 20
}
// Category header
pdf.setFontSize(PDF_FONT_SIZES.subheading)
pdf.setFont('helvetica', 'bold')
pdf.setTextColor(54, 23, 94)
pdf.text(`${index + 1}. ${categoryName.toUpperCase()}`, 16, currentY)
currentY += 15
// Category table - DENGAN BORDER HITAM
autoTable(pdf, {
startY: currentY,
head: [['Produk', 'Qty', 'Pendapatan']],
@@ -429,11 +576,11 @@ const DailyPOSReport = () => {
didParseCell: data => {
if (data.section === 'foot') {
if (data.column.index === 0) {
data.cell.styles.halign = 'left' // Kolom pertama: kiri
data.cell.styles.halign = 'left'
} else if (data.column.index === 1) {
data.cell.styles.halign = 'center' // Kolom kedua: tengah
data.cell.styles.halign = 'center'
} else if (data.column.index === 2) {
data.cell.styles.halign = 'right' // Kolom ketiga: kanan
data.cell.styles.halign = 'right'
}
}
},