Deploy rule, CRM enhancements, Company Employee category, bilingual, contacts module completion
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Talal Sharabi
608
frontend/src/components/contacts/RelationshipManager.tsx
Normal file
608
frontend/src/components/contacts/RelationshipManager.tsx
Normal file
@@ -0,0 +1,608 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { toast } from 'react-hot-toast'
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Search,
|
||||
X,
|
||||
Calendar,
|
||||
User,
|
||||
Building2,
|
||||
Loader2,
|
||||
ExternalLink
|
||||
} from 'lucide-react'
|
||||
import { contactsAPI } from '@/lib/api/contacts'
|
||||
import { format } from 'date-fns'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface Relationship {
|
||||
id: string
|
||||
fromContactId: string
|
||||
toContactId: string
|
||||
type: string
|
||||
startDate: string
|
||||
endDate?: string
|
||||
notes?: string
|
||||
isActive: boolean
|
||||
fromContact: {
|
||||
id: string
|
||||
uniqueContactId: string
|
||||
type: string
|
||||
name: string
|
||||
email?: string
|
||||
phone?: string
|
||||
status: string
|
||||
}
|
||||
toContact: {
|
||||
id: string
|
||||
uniqueContactId: string
|
||||
type: string
|
||||
name: string
|
||||
email?: string
|
||||
phone?: string
|
||||
status: string
|
||||
}
|
||||
}
|
||||
|
||||
interface RelationshipManagerProps {
|
||||
contactId: string
|
||||
}
|
||||
|
||||
const RELATIONSHIP_TYPES = [
|
||||
{ value: 'REPRESENTATIVE', label: 'Representative - ممثل' },
|
||||
{ value: 'PARTNER', label: 'Partner - شريك' },
|
||||
{ value: 'SUPPLIER', label: 'Supplier - مورد' },
|
||||
{ value: 'EMPLOYEE', label: 'Employee - موظف' },
|
||||
{ value: 'SUBSIDIARY', label: 'Subsidiary - فرع' },
|
||||
{ value: 'BRANCH', label: 'Branch - فرع' },
|
||||
{ value: 'PARENT_COMPANY', label: 'Parent Company - شركة أم' },
|
||||
{ value: 'CUSTOMER', label: 'Customer - عميل' },
|
||||
{ value: 'VENDOR', label: 'Vendor - بائع' },
|
||||
{ value: 'OTHER', label: 'Other - أخرى' },
|
||||
]
|
||||
|
||||
export default function RelationshipManager({ contactId }: RelationshipManagerProps) {
|
||||
const [relationships, setRelationships] = useState<Relationship[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showAddModal, setShowAddModal] = useState(false)
|
||||
const [showEditModal, setShowEditModal] = useState(false)
|
||||
const [selectedRelationship, setSelectedRelationship] = useState<Relationship | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
// Form state
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [searchResults, setSearchResults] = useState<any[]>([])
|
||||
const [searching, setSearching] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
toContactId: '',
|
||||
type: 'REPRESENTATIVE',
|
||||
startDate: new Date().toISOString().split('T')[0],
|
||||
endDate: '',
|
||||
notes: ''
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetchRelationships()
|
||||
}, [contactId])
|
||||
|
||||
const fetchRelationships = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await contactsAPI.getRelationships(contactId)
|
||||
setRelationships(data)
|
||||
} catch (error: any) {
|
||||
toast.error('Failed to load relationships')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Search contacts with debouncing
|
||||
useEffect(() => {
|
||||
if (!searchTerm || searchTerm.length < 2) {
|
||||
setSearchResults([])
|
||||
return
|
||||
}
|
||||
|
||||
const debounce = setTimeout(async () => {
|
||||
setSearching(true)
|
||||
try {
|
||||
const data = await contactsAPI.getAll({ search: searchTerm, pageSize: 10 })
|
||||
setSearchResults(data.contacts.filter(c => c.id !== contactId))
|
||||
} catch (error) {
|
||||
console.error('Search error:', error)
|
||||
} finally {
|
||||
setSearching(false)
|
||||
}
|
||||
}, 500)
|
||||
|
||||
return () => clearTimeout(debounce)
|
||||
}, [searchTerm, contactId])
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
toContactId: '',
|
||||
type: 'REPRESENTATIVE',
|
||||
startDate: new Date().toISOString().split('T')[0],
|
||||
endDate: '',
|
||||
notes: ''
|
||||
})
|
||||
setSearchTerm('')
|
||||
setSearchResults([])
|
||||
setSelectedRelationship(null)
|
||||
}
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!formData.toContactId) {
|
||||
toast.error('Please select a contact')
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await contactsAPI.addRelationship(contactId, {
|
||||
toContactId: formData.toContactId,
|
||||
type: formData.type,
|
||||
startDate: formData.startDate,
|
||||
endDate: formData.endDate || undefined,
|
||||
notes: formData.notes || undefined
|
||||
})
|
||||
toast.success('Relationship added successfully')
|
||||
setShowAddModal(false)
|
||||
resetForm()
|
||||
fetchRelationships()
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.message || 'Failed to add relationship')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = async () => {
|
||||
if (!selectedRelationship) return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await contactsAPI.updateRelationship(
|
||||
contactId,
|
||||
selectedRelationship.id,
|
||||
{
|
||||
type: formData.type,
|
||||
startDate: formData.startDate,
|
||||
endDate: formData.endDate || undefined,
|
||||
notes: formData.notes || undefined
|
||||
}
|
||||
)
|
||||
toast.success('Relationship updated successfully')
|
||||
setShowEditModal(false)
|
||||
resetForm()
|
||||
fetchRelationships()
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.message || 'Failed to update relationship')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (relationship: Relationship) => {
|
||||
if (!confirm('Are you sure you want to delete this relationship?')) return
|
||||
|
||||
try {
|
||||
await contactsAPI.deleteRelationship(contactId, relationship.id)
|
||||
toast.success('Relationship deleted successfully')
|
||||
fetchRelationships()
|
||||
} catch (error: any) {
|
||||
toast.error('Failed to delete relationship')
|
||||
}
|
||||
}
|
||||
|
||||
const openEditModal = (relationship: Relationship) => {
|
||||
setSelectedRelationship(relationship)
|
||||
setFormData({
|
||||
toContactId: relationship.toContactId,
|
||||
type: relationship.type,
|
||||
startDate: relationship.startDate.split('T')[0],
|
||||
endDate: relationship.endDate ? relationship.endDate.split('T')[0] : '',
|
||||
notes: relationship.notes || ''
|
||||
})
|
||||
setShowEditModal(true)
|
||||
}
|
||||
|
||||
const getRelatedContact = (relationship: Relationship) => {
|
||||
return relationship.fromContactId === contactId
|
||||
? relationship.toContact
|
||||
: relationship.fromContact
|
||||
}
|
||||
|
||||
const getRelationshipDirection = (relationship: Relationship) => {
|
||||
return relationship.fromContactId === contactId ? '→' : '←'
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="animate-spin text-blue-600" size={32} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
العلاقات - Relationships ({relationships.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
resetForm()
|
||||
setShowAddModal(true)
|
||||
}}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
<Plus size={18} />
|
||||
Add Relationship
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Relationships List */}
|
||||
{relationships.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg">
|
||||
<User className="mx-auto h-12 w-12 text-gray-400 mb-4" />
|
||||
<p className="text-gray-600">No relationships found</p>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="mt-4 text-blue-600 hover:text-blue-700 font-medium"
|
||||
>
|
||||
Add your first relationship
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white border rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Contact
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Start Date
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
End Date
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{relationships.map(relationship => {
|
||||
const relatedContact = getRelatedContact(relationship)
|
||||
return (
|
||||
<tr key={relationship.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-gray-500">
|
||||
{getRelationshipDirection(relationship)}
|
||||
</span>
|
||||
{relatedContact.type === 'INDIVIDUAL' ? (
|
||||
<User size={18} className="text-gray-400" />
|
||||
) : (
|
||||
<Building2 size={18} className="text-gray-400" />
|
||||
)}
|
||||
<div>
|
||||
<Link
|
||||
href={`/contacts/${relatedContact.id}`}
|
||||
className="font-medium text-gray-900 hover:text-blue-600 flex items-center gap-1"
|
||||
>
|
||||
{relatedContact.name}
|
||||
<ExternalLink size={14} />
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600">{relatedContact.email || relatedContact.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{relationship.type.replace(/_/g, ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{format(new Date(relationship.startDate), 'MMM d, yyyy')}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{relationship.endDate ? format(new Date(relationship.endDate), 'MMM d, yyyy') : '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||
relationship.isActive
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{relationship.isActive ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
onClick={() => openEditModal(relationship)}
|
||||
className="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
<Edit size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(relationship)}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Modal */}
|
||||
{showAddModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<div className="flex items-center justify-between p-6 border-b">
|
||||
<h2 className="text-xl font-bold text-gray-900">
|
||||
إضافة علاقة - Add Relationship
|
||||
</h2>
|
||||
<button onClick={() => { setShowAddModal(false); resetForm(); }} className="text-gray-400 hover:text-gray-600">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
||||
{/* Contact Search */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Select Contact <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search contacts..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
{searching && (
|
||||
<p className="text-sm text-gray-600 mt-2">Searching...</p>
|
||||
)}
|
||||
{searchResults.length > 0 && (
|
||||
<div className="mt-2 border rounded-lg max-h-48 overflow-y-auto">
|
||||
{searchResults.map(contact => (
|
||||
<button
|
||||
key={contact.id}
|
||||
onClick={() => {
|
||||
setFormData({ ...formData, toContactId: contact.id })
|
||||
setSearchTerm(contact.name)
|
||||
setSearchResults([])
|
||||
}}
|
||||
className="w-full text-left p-3 hover:bg-gray-50 border-b last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{contact.type === 'INDIVIDUAL' ? <User size={16} /> : <Building2 size={16} />}
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{contact.name}</p>
|
||||
<p className="text-sm text-gray-600">{contact.email || contact.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Relationship Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Relationship Type <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={formData.type}
|
||||
onChange={(e) => setFormData({ ...formData, type: 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"
|
||||
>
|
||||
{RELATIONSHIP_TYPES.map(type => (
|
||||
<option key={type.value} value={type.value}>{type.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Start Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Start Date <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: 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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* End Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
End Date (Optional)
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: 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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Notes (Optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
||||
placeholder="Add any notes about this relationship..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t p-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => { setShowAddModal(false); resetForm(); }}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !formData.toContactId}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" size={18} />
|
||||
Adding...
|
||||
</>
|
||||
) : (
|
||||
'Add Relationship'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{showEditModal && selectedRelationship && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
|
||||
<div className="flex items-center justify-between p-6 border-b">
|
||||
<h2 className="text-xl font-bold text-gray-900">
|
||||
تعديل العلاقة - Edit Relationship
|
||||
</h2>
|
||||
<button onClick={() => { setShowEditModal(false); resetForm(); }} className="text-gray-400 hover:text-gray-600">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-4">
|
||||
{/* Contact (Read-only) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Contact
|
||||
</label>
|
||||
<div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-600">
|
||||
{getRelatedContact(selectedRelationship).name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Relationship Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Relationship Type
|
||||
</label>
|
||||
<select
|
||||
value={formData.type}
|
||||
onChange={(e) => setFormData({ ...formData, type: 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"
|
||||
>
|
||||
{RELATIONSHIP_TYPES.map(type => (
|
||||
<option key={type.value} value={type.value}>{type.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Start Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Start Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: 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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* End Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
End Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: 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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Notes
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t p-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => { setShowEditModal(false); resetForm(); }}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleEdit}
|
||||
disabled={submitting}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" size={18} />
|
||||
Updating...
|
||||
</>
|
||||
) : (
|
||||
'Update Relationship'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user