edit contact form

backend/src/modules/contacts/contacts.routes.ts

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

backend/src/modules/contacts/contacts.service.ts

@@ -330,9 +330,10 @@ class ContactsService {
     const contact = await prisma.contact.update({
   where: { id },
   data: {
+    type: data.type,
     name: data.name,
     nameAr: data.nameAr,
-        email: data.email,
+    email: data.email === '' || data.email === undefined ? null : data.email,
     phone: data.phone,
     mobile: data.mobile,
     website: data.website,
@@ -344,11 +345,14 @@ class ContactsService {
     city: data.city,
     country: data.country,
     postalCode: data.postalCode,
-        categories: data.categories ? {
+    categories: data.categories
-          set: data.categories.map(id => ({ id }))
+      ? {
-        } : undefined,
+          set: data.categories.map((id) => ({ id })),
+        }
+      : undefined,
     tags: data.tags,
-        employeeId: data.employeeId !== undefined ? (data.employeeId || null) : undefined,
+    employeeId:
+      data.employeeId !== undefined ? (data.employeeId || null) : undefined,
     source: data.source,
     status: data.status,
     rating: data.rating,

frontend/src/app/contacts/page.tsx

@@ -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)
@@ -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,10 +219,36 @@ 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">
@@ -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>
@@ -576,17 +580,18 @@ function ContactsContent() {
                               className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                             />
                           </td>
+
                           <td className="px-6 py-4">
-                          <div className="flex items-center gap-3">
+                            {getListCompanyName(contact) !== '-' && (
-                            <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">
+                              <div className="flex items-center gap-2">
-                              {contact.name.charAt(0)}
+                                <Building2 className="h-4 w-4 text-gray-400" />
-                            </div>
+                                <span className="text-sm text-gray-900">
-                            <div>
+                                  {getListCompanyName(contact)}
-                              <p className="font-semibold text-gray-900">{contact.name}</p>
+                                </span>
-                              {contact.nameAr && <p className="text-sm text-gray-600">{contact.nameAr}</p>}
-                            </div>
                               </div>
+                            )}
                           </td>
+
                           <td className="px-6 py-4">
                             <div className="space-y-1">
                               {contact.email && (
@@ -595,28 +600,40 @@ function ContactsContent() {
                                   {contact.email}
                                 </div>
                               )}
-                            {contact.phone && (
+                              {(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.phone || contact.mobile}
                                 </div>
                               )}
                             </div>
                           </td>
+
                         <td className="px-6 py-4">
-                          {contact.companyName && (
+                          <div className="flex items-center gap-3">
-                            <div className="flex items-center gap-2">
+                            <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">
-                              <Building2 className="h-4 w-4 text-gray-400" />
+                              {getListContactName(contact).charAt(0)}
-                              <span className="text-sm text-gray-900">{contact.companyName}</span>
                             </div>
+                            <div>
+                              <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">
                             <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'
@@ -626,6 +643,7 @@ function ContactsContent() {
                               {contact.status === 'ACTIVE' ? 'Active' : 'Inactive'}
                             </span>
                           </td>
+
                           <td className="px-6 py-4">
                             <div className="flex items-center gap-2">
                               <Link
@@ -652,12 +670,12 @@ function ContactsContent() {
                             </div>
                           </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)} />
@@ -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)}

frontend/src/components/contacts/ContactForm.tsx

@@ -15,11 +15,7 @@ interface ContactFormProps {
   submitting?: boolean
 }
 
-export default function ContactForm({ contact, onSubmit, onCancel, submitting = false }: ContactFormProps) {
+const buildInitialFormData = (contact?: Contact): CreateContactData => ({
-  const isEdit = !!contact
-
-  // Form state
-  const [formData, setFormData] = useState<CreateContactData>({
   type: contact?.type || 'INDIVIDUAL',
   name: contact?.name || '',
   nameAr: contact?.nameAr,
@@ -43,12 +39,23 @@ export default function ContactForm({ contact, onSubmit, onCancel, submitting =
   customFields: contact?.customFields
 })
 
+export default function ContactForm({ contact, onSubmit, onCancel, submitting = false }: ContactFormProps) {
+  const isEdit = !!contact
+
+  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
-
-    // 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
+  const requiredFields = ['type', 'name', 'source', 'country']
-      if (value !== '' || ['type', 'name', 'source', 'country'].includes(key)) {
+
+    // keep required fields as-is
+    if (requiredFields.includes(key)) {
+      acc[key] = value
+      return acc
+    }
+
+    // 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.parentId) {
-    if (!cleanData.employeeId) {
+  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">
+    <form onSubmit={handleSubmit} noValidate className="space-y-6">
-      {/* Basic Information Section */}
       <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"