Report Sales Per Product
This commit is contained in:
efrilm
parent
191937e647
commit
69c49238d4
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' }
|
||||
}
|
||||
}
|
||||
}
|
||||
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}` }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,14 +2,17 @@
|
||||
|
||||
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 } from '@mui/material'
|
||||
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!),
|
||||
@ -22,6 +25,58 @@ const ReportSalesPerProductContent = () => {
|
||||
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'>
|
||||
@ -30,11 +85,30 @@ const ReportSalesPerProductContent = () => {
|
||||
color='secondary'
|
||||
variant='tonal'
|
||||
startIcon={<i className='tabler-upload' />}
|
||||
endIcon={<i className='tabler-chevron-down' />}
|
||||
className='max-sm:is-full'
|
||||
// onClick={handleExportPDF}
|
||||
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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user