554 lines
21 KiB
TypeScript
554 lines
21 KiB
TypeScript
|
import React, { useState, useEffect, useCallback } from "react";
|
|||
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|||
|
|
import {
|
|||
|
|
FaSave,
|
|||
|
|
FaTimes,
|
|||
|
|
FaBuilding,
|
|||
|
|
FaUser,
|
|||
|
|
FaMapMarkerAlt,
|
|||
|
|
FaCreditCard,
|
|||
|
|
FaEnvelope,
|
|||
|
|
} from "react-icons/fa";
|
|||
|
|
import LoadingSpinner from "../../../components/common/LoadingSpinner";
|
|||
|
|
import { BusinessParty } from "../../../types/common";
|
|||
|
|
import { mockBusinessPartyNew } from "../../../mocks/mockBusinessParties";
|
|||
|
|
|
|||
|
|
interface ValidationErrors {
|
|||
|
|
[key: string]: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const CustomerForm: 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(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.code = "Müşteri kodu zorunludur";
|
|||
|
|
}
|
|||
|
|
if (!formData.name.trim()) {
|
|||
|
|
newErrors.name = "Şirket adı zorunludur";
|
|||
|
|
}
|
|||
|
|
if (formData.creditLimit < 0) {
|
|||
|
|
newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setErrors(newErrors);
|
|||
|
|
return Object.keys(newErrors).length === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleInputChange = (
|
|||
|
|
field: keyof BusinessParty,
|
|||
|
|
value: string | number | boolean
|
|||
|
|
) => {
|
|||
|
|
setFormData((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[field]: value,
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
// Clear error when user starts typing
|
|||
|
|
if (errors[field]) {
|
|||
|
|
setErrors((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[field]: "",
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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("Customer data:", {
|
|||
|
|
...formData,
|
|||
|
|
id: isEdit ? id : undefined,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Show success message
|
|||
|
|
alert(
|
|||
|
|
isEdit
|
|||
|
|
? "Müşteri başarıyla güncellendi!"
|
|||
|
|
: "Müşteri başarıyla oluşturuldu!"
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// Navigate back to list
|
|||
|
|
navigate("/admin/crm");
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Error saving customer:", error);
|
|||
|
|
alert("Bir hata oluştu. Lütfen tekrar deneyin.");
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
navigate("/admin/crm");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return <LoadingSpinner />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4 pt-2">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|||
|
|
{isEdit ? "Müşteri Düzenle" : "Yeni Müşteri"}
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-sm text-gray-600">
|
|||
|
|
{isEdit
|
|||
|
|
? "Mevcut müşteri bilgilerini güncelleyin"
|
|||
|
|
: "Yeni müşteri bilgilerini girin"}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Form */}
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-3">
|
|||
|
|
{/* General 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="p-4 space-y-3">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|||
|
|
<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={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
|
|||
|
|
errors.code
|
|||
|
|
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
|||
|
|
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
}`}
|
|||
|
|
placeholder="Örn: MST001"
|
|||
|
|
/>
|
|||
|
|
{errors.customerCode && (
|
|||
|
|
<p className="mt-1 text-sm text-red-600">
|
|||
|
|
{errors.customerCode}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</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 as "INDIVIDUAL" | "COMPANY"
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="COMPANY">Şirket</option>
|
|||
|
|
<option value="INDIVIDUAL">Bireysel</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|||
|
|
<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={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
|
|||
|
|
errors.name
|
|||
|
|
? "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ını girin"
|
|||
|
|
/>
|
|||
|
|
{errors.companyName && (
|
|||
|
|
<p className="mt-1 text-sm text-red-600">
|
|||
|
|
{errors.companyName}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Sektör
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.industry}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("industry", e.target.value)
|
|||
|
|
}
|
|||
|
|
className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Sektör seçin</option>
|
|||
|
|
<option value="TECHNOLOGY">Teknoloji</option>
|
|||
|
|
<option value="MANUFACTURING">İmalat</option>
|
|||
|
|
<option value="CONSTRUCTION">İnşaat</option>
|
|||
|
|
<option value="AUTOMOTIVE">Otomotiv</option>
|
|||
|
|
<option value="RETAIL">Perakende</option>
|
|||
|
|
<option value="FINANCE">Finans</option>
|
|||
|
|
<option value="HEALTHCARE">Sağlık</option>
|
|||
|
|
<option value="OTHER">Diğer</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<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="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
placeholder="https://www.ornek.com"
|
|||
|
|
/>
|
|||
|
|
</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="p-4 space-y-3">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Email *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
value={formData.email}
|
|||
|
|
onChange={(e) => handleInputChange("email", e.target.value)}
|
|||
|
|
className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-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@ornek.com"
|
|||
|
|
/>
|
|||
|
|
{errors.email && (
|
|||
|
|
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Telefon *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="tel"
|
|||
|
|
value={formData.phone}
|
|||
|
|
onChange={(e) => handleInputChange("phone", e.target.value)}
|
|||
|
|
className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-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"
|
|||
|
|
/>
|
|||
|
|
{errors.phone && (
|
|||
|
|
<p className="mt-1 text-sm text-red-600">{errors.phone}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Address 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">
|
|||
|
|
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
|||
|
|
Adres Bilgileri
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Business 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" />
|
|||
|
|
İş Bilgileri
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-4 space-y-3">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|||
|
|
<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="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
placeholder="1234567890"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Ticaret Sicil No
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.registrationNumber}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("registrationNumber", e.target.value)
|
|||
|
|
}
|
|||
|
|
className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
placeholder="98765"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Kredi Limiti
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
step="0.01"
|
|||
|
|
value={formData.creditLimit}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange(
|
|||
|
|
"creditLimit",
|
|||
|
|
parseFloat(e.target.value) || 0
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
|
|||
|
|
errors.creditLimit
|
|||
|
|
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
|||
|
|
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
}`}
|
|||
|
|
placeholder="0.00"
|
|||
|
|
/>
|
|||
|
|
{errors.creditLimit && (
|
|||
|
|
<p className="mt-1 text-sm text-red-600">
|
|||
|
|
{errors.creditLimit}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<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="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="CASH">Peşin</option>
|
|||
|
|
<option value="NET_15">15 Gün Vadeli</option>
|
|||
|
|
<option value="NET_30">30 Gün Vadeli</option>
|
|||
|
|
<option value="NET_60">60 Gün Vadeli</option>
|
|||
|
|
<option value="NET_90">90 Gün Vadeli</option>
|
|||
|
|
</select>
|
|||
|
|
</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="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Relationship 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">
|
|||
|
|
<FaEnvelope className="w-5 h-5 mr-2" />
|
|||
|
|
İlişki Yönetimi
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-4 space-y-3">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|||
|
|
<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="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="ACTIVE">Aktif</option>
|
|||
|
|
<option value="INACTIVE">Pasif</option>
|
|||
|
|
<option value="PROSPECT">Potansiyel</option>
|
|||
|
|
<option value="BLOCKED">Blokeli</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="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="STANDARD">Standart</option>
|
|||
|
|
<option value="PREMIUM">Premium</option>
|
|||
|
|
<option value="ENTERPRISE">Kurumsal</option>
|
|||
|
|
<option value="VIP">VIP</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|||
|
|
Sorumlu Satış Temsilcisi
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.assignedSalesRep}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleInputChange("assignedSalesRep", e.target.value)
|
|||
|
|
}
|
|||
|
|
className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<option value="">Temsilci seçin</option>
|
|||
|
|
<option value="sales_rep_1">Mehmet Özkan</option>
|
|||
|
|
<option value="sales_rep_2">Ayşe Demir</option>
|
|||
|
|
<option value="sales_rep_3">Ali Yılmaz</option>
|
|||
|
|
</select>
|
|||
|
|
</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-gray-50 px-4 py-3 rounded-b-lg">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleCancel}
|
|||
|
|
className="inline-flex items-center px-4 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-4 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>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CustomerForm;
|