import { useState, useEffect, useCallback } from "react"; import { Button } from "@/Components/ui/button"; import { Input } from "@/Components/ui/input"; import { Plus, Search, X } from "lucide-react"; import VendorTable from "@/Components/Vendor/VendorTable"; import VendorDialog from "@/Components/Vendor/VendorDialog"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, router } from "@inertiajs/react"; import { debounce } from "lodash"; export interface Vendor { id: number; code: string; name: string; short_name?: string; tax_id?: string; owner?: string; contact_name?: string; tel?: string; phone?: string; email?: string; address?: string; remark?: string; created_at: string; updated_at: string; } interface PageProps { vendors: { data: Vendor[]; links: any[]; meta: any; }; filters: { search?: string; sort_field?: string; sort_direction?: string; }; } export default function VendorManagement({ vendors, filters }: PageProps) { const [searchTerm, setSearchTerm] = useState(filters.search || ""); const [sortField, setSortField] = useState(filters.sort_field || null); const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || null); const [isDialogOpen, setIsDialogOpen] = useState(false); const [editingVendor, setEditingVendor] = useState(null); // Sync state with props useEffect(() => { setSearchTerm(filters.search || ""); setSortField(filters.sort_field || null); setSortDirection(filters.sort_direction as "asc" | "desc" || null); }, [filters]); // Debounced Search const debouncedSearch = useCallback( debounce((term: string) => { router.get( route("vendors.index"), { search: term }, { preserveState: true, replace: true, preserveScroll: true } ); }, 500), [] ); const handleSearchChange = (term: string) => { setSearchTerm(term); debouncedSearch(term); }; const handleClearSearch = () => { setSearchTerm(""); router.get( route("vendors.index"), { search: "" }, { preserveState: true, replace: true, preserveScroll: true } ); }; const handleSort = (field: string) => { let newField: string | null = field; let newDirection: "asc" | "desc" | null = "asc"; if (sortField === field) { if (sortDirection === "asc") { newDirection = "desc"; } else { newDirection = null; newField = null; } } setSortField(newField); setSortDirection(newDirection); router.get( route("vendors.index"), { search: searchTerm, sort_field: newField, sort_direction: newDirection }, { preserveState: true, replace: true, preserveScroll: true } ); }; const handleAddVendor = () => { setEditingVendor(null); setIsDialogOpen(true); }; const handleEditVendor = (vendor: Vendor) => { setEditingVendor(vendor); setIsDialogOpen(true); }; const handleViewVendor = (vendor: Vendor) => { router.get(route("vendors.show", vendor.id)); }; const handleDeleteVendor = (id: number) => { router.delete(route('vendors.destroy', id)); }; return (

{/* Header */}

廠商資料管理

管理 ERP 系統供應商與聯絡資訊

{/* Toolbar */}

{/* Search */}

handleSearchChange(e.target.value)} className="pl-10 pr-10" /> {searchTerm && ( )}

{/* Add Button */}

{/* Vendor Table */}

); }