change customer filter to text box from select box

This commit is contained in:
Ken Yasue
2025-03-25 13:43:00 +01:00
parent cba6c9ba67
commit b512aef63d

View File

@ -54,7 +54,6 @@ export default function ContactRecordsList() {
// State for data // State for data
const [contactRecords, setContactRecords] = useState<ContactRecord[]>([]); const [contactRecords, setContactRecords] = useState<ContactRecord[]>([]);
const [customers, setCustomers] = useState<Customer[]>([]);
const [pagination, setPagination] = useState<PaginationInfo>({ const [pagination, setPagination] = useState<PaginationInfo>({
page: initialPage, page: initialPage,
pageSize: initialPageSize, pageSize: initialPageSize,
@ -64,25 +63,6 @@ export default function ContactRecordsList() {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Fetch customers for the filter dropdown
useEffect(() => {
const fetchCustomers = async () => {
try {
const response = await fetch('/api/customers');
if (!response.ok) {
throw new Error('Failed to fetch customers');
}
const data = await response.json();
setCustomers(data);
} catch (err) {
console.error('Error fetching customers:', err);
setError(err instanceof Error ? err.message : 'An error occurred');
}
};
fetchCustomers();
}, []);
// Fetch contact records with filters and pagination // Fetch contact records with filters and pagination
useEffect(() => { useEffect(() => {
const fetchContactRecords = async () => { const fetchContactRecords = async () => {
@ -173,22 +153,17 @@ export default function ContactRecordsList() {
<div className="grid grid-cols-1 gap-4 sm:grid-cols-4"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
<div> <div>
<label htmlFor="customerId" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> <label htmlFor="customerId" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Customer Search Customer
</label> </label>
<select <input
type="text"
id="customerId" id="customerId"
name="customerId" name="customerId"
value={customerId} value={customerId}
onChange={(e) => setCustomerId(e.target.value)} onChange={(e) => setCustomerId(e.target.value)}
placeholder="Search customer..."
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200" className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
> />
<option value="">All Customers</option>
{customers.map((customer) => (
<option key={customer.id} value={customer.id}>
{customer.name}
</option>
))}
</select>
</div> </div>
<div> <div>
<label htmlFor="contactType" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> <label htmlFor="contactType" className="block text-sm font-medium text-gray-700 dark:text-gray-300">