javeria

'use client'

import { useState, useMemo, useCallback, useEffect, useRef } from 'react'

import { useRouter } from 'next/navigation'

import dynamic from 'next/dynamic'

import type { ColDef, ICellRendererParams } from 'ag-grid-community'

import URLCellRenderer from './renderers/URLCellRenderer'

import StripeCellRenderer from './renderers/StripeCellRenderer'

import SessionCellRenderer from './renderers/SessionCellRenderer'

import { logout } from '@/server/auth'

import { fetchBusinesses } from '@/server/businesses'

import { extractPicName } from '@/lib/utils'

import type { BusinessRecord } from '@/types/business'

import type { Language } from '@/types/common'

import { getTranslation } from '@/i18n'

const AgGridTable = dynamic(() => import('./AgGridTable'), {

ssr: false,

loading: () => (

</div>

})

const AUTO_REFRESH_MS = 2 60 1000

interface BusinessTableProps {

initialData: BusinessRecord[]

lang: Language

}

export default function BusinessTable({ initialData, lang }: BusinessTableProps) {

const router = useRouter()

const [rowData, setRowData] = useState<BusinessRecord[]>(initialData)

const [loading, setLoading] = useState(false)

const [search, setSearch] = useState('')

const [lastUpdated, setLastUpdated] = useState<Date>(new Date())

const intervalRef = useRef<NodeJS.Timeout | null>(null)

const t = getTranslation(lang)

const fetchData = useCallback(async (silent = false) => {

if (!silent) setLoading(true)

try {

const data = await fetchBusinesses()

setRowData(data)

setLastUpdated(new Date())

} catch (err: unknown) {

if (err instanceof Error && err.message === 'UNAUTHORIZED') {

await logout()

router.replace('/login')

return

}

console.error('Failed to refresh:', err)

} finally {

if (!silent) setLoading(false)

}

}, [router])

useEffect(() => {

intervalRef.current = setInterval(() => {

fetchData(true)

}, AUTO_REFRESH_MS)

return () => {

if (intervalRef.current) clearInterval(intervalRef.current)

}

}, [fetchData])

const handleRefresh = useCallback(async () => {

if (intervalRef.current) clearInterval(intervalRef.current)

await fetchData(false)

intervalRef.current = setInterval(() => fetchData(true), AUTO_REFRESH_MS)

}, [fetchData])

function formatLastUpdated(date: Date): string {

return date.toLocaleString('en-US', {

month: 'short',

day: 'numeric',

hour: '2-digit',

minute: '2-digit',

second: '2-digit',

})

}

const columnDefs = useMemo((): ColDef<BusinessRecord>[] => [

{ headerName: t.colNumber, valueGetter: 'node.rowIndex + 1', width: 60, pinned: 'left', sortable: false, filter: false, cellStyle: { color: '#a8b4d4', fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center' } },

{ field: 'business_name', headerName: t.colBusinessName, minWidth: 180, pinned: 'left', cellStyle: { fontWeight: 600, color: '#0d1b4b', fontSize: 13, display: 'flex', alignItems: 'center' } },

{

field: 'login_method',

headerName: t.colLoginMethod,

minWidth: 130,

cellStyle: { display: 'flex', alignItems: 'center', fontSize: 13, color: '#0d1b4b', fontFamily: 'DM Sans, sans-serif' },

{

field: 'email_or_phone',

headerName: t.colEmailOrPhone,

minWidth: 200,

cellStyle: { display: 'flex', alignItems: 'center' }

{

field: 'approval_status',

headerName: t.colApprovalStatus,

minWidth: 150,

cellStyle: { display: 'flex', alignItems: 'center' },

cellRenderer: (p: ICellRendererParams) => {

const color = p.value === 'APPROVED' ? '#16a34a' : p.value === 'PENDING' ? '#d97706' : '#dc2626'

const bg = p.value === 'APPROVED' ? '#f0fdf4' : p.value === 'PENDING' ? '#fffbeb' : '#fef2f2'

return (

{p.value || '—'}

</span>

)

}

{ field: 'pic_name', headerName: t.colPicName, minWidth: 150, cellStyle: { display: 'flex', alignItems: 'center' }, valueFormatter: (p) => extractPicName(p.value ?? '') },

{ field: 'support_phone', headerName: t.colSupportPhone, minWidth: 160, cellStyle: { display: 'flex', alignItems: 'center' } },

{ field: 'support_email', headerName: t.colSupportEmail, minWidth: 200, cellStyle: { display: 'flex', alignItems: 'center' } },

{

field: 'menu_category_published',

headerName: t.colMenuPublished,

minWidth: 150,

cellDataType: 'boolean',

valueGetter: (p) => p.data?.menu_category_published === true,

cellRenderer: (p: ICellRendererParams) => (

{p.value ? t.yes : t.no}

</span>

cellStyle: { display: 'flex', alignItems: 'center' },

{

field: 'status',

headerName: t.colBusinessPublished,

minWidth: 160,

cellDataType: 'boolean',

valueGetter: (p) => p.data?.status === 'PUBLISHED',

cellRenderer: (p: ICellRendererParams) => (

{p.value ? t.yes : t.no}

</span>

cellStyle: { display: 'flex', alignItems: 'center' },

{ field: 'last_session_accessed', headerName: t.colLastSession, minWidth: 180, cellRenderer: SessionCellRenderer, cellStyle: { display: 'flex', alignItems: 'center' } },

{ field: 'business_page_url', headerName: t.colBusinessPageUrl, minWidth: 240, cellRenderer: URLCellRenderer, cellStyle: { display: 'flex', alignItems: 'center' } },

{ field: 'stripe_account_id', headerName: t.colStripeAccountId, minWidth: 200, cellRenderer: StripeCellRenderer, cellStyle: { display: 'flex', alignItems: 'center' } },

], [t])

const defaultColDef = useMemo<ColDef<BusinessRecord>>(

() => ({ sortable: true, filter: true, resizable: true, floatingFilter: false }),

[]

)

const filteredData = useMemo(() => {

if (!search.trim()) return rowData

const q = search.toLowerCase()

return rowData.filter((r) =>

r.business_name?.toLowerCase().includes(q) ||

extractPicName(r.pic_name ?? '').toLowerCase().includes(q) ||

r.support_email?.toLowerCase().includes(q) ||

r.support_phone?.includes(q)

)

}, [rowData, search])

return (

{/* Header */}

<div>

<h2 style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 17, color: '#0d1b4b', margin: 0 }}>{t.tableTitle}</h2>

<p style={{ fontSize: 12, color: '#7a87b0', margin: '2px 0 0' }}>{filteredData.length} {t.of} {rowData.length} {t.businesses}</p>

</div>

{/* Last Updated */}

{t.lastUpdated} {formatLastUpdated(lastUpdated)}

</span>

</div>

{/* Search */}

</span>

<input

type="text" placeholder={t.searchPlaceholder} value={search} onChange={(e) => setSearch(e.target.value)}

style={{ paddingLeft: 32, paddingRight: 12, paddingTop: 8, paddingBottom: 8, borderRadius: 8, border: '1px solid #e2e7f5', background: '#f8f9fe', fontSize: 13, color: '#0d1b4b', outline: 'none', width: 220, fontFamily: 'DM Sans, sans-serif' }}

onFocus={(e) => { e.target.style.borderColor = '#4a6cf7'; e.target.style.background = '#fff'; e.target.style.boxShadow = '0 0 0 3px rgba(74,108,247,0.1)' }}

onBlur={(e) => { e.target.style.borderColor = '#e2e7f5'; e.target.style.background = '#f8f9fe'; e.target.style.boxShadow = 'none' }}

</div>

{/* Refresh */}

<button onClick={handleRefresh} disabled={loading}

style={{ padding: '8px 14px', borderRadius: 8, border: '1px solid #e2e7f5', background: '#f8f9fe', color: '#3d4d7a', fontSize: 13, cursor: loading ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'DM Sans, sans-serif' }}>

</svg>

{t.refresh}

</button>

</div>

{/* Grid */}

{loading ? (

<p style={{ color: '#7a87b0', fontSize: 14 }}>{t.loading}</p>

</div>

) : (

<AgGridTable

rowData={filteredData}

columnDefs={columnDefs}

defaultColDef={defaultColDef}

</div>

)}

<style>{`

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }

`}</style>

</div>

)

}