691 lines
29 KiB
TypeScript
691 lines
29 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import {
|
||
FaArrowLeft,
|
||
FaSave,
|
||
FaTimes,
|
||
FaBuilding,
|
||
FaUser,
|
||
FaMapMarkerAlt,
|
||
FaIdCard,
|
||
FaCreditCard,
|
||
FaExclamationTriangle,
|
||
} from 'react-icons/fa'
|
||
import classNames from 'classnames'
|
||
import { CustomerSegmentEnum, CustomerTypeEnum } from '../../../types/crm'
|
||
import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
|
||
import { BusinessParty, BusinessPartyStatusEnum, PaymentTerms } from '../../../types/common'
|
||
import { Container } from '@/components/shared'
|
||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
import {
|
||
getBusinessPartyStatusText,
|
||
getCustomerSegmentText,
|
||
getCustomerTypeText,
|
||
getPaymentTermsText,
|
||
} from '@/utils/erp'
|
||
import { mockCurrencies } from '@/mocks/mockCurrencies'
|
||
|
||
const CustomerEdit: React.FC = () => {
|
||
const { id } = useParams<{ id: string }>()
|
||
const navigate = useNavigate()
|
||
const queryClient = useQueryClient()
|
||
const [activeTab, setActiveTab] = useState('basic')
|
||
const [isDirty, setIsDirty] = useState(false)
|
||
|
||
const {
|
||
data: customer,
|
||
isLoading,
|
||
error,
|
||
} = useQuery({
|
||
queryKey: ['customer', id],
|
||
queryFn: async () => {
|
||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||
const found = mockBusinessParties.find((c) => c.id === id)
|
||
if (!found) throw new Error('Müşteri bulunamadı')
|
||
return found
|
||
},
|
||
})
|
||
|
||
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
|
||
|
||
// Initialize form data when customer is loaded
|
||
React.useEffect(() => {
|
||
if (customer) {
|
||
setFormData(mockBusinessParties.find((c) => c.id === id) || mockBusinessPartyNew)
|
||
}
|
||
}, [customer, id])
|
||
|
||
const updateMutation = useMutation({
|
||
mutationFn: async (data: BusinessParty) => {
|
||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||
// Simulate API call
|
||
return { ...customer, ...data }
|
||
},
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||
queryClient.invalidateQueries({ queryKey: ['customer', id] })
|
||
setIsDirty(false)
|
||
navigate(ROUTES_ENUM.protected.crm.customersDetail.replace(':id', id || 'new'))
|
||
},
|
||
})
|
||
|
||
const handleInputChange = (field: string, value: string | number) => {
|
||
const keys = field.split('.')
|
||
if (keys.length === 2) {
|
||
const [section, subField] = keys
|
||
setFormData((prev: any) => {
|
||
if (section === 'primaryContact') {
|
||
return {
|
||
...prev,
|
||
primaryContact: {
|
||
...prev.primaryContact,
|
||
[subField]: value,
|
||
},
|
||
}
|
||
} else if (section === 'address') {
|
||
return {
|
||
...prev,
|
||
address: {
|
||
...prev.address,
|
||
[subField]: value,
|
||
},
|
||
}
|
||
}
|
||
return prev
|
||
})
|
||
} else {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[field]: value,
|
||
}))
|
||
}
|
||
setIsDirty(true)
|
||
}
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
|
||
updateMutation.mutate(formData)
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
if (isDirty) {
|
||
if (window.confirm('Değişiklikleriniz kaydedilmedi. Çıkmak istediğinizden emin misiniz?')) {
|
||
navigate(ROUTES_ENUM.protected.crm.customersDetail.replace(':id', id!))
|
||
}
|
||
} else {
|
||
navigate(ROUTES_ENUM.protected.crm.customersDetail.replace(':id', id!))
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 p-6">
|
||
<div className="mx-auto">
|
||
<div className="animate-pulse">
|
||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
|
||
<div className="bg-white rounded-lg shadow p-6">
|
||
<div className="space-y-4">
|
||
{[...Array(8)].map((_, i) => (
|
||
<div key={i} className="h-10 bg-gray-200 rounded"></div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error || !customer) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 p-6">
|
||
<div className="mx-auto">
|
||
<div className="bg-red-50 border border-red-200 rounded-lg p-6">
|
||
<div className="flex items-center">
|
||
<FaExclamationTriangle className="h-8 w-8 text-red-600 mr-3" />
|
||
<div>
|
||
<h3 className="text-lg font-medium text-red-800">Müşteri Bulunamadı</h3>
|
||
<p className="text-red-600">Düzenlemek istediğiniz müşteri mevcut değil.</p>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<button
|
||
onClick={() => navigate(ROUTES_ENUM.protected.crm.customers)}
|
||
className="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
|
||
>
|
||
<FaArrowLeft className="w-4 h-4 mr-2" />
|
||
Müşteri Listesine Dön
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const tabs = [
|
||
{ id: 'basic', label: 'Temel Bilgiler', icon: FaBuilding },
|
||
{ id: 'contact', label: 'İletişim', icon: FaUser },
|
||
{ id: 'business', label: 'İş Bilgileri', icon: FaIdCard },
|
||
{ id: 'financial', label: 'Finansal', icon: FaCreditCard },
|
||
]
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
<form onSubmit={handleSubmit}>
|
||
{/* Header */}
|
||
<div className="bg-white border-b border-gray-200">
|
||
<div className="mx-auto px-4 py-3">
|
||
{/* Breadcrumb */}
|
||
<div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
|
||
<Link to={ROUTES_ENUM.protected.crm.customers} className="hover:text-blue-600">
|
||
Müşteriler
|
||
</Link>
|
||
<span>/</span>
|
||
<Link
|
||
to={ROUTES_ENUM.protected.crm.customersDetail.replace(':id', id || 'new')}
|
||
className="hover:text-blue-600"
|
||
>
|
||
{customer.name}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-900">Düzenle</span>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-4">
|
||
<button
|
||
type="button"
|
||
onClick={handleCancel}
|
||
className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||
>
|
||
<FaArrowLeft className="w-5 h-5" />
|
||
</button>
|
||
|
||
<div className="flex items-center space-x-4">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
|
||
<FaBuilding className="w-8 h-8" />
|
||
</div>
|
||
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900">Müşteri Düzenle</h2>
|
||
<p className="text-sm text-gray-600">{customer.name}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<button
|
||
type="button"
|
||
onClick={handleCancel}
|
||
className="inline-flex items-center px-3 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||
>
|
||
<FaTimes className="w-4 h-4 mr-2" />
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={!isDirty || updateMutation.isPending}
|
||
className={classNames(
|
||
'inline-flex items-center px-3 py-1.5 text-sm rounded-lg transition-colors',
|
||
isDirty && !updateMutation.isPending
|
||
? 'bg-blue-600 text-white hover:bg-blue-700'
|
||
: 'bg-gray-300 text-gray-500 cursor-not-allowed',
|
||
)}
|
||
>
|
||
{updateMutation.isPending ? (
|
||
<>
|
||
<div className="animate-spin w-4 h-4 mr-2 border-2 border-white border-t-transparent rounded-full"></div>
|
||
Kaydediliyor...
|
||
</>
|
||
) : (
|
||
<>
|
||
<FaSave className="w-4 h-4 mr-2" />
|
||
Kaydet
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="bg-white border-b border-gray-200">
|
||
<div className="mx-auto px-4">
|
||
<nav className="flex space-x-8">
|
||
{tabs.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
type="button"
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={classNames(
|
||
'flex items-center space-x-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors',
|
||
activeTab === tab.id
|
||
? 'border-blue-500 text-blue-600'
|
||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
|
||
)}
|
||
>
|
||
<tab.icon className="w-4 h-4" />
|
||
<span>{tab.label}</span>
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Form Content */}
|
||
<div className="mx-auto py-4">
|
||
{activeTab === 'basic' && (
|
||
<div className="bg-white rounded-lg shadow p-4">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||
<FaBuilding className="w-5 h-5 mr-2" />
|
||
Temel Bilgiler
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Müşteri Kodu *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.code}
|
||
onChange={(e) => handleInputChange('code', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Şirket Adı *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.name}
|
||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Müşteri Tipi
|
||
</label>
|
||
<select
|
||
value={formData.customerType}
|
||
onChange={(e) => handleInputChange('customerType', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
{Object.values(CustomerTypeEnum).map((type) => (
|
||
<option key={type} value={type}>
|
||
{getCustomerTypeText(type)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">Sektör</label>
|
||
<input
|
||
type="text"
|
||
value={formData.industry}
|
||
onChange={(e) => handleInputChange('industry', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="Teknoloji, İmalat, Hizmet vb."
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">Website</label>
|
||
<input
|
||
type="url"
|
||
value={formData.website}
|
||
onChange={(e) => handleInputChange('website', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="https://www.ornek.com"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Müşteri Durumu
|
||
</label>
|
||
<select
|
||
value={formData.status}
|
||
onChange={(e) => handleInputChange('status', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
{Object.values(BusinessPartyStatusEnum).map((status) => (
|
||
<option key={status} value={status}>
|
||
{getBusinessPartyStatusText(status)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Müşteri Segmenti
|
||
</label>
|
||
<select
|
||
value={formData.customerSegment}
|
||
onChange={(e) => handleInputChange('customerSegment', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
{Object.values(CustomerSegmentEnum).map((segment) => (
|
||
<option key={segment} value={segment}>
|
||
{getCustomerSegmentText(segment)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'contact' && (
|
||
<div className="space-y-4">
|
||
{/* Primary Contact */}
|
||
<div className="bg-white rounded-lg shadow p-4">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||
<FaUser className="w-5 h-5 mr-2" />
|
||
Ana İletişim Kişisi
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">Ad *</label>
|
||
<input
|
||
type="text"
|
||
value={formData.primaryContact?.firstName}
|
||
onChange={(e) =>
|
||
handleInputChange('primaryContact.firstName', e.target.value)
|
||
}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Soyad *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.primaryContact?.lastName}
|
||
onChange={(e) =>
|
||
handleInputChange('primaryContact.lastName', e.target.value)
|
||
}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">Ünvan</label>
|
||
<input
|
||
type="text"
|
||
value={formData.primaryContact?.title}
|
||
onChange={(e) => handleInputChange('primaryContact.title', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="Genel Müdür, Satış Direktörü vb."
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Departman
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.primaryContact?.department}
|
||
onChange={(e) =>
|
||
handleInputChange('primaryContact.department', e.target.value)
|
||
}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="Satış, Pazarlama, İnsan Kaynakları vb."
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
E-posta *
|
||
</label>
|
||
<input
|
||
type="email"
|
||
value={formData.primaryContact?.email}
|
||
onChange={(e) => handleInputChange('primaryContact.email', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Telefon
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
value={formData.primaryContact?.phoneNumber}
|
||
onChange={(e) => handleInputChange('primaryContact.phoneNumber', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="+90 (212) 555 0123"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Mobil Telefon
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
value={formData.primaryContact?.mobileNumber}
|
||
onChange={(e) => handleInputChange('primaryContact.mobile', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="+90 (555) 123 4567"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Address */}
|
||
<div className="bg-white rounded-lg shadow p-4">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
||
Adres Bilgileri
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Adres *
|
||
</label>
|
||
<textarea
|
||
value={formData.address?.street}
|
||
onChange={(e) => handleInputChange('address.street', e.target.value)}
|
||
rows={3}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="Sokak, cadde, mahalle, bina no vb."
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Şehir *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.address?.city}
|
||
onChange={(e) => handleInputChange('address.city', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
İl/Eyalet
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.address?.state}
|
||
onChange={(e) => handleInputChange('address.state', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Posta Kodu
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.address?.postalCode}
|
||
onChange={(e) => handleInputChange('address.postalCode', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Ülke *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.address?.country}
|
||
onChange={(e) => handleInputChange('address.country', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'business' && (
|
||
<div className="bg-white rounded-lg shadow p-4">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||
<FaIdCard className="w-5 h-5 mr-2" />
|
||
İş Bilgileri
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Vergi Numarası
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.taxNumber}
|
||
onChange={(e) => handleInputChange('taxNumber', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="1234567890"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Sicil Numarası
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.registrationNumber}
|
||
onChange={(e) => handleInputChange('registrationNumber', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="123456789"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Atanmış Satış Temsilcisi
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.assignedSalesRep}
|
||
onChange={(e) => handleInputChange('assignedSalesRep', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
placeholder="Satış temsilcisi adı"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'financial' && (
|
||
<div className="bg-white rounded-lg shadow p-4">
|
||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||
<FaCreditCard className="w-5 h-5 mr-2" />
|
||
Finansal Bilgiler
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Kredi Limiti (₺)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={formData.creditLimit}
|
||
onChange={(e) => handleInputChange('creditLimit', Number(e.target.value))}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
min="0"
|
||
step="1000"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Para Birimi
|
||
</label>
|
||
<select
|
||
value={formData.currency}
|
||
onChange={(e) => handleInputChange('currency', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
{mockCurrencies.map((currency) => (
|
||
<option key={currency.value} value={currency.value}>
|
||
{currency.value} - {currency.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||
Ödeme Koşulları
|
||
</label>
|
||
<select
|
||
value={formData.paymentTerms}
|
||
onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
|
||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
{Object.values(PaymentTerms).map((term) => (
|
||
<option key={term} value={term}>
|
||
{getPaymentTermsText(term)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default CustomerEdit
|