Mattsson
a9aff5a120
* Enhance booking template functionality and add sandbox extraction checks * Implement Recapt integration for feedback submission and user identification * Add Recapt identification component and bank sync status chip; update crontab entries * Update .gitignore to ignore the entire scripts directory * Refactor Recapt integration: add loader component, update privacy policy, and enhance bank sync status messages * Fix .gitignore to correctly ignore the scripts directory
95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { useTranslations } from 'next-intl'
|
|
import { AlertTriangle, RefreshCw } from 'lucide-react'
|
|
import { createClient } from '@/lib/supabase/client'
|
|
import { useCompany } from '@/contexts/CompanyContext'
|
|
|
|
interface ConnectionRow {
|
|
id: string
|
|
status: string | null
|
|
last_synced_at: string | null
|
|
}
|
|
|
|
function useAgeFormatter() {
|
|
const t = useTranslations('transactions')
|
|
return (iso: string): string => {
|
|
const ms = Date.now() - new Date(iso).getTime()
|
|
const min = Math.floor(ms / 60000)
|
|
if (min < 1) return t('bank_sync_age_just_now')
|
|
if (min < 60) return t('bank_sync_age_minutes', { count: min })
|
|
const h = Math.floor(min / 60)
|
|
if (h < 24) return t('bank_sync_age_hours', { count: h })
|
|
const d = Math.floor(h / 24)
|
|
return t('bank_sync_age_days', { count: d })
|
|
}
|
|
}
|
|
|
|
export default function BankSyncStatusChip() {
|
|
const t = useTranslations('transactions')
|
|
const formatAge = useAgeFormatter()
|
|
const { company } = useCompany()
|
|
const [rows, setRows] = useState<ConnectionRow[] | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!company?.id) return
|
|
let cancelled = false
|
|
const supabase = createClient()
|
|
supabase
|
|
.from('bank_connections')
|
|
.select('id, status, last_synced_at')
|
|
.eq('company_id', company.id)
|
|
.then(({ data }) => {
|
|
if (!cancelled) setRows(data ?? [])
|
|
})
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [company?.id])
|
|
|
|
if (!rows || rows.length === 0) return null
|
|
|
|
const needsAttention = rows.filter(
|
|
(r) => r.status === 'expired' || r.status === 'error',
|
|
)
|
|
|
|
if (needsAttention.length > 0) {
|
|
return (
|
|
<Link
|
|
href="/settings/banking"
|
|
className="inline-flex items-center gap-1.5 rounded-md border border-destructive/40 bg-destructive/5 px-2.5 py-1 text-xs text-destructive transition-colors hover:bg-destructive/10"
|
|
>
|
|
<AlertTriangle className="h-3.5 w-3.5" />
|
|
<span>
|
|
{needsAttention.length === 1
|
|
? t('bank_sync_attention_one')
|
|
: t('bank_sync_attention_many', { count: needsAttention.length })}
|
|
</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const mostRecent = rows
|
|
.map((r) => r.last_synced_at)
|
|
.filter((s): s is string => Boolean(s))
|
|
.sort()
|
|
.pop()
|
|
|
|
return (
|
|
<div className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
|
|
<RefreshCw className="h-3.5 w-3.5" />
|
|
<span>
|
|
{t('bank_sync_auto_nightly')}
|
|
{mostRecent && (
|
|
<>
|
|
{t('bank_sync_last_separator')}
|
|
<span className="tabular-nums">{formatAge(mostRecent)}</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|