Admin

name	type	size	perms	modified	actions
[parent directory]
.gitkeep	file	0 B	0664	2026-04-26 14:51:28	edit
AgentOrderPage.tsx	file	4,376 B	0664	2026-04-26 14:51:28	edit
AgentsPage.tsx	file	22,538 B	0664	2026-05-25 08:29:46	edit
BannerPage.tsx	file	10,831 B	0664	2026-05-25 08:29:46	edit
DashboardPage.tsx	file	1,734 B	0664	2026-05-25 08:29:46	edit
DeliveryMapPage.tsx	file	48,224 B	0664	2026-05-31 05:00:15	edit
DeliveryOrdersPage.tsx	file	13,887 B	0664	2026-05-31 05:00:15	edit
DeliveryScannerPage.tsx	file	30,652 B	0664	2026-05-25 08:29:46	edit
DistributionDashboardPage.tsx	file	13,710 B	0664	2026-05-25 08:29:46	edit
DistributionSettingsPage.tsx	file	33,408 B	0664	2026-05-27 02:31:58	edit
DriversPage.tsx	file	24,725 B	0664	2026-05-27 02:31:58	edit
DriversTripPage.tsx	file	33,991 B	0664	2026-05-29 08:40:03	edit
EntrustedOrderDetailPage.tsx	file	7,924 B	0664	2026-04-26 14:51:28	edit
EntrustedOrderPage.tsx	file	11,873 B	0664	2026-05-25 08:29:46	edit
LivestockPage.tsx	file	10,784 B	0664	2026-05-28 11:26:03	edit
LoginPage.tsx	file	3,666 B	0664	2026-05-25 08:29:46	edit
OrderItemMonitoringPage.tsx	file	5,530 B	0664	2026-05-25 08:29:46	edit
OrderMainwebDetailPage.tsx	file	13,749 B	0664	2026-05-08 04:19:46	edit
OrderMainwebPage.tsx	file	17,159 B	0664	2026-06-05 09:00:07	edit
OrderResellerDetailPage.tsx	file	13,534 B	0664	2026-04-26 15:00:28	edit
OrderResellerPage.tsx	file	12,585 B	0664	2026-05-25 08:29:46	edit
PickupPublicLivePage.tsx	file	8,098 B	0664	2026-05-28 03:35:52	edit
PickupQueueScannerPage.tsx	file	28,543 B	0664	2026-05-27 08:39:24	edit
PickupRegistrationPage.tsx	file	12,689 B	0664	2026-05-27 08:39:24	edit
PickupScannerPage.tsx	file	41,293 B	0664	2026-05-29 02:57:37	edit
PickupStoragePage.tsx	file	35,949 B	0664	2026-05-28 10:20:12	edit
ProductsPage.tsx	file	11,811 B	0664	2026-05-25 08:29:46	edit
PublicDriverTripPage.tsx	file	22,292 B	0664	2026-05-28 03:54:30	edit
RegionMasterPage.tsx	file	10,914 B	0664	2026-05-25 08:29:46	edit
ReportPaymentPage.tsx	file	10,296 B	0664	2026-05-25 08:29:46	edit
SettingsPage.tsx	file	3,554 B	0664	2026-05-25 08:29:46	edit
SpecialReferralPage.tsx	file	12,320 B	0664	2026-05-25 08:29:46	edit
VoucherPage.tsx	file	11,762 B	0664	2026-05-25 08:29:46	edit

editing: ReportPaymentPage.tsx

import { useEffect, useMemo, useState, type ChangeEvent } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import * as XLSX from 'xlsx'
import { Download, RefreshCw } from 'lucide-react'
import { toast } from 'sonner'

import { ContentLayout } from '@/components/layout/ContentLayout'
import { ReportPaymentTable } from '@/components/report-payment/ReportPaymentTable'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  useReportPayment,
  useSendReportInvoiceByEmail,
  useSyncReportToMidtrans,
} from '@/hooks/useReportPayment'
import { flattenReportPayment } from '@/lib/report-payment'
import type { FlatReportPaymentRow, ReportPaymentStatusFilter } from '@/types/report-payment'

const DEFAULT_PAGE = 1
const DEFAULT_PER_PAGE = 10
const PER_PAGE_OPTIONS = [10, 25, 50] as const

function getErrorMessage(error: unknown, fallback: string) {
  return error instanceof Error ? error.message : fallback
}
function getMessage(value: unknown, fallback: string) {
  return typeof value === 'string' && value ? value : fallback
}

export default function ReportPaymentPage() {
  const queryClient = useQueryClient()

// ── Filters ──────────────────────────────────────────────────────────────
  const [searchQuery, setSearchQuery] = useState('')
  const [statusFilter, setStatusFilter] = useState<ReportPaymentStatusFilter>('')
  const [yearFilter, setYearFilter] = useState('')
  const [page, setPage] = useState(DEFAULT_PAGE)
  const [perPage, setPerPage] = useState(DEFAULT_PER_PAGE)

// ── Queries / mutations ──────────────────────────────────────────────────
  const reportQuery = useReportPayment()
  const sendInvoiceMutation = useSendReportInvoiceByEmail()
  const syncMidtransMutation = useSyncReportToMidtrans()

const allRows = useMemo(
    () => flattenReportPayment(reportQuery.data?.result ?? []),
    [reportQuery.data],
  )

// Reset to page 1 on filter changes
  useEffect(() => { setPage(DEFAULT_PAGE) }, [searchQuery, statusFilter, yearFilter])

// ── Client-side filtering ────────────────────────────────────────────────
  const { filteredRows, paginatedRows, totalPages, currentPage, rangeStart, rangeEnd } = useMemo(() => {
    const q = searchQuery.toLowerCase().trim()
    const year = yearFilter.trim()

let filtered = allRows

if (statusFilter) {
      filtered = filtered.filter((r) => r.status === statusFilter)
    }
    if (year) {
      filtered = filtered.filter((r) => (r.payment_date ?? '').includes(year))
    }
    if (q) {
      filtered = filtered.filter((r) =>
        [r.order_no, r.customer_name, r.customer_phone, r.customer_email, r.payment_type]
          .some((v) => (v ?? '').toLowerCase().includes(q)),
      )
    }

const pages = Math.max(1, Math.ceil(filtered.length / perPage))
    const cp = Math.min(page, pages)
    const sliced = filtered.slice((cp - 1) * perPage, cp * perPage)

return {
      filteredRows: filtered,
      paginatedRows: sliced,
      totalPages: pages,
      currentPage: cp,
      rangeStart: sliced.length ? (cp - 1) * perPage + 1 : 0,
      rangeEnd: sliced.length ? (cp - 1) * perPage + sliced.length : 0,
    }
  }, [allRows, searchQuery, statusFilter, yearFilter, page, perPage])

const isRefreshing = reportQuery.isFetching && !reportQuery.isLoading

// ── Handlers ─────────────────────────────────────────────────────────────
  const handleRefresh = () => queryClient.invalidateQueries({ queryKey: ['report-payment'] })

const handleSendInvoice = async (row: FlatReportPaymentRow) => {
    try {
      const res = await sendInvoiceMutation.mutateAsync(row.id)
      toast.success(getMessage(res.message, 'Invoice sent successfully.'))
    } catch (error) {
      toast.error(getErrorMessage(error, 'Failed to send invoice.'))
    }
  }

const handleSyncMidtrans = async () => {
    try {
      const res = await syncMidtransMutation.mutateAsync()
      toast.success(getMessage(res.message, 'Synced to Midtrans.'))
      await queryClient.invalidateQueries({ queryKey: ['report-payment'] })
    } catch (error) {
      toast.error(getErrorMessage(error, 'Failed to sync Midtrans.'))
    }
  }

const handleExport = () => {
    if (!yearFilter) {
      toast.warning('Pilih periode (tahun) dulu sebelum export.')
      return
    }
    if (filteredRows.length === 0) {
      toast.warning('No data to export.')
      return
    }

const exportData = filteredRows.map((row, idx) => ({
      No: idx + 1,
      'Kode Order': row.order_no,
      'Tipe Pembayaran': row.payment_type,
      'Nama Customer': row.customer_name,
      'No. HP / Whatsapp': row.customer_phone,
      'Saldo Tabungan': row.saving_amount,
      'Tunai': row.cash_amount,
      'Total Bayar': row.amount,
      'Tanggal Pembayaran': row.payment_date,
    }))

const worksheet = XLSX.utils.json_to_sheet(exportData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Report Payment')
    XLSX.writeFile(workbook, `Report Payment-${yearFilter}.xlsx`)
  }

const handlePerPageChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const v = Number(e.target.value)
    if (Number.isFinite(v) && v > 0) { setPerPage(v); setPage(DEFAULT_PAGE) }
  }

const showPagination = !reportQuery.isLoading && filteredRows.length > 0

return (
    <ContentLayout
      title="Report Payment"
      description="Review all customer payments and export them for reporting."
      actions={
        <>
          <Button
            variant="outline"
            onClick={handleSyncMidtrans}
            disabled={syncMidtransMutation.isPending}
          >
            {syncMidtransMutation.isPending ? 'Syncing…' : 'Sync Payment'}
          </Button>
          <Button variant="outline" onClick={handleRefresh} disabled={reportQuery.isFetching}>
            <RefreshCw className={isRefreshing ? 'size-4 animate-spin' : 'size-4'} />
            {isRefreshing ? 'Refreshing…' : 'Refresh'}
          </Button>
        </>
      }
    >

<Card>
        <CardHeader>
          <CardTitle>Payment List</CardTitle>
          <CardDescription>All payments, filtered client-side. Pick a year to enable export.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Filters row */}
          <div className="flex flex-wrap gap-3">
            <Input
              className="max-w-xs"
              placeholder="Search order / name / phone…"
              type="search"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <select
              className="h-9 rounded-lg border border-input bg-transparent px-3 text-sm"
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as ReportPaymentStatusFilter)}
            >
              <option value="">— Payment Status —</option>
              <option value="verified">Verified</option>
              <option value="failed">Failed</option>
              <option value="pending-payment">Pending</option>
              <option value="refund">Refund</option>
            </select>
            <Input
              className="w-28"
              maxLength={4}
              placeholder="Year (e.g. 2025)"
              type="number"
              value={yearFilter}
              onChange={(e) => setYearFilter(e.target.value.slice(0, 4))}
            />
          </div>

{/* Export row */}
          <div className="flex flex-wrap items-center gap-3 rounded-md border bg-muted/30 p-3">
            <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Export</Label>
            <p className="text-xs text-muted-foreground">
              Pick a year on the filter above first to enable export.
            </p>
            <Button size="sm" className="ml-auto" onClick={handleExport} disabled={!yearFilter}>
              <Download className="mr-2 size-4" />
              Export Report
            </Button>
          </div>

{showPagination ? (
            <div className="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
              <p className="text-sm text-muted-foreground">Showing {rangeStart}–{rangeEnd} of {filteredRows.length} rows</p>
              <div className="flex items-center gap-3">
                <label className="flex items-center gap-2 text-sm text-muted-foreground">
                  Rows per page
                  <select
                    className="h-8 rounded-lg border border-input bg-transparent px-2 text-sm"
                    value={perPage}
                    onChange={handlePerPageChange}
                  >
                    {PER_PAGE_OPTIONS.map((o) => <option key={o} value={o}>{o}</option>)}
                  </select>
                </label>
                <Button variant="outline" disabled={currentPage <= 1} onClick={() => setPage((p) => p - 1)}>Previous</Button>
                <span className="min-w-28 text-center text-sm text-muted-foreground">Page {currentPage} of {totalPages}</span>
                <Button variant="outline" disabled={currentPage >= totalPages} onClick={() => setPage((p) => p + 1)}>Next</Button>
              </div>
            </div>
          ) : null}
        </CardContent>
      </Card>
    </ContentLayout>
  )
}

cancel

Admin

editing: ReportPaymentPage.tsx

Deskripsi Program

Informasi Donatur

Gerakan Sehat Bermanfaat

Terkumpul

Target

Tentukan Nominal Sedekahmu

Gerakan Sehat Bermanfaat

⁠Masukkan Nominal Sedekah *

Terkumpul

Target