ATMATA/zerp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit contact form

Browse Source
This commit is contained in:
Aya
2026-04-12 16:52:44 +03:00
parent 13f2214df5
commit bda70feb18
4 changed files with 292 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
backend/src/modules/contacts/contacts.routes.ts
View File

@@ -58,7 +58,29 @@ router.put(
authorize('contacts', 'contacts', 'update'),
[
param('id').isUUID(),
body('email').optional().isEmail(),
body('type')
.optional()
.isIn([
'INDIVIDUAL',
'COMPANY',
'HOLDING',
'GOVERNMENT',
'ORGANIZATION',
'EMBASSIES',
'BANK',
'UNIVERSITY',
'SCHOOL',
'UN',
'NGO',
'INSTITUTION',
]),
body('email')
.optional({ values: 'falsy' })
.custom((value) => {
if (value === null || value === undefined || value === '') return true
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
})
.withMessage('Invalid email format'),
validate,
],
contactsController.update

82
backend/src/modules/contacts/contacts.service.ts
View File

@@ -328,46 +328,50 @@ class ContactsService {
// Update contact
const contact = await prisma.contact.update({
where: { id },
data: {
name: data.name,
nameAr: data.nameAr,
email: data.email,
phone: data.phone,
mobile: data.mobile,
website: data.website,
companyName: data.companyName,
companyNameAr: data.companyNameAr,
taxNumber: data.taxNumber,
commercialRegister: data.commercialRegister,
address: data.address,
city: data.city,
country: data.country,
postalCode: data.postalCode,
categories: data.categories ? {
set: data.categories.map(id => ({ id }))
} : undefined,
tags: data.tags,
employeeId: data.employeeId !== undefined ? (data.employeeId || null) : undefined,
source: data.source,
status: data.status,
rating: data.rating,
customFields: data.customFields,
where: { id },
data: {
type: data.type,
name: data.name,
nameAr: data.nameAr,
email: data.email === '' || data.email === undefined ? null : data.email,
phone: data.phone,
mobile: data.mobile,
website: data.website,
companyName: data.companyName,
companyNameAr: data.companyNameAr,
taxNumber: data.taxNumber,
commercialRegister: data.commercialRegister,
address: data.address,
city: data.city,
country: data.country,
postalCode: data.postalCode,
categories: data.categories
? {
set: data.categories.map((id) => ({ id })),
}
: undefined,
tags: data.tags,
employeeId:
data.employeeId !== undefined ? (data.employeeId || null) : undefined,
source: data.source,
status: data.status,
rating: data.rating,
customFields: data.customFields,
},
include: {
categories: true,
parent: true,
employee: {
select: {
id: true,
firstName: true,
lastName: true,
email: true,
uniqueEmployeeId: true,
},
include: {
categories: true,
parent: true,
employee: {
select: {
id: true,
firstName: true,
lastName: true,
email: true,
uniqueEmployeeId: true,
},
},
},
});
},
},
});
// Log audit
await AuditLogger.log({

263
frontend/src/app/contacts/page.tsx
View File

@@ -41,20 +41,17 @@ function flattenCategories(cats: Category[], result: Category[] = []): Category[
}
function ContactsContent() {
// State Management
const [contacts, setContacts] = useState<Contact[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [selectedContacts, setSelectedContacts] = useState<Set<string>>(new Set())
const [showBulkActions, setShowBulkActions] = useState(false)
// Pagination
const [currentPage, setCurrentPage] = useState(1)
const [totalPages, setTotalPages] = useState(1)
const [total, setTotal] = useState(0)
const pageSize = 10
// Filters
const [searchTerm, setSearchTerm] = useState('')
const [selectedType, setSelectedType] = useState('all')
const [selectedStatus, setSelectedStatus] = useState('all')
@@ -64,7 +61,6 @@ function ContactsContent() {
const [categories, setCategories] = useState<Category[]>([])
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false)
// Modals
const [showCreateModal, setShowCreateModal] = useState(false)
const [showEditModal, setShowEditModal] = useState(false)
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
@@ -75,7 +71,6 @@ function ContactsContent() {
const [exporting, setExporting] = useState(false)
const [exportExcludeCompanyEmployees, setExportExcludeCompanyEmployees] = useState(false)
// Fetch Contacts (with debouncing for search)
const fetchContacts = useCallback(async () => {
setLoading(true)
setError(null)
@@ -84,7 +79,7 @@ function ContactsContent() {
page: currentPage,
pageSize,
}
if (searchTerm) filters.search = searchTerm
if (selectedType !== 'all') filters.type = selectedType
if (selectedStatus !== 'all') filters.status = selectedStatus
@@ -104,21 +99,18 @@ function ContactsContent() {
}
}, [currentPage, searchTerm, selectedType, selectedStatus, selectedSource, selectedRating, selectedCategory])
// Debounced search
useEffect(() => {
const debounce = setTimeout(() => {
setCurrentPage(1) // Reset to page 1 on new search
setCurrentPage(1)
fetchContacts()
}, 500)
return () => clearTimeout(debounce)
}, [searchTerm])
// Fetch on filter/page change
useEffect(() => {
fetchContacts()
}, [currentPage, selectedType, selectedStatus, selectedSource, selectedRating, selectedCategory])
// Create Contact
const handleCreate = async (data: CreateContactData) => {
setSubmitting(true)
try {
@@ -136,7 +128,6 @@ function ContactsContent() {
}
}
// Edit Contact
const handleEdit = async (data: UpdateContactData) => {
if (!selectedContact) return
@@ -156,7 +147,6 @@ function ContactsContent() {
}
}
// Delete Contact
const handleDelete = async () => {
if (!selectedContact) return
@@ -175,7 +165,6 @@ function ContactsContent() {
}
}
// Utility Functions
const resetForm = () => {
setSelectedContact(null)
}
@@ -197,6 +186,7 @@ function ContactsContent() {
HOLDING: 'bg-purple-100 text-purple-700',
GOVERNMENT: 'bg-orange-100 text-orange-700',
ORGANIZATION: 'bg-cyan-100 text-cyan-700',
EMBASSIES: 'bg-red-100 text-red-700',
BANK: 'bg-emerald-100 text-emerald-700',
UNIVERSITY: 'bg-indigo-100 text-indigo-700',
SCHOOL: 'bg-yellow-100 text-yellow-700',
@@ -218,6 +208,7 @@ function ContactsContent() {
HOLDING: 'مجموعة',
GOVERNMENT: 'حكومي',
ORGANIZATION: 'منظمات',
EMBASSIES: 'سفارات',
BANK: 'بنوك',
UNIVERSITY: 'جامعات',
SCHOOL: 'مدارس',
@@ -228,14 +219,40 @@ function ContactsContent() {
return labels[type] || type
}
const organizationTypes = new Set([
'COMPANY',
'HOLDING',
'GOVERNMENT',
'ORGANIZATION',
'EMBASSIES',
'BANK',
'UNIVERSITY',
'SCHOOL',
'UN',
'NGO',
'INSTITUTION',
])
const isOrganizationContact = (contact: Contact) => organizationTypes.has(contact.type)
const getListContactName = (contact: Contact) => {
return contact.name || '-'
}
const getListCompanyName = (contact: Contact) => {
return contact.companyName || '-'
}
const getListContactNameAr = (contact: Contact) => {
return (contact as any).nameAr || ''
}
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="flex items-center gap-4">
<Link
href="/dashboard"
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
@@ -303,7 +320,6 @@ function ContactsContent() {
</header>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
<div className="flex items-center justify-between">
@@ -358,12 +374,9 @@ function ContactsContent() {
</div>
</div>
{/* Filters and Search */}
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-200 mb-6">
<div className="space-y-4">
{/* Main Filters Row */}
<div className="flex flex-col md:flex-row gap-4">
{/* Search */}
<div className="flex-1 relative">
<Search className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
<input
@@ -375,7 +388,6 @@ function ContactsContent() {
/>
</div>
{/* Type Filter */}
<select
value={selectedType}
onChange={(e) => setSelectedType(e.target.value)}
@@ -396,7 +408,6 @@ function ContactsContent() {
<option value="INSTITUTION">Institution</option>
</select>
{/* Status Filter */}
<select
value={selectedStatus}
onChange={(e) => setSelectedStatus(e.target.value)}
@@ -407,7 +418,6 @@ function ContactsContent() {
<option value="INACTIVE">Inactive</option>
</select>
{/* Advanced Filters Toggle */}
<button
onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
className={`flex items-center gap-2 px-4 py-3 border rounded-lg transition-colors ${
@@ -421,11 +431,9 @@ function ContactsContent() {
</button>
</div>
{/* Advanced Filters */}
{showAdvancedFilters && (
<div className="pt-4 border-t border-gray-200">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Source Filter */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Source</label>
<select
@@ -445,7 +453,6 @@ function ContactsContent() {
</select>
</div>
{/* Rating Filter */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Rating</label>
<select
@@ -462,7 +469,6 @@ function ContactsContent() {
</select>
</div>
{/* Category Filter */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Category</label>
<select
@@ -477,7 +483,6 @@ function ContactsContent() {
</select>
</div>
{/* Clear Filters */}
<div className="flex items-end">
<button
onClick={() => {
@@ -500,7 +505,6 @@ function ContactsContent() {
</div>
</div>
{/* Contacts Table */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
{loading ? (
<div className="p-12">
@@ -547,9 +551,9 @@ function ContactsContent() {
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Contact</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Contact Info</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Company</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Contact Info</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Contact</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Type</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Status</th>
<th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Actions</th>
@@ -559,105 +563,119 @@ function ContactsContent() {
{contacts.map((contact) => {
const isSelected = selectedContacts.has(contact.id)
return (
<tr key={contact.id} className={`hover:bg-gray-50 transition-colors ${isSelected ? 'bg-blue-50' : ''}`}>
<td className="px-6 py-4 text-center">
<input
type="checkbox"
checked={isSelected}
onChange={(e) => {
const newSelected = new Set(selectedContacts)
if (e.target.checked) {
newSelected.add(contact.id)
} else {
newSelected.delete(contact.id)
}
setSelectedContacts(newSelected)
}}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
</td>
<tr key={contact.id} className={`hover:bg-gray-50 transition-colors ${isSelected ? 'bg-blue-50' : ''}`}>
<td className="px-6 py-4 text-center">
<input
type="checkbox"
checked={isSelected}
onChange={(e) => {
const newSelected = new Set(selectedContacts)
if (e.target.checked) {
newSelected.add(contact.id)
} else {
newSelected.delete(contact.id)
}
setSelectedContacts(newSelected)
}}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
</td>
<td className="px-6 py-4">
{getListCompanyName(contact) !== '-' && (
<div className="flex items-center gap-2">
<Building2 className="h-4 w-4 text-gray-400" />
<span className="text-sm text-gray-900">
{getListCompanyName(contact)}
</span>
</div>
)}
</td>
<td className="px-6 py-4">
<div className="space-y-1">
{contact.email && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<Mail className="h-4 w-4" />
{contact.email}
</div>
)}
{(contact.phone || contact.mobile) && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<Phone className="h-4 w-4" />
{contact.phone || contact.mobile}
</div>
)}
</div>
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold">
{contact.name.charAt(0)}
{getListContactName(contact).charAt(0)}
</div>
<div>
<p className="font-semibold text-gray-900">{contact.name}</p>
{contact.nameAr && <p className="text-sm text-gray-600">{contact.nameAr}</p>}
<p className="font-semibold text-gray-900">
{getListContactName(contact)}
</p>
{getListContactNameAr(contact) && (
<p className="text-sm text-gray-600">
{getListContactNameAr(contact)}
</p>
)}
</div>
</div>
</td>
<td className="px-6 py-4">
<div className="space-y-1">
{contact.email && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<Mail className="h-4 w-4" />
{contact.email}
</div>
)}
{contact.phone && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<Phone className="h-4 w-4" />
{contact.phone}
</div>
)}
</div>
</td>
<td className="px-6 py-4">
{contact.companyName && (
<td className="px-6 py-4">
<span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(contact.type)}`}>
<Tag className="h-3 w-3" />
{getTypeLabel(contact.type)}
</span>
</td>
<td className="px-6 py-4">
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
contact.status === 'ACTIVE'
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-700'
}`}>
{contact.status === 'ACTIVE' ? 'Active' : 'Inactive'}
</span>
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2">
<Building2 className="h-4 w-4 text-gray-400" />
<span className="text-sm text-gray-900">{contact.companyName}</span>
<Link
href={`/contacts/${contact.id}`}
className="p-2 hover:bg-blue-50 text-blue-600 rounded-lg transition-colors"
title="View"
>
<Eye className="h-4 w-4" />
</Link>
<button
onClick={() => openEditModal(contact)}
className="p-2 hover:bg-green-50 text-green-600 rounded-lg transition-colors"
title="Edit"
>
<Edit className="h-4 w-4" />
</button>
<button
onClick={() => openDeleteDialog(contact)}
className="p-2 hover:bg-red-50 text-red-600 rounded-lg transition-colors"
title="Delete"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
)}
</td>
<td className="px-6 py-4">
<span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(contact.type)}`}>
<Tag className="h-3 w-3" />
{getTypeLabel(contact.type)}
</span>
</td>
<td className="px-6 py-4">
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
contact.status === 'ACTIVE'
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-700'
}`}>
{contact.status === 'ACTIVE' ? 'Active' : 'Inactive'}
</span>
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2">
<Link
href={`/contacts/${contact.id}`}
className="p-2 hover:bg-blue-50 text-blue-600 rounded-lg transition-colors"
title="View"
>
<Eye className="h-4 w-4" />
</Link>
<button
onClick={() => openEditModal(contact)}
className="p-2 hover:bg-green-50 text-green-600 rounded-lg transition-colors"
title="Edit"
>
<Edit className="h-4 w-4" />
</button>
<button
onClick={() => openDeleteDialog(contact)}
className="p-2 hover:bg-red-50 text-red-600 rounded-lg transition-colors"
title="Delete"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</td>
</tr>
)})}
</td>
</tr>
)
})}
</tbody>
</table>
</div>
{/* Pagination */}
<div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<p className="text-sm text-gray-600">
Showing <span className="font-semibold">{((currentPage - 1) * pageSize) + 1}</span> to{' '}
@@ -703,7 +721,6 @@ function ContactsContent() {
</div>
</main>
{/* Create Modal */}
<Modal
isOpen={showCreateModal}
onClose={() => {
@@ -714,6 +731,7 @@ function ContactsContent() {
size="xl"
>
<ContactForm
key="create-contact"
onSubmit={async (data) => {
await handleCreate(data as CreateContactData)
}}
@@ -725,7 +743,6 @@ function ContactsContent() {
/>
</Modal>
{/* Edit Modal */}
<Modal
isOpen={showEditModal}
onClose={() => {
@@ -736,6 +753,7 @@ function ContactsContent() {
size="xl"
>
<ContactForm
key={selectedContact?.id || 'edit-contact'}
contact={selectedContact || undefined}
onSubmit={async (data) => {
await handleEdit(data as UpdateContactData)
@@ -748,7 +766,6 @@ function ContactsContent() {
/>
</Modal>
{/* Export Modal */}
{showExportModal && (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowExportModal(false)} />
@@ -763,7 +780,7 @@ function ContactsContent() {
<p className="text-sm text-gray-600">Download contacts data</p>
</div>
</div>
<div className="space-y-4 mb-6">
<div>
<p className="text-sm text-gray-700 mb-2">
@@ -812,7 +829,7 @@ function ContactsContent() {
a.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
toast.success('Contacts exported successfully!')
setShowExportModal(false)
} catch (err: any) {
@@ -842,7 +859,6 @@ function ContactsContent() {
</div>
)}
{/* Delete Confirmation Dialog */}
{showDeleteDialog && selectedContact && (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowDeleteDialog(false)} />
@@ -891,7 +907,6 @@ function ContactsContent() {
</div>
)}
{/* Import Modal */}
{showImportModal && (
<ContactImport
onClose={() => setShowImportModal(false)}
@@ -911,4 +926,4 @@ export default function ContactsPage() {
<ContactsContent />
</ProtectedRoute>
)
}
}

188
frontend/src/components/contacts/ContactForm.tsx
View File

@@ -15,40 +15,47 @@ interface ContactFormProps {
submitting?: boolean
}
const buildInitialFormData = (contact?: Contact): CreateContactData => ({
type: contact?.type || 'INDIVIDUAL',
name: contact?.name || '',
nameAr: contact?.nameAr,
email: contact?.email,
phone: contact?.phone,
mobile: contact?.mobile,
website: contact?.website,
companyName: contact?.companyName,
companyNameAr: contact?.companyNameAr,
taxNumber: contact?.taxNumber,
commercialRegister: contact?.commercialRegister,
address: contact?.address,
city: contact?.city,
country: contact?.country || 'Syria',
postalCode: contact?.postalCode,
source: contact?.source || 'WEBSITE',
categories: contact?.categories?.map((c: any) => c.id || c) || [],
tags: contact?.tags || [],
parentId: contact?.parent?.id,
employeeId: contact?.employeeId ?? undefined,
customFields: contact?.customFields
})
export default function ContactForm({ contact, onSubmit, onCancel, submitting = false }: ContactFormProps) {
const isEdit = !!contact
// Form state
const [formData, setFormData] = useState<CreateContactData>({
type: contact?.type || 'INDIVIDUAL',
name: contact?.name || '',
nameAr: contact?.nameAr,
email: contact?.email,
phone: contact?.phone,
mobile: contact?.mobile,
website: contact?.website,
companyName: contact?.companyName,
companyNameAr: contact?.companyNameAr,
taxNumber: contact?.taxNumber,
commercialRegister: contact?.commercialRegister,
address: contact?.address,
city: contact?.city,
country: contact?.country || 'Syria',
postalCode: contact?.postalCode,
source: contact?.source || 'WEBSITE',
categories: contact?.categories?.map((c: any) => c.id || c) || [],
tags: contact?.tags || [],
parentId: contact?.parent?.id,
employeeId: contact?.employeeId ?? undefined,
customFields: contact?.customFields
})
const [formData, setFormData] = useState<CreateContactData>(buildInitialFormData(contact))
const [rating, setRating] = useState<number>(contact?.rating || 0)
const [newTag, setNewTag] = useState('')
const [formErrors, setFormErrors] = useState<Record<string, string>>({})
const [categories, setCategories] = useState<Category[]>([])
const [employees, setEmployees] = useState<Employee[]>([])
useEffect(() => {
setFormData(buildInitialFormData(contact))
setRating(contact?.rating || 0)
setNewTag('')
setFormErrors({})
}, [contact])
useEffect(() => {
categoriesAPI.getTree().then(setCategories).catch(() => {})
}, [])
@@ -72,7 +79,23 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
const isCompanyEmployeeSelected = companyEmployeeCategoryId && (formData.categories || []).includes(companyEmployeeCategoryId)
// Validation
const organizationTypes = new Set([
'COMPANY',
'HOLDING',
'GOVERNMENT',
'ORGANIZATION',
'EMBASSIES',
'BANK',
'UNIVERSITY',
'SCHOOL',
'UN',
'NGO',
'INSTITUTION',
])
const isOrganizationType = organizationTypes.has(formData.type)
const showCompanyFields = isOrganizationType
const validateForm = (): boolean => {
const errors: Record<string, string> = {}
@@ -103,28 +126,49 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!validateForm()) return
const cleanData = Object.entries({ ...formData, rating }).reduce((acc, [key, value]) => {
const requiredFields = ['type', 'name', 'source', 'country']
// Clean up empty strings to undefined for optional fields
const cleanData = Object.entries({ ...formData, rating }).reduce((acc, [key, value]) => {
// Keep the value if it's not an empty string, or if it's a required field
if (value !== '' || ['type', 'name', 'source', 'country'].includes(key)) {
acc[key] = value
}
// keep required fields as-is
if (requiredFields.includes(key)) {
acc[key] = value
return acc
}, {} as any)
}
// in edit mode, allow clearing optional fields by sending null
if (isEdit && value === '') {
acc[key] = null
return acc
}
// in create mode, ignore empty optional fields
if (value !== '') {
acc[key] = value
}
return acc
}, {} as any)
// Remove parentId if it's empty or undefined
if (!cleanData.parentId) {
delete cleanData.parentId
}
// Remove categories if empty array
if (cleanData.categories && cleanData.categories.length === 0) {
delete cleanData.categories
}
// Remove employeeId if empty
if (!cleanData.employeeId) {
if (!cleanData.parentId) {
delete cleanData.parentId
}
if (cleanData.categories && cleanData.categories.length === 0) {
delete cleanData.categories
}
// employeeId:
// - in create: remove if empty
// - in edit: keep null if user cleared it
if (!isEdit && !cleanData.employeeId) {
delete cleanData.employeeId
}
@@ -152,16 +196,12 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
})
}
const showCompanyFields = ['COMPANY', 'HOLDING', 'GOVERNMENT'].includes(formData.type)
return (
<form onSubmit={handleSubmit} className="space-y-6">
{/* Basic Information Section */}
<form onSubmit={handleSubmit} noValidate className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-gray-900 mb-4">Basic Information</h3>
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Contact Type */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Contact Type <span className="text-red-500">*</span>
@@ -187,7 +227,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
{formErrors.type && <p className="text-red-500 text-xs mt-1">{formErrors.type}</p>}
</div>
{/* Source */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Source <span className="text-red-500">*</span>
@@ -210,37 +249,20 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
</div>
{/* Name */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Name <span className="text-red-500">*</span>
{isOrganizationType ? 'Contact Person Name' : 'Name'} <span className="text-red-500">*</span>
</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
placeholder="Enter contact name"
placeholder={isOrganizationType ? 'Enter contact person name' : 'Enter contact name'}
/>
{formErrors.name && <p className="text-red-500 text-xs mt-1">{formErrors.name}</p>}
</div>
{/* Arabic Name */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Arabic Name - الاسم بالعربية
</label>
<input
type="text"
value={formData.nameAr || ''}
onChange={(e) => setFormData({ ...formData, nameAr: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
placeholder="أدخل الاسم بالعربية"
dir="rtl"
/>
</div>
{/* Rating */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Rating
@@ -276,12 +298,10 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
</div>
{/* Contact Methods Section */}
<div className="pt-6 border-t">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Contact Methods</h3>
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Email */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Email
@@ -296,7 +316,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
{formErrors.email && <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>}
</div>
{/* Phone */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Phone
@@ -313,7 +332,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Mobile */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Mobile
@@ -327,7 +345,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
/>
</div>
{/* Website */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Website
@@ -344,44 +361,27 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
</div>
{/* Company Information Section (conditional) */}
{showCompanyFields && (
<div className="pt-6 border-t">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Company Information</h3>
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Company Name */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Company Name
{formData.type === 'EMBASSIES' ? 'Embassy Name' : 'Company / Organization Name'}
</label>
<input
type="text"
value={formData.companyName || ''}
onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
placeholder="Company name"
placeholder={formData.type === 'EMBASSIES' ? 'Embassy name' : 'Company / organization name'}
/>
</div>
{/* Company Name Arabic */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Company Name (Arabic) - اسم الشركة
</label>
<input
type="text"
value={formData.companyNameAr || ''}
onChange={(e) => setFormData({ ...formData, companyNameAr: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
placeholder="اسم الشركة بالعربية"
dir="rtl"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Tax Number */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Tax Number
@@ -395,7 +395,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
/>
</div>
{/* Commercial Register */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Commercial Register
@@ -413,11 +412,9 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
)}
{/* Address Section */}
<div className="pt-6 border-t">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Address Information</h3>
<div className="space-y-4">
{/* Address */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Street Address
@@ -432,7 +429,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* City */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
City
@@ -446,7 +442,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
/>
</div>
{/* Country */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Country
@@ -460,7 +455,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
/>
</div>
{/* Postal Code */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Postal Code
@@ -477,7 +471,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
</div>
{/* Categories Section */}
<div className="pt-6 border-t">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Categories</h3>
<CategorySelector
@@ -487,7 +480,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
/>
</div>
{/* Employee Link - when Company Employee category is selected */}
{isCompanyEmployeeSelected && (
<div className="pt-6 border-t">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Link to Employee (Optional)</h3>
@@ -509,11 +501,9 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
)}
{/* Tags Section */}
<div className="pt-6 border-t">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Tags</h3>
<div className="space-y-3">
{/* Tag input */}
<div className="flex gap-2">
<input
type="text"
@@ -532,7 +522,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</button>
</div>
{/* Tags display */}
{formData.tags && formData.tags.length > 0 && (
<div className="flex flex-wrap gap-2">
{formData.tags.map((tag, index) => (
@@ -555,7 +544,6 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
</div>
{/* Duplicate Detection */}
<DuplicateAlert
email={formData.email}
phone={formData.phone}
@@ -564,14 +552,12 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
commercialRegister={formData.commercialRegister}
excludeId={contact?.id}
onMerge={(contactId) => {
// Navigate to merge page with pre-selected contacts
if (typeof window !== 'undefined') {
window.location.href = `/contacts/merge?sourceId=${contactId}`
}
}}
/>
{/* Form Actions */}
<div className="flex items-center justify-end gap-3 pt-6 border-t">
<button
type="button"
@@ -600,4 +586,4 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
</div>
</form>
)
}
}