import { Head, router } from '@inertiajs/react' import { useState } from 'react' import { toast } from 'sonner' import { GwinAppLayout } from '@/layouts/gwin-app-layout' import { ServerDataTable, type ServerColumnDef, type ServerDataTableParams, type ServerPaginatedData } from '@ui/components/data-table/server-data-table' import { Button } from '@ui/components/ui/button' import { Badge } from '@ui/components/ui/badge' import { Plus, Pencil, ToggleLeft, ToggleRight } from 'lucide-react' import { ResizableDrawer } from '@/components/common/ResizableDrawer' import { DeleteConfirmationDialog } from '@/components/common/DeleteConfirmationDialog' import { ToggleStatusDialog } from '@/components/common/ToggleStatusDialog' import { WarehouseTabs } from '@/components/master-data/WarehouseTabs' import { AssetGroupForm } from './components/AssetGroupForm' interface AssetGroup { id: number code: string name: string description: string | null is_active: boolean } interface Props { records: ServerPaginatedData filters: Record } const BASE = '/master-data/asset-groups' export default function AssetGroupIndex({ records, filters }: Props) { const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [selectedItem, setSelectedItem] = useState() const [isDeleteOpen, setIsDeleteOpen] = useState(false) const [itemToDelete, setItemToDelete] = useState() const [isToggleOpen, setIsToggleOpen] = useState(false) const [itemToToggle, setItemToToggle] = useState() const [isDeleting, setIsDeleting] = useState(false) const [isToggling, setIsToggling] = useState(false) const params: ServerDataTableParams = { page: records.current_page, per_page: records.per_page, search: filters.search, } const columns: ServerColumnDef[] = [ { key: 'code', label: 'Kode', className: 'w-36 font-mono text-xs' }, { key: 'name', label: 'Nama Group Aset' }, { key: 'description', label: 'Deskripsi', render: (row) => row.description || -, }, { key: 'is_active', label: 'Status', render: (row) => row.is_active ? Aktif : Nonaktif, }, { key: 'actions', label: '', className: 'w-28 text-right', render: (row) => (

), }, ] return (

Master Data Warehouse

Kelola group aset untuk pengelompokan inventaris

{([ [null, 'Semua'], ['1', 'Aktif'], ['0', 'Nonaktif'], ] as const).map(([v, label]) => ( ))}

router.get(BASE, { ...filters, ...next }, { preserveState: true, replace: true })} searchPlaceholder='Cari kode / nama group aset...' />

setIsDrawerOpen(false)} /> { if (!itemToDelete) return router.delete(`${BASE}/${itemToDelete.id}`, { onStart: () => setIsDeleting(true), onSuccess: () => { toast.success('Group aset berhasil dihapus.'); setIsDeleteOpen(false); setItemToDelete(undefined) }, onFinish: () => setIsDeleting(false), }) }} itemName={itemToDelete?.name} isLoading={isDeleting} /> { if (!itemToToggle) return router.patch(`${BASE}/${itemToToggle.id}/toggle-status`, {}, { onStart: () => setIsToggling(true), onSuccess: () => { toast.success('Status group aset diubah.'); setIsToggleOpen(false); setItemToToggle(undefined) }, onFinish: () => setIsToggling(false), }) }} itemName={itemToToggle?.name} isActive={itemToToggle?.is_active} isLoading={isToggling} /> ) }