775 lines
33 KiB
TypeScript
775 lines
33 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react'
|
||
import { useNavigate, useParams } from 'react-router-dom'
|
||
import {
|
||
FaSave,
|
||
FaTimes,
|
||
FaBuilding,
|
||
FaUser,
|
||
FaMapMarkerAlt,
|
||
FaCreditCard,
|
||
FaPhone,
|
||
FaEnvelope,
|
||
FaStar,
|
||
} from 'react-icons/fa'
|
||
import LoadingSpinner from '../../../components/common/LoadingSpinner'
|
||
import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
|
||
import { BusinessParty } from '../../../types/common'
|
||
import { Container } from '@/components/shared'
|
||
|
||
interface ValidationErrors {
|
||
[key: string]: string
|
||
}
|
||
|
||
const SupplierForm: React.FC = () => {
|
||
const navigate = useNavigate()
|
||
const { id } = useParams<{ id: string }>()
|
||
const isEdit = Boolean(id)
|
||
|
||
const [loading, setLoading] = useState(false)
|
||
const [saving, setSaving] = useState(false)
|
||
const [errors, setErrors] = useState<ValidationErrors>({})
|
||
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
|
||
|
||
const loadFormData = useCallback(async () => {
|
||
setLoading(true)
|
||
try {
|
||
if (isEdit && id) {
|
||
// Simulate API call
|
||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||
|
||
setFormData(mockBusinessParties.find((s) => s.id === id) || mockBusinessPartyNew)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading form data:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [isEdit, id])
|
||
|
||
useEffect(() => {
|
||
loadFormData()
|
||
}, [loadFormData])
|
||
|
||
const validateForm = (): boolean => {
|
||
const newErrors: ValidationErrors = {}
|
||
|
||
if (!formData.code?.trim()) {
|
||
newErrors.customerCode = 'Tedarikçi kodu zorunludur'
|
||
}
|
||
if (!formData.name.trim()) {
|
||
newErrors.companyName = 'Şirket adı zorunludur'
|
||
}
|
||
if (!formData.primaryContact?.fullName?.trim()) {
|
||
newErrors.contactPerson = 'İletişim kişisi zorunludur'
|
||
}
|
||
if (!formData.email?.trim()) {
|
||
newErrors.email = 'Email zorunludur'
|
||
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
|
||
newErrors.email = 'Geçerli bir email adresi girin'
|
||
}
|
||
if (!formData.phone?.trim()) {
|
||
newErrors.phone = 'Telefon numarası zorunludur'
|
||
}
|
||
if (!formData.address?.street?.trim()) {
|
||
newErrors.street = 'Adres zorunludur'
|
||
}
|
||
if (!formData.address?.city.trim()) {
|
||
newErrors.city = 'Şehir zorunludur'
|
||
}
|
||
if (!formData.address?.country.trim()) {
|
||
newErrors.country = 'Ülke zorunludur'
|
||
}
|
||
if (!formData.paymentTerms) {
|
||
newErrors.paymentTerms = 'Ödeme koşulları seçilmelidir'
|
||
}
|
||
if (!formData.supplierType) {
|
||
newErrors.supplierType = 'Tedarikçi tipi seçilmelidir'
|
||
}
|
||
|
||
setErrors(newErrors)
|
||
return Object.keys(newErrors).length === 0
|
||
}
|
||
|
||
const handleInputChange = (field: string, value: any) => {
|
||
setFormData((prev) => {
|
||
const keys = field.split('.')
|
||
const updated: any = { ...prev }
|
||
let temp = updated
|
||
|
||
keys.forEach((key, index) => {
|
||
if (index === keys.length - 1) {
|
||
temp[key] = value
|
||
} else {
|
||
temp[key] = { ...temp[key] }
|
||
temp = temp[key]
|
||
}
|
||
})
|
||
|
||
return updated
|
||
})
|
||
}
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
|
||
if (!validateForm()) {
|
||
return
|
||
}
|
||
|
||
setSaving(true)
|
||
try {
|
||
// Simulate API call
|
||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||
|
||
console.log('Supplier data:', {
|
||
...formData,
|
||
id: isEdit ? id : undefined,
|
||
})
|
||
|
||
// Show success message
|
||
alert(isEdit ? 'Tedarikçi başarıyla güncellendi!' : 'Tedarikçi başarıyla oluşturuldu!')
|
||
|
||
// Navigate back to list
|
||
navigate('/admin/supplychain')
|
||
} catch (error) {
|
||
console.error('Error saving supplier:', error)
|
||
alert('Bir hata oluştu. Lütfen tekrar deneyin.')
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
navigate('/admin/supplychain')
|
||
}
|
||
|
||
if (loading) {
|
||
return <LoadingSpinner />
|
||
}
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-gray-900">
|
||
{isEdit ? 'Tedarikçi Düzenle' : 'Yeni Tedarikçi'}
|
||
</h2>
|
||
<p className="text-sm text-gray-600 mt-1">
|
||
{isEdit
|
||
? 'Mevcut tedarikçi bilgilerini güncelleyin'
|
||
: 'Yeni tedarikçi bilgilerini girin'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<form onSubmit={handleSubmit} className="space-y-3">
|
||
{/* Basic Information */}
|
||
<div className="bg-white shadow rounded-lg">
|
||
<div className="px-4 py-3 border-b border-gray-200">
|
||
<h3 className="text-base font-medium text-gray-900 flex items-center">
|
||
<FaBuilding className="w-5 h-5 mr-2" />
|
||
Genel Bilgiler
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 space-y-3">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Tedarikçi Kodu *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.code}
|
||
onChange={(e) => handleInputChange('customerCode', e.target.value)}
|
||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.customerCode
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="Örn: SUP001"
|
||
/>
|
||
{errors.supplierCode && (
|
||
<p className="mt-1 text-sm text-red-600">{errors.supplierCode}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Tedarikçi Tipi *
|
||
</label>
|
||
<select
|
||
value={formData.supplierType}
|
||
onChange={(e) => handleInputChange('supplierType', e.target.value)}
|
||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.supplierType
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
>
|
||
<option value="">Tip seçin</option>
|
||
<option value="MANUFACTURER">Üretici</option>
|
||
<option value="DISTRIBUTOR">Distribütör</option>
|
||
<option value="WHOLESALER">Toptancı</option>
|
||
<option value="SERVICE_PROVIDER">Hizmet Sağlayıcı</option>
|
||
<option value="OTHER">Diğer</option>
|
||
</select>
|
||
{errors.supplierType && (
|
||
<p className="mt-1 text-sm text-red-600">{errors.supplierType}</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Şirket Adı *</label>
|
||
<input
|
||
type="text"
|
||
value={formData.name}
|
||
onChange={(e) => handleInputChange('companyName', e.target.value)}
|
||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.companyName
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="Şirket adı"
|
||
/>
|
||
{errors.companyName && (
|
||
<p className="mt-1 text-sm text-red-600">{errors.companyName}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Vergi Numarası
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.taxNumber}
|
||
onChange={(e) => handleInputChange('taxNumber', e.target.value)}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="1234567890"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Sertifikalar
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.certifications}
|
||
onChange={(e) => handleInputChange('certifications', e.target.value)}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="ISO 9001, ISO 14001, CE"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Information */}
|
||
<div className="bg-white shadow rounded-lg">
|
||
<div className="px-4 py-3 border-b border-gray-200">
|
||
<h3 className="text-base font-medium text-gray-900 flex items-center">
|
||
<FaUser className="w-5 h-5 mr-2" />
|
||
İletişim Bilgileri
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 space-y-3">
|
||
{/* 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?.phone}
|
||
onChange={(e) => handleInputChange('primaryContact.phone', 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?.mobile}
|
||
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>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
|
||
<div className="relative">
|
||
<FaEnvelope className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||
<input
|
||
type="email"
|
||
value={formData.email}
|
||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.email
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="email@example.com"
|
||
/>
|
||
</div>
|
||
{errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Telefon *</label>
|
||
<div className="relative">
|
||
<FaPhone className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||
<input
|
||
type="tel"
|
||
value={formData.phone}
|
||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.phone
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="+90 212 555 0123"
|
||
/>
|
||
</div>
|
||
{errors.phone && <p className="mt-1 text-sm text-red-600">{errors.phone}</p>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Address */}
|
||
<div className="bg-white shadow rounded-lg">
|
||
<div className="px-4 py-3 border-b border-gray-200">
|
||
<h3 className="text-base font-medium text-gray-900 flex items-center">
|
||
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
||
Adres Bilgileri
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 space-y-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Adres *</label>
|
||
<input
|
||
type="text"
|
||
value={formData.address?.street}
|
||
onChange={(e) => handleInputChange('address.street', e.target.value)}
|
||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.street
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="Sokak, cadde, mahalle"
|
||
/>
|
||
{errors.street && <p className="mt-1 text-sm text-red-600">{errors.street}</p>}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||
<div>
|
||
<label className="block text-sm 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={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.city
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="Şehir"
|
||
/>
|
||
{errors.city && <p className="mt-1 text-sm text-red-600">{errors.city}</p>}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">İl/Bölge</label>
|
||
<input
|
||
type="text"
|
||
value={formData.address?.state}
|
||
onChange={(e) => handleInputChange('address.state', e.target.value)}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="İl/Bölge"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm 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="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="34000"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm 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={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.country
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
placeholder="Ülke"
|
||
/>
|
||
{errors.country && <p className="mt-1 text-sm text-red-600">{errors.country}</p>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Financial Information */}
|
||
<div className="bg-white shadow rounded-lg">
|
||
<div className="px-4 py-3 border-b border-gray-200">
|
||
<h3 className="text-base font-medium text-gray-900 flex items-center">
|
||
<FaCreditCard className="w-5 h-5 mr-2" />
|
||
Finansal Bilgiler
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 space-y-3">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Kredi Limiti *
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
value={formData.creditLimit}
|
||
onChange={(e) =>
|
||
handleInputChange('creditLimit', parseFloat(e.target.value) || 0)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="0.00"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Ödeme Koşulları *
|
||
</label>
|
||
<select
|
||
value={formData.paymentTerms}
|
||
onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
|
||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||
errors.paymentTerms
|
||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||
}`}
|
||
>
|
||
<option value="">Ödeme koşulu seçin</option>
|
||
<option value="CASH">Nakit</option>
|
||
<option value="NET_15">Net 15 Gün</option>
|
||
<option value="NET_30">Net 30 Gün</option>
|
||
<option value="NET_60">Net 60 Gün</option>
|
||
<option value="NET_90">Net 90 Gün</option>
|
||
</select>
|
||
{errors.paymentTerms && (
|
||
<p className="mt-1 text-sm text-red-600">{errors.paymentTerms}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Para Birimi *
|
||
</label>
|
||
<select
|
||
value={formData.currency}
|
||
onChange={(e) => handleInputChange('currency', e.target.value)}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
>
|
||
<option value="TRY">Türk Lirası (TRY)</option>
|
||
<option value="USD">Amerikan Doları (USD)</option>
|
||
<option value="EUR">Euro (EUR)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{formData.bankAccounts?.map((account, index) => (
|
||
<div key={account.id || index} className="space-y-3 mb-4">
|
||
<h4 className="text-md font-semibold text-gray-800">Banka Hesabı {index + 1}</h4>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Banka Adı
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={account.bankName}
|
||
onChange={(e) =>
|
||
handleInputChange(`bankAccounts.${index}.bankName`, e.target.value)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="Banka adı"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Hesap Numarası
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={account.accountNumber}
|
||
onChange={(e) =>
|
||
handleInputChange(`bankAccounts.${index}.accountNumber`, e.target.value)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="Hesap numarası"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
|
||
<input
|
||
type="text"
|
||
value={account.iban}
|
||
onChange={(e) =>
|
||
handleInputChange(`bankAccounts.${index}.iban`, e.target.value)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="TR00 0000 0000 0000 0000 0000 00"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
SWIFT Kodu
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={account.swiftCode}
|
||
onChange={(e) =>
|
||
handleInputChange(`bankAccounts.${index}.swiftCode`, e.target.value)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
placeholder="SWIFT kodu"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Performance Ratings */}
|
||
<div className="bg-white shadow rounded-lg">
|
||
<div className="px-4 py-3 border-b border-gray-200">
|
||
<h3 className="text-base font-medium text-gray-900 flex items-center">
|
||
<FaStar className="w-5 h-5 mr-2" />
|
||
Performans Değerlendirmesi
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 space-y-3">
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Kalite Puanı (1-5)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="1"
|
||
max="5"
|
||
value={formData.performanceMetrics?.qualityRating}
|
||
onChange={(e) =>
|
||
handleInputChange('qualityRating', parseFloat(e.target.value) || 1)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Teslimat Puanı (1-5)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="1"
|
||
max="5"
|
||
value={formData.performanceMetrics?.deliveryPerformance}
|
||
onChange={(e) =>
|
||
handleInputChange('deliveryRating', parseFloat(e.target.value) || 1)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Fiyat Puanı (1-5)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="1"
|
||
max="5"
|
||
value={formData.performanceMetrics?.priceCompetitiveness}
|
||
onChange={(e) =>
|
||
handleInputChange('priceRating', parseFloat(e.target.value) || 1)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Genel Puan (1-5)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="1"
|
||
max="5"
|
||
value={formData.performanceMetrics?.overallScore}
|
||
onChange={(e) =>
|
||
handleInputChange('overallRating', parseFloat(e.target.value) || 1)
|
||
}
|
||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
id="isActive"
|
||
checked={formData.isActive}
|
||
onChange={(e) => handleInputChange('isActive', e.target.checked)}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label htmlFor="isActive" className="ml-2 block text-sm text-gray-900">
|
||
Aktif
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Form Actions */}
|
||
<div className="flex items-center justify-end space-x-2 bg-white px-4 py-3 rounded-lg shadow">
|
||
<button
|
||
type="button"
|
||
onClick={handleCancel}
|
||
className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||
>
|
||
<FaTimes className="w-4 h-4 mr-2" />
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={saving}
|
||
className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{saving ? (
|
||
<>
|
||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||
Kaydediliyor...
|
||
</>
|
||
) : (
|
||
<>
|
||
<FaSave className="w-4 h-4 mr-2" />
|
||
{isEdit ? 'Güncelle' : 'Kaydet'}
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default SupplierForm
|