import { Head, router, useForm } from '@inertiajs/react'; import { Plus, RefreshCw, Trash2, X } from 'lucide-react'; import { useEffect, useMemo, useState } from 'react'; import { useConfirm } from '@/components/confirm-dialog-provider'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useBoardLiveSync } from '@/hooks/use-board-live-sync'; import AdminLayout from '@/layouts/admin-layout'; import { useT } from '@/lib/i18n'; import type { BreadcrumbItem } from '@/types'; type Status = 'backlog' | 'doing' | 'review' | 'done'; type Task = { id: string; number: number; title: string; body: string | null; status: Status; labels: string[]; position: number; created_at: string; updated_at: string; /** * Optional release version this card shipped in (e.g. "v1.1.0"). * Stamped via `board:done --version=…` or `board:stamp-version`. */ version?: string | null; }; type Props = { tasks: Task[]; statuses: Status[]; }; const statusTone: Record = { backlog: 'border-slate-300 bg-slate-50 dark:bg-slate-900/40', doing: 'border-amber-300 bg-amber-50 dark:bg-amber-900/20', review: 'border-sky-300 bg-sky-50 dark:bg-sky-900/20', done: 'border-emerald-300 bg-emerald-50 dark:bg-emerald-900/20', }; export default function AdminBoardPage({ tasks, statuses }: Props) { const { t } = useT(); const [editing, setEditing] = useState(null); const [creating, setCreating] = useState(null); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Admin'), href: '/admin' }, { title: t('Board'), href: '/admin/board' }, ]; const statusLabels: Record = { backlog: t('Backlog'), doing: t('In progress'), review: t('Review'), done: t('Done'), }; // Real-time updates via Inertia partial reload polling. The hook // pauses while a dialog is open so the form data the user is // filling in isn't replaced under their cursor by an incoming poll. const { lastSyncedAt, isSyncing } = useBoardLiveSync({ enabled: editing === null && creating === null, }); const grouped = useMemo(() => { const map: Record = { backlog: [], doing: [], review: [], done: [], }; for (const task of tasks) { map[task.status]?.push(task); } return map; }, [tasks]); return (

{t('Internal board')}

{t( 'Backlog · Doing · Review · Done. Stored as a JSON file at storage/app/private/kanban-tasks.json — survives migrate:fresh. Super-admins only.', )}

{statuses.map((status) => (
{statusLabels[status]} {grouped[status]?.length ?? 0}
{(grouped[status] ?? []).length === 0 && (

{t('Nothing here yet.')}

)} {(grouped[status] ?? []).map((task) => ( setEditing(task)} >
#{task.number}

{task.title}

{task.version && ( {task.version} )}
{task.body && (

{task.body}

)} {task.labels.length > 0 && (
{task.labels.map( (label) => ( {label} ), )}
)} ))}
))}
{creating !== null && ( setCreating(null)} /> )} {editing !== null && ( setEditing(null)} /> )} ); } /** * Tiny "Live · last synced Xs ago" pill in the header. Watches a 1s * tick so the relative-time string stays accurate without re-rendering * the whole board. The interval lives in the same component as the * label it drives, so unmounting the indicator cleans up the timer. */ function LiveIndicator({ lastSyncedAt, isSyncing, paused, }: { lastSyncedAt: Date | null; isSyncing: boolean; paused: boolean; }) { const { t } = useT(); const [, forceTick] = useState(0); useEffect(() => { const id = window.setInterval(() => forceTick((n) => n + 1), 1000); return () => window.clearInterval(id); }, []); const label = (() => { if (paused) { return t('Paused'); } if (isSyncing) { return t('Syncing…'); } if (!lastSyncedAt) { return t('Live'); } const seconds = Math.floor( (Date.now() - lastSyncedAt.getTime()) / 1000, ); if (seconds < 5) { return t('Live · just now'); } if (seconds < 60) { return t('Live · :seconds s ago', { seconds }); } const minutes = Math.floor(seconds / 60); return t('Live · :minutes m ago', { minutes }); })(); const tone = paused ? 'border-slate-300 bg-slate-50 text-slate-600' : isSyncing ? 'border-amber-300 bg-amber-50 text-amber-700' : 'border-emerald-300 bg-emerald-50 text-emerald-700'; return ( {label} ); } function CreateTaskDialog({ initialStatus, statuses, statusLabels, onClose, }: { initialStatus: Status; statuses: Status[]; statusLabels: Record; onClose: () => void; }) { const { t } = useT(); const form = useForm({ title: '', body: '', status: initialStatus as Status, labels: '', }); const submit = (e: React.FormEvent) => { e.preventDefault(); form.transform((data) => ({ ...data, labels: (data.labels as string) .split(',') .map((s) => s.trim()) .filter(Boolean), })); form.post('/admin/board', { preserveScroll: true, onSuccess: () => onClose(), }); }; return ( (!open ? onClose() : undefined)}> {t('New task')} {t( 'Cards persist on the AppSetting singleton. Pick a status; you can move it later from the card detail dialog.', )}
form.setData('title', e.target.value) } placeholder={t('Add Paddle gateway')} required autoFocus /> {form.errors.title && (

{form.errors.title}

)}