import { Head, Link } from '@inertiajs/react'; import { Languages, Search } from 'lucide-react'; import { useMemo, useState } from 'react'; import { AdminSurface, AdminSurfaceBar } from '@/components/admin-surface'; import { Input } from '@/components/ui/input'; import AdminLayout from '@/layouts/admin-layout'; import { useT } from '@/lib/i18n'; import { index as adminTranslationsIndex, show as adminTranslationsShow, } from '@/routes/admin/translations'; type LocaleRow = { code: string; native: string; flag: string; rtl: boolean; translated: number; total: number; missing: number; overrides: number; is_source: boolean; }; type Props = { locales: LocaleRow[]; total_keys: number; }; export default function AdminTranslationsIndex({ locales, total_keys }: Props) { const { t } = useT(); const [query, setQuery] = useState(''); const filtered = useMemo(() => { const term = query.trim().toLowerCase(); if (term === '') { return locales; } return locales.filter( (l) => l.code.toLowerCase().includes(term) || l.native.toLowerCase().includes(term), ); }, [locales, query]); return ( {t(':count languages', { count: locales.length.toLocaleString(), })} {t(':count keys', { count: total_keys.toLocaleString(), })}
setQuery(e.target.value)} placeholder={t('Search languages…')} className="ps-8" />

{t( 'Edit the value of any string in any language, or fill in a missing one. Changes are saved as overrides on top of the shipped files and go live immediately — the original files are never touched.', )}

{filtered.map((l) => { const pct = l.total === 0 ? 100 : Math.round( (l.translated / l.total) * 100, ); return (
{l.flag} {l.native} {l.code} {l.is_source && ( {t('Source')} )}
{t( ':done / :total translated', { done: l.translated.toLocaleString(), total: l.total.toLocaleString(), }, )} {pct}%
{l.missing > 0 && ( {t(':count missing', { count: l.missing.toLocaleString(), })} )} {l.overrides > 0 && ( {t(':count edited', { count: l.overrides.toLocaleString(), })} )}
); })}
{filtered.length === 0 && (

{t('No languages match your search.')}

)}
); }