Profit Loss Report

src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx

@@ -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}>
-      </Grid>
+            <span>Error loading data: {error.message}</span>
-      <Grid size={{ xs: 12 }}>
+          </Box>
-        <ReportProfitLossContent />
         </Grid>
       </Grid>
     )
   }
 
-export default ProfiltLossPage
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laba Rugi' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossCard profitData={profitData} />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossContent
+          profitData={profitData}
+          startDate={startDate}
+          endDate={endDate}
+          onStartDateChange={setStartDate}
+          onEndDateChange={setEndDate}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ProfitLossPage

src/views/apps/report/profit-loss/ReportProfitLossCard.tsx

@@ -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
+// 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',
+      stats: formatIDR(profitData.summary.total_revenue),
-    avatarIcon: 'tabler-trending-down',
+      avatarIcon: 'tabler-trending-up',
-    avatarColor: 'error',
+      avatarColor: 'success',
-    trend: 'negative',
+      trend: 'positive',
-    trendNumber: '48,8%',
+      trendNumber: 'Current Period',
-    subtitle: 'vs Bulan Lalu'
+      subtitle: 'Total Revenue'
     },
     {
       title: 'Margin Laba Bersih',
-    stats: '38%',
+      stats: formatPercentage(profitData.summary.net_profit_margin),
       avatarIcon: 'tabler-gauge',
-    avatarColor: 'success',
+      avatarColor: profitData.summary.net_profit_margin >= 0 ? 'success' : 'error',
-    trend: 'positive',
+      trend: profitData.summary.net_profit_margin >= 0 ? 'positive' : 'negative',
-    trendNumber: 'Bulan Ini',
+      trendNumber: 'Current Period',
-    subtitle: 'Bulan Ini'
+      subtitle: 'Net Profit Margin'
     },
     {
       title: 'Laba Kotor',
-    stats: '21.076.389',
+      stats: formatIDR(profitData.summary.gross_profit),
-    avatarIcon: 'tabler-trending-down',
+      avatarIcon: 'tabler-trending-up',
-    avatarColor: 'error',
+      avatarColor: profitData.summary.gross_profit >= 0 ? 'success' : 'error',
-    trend: 'negative',
+      trend: profitData.summary.gross_profit >= 0 ? 'positive' : 'negative',
-    trendNumber: '43,5%',
+      trendNumber: 'Current Period',
-    subtitle: 'vs bulan lalu'
+      subtitle: 'Gross Profit'
     },
     {
       title: 'Laba Bersih',
-    stats: '11.111.074',
+      stats: formatIDR(profitData.summary.net_profit),
-    avatarIcon: 'tabler-trending-down',
+      avatarIcon: profitData.summary.net_profit >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
-    avatarColor: 'error',
+      avatarColor: profitData.summary.net_profit >= 0 ? 'success' : 'error',
-    trend: 'negative',
+      trend: profitData.summary.net_profit >= 0 ? 'positive' : 'negative',
-    trendNumber: '36,8%',
+      trendNumber: 'Current Period',
-    subtitle: 'vs bulan lalu'
+      subtitle: 'Net Profit'
     },
     {
       title: 'Margin Laba Kotor',
-    stats: '73%',
+      stats: formatPercentage(profitData.summary.gross_profit_margin),
       avatarIcon: 'tabler-gauge',
-    avatarColor: 'success',
+      avatarColor: profitData.summary.gross_profit_margin >= 0 ? 'success' : 'error',
-    trend: 'positive',
+      trend: profitData.summary.gross_profit_margin >= 0 ? 'positive' : 'negative',
-    trendNumber: 'Bulan Ini',
+      trendNumber: 'Current Period',
-    subtitle: 'Bulan Ini'
+      subtitle: 'Gross Profit Margin'
     },
     {
-    title: 'Biaya Operasional',
+      title: 'Total Cost',
-    stats: '9.965.315',
+      stats: formatIDR(profitData.summary.total_cost),
       avatarIcon: 'tabler-trending-down',
       avatarColor: 'error',
       trend: 'negative',
-    trendNumber: '49,4%',
+      trendNumber: 'Current Period',
-    subtitle: 'vs Bulan Lalu'
+      subtitle: 'Total Cost'
     },
     {
-    title: 'Rasio Biaya Operasional',
+      title: 'Tax',
-    stats: '61,7%',
+      stats: formatIDR(profitData.summary.total_tax),
-    avatarIcon: 'tabler-gauge',
+      avatarIcon: 'tabler-receipt-tax',
-    avatarColor: 'success',
+      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',
+      trendNumber: 'Current Period',
-    subtitle: 'Bulan Ini'
+      subtitle: 'Total Orders'
-  },
-  {
-    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) => (

src/views/apps/report/profit-loss/ReportProfitLossContent.tsx

@@ -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 { ProfitLossReport } from '@/types/services/analytic'
-import { useState } from 'react'
+import { Button, Card, CardContent, Box } from '@mui/material'
 
-const ReportProfitLossContent = () => {
+interface ReportProfitLossContentProps {
-  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  profitData: ProfitLossReport | undefined
-  const [endDate, setEndDate] = useState<Date | null>(new Date())
+  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}
+            onStartDateChange={onStartDateChange}
-            onEndDateChange={setEndDate}
+            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'
+              accountCode=''
-          accountName='Pendapatan Bunga - Deposito'
+              accountName='Revenue'
-          amount={-86486}
+              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'
+              accountCode=''
-          accountName='Pendapatan lainnya (Service Charge)'
+              accountName='Cost of Goods Sold'
-          amount={-15315}
+              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' />
+            <ReportItemHeader title='Laba Kotor' amount={profitData.summary.gross_profit} />
-        <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} />
+            {/* Daily Data Breakdown Section */}
-        <ReportItemSubheader title='' />
+            {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'
+              accountCode=''
-          accountName='(Laba)/Rugi Pelepasan Aset Tetap'
+              accountName='Discount'
-          amount={2703}
+              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={() => {}} />
+            <ReportItemFooter
-        <ReportItem accountCode='8-80001' accountName='Provisi' amount={-12613} onClick={() => {}} />
+              title='Total Biaya Operasional'
-        <ReportItemFooter title='Total Biaya Operasional' amount={37907956} />
+              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>
   )