contact recoed list
This commit is contained in:
Ken Yasue
292
src/app/(admin)/admin/contact-records/page.tsx
Normal file
292
src/app/(admin)/admin/contact-records/page.tsx
Normal file
@ -0,0 +1,292 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, FormEvent } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
|
||||
interface Customer {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ContactRecord {
|
||||
id: string;
|
||||
customerId: string;
|
||||
contactType: string;
|
||||
notes: string;
|
||||
createdAt: string;
|
||||
customer: Customer;
|
||||
}
|
||||
|
||||
export default function ContactRecordsList() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Get filter values from URL params
|
||||
const initialCustomerId = searchParams.get('customerId') || '';
|
||||
const initialDateFrom = searchParams.get('dateFrom') || '';
|
||||
const initialDateTo = searchParams.get('dateTo') || '';
|
||||
|
||||
// State for filters
|
||||
const [customerId, setCustomerId] = useState(initialCustomerId);
|
||||
const [dateFrom, setDateFrom] = useState(initialDateFrom);
|
||||
const [dateTo, setDateTo] = useState(initialDateTo);
|
||||
|
||||
// State for data
|
||||
const [contactRecords, setContactRecords] = useState<ContactRecord[]>([]);
|
||||
const [customers, setCustomers] = useState<Customer[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
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
|
||||
useEffect(() => {
|
||||
const fetchContactRecords = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Build query string with filters
|
||||
const params = new URLSearchParams();
|
||||
if (customerId) params.append('customerId', customerId);
|
||||
if (dateFrom) params.append('dateFrom', dateFrom);
|
||||
if (dateTo) params.append('dateTo', dateTo);
|
||||
|
||||
const response = await fetch(`/api/contact-records?${params.toString()}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch contact records');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setContactRecords(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching contact records:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Only fetch if we have URL parameters or if this is the initial load
|
||||
if (initialCustomerId || initialDateFrom || initialDateTo || isLoading) {
|
||||
fetchContactRecords();
|
||||
}
|
||||
}, [initialCustomerId, initialDateFrom, initialDateTo]);
|
||||
|
||||
// Handle filter form submission
|
||||
const handleFilterSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Build query string with filters
|
||||
const params = new URLSearchParams();
|
||||
if (customerId) params.append('customerId', customerId);
|
||||
if (dateFrom) params.append('dateFrom', dateFrom);
|
||||
if (dateTo) params.append('dateTo', dateTo);
|
||||
|
||||
// Update URL with filters
|
||||
router.push(`/admin/contact-records?${params.toString()}`);
|
||||
};
|
||||
|
||||
// Handle filter reset
|
||||
const handleReset = () => {
|
||||
setCustomerId('');
|
||||
setDateFrom('');
|
||||
setDateTo('');
|
||||
router.push('/admin/contact-records');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Contact Records</h1>
|
||||
</div>
|
||||
|
||||
{/* Filter Form */}
|
||||
<div className="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg mb-8">
|
||||
<div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Filter Contact Records</h3>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<form onSubmit={handleFilterSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<label htmlFor="customerId" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Customer
|
||||
</label>
|
||||
<select
|
||||
id="customerId"
|
||||
name="customerId"
|
||||
value={customerId}
|
||||
onChange={(e) => setCustomerId(e.target.value)}
|
||||
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>
|
||||
<label htmlFor="dateFrom" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Date From
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="dateFrom"
|
||||
name="dateFrom"
|
||||
value={dateFrom}
|
||||
onChange={(e) => setDateFrom(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="dateTo" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Date To
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="dateTo"
|
||||
name="dateTo"
|
||||
value={dateTo}
|
||||
onChange={(e) => setDateTo(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReset}
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border-l-4 border-red-400 p-4 mb-4 dark:bg-red-900/20 dark:border-red-500">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="h-5 w-5 text-red-400 dark:text-red-300" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-500 dark:text-gray-400">Loading contact records...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Contact Records Table */}
|
||||
{contactRecords.length === 0 ? (
|
||||
<div className="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6 text-center">
|
||||
<p className="text-gray-500 dark:text-gray-400">No contact records found.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Customer
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Contact Type
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Notes
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Date
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{contactRecords.map((record) => (
|
||||
<tr key={record.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<Link
|
||||
href={`/admin/customers/detail/${record.customerId}`}
|
||||
className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
|
||||
>
|
||||
{record.customer?.name || 'Unknown Customer'}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||
{record.contactType}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm text-gray-900 dark:text-gray-200 max-w-xs truncate">
|
||||
{record.notes || <span className="text-gray-400 dark:text-gray-500 italic">No notes</span>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{new Date(record.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<Link
|
||||
href={`/admin/contact-records/edit/${record.id}`}
|
||||
className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -106,6 +106,12 @@ export default function RootLayout({
|
||||
>
|
||||
Customers
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/contact-records"
|
||||
className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
||||
>
|
||||
Contact Records
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
|
||||
@ -10,6 +10,8 @@ export async function GET(request: NextRequest) {
|
||||
// Get query parameters
|
||||
const url = new URL(request.url);
|
||||
const customerId = url.searchParams.get('customerId');
|
||||
const dateFrom = url.searchParams.get('dateFrom');
|
||||
const dateTo = url.searchParams.get('dateTo');
|
||||
|
||||
// Build query
|
||||
const queryOptions: any = {
|
||||
@ -17,9 +19,33 @@ export async function GET(request: NextRequest) {
|
||||
relations: ['customer']
|
||||
};
|
||||
|
||||
// Build where clause
|
||||
let whereClause: any = {};
|
||||
|
||||
// Filter by customer if customerId is provided
|
||||
if (customerId) {
|
||||
queryOptions.where = { customerId };
|
||||
whereClause.customerId = customerId;
|
||||
}
|
||||
|
||||
// Filter by date range if provided
|
||||
if (dateFrom || dateTo) {
|
||||
whereClause.createdAt = {};
|
||||
|
||||
if (dateFrom) {
|
||||
whereClause.createdAt.gte = new Date(dateFrom);
|
||||
}
|
||||
|
||||
if (dateTo) {
|
||||
// Set the date to the end of the day for inclusive filtering
|
||||
const endDate = new Date(dateTo);
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
whereClause.createdAt.lte = endDate;
|
||||
}
|
||||
}
|
||||
|
||||
// Add where clause to query options if not empty
|
||||
if (Object.keys(whereClause).length > 0) {
|
||||
queryOptions.where = whereClause;
|
||||
}
|
||||
|
||||
const contactRecords = await contactRecordRepository.find(queryOptions);
|
||||
|
||||
Reference in New Issue
Block a user