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

Report Profit Loss

Browse Source
This commit is contained in:
efrilm 2025-09-11 18:20:40 +07:00
parent a1d23cad9e
commit f2eb142dec
5 changed files with 242 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx Normal file
View File

@ -0,0 +1,22 @@
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'
const ProfiltLossPage = () => {
return (
<Grid container spacing={6}>
<Grid size={{ xs: 12 }}>
<ReportTitle title='Laba Rugi' />
</Grid>
<Grid size={{ xs: 12 }}>
<ReportProfitLossCard />
</Grid>
<Grid size={{ xs: 12 }}>
<ReportProfitLossContent />
</Grid>
</Grid>
)
}
export default ProfiltLossPage

2
src/components/card-statistics/HorizontalWithSubtitle.tsx
View File

@ -32,7 +32,7 @@ const HorizontalWithSubtitle = (props: UserDataType) => {
<div className='flex flex-col gap-1 flex-grow'>
<Typography color='text.primary'>{title}</Typography>
<div className='flex items-center gap-2 flex-wrap'>
<Typography variant='h4'>{stats}</Typography>
<Typography variant='h5'>{stats}</Typography>
<Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
{`(${trend === 'negative' ? '-' : '+'}${trendNumber})`}
</Typography>

7
src/components/report/ReportItem.tsx
View File

@ -4,7 +4,8 @@ import { Box, Typography, Paper } from '@mui/material'
// Types
type ReportItemHeaderProps = {
title: string
date: string
date?: string
amount?: number
}
type ReportItemSubheaderProps = {
@ -34,14 +35,14 @@ const formatCurrency = (amount: number) => {
}
// ReportItemHeader Component
export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date }) => {
export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date, amount }) => {
return (
<Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
<Typography variant='h6' className='text-primary font-semibold'>
{title}
</Typography>
<Typography variant='body1' className='text-primary font-medium'>
{date}
{amount ? formatCurrency(amount) : date}
</Typography>
</Box>
)

98
src/views/apps/report/profit-loss/ReportProfitLossCard.tsx Normal file
View File

@ -0,0 +1,98 @@
// 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'
// Vars
const data: UserDataType[] = [
{
title: 'Pendapatan',
stats: '29.004.775',
avatarIcon: 'tabler-trending-down',
avatarColor: 'error',
trend: 'negative',
trendNumber: '48,8%',
subtitle: 'vs Bulan Lalu'
},
{
title: 'Margin Laba Bersih',
stats: '38%',
avatarIcon: 'tabler-gauge',
avatarColor: 'success',
trend: 'positive',
trendNumber: 'Bulan Ini',
subtitle: 'Bulan Ini'
},
{
title: 'Laba Kotor',
stats: '21.076.389',
avatarIcon: 'tabler-trending-down',
avatarColor: 'error',
trend: 'negative',
trendNumber: '43,5%',
subtitle: 'vs bulan lalu'
},
{
title: 'Laba Bersih',
stats: '11.111.074',
avatarIcon: 'tabler-trending-down',
avatarColor: 'error',
trend: 'negative',
trendNumber: '36,8%',
subtitle: 'vs bulan lalu'
},
{
title: 'Margin Laba Kotor',
stats: '73%',
avatarIcon: 'tabler-gauge',
avatarColor: 'success',
trend: 'positive',
trendNumber: 'Bulan Ini',
subtitle: 'Bulan Ini'
},
{
title: 'Biaya Operasional',
stats: '9.965.315',
avatarIcon: 'tabler-trending-down',
avatarColor: 'error',
trend: 'negative',
trendNumber: '49,4%',
subtitle: 'vs Bulan Lalu'
},
{
title: 'Rasio Biaya Operasional',
stats: '61,7%',
avatarIcon: 'tabler-gauge',
avatarColor: 'success',
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'
}
]
const ReportProfitLossCard = () => {
return (
<Grid container spacing={6}>
{data.map((item, i) => (
<Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
<HorizontalWithSubtitle {...item} />
</Grid>
))}
</Grid>
)
}
export default ReportProfitLossCard

117
src/views/apps/report/profit-loss/ReportProfitLossContent.tsx Normal file
View File

@ -0,0 +1,117 @@
'use client'
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'
const ReportProfitLossContent = () => {
const [startDate, setStartDate] = useState<Date | null>(new Date())
const [endDate, setEndDate] = useState<Date | null>(new Date())
return (
<Card>
<div className='p-6 border-be'>
<div className='flex items-center justify-end gap-2'>
<Button
color='secondary'
variant='tonal'
startIcon={<i className='tabler-upload' />}
className='max-sm:is-full'
>
Ekspor
</Button>
<DateRangePicker
startDate={startDate}
endDate={endDate}
onStartDateChange={setStartDate}
onEndDateChange={setEndDate}
/>
</div>
</div>
<CardContent>
<ReportItemHeader title='Pendapatan' date='10/09/2025' />
<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}
onClick={() => {}}
/>
<ReportItem accountCode='7-70099' accountName='Pendapatan Lain - lain' amount={54054} onClick={() => {}} />
<ReportItem
accountCode='7-70100'
accountName='Pendapatan lainnya (Service Charge)'
amount={-15315}
onClick={() => {}}
/>
<ReportItemFooter title='Total Pendapatan' amount={116743360} />
<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} />
<ReportItemSubheader title='' />
<ReportItemHeader title='Laba Kotor' amount={81740597} />
<ReportItemSubheader title='' />
<ReportItemHeader title='Biaya Operasional' date='10/09/2025' />
<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='8-80002'
accountName='(Laba)/Rugi Pelepasan Aset Tetap'
amount={2703}
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} />
<ReportItemSubheader title='' />
<ReportItemHeader title='Laba Bersih' amount={43832641} />
</CardContent>
</Card>
)
}
export default ReportProfitLossContent