Profit Loss Report
This commit is contained in:
efrilm
parent
cfa3686de3
commit
79cd4f9dcb
@ -1,22 +1,72 @@
|
||||
'use client'
|
||||
|
||||
import ReportTitle from '@/components/report/ReportTitle'
|
||||
import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
|
||||
import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
|
||||
import Grid from '@mui/material/Grid2'
|
||||
import { CircularProgress, Box } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import { useProfitLossAnalytics } from '@/services/queries/analytics'
|
||||
import { formatDateDDMMYYYY } from '@/utils/transform'
|
||||
import Loading from '@/components/layout/shared/Loading'
|
||||
|
||||
const ProfiltLossPage = () => {
|
||||
const ProfitLossPage = () => {
|
||||
const today = new Date()
|
||||
const monthAgo = new Date()
|
||||
monthAgo.setDate(today.getDate() - 30)
|
||||
const [startDate, setStartDate] = useState<Date | null>(monthAgo)
|
||||
const [endDate, setEndDate] = useState<Date | null>(today)
|
||||
|
||||
// Single API call at parent level
|
||||
const {
|
||||
data: profitData,
|
||||
isLoading,
|
||||
error
|
||||
} = useProfitLossAnalytics({
|
||||
date_from: formatDateDDMMYYYY(startDate!),
|
||||
date_to: formatDateDDMMYYYY(endDate!)
|
||||
})
|
||||
|
||||
// Handle loading state
|
||||
if (isLoading) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
// Handle error state
|
||||
if (error) {
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ReportTitle title='Laba Rugi' />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ReportProfitLossCard />
|
||||
<Box display='flex' justifyContent='center' alignItems='center' minHeight={400}>
|
||||
<span>Error loading data: {error.message}</span>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ReportTitle title='Laba Rugi' />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ReportProfitLossContent />
|
||||
<ReportProfitLossCard profitData={profitData} />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ReportProfitLossContent
|
||||
profitData={profitData}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProfiltLossPage
|
||||
export default ProfitLossPage
|
||||
|
||||
@ -1,89 +1,105 @@
|
||||
// MUI Imports
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
// Type Imports
|
||||
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||
|
||||
// Component Imports
|
||||
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||
import { ProfitLossReport } from '@/types/services/analytic'
|
||||
|
||||
// Vars
|
||||
const data: UserDataType[] = [
|
||||
// Utility functions
|
||||
const formatIDR = (amount: number) => {
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const formatPercentage = (value: number) => {
|
||||
return `${value.toFixed(1)}%`
|
||||
}
|
||||
|
||||
interface ReportProfitLossCardProps {
|
||||
profitData: ProfitLossReport | undefined
|
||||
}
|
||||
|
||||
const ReportProfitLossCard = ({ profitData }: ReportProfitLossCardProps) => {
|
||||
if (!profitData) {
|
||||
return null // Will be handled by parent loading state
|
||||
}
|
||||
|
||||
// Using actual data from API response with correct field names
|
||||
const data: UserDataType[] = [
|
||||
{
|
||||
title: 'Pendapatan',
|
||||
stats: '29.004.775',
|
||||
avatarIcon: 'tabler-trending-down',
|
||||
avatarColor: 'error',
|
||||
trend: 'negative',
|
||||
trendNumber: '48,8%',
|
||||
subtitle: 'vs Bulan Lalu'
|
||||
stats: formatIDR(profitData.summary.total_revenue),
|
||||
avatarIcon: 'tabler-trending-up',
|
||||
avatarColor: 'success',
|
||||
trend: 'positive',
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Total Revenue'
|
||||
},
|
||||
{
|
||||
title: 'Margin Laba Bersih',
|
||||
stats: '38%',
|
||||
stats: formatPercentage(profitData.summary.net_profit_margin),
|
||||
avatarIcon: 'tabler-gauge',
|
||||
avatarColor: 'success',
|
||||
trend: 'positive',
|
||||
trendNumber: 'Bulan Ini',
|
||||
subtitle: 'Bulan Ini'
|
||||
avatarColor: profitData.summary.net_profit_margin >= 0 ? 'success' : 'error',
|
||||
trend: profitData.summary.net_profit_margin >= 0 ? 'positive' : 'negative',
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Net Profit Margin'
|
||||
},
|
||||
{
|
||||
title: 'Laba Kotor',
|
||||
stats: '21.076.389',
|
||||
avatarIcon: 'tabler-trending-down',
|
||||
avatarColor: 'error',
|
||||
trend: 'negative',
|
||||
trendNumber: '43,5%',
|
||||
subtitle: 'vs bulan lalu'
|
||||
stats: formatIDR(profitData.summary.gross_profit),
|
||||
avatarIcon: 'tabler-trending-up',
|
||||
avatarColor: profitData.summary.gross_profit >= 0 ? 'success' : 'error',
|
||||
trend: profitData.summary.gross_profit >= 0 ? 'positive' : 'negative',
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Gross Profit'
|
||||
},
|
||||
{
|
||||
title: 'Laba Bersih',
|
||||
stats: '11.111.074',
|
||||
avatarIcon: 'tabler-trending-down',
|
||||
avatarColor: 'error',
|
||||
trend: 'negative',
|
||||
trendNumber: '36,8%',
|
||||
subtitle: 'vs bulan lalu'
|
||||
stats: formatIDR(profitData.summary.net_profit),
|
||||
avatarIcon: profitData.summary.net_profit >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
|
||||
avatarColor: profitData.summary.net_profit >= 0 ? 'success' : 'error',
|
||||
trend: profitData.summary.net_profit >= 0 ? 'positive' : 'negative',
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Net Profit'
|
||||
},
|
||||
{
|
||||
title: 'Margin Laba Kotor',
|
||||
stats: '73%',
|
||||
stats: formatPercentage(profitData.summary.gross_profit_margin),
|
||||
avatarIcon: 'tabler-gauge',
|
||||
avatarColor: 'success',
|
||||
trend: 'positive',
|
||||
trendNumber: 'Bulan Ini',
|
||||
subtitle: 'Bulan Ini'
|
||||
avatarColor: profitData.summary.gross_profit_margin >= 0 ? 'success' : 'error',
|
||||
trend: profitData.summary.gross_profit_margin >= 0 ? 'positive' : 'negative',
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Gross Profit Margin'
|
||||
},
|
||||
{
|
||||
title: 'Biaya Operasional',
|
||||
stats: '9.965.315',
|
||||
title: 'Total Cost',
|
||||
stats: formatIDR(profitData.summary.total_cost),
|
||||
avatarIcon: 'tabler-trending-down',
|
||||
avatarColor: 'error',
|
||||
trend: 'negative',
|
||||
trendNumber: '49,4%',
|
||||
subtitle: 'vs Bulan Lalu'
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Total Cost'
|
||||
},
|
||||
{
|
||||
title: 'Rasio Biaya Operasional',
|
||||
stats: '61,7%',
|
||||
avatarIcon: 'tabler-gauge',
|
||||
avatarColor: 'success',
|
||||
title: 'Tax',
|
||||
stats: formatIDR(profitData.summary.total_tax),
|
||||
avatarIcon: 'tabler-receipt-tax',
|
||||
avatarColor: 'warning',
|
||||
trend: 'neutral',
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Total Tax'
|
||||
},
|
||||
{
|
||||
title: 'Total Orders',
|
||||
stats: profitData.summary.total_orders.toString(),
|
||||
avatarIcon: 'tabler-shopping-cart',
|
||||
avatarColor: 'info',
|
||||
trend: 'positive',
|
||||
trendNumber: 'Bulan Ini',
|
||||
subtitle: 'Bulan Ini'
|
||||
},
|
||||
{
|
||||
title: 'EBITDA',
|
||||
stats: '11.032.696',
|
||||
avatarIcon: 'tabler-trending-down',
|
||||
avatarColor: 'error',
|
||||
trend: 'negative',
|
||||
trendNumber: '37,3%',
|
||||
subtitle: 'vs bulan lalu'
|
||||
trendNumber: 'Current Period',
|
||||
subtitle: 'Total Orders'
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
const ReportProfitLossCard = () => {
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
{data.map((item, i) => (
|
||||
|
||||
@ -2,12 +2,38 @@
|
||||
|
||||
import DateRangePicker from '@/components/RangeDatePicker'
|
||||
import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
|
||||
import { Button, Card, CardContent, Paper } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import { ProfitLossReport } from '@/types/services/analytic'
|
||||
import { Button, Card, CardContent, Box } from '@mui/material'
|
||||
|
||||
const ReportProfitLossContent = () => {
|
||||
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||
interface ReportProfitLossContentProps {
|
||||
profitData: ProfitLossReport | undefined
|
||||
startDate: Date | null
|
||||
endDate: Date | null
|
||||
onStartDateChange: (date: Date | null) => void
|
||||
onEndDateChange: (date: Date | null) => void
|
||||
}
|
||||
|
||||
// Utility function to format date for display
|
||||
const formatDisplayDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const ReportProfitLossContent = ({
|
||||
profitData,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange
|
||||
}: ReportProfitLossContentProps) => {
|
||||
const handleExport = () => {
|
||||
// TODO: Implement export functionality
|
||||
console.log('Export data:', profitData)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
@ -18,97 +44,138 @@ const ReportProfitLossContent = () => {
|
||||
variant='tonal'
|
||||
startIcon={<i className='tabler-upload' />}
|
||||
className='max-sm:is-full'
|
||||
onClick={handleExport}
|
||||
disabled={!profitData}
|
||||
>
|
||||
Ekspor
|
||||
</Button>
|
||||
<DateRangePicker
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
onStartDateChange={onStartDateChange}
|
||||
onEndDateChange={onEndDateChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent>
|
||||
<ReportItemHeader title='Pendapatan' date='10/09/2025' />
|
||||
{profitData ? (
|
||||
<>
|
||||
{/* Summary Section */}
|
||||
<ReportItemHeader
|
||||
title='Pendapatan'
|
||||
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||
/>
|
||||
<ReportItemSubheader title='Penjualan' />
|
||||
<ReportItem accountCode='4-40000' accountName='Pendapatan' amount={116791108} onClick={() => {}} />
|
||||
<ReportItemSubheader title='Penghasilan lain' />
|
||||
<ReportItem
|
||||
accountCode='7-70001'
|
||||
accountName='Pendapatan Bunga - Deposito'
|
||||
amount={-86486}
|
||||
accountCode=''
|
||||
accountName='Revenue'
|
||||
amount={profitData.summary.total_revenue}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<ReportItem accountCode='7-70099' accountName='Pendapatan Lain - lain' amount={54054} onClick={() => {}} />
|
||||
|
||||
<ReportItemFooter title='Total Pendapatan' amount={profitData.summary.total_revenue} />
|
||||
<ReportItemSubheader title='' />
|
||||
|
||||
<ReportItemHeader
|
||||
title='Beban Pokok Penjualan'
|
||||
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||
/>
|
||||
<ReportItem
|
||||
accountCode='7-70100'
|
||||
accountName='Pendapatan lainnya (Service Charge)'
|
||||
amount={-15315}
|
||||
accountCode=''
|
||||
accountName='Cost of Goods Sold'
|
||||
amount={profitData.summary.total_cost}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<ReportItemFooter title='Total Pendapatan' amount={116743360} />
|
||||
<ReportItemFooter title='Total Beban Pokok Penjualan' amount={profitData.summary.total_cost} />
|
||||
<ReportItemSubheader title='' />
|
||||
|
||||
<ReportItemHeader title='Beban Pokok Penjualan' date='10/09/2025' />
|
||||
<ReportItem accountCode='5-50000' accountName='Beban Pokok Pendapatan' amount={35018079} onClick={() => {}} />
|
||||
<ReportItem accountCode='5-50300' accountName='Pengiriman & Pengangkutan' amount={-15315} onClick={() => {}} />
|
||||
<ReportItemFooter title='Total Beban Pokok Penjualan' amount={35002764} />
|
||||
<ReportItemHeader title='Laba Kotor' amount={profitData.summary.gross_profit} />
|
||||
<ReportItemSubheader title='' />
|
||||
|
||||
<ReportItemHeader title='Laba Kotor' amount={81740597} />
|
||||
<ReportItemSubheader title='' />
|
||||
{/* Daily Data Breakdown Section */}
|
||||
{profitData.data && profitData.data.length > 0 && (
|
||||
<>
|
||||
<ReportItemHeader
|
||||
title='Rincian Data Harian'
|
||||
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||
/>
|
||||
<ReportItemSubheader title='Breakdown per Hari' />
|
||||
|
||||
<ReportItemHeader title='Biaya Operasional' date='10/09/2025' />
|
||||
{profitData.data.map((dailyData, index) => (
|
||||
<div key={index} className='mb-4'>
|
||||
<ReportItemSubheader title={`Data ${formatDisplayDate(dailyData.date)}`} />
|
||||
|
||||
<ReportItem
|
||||
accountCode=''
|
||||
accountName='Revenue Harian'
|
||||
amount={dailyData.revenue}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
|
||||
<ReportItem accountCode='' accountName='Cost Harian' amount={dailyData.cost} onClick={() => {}} />
|
||||
|
||||
<ReportItem
|
||||
accountCode=''
|
||||
accountName='Gross Profit Harian'
|
||||
amount={dailyData.gross_profit}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
|
||||
<ReportItem accountCode='' accountName='Tax Harian' amount={dailyData.tax} onClick={() => {}} />
|
||||
|
||||
<ReportItem
|
||||
accountCode=''
|
||||
accountName='Discount Harian'
|
||||
amount={dailyData.discount}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
|
||||
<ReportItem
|
||||
accountCode=''
|
||||
accountName='Orders Harian'
|
||||
amount={dailyData.orders}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
|
||||
<ReportItemFooter
|
||||
title={`Net Profit ${formatDisplayDate(dailyData.date)}`}
|
||||
amount={dailyData.net_profit}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<ReportItemSubheader title='' />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Operational Costs Section */}
|
||||
<ReportItemHeader
|
||||
title='Biaya Operasional'
|
||||
date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
|
||||
/>
|
||||
<ReportItemSubheader title='Biaya Operasional' />
|
||||
<ReportItem accountCode='6-60218' accountName='Air' amount={15315} onClick={() => {}} />
|
||||
<ReportItem
|
||||
accountCode='6-60301'
|
||||
accountName='Alat Tulis Kantor & Printing'
|
||||
amount={-19820}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<ReportItem accountCode='6-60302' accountName='Bea Materai' amount={-40541} onClick={() => {}} />
|
||||
<ReportItem
|
||||
accountCode='6-60003'
|
||||
accountName='Bensin, Tol dan Parkir - Penjualan'
|
||||
amount={6264865}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<ReportItem accountCode='6-60401' accountName='Biaya Sewa - Kendaraan' amount={62162} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60403' accountName='Biaya Sewa - Lain - lain' amount={63964} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60402' accountName='Biaya Sewa - Operasional' amount={-2703} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60101' accountName='Gaji' amount={6306} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60001' accountName='Iklan & Promosi' amount={7851892} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60002' accountName='Komisi & Fee' amount={6277748} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60005' accountName='Komunikasi - Penjualan' amount={12058018} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60206' accountName='Komunikasi - Umum' amount={85586} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60500' accountName='Penyusutan - Bangunan' amount={73874} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60502' accountName='Penyusutan - Kendaraan' amount={-78378} onClick={() => {}} />
|
||||
<ReportItem
|
||||
accountCode='6-60004'
|
||||
accountName='Perjalanan Dinas - Penjualan'
|
||||
amount={6745045}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<ReportItem accountCode='6-60204' accountName='Perjalanan Dinas - Umum' amount={-48649} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60304' accountName='Supplies dan Material' amount={58559} onClick={() => {}} />
|
||||
<ReportItem accountCode='6-60106' accountName='THR & Bonus' amount={-59459} onClick={() => {}} />
|
||||
|
||||
<ReportItemSubheader title='Biaya Lain-Lain' />
|
||||
<ReportItem accountCode='' accountName='Tax' amount={profitData.summary.total_tax} onClick={() => {}} />
|
||||
<ReportItem
|
||||
accountCode='8-80002'
|
||||
accountName='(Laba)/Rugi Pelepasan Aset Tetap'
|
||||
amount={2703}
|
||||
accountCode=''
|
||||
accountName='Discount'
|
||||
amount={profitData.summary.total_discount}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<ReportItem accountCode='8-80999' accountName='Beban Lain - lain' amount={81982} onClick={() => {}} />
|
||||
<ReportItem accountCode='8-80100' accountName='Penyesuaian Persediaan' amount={-1477900} onClick={() => {}} />
|
||||
<ReportItem accountCode='8-80001' accountName='Provisi' amount={-12613} onClick={() => {}} />
|
||||
<ReportItemFooter title='Total Biaya Operasional' amount={37907956} />
|
||||
|
||||
<ReportItemFooter
|
||||
title='Total Biaya Operasional'
|
||||
amount={profitData.summary.total_tax + profitData.summary.total_discount}
|
||||
/>
|
||||
<ReportItemSubheader title='' />
|
||||
|
||||
<ReportItemHeader title='Laba Bersih' amount={43832641} />
|
||||
<ReportItemHeader title='Laba Bersih' amount={profitData.summary.net_profit} />
|
||||
</>
|
||||
) : (
|
||||
<Box display='flex' justifyContent='center' alignItems='center' minHeight={200}>
|
||||
<span>No data available</span>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user