import { Head, router, usePage } from '@inertiajs/react' import { FinanceAppLayout } from '@/layouts/finance-app-layout' import { Button } from '@ui/components/ui/button' import { Input } from '@ui/components/ui/input' import { Badge } from '@ui/components/ui/badge' import { Main } from '@ui/components/layout/main' import { useMemo, useState } from 'react' type MappingRow = { local: { id: number customer_code: string company_name: string accurate_id: number | null accurate_code: string | null } accurate: { id: number customer_no: string name: string source: 'linked' | 'suggested' } | null is_connected: boolean } type PageProps = { rows: { data: MappingRow[] current_page: number last_page: number per_page: number total: number } filters: { search: string per_page: number } accurate_configured: boolean [key: string]: unknown } const ROUTE = '/monitoring/integrasi-accurate/customer-mapping' const CONNECT_ROUTE = '/monitoring/integrasi-accurate/customer-mapping/connect' export default function CustomerMappingPage() { const { rows, filters, accurate_configured } = usePage().props const [search, setSearch] = useState(filters.search || '') const [loadingId, setLoadingId] = useState(null) const hasRows = useMemo(() => rows.data.length > 0, [rows.data.length]) const applySearch = () => { router.get( ROUTE, { search, page: 1, per_page: rows.per_page }, { preserveState: true, preserveScroll: true, replace: true }, ) } const goPage = (page: number) => { router.get( ROUTE, { search: filters.search, page, per_page: rows.per_page }, { preserveState: true, preserveScroll: true, replace: true }, ) } const connect = (row: MappingRow) => { if (!row.accurate || row.is_connected) return setLoadingId(row.local.id) router.post( CONNECT_ROUTE, { local_customer_id: row.local.id, accurate_customer_id: row.accurate.id, accurate_customer_no: row.accurate.customer_no, accurate_customer_name: row.accurate.name, }, { preserveScroll: true, onFinish: () => setLoadingId(null), }, ) } return (

Integrasi Customer

Kiri: customer app gfin, kanan: customer Accurate.

setSearch(e.target.value)} placeholder='Cari customer...' className='w-64' />
{!accurate_configured && (
Konfigurasi Accurate belum lengkap. Tombol Connect tidak akan aktif.
)}
Customer App GFIN
Relasi
Customer Accurate
{!hasRows && (
Tidak ada data customer.
)} {rows.data.map((row) => (

{row.local.company_name}

{row.local.customer_code || '-'}

{row.is_connected ? ( = ) : ( )}
{row.accurate ? ( <>

{row.accurate.name}

{row.accurate.customer_no || '-'} {row.accurate.source === 'suggested' ? '(suggested)' : ''}

) : (

Tidak ada kandidat

)}
))}
Total {rows.total} data
Page {rows.current_page} / {rows.last_page}
) }