import { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/AppLayout'; import { ClipboardCheck, Search, Filter } from 'lucide-react'; import { cn, formatDate } from '@/utils'; const STATUS_META = { draft: { cls: 'badge-slate', label: 'Draft' }, in_progress: { cls: 'badge-blue', label: 'Berjalan' }, completed: { cls: 'badge-green', label: 'Selesai' }, cancelled: { cls: 'badge-red', label: 'Dibatalkan' }, }; export default function OpnameIndex({ opnames, filters }) { const [search, setSearch] = useState(filters?.search ?? ''); const [status, setStatus] = useState(filters?.status ?? ''); const applyFilters = () => router.get( route('inventory.opname.index'), { search: search || undefined, status: status || undefined }, { preserveState: true, replace: true } ); return (

Stock Opname

Sesi perhitungan fisik stok barang

{/* Filters */}
setSearch(e.target.value)} onKeyDown={e => e.key === 'Enter' && applyFilters()} className="form-input pl-9" placeholder="Cari nomor atau judul opname…" />
{/* Table */}
{opnames?.data?.length > 0 ? opnames.data.map(op => { const sm = STATUS_META[op.status] ?? { cls: 'badge-slate', label: op.status }; return ( ); }) : ( )}
Nomor Judul Lokasi Tanggal Item Status
{op.opname_number}

{op.title}

{op.description &&

{op.description}

} 		{op.location?.name ?? 'Semua lokasi'} {formatDate(op.opname_date)} {op.items_count} item {sm.label}

Belum ada stock opname

Sesi opname akan tercatat di sini.
{/* Pagination */} {opnames?.last_page > 1 && (

Menampilkan {opnames.from}–{opnames.to} dari {opnames.total} sesi

{opnames.links.map((link, i) => (
)} ); }