import { useState, useMemo } from 'react'; import { router, usePage, Head, Link } from '@inertiajs/react'; import { Search, Plus, Bell } from 'lucide-react'; import { ContractsTable, Contract } from '../components/contract-table'; import AIChatPopup from '../components/chat-popup'; export default function ContractList({ contracts }: any) { const { props } = usePage(); const contractList = contracts.data; const auth = props.auth as any; const [searchTerm, setSearchTerm] = useState(''); const [filterType, setFilterType] = useState('all'); const [filterSigned, setFilterSigned] = useState('all'); const [sortBy, setSortBy] = useState('date'); const handleNavigateToUpload = () => { router.get('/contract-form'); }; const handleDeleteContract = (contractId: string | number) => { if (confirm('Yakin ingin menghapus kontrak ini?')) { router.delete(`/contracts/${contractId}`, { preserveScroll: true, }); } }; const docTypes = useMemo(() => { const types = new Set( contractList.map((c: any) => (c.id ? 'Operational' : '')), ); return Array.from(types).filter(Boolean); }, [contractList]); const filteredContracts = useMemo(() => { let filtered = [...contractList]; if (searchTerm) { const term = searchTerm.toLowerCase(); filtered = filtered.filter( (c: any) => c.docName?.toLowerCase().includes(term) || c.docNumber?.toLowerCase().includes(term) || c.counterParty?.toLowerCase().includes(term) || c.internalParty?.toLowerCase().includes(term), ); } if (filterSigned !== 'all') { filtered = filtered.filter((c: any) => { const isSignedBool = c.isSigned === true || c.isSigned === 1 || c.isSigned === '1' || c.isSigned === 'true'; return filterSigned === 'signed' ? isSignedBool : !isSignedBool; }); } filtered.sort((a: any, b: any) => { if (sortBy === 'date') { return ( new Date(b.created_at).getTime() - new Date(a.created_at).getTime() ); } else { return (Number(b.value) || 0) - (Number(a.value) || 0); } }); return filtered; }, [contractList, searchTerm, filterSigned, sortBy]); return ( <>
{/* HEADER SEARCH BAR */}
setSearchTerm(e.target.value) } className="w-full rounded-lg border border-slate-800 bg-slate-950 py-2 pr-4 pl-10 text-sm text-white placeholder-slate-500 focus:border-blue-500 focus:outline-none" />
{auth?.user?.name ? auth.user.name[0].toUpperCase() : 'D'}
{/* FILTER CONTROLS & TABLE BOX */}

Contracts Table

Manage, filter, and track all your operational contract details in one secure place.

{/* Tampilan Wrapper Box Filter */}

Showing {filteredContracts.length} of{' '} {contracts.total || contractList.length} contracts

{/* POP-UP CHAT AI */} 0 ? contracts[0].id : null} activeContractName={contracts && contracts.length > 0 ? contracts[0].docName : ''} />
); }