From f2eb142dec69d9e65f6d5534f18bb887e2a580e1 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 18:20:40 +0700
Subject: [PATCH] Report Profit Loss

---
 .../apps/report/profit-loss/page.tsx          |  22 ++++
 .../HorizontalWithSubtitle.tsx                |   2 +-
 src/components/report/ReportItem.tsx          |   7 +-
 .../profit-loss/ReportProfitLossCard.tsx      |  98 +++++++++++++++
 .../profit-loss/ReportProfitLossContent.tsx   | 117 ++++++++++++++++++
 5 files changed, 242 insertions(+), 4 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx
 create mode 100644 src/views/apps/report/profit-loss/ReportProfitLossCard.tsx
 create mode 100644 src/views/apps/report/profit-loss/ReportProfitLossContent.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx
new file mode 100644
index 0000000..93c519a
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx
@@ -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
diff --git a/src/components/card-statistics/HorizontalWithSubtitle.tsx b/src/components/card-statistics/HorizontalWithSubtitle.tsx
index af663b5..2797957 100644
--- a/src/components/card-statistics/HorizontalWithSubtitle.tsx
+++ b/src/components/card-statistics/HorizontalWithSubtitle.tsx
@@ -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>
diff --git a/src/components/report/ReportItem.tsx b/src/components/report/ReportItem.tsx
index bfa61ec..42c570f 100644
--- a/src/components/report/ReportItem.tsx
+++ b/src/components/report/ReportItem.tsx
@@ -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>
   )
diff --git a/src/views/apps/report/profit-loss/ReportProfitLossCard.tsx b/src/views/apps/report/profit-loss/ReportProfitLossCard.tsx
new file mode 100644
index 0000000..a114637
--- /dev/null
+++ b/src/views/apps/report/profit-loss/ReportProfitLossCard.tsx
@@ -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
diff --git a/src/views/apps/report/profit-loss/ReportProfitLossContent.tsx b/src/views/apps/report/profit-loss/ReportProfitLossContent.tsx
new file mode 100644
index 0000000..8bb09ee
--- /dev/null
+++ b/src/views/apps/report/profit-loss/ReportProfitLossContent.tsx
@@ -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