From daa3c4e9a26ddeab1c4a9222f3c1ff11db7a750f Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 25 Sep 2025 23:45:49 +0700
Subject: [PATCH] Payment Method Report

---
 .../report/financial/payment-method/page.tsx  | 18 ++++
 src/views/apps/report/ReportFinancialList.tsx | 29 +++---
 .../ReportPaymentMethodContent.tsx            | 98 +++++++++++++++++++
 3 files changed, 133 insertions(+), 12 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/report/financial/payment-method/page.tsx
 create mode 100644 src/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/financial/payment-method/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/financial/payment-method/page.tsx
new file mode 100644
index 0000000..227971c
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/financial/payment-method/page.tsx
@@ -0,0 +1,18 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportPaymentMethodContent from '@/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent'
+import Grid from '@mui/material/Grid2'
+
+const SalesProductReportPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laporan Metode Pembayaran' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportPaymentMethodContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesProductReportPage
diff --git a/src/views/apps/report/ReportFinancialList.tsx b/src/views/apps/report/ReportFinancialList.tsx
index 9c78c5b..b027b01 100644
--- a/src/views/apps/report/ReportFinancialList.tsx
+++ b/src/views/apps/report/ReportFinancialList.tsx
@@ -11,26 +11,31 @@ const ReportFinancialList: React.FC = () => {
   const { lang: locale } = useParams()
 
   const financialReports = [
-    {
-      title: 'Arus Kas',
-      iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
-    },
+    // {
+    //   title: 'Arus Kas',
+    //   iconClass: 'tabler-cash',
+    //   link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
+    // },
     {
       title: 'Laba Rugi',
       iconClass: 'tabler-cash',
       link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
     },
     {
-      title: 'Neraca',
+      title: 'Metode Pembayaran',
       iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
-    },
-    {
-      title: 'Ringkasan Eksekutif',
-      iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+      link: getLocalizedUrl(`/apps/report/financial/payment-method`, locale as Locale)
     }
+    // {
+    //   title: 'Neraca',
+    //   iconClass: 'tabler-cash',
+    //   link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+    // },
+    // {
+    //   title: 'Ringkasan Eksekutif',
+    //   iconClass: 'tabler-cash',
+    //   link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+    // }
   ]
 
   return (
diff --git a/src/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent.tsx b/src/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent.tsx
new file mode 100644
index 0000000..22e6fe9
--- /dev/null
+++ b/src/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { usePaymentAnalytics } from '@/services/queries/analytics'
+import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent } from '@mui/material'
+import { useState } from 'react'
+
+const ReportPaymentMethodContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  const { data: paymentAnalytics } = usePaymentAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  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'
+            // onClick={handleExportPDF}
+          >
+            Ekspor
+          </Button>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader
+          title='Ringkasan Metode Pembayaran'
+          date={`${paymentAnalytics?.date_from.split('T')[0]} - ${paymentAnalytics?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
+          <table className='w-full'>
+            <thead>
+              <tr className='text-gray-800 border-b-2 border-gray-300'>
+                <th className='text-left p-3 font-semibold'>Metode Pembayaran</th>
+                <th className='text-center p-3 font-semibold'>Tipe</th>
+                <th className='text-center p-3 font-semibold'>Jumlah Order</th>
+                <th className='text-right p-3 font-semibold'>Total Amount</th>
+                <th className='text-center p-3 font-semibold'>Persentase</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paymentAnalytics?.data?.map((payment, index) => (
+                <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                  <td className='p-3 font-medium text-gray-800'>{payment.payment_method_name}</td>
+                  <td className='p-3 text-center'>
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        payment.payment_method_type === 'cash'
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-blue-100 text-blue-800'
+                      }`}
+                    >
+                      {payment.payment_method_type.toUpperCase()}
+                    </span>
+                  </td>
+                  <td className='p-3 text-center text-gray-700'>{payment.order_count}</td>
+                  <td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(payment.total_amount)}</td>
+                  <td className='p-3 text-center font-medium' style={{ color: '#36175e' }}>
+                    {(payment.percentage ?? 0).toFixed(1)}%
+                  </td>
+                </tr>
+              )) || []}
+            </tbody>
+            <tfoot>
+              <tr className='text-gray-800 border-t-2 border-gray-300'>
+                <td className='p-3 font-bold'>TOTAL</td>
+                <td className='p-3'></td>
+                <td className='p-3 text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
+                <td className='p-3 text-right font-bold'>
+                  {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
+                </td>
+                <td className='p-3 text-center font-bold'></td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportPaymentMethodContent