contact recoreds done

doc/prompts/10. Contact Record list

@@ -0,0 +1,5 @@
+I want add list page for Contact Recored.
+- Add link to contact recored list page to admin console headder
+- Users can see customer name, contact type, and notes
+- Users can click on customer name then opens the customer detail
+- Users can filter by customer, date ( from - to )

src/app/(admin)/admin/contact-records/components/EditContactRecord.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, FormEvent, ChangeEvent } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
+import { CONTACT_TYPES } from '@/lib/constants';
 
 interface ContactRecord {
     id: string;
@@ -125,7 +126,7 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
     return (
         <div>
             <div className="flex justify-between items-center mb-6">
-                <h1 className="text-2xl font-semibold text-gray-900">Edit Contact Record</h1>
+                <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">Edit Contact Record</h1>
                 <Link
                     href={`/admin/customers/detail/${customerId}`}
                     className="text-indigo-600 hover:text-indigo-900"
@@ -135,33 +136,33 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
             </div>
 
             {error && (
-                <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
+                <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-6 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" viewBox="0 0 20 20" fill="currentColor">
+                            <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">{error}</p>
+                            <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
                         </div>
                     </div>
                 </div>
             )}
 
-            <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 dark:bg-gray-800">
                 <div className="mb-6">
-                    <label className="block text-gray-700 text-sm font-bold mb-2">
+                    <label className="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
                         Customer
                     </label>
-                    <div className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight">
+                    <div className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 leading-tight">
                         {customerName}
                     </div>
                 </div>
 
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div>
-                        <label htmlFor="contactType" className="block text-gray-700 text-sm font-bold mb-2">
+                        <label htmlFor="contactType" className="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
                             Contact Type
                         </label>
                         <select
@@ -169,19 +170,20 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
                             name="contactType"
                             value={formData.contactType}
                             onChange={handleChange}
-                            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"
+                            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-700 dark:border-gray-600 dark:text-gray-200"
                             required
                         >
                             <option value="">Select a contact type</option>
-                            <option value="Email">Email</option>
+                            {CONTACT_TYPES.map((type) => (
-                            <option value="Phone">Phone</option>
+                                <option key={type.value} value={type.value}>
-                            <option value="Meeting">Meeting</option>
+                                    {type.label}
-                            <option value="Other">Other</option>
+                                </option>
+                            ))}
                         </select>
                     </div>
 
                     <div>
-                        <label htmlFor="notes" className="block text-gray-700 text-sm font-bold mb-2">
+                        <label htmlFor="notes" className="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
                             Notes
                         </label>
                         <textarea
@@ -190,7 +192,7 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
                             rows={4}
                             value={formData.notes}
                             onChange={handleChange}
-                            className="mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
+                            className="mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
                             placeholder="Enter notes about the contact"
                         ></textarea>
                     </div>

src/app/(admin)/admin/contact-records/page.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useState, useEffect, FormEvent } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { CONTACT_TYPES } from '@/lib/constants';
+
+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 initialContactType = searchParams.get('contactType') || '';
+    const initialDateFrom = searchParams.get('dateFrom') || '';
+    const initialDateTo = searchParams.get('dateTo') || '';
+
+    // State for filters
+    const [customerId, setCustomerId] = useState(initialCustomerId);
+    const [contactType, setContactType] = useState(initialContactType);
+    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 (contactType) params.append('contactType', contactType);
+                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 || initialContactType || initialDateFrom || initialDateTo || isLoading) {
+            fetchContactRecords();
+        }
+    }, [initialCustomerId, initialContactType, 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 (contactType) params.append('contactType', contactType);
+        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('');
+        setContactType('');
+        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-4">
+                            <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="contactType" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    Contact Type
+                                </label>
+                                <select
+                                    id="contactType"
+                                    name="contactType"
+                                    value={contactType}
+                                    onChange={(e) => setContactType(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 Contact Types</option>
+                                    {CONTACT_TYPES.map((type) => (
+                                        <option key={type.value} value={type.value}>
+                                            {type.label}
+                                        </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>
+    );
+}

src/app/(admin)/admin/customers/components/NewContactRecordForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState, FormEvent, ChangeEvent } from 'react';
 import { useRouter } from 'next/navigation';
+import { CONTACT_TYPES } from '@/lib/constants';
 
 interface NewContactRecordFormProps {
     customerId: string;
@@ -119,10 +120,11 @@ export default function NewContactRecordForm({ customerId }: NewContactRecordFor
                         required
                     >
                         <option value="">Select a contact type</option>
-                        <option value="Email">Email</option>
+                        {CONTACT_TYPES.map((type) => (
-                        <option value="Phone">Phone</option>
+                            <option key={type.value} value={type.value}>
-                        <option value="Meeting">Meeting</option>
+                                {type.label}
-                        <option value="Other">Other</option>
+                            </option>
+                        ))}
                     </select>
                 </div>
 

src/app/(admin)/admin/layout.tsx

@@ -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">

src/app/api/contact-records/route.ts

@@ -10,6 +10,9 @@ export async function GET(request: NextRequest) {
         // Get query parameters
         const url = new URL(request.url);
         const customerId = url.searchParams.get('customerId');
+        const contactType = url.searchParams.get('contactType');
+        const dateFrom = url.searchParams.get('dateFrom');
+        const dateTo = url.searchParams.get('dateTo');
 
         // Build query
         const queryOptions: any = {
@@ -17,9 +20,38 @@ 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 contact type if provided
+        if (contactType) {
+            whereClause.contactType = contactType;
+        }
+
+        // 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);

src/lib/constants.ts

@@ -0,0 +1,9 @@
+// Contact record types
+export const CONTACT_TYPES = [
+    { value: 'Email', label: 'Email' },
+    { value: 'EmailSent', label: 'Email sent' },
+    { value: 'EmailReceived', label: 'Email received' },
+    { value: 'Phone', label: 'Phone' },
+    { value: 'Meeting', label: 'Meeting' },
+    { value: 'Other', label: 'Other' }
+];