ken/coldemailer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact recoreds done

Browse Source
This commit is contained in:
Ken Yasue
2025-03-25 08:12:33 +01:00
parent c9751b058f
commit 42f2a30610
5 changed files with 66 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
import { useState, useEffect, FormEvent, ChangeEvent } from 'react'; import { useState, useEffect, FormEvent, ChangeEvent } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import { CONTACT_TYPES } from '@/lib/constants';
interface ContactRecord { interface ContactRecord {
id: string; id: string;
@ -125,7 +126,7 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
return ( return (
<div> <div>
<div className="flex justify-between items-center mb-6"> <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 <Link
href={`/admin/customers/detail/${customerId}`} href={`/admin/customers/detail/${customerId}`}
className="text-indigo-600 hover:text-indigo-900" className="text-indigo-600 hover:text-indigo-900"
@ -135,33 +136,33 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
</div> </div>
{error && ( {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">
<div className="flex-shrink-0"> <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" /> <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> </svg>
</div> </div>
<div className="ml-3"> <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>
</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"> <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 Customer
</label> </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} {customerName}
</div> </div>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <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 Contact Type
</label> </label>
<select <select
@ -169,19 +170,20 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
name="contactType" name="contactType"
value={formData.contactType} value={formData.contactType}
onChange={handleChange} 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 required
> >
<option value="">Select a contact type</option> <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> </select>
</div> </div>
<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 Notes
</label> </label>
<textarea <textarea
@ -190,7 +192,7 @@ export default function EditContactRecord({ id }: EditContactRecordProps) {
rows={4} rows={4}
value={formData.notes} value={formData.notes}
onChange={handleChange} 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" placeholder="Enter notes about the contact"
></textarea> ></textarea>
</div> </div>

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

@ -3,6 +3,7 @@
import { useState, useEffect, FormEvent } from 'react'; import { useState, useEffect, FormEvent } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import { CONTACT_TYPES } from '@/lib/constants';
interface Customer { interface Customer {
id: string; id: string;
@ -24,11 +25,13 @@ export default function ContactRecordsList() {
// Get filter values from URL params // Get filter values from URL params
const initialCustomerId = searchParams.get('customerId') || ''; const initialCustomerId = searchParams.get('customerId') || '';
const initialContactType = searchParams.get('contactType') || '';
const initialDateFrom = searchParams.get('dateFrom') || ''; const initialDateFrom = searchParams.get('dateFrom') || '';
const initialDateTo = searchParams.get('dateTo') || ''; const initialDateTo = searchParams.get('dateTo') || '';
// State for filters // State for filters
const [customerId, setCustomerId] = useState(initialCustomerId); const [customerId, setCustomerId] = useState(initialCustomerId);
const [contactType, setContactType] = useState(initialContactType);
const [dateFrom, setDateFrom] = useState(initialDateFrom); const [dateFrom, setDateFrom] = useState(initialDateFrom);
const [dateTo, setDateTo] = useState(initialDateTo); const [dateTo, setDateTo] = useState(initialDateTo);
@ -67,6 +70,7 @@ export default function ContactRecordsList() {
// Build query string with filters // Build query string with filters
const params = new URLSearchParams(); const params = new URLSearchParams();
if (customerId) params.append('customerId', customerId); if (customerId) params.append('customerId', customerId);
if (contactType) params.append('contactType', contactType);
if (dateFrom) params.append('dateFrom', dateFrom); if (dateFrom) params.append('dateFrom', dateFrom);
if (dateTo) params.append('dateTo', dateTo); if (dateTo) params.append('dateTo', dateTo);
@ -87,10 +91,10 @@ export default function ContactRecordsList() {
}; };
// Only fetch if we have URL parameters or if this is the initial load // Only fetch if we have URL parameters or if this is the initial load
if (initialCustomerId || initialDateFrom || initialDateTo || isLoading) { if (initialCustomerId || initialContactType || initialDateFrom || initialDateTo || isLoading) {
fetchContactRecords(); fetchContactRecords();
} }
}, [initialCustomerId, initialDateFrom, initialDateTo]); }, [initialCustomerId, initialContactType, initialDateFrom, initialDateTo]);
// Handle filter form submission // Handle filter form submission
const handleFilterSubmit = (e: FormEvent) => { const handleFilterSubmit = (e: FormEvent) => {
@ -99,6 +103,7 @@ export default function ContactRecordsList() {
// Build query string with filters // Build query string with filters
const params = new URLSearchParams(); const params = new URLSearchParams();
if (customerId) params.append('customerId', customerId); if (customerId) params.append('customerId', customerId);
if (contactType) params.append('contactType', contactType);
if (dateFrom) params.append('dateFrom', dateFrom); if (dateFrom) params.append('dateFrom', dateFrom);
if (dateTo) params.append('dateTo', dateTo); if (dateTo) params.append('dateTo', dateTo);
@ -109,6 +114,7 @@ export default function ContactRecordsList() {
// Handle filter reset // Handle filter reset
const handleReset = () => { const handleReset = () => {
setCustomerId(''); setCustomerId('');
setContactType('');
setDateFrom(''); setDateFrom('');
setDateTo(''); setDateTo('');
router.push('/admin/contact-records'); router.push('/admin/contact-records');
@ -127,7 +133,7 @@ export default function ContactRecordsList() {
</div> </div>
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<form onSubmit={handleFilterSubmit} className="space-y-4"> <form onSubmit={handleFilterSubmit} className="space-y-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3"> <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 Customer
@ -147,6 +153,25 @@ export default function ContactRecordsList() {
))} ))}
</select> </select>
</div> </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> <div>
<label htmlFor="dateFrom" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> <label htmlFor="dateFrom" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Date From Date From

10
src/app/(admin)/admin/customers/components/NewContactRecordForm.tsx
View File

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

6
src/app/api/contact-records/route.ts
View File

@ -10,6 +10,7 @@ export async function GET(request: NextRequest) {
// Get query parameters // Get query parameters
const url = new URL(request.url); const url = new URL(request.url);
const customerId = url.searchParams.get('customerId'); const customerId = url.searchParams.get('customerId');
const contactType = url.searchParams.get('contactType');
const dateFrom = url.searchParams.get('dateFrom'); const dateFrom = url.searchParams.get('dateFrom');
const dateTo = url.searchParams.get('dateTo'); const dateTo = url.searchParams.get('dateTo');
@ -27,6 +28,11 @@ export async function GET(request: NextRequest) {
whereClause.customerId = customerId; whereClause.customerId = customerId;
} }
// Filter by contact type if provided
if (contactType) {
whereClause.contactType = contactType;
}
// Filter by date range if provided // Filter by date range if provided
if (dateFrom || dateTo) { if (dateFrom || dateTo) {
whereClause.createdAt = {}; whereClause.createdAt = {};

9
src/lib/constants.ts Normal file
View File

@ -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' }
];