Container Crm Management
This commit is contained in:
Sedat ÖZTÜRK
parent
ecb32cf6cf
commit
7d52573765
23 changed files with 6155 additions and 7366 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React from 'react'
|
||||||
import {
|
import {
|
||||||
FaTimes,
|
FaTimes,
|
||||||
FaCalendar,
|
FaCalendar,
|
||||||
|
|
@ -12,10 +12,10 @@ import {
|
||||||
FaFlag,
|
FaFlag,
|
||||||
FaFileAlt,
|
FaFileAlt,
|
||||||
FaHistory,
|
FaHistory,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { CrmActivity } from "../../../types/crm";
|
import { CrmActivity } from '../../../types/crm'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import {
|
import {
|
||||||
getActivityStatusColor,
|
getActivityStatusColor,
|
||||||
getActivityStatusText,
|
getActivityStatusText,
|
||||||
|
|
@ -23,28 +23,22 @@ import {
|
||||||
getPsActivityTypeText,
|
getPsActivityTypeText,
|
||||||
getPriorityColor,
|
getPriorityColor,
|
||||||
getPriorityText,
|
getPriorityText,
|
||||||
} from "../../../utils/erp";
|
getActivityTypeText,
|
||||||
|
} from '../../../utils/erp'
|
||||||
|
|
||||||
interface ActivityDetailsProps {
|
interface ActivityDetailsProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean
|
||||||
onClose: () => void;
|
onClose: () => void
|
||||||
onEdit: (activity: CrmActivity) => void;
|
onEdit: (activity: CrmActivity) => void
|
||||||
activity: CrmActivity | null;
|
activity: CrmActivity | null
|
||||||
}
|
}
|
||||||
|
|
||||||
const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
const ActivityDetails: React.FC<ActivityDetailsProps> = ({ isOpen, onClose, onEdit, activity }) => {
|
||||||
isOpen,
|
if (!isOpen || !activity) return null
|
||||||
onClose,
|
|
||||||
onEdit,
|
|
||||||
activity,
|
|
||||||
}) => {
|
|
||||||
if (!isOpen || !activity) return null;
|
|
||||||
|
|
||||||
const customer = mockBusinessParties.find(
|
const customer = mockBusinessParties.find((c) => c.id === activity.customerId)
|
||||||
(c) => c.id === activity.customerId
|
|
||||||
);
|
|
||||||
|
|
||||||
const ActivityIcon = getActivityTypeIcon(activity.activityType);
|
const ActivityIcon = getActivityTypeIcon(activity.activityType)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
|
@ -56,12 +50,8 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<ActivityIcon className="w-6 h-6 text-blue-600" />
|
<ActivityIcon className="w-6 h-6 text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<h2 className="text-lg font-semibold text-gray-900">{activity.subject}</h2>
|
||||||
{activity.subject}
|
<p className="text-sm text-gray-600">{getActivityTypeText(activity.activityType)}</p>
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{getPsActivityTypeText(activity.activityType)}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
|
@ -72,10 +62,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<FaEdit className="w-4 h-4" />
|
<FaEdit className="w-4 h-4" />
|
||||||
Düzenle
|
Düzenle
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-2">
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-600 p-2"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -87,7 +74,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div
|
<div
|
||||||
className={`inline-flex px-3 py-1.5 rounded-full text-xs font-medium border ${getActivityStatusColor(
|
className={`inline-flex px-3 py-1.5 rounded-full text-xs font-medium border ${getActivityStatusColor(
|
||||||
activity.status
|
activity.status,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getActivityStatusText(activity.status)}
|
{getActivityStatusText(activity.status)}
|
||||||
|
|
@ -96,11 +83,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div
|
<div className={`text-base font-semibold ${getPriorityColor(activity.priority)}`}>
|
||||||
className={`text-base font-semibold ${getPriorityColor(
|
|
||||||
activity.priority
|
|
||||||
)}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
<FaFlag className="w-4 h-4" />
|
<FaFlag className="w-4 h-4" />
|
||||||
{getPriorityText(activity.priority)}
|
{getPriorityText(activity.priority)}
|
||||||
|
|
@ -112,7 +95,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="flex items-center justify-center gap-2 text-base font-semibold text-gray-900">
|
<div className="flex items-center justify-center gap-2 text-base font-semibold text-gray-900">
|
||||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||||
{new Date(activity.activityDate).toLocaleDateString("tr-TR")}
|
{new Date(activity.activityDate).toLocaleDateString('tr-TR')}
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-gray-500 mt-1">Tarih</p>
|
<p className="text-xs text-gray-500 mt-1">Tarih</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -139,9 +122,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">Konu</label>
|
||||||
Konu
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">{activity.subject}</p>
|
<p className="text-gray-900">{activity.subject}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -150,9 +131,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">
|
||||||
Açıklama
|
Açıklama
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900 whitespace-pre-wrap">
|
<p className="text-gray-900 whitespace-pre-wrap">{activity.description}</p>
|
||||||
{activity.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -163,13 +142,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
Başlangıç Saati
|
Başlangıç Saati
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900">
|
<p className="text-gray-900">
|
||||||
{new Date(activity.startTime).toLocaleTimeString(
|
{new Date(activity.startTime).toLocaleTimeString('tr-TR', {
|
||||||
"tr-TR",
|
hour: '2-digit',
|
||||||
{
|
minute: '2-digit',
|
||||||
hour: "2-digit",
|
})}
|
||||||
minute: "2-digit",
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -180,13 +156,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
Bitiş Saati
|
Bitiş Saati
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900">
|
<p className="text-gray-900">
|
||||||
{new Date(activity.endTime).toLocaleTimeString(
|
{new Date(activity.endTime).toLocaleTimeString('tr-TR', {
|
||||||
"tr-TR",
|
hour: '2-digit',
|
||||||
{
|
minute: '2-digit',
|
||||||
hour: "2-digit",
|
})}
|
||||||
minute: "2-digit",
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -232,16 +205,12 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaEnvelope className="w-4 h-4 text-gray-400" />
|
<FaEnvelope className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">{customer.primaryContact?.email}</span>
|
||||||
{customer.primaryContact?.email}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{customer.primaryContact?.phone && (
|
{customer.primaryContact?.phone && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaPhone className="w-4 h-4 text-gray-400" />
|
<FaPhone className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">{customer.primaryContact.phone}</span>
|
||||||
{customer.primaryContact.phone}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -261,14 +230,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">Sorumlu</label>
|
||||||
Sorumlu
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaUser className="w-4 h-4 text-gray-400" />
|
<FaUser className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">{activity.assigned?.fullName}</span>
|
||||||
{activity.assigned?.fullName}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -279,20 +244,15 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
</label>
|
</label>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
{activity.participants.map((participantId, index) => {
|
{activity.participants.map((participantId, index) => {
|
||||||
const employee = mockEmployees.find(
|
const employee = mockEmployees.find((emp) => emp.id === participantId)
|
||||||
(emp) => emp.id === participantId
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div key={index} className="flex items-center gap-2">
|
||||||
key={index}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<FaUsers className="w-4 h-4 text-gray-400" />
|
<FaUsers className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">
|
||||||
{employee ? employee.fullName : participantId}
|
{employee ? employee.fullName : participantId}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -316,9 +276,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">
|
||||||
{new Date(activity.followUpDate).toLocaleDateString(
|
{new Date(activity.followUpDate).toLocaleDateString('tr-TR')}
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -329,9 +287,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">
|
||||||
Takip Aktivitesi
|
Takip Aktivitesi
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900">
|
<p className="text-gray-900">{activity.followUpActivity}</p>
|
||||||
{activity.followUpActivity}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -351,9 +307,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">
|
||||||
Sonuç
|
Sonuç
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900 whitespace-pre-wrap">
|
<p className="text-gray-900 whitespace-pre-wrap">{activity.outcome}</p>
|
||||||
{activity.outcome}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -362,9 +316,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">
|
||||||
Sonraki Adımlar
|
Sonraki Adımlar
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900 whitespace-pre-wrap">
|
<p className="text-gray-900 whitespace-pre-wrap">{activity.nextSteps}</p>
|
||||||
{activity.nextSteps}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -381,14 +333,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<div className="flex items-start gap-3 border-l-2 border-blue-200 pl-4">
|
<div className="flex items-start gap-3 border-l-2 border-blue-200 pl-4">
|
||||||
<div className="w-3 h-3 bg-blue-600 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
<div className="w-3 h-3 bg-blue-600 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-gray-900">
|
<p className="text-sm font-medium text-gray-900">Aktivite Oluşturuldu</p>
|
||||||
Aktivite Oluşturuldu
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 flex items-center gap-1">
|
<p className="text-xs text-gray-500 flex items-center gap-1">
|
||||||
<FaClock className="w-3 h-3" />
|
<FaClock className="w-3 h-3" />
|
||||||
{new Date(activity.creationTime).toLocaleDateString(
|
{new Date(activity.creationTime).toLocaleDateString('tr-TR')}
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -396,14 +344,10 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
<div className="flex items-start gap-3 border-l-2 border-gray-200 pl-4">
|
<div className="flex items-start gap-3 border-l-2 border-gray-200 pl-4">
|
||||||
<div className="w-3 h-3 bg-gray-400 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
<div className="w-3 h-3 bg-gray-400 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-gray-900">
|
<p className="text-sm font-medium text-gray-900">Son Güncelleme</p>
|
||||||
Son Güncelleme
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 flex items-center gap-1">
|
<p className="text-xs text-gray-500 flex items-center gap-1">
|
||||||
<FaClock className="w-3 h-3" />
|
<FaClock className="w-3 h-3" />
|
||||||
{new Date(
|
{new Date(activity.lastModificationTime).toLocaleDateString('tr-TR')}
|
||||||
activity.lastModificationTime
|
|
||||||
).toLocaleDateString("tr-TR")}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -414,7 +358,7 @@ const ActivityDetails: React.FC<ActivityDetailsProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default ActivityDetails;
|
export default ActivityDetails
|
||||||
|
|
|
||||||
|
|
@ -1,163 +1,140 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from 'react'
|
||||||
import { FaTimes, FaCalendar, FaFileAlt, FaFlag } from "react-icons/fa";
|
import { FaTimes, FaCalendar, FaFileAlt, FaFlag } from 'react-icons/fa'
|
||||||
import {
|
import { CrmActivity, CrmActivityTypeEnum, ActivityStatusEnum } from '../../../types/crm'
|
||||||
CrmActivity,
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
CrmActivityTypeEnum,
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
ActivityStatusEnum,
|
import MultiSelectEmployee from '../../../components/common/MultiSelectEmployee'
|
||||||
} from "../../../types/crm";
|
import { BusinessParty, PriorityEnum } from '../../../types/common'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { getActivityStatusText, getPriorityText, getActivityTypeText } from '../../../utils/erp'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
|
||||||
import MultiSelectEmployee from "../../../components/common/MultiSelectEmployee";
|
|
||||||
import { BusinessParty, PriorityEnum } from "../../../types/common";
|
|
||||||
import {
|
|
||||||
getActivityStatusText,
|
|
||||||
getPriorityText,
|
|
||||||
getActivityTypeText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
interface ActivityFormProps {
|
interface ActivityFormProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean
|
||||||
onClose: () => void;
|
onClose: () => void
|
||||||
onSave: (activity: CrmActivity) => void;
|
onSave: (activity: CrmActivity) => void
|
||||||
activity?: CrmActivity | null;
|
activity?: CrmActivity | null
|
||||||
mode: "create" | "edit";
|
mode: 'create' | 'edit'
|
||||||
}
|
}
|
||||||
|
|
||||||
const ActivityForm: React.FC<ActivityFormProps> = ({
|
const ActivityForm: React.FC<ActivityFormProps> = ({ isOpen, onClose, onSave, activity, mode }) => {
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onSave,
|
|
||||||
activity,
|
|
||||||
mode,
|
|
||||||
}) => {
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
id: "",
|
id: '',
|
||||||
activityType: CrmActivityTypeEnum.Call,
|
activityType: CrmActivityTypeEnum.Call,
|
||||||
subject: "",
|
subject: '',
|
||||||
description: "",
|
description: '',
|
||||||
customerId: "",
|
customerId: '',
|
||||||
contactId: "",
|
contactId: '',
|
||||||
activityDate: "",
|
activityDate: '',
|
||||||
startTime: "",
|
startTime: '',
|
||||||
endTime: "",
|
endTime: '',
|
||||||
duration: "",
|
duration: '',
|
||||||
assignedTo: "",
|
assignedTo: '',
|
||||||
participants: [] as string[], // Array of employee IDs
|
participants: [] as string[], // Array of employee IDs
|
||||||
status: ActivityStatusEnum.Planned,
|
status: ActivityStatusEnum.Planned,
|
||||||
priority: PriorityEnum.Normal,
|
priority: PriorityEnum.Normal,
|
||||||
followUpDate: "",
|
followUpDate: '',
|
||||||
followUpActivity: "",
|
followUpActivity: '',
|
||||||
outcome: "",
|
outcome: '',
|
||||||
nextSteps: "",
|
nextSteps: '',
|
||||||
});
|
})
|
||||||
|
|
||||||
const [customers] = useState<BusinessParty[]>(mockBusinessParties);
|
const [customers] = useState<BusinessParty[]>(mockBusinessParties)
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (activity && mode === "edit") {
|
if (activity && mode === 'edit') {
|
||||||
setFormData({
|
setFormData({
|
||||||
id: activity.id,
|
id: activity.id,
|
||||||
activityType: activity.activityType,
|
activityType: activity.activityType,
|
||||||
subject: activity.subject,
|
subject: activity.subject,
|
||||||
description: activity.description || "",
|
description: activity.description || '',
|
||||||
customerId: activity.customerId || "",
|
customerId: activity.customerId || '',
|
||||||
contactId: activity.contactId || "",
|
contactId: activity.contactId || '',
|
||||||
activityDate: activity.activityDate.toISOString().split("T")[0],
|
activityDate: activity.activityDate.toISOString().split('T')[0],
|
||||||
startTime: activity.startTime
|
startTime: activity.startTime ? activity.startTime.toISOString().slice(11, 16) : '',
|
||||||
? activity.startTime.toISOString().slice(11, 16)
|
endTime: activity.endTime ? activity.endTime.toISOString().slice(11, 16) : '',
|
||||||
: "",
|
duration: activity.duration?.toString() || '',
|
||||||
endTime: activity.endTime
|
|
||||||
? activity.endTime.toISOString().slice(11, 16)
|
|
||||||
: "",
|
|
||||||
duration: activity.duration?.toString() || "",
|
|
||||||
assignedTo: activity.assignedTo,
|
assignedTo: activity.assignedTo,
|
||||||
participants: activity.participants || [], // Keep as array of IDs
|
participants: activity.participants || [], // Keep as array of IDs
|
||||||
status: activity.status,
|
status: activity.status,
|
||||||
priority: activity.priority,
|
priority: activity.priority,
|
||||||
followUpDate: activity.followUpDate
|
followUpDate: activity.followUpDate
|
||||||
? activity.followUpDate.toISOString().split("T")[0]
|
? activity.followUpDate.toISOString().split('T')[0]
|
||||||
: "",
|
: '',
|
||||||
followUpActivity: activity.followUpActivity || "",
|
followUpActivity: activity.followUpActivity || '',
|
||||||
outcome: activity.outcome || "",
|
outcome: activity.outcome || '',
|
||||||
nextSteps: activity.nextSteps || "",
|
nextSteps: activity.nextSteps || '',
|
||||||
});
|
})
|
||||||
} else if (mode === "create") {
|
} else if (mode === 'create') {
|
||||||
const today = new Date().toISOString().split("T")[0];
|
const today = new Date().toISOString().split('T')[0]
|
||||||
setFormData({
|
setFormData({
|
||||||
id: `act_${Date.now()}`,
|
id: `act_${Date.now()}`,
|
||||||
activityType: CrmActivityTypeEnum.Call,
|
activityType: CrmActivityTypeEnum.Call,
|
||||||
subject: "",
|
subject: '',
|
||||||
description: "",
|
description: '',
|
||||||
customerId: "",
|
customerId: '',
|
||||||
contactId: "",
|
contactId: '',
|
||||||
activityDate: today,
|
activityDate: today,
|
||||||
startTime: "",
|
startTime: '',
|
||||||
endTime: "",
|
endTime: '',
|
||||||
duration: "",
|
duration: '',
|
||||||
assignedTo: "Mevcut Kullanıcı",
|
assignedTo: 'Mevcut Kullanıcı',
|
||||||
participants: [], // Empty array for new activities
|
participants: [], // Empty array for new activities
|
||||||
status: ActivityStatusEnum.Planned,
|
status: ActivityStatusEnum.Planned,
|
||||||
priority: PriorityEnum.Normal,
|
priority: PriorityEnum.Normal,
|
||||||
followUpDate: "",
|
followUpDate: '',
|
||||||
followUpActivity: "",
|
followUpActivity: '',
|
||||||
outcome: "",
|
outcome: '',
|
||||||
nextSteps: "",
|
nextSteps: '',
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}, [activity, mode, isOpen]);
|
}, [activity, mode, isOpen])
|
||||||
|
|
||||||
const handleInputChange = (
|
const handleInputChange = (
|
||||||
e: React.ChangeEvent<
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
|
||||||
>
|
|
||||||
) => {
|
) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target
|
||||||
setFormData((prev) => ({
|
setFormData((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: value,
|
[name]: value,
|
||||||
}));
|
}))
|
||||||
|
|
||||||
// Clear error when user starts typing
|
// Clear error when user starts typing
|
||||||
if (errors[name]) {
|
if (errors[name]) {
|
||||||
setErrors((prev) => ({
|
setErrors((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: "",
|
[name]: '',
|
||||||
}));
|
}))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
const newErrors: Record<string, string> = {};
|
const newErrors: Record<string, string> = {}
|
||||||
|
|
||||||
if (!formData.subject.trim()) {
|
if (!formData.subject.trim()) {
|
||||||
newErrors.subject = "Aktivite konusu zorunludur";
|
newErrors.subject = 'Aktivite konusu zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.activityDate) {
|
if (!formData.activityDate) {
|
||||||
newErrors.activityDate = "Aktivite tarihi zorunludur";
|
newErrors.activityDate = 'Aktivite tarihi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.assignedTo.trim()) {
|
if (!formData.assignedTo.trim()) {
|
||||||
newErrors.assignedTo = "Sorumlu kişi zorunludur";
|
newErrors.assignedTo = 'Sorumlu kişi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (formData.duration && (isNaN(Number(formData.duration)) || Number(formData.duration) <= 0)) {
|
||||||
formData.duration &&
|
newErrors.duration = 'Süre geçerli bir sayı olmalıdır'
|
||||||
(isNaN(Number(formData.duration)) || Number(formData.duration) <= 0)
|
|
||||||
) {
|
|
||||||
newErrors.duration = "Süre geçerli bir sayı olmalıdır";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if (!validateForm()) {
|
if (!validateForm()) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const activityData: CrmActivity = {
|
const activityData: CrmActivity = {
|
||||||
|
|
@ -179,21 +156,19 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
participants: formData.participants, // Already an array of IDs
|
participants: formData.participants, // Already an array of IDs
|
||||||
status: formData.status,
|
status: formData.status,
|
||||||
priority: formData.priority,
|
priority: formData.priority,
|
||||||
followUpDate: formData.followUpDate
|
followUpDate: formData.followUpDate ? new Date(formData.followUpDate) : undefined,
|
||||||
? new Date(formData.followUpDate)
|
|
||||||
: undefined,
|
|
||||||
followUpActivity: formData.followUpActivity || undefined,
|
followUpActivity: formData.followUpActivity || undefined,
|
||||||
outcome: formData.outcome || undefined,
|
outcome: formData.outcome || undefined,
|
||||||
nextSteps: formData.nextSteps || undefined,
|
nextSteps: formData.nextSteps || undefined,
|
||||||
creationTime: activity?.creationTime || new Date(),
|
creationTime: activity?.creationTime || new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
|
|
||||||
onSave(activityData);
|
onSave(activityData)
|
||||||
onClose();
|
onClose()
|
||||||
};
|
}
|
||||||
|
|
||||||
if (!isOpen) return null;
|
if (!isOpen) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
|
@ -201,12 +176,9 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between p-4 border-b">
|
<div className="flex items-center justify-between p-4 border-b">
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
{mode === "create" ? "Yeni Aktivite Oluştur" : "Aktivite Düzenle"}
|
{mode === 'create' ? 'Yeni Aktivite Oluştur' : 'Aktivite Düzenle'}
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -240,28 +212,22 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Konu *</label>
|
||||||
Konu *
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="subject"
|
name="subject"
|
||||||
value={formData.subject}
|
value={formData.subject}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.subject ? "border-red-500" : "border-gray-300"
|
errors.subject ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="Aktivite konusunu girin"
|
placeholder="Aktivite konusunu girin"
|
||||||
/>
|
/>
|
||||||
{errors.subject && (
|
{errors.subject && <p className="text-red-500 text-sm mt-1">{errors.subject}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.subject}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
name="description"
|
name="description"
|
||||||
value={formData.description}
|
value={formData.description}
|
||||||
|
|
@ -273,9 +239,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Müşteri</label>
|
||||||
Müşteri
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="customerId"
|
name="customerId"
|
||||||
value={formData.customerId}
|
value={formData.customerId}
|
||||||
|
|
@ -292,9 +256,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Öncelik</label>
|
||||||
Öncelik
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="priority"
|
name="priority"
|
||||||
value={formData.priority}
|
value={formData.priority}
|
||||||
|
|
@ -327,13 +289,11 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
value={formData.activityDate}
|
value={formData.activityDate}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.activityDate ? "border-red-500" : "border-gray-300"
|
errors.activityDate ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
{errors.activityDate && (
|
{errors.activityDate && (
|
||||||
<p className="text-red-500 text-sm mt-1">
|
<p className="text-red-500 text-sm mt-1">{errors.activityDate}</p>
|
||||||
{errors.activityDate}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -376,19 +336,15 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
min="1"
|
min="1"
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.duration ? "border-red-500" : "border-gray-300"
|
errors.duration ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="60"
|
placeholder="60"
|
||||||
/>
|
/>
|
||||||
{errors.duration && (
|
{errors.duration && <p className="text-red-500 text-sm mt-1">{errors.duration}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.duration}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Sorumlu *</label>
|
||||||
Sorumlu *
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={formData.assignedTo}
|
value={formData.assignedTo}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
|
|
@ -402,16 +358,12 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
{errors.assignedTo && (
|
{errors.assignedTo && (
|
||||||
<p className="text-red-500 text-sm mt-1">
|
<p className="text-red-500 text-sm mt-1">{errors.assignedTo}</p>
|
||||||
{errors.assignedTo}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Katılımcılar</label>
|
||||||
Katılımcılar
|
|
||||||
</label>
|
|
||||||
<MultiSelectEmployee
|
<MultiSelectEmployee
|
||||||
selectedEmployees={formData.participants}
|
selectedEmployees={formData.participants}
|
||||||
onChange={(employeeIds) =>
|
onChange={(employeeIds) =>
|
||||||
|
|
@ -426,9 +378,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Durum</label>
|
||||||
Durum
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="status"
|
name="status"
|
||||||
value={formData.status}
|
value={formData.status}
|
||||||
|
|
@ -454,9 +404,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Takip Tarihi</label>
|
||||||
Takip Tarihi
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
name="followUpDate"
|
name="followUpDate"
|
||||||
|
|
@ -482,9 +430,7 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Sonuç</label>
|
||||||
Sonuç
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
name="outcome"
|
name="outcome"
|
||||||
value={formData.outcome}
|
value={formData.outcome}
|
||||||
|
|
@ -523,13 +469,13 @@ const ActivityForm: React.FC<ActivityFormProps> = ({
|
||||||
type="submit"
|
type="submit"
|
||||||
className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
{mode === "create" ? "Oluştur" : "Güncelle"}
|
{mode === 'create' ? 'Oluştur' : 'Güncelle'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default ActivityForm;
|
export default ActivityForm
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from 'react-router-dom'
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import {
|
import {
|
||||||
FaUserCheck,
|
FaUserCheck,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
|
|
@ -19,62 +19,55 @@ import {
|
||||||
FaGlobe,
|
FaGlobe,
|
||||||
FaUser,
|
FaUser,
|
||||||
FaChartLine,
|
FaChartLine,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import classNames from "classnames";
|
import classNames from 'classnames'
|
||||||
import { CustomerSegmentEnum } from "../../../types/crm";
|
import { CustomerSegmentEnum } from '../../../types/crm'
|
||||||
import dayjs from "dayjs";
|
import dayjs from 'dayjs'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import { BusinessPartyStatusEnum, PartyType } from "../../../types/common";
|
import { BusinessPartyStatusEnum, PartyType } from '../../../types/common'
|
||||||
import {
|
import {
|
||||||
getBusinessPartyStatusColor,
|
getBusinessPartyStatusColor,
|
||||||
getBusinessPartyStatusName,
|
getBusinessPartyStatusName,
|
||||||
getCustomerSegmentName,
|
getCustomerSegmentName,
|
||||||
} from "../../../utils/erp";
|
} from '../../../utils/erp'
|
||||||
|
|
||||||
const CustomerCards: React.FC = () => {
|
const CustomerCards: React.FC = () => {
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [filterStatus, setFilterStatus] = useState("all");
|
const [filterStatus, setFilterStatus] = useState('all')
|
||||||
const [filterSegment, setFilterSegment] = useState("all");
|
const [filterSegment, setFilterSegment] = useState('all')
|
||||||
const [showFilters, setShowFilters] = useState(false);
|
const [showFilters, setShowFilters] = useState(false)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: customers,
|
data: customers,
|
||||||
isLoading,
|
isLoading,
|
||||||
error,
|
error,
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["customers", searchTerm, filterStatus, filterSegment],
|
queryKey: ['customers', searchTerm, filterStatus, filterSegment],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||||
|
|
||||||
const mockCustomers = mockBusinessParties.filter(
|
const mockCustomers = mockBusinessParties.filter(
|
||||||
(customer) => customer.partyType === PartyType.Customer
|
(customer) => customer.partyType === PartyType.Customer,
|
||||||
);
|
)
|
||||||
|
|
||||||
return mockCustomers.filter((customer) => {
|
return mockCustomers.filter((customer) => {
|
||||||
const matchesSearch =
|
const matchesSearch =
|
||||||
customer.code?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
customer.code?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
customer.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
customer.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
customer.primaryContact?.fullName
|
customer.primaryContact?.fullName?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
?.toLowerCase()
|
const matchesStatus = filterStatus === 'all' || customer.status === filterStatus
|
||||||
.includes(searchTerm.toLowerCase());
|
const matchesSegment = filterSegment === 'all' || customer.customerSegment === filterSegment
|
||||||
const matchesStatus =
|
return matchesSearch && matchesStatus && matchesSegment
|
||||||
filterStatus === "all" || customer.status === filterStatus;
|
})
|
||||||
const matchesSegment =
|
|
||||||
filterSegment === "all" || customer.customerSegment === filterSegment;
|
|
||||||
return matchesSearch && matchesStatus && matchesSegment;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
||||||
{[...Array(12)].map((_, index) => (
|
{[...Array(12)].map((_, index) => (
|
||||||
<div
|
<div key={index} className="bg-white rounded-xl shadow-sm border animate-pulse">
|
||||||
key={index}
|
|
||||||
className="bg-white rounded-xl shadow-sm border animate-pulse"
|
|
||||||
>
|
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<div className="flex items-center space-x-3">
|
<div className="flex items-center space-x-3">
|
||||||
|
|
@ -105,7 +98,7 @@ const CustomerCards: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
|
|
@ -113,12 +106,10 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
||||||
<span className="text-red-800">
|
<span className="text-red-800">Müşteriler yüklenirken hata oluştu.</span>
|
||||||
Müşteriler yüklenirken hata oluştu.
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -143,10 +134,10 @@ const CustomerCards: React.FC = () => {
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowFilters(!showFilters)}
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
|
'flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors',
|
||||||
showFilters
|
showFilters
|
||||||
? "border-blue-500 bg-blue-50 text-blue-700"
|
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||||
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
|
: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<FaFilter size={14} className="mr-2" />
|
<FaFilter size={14} className="mr-2" />
|
||||||
|
|
@ -156,7 +147,7 @@ const CustomerCards: React.FC = () => {
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<button
|
<button
|
||||||
onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
|
onClick={() => alert('Dışa aktarma özelliği yakında eklenecek')}
|
||||||
className="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"
|
className="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"
|
||||||
>
|
>
|
||||||
<FaDownload size={14} className="mr-2" />
|
<FaDownload size={14} className="mr-2" />
|
||||||
|
|
@ -178,18 +169,14 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="bg-white border border-gray-200 rounded-lg p-3">
|
<div className="bg-white border border-gray-200 rounded-lg p-3">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Durum</label>
|
||||||
Durum
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={filterStatus}
|
value={filterStatus}
|
||||||
onChange={(e) => setFilterStatus(e.target.value)}
|
onChange={(e) => setFilterStatus(e.target.value)}
|
||||||
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
>
|
>
|
||||||
<option value="all">Tümü</option>
|
<option value="all">Tümü</option>
|
||||||
<option value={BusinessPartyStatusEnum.Prospect}>
|
<option value={BusinessPartyStatusEnum.Prospect}>Potansiyel</option>
|
||||||
Potansiyel
|
|
||||||
</option>
|
|
||||||
<option value={BusinessPartyStatusEnum.Active}>Aktif</option>
|
<option value={BusinessPartyStatusEnum.Active}>Aktif</option>
|
||||||
<option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
|
<option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
|
||||||
<option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
|
<option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
|
||||||
|
|
@ -197,9 +184,7 @@ const CustomerCards: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Segment</label>
|
||||||
Segment
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={filterSegment}
|
value={filterSegment}
|
||||||
onChange={(e) => setFilterSegment(e.target.value)}
|
onChange={(e) => setFilterSegment(e.target.value)}
|
||||||
|
|
@ -216,9 +201,9 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="flex items-end">
|
<div className="flex items-end">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setFilterStatus("all");
|
setFilterStatus('all')
|
||||||
setFilterSegment("all");
|
setFilterSegment('all')
|
||||||
setSearchTerm("");
|
setSearchTerm('')
|
||||||
}}
|
}}
|
||||||
className="w-full px-4 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
className="w-full px-4 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
>
|
>
|
||||||
|
|
@ -240,11 +225,7 @@ const CustomerCards: React.FC = () => {
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Aktif Müşteri"
|
title="Aktif Müşteri"
|
||||||
value={
|
value={customers?.filter((c) => c.status === BusinessPartyStatusEnum.Active).length || 0}
|
||||||
customers?.filter(
|
|
||||||
(c) => c.status === BusinessPartyStatusEnum.Active
|
|
||||||
).length || 0
|
|
||||||
}
|
|
||||||
color="green"
|
color="green"
|
||||||
icon="FaUserCheck"
|
icon="FaUserCheck"
|
||||||
/>
|
/>
|
||||||
|
|
@ -252,9 +233,7 @@ const CustomerCards: React.FC = () => {
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Ciro"
|
title="Toplam Ciro"
|
||||||
value={`₺${
|
value={`₺${
|
||||||
customers
|
customers?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0).toLocaleString() || 0
|
||||||
?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0)
|
|
||||||
.toLocaleString() || 0
|
|
||||||
}`}
|
}`}
|
||||||
color="purple"
|
color="purple"
|
||||||
icon="FaDollarSign"
|
icon="FaDollarSign"
|
||||||
|
|
@ -265,10 +244,8 @@ const CustomerCards: React.FC = () => {
|
||||||
value={`₺${
|
value={`₺${
|
||||||
customers?.length
|
customers?.length
|
||||||
? Math.round(
|
? Math.round(
|
||||||
customers.reduce(
|
customers.reduce((acc, c) => acc + (c.averageOrderValue ?? 0), 0) /
|
||||||
(acc, c) => acc + (c.averageOrderValue ?? 0),
|
customers.length,
|
||||||
0
|
|
||||||
) / customers.length
|
|
||||||
).toLocaleString()
|
).toLocaleString()
|
||||||
: 0
|
: 0
|
||||||
}`}
|
}`}
|
||||||
|
|
@ -288,14 +265,14 @@ const CustomerCards: React.FC = () => {
|
||||||
{/* Status Indicator */}
|
{/* Status Indicator */}
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"absolute top-0 left-0 w-full h-1",
|
'absolute top-0 left-0 w-full h-1',
|
||||||
customer.status === BusinessPartyStatusEnum.Active
|
customer.status === BusinessPartyStatusEnum.Active
|
||||||
? "bg-green-500"
|
? 'bg-green-500'
|
||||||
: customer.status === BusinessPartyStatusEnum.Prospect
|
: customer.status === BusinessPartyStatusEnum.Prospect
|
||||||
? "bg-blue-500"
|
? 'bg-blue-500'
|
||||||
: customer.status === BusinessPartyStatusEnum.Blocked
|
: customer.status === BusinessPartyStatusEnum.Blocked
|
||||||
? "bg-red-500"
|
? 'bg-red-500'
|
||||||
: "bg-gray-400"
|
: 'bg-gray-400',
|
||||||
)}
|
)}
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
|
|
@ -317,8 +294,8 @@ const CustomerCards: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border",
|
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border',
|
||||||
getBusinessPartyStatusColor(customer.status!)
|
getBusinessPartyStatusColor(customer.status!),
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{getBusinessPartyStatusName(customer.status!)}
|
{getBusinessPartyStatusName(customer.status!)}
|
||||||
|
|
@ -331,9 +308,7 @@ const CustomerCards: React.FC = () => {
|
||||||
{customer.name}
|
{customer.name}
|
||||||
</h2>
|
</h2>
|
||||||
{customer.industry && (
|
{customer.industry && (
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
<p className="text-xs text-gray-500 mt-1">{customer.industry}</p>
|
||||||
{customer.industry}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -341,15 +316,11 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="space-y-1.5 mb-3 text-xs">
|
<div className="space-y-1.5 mb-3 text-xs">
|
||||||
<div className="flex items-center text-sm text-gray-600">
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
<FaUser className="w-4 h-4 mr-2 text-gray-400" />
|
<FaUser className="w-4 h-4 mr-2 text-gray-400" />
|
||||||
<span className="truncate">
|
<span className="truncate">{customer.primaryContact?.fullName}</span>
|
||||||
{customer.primaryContact?.fullName}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center text-sm text-gray-600">
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
<FaEnvelope className="w-4 h-4 mr-2 text-gray-400" />
|
<FaEnvelope className="w-4 h-4 mr-2 text-gray-400" />
|
||||||
<span className="truncate">
|
<span className="truncate">{customer.primaryContact?.email}</span>
|
||||||
{customer.primaryContact?.email}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{customer.primaryContact?.phone && (
|
{customer.primaryContact?.phone && (
|
||||||
<div className="flex items-center text-sm text-gray-600">
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
|
@ -384,17 +355,13 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="text-base font-bold text-green-700">
|
<div className="text-base font-bold text-green-700">
|
||||||
₺{(customer.totalRevenue! / 1000).toLocaleString()}K
|
₺{(customer.totalRevenue! / 1000).toLocaleString()}K
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-green-600 font-medium">
|
<div className="text-xs text-green-600 font-medium">Toplam Ciro</div>
|
||||||
Toplam Ciro
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center p-2 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg border border-blue-100">
|
<div className="text-center p-2 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg border border-blue-100">
|
||||||
<div className="text-base font-bold text-blue-700">
|
<div className="text-base font-bold text-blue-700">
|
||||||
₺{(customer.averageOrderValue! / 1000).toLocaleString()}K
|
₺{(customer.averageOrderValue! / 1000).toLocaleString()}K
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-blue-600 font-medium">
|
<div className="text-xs text-blue-600 font-medium">Ort. Sipariş</div>
|
||||||
Ort. Sipariş
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -402,16 +369,12 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="flex items-center justify-between text-xs text-gray-500 mb-3">
|
<div className="flex items-center justify-between text-xs text-gray-500 mb-3">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaStar className="w-4 h-4 text-yellow-500 mr-1" />
|
<FaStar className="w-4 h-4 text-yellow-500 mr-1" />
|
||||||
<span>
|
<span>LTV: ₺{(customer.lifetimeValue! / 1000000).toFixed(1)}M</span>
|
||||||
LTV: ₺{(customer.lifetimeValue! / 1000000).toFixed(1)}M
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{customer.lastOrderDate && (
|
{customer.lastOrderDate && (
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaCalendar className="w-4 h-4 mr-1" />
|
<FaCalendar className="w-4 h-4 mr-1" />
|
||||||
<span>
|
<span>{dayjs(customer.lastOrderDate).format('DD.MM.YY')}</span>
|
||||||
{dayjs(customer.lastOrderDate).format("DD.MM.YY")}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -419,9 +382,7 @@ const CustomerCards: React.FC = () => {
|
||||||
{/* Credit Limit Progress */}
|
{/* Credit Limit Progress */}
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<div className="flex justify-between text-xs mb-1">
|
<div className="flex justify-between text-xs mb-1">
|
||||||
<span className="text-gray-600 font-medium">
|
<span className="text-gray-600 font-medium">Kredi Kullanımı</span>
|
||||||
Kredi Kullanımı
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900">
|
<span className="font-semibold text-gray-900">
|
||||||
₺{customer.creditLimit.toLocaleString()}
|
₺{customer.creditLimit.toLocaleString()}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -429,24 +390,17 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
|
<div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"h-2.5 rounded-full transition-all duration-500",
|
'h-2.5 rounded-full transition-all duration-500',
|
||||||
Math.min(
|
Math.min((customer.totalRevenue! / customer.creditLimit) * 100, 100) > 80
|
||||||
(customer.totalRevenue! / customer.creditLimit) * 100,
|
? 'bg-gradient-to-r from-red-500 to-red-600'
|
||||||
100
|
: Math.min((customer.totalRevenue! / customer.creditLimit) * 100, 100) > 60
|
||||||
) > 80
|
? 'bg-gradient-to-r from-yellow-400 to-yellow-500'
|
||||||
? "bg-gradient-to-r from-red-500 to-red-600"
|
: 'bg-gradient-to-r from-green-500 to-green-600',
|
||||||
: Math.min(
|
|
||||||
(customer.totalRevenue! / customer.creditLimit) *
|
|
||||||
100,
|
|
||||||
100
|
|
||||||
) > 60
|
|
||||||
? "bg-gradient-to-r from-yellow-400 to-yellow-500"
|
|
||||||
: "bg-gradient-to-r from-green-500 to-green-600"
|
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
width: `${Math.min(
|
width: `${Math.min(
|
||||||
(customer.totalRevenue! / customer.creditLimit) * 100,
|
(customer.totalRevenue! / customer.creditLimit) * 100,
|
||||||
100
|
100,
|
||||||
)}%`,
|
)}%`,
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
|
|
@ -454,10 +408,7 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
<span>₺0</span>
|
<span>₺0</span>
|
||||||
<span className="font-medium">
|
<span className="font-medium">
|
||||||
{Math.round(
|
{Math.round((customer.totalRevenue! / customer.creditLimit) * 100)}% kullanıldı
|
||||||
(customer.totalRevenue! / customer.creditLimit) * 100
|
|
||||||
)}
|
|
||||||
% kullanıldı
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -485,17 +436,15 @@ const CustomerCards: React.FC = () => {
|
||||||
<div className="flex items-center text-xs">
|
<div className="flex items-center text-xs">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex items-center px-2 py-1 rounded-full text-xs font-medium",
|
'flex items-center px-2 py-1 rounded-full text-xs font-medium',
|
||||||
customer.status === BusinessPartyStatusEnum.Active
|
customer.status === BusinessPartyStatusEnum.Active
|
||||||
? "bg-green-100 text-green-700"
|
? 'bg-green-100 text-green-700'
|
||||||
: "bg-gray-100 text-gray-600"
|
: 'bg-gray-100 text-gray-600',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<FaChartLine className="w-3 h-3 mr-1" />
|
<FaChartLine className="w-3 h-3 mr-1" />
|
||||||
<span>
|
<span>
|
||||||
{customer.status === BusinessPartyStatusEnum.Active
|
{customer.status === BusinessPartyStatusEnum.Active ? 'Aktif' : 'Durgun'}
|
||||||
? "Aktif"
|
|
||||||
: "Durgun"}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -509,12 +458,9 @@ const CustomerCards: React.FC = () => {
|
||||||
{(!customers || customers.length === 0) && (
|
{(!customers || customers.length === 0) && (
|
||||||
<div className="text-center py-10">
|
<div className="text-center py-10">
|
||||||
<FaUserCheck className="mx-auto h-12 w-12 text-gray-400 mb-3" />
|
<FaUserCheck className="mx-auto h-12 w-12 text-gray-400 mb-3" />
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Müşteri bulunamadı</h3>
|
||||||
Müşteri bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-500 mb-4">
|
<p className="text-sm text-gray-500 mb-4">
|
||||||
Yeni müşteri ekleyerek başlayın veya arama kriterlerinizi
|
Yeni müşteri ekleyerek başlayın veya arama kriterlerinizi değiştirin.
|
||||||
değiştirin.
|
|
||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
to="/admin/crm/customers/new"
|
to="/admin/crm/customers/new"
|
||||||
|
|
@ -526,7 +472,7 @@ const CustomerCards: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default CustomerCards;
|
export default CustomerCards
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState, useEffect, useCallback } from "react";
|
import React, { useState, useEffect, useCallback } from 'react'
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
FaSave,
|
FaSave,
|
||||||
FaTimes,
|
FaTimes,
|
||||||
|
|
@ -8,553 +8,499 @@ import {
|
||||||
FaMapMarkerAlt,
|
FaMapMarkerAlt,
|
||||||
FaCreditCard,
|
FaCreditCard,
|
||||||
FaEnvelope,
|
FaEnvelope,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import LoadingSpinner from "../../../components/common/LoadingSpinner";
|
import LoadingSpinner from '../../../components/common/LoadingSpinner'
|
||||||
import {
|
import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
|
||||||
mockBusinessParties,
|
import { BusinessParty } from '../../../types/common'
|
||||||
mockBusinessPartyNew,
|
import { Container } from '@/components/shared'
|
||||||
} from "../../../mocks/mockBusinessParties";
|
|
||||||
import { BusinessParty } from "../../../types/common";
|
|
||||||
|
|
||||||
interface ValidationErrors {
|
interface ValidationErrors {
|
||||||
[key: string]: string;
|
[key: string]: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const CustomerForm: React.FC = () => {
|
const CustomerForm: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>()
|
||||||
const isEdit = Boolean(id);
|
const isEdit = Boolean(id)
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false)
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false)
|
||||||
const [errors, setErrors] = useState<ValidationErrors>({});
|
const [errors, setErrors] = useState<ValidationErrors>({})
|
||||||
|
|
||||||
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);
|
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
|
||||||
|
|
||||||
const loadFormData = useCallback(async () => {
|
const loadFormData = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
if (isEdit && id) {
|
if (isEdit && id) {
|
||||||
// Simulate API call
|
// Simulate API call
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
// Mock customer data
|
// Mock customer data
|
||||||
const mockCustomer = mockBusinessParties.find(
|
const mockCustomer = mockBusinessParties.find((cust) => cust.id === id)!
|
||||||
(cust) => cust.id === id
|
setFormData(mockCustomer)
|
||||||
)!;
|
|
||||||
setFormData(mockCustomer);
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error loading form data:", error);
|
console.error('Error loading form data:', error)
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}, [isEdit, id]);
|
}, [isEdit, id])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadFormData();
|
loadFormData()
|
||||||
}, [loadFormData]);
|
}, [loadFormData])
|
||||||
|
|
||||||
const validateForm = (): boolean => {
|
const validateForm = (): boolean => {
|
||||||
const newErrors: ValidationErrors = {};
|
const newErrors: ValidationErrors = {}
|
||||||
|
|
||||||
if (!formData.code.trim()) {
|
if (!formData.code.trim()) {
|
||||||
newErrors.code = "Müşteri kodu zorunludur";
|
newErrors.code = 'Müşteri kodu zorunludur'
|
||||||
}
|
}
|
||||||
if (!formData.name.trim()) {
|
if (!formData.name.trim()) {
|
||||||
newErrors.name = "Şirket adı zorunludur";
|
newErrors.name = 'Şirket adı zorunludur'
|
||||||
}
|
}
|
||||||
if (formData.creditLimit < 0) {
|
if (formData.creditLimit < 0) {
|
||||||
newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz";
|
newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz"
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleInputChange = (
|
const handleInputChange = (field: keyof BusinessParty, value: string | number | boolean) => {
|
||||||
field: keyof BusinessParty,
|
|
||||||
value: string | number | boolean
|
|
||||||
) => {
|
|
||||||
setFormData((prev) => ({
|
setFormData((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[field]: value,
|
[field]: value,
|
||||||
}));
|
}))
|
||||||
|
|
||||||
// Clear error when user starts typing
|
// Clear error when user starts typing
|
||||||
if (errors[field]) {
|
if (errors[field]) {
|
||||||
setErrors((prev) => ({
|
setErrors((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[field]: "",
|
[field]: '',
|
||||||
}));
|
}))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if (!validateForm()) {
|
if (!validateForm()) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
setSaving(true);
|
setSaving(true)
|
||||||
try {
|
try {
|
||||||
// Simulate API call
|
// Simulate API call
|
||||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||||
|
|
||||||
console.log("Customer data:", {
|
console.log('Customer data:', {
|
||||||
...formData,
|
...formData,
|
||||||
id: isEdit ? id : undefined,
|
id: isEdit ? id : undefined,
|
||||||
});
|
})
|
||||||
|
|
||||||
// Show success message
|
// Show success message
|
||||||
alert(
|
alert(isEdit ? 'Müşteri başarıyla güncellendi!' : 'Müşteri başarıyla oluşturuldu!')
|
||||||
isEdit
|
|
||||||
? "Müşteri başarıyla güncellendi!"
|
|
||||||
: "Müşteri başarıyla oluşturuldu!"
|
|
||||||
);
|
|
||||||
|
|
||||||
// Navigate back to list
|
// Navigate back to list
|
||||||
navigate("/admin/crm");
|
navigate('/admin/crm')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error saving customer:", error);
|
console.error('Error saving customer:', error)
|
||||||
alert("Bir hata oluştu. Lütfen tekrar deneyin.");
|
alert('Bir hata oluştu. Lütfen tekrar deneyin.')
|
||||||
} finally {
|
} finally {
|
||||||
setSaving(false);
|
setSaving(false)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
navigate("/admin/crm");
|
navigate('/admin/crm')
|
||||||
};
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <LoadingSpinner />;
|
return <LoadingSpinner />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-4 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<div>
|
||||||
{isEdit ? "Müşteri Düzenle" : "Yeni Müşteri"}
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
</h2>
|
{isEdit ? 'Müşteri Düzenle' : 'Yeni Müşteri'}
|
||||||
<p className="text-sm text-gray-600">
|
</h2>
|
||||||
{isEdit
|
<p className="text-sm text-gray-600">
|
||||||
? "Mevcut müşteri bilgilerini güncelleyin"
|
{isEdit ? 'Mevcut müşteri bilgilerini güncelleyin' : 'Yeni müşteri bilgilerini girin'}
|
||||||
: "Yeni müşteri bilgilerini girin"}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
{/* Form */}
|
export default CustomerForm
|
||||||
<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;
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState, useEffect, useCallback } from "react";
|
import React, { useState, useEffect, useCallback } from 'react'
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
FaSave,
|
FaSave,
|
||||||
FaTimes,
|
FaTimes,
|
||||||
|
|
@ -8,546 +8,497 @@ import {
|
||||||
FaMapMarkerAlt,
|
FaMapMarkerAlt,
|
||||||
FaCreditCard,
|
FaCreditCard,
|
||||||
FaEnvelope,
|
FaEnvelope,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import LoadingSpinner from "../../../components/common/LoadingSpinner";
|
import LoadingSpinner from '../../../components/common/LoadingSpinner'
|
||||||
import { BusinessParty } from "../../../types/common";
|
import { BusinessParty } from '../../../types/common'
|
||||||
import { mockBusinessPartyNew } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
interface ValidationErrors {
|
interface ValidationErrors {
|
||||||
[key: string]: string;
|
[key: string]: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const CustomerForm: React.FC = () => {
|
const CustomerForm: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>()
|
||||||
const isEdit = Boolean(id);
|
const isEdit = Boolean(id)
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false)
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false)
|
||||||
const [errors, setErrors] = useState<ValidationErrors>({});
|
const [errors, setErrors] = useState<ValidationErrors>({})
|
||||||
|
|
||||||
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);
|
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
|
||||||
|
|
||||||
const loadFormData = useCallback(async () => {
|
const loadFormData = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
if (isEdit && id) {
|
if (isEdit && id) {
|
||||||
// Simulate API call
|
// Simulate API call
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
setFormData(mockBusinessPartyNew);
|
setFormData(mockBusinessPartyNew)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error loading form data:", error);
|
console.error('Error loading form data:', error)
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}, [isEdit, id]);
|
}, [isEdit, id])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadFormData();
|
loadFormData()
|
||||||
}, [loadFormData]);
|
}, [loadFormData])
|
||||||
|
|
||||||
const validateForm = (): boolean => {
|
const validateForm = (): boolean => {
|
||||||
const newErrors: ValidationErrors = {};
|
const newErrors: ValidationErrors = {}
|
||||||
|
|
||||||
if (!formData.code.trim()) {
|
if (!formData.code.trim()) {
|
||||||
newErrors.code = "Müşteri kodu zorunludur";
|
newErrors.code = 'Müşteri kodu zorunludur'
|
||||||
}
|
}
|
||||||
if (!formData.name.trim()) {
|
if (!formData.name.trim()) {
|
||||||
newErrors.name = "Şirket adı zorunludur";
|
newErrors.name = 'Şirket adı zorunludur'
|
||||||
}
|
}
|
||||||
if (formData.creditLimit < 0) {
|
if (formData.creditLimit < 0) {
|
||||||
newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz";
|
newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz"
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleInputChange = (
|
const handleInputChange = (field: keyof BusinessParty, value: string | number | boolean) => {
|
||||||
field: keyof BusinessParty,
|
|
||||||
value: string | number | boolean
|
|
||||||
) => {
|
|
||||||
setFormData((prev) => ({
|
setFormData((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[field]: value,
|
[field]: value,
|
||||||
}));
|
}))
|
||||||
|
|
||||||
// Clear error when user starts typing
|
// Clear error when user starts typing
|
||||||
if (errors[field]) {
|
if (errors[field]) {
|
||||||
setErrors((prev) => ({
|
setErrors((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[field]: "",
|
[field]: '',
|
||||||
}));
|
}))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if (!validateForm()) {
|
if (!validateForm()) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
setSaving(true);
|
setSaving(true)
|
||||||
try {
|
try {
|
||||||
// Simulate API call
|
// Simulate API call
|
||||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||||
|
|
||||||
console.log("Customer data:", {
|
console.log('Customer data:', {
|
||||||
...formData,
|
...formData,
|
||||||
id: isEdit ? id : undefined,
|
id: isEdit ? id : undefined,
|
||||||
});
|
})
|
||||||
|
|
||||||
// Show success message
|
// Show success message
|
||||||
alert(
|
alert(isEdit ? 'Müşteri başarıyla güncellendi!' : 'Müşteri başarıyla oluşturuldu!')
|
||||||
isEdit
|
|
||||||
? "Müşteri başarıyla güncellendi!"
|
|
||||||
: "Müşteri başarıyla oluşturuldu!"
|
|
||||||
);
|
|
||||||
|
|
||||||
// Navigate back to list
|
// Navigate back to list
|
||||||
navigate("/admin/crm");
|
navigate('/admin/crm')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error saving customer:", error);
|
console.error('Error saving customer:', error)
|
||||||
alert("Bir hata oluştu. Lütfen tekrar deneyin.");
|
alert('Bir hata oluştu. Lütfen tekrar deneyin.')
|
||||||
} finally {
|
} finally {
|
||||||
setSaving(false);
|
setSaving(false)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
navigate("/admin/crm");
|
navigate('/admin/crm')
|
||||||
};
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <LoadingSpinner />;
|
return <LoadingSpinner />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-4 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<div>
|
||||||
{isEdit ? "Müşteri Düzenle" : "Yeni Müşteri"}
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
</h2>
|
{isEdit ? 'Müşteri Düzenle' : 'Yeni Müşteri'}
|
||||||
<p className="text-sm text-gray-600">
|
</h2>
|
||||||
{isEdit
|
<p className="text-sm text-gray-600">
|
||||||
? "Mevcut müşteri bilgilerini güncelleyin"
|
{isEdit ? 'Mevcut müşteri bilgilerini güncelleyin' : 'Yeni müşteri bilgilerini girin'}
|
||||||
: "Yeni müşteri bilgilerini girin"}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
{/* Form */}
|
export default CustomerForm
|
||||||
<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;
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from 'react-router-dom'
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import {
|
import {
|
||||||
FaUserCheck,
|
FaUserCheck,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
|
|
@ -16,54 +16,50 @@ import {
|
||||||
FaExclamationTriangle,
|
FaExclamationTriangle,
|
||||||
FaStar,
|
FaStar,
|
||||||
FaCalendar,
|
FaCalendar,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import classNames from "classnames";
|
import classNames from 'classnames'
|
||||||
import { CustomerSegmentEnum } from "../../../types/crm";
|
import { CustomerSegmentEnum } from '../../../types/crm'
|
||||||
import dayjs from "dayjs";
|
import dayjs from 'dayjs'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import { BusinessPartyStatusEnum, PartyType } from "../../../types/common";
|
import { BusinessPartyStatusEnum, PartyType } from '../../../types/common'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import {
|
import {
|
||||||
getBusinessPartyStatusColor,
|
getBusinessPartyStatusColor,
|
||||||
getBusinessPartyStatusName,
|
getBusinessPartyStatusName,
|
||||||
getCustomerSegmentColor,
|
getCustomerSegmentColor,
|
||||||
getCustomerSegmentName,
|
getCustomerSegmentName,
|
||||||
} from "../../../utils/erp";
|
} from '../../../utils/erp'
|
||||||
|
|
||||||
const CustomerList: React.FC = () => {
|
const CustomerList: React.FC = () => {
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [filterStatus, setFilterStatus] = useState("all");
|
const [filterStatus, setFilterStatus] = useState('all')
|
||||||
const [filterSegment, setFilterSegment] = useState("all");
|
const [filterSegment, setFilterSegment] = useState('all')
|
||||||
const [showFilters, setShowFilters] = useState(false);
|
const [showFilters, setShowFilters] = useState(false)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: customers,
|
data: customers,
|
||||||
isLoading,
|
isLoading,
|
||||||
error,
|
error,
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["customers", searchTerm, filterStatus, filterSegment],
|
queryKey: ['customers', searchTerm, filterStatus, filterSegment],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||||
|
|
||||||
const mockCustomers = mockBusinessParties.filter(
|
const mockCustomers = mockBusinessParties.filter(
|
||||||
(customer) => customer.partyType === PartyType.Customer
|
(customer) => customer.partyType === PartyType.Customer,
|
||||||
);
|
)
|
||||||
|
|
||||||
return mockCustomers.filter((customer) => {
|
return mockCustomers.filter((customer) => {
|
||||||
const matchesSearch =
|
const matchesSearch =
|
||||||
customer.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
customer.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
customer.primaryContact?.fullName
|
customer.primaryContact?.fullName.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
.toLowerCase()
|
const matchesStatus = filterStatus === 'all' || customer.status === filterStatus
|
||||||
.includes(searchTerm.toLowerCase());
|
const matchesSegment = filterSegment === 'all' || customer.customerSegment === filterSegment
|
||||||
const matchesStatus =
|
return matchesSearch && matchesStatus && matchesSegment
|
||||||
filterStatus === "all" || customer.status === filterStatus;
|
})
|
||||||
const matchesSegment =
|
|
||||||
filterSegment === "all" || customer.customerSegment === filterSegment;
|
|
||||||
return matchesSearch && matchesStatus && matchesSegment;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -71,7 +67,7 @@ const CustomerList: React.FC = () => {
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||||
<span className="ml-3 text-gray-600">Müşteriler yükleniyor...</span>
|
<span className="ml-3 text-gray-600">Müşteriler yükleniyor...</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
|
|
@ -79,12 +75,10 @@ const CustomerList: React.FC = () => {
|
||||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
||||||
<span className="text-red-800">
|
<span className="text-red-800">Müşteriler yüklenirken hata oluştu.</span>
|
||||||
Müşteriler yüklenirken hata oluştu.
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -109,10 +103,10 @@ const CustomerList: React.FC = () => {
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowFilters(!showFilters)}
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
|
'flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors',
|
||||||
showFilters
|
showFilters
|
||||||
? "border-blue-500 bg-blue-50 text-blue-700"
|
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||||
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
|
: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<FaFilter size={14} className="mr-2" />
|
<FaFilter size={14} className="mr-2" />
|
||||||
|
|
@ -122,7 +116,7 @@ const CustomerList: React.FC = () => {
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<button
|
<button
|
||||||
onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
|
onClick={() => alert('Dışa aktarma özelliği yakında eklenecek')}
|
||||||
className="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"
|
className="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"
|
||||||
>
|
>
|
||||||
<FaDownload size={14} className="mr-2" />
|
<FaDownload size={14} className="mr-2" />
|
||||||
|
|
@ -144,18 +138,14 @@ const CustomerList: React.FC = () => {
|
||||||
<div className="bg-white border border-gray-200 rounded-lg p-3">
|
<div className="bg-white border border-gray-200 rounded-lg p-3">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Durum</label>
|
||||||
Durum
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={filterStatus}
|
value={filterStatus}
|
||||||
onChange={(e) => setFilterStatus(e.target.value)}
|
onChange={(e) => setFilterStatus(e.target.value)}
|
||||||
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
>
|
>
|
||||||
<option value="all">Tümü</option>
|
<option value="all">Tümü</option>
|
||||||
<option value={BusinessPartyStatusEnum.Prospect}>
|
<option value={BusinessPartyStatusEnum.Prospect}>Potansiyel</option>
|
||||||
Potansiyel
|
|
||||||
</option>
|
|
||||||
<option value={BusinessPartyStatusEnum.Active}>Aktif</option>
|
<option value={BusinessPartyStatusEnum.Active}>Aktif</option>
|
||||||
<option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
|
<option value={BusinessPartyStatusEnum.Inactive}>Pasif</option>
|
||||||
<option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
|
<option value={BusinessPartyStatusEnum.Blocked}>Blokeli</option>
|
||||||
|
|
@ -163,9 +153,7 @@ const CustomerList: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Segment</label>
|
||||||
Segment
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={filterSegment}
|
value={filterSegment}
|
||||||
onChange={(e) => setFilterSegment(e.target.value)}
|
onChange={(e) => setFilterSegment(e.target.value)}
|
||||||
|
|
@ -182,9 +170,9 @@ const CustomerList: React.FC = () => {
|
||||||
<div className="flex items-end">
|
<div className="flex items-end">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setFilterStatus("all");
|
setFilterStatus('all')
|
||||||
setFilterSegment("all");
|
setFilterSegment('all')
|
||||||
setSearchTerm("");
|
setSearchTerm('')
|
||||||
}}
|
}}
|
||||||
className="w-full px-4 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
className="w-full px-4 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
>
|
>
|
||||||
|
|
@ -206,11 +194,7 @@ const CustomerList: React.FC = () => {
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Aktif Müşteri"
|
title="Aktif Müşteri"
|
||||||
value={
|
value={customers?.filter((c) => c.status === BusinessPartyStatusEnum.Active).length || 0}
|
||||||
customers?.filter(
|
|
||||||
(c) => c.status === BusinessPartyStatusEnum.Active
|
|
||||||
).length || 0
|
|
||||||
}
|
|
||||||
color="green"
|
color="green"
|
||||||
icon="FaUserCheck"
|
icon="FaUserCheck"
|
||||||
/>
|
/>
|
||||||
|
|
@ -218,9 +202,7 @@ const CustomerList: React.FC = () => {
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Ciro"
|
title="Toplam Ciro"
|
||||||
value={`₺${
|
value={`₺${
|
||||||
customers
|
customers?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0).toLocaleString() || 0
|
||||||
?.reduce((acc, c) => acc + (c.totalRevenue ?? 0), 0)
|
|
||||||
.toLocaleString() || 0
|
|
||||||
}`}
|
}`}
|
||||||
color="purple"
|
color="purple"
|
||||||
icon="FaDollarSign"
|
icon="FaDollarSign"
|
||||||
|
|
@ -231,10 +213,8 @@ const CustomerList: React.FC = () => {
|
||||||
value={`₺${
|
value={`₺${
|
||||||
customers?.length
|
customers?.length
|
||||||
? Math.round(
|
? Math.round(
|
||||||
customers.reduce(
|
customers.reduce((acc, c) => acc + (c.averageOrderValue ?? 0), 0) /
|
||||||
(acc, c) => acc + (c.averageOrderValue ?? 0),
|
customers.length,
|
||||||
0
|
|
||||||
) / customers.length
|
|
||||||
).toLocaleString()
|
).toLocaleString()
|
||||||
: 0
|
: 0
|
||||||
}`}
|
}`}
|
||||||
|
|
@ -279,10 +259,7 @@ const CustomerList: React.FC = () => {
|
||||||
|
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
{customers?.map((customer) => (
|
{customers?.map((customer) => (
|
||||||
<tr
|
<tr key={customer.id} className="hover:bg-gray-50 transition-colors">
|
||||||
key={customer.id}
|
|
||||||
className="hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
<td className="px-4 py-3">
|
<td className="px-4 py-3">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="flex-shrink-0 h-8 w-8">
|
<div className="flex-shrink-0 h-8 w-8">
|
||||||
|
|
@ -291,16 +268,10 @@ const CustomerList: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-4">
|
<div className="ml-4">
|
||||||
<div className="text-xs font-medium text-gray-900">
|
<div className="text-xs font-medium text-gray-900">{customer.code}</div>
|
||||||
{customer.code}
|
<div className="text-sm text-gray-500">{customer.name}</div>
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{customer.name}
|
|
||||||
</div>
|
|
||||||
{customer.industry && (
|
{customer.industry && (
|
||||||
<div className="text-xs text-gray-400 mt-1">
|
<div className="text-xs text-gray-400 mt-1">{customer.industry}</div>
|
||||||
{customer.industry}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -332,26 +303,26 @@ const CustomerList: React.FC = () => {
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-sm font-medium",
|
'text-sm font-medium',
|
||||||
getCustomerSegmentColor(
|
getCustomerSegmentColor(
|
||||||
customer.customerSegment || CustomerSegmentEnum.SMB
|
customer.customerSegment || CustomerSegmentEnum.SMB,
|
||||||
)
|
),
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{getCustomerSegmentName(
|
{getCustomerSegmentName(
|
||||||
customer.customerSegment || CustomerSegmentEnum.SMB
|
customer.customerSegment || CustomerSegmentEnum.SMB,
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
|
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
|
||||||
getBusinessPartyStatusColor(
|
getBusinessPartyStatusColor(
|
||||||
customer.status ?? BusinessPartyStatusEnum.Prospect
|
customer.status ?? BusinessPartyStatusEnum.Prospect,
|
||||||
)
|
),
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{getBusinessPartyStatusName(
|
{getBusinessPartyStatusName(
|
||||||
customer.status ?? BusinessPartyStatusEnum.Prospect
|
customer.status ?? BusinessPartyStatusEnum.Prospect,
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -363,15 +334,12 @@ const CustomerList: React.FC = () => {
|
||||||
₺{(customer.totalRevenue ?? 0).toLocaleString()}
|
₺{(customer.totalRevenue ?? 0).toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">
|
||||||
Ort. Sipariş: ₺
|
Ort. Sipariş: ₺{(customer.averageOrderValue ?? 0).toLocaleString()}
|
||||||
{(customer.averageOrderValue ?? 0).toLocaleString()}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<FaStar size={14} className="text-yellow-500 mr-1" />
|
<FaStar size={14} className="text-yellow-500 mr-1" />
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">
|
||||||
LTV: ₺
|
LTV: ₺{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}M
|
||||||
{((customer.lifetimeValue ?? 0) / 1000000).toFixed(1)}
|
|
||||||
M
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -381,9 +349,7 @@ const CustomerList: React.FC = () => {
|
||||||
<div className="text-sm font-medium text-gray-900">
|
<div className="text-sm font-medium text-gray-900">
|
||||||
₺{customer.creditLimit.toLocaleString()}
|
₺{customer.creditLimit.toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">{customer.paymentTerms}</div>
|
||||||
{customer.paymentTerms}
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td className="px-4 py-3">
|
<td className="px-4 py-3">
|
||||||
|
|
@ -391,7 +357,7 @@ const CustomerList: React.FC = () => {
|
||||||
{customer.lastOrderDate && (
|
{customer.lastOrderDate && (
|
||||||
<div className="flex items-center text-sm text-gray-900">
|
<div className="flex items-center text-sm text-gray-900">
|
||||||
<FaCalendar size={14} className="mr-1" />
|
<FaCalendar size={14} className="mr-1" />
|
||||||
{dayjs(customer.lastOrderDate).format("DD.MM.YYYY")}
|
{dayjs(customer.lastOrderDate).format('DD.MM.YYYY')}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="text-sm text-gray-500">Son sipariş</div>
|
<div className="text-sm text-gray-500">Son sipariş</div>
|
||||||
|
|
@ -426,12 +392,8 @@ const CustomerList: React.FC = () => {
|
||||||
{(!customers || customers.length === 0) && (
|
{(!customers || customers.length === 0) && (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<FaUserCheck className="mx-auto h-10 w-10 text-gray-400" />
|
<FaUserCheck className="mx-auto h-10 w-10 text-gray-400" />
|
||||||
<h3 className="mt-2 text-xs font-medium text-gray-900">
|
<h3 className="mt-2 text-xs font-medium text-gray-900">Müşteri bulunamadı</h3>
|
||||||
Müşteri bulunamadı
|
<p className="mt-1 text-xs text-gray-500">Yeni müşteri ekleyerek başlayın.</p>
|
||||||
</h3>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Yeni müşteri ekleyerek başlayın.
|
|
||||||
</p>
|
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<Link
|
<Link
|
||||||
to="/admin/crm/customers/new"
|
to="/admin/crm/customers/new"
|
||||||
|
|
@ -445,7 +407,7 @@ const CustomerList: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default CustomerList;
|
export default CustomerList
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,61 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import { FaList, FaTh } from "react-icons/fa";
|
import { FaList, FaTh } from 'react-icons/fa'
|
||||||
import classNames from "classnames";
|
import classNames from 'classnames'
|
||||||
import CustomerList from "./CustomerList";
|
import CustomerList from './CustomerList'
|
||||||
import CustomerCards from "./CustomerCards";
|
import CustomerCards from './CustomerCards'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
export type ViewMode = "list" | "cards";
|
export type ViewMode = 'list' | 'cards'
|
||||||
|
|
||||||
const CustomerListWithToggle: React.FC = () => {
|
const CustomerListWithToggle: React.FC = () => {
|
||||||
const [viewMode, setViewMode] = useState<ViewMode>("list");
|
const [viewMode, setViewMode] = useState<ViewMode>('list')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header with View Toggle */}
|
<div className="space-y-4 pt-2">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
{/* Header with View Toggle */}
|
||||||
<div>
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||||
<h1 className="text-xl font-bold text-gray-900">Müşteri Listesi</h1>
|
<div>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
<h1 className="text-xl font-bold text-gray-900">Müşteri Listesi</h1>
|
||||||
Müşteri listesi ve detay bilgileri
|
<p className="text-sm text-gray-600 mt-1">Müşteri listesi ve detay bilgileri</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* View Mode Toggle */}
|
{/* View Mode Toggle */}
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<div className="flex bg-gray-100 rounded-lg p-1">
|
<div className="flex bg-gray-100 rounded-lg p-1">
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode("list")}
|
onClick={() => setViewMode('list')}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
'flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
|
||||||
viewMode === "list"
|
viewMode === 'list'
|
||||||
? "bg-white text-gray-900 shadow-sm"
|
? 'bg-white text-gray-900 shadow-sm'
|
||||||
: "text-gray-600 hover:text-gray-900"
|
: 'text-gray-600 hover:text-gray-900',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<FaList className="w-4 h-4" />
|
<FaList className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode("cards")}
|
onClick={() => setViewMode('cards')}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
'flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
|
||||||
viewMode === "cards"
|
viewMode === 'cards'
|
||||||
? "bg-white text-gray-900 shadow-sm"
|
? 'bg-white text-gray-900 shadow-sm'
|
||||||
: "text-gray-600 hover:text-gray-900"
|
: 'text-gray-600 hover:text-gray-900',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<FaTh className="w-4 h-4" />
|
<FaTh className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="transition-all duration-200">
|
<div className="transition-all duration-200">
|
||||||
{viewMode === "list" ? <CustomerList /> : <CustomerCards />}
|
{viewMode === 'list' ? <CustomerList /> : <CustomerCards />}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default CustomerListWithToggle;
|
export default CustomerListWithToggle
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,17 +1,14 @@
|
||||||
import React from "react";
|
import React from 'react'
|
||||||
import { FaEdit, FaTrash, FaEye, FaBullseye } from "react-icons/fa";
|
import { FaEdit, FaTrash, FaEye, FaBullseye } from 'react-icons/fa'
|
||||||
import { CrmLostReason, CrmOpportunity } from "../../../types/crm";
|
import { CrmLostReason, CrmOpportunity } from '../../../types/crm'
|
||||||
import {
|
import { getLostReasonCategoryColor, getLostReasonCategoryText } from '../../../utils/erp'
|
||||||
getLostReasonCategoryColor,
|
|
||||||
getLostReasonCategoryText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
interface LossReasonCardViewProps {
|
interface LossReasonCardViewProps {
|
||||||
lossReasons: CrmLostReason[];
|
lossReasons: CrmLostReason[]
|
||||||
opportunities: CrmOpportunity[];
|
opportunities: CrmOpportunity[]
|
||||||
onEdit: (reason: CrmLostReason) => void;
|
onEdit: (reason: CrmLostReason) => void
|
||||||
onDelete: (id: string) => void;
|
onDelete: (id: string) => void
|
||||||
onView: (reason: CrmLostReason) => void;
|
onView: (reason: CrmLostReason) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
|
|
@ -22,15 +19,14 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
onView,
|
onView,
|
||||||
}) => {
|
}) => {
|
||||||
const getUsageCount = (reasonId: string) => {
|
const getUsageCount = (reasonId: string) => {
|
||||||
return opportunities.filter((opp) => opp.lostReason?.id === reasonId)
|
return opportunities.filter((opp) => opp.lostReason?.id === reasonId).length
|
||||||
.length;
|
}
|
||||||
};
|
|
||||||
|
|
||||||
const getLostValue = (reasonId: string) => {
|
const getLostValue = (reasonId: string) => {
|
||||||
return opportunities
|
return opportunities
|
||||||
.filter((opp) => opp.lostReason?.id === reasonId)
|
.filter((opp) => opp.lostReason?.id === reasonId)
|
||||||
.reduce((sum, opp) => sum + opp.estimatedValue, 0);
|
.reduce((sum, opp) => sum + opp.estimatedValue, 0)
|
||||||
};
|
}
|
||||||
|
|
||||||
if (lossReasons.length === 0) {
|
if (lossReasons.length === 0) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -38,21 +34,17 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
<FaBullseye className="w-8 h-8 text-gray-400" />
|
<FaBullseye className="w-8 h-8 text-gray-400" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Kayıp nedeni bulunamadı</h3>
|
||||||
Kayıp nedeni bulunamadı
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||||
{lossReasons.map((reason) => {
|
{lossReasons.map((reason) => {
|
||||||
const usageCount = getUsageCount(reason.id);
|
const usageCount = getUsageCount(reason.id)
|
||||||
const lostValue = getLostValue(reason.id);
|
const lostValue = getLostValue(reason.id)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
@ -63,21 +55,17 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
<div className="p-3 border-b">
|
<div className="p-3 border-b">
|
||||||
<div className="flex items-start justify-between mb-1">
|
<div className="flex items-start justify-between mb-1">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h3 className="font-semibold text-gray-900 text-sm">
|
<h3 className="font-semibold text-gray-900 text-sm">{reason.name}</h3>
|
||||||
{reason.name}
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-xs text-gray-500 font-mono">
|
<span className="text-xs text-gray-500 font-mono">{reason.code}</span>
|
||||||
{reason.code}
|
|
||||||
</span>
|
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
reason.isActive
|
reason.isActive
|
||||||
? "bg-green-100 text-green-800"
|
? 'bg-green-100 text-green-800'
|
||||||
: "bg-gray-100 text-gray-800"
|
: 'bg-gray-100 text-gray-800'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{reason.isActive ? "Aktif" : "Pasif"}
|
{reason.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -86,7 +74,7 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
{/* Category */}
|
{/* Category */}
|
||||||
<span
|
<span
|
||||||
className={`inline-block px-2 py-1 text-xs font-medium rounded-full ${getLostReasonCategoryColor(
|
className={`inline-block px-2 py-1 text-xs font-medium rounded-full ${getLostReasonCategoryColor(
|
||||||
reason.category
|
reason.category,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getLostReasonCategoryText(reason.category)}
|
{getLostReasonCategoryText(reason.category)}
|
||||||
|
|
@ -100,9 +88,9 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
<p
|
<p
|
||||||
className="text-xs text-gray-600 overflow-hidden flex-grow"
|
className="text-xs text-gray-600 overflow-hidden flex-grow"
|
||||||
style={{
|
style={{
|
||||||
display: "-webkit-box",
|
display: '-webkit-box',
|
||||||
WebkitLineClamp: 2,
|
WebkitLineClamp: 2,
|
||||||
WebkitBoxOrient: "vertical",
|
WebkitBoxOrient: 'vertical',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{reason.description}
|
{reason.description}
|
||||||
|
|
@ -116,9 +104,7 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
<FaBullseye className="w-3 h-3 text-gray-400" />
|
<FaBullseye className="w-3 h-3 text-gray-400" />
|
||||||
<span className="text-xs text-gray-500">Kullanım</span>
|
<span className="text-xs text-gray-500">Kullanım</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-bold text-gray-900">
|
<div className="text-sm font-bold text-gray-900">{usageCount}</div>
|
||||||
{usageCount}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-xs text-gray-500 mb-1">Kayıp Değer</div>
|
<div className="text-xs text-gray-500 mb-1">Kayıp Değer</div>
|
||||||
|
|
@ -154,10 +140,10 @@ const LossReasonCardView: React.FC<LossReasonCardViewProps> = ({
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default LossReasonCardView;
|
export default LossReasonCardView
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from 'react'
|
||||||
import { FaTimes, FaSave } from "react-icons/fa";
|
import { FaTimes, FaSave } from 'react-icons/fa'
|
||||||
import { CrmLostReason, LostReasonCategoryEnum } from "../../../types/crm";
|
import { CrmLostReason, LostReasonCategoryEnum } from '../../../types/crm'
|
||||||
import { getLostReasonCategoryText } from "../../../utils/erp";
|
import { getLostReasonCategoryText } from '../../../utils/erp'
|
||||||
|
|
||||||
interface LossReasonModalProps {
|
interface LossReasonModalProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean
|
||||||
onClose: () => void;
|
onClose: () => void
|
||||||
onSave: (reason: Partial<CrmLostReason>) => void;
|
onSave: (reason: Partial<CrmLostReason>) => void
|
||||||
editingReason?: CrmLostReason | null;
|
editingReason?: CrmLostReason | null
|
||||||
mode: "add" | "edit" | "view";
|
mode: 'add' | 'edit' | 'view'
|
||||||
}
|
}
|
||||||
|
|
||||||
const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
|
|
@ -19,102 +19,97 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
mode,
|
mode,
|
||||||
}) => {
|
}) => {
|
||||||
const [formData, setFormData] = useState<Partial<CrmLostReason>>({
|
const [formData, setFormData] = useState<Partial<CrmLostReason>>({
|
||||||
code: "",
|
code: '',
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
category: LostReasonCategoryEnum.Price,
|
category: LostReasonCategoryEnum.Price,
|
||||||
isActive: true,
|
isActive: true,
|
||||||
});
|
})
|
||||||
|
|
||||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
const [errors, setErrors] = useState<{ [key: string]: string }>({})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (editingReason) {
|
if (editingReason) {
|
||||||
setFormData(editingReason);
|
setFormData(editingReason)
|
||||||
} else {
|
} else {
|
||||||
setFormData({
|
setFormData({
|
||||||
code: "",
|
code: '',
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
category: LostReasonCategoryEnum.Price,
|
category: LostReasonCategoryEnum.Price,
|
||||||
isActive: true,
|
isActive: true,
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
setErrors({});
|
setErrors({})
|
||||||
}, [editingReason, isOpen]);
|
}, [editingReason, isOpen])
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
const newErrors: { [key: string]: string } = {};
|
const newErrors: { [key: string]: string } = {}
|
||||||
|
|
||||||
if (!formData.code?.trim()) {
|
if (!formData.code?.trim()) {
|
||||||
newErrors.code = "Kod zorunludur";
|
newErrors.code = 'Kod zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.name?.trim()) {
|
if (!formData.name?.trim()) {
|
||||||
newErrors.name = "Kayıp nedeni adı zorunludur";
|
newErrors.name = 'Kayıp nedeni adı zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.category) {
|
if (!formData.category) {
|
||||||
newErrors.category = "Kategori seçimi zorunludur";
|
newErrors.category = 'Kategori seçimi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if (mode === "view") {
|
if (mode === 'view') {
|
||||||
onClose();
|
onClose()
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (validateForm()) {
|
if (validateForm()) {
|
||||||
onSave(formData);
|
onSave(formData)
|
||||||
onClose();
|
onClose()
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleInputChange = (
|
const handleInputChange = (
|
||||||
field: keyof CrmLostReason,
|
field: keyof CrmLostReason,
|
||||||
value: string | boolean | LostReasonCategoryEnum
|
value: string | boolean | LostReasonCategoryEnum,
|
||||||
) => {
|
) => {
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||||
if (errors[field]) {
|
if (errors[field]) {
|
||||||
setErrors((prev) => ({ ...prev, [field]: "" }));
|
setErrors((prev) => ({ ...prev, [field]: '' }))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
if (!isOpen) return null;
|
if (!isOpen) return null
|
||||||
|
|
||||||
const getModalTitle = () => {
|
const getModalTitle = () => {
|
||||||
switch (mode) {
|
switch (mode) {
|
||||||
case "add":
|
case 'add':
|
||||||
return "Yeni Kayıp Nedeni";
|
return 'Yeni Kayıp Nedeni'
|
||||||
case "edit":
|
case 'edit':
|
||||||
return "Kayıp Nedeni Düzenle";
|
return 'Kayıp Nedeni Düzenle'
|
||||||
case "view":
|
case 'view':
|
||||||
return "Kayıp Nedeni Detayları";
|
return 'Kayıp Nedeni Detayları'
|
||||||
default:
|
default:
|
||||||
return "";
|
return ''
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const isReadOnly = mode === "view";
|
const isReadOnly = mode === 'view'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between p-3 border-b">
|
<div className="flex items-center justify-between p-3 border-b">
|
||||||
<h3 className="text-sm font-semibold text-gray-900">
|
<h3 className="text-sm font-semibold text-gray-900">{getModalTitle()}</h3>
|
||||||
{getModalTitle()}
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -124,60 +119,47 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{/* Code */}
|
{/* Code */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Kod *</label>
|
||||||
Kod *
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={formData.code || ""}
|
value={formData.code || ''}
|
||||||
onChange={(e) => handleInputChange("code", e.target.value)}
|
onChange={(e) => handleInputChange('code', e.target.value)}
|
||||||
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.code ? "border-red-500" : "border-gray-300"
|
errors.code ? 'border-red-500' : 'border-gray-300'
|
||||||
} ${isReadOnly ? "bg-gray-100" : ""}`}
|
} ${isReadOnly ? 'bg-gray-100' : ''}`}
|
||||||
placeholder="Örn: LR001"
|
placeholder="Örn: LR001"
|
||||||
readOnly={isReadOnly}
|
readOnly={isReadOnly}
|
||||||
/>
|
/>
|
||||||
{errors.code && (
|
{errors.code && <p className="text-red-500 text-sm mt-1">{errors.code}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.code}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Name */}
|
{/* Name */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Kayıp Nedeni *</label>
|
||||||
Kayıp Nedeni *
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={formData.name || ""}
|
value={formData.name || ''}
|
||||||
onChange={(e) => handleInputChange("name", e.target.value)}
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.name ? "border-red-500" : "border-gray-300"
|
errors.name ? 'border-red-500' : 'border-gray-300'
|
||||||
} ${isReadOnly ? "bg-gray-100" : ""}`}
|
} ${isReadOnly ? 'bg-gray-100' : ''}`}
|
||||||
placeholder="Kayıp nedeni adını girin"
|
placeholder="Kayıp nedeni adını girin"
|
||||||
readOnly={isReadOnly}
|
readOnly={isReadOnly}
|
||||||
/>
|
/>
|
||||||
{errors.name && (
|
{errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Category */}
|
{/* Category */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Kategori *</label>
|
||||||
Kategori *
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={formData.category || ""}
|
value={formData.category || ''}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleInputChange(
|
handleInputChange('category', e.target.value as LostReasonCategoryEnum)
|
||||||
"category",
|
|
||||||
e.target.value as LostReasonCategoryEnum
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.category ? "border-red-500" : "border-gray-300"
|
errors.category ? 'border-red-500' : 'border-gray-300'
|
||||||
} ${isReadOnly ? "bg-gray-100" : ""}`}
|
} ${isReadOnly ? 'bg-gray-100' : ''}`}
|
||||||
disabled={isReadOnly}
|
disabled={isReadOnly}
|
||||||
>
|
>
|
||||||
{Object.values(LostReasonCategoryEnum).map((category) => (
|
{Object.values(LostReasonCategoryEnum).map((category) => (
|
||||||
|
|
@ -186,24 +168,18 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
{errors.category && (
|
{errors.category && <p className="text-red-500 text-sm mt-1">{errors.category}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.category}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
value={formData.description || ""}
|
value={formData.description || ''}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||||
handleInputChange("description", e.target.value)
|
|
||||||
}
|
|
||||||
rows={2}
|
rows={2}
|
||||||
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
isReadOnly ? "bg-gray-100" : "border-gray-300"
|
isReadOnly ? 'bg-gray-100' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="Kayıp nedeni hakkında detaylı açıklama"
|
placeholder="Kayıp nedeni hakkında detaylı açıklama"
|
||||||
readOnly={isReadOnly}
|
readOnly={isReadOnly}
|
||||||
|
|
@ -216,16 +192,11 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="isActive"
|
id="isActive"
|
||||||
checked={formData.isActive || false}
|
checked={formData.isActive || false}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleInputChange('isActive', e.target.checked)}
|
||||||
handleInputChange("isActive", e.target.checked)
|
|
||||||
}
|
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
disabled={isReadOnly}
|
disabled={isReadOnly}
|
||||||
/>
|
/>
|
||||||
<label
|
<label htmlFor="isActive" className="text-sm font-medium text-gray-700">
|
||||||
htmlFor="isActive"
|
|
||||||
className="text-sm font-medium text-gray-700"
|
|
||||||
>
|
|
||||||
Aktif
|
Aktif
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -238,9 +209,9 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
||||||
>
|
>
|
||||||
{mode === "view" ? "Kapat" : "İptal"}
|
{mode === 'view' ? 'Kapat' : 'İptal'}
|
||||||
</button>
|
</button>
|
||||||
{mode !== "view" && (
|
{mode !== 'view' && (
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
|
@ -253,7 +224,7 @@ const LossReasonModal: React.FC<LossReasonModalProps> = ({
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default LossReasonModal;
|
export default LossReasonModal
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaPlus,
|
FaPlus,
|
||||||
FaEdit,
|
FaEdit,
|
||||||
|
|
@ -9,104 +9,86 @@ import {
|
||||||
FaTh,
|
FaTh,
|
||||||
FaList,
|
FaList,
|
||||||
FaTimes,
|
FaTimes,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import {
|
import { CrmLostReason, LostReasonCategoryEnum, CrmOpportunity } from '../../../types/crm'
|
||||||
CrmLostReason,
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
LostReasonCategoryEnum,
|
import LossReasonModal from './LossReasonModal'
|
||||||
CrmOpportunity,
|
import LossReasonCardView from './LossReasonCardView'
|
||||||
} from "../../../types/crm";
|
import { mockLossReasons } from '../../../mocks/mockLossReasons'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import { mockOpportunities } from '../../../mocks/mockOpportunities'
|
||||||
import LossReasonModal from "./LossReasonModal";
|
import Widget from '../../../components/common/Widget'
|
||||||
import LossReasonCardView from "./LossReasonCardView";
|
import { getLostReasonCategoryColor, getLostReasonCategoryText } from '../../../utils/erp'
|
||||||
import { mockLossReasons } from "../../../mocks/mockLossReasons";
|
import { Container } from '@/components/shared'
|
||||||
import { mockOpportunities } from "../../../mocks/mockOpportunities";
|
|
||||||
import Widget from "../../../components/common/Widget";
|
|
||||||
import {
|
|
||||||
getLostReasonCategoryColor,
|
|
||||||
getLostReasonCategoryText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
const LossReasons: React.FC = () => {
|
const LossReasons: React.FC = () => {
|
||||||
const [lossReasons, setLossReasons] =
|
const [lossReasons, setLossReasons] = useState<CrmLostReason[]>(mockLossReasons)
|
||||||
useState<CrmLostReason[]>(mockLossReasons);
|
const [opportunities] = useState<CrmOpportunity[]>(mockOpportunities)
|
||||||
const [opportunities] = useState<CrmOpportunity[]>(mockOpportunities);
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [selectedCategory, setSelectedCategory] = useState<LostReasonCategoryEnum | 'all'>('all')
|
||||||
const [selectedCategory, setSelectedCategory] = useState<
|
const [viewMode, setViewMode] = useState<'table' | 'card'>('table')
|
||||||
LostReasonCategoryEnum | "all"
|
|
||||||
>("all");
|
|
||||||
const [viewMode, setViewMode] = useState<"table" | "card">("table");
|
|
||||||
|
|
||||||
// Modal states
|
// Modal states
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
const [modalMode, setModalMode] = useState<"add" | "edit" | "view">("add");
|
const [modalMode, setModalMode] = useState<'add' | 'edit' | 'view'>('add')
|
||||||
const [editingReason, setEditingReason] = useState<CrmLostReason | null>(
|
const [editingReason, setEditingReason] = useState<CrmLostReason | null>(null)
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
// Delete modal states
|
// Delete modal states
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
|
||||||
const [reasonToDelete, setReasonToDelete] = useState<CrmLostReason | null>(
|
const [reasonToDelete, setReasonToDelete] = useState<CrmLostReason | null>(null)
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
setModalMode("add");
|
setModalMode('add')
|
||||||
setEditingReason(null);
|
setEditingReason(null)
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (reason: CrmLostReason) => {
|
const handleEdit = (reason: CrmLostReason) => {
|
||||||
setModalMode("edit");
|
setModalMode('edit')
|
||||||
setEditingReason(reason);
|
setEditingReason(reason)
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleView = (reason: CrmLostReason) => {
|
const handleView = (reason: CrmLostReason) => {
|
||||||
setModalMode("view");
|
setModalMode('view')
|
||||||
setEditingReason(reason);
|
setEditingReason(reason)
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
const reason = lossReasons.find((r) => r.id === id);
|
const reason = lossReasons.find((r) => r.id === id)
|
||||||
if (reason) {
|
if (reason) {
|
||||||
setReasonToDelete(reason);
|
setReasonToDelete(reason)
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSave = (reasonData: Partial<CrmLostReason>) => {
|
const handleSave = (reasonData: Partial<CrmLostReason>) => {
|
||||||
if (modalMode === "add") {
|
if (modalMode === 'add') {
|
||||||
const newReason: CrmLostReason = {
|
const newReason: CrmLostReason = {
|
||||||
id: Date.now().toString(),
|
id: Date.now().toString(),
|
||||||
code: reasonData.code || "",
|
code: reasonData.code || '',
|
||||||
name: reasonData.name || "",
|
name: reasonData.name || '',
|
||||||
description: reasonData.description || "",
|
description: reasonData.description || '',
|
||||||
category: reasonData.category || LostReasonCategoryEnum.Price,
|
category: reasonData.category || LostReasonCategoryEnum.Price,
|
||||||
isActive:
|
isActive: reasonData.isActive !== undefined ? reasonData.isActive : true,
|
||||||
reasonData.isActive !== undefined ? reasonData.isActive : true,
|
}
|
||||||
};
|
setLossReasons((prev) => [...prev, newReason])
|
||||||
setLossReasons((prev) => [...prev, newReason]);
|
} else if (modalMode === 'edit' && editingReason) {
|
||||||
} else if (modalMode === "edit" && editingReason) {
|
|
||||||
setLossReasons((prev) =>
|
setLossReasons((prev) =>
|
||||||
prev.map((reason) =>
|
prev.map((reason) =>
|
||||||
reason.id === editingReason.id
|
reason.id === editingReason.id ? ({ ...reason, ...reasonData } as CrmLostReason) : reason,
|
||||||
? ({ ...reason, ...reasonData } as CrmLostReason)
|
),
|
||||||
: reason
|
)
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const confirmDelete = () => {
|
const confirmDelete = () => {
|
||||||
if (reasonToDelete) {
|
if (reasonToDelete) {
|
||||||
setLossReasons((prev) =>
|
setLossReasons((prev) => prev.filter((reason) => reason.id !== reasonToDelete.id))
|
||||||
prev.filter((reason) => reason.id !== reasonToDelete.id)
|
setIsDeleteModalOpen(false)
|
||||||
);
|
setReasonToDelete(null)
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
setReasonToDelete(null);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredReasons = lossReasons.filter((reason) => {
|
const filteredReasons = lossReasons.filter((reason) => {
|
||||||
if (
|
if (
|
||||||
|
|
@ -114,26 +96,26 @@ const LossReasons: React.FC = () => {
|
||||||
!reason.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
!reason.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
||||||
!reason.code.toLowerCase().includes(searchTerm.toLowerCase())
|
!reason.code.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
) {
|
) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (selectedCategory !== "all" && reason.category !== selectedCategory) {
|
if (selectedCategory !== 'all' && reason.category !== selectedCategory) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
const columns: Column<CrmLostReason>[] = [
|
const columns: Column<CrmLostReason>[] = [
|
||||||
{
|
{
|
||||||
key: "code",
|
key: 'code',
|
||||||
header: "Kod",
|
header: 'Kod',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (reason: CrmLostReason) => (
|
render: (reason: CrmLostReason) => (
|
||||||
<div className="font-medium text-gray-900">{reason.code}</div>
|
<div className="font-medium text-gray-900">{reason.code}</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "name",
|
key: 'name',
|
||||||
header: "Kayıp Nedeni",
|
header: 'Kayıp Nedeni',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (reason: CrmLostReason) => (
|
render: (reason: CrmLostReason) => (
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -143,12 +125,12 @@ const LossReasons: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "category",
|
key: 'category',
|
||||||
header: "Kategori",
|
header: 'Kategori',
|
||||||
render: (reason: CrmLostReason) => (
|
render: (reason: CrmLostReason) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${getLostReasonCategoryColor(
|
className={`px-2 py-1 text-xs font-medium rounded-full ${getLostReasonCategoryColor(
|
||||||
reason.category
|
reason.category,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getLostReasonCategoryText(reason.category)}
|
{getLostReasonCategoryText(reason.category)}
|
||||||
|
|
@ -156,38 +138,34 @@ const LossReasons: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "usage",
|
key: 'usage',
|
||||||
header: "Kullanım",
|
header: 'Kullanım',
|
||||||
render: (reason: CrmLostReason) => {
|
render: (reason: CrmLostReason) => {
|
||||||
const usageCount = opportunities.filter(
|
const usageCount = opportunities.filter((opp) => opp.lostReason?.id === reason.id).length
|
||||||
(opp) => opp.lostReason?.id === reason.id
|
|
||||||
).length;
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaBullseye className="w-4 h-4 text-gray-400" />
|
<FaBullseye className="w-4 h-4 text-gray-400" />
|
||||||
<span>{usageCount} Fırsat</span>
|
<span>{usageCount} Fırsat</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (reason: CrmLostReason) => (
|
render: (reason: CrmLostReason) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
reason.isActive
|
reason.isActive ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-gray-100 text-gray-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{reason.isActive ? "Aktif" : "Pasif"}
|
{reason.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (reason: CrmLostReason) => (
|
render: (reason: CrmLostReason) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -214,306 +192,280 @@ const LossReasons: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
// Calculate statistics
|
// Calculate statistics
|
||||||
const totalReasons = lossReasons.length;
|
const totalReasons = lossReasons.length
|
||||||
const activeReasons = lossReasons.filter((r) => r.isActive).length;
|
const activeReasons = lossReasons.filter((r) => r.isActive).length
|
||||||
const categoryDistribution = Object.values(LostReasonCategoryEnum).map(
|
const categoryDistribution = Object.values(LostReasonCategoryEnum).map((category) => ({
|
||||||
(category) => ({
|
category,
|
||||||
category,
|
count: lossReasons.filter((r) => r.category === category).length,
|
||||||
count: lossReasons.filter((r) => r.category === category).length,
|
usage: opportunities.filter(
|
||||||
usage: opportunities.filter(
|
(opp) =>
|
||||||
(opp) =>
|
opp.lostReason &&
|
||||||
opp.lostReason &&
|
lossReasons.find((r) => r.id === opp.lostReason?.id && r.category === category),
|
||||||
lossReasons.find(
|
).length,
|
||||||
(r) => r.id === opp.lostReason?.id && r.category === category
|
}))
|
||||||
)
|
|
||||||
).length,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Top loss reasons by usage
|
// Top loss reasons by usage
|
||||||
const topLossReasons = lossReasons
|
const topLossReasons = lossReasons
|
||||||
.map((reason) => ({
|
.map((reason) => ({
|
||||||
...reason,
|
...reason,
|
||||||
usageCount: opportunities.filter(
|
usageCount: opportunities.filter((opp) => opp.lostReason?.id === reason.id).length,
|
||||||
(opp) => opp.lostReason?.id === reason.id
|
|
||||||
).length,
|
|
||||||
lostValue: opportunities
|
lostValue: opportunities
|
||||||
.filter((opp) => opp.lostReason?.id === reason.id)
|
.filter((opp) => opp.lostReason?.id === reason.id)
|
||||||
.reduce((sum, opp) => sum + opp.estimatedValue, 0),
|
.reduce((sum, opp) => sum + opp.estimatedValue, 0),
|
||||||
}))
|
}))
|
||||||
.sort((a, b) => b.usageCount - a.usageCount)
|
.sort((a, b) => b.usageCount - a.usageCount)
|
||||||
.slice(0, 5);
|
.slice(0, 5)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-3 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-lg font-bold text-gray-900">Kayıp Nedenleri</h2>
|
<div>
|
||||||
<p className="text-sm text-gray-600">
|
<h2 className="text-lg font-bold text-gray-900">Kayıp Nedenleri</h2>
|
||||||
Fırsat kaybı nedenlerini analiz edin
|
<p className="text-sm text-gray-600">Fırsat kaybı nedenlerini analiz edin</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-3">
|
<button
|
||||||
<button
|
onClick={handleAdd}
|
||||||
onClick={handleAdd}
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Yeni Kayıp Nedeni
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|
||||||
<Widget
|
|
||||||
title="Toplam Neden"
|
|
||||||
value={totalReasons}
|
|
||||||
color="red"
|
|
||||||
icon="FaExclamationTriangle"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Aktif Neden"
|
|
||||||
value={activeReasons}
|
|
||||||
color="green"
|
|
||||||
icon="FaArrowDown"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Kayıp Fırsat"
|
|
||||||
value={opportunities.filter((opp) => opp.lostReason).length}
|
|
||||||
color="orange"
|
|
||||||
icon="FaBullseye"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="En Çok Kullanılan"
|
|
||||||
value={topLossReasons[0]?.name || "-"}
|
|
||||||
color="purple"
|
|
||||||
icon="FaChartBar"
|
|
||||||
valueClassName="text-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Category Distribution */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-3">
|
|
||||||
Kategori Dağılımı
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-6 gap-3">
|
|
||||||
{categoryDistribution.map(({ category, count, usage }) => (
|
|
||||||
<div key={category} className="text-center p-4 border rounded-lg">
|
|
||||||
<div
|
|
||||||
className={`inline-block px-2 py-1 text-xs font-medium rounded-full mb-2 ${getLostReasonCategoryColor(
|
|
||||||
category
|
|
||||||
)}`}
|
|
||||||
>
|
|
||||||
{getLostReasonCategoryText(category)}
|
|
||||||
</div>
|
|
||||||
<div className="text-lg font-bold text-gray-900 mb-1">
|
|
||||||
{count}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500">{usage} Kullanım</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Top Loss Reasons */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-3">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">
|
|
||||||
En Çok Kayıp Yaşanan Nedenler
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3 pt-2">
|
|
||||||
{topLossReasons.map((reason, index) => (
|
|
||||||
<div
|
|
||||||
key={reason.id}
|
|
||||||
className="flex items-center justify-between p-2 bg-gray-50 rounded-lg"
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-4">
|
<FaPlus className="w-4 h-4" />
|
||||||
<div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
|
Yeni Kayıp Nedeni
|
||||||
<span className="text-red-600 font-bold">{index + 1}</span>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-gray-900">{reason.name}</h4>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{getLostReasonCategoryText(reason.category)} •{" "}
|
|
||||||
{reason.usageCount} fırsat
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-sm font-bold text-red-600">
|
|
||||||
₺{reason.lostValue.toLocaleString()}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">Kayıp Değer</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
{/* Stats Cards */}
|
||||||
<div className="flex gap-3 items-center">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<div className="flex-1">
|
<Widget
|
||||||
<input
|
title="Toplam Neden"
|
||||||
type="text"
|
value={totalReasons}
|
||||||
placeholder="Neden adı veya kodu ara..."
|
color="red"
|
||||||
value={searchTerm}
|
icon="FaExclamationTriangle"
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
/>
|
||||||
className="w-full px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
|
<Widget title="Aktif Neden" value={activeReasons} color="green" icon="FaArrowDown" />
|
||||||
|
|
||||||
|
<Widget
|
||||||
|
title="Kayıp Fırsat"
|
||||||
|
value={opportunities.filter((opp) => opp.lostReason).length}
|
||||||
|
color="orange"
|
||||||
|
icon="FaBullseye"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Widget
|
||||||
|
title="En Çok Kullanılan"
|
||||||
|
value={topLossReasons[0]?.name || '-'}
|
||||||
|
color="purple"
|
||||||
|
icon="FaChartBar"
|
||||||
|
valueClassName="text-lg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select
|
{/* Category Distribution */}
|
||||||
value={selectedCategory}
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
onChange={(e) =>
|
<h3 className="text-base font-semibold text-gray-900 mb-3">Kategori Dağılımı</h3>
|
||||||
setSelectedCategory(
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-3">
|
||||||
e.target.value as LostReasonCategoryEnum | "all"
|
{categoryDistribution.map(({ category, count, usage }) => (
|
||||||
)
|
<div key={category} className="text-center p-4 border rounded-lg">
|
||||||
}
|
<div
|
||||||
className="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className={`inline-block px-2 py-1 text-xs font-medium rounded-full mb-2 ${getLostReasonCategoryColor(
|
||||||
>
|
category,
|
||||||
<option value="all">Tüm Kategoriler</option>
|
)}`}
|
||||||
{Object.values(LostReasonCategoryEnum).map((category) => (
|
>
|
||||||
<option key={category} value={category}>
|
{getLostReasonCategoryText(category)}
|
||||||
{getLostReasonCategoryText(category)}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
{/* View Mode Toggle */}
|
|
||||||
<div className="flex bg-gray-100 rounded-lg p-1">
|
|
||||||
<button
|
|
||||||
onClick={() => setViewMode("table")}
|
|
||||||
className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
|
|
||||||
viewMode === "table"
|
|
||||||
? "bg-white text-gray-900 shadow-sm"
|
|
||||||
: "text-gray-600 hover:text-gray-900"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FaList className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setViewMode("card")}
|
|
||||||
className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
|
|
||||||
viewMode === "card"
|
|
||||||
? "bg-white text-gray-900 shadow-sm"
|
|
||||||
: "text-gray-600 hover:text-gray-900"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FaTh className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Data Display */}
|
|
||||||
{viewMode === "table" ? (
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
|
||||||
<DataTable data={filteredReasons} columns={columns} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<LossReasonCardView
|
|
||||||
lossReasons={filteredReasons}
|
|
||||||
opportunities={opportunities}
|
|
||||||
onEdit={handleEdit}
|
|
||||||
onDelete={handleDelete}
|
|
||||||
onView={handleView}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{filteredReasons.length === 0 && viewMode === "table" && (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<FaExclamationTriangle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
||||||
Kayıp nedeni bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modals */}
|
|
||||||
<LossReasonModal
|
|
||||||
isOpen={isModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
setEditingReason(null);
|
|
||||||
}}
|
|
||||||
onSave={handleSave}
|
|
||||||
editingReason={editingReason}
|
|
||||||
mode={modalMode}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Delete Confirmation Modal */}
|
|
||||||
{isDeleteModalOpen && (
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
||||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between p-3 border-b">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<FaExclamationTriangle className="w-6 h-6 text-red-600" />
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900">
|
|
||||||
Silme Onayı
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
setReasonToDelete(null);
|
|
||||||
}}
|
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-3">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="mx-auto flex items-center justify-center h-10 w-10 rounded-full bg-red-100 mb-3">
|
|
||||||
<FaTrash className="h-6 w-6 text-red-600" />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
<div className="text-lg font-bold text-gray-900 mb-1">{count}</div>
|
||||||
Kayıp nedeni silinsin mi?
|
<div className="text-xs text-gray-500">{usage} Kullanım</div>
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-500 mb-6">
|
|
||||||
<span className="font-medium">"{reasonToDelete?.name}"</span>{" "}
|
|
||||||
kayıp nedenini silmek üzeresiniz. Bu işlem geri alınamaz.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Buttons */}
|
{/* Top Loss Reasons */}
|
||||||
<div className="flex justify-end gap-1.5">
|
<div className="bg-white rounded-lg shadow-sm border p-3">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
En Çok Kayıp Yaşanan Nedenler
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3 pt-2">
|
||||||
|
{topLossReasons.map((reason, index) => (
|
||||||
|
<div
|
||||||
|
key={reason.id}
|
||||||
|
className="flex items-center justify-between p-2 bg-gray-50 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-red-600 font-bold">{index + 1}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium text-gray-900">{reason.name}</h4>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
{getLostReasonCategoryText(reason.category)} • {reason.usageCount} fırsat
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-sm font-bold text-red-600">
|
||||||
|
₺{reason.lostValue.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">Kayıp Değer</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex gap-3 items-center">
|
||||||
|
<div className="flex-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Neden adı veya kodu ara..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedCategory}
|
||||||
|
onChange={(e) => setSelectedCategory(e.target.value as LostReasonCategoryEnum | 'all')}
|
||||||
|
className="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Kategoriler</option>
|
||||||
|
{Object.values(LostReasonCategoryEnum).map((category) => (
|
||||||
|
<option key={category} value={category}>
|
||||||
|
{getLostReasonCategoryText(category)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
{/* View Mode Toggle */}
|
||||||
|
<div className="flex bg-gray-100 rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('table')}
|
||||||
|
className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
|
||||||
|
viewMode === 'table'
|
||||||
|
? 'bg-white text-gray-900 shadow-sm'
|
||||||
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaList className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('card')}
|
||||||
|
className={`flex items-center gap-2 px-2 py-1 rounded-md text-sm transition-colors ${
|
||||||
|
viewMode === 'card'
|
||||||
|
? 'bg-white text-gray-900 shadow-sm'
|
||||||
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaTh className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Data Display */}
|
||||||
|
{viewMode === 'table' ? (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
|
<DataTable data={filteredReasons} columns={columns} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<LossReasonCardView
|
||||||
|
lossReasons={filteredReasons}
|
||||||
|
opportunities={opportunities}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
onView={handleView}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{filteredReasons.length === 0 && viewMode === 'table' && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<FaExclamationTriangle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
||||||
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Kayıp nedeni bulunamadı</h3>
|
||||||
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
<LossReasonModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setIsModalOpen(false)
|
||||||
|
setEditingReason(null)
|
||||||
|
}}
|
||||||
|
onSave={handleSave}
|
||||||
|
editingReason={editingReason}
|
||||||
|
mode={modalMode}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Modal */}
|
||||||
|
{isDeleteModalOpen && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between p-3 border-b">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<FaExclamationTriangle className="w-6 h-6 text-red-600" />
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900">Silme Onayı</h3>
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsDeleteModalOpen(false);
|
setIsDeleteModalOpen(false)
|
||||||
setReasonToDelete(null);
|
setReasonToDelete(null)
|
||||||
}}
|
}}
|
||||||
className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
className="text-gray-400 hover:text-gray-600"
|
||||||
>
|
>
|
||||||
İptal
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={confirmDelete}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaTrash className="w-4 h-4" />
|
|
||||||
Sil
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-3">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mx-auto flex items-center justify-center h-10 w-10 rounded-full bg-red-100 mb-3">
|
||||||
|
<FaTrash className="h-6 w-6 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
||||||
|
Kayıp nedeni silinsin mi?
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-500 mb-6">
|
||||||
|
<span className="font-medium">"{reasonToDelete?.name}"</span> kayıp nedenini
|
||||||
|
silmek üzeresiniz. Bu işlem geri alınamaz.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex justify-end gap-1.5">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setIsDeleteModalOpen(false)
|
||||||
|
setReasonToDelete(null)
|
||||||
|
}}
|
||||||
|
className="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
İptal
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={confirmDelete}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaTrash className="w-4 h-4" />
|
||||||
|
Sil
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default LossReasons;
|
export default LossReasons
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React from 'react'
|
||||||
import {
|
import {
|
||||||
FaTimes,
|
FaTimes,
|
||||||
FaBullseye,
|
FaBullseye,
|
||||||
|
|
@ -13,21 +13,21 @@ import {
|
||||||
FaClock,
|
FaClock,
|
||||||
FaPhone,
|
FaPhone,
|
||||||
FaEnvelope,
|
FaEnvelope,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { CrmOpportunity, OpportunityStageEnum } from "../../../types/crm";
|
import { CrmOpportunity, OpportunityStageEnum } from '../../../types/crm'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import {
|
import {
|
||||||
getOpportunityLeadSourceText,
|
getOpportunityLeadSourceText,
|
||||||
getOpportunityProbabilityColor,
|
getOpportunityProbabilityColor,
|
||||||
getOpportunityStageColor,
|
getOpportunityStageColor,
|
||||||
getOpportunityStageText,
|
getOpportunityStageText,
|
||||||
} from "../../../utils/erp";
|
} from '../../../utils/erp'
|
||||||
|
|
||||||
interface OpportunityDetailsProps {
|
interface OpportunityDetailsProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean
|
||||||
onClose: () => void;
|
onClose: () => void
|
||||||
onEdit: (opportunity: CrmOpportunity) => void;
|
onEdit: (opportunity: CrmOpportunity) => void
|
||||||
opportunity: CrmOpportunity | null;
|
opportunity: CrmOpportunity | null
|
||||||
}
|
}
|
||||||
|
|
||||||
const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
|
|
@ -36,11 +36,9 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
onEdit,
|
onEdit,
|
||||||
opportunity,
|
opportunity,
|
||||||
}) => {
|
}) => {
|
||||||
if (!isOpen || !opportunity) return null;
|
if (!isOpen || !opportunity) return null
|
||||||
|
|
||||||
const customer = mockBusinessParties.find(
|
const customer = mockBusinessParties.find((c) => c.id === opportunity.customerId)
|
||||||
(c) => c.id === opportunity.customerId
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
|
@ -52,12 +50,8 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<FaBullseye className="w-6 h-6 text-blue-600" />
|
<FaBullseye className="w-6 h-6 text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<h2 className="text-lg font-semibold text-gray-900">{opportunity.title}</h2>
|
||||||
{opportunity.title}
|
<p className="text-sm text-gray-600">{opportunity.opportunityNumber}</p>
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{opportunity.opportunityNumber}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
|
@ -68,10 +62,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<FaEdit className="w-4 h-4" />
|
<FaEdit className="w-4 h-4" />
|
||||||
Düzenle
|
Düzenle
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-2">
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-600 p-2"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -83,7 +74,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div
|
<div
|
||||||
className={`inline-flex px-3 py-1.5 rounded-full text-xs font-medium border ${getOpportunityStageColor(
|
className={`inline-flex px-3 py-1.5 rounded-full text-xs font-medium border ${getOpportunityStageColor(
|
||||||
opportunity.stage
|
opportunity.stage,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getOpportunityStageText(opportunity.stage)}
|
{getOpportunityStageText(opportunity.stage)}
|
||||||
|
|
@ -102,7 +93,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div
|
<div
|
||||||
className={`flex items-center justify-center gap-2 text-xl font-bold ${getOpportunityProbabilityColor(
|
className={`flex items-center justify-center gap-2 text-xl font-bold ${getOpportunityProbabilityColor(
|
||||||
opportunity.probability
|
opportunity.probability,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
<FaPercentage className="w-5 h-5" />
|
<FaPercentage className="w-5 h-5" />
|
||||||
|
|
@ -114,9 +105,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="flex items-center justify-center gap-2 text-base font-semibold text-gray-900">
|
<div className="flex items-center justify-center gap-2 text-base font-semibold text-gray-900">
|
||||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||||
{new Date(opportunity.expectedCloseDate).toLocaleDateString(
|
{new Date(opportunity.expectedCloseDate).toLocaleDateString('tr-TR')}
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-gray-500 mt-1">Beklenen Kapanış</p>
|
<p className="text-xs text-gray-500 mt-1">Beklenen Kapanış</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -133,9 +122,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">Başlık</label>
|
||||||
Başlık
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">{opportunity.title}</p>
|
<p className="text-gray-900">{opportunity.title}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -144,16 +131,12 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">
|
||||||
Açıklama
|
Açıklama
|
||||||
</label>
|
</label>
|
||||||
<p className="text-gray-900 whitespace-pre-wrap">
|
<p className="text-gray-900 whitespace-pre-wrap">{opportunity.description}</p>
|
||||||
{opportunity.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">Kaynak</label>
|
||||||
Kaynak
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaTags className="w-4 h-4 text-gray-400" />
|
<FaTags className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">
|
||||||
|
|
@ -209,16 +192,12 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaEnvelope className="w-4 h-4 text-gray-400" />
|
<FaEnvelope className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">{customer.primaryContact?.email}</span>
|
||||||
{customer.primaryContact?.email}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{customer.primaryContact?.phone && (
|
{customer.primaryContact?.phone && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaPhone className="w-4 h-4 text-gray-400" />
|
<FaPhone className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">{customer.primaryContact?.phone}</span>
|
||||||
{customer.primaryContact?.phone}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -238,14 +217,10 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
<label className="block text-sm font-medium text-gray-600 mb-1">Sorumlu</label>
|
||||||
Sorumlu
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaUser className="w-4 h-4 text-gray-400" />
|
<FaUser className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">{opportunity.assigned?.fullName}</span>
|
||||||
{opportunity.assigned?.fullName}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -256,9 +231,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">
|
||||||
{new Date(
|
{new Date(opportunity.expectedCloseDate).toLocaleDateString('tr-TR')}
|
||||||
opportunity.expectedCloseDate
|
|
||||||
).toLocaleDateString("tr-TR")}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -271,9 +244,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||||
<span className="text-gray-900">
|
<span className="text-gray-900">
|
||||||
{new Date(
|
{new Date(opportunity.actualCloseDate).toLocaleDateString('tr-TR')}
|
||||||
opportunity.actualCloseDate
|
|
||||||
).toLocaleDateString("tr-TR")}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -291,14 +262,10 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="flex items-start gap-3 border-l-2 border-blue-200 pl-4">
|
<div className="flex items-start gap-3 border-l-2 border-blue-200 pl-4">
|
||||||
<div className="w-3 h-3 bg-blue-600 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
<div className="w-3 h-3 bg-blue-600 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-gray-900">
|
<p className="text-sm font-medium text-gray-900">Fırsat Oluşturuldu</p>
|
||||||
Fırsat Oluşturuldu
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 flex items-center gap-1">
|
<p className="text-xs text-gray-500 flex items-center gap-1">
|
||||||
<FaClock className="w-3 h-3" />
|
<FaClock className="w-3 h-3" />
|
||||||
{new Date(opportunity.creationTime).toLocaleDateString(
|
{new Date(opportunity.creationTime).toLocaleDateString('tr-TR')}
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -306,14 +273,10 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
<div className="flex items-start gap-3 border-l-2 border-gray-200 pl-4">
|
<div className="flex items-start gap-3 border-l-2 border-gray-200 pl-4">
|
||||||
<div className="w-3 h-3 bg-gray-400 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
<div className="w-3 h-3 bg-gray-400 rounded-full mt-1.5 -ml-6 border-2 border-white"></div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-gray-900">
|
<p className="text-sm font-medium text-gray-900">Son Güncelleme</p>
|
||||||
Son Güncelleme
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 flex items-center gap-1">
|
<p className="text-xs text-gray-500 flex items-center gap-1">
|
||||||
<FaClock className="w-3 h-3" />
|
<FaClock className="w-3 h-3" />
|
||||||
{new Date(
|
{new Date(opportunity.lastModificationTime).toLocaleDateString('tr-TR')}
|
||||||
opportunity.lastModificationTime
|
|
||||||
).toLocaleDateString("tr-TR")}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -322,41 +285,37 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
|
|
||||||
{/* Progress Indicator */}
|
{/* Progress Indicator */}
|
||||||
<div className="bg-gray-50 rounded-lg p-4">
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-3">
|
<h3 className="text-base font-semibold text-gray-900 mb-3">Aşama İlerlemesi</h3>
|
||||||
Aşama İlerlemesi
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{Object.values(OpportunityStageEnum).map((stage, index) => {
|
{Object.values(OpportunityStageEnum).map((stage, index) => {
|
||||||
const isCurrentStage = stage === opportunity.stage;
|
const isCurrentStage = stage === opportunity.stage
|
||||||
const isPassedStage =
|
const isPassedStage =
|
||||||
Object.values(OpportunityStageEnum).indexOf(
|
Object.values(OpportunityStageEnum).indexOf(opportunity.stage) > index
|
||||||
opportunity.stage
|
|
||||||
) > index;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={stage} className="flex items-center gap-3">
|
<div key={stage} className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className={`w-4 h-4 rounded-full border-2 ${
|
className={`w-4 h-4 rounded-full border-2 ${
|
||||||
isCurrentStage
|
isCurrentStage
|
||||||
? "bg-blue-600 border-blue-600"
|
? 'bg-blue-600 border-blue-600'
|
||||||
: isPassedStage
|
: isPassedStage
|
||||||
? "bg-green-600 border-green-600"
|
? 'bg-green-600 border-green-600'
|
||||||
: "bg-white border-gray-300"
|
: 'bg-white border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
></div>
|
></div>
|
||||||
<span
|
<span
|
||||||
className={`text-sm ${
|
className={`text-sm ${
|
||||||
isCurrentStage
|
isCurrentStage
|
||||||
? "font-semibold text-blue-600"
|
? 'font-semibold text-blue-600'
|
||||||
: isPassedStage
|
: isPassedStage
|
||||||
? "text-green-600"
|
? 'text-green-600'
|
||||||
: "text-gray-500"
|
: 'text-gray-500'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{getOpportunityStageText(stage)}
|
{getOpportunityStageText(stage)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -365,7 +324,7 @@ const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default OpportunityDetails;
|
export default OpportunityDetails
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,22 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from 'react'
|
||||||
import { FaTimes, FaDollarSign, FaFileAlt } from "react-icons/fa";
|
import { FaTimes, FaDollarSign, FaFileAlt } from 'react-icons/fa'
|
||||||
import {
|
import {
|
||||||
CrmOpportunity,
|
CrmOpportunity,
|
||||||
OpportunityStageEnum,
|
OpportunityStageEnum,
|
||||||
LeadSourceEnum,
|
LeadSourceEnum,
|
||||||
OpportunityStatusEnum,
|
OpportunityStatusEnum,
|
||||||
} from "../../../types/crm";
|
} from '../../../types/crm'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { BusinessParty } from "../../../types/common";
|
import { BusinessParty } from '../../../types/common'
|
||||||
|
import { getOpportunityLeadSourceText, getOpportunityStageText } from '@/utils/erp'
|
||||||
|
|
||||||
interface OpportunityFormProps {
|
interface OpportunityFormProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean
|
||||||
onClose: () => void;
|
onClose: () => void
|
||||||
onSave: (opportunity: CrmOpportunity) => void;
|
onSave: (opportunity: CrmOpportunity) => void
|
||||||
opportunity?: CrmOpportunity | null;
|
opportunity?: CrmOpportunity | null
|
||||||
mode: "create" | "edit";
|
mode: 'create' | 'edit'
|
||||||
}
|
}
|
||||||
|
|
||||||
const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
|
|
@ -26,122 +27,118 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
mode,
|
mode,
|
||||||
}) => {
|
}) => {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
id: "",
|
id: '',
|
||||||
opportunityNumber: "",
|
opportunityNumber: '',
|
||||||
title: "",
|
title: '',
|
||||||
description: "",
|
description: '',
|
||||||
customerId: "",
|
customerId: '',
|
||||||
contactId: "",
|
contactId: '',
|
||||||
stage: OpportunityStageEnum.Qualification,
|
stage: OpportunityStageEnum.Qualification,
|
||||||
probability: 10,
|
probability: 10,
|
||||||
estimatedValue: 0,
|
estimatedValue: 0,
|
||||||
currency: "TRY",
|
currency: 'TRY',
|
||||||
expectedCloseDate: "",
|
expectedCloseDate: '',
|
||||||
assignedTo: "",
|
assignedTo: '',
|
||||||
teamId: "",
|
teamId: '',
|
||||||
leadSource: LeadSourceEnum.Website,
|
leadSource: LeadSourceEnum.Website,
|
||||||
campaignId: "",
|
campaignId: '',
|
||||||
});
|
})
|
||||||
|
|
||||||
const [customers] = useState<BusinessParty[]>(mockBusinessParties);
|
const [customers] = useState<BusinessParty[]>(mockBusinessParties)
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (opportunity && mode === "edit") {
|
if (opportunity && mode === 'edit') {
|
||||||
setFormData({
|
setFormData({
|
||||||
id: opportunity.id,
|
id: opportunity.id,
|
||||||
opportunityNumber: opportunity.opportunityNumber,
|
opportunityNumber: opportunity.opportunityNumber,
|
||||||
title: opportunity.title,
|
title: opportunity.title,
|
||||||
description: opportunity.description || "",
|
description: opportunity.description || '',
|
||||||
customerId: opportunity.customerId,
|
customerId: opportunity.customerId,
|
||||||
contactId: opportunity.contactId || "",
|
contactId: opportunity.contactId || '',
|
||||||
stage: opportunity.stage,
|
stage: opportunity.stage,
|
||||||
probability: opportunity.probability,
|
probability: opportunity.probability,
|
||||||
estimatedValue: opportunity.estimatedValue,
|
estimatedValue: opportunity.estimatedValue,
|
||||||
currency: opportunity.currency,
|
currency: opportunity.currency,
|
||||||
expectedCloseDate: opportunity.expectedCloseDate
|
expectedCloseDate: opportunity.expectedCloseDate.toISOString().split('T')[0],
|
||||||
.toISOString()
|
|
||||||
.split("T")[0],
|
|
||||||
assignedTo: opportunity.assignedTo,
|
assignedTo: opportunity.assignedTo,
|
||||||
teamId: opportunity.teamId || "",
|
teamId: opportunity.teamId || '',
|
||||||
leadSource: opportunity.leadSource,
|
leadSource: opportunity.leadSource,
|
||||||
campaignId: opportunity.campaignId || "",
|
campaignId: opportunity.campaignId || '',
|
||||||
});
|
})
|
||||||
} else if (mode === "create") {
|
} else if (mode === 'create') {
|
||||||
// Generate new opportunity number
|
// Generate new opportunity number
|
||||||
const newNumber = `OPP-${Date.now().toString().slice(-6)}`;
|
const newNumber = `OPP-${Date.now().toString().slice(-6)}`
|
||||||
setFormData({
|
setFormData({
|
||||||
id: `opp_${Date.now()}`,
|
id: `opp_${Date.now()}`,
|
||||||
opportunityNumber: newNumber,
|
opportunityNumber: newNumber,
|
||||||
title: "",
|
title: '',
|
||||||
description: "",
|
description: '',
|
||||||
customerId: "",
|
customerId: '',
|
||||||
contactId: "",
|
contactId: '',
|
||||||
stage: OpportunityStageEnum.Qualification,
|
stage: OpportunityStageEnum.Qualification,
|
||||||
probability: 10,
|
probability: 10,
|
||||||
estimatedValue: 0,
|
estimatedValue: 0,
|
||||||
currency: "TRY",
|
currency: 'TRY',
|
||||||
expectedCloseDate: "",
|
expectedCloseDate: '',
|
||||||
assignedTo: "Mevcut Kullanıcı",
|
assignedTo: 'Mevcut Kullanıcı',
|
||||||
teamId: "",
|
teamId: '',
|
||||||
leadSource: LeadSourceEnum.Website,
|
leadSource: LeadSourceEnum.Website,
|
||||||
campaignId: "",
|
campaignId: '',
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}, [opportunity, mode, isOpen]);
|
}, [opportunity, mode, isOpen])
|
||||||
|
|
||||||
const handleInputChange = (
|
const handleInputChange = (
|
||||||
e: React.ChangeEvent<
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
|
||||||
>
|
|
||||||
) => {
|
) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target
|
||||||
setFormData((prev) => ({
|
setFormData((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: value,
|
[name]: value,
|
||||||
}));
|
}))
|
||||||
|
|
||||||
// Clear error when user starts typing
|
// Clear error when user starts typing
|
||||||
if (errors[name]) {
|
if (errors[name]) {
|
||||||
setErrors((prev) => ({
|
setErrors((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
[name]: "",
|
[name]: '',
|
||||||
}));
|
}))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
const newErrors: Record<string, string> = {};
|
const newErrors: Record<string, string> = {}
|
||||||
|
|
||||||
if (!formData.title.trim()) {
|
if (!formData.title.trim()) {
|
||||||
newErrors.title = "Fırsat başlığı zorunludur";
|
newErrors.title = 'Fırsat başlığı zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.customerId) {
|
if (!formData.customerId) {
|
||||||
newErrors.customerId = "Müşteri seçimi zorunludur";
|
newErrors.customerId = 'Müşteri seçimi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (formData.estimatedValue <= 0) {
|
if (formData.estimatedValue <= 0) {
|
||||||
newErrors.estimatedValue = "Tahmini değer 0'dan büyük olmalıdır";
|
newErrors.estimatedValue = "Tahmini değer 0'dan büyük olmalıdır"
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!formData.expectedCloseDate) {
|
if (!formData.expectedCloseDate) {
|
||||||
newErrors.expectedCloseDate = "Beklenen kapanış tarihi zorunludur";
|
newErrors.expectedCloseDate = 'Beklenen kapanış tarihi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (formData.probability < 0 || formData.probability > 100) {
|
if (formData.probability < 0 || formData.probability > 100) {
|
||||||
newErrors.probability = "Olasılık 0-100 arasında olmalıdır";
|
newErrors.probability = 'Olasılık 0-100 arasında olmalıdır'
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if (!validateForm()) {
|
if (!validateForm()) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const opportunityData: CrmOpportunity = {
|
const opportunityData: CrmOpportunity = {
|
||||||
|
|
@ -164,45 +161,20 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
formData.stage === OpportunityStageEnum.ClosedWon
|
formData.stage === OpportunityStageEnum.ClosedWon
|
||||||
? OpportunityStatusEnum.Won
|
? OpportunityStatusEnum.Won
|
||||||
: formData.stage === OpportunityStageEnum.ClosedLost
|
: formData.stage === OpportunityStageEnum.ClosedLost
|
||||||
? OpportunityStatusEnum.Lost
|
? OpportunityStatusEnum.Lost
|
||||||
: OpportunityStatusEnum.Open,
|
: OpportunityStatusEnum.Open,
|
||||||
|
|
||||||
activities: [],
|
activities: [],
|
||||||
competitors: [],
|
competitors: [],
|
||||||
creationTime: opportunity?.creationTime || new Date(),
|
creationTime: opportunity?.creationTime || new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
|
|
||||||
onSave(opportunityData);
|
onSave(opportunityData)
|
||||||
onClose();
|
onClose()
|
||||||
};
|
}
|
||||||
|
|
||||||
const getStageLabel = (stage: OpportunityStageEnum) => {
|
if (!isOpen) return null
|
||||||
const stageLabels = {
|
|
||||||
[OpportunityStageEnum.Qualification]: "Nitelendirme",
|
|
||||||
[OpportunityStageEnum.NeedsAnalysis]: "İhtiyaç Analizi",
|
|
||||||
[OpportunityStageEnum.Proposal]: "Teklif",
|
|
||||||
[OpportunityStageEnum.Negotiation]: "Müzakere",
|
|
||||||
[OpportunityStageEnum.ClosedWon]: "Kazanıldı",
|
|
||||||
[OpportunityStageEnum.ClosedLost]: "Kaybedildi",
|
|
||||||
};
|
|
||||||
return stageLabels[stage];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getLeadSourceLabel = (source: LeadSourceEnum) => {
|
|
||||||
const sourceLabels: Record<LeadSourceEnum, string> = {
|
|
||||||
[LeadSourceEnum.Website]: "Web Sitesi",
|
|
||||||
[LeadSourceEnum.Referral]: "Referans",
|
|
||||||
[LeadSourceEnum.Campaign]: "Kampanya",
|
|
||||||
[LeadSourceEnum.Trade_Show]: "Fuar",
|
|
||||||
[LeadSourceEnum.Cold_Call]: "Soğuk Arama",
|
|
||||||
[LeadSourceEnum.Social_Media]: "Sosyal Medya",
|
|
||||||
[LeadSourceEnum.Partner]: "Partner",
|
|
||||||
};
|
|
||||||
return sourceLabels[source];
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isOpen) return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
|
@ -210,12 +182,9 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between p-4 border-b">
|
<div className="flex items-center justify-between p-4 border-b">
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
{mode === "create" ? "Yeni Fırsat Oluştur" : "Fırsat Düzenle"}
|
{mode === 'create' ? 'Yeni Fırsat Oluştur' : 'Fırsat Düzenle'}
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
|
||||||
<FaTimes className="w-5 h-5" />
|
<FaTimes className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -254,19 +223,15 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
value={formData.title}
|
value={formData.title}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.title ? "border-red-500" : "border-gray-300"
|
errors.title ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="Fırsat başlığını girin"
|
placeholder="Fırsat başlığını girin"
|
||||||
/>
|
/>
|
||||||
{errors.title && (
|
{errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.title}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
name="description"
|
name="description"
|
||||||
value={formData.description}
|
value={formData.description}
|
||||||
|
|
@ -278,15 +243,13 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Müşteri *</label>
|
||||||
Müşteri *
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="customerId"
|
name="customerId"
|
||||||
value={formData.customerId}
|
value={formData.customerId}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.customerId ? "border-red-500" : "border-gray-300"
|
errors.customerId ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<option value="">Müşteri seçin</option>
|
<option value="">Müşteri seçin</option>
|
||||||
|
|
@ -297,18 +260,14 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
{errors.customerId && (
|
{errors.customerId && (
|
||||||
<p className="text-red-500 text-sm mt-1">
|
<p className="text-red-500 text-sm mt-1">{errors.customerId}</p>
|
||||||
{errors.customerId}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Sorumlu</label>
|
||||||
Sorumlu
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={formData.assignedTo || ""}
|
value={formData.assignedTo || ''}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
>
|
>
|
||||||
|
|
@ -330,9 +289,7 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Aşama</label>
|
||||||
Aşama
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="stage"
|
name="stage"
|
||||||
value={formData.stage}
|
value={formData.stage}
|
||||||
|
|
@ -341,7 +298,7 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
>
|
>
|
||||||
{Object.values(OpportunityStageEnum).map((stage) => (
|
{Object.values(OpportunityStageEnum).map((stage) => (
|
||||||
<option key={stage} value={stage}>
|
<option key={stage} value={stage}>
|
||||||
{getStageLabel(stage)}
|
{getOpportunityStageText(stage)}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -359,13 +316,11 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.probability ? "border-red-500" : "border-gray-300"
|
errors.probability ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
{errors.probability && (
|
{errors.probability && (
|
||||||
<p className="text-red-500 text-sm mt-1">
|
<p className="text-red-500 text-sm mt-1">{errors.probability}</p>
|
||||||
{errors.probability}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -381,21 +336,17 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
min="0"
|
min="0"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.estimatedValue ? "border-red-500" : "border-gray-300"
|
errors.estimatedValue ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="0.00"
|
placeholder="0.00"
|
||||||
/>
|
/>
|
||||||
{errors.estimatedValue && (
|
{errors.estimatedValue && (
|
||||||
<p className="text-red-500 text-sm mt-1">
|
<p className="text-red-500 text-sm mt-1">{errors.estimatedValue}</p>
|
||||||
{errors.estimatedValue}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Para Birimi</label>
|
||||||
Para Birimi
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="currency"
|
name="currency"
|
||||||
value={formData.currency}
|
value={formData.currency}
|
||||||
|
|
@ -418,22 +369,16 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
value={formData.expectedCloseDate}
|
value={formData.expectedCloseDate}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
errors.expectedCloseDate
|
errors.expectedCloseDate ? 'border-red-500' : 'border-gray-300'
|
||||||
? "border-red-500"
|
|
||||||
: "border-gray-300"
|
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
{errors.expectedCloseDate && (
|
{errors.expectedCloseDate && (
|
||||||
<p className="text-red-500 text-sm mt-1">
|
<p className="text-red-500 text-sm mt-1">{errors.expectedCloseDate}</p>
|
||||||
{errors.expectedCloseDate}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">Kaynak</label>
|
||||||
Kaynak
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
name="leadSource"
|
name="leadSource"
|
||||||
value={formData.leadSource}
|
value={formData.leadSource}
|
||||||
|
|
@ -442,7 +387,7 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
>
|
>
|
||||||
{Object.values(LeadSourceEnum).map((source) => (
|
{Object.values(LeadSourceEnum).map((source) => (
|
||||||
<option key={source} value={source}>
|
<option key={source} value={source}>
|
||||||
{getLeadSourceLabel(source)}
|
{getOpportunityLeadSourceText(source)}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -463,13 +408,13 @@ const OpportunityForm: React.FC<OpportunityFormProps> = ({
|
||||||
type="submit"
|
type="submit"
|
||||||
className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
{mode === "create" ? "Oluştur" : "Güncelle"}
|
{mode === 'create' ? 'Oluştur' : 'Güncelle'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default OpportunityForm;
|
export default OpportunityForm
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaBullseye,
|
FaBullseye,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
|
|
@ -9,86 +9,80 @@ import {
|
||||||
FaArrowUp,
|
FaArrowUp,
|
||||||
FaUser,
|
FaUser,
|
||||||
FaBuilding,
|
FaBuilding,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { CrmOpportunity, OpportunityStageEnum } from "../../../types/crm";
|
import { CrmOpportunity, OpportunityStageEnum } from '../../../types/crm'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import { mockOpportunities } from "../../../mocks/mockOpportunities";
|
import { mockOpportunities } from '../../../mocks/mockOpportunities'
|
||||||
import OpportunityForm from "./OpportunityForm";
|
import OpportunityForm from './OpportunityForm'
|
||||||
import OpportunityDetails from "./OpportunityDetails";
|
import OpportunityDetails from './OpportunityDetails'
|
||||||
import { BusinessParty } from "../../../types/common";
|
import { BusinessParty } from '../../../types/common'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import {
|
import {
|
||||||
getOpportunityProbabilityColor,
|
getOpportunityProbabilityColor,
|
||||||
getOpportunityStageColor,
|
getOpportunityStageColor,
|
||||||
getOpportunityStageText,
|
getOpportunityStageText,
|
||||||
} from "../../../utils/erp";
|
} from '../../../utils/erp'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
// Mock data - replace with actual data fetching
|
|
||||||
const OpportunityManagement: React.FC = () => {
|
const OpportunityManagement: React.FC = () => {
|
||||||
const [opportunities, setOpportunities] =
|
const [opportunities, setOpportunities] = useState<CrmOpportunity[]>(mockOpportunities)
|
||||||
useState<CrmOpportunity[]>(mockOpportunities);
|
const [customers] = useState<BusinessParty[]>(mockBusinessParties)
|
||||||
const [customers] = useState<BusinessParty[]>(mockBusinessParties);
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [selectedStage, setSelectedStage] = useState<OpportunityStageEnum | 'all'>('all')
|
||||||
const [selectedStage, setSelectedStage] = useState<
|
const [selectedCustomer, setSelectedCustomer] = useState<string>('all')
|
||||||
OpportunityStageEnum | "all"
|
|
||||||
>("all");
|
|
||||||
const [selectedCustomer, setSelectedCustomer] = useState<string>("all");
|
|
||||||
|
|
||||||
// Modal states
|
// Modal states
|
||||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
const [isFormOpen, setIsFormOpen] = useState(false)
|
||||||
const [isDetailsOpen, setIsDetailsOpen] = useState(false);
|
const [isDetailsOpen, setIsDetailsOpen] = useState(false)
|
||||||
const [selectedOpportunity, setSelectedOpportunity] =
|
const [selectedOpportunity, setSelectedOpportunity] = useState<CrmOpportunity | null>(null)
|
||||||
useState<CrmOpportunity | null>(null);
|
const [formMode, setFormMode] = useState<'create' | 'edit'>('create')
|
||||||
const [formMode, setFormMode] = useState<"create" | "edit">("create");
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
setSelectedOpportunity(null);
|
setSelectedOpportunity(null)
|
||||||
setFormMode("create");
|
setFormMode('create')
|
||||||
setIsFormOpen(true);
|
setIsFormOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (opportunity: CrmOpportunity) => {
|
const handleEdit = (opportunity: CrmOpportunity) => {
|
||||||
setSelectedOpportunity(opportunity);
|
setSelectedOpportunity(opportunity)
|
||||||
setFormMode("edit");
|
setFormMode('edit')
|
||||||
setIsFormOpen(true);
|
setIsFormOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
if (confirm("Bu fırsatı silmek istediğinizden emin misiniz?")) {
|
if (confirm('Bu fırsatı silmek istediğinizden emin misiniz?')) {
|
||||||
setOpportunities((prev) => prev.filter((opp) => opp.id !== id));
|
setOpportunities((prev) => prev.filter((opp) => opp.id !== id))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleViewDetails = (opportunity: CrmOpportunity) => {
|
const handleViewDetails = (opportunity: CrmOpportunity) => {
|
||||||
setSelectedOpportunity(opportunity);
|
setSelectedOpportunity(opportunity)
|
||||||
setIsDetailsOpen(true);
|
setIsDetailsOpen(true)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSaveOpportunity = (opportunity: CrmOpportunity) => {
|
const handleSaveOpportunity = (opportunity: CrmOpportunity) => {
|
||||||
if (formMode === "create") {
|
if (formMode === 'create') {
|
||||||
setOpportunities((prev) => [...prev, opportunity]);
|
setOpportunities((prev) => [...prev, opportunity])
|
||||||
} else {
|
} else {
|
||||||
setOpportunities((prev) =>
|
setOpportunities((prev) => prev.map((opp) => (opp.id === opportunity.id ? opportunity : opp)))
|
||||||
prev.map((opp) => (opp.id === opportunity.id ? opportunity : opp))
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCloseForm = () => {
|
const handleCloseForm = () => {
|
||||||
setIsFormOpen(false);
|
setIsFormOpen(false)
|
||||||
setSelectedOpportunity(null);
|
setSelectedOpportunity(null)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCloseDetails = () => {
|
const handleCloseDetails = () => {
|
||||||
setIsDetailsOpen(false);
|
setIsDetailsOpen(false)
|
||||||
setSelectedOpportunity(null);
|
setSelectedOpportunity(null)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEditFromDetails = (opportunity: CrmOpportunity) => {
|
const handleEditFromDetails = (opportunity: CrmOpportunity) => {
|
||||||
setIsDetailsOpen(false);
|
setIsDetailsOpen(false)
|
||||||
handleEdit(opportunity);
|
handleEdit(opportunity)
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredOpportunities = opportunities.filter((opportunity) => {
|
const filteredOpportunities = opportunities.filter((opportunity) => {
|
||||||
if (
|
if (
|
||||||
|
|
@ -96,56 +90,51 @@ const OpportunityManagement: React.FC = () => {
|
||||||
!opportunity.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
!opportunity.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
||||||
!opportunity.description?.toLowerCase().includes(searchTerm.toLowerCase())
|
!opportunity.description?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
) {
|
) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (selectedStage !== "all" && opportunity.stage !== selectedStage) {
|
if (selectedStage !== 'all' && opportunity.stage !== selectedStage) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (
|
if (selectedCustomer !== 'all' && opportunity.customerId !== selectedCustomer) {
|
||||||
selectedCustomer !== "all" &&
|
return false
|
||||||
opportunity.customerId !== selectedCustomer
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
const columns: Column<CrmOpportunity>[] = [
|
const columns: Column<CrmOpportunity>[] = [
|
||||||
{
|
{
|
||||||
key: "title",
|
key: 'title',
|
||||||
header: "Fırsat Başlığı",
|
header: 'Fırsat Başlığı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<div>
|
<div>
|
||||||
<div className="font-medium text-gray-900">{opportunity.title}</div>
|
<div className="font-medium text-gray-900">{opportunity.title}</div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">{opportunity.opportunityNumber}</div>
|
||||||
{opportunity.opportunityNumber}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "customer",
|
key: 'customer',
|
||||||
header: "Müşteri",
|
header: 'Müşteri',
|
||||||
render: (opportunity: CrmOpportunity) => {
|
render: (opportunity: CrmOpportunity) => {
|
||||||
const customer = customers.find((c) => c.id === opportunity.customerId);
|
const customer = customers.find((c) => c.id === opportunity.customerId)
|
||||||
return customer ? (
|
return customer ? (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaBuilding className="w-4 h-4 text-gray-400" />
|
<FaBuilding className="w-4 h-4 text-gray-400" />
|
||||||
<span>{customer.name}</span>
|
<span>{customer.name}</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
"-"
|
'-'
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "stage",
|
key: 'stage',
|
||||||
header: "Aşama",
|
header: 'Aşama',
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${getOpportunityStageColor(
|
className={`px-2 py-1 text-xs font-medium rounded-full ${getOpportunityStageColor(
|
||||||
opportunity.stage
|
opportunity.stage,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getOpportunityStageText(opportunity.stage)}
|
{getOpportunityStageText(opportunity.stage)}
|
||||||
|
|
@ -153,27 +142,23 @@ const OpportunityManagement: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "estimatedValue",
|
key: 'estimatedValue',
|
||||||
header: "Tahmini Değer",
|
header: 'Tahmini Değer',
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-400" />
|
<FaDollarSign className="w-4 h-4 text-gray-400" />
|
||||||
<span className="font-medium">
|
<span className="font-medium">₺{opportunity.estimatedValue.toLocaleString()}</span>
|
||||||
₺{opportunity.estimatedValue.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "probability",
|
key: 'probability',
|
||||||
header: "Olasılık",
|
header: 'Olasılık',
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaArrowUp className="w-4 h-4 text-gray-400" />
|
<FaArrowUp className="w-4 h-4 text-gray-400" />
|
||||||
<span
|
<span
|
||||||
className={`font-medium ${getOpportunityProbabilityColor(
|
className={`font-medium ${getOpportunityProbabilityColor(opportunity.probability)}`}
|
||||||
opportunity.probability
|
|
||||||
)}`}
|
|
||||||
>
|
>
|
||||||
%{opportunity.probability}
|
%{opportunity.probability}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -181,22 +166,18 @@ const OpportunityManagement: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "expectedCloseDate",
|
key: 'expectedCloseDate',
|
||||||
header: "Beklenen Kapanış",
|
header: 'Beklenen Kapanış',
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<div className="flex items-center gap-1 text-sm">
|
<div className="flex items-center gap-1 text-sm">
|
||||||
<FaCalendar className="w-3 h-3 text-gray-400" />
|
<FaCalendar className="w-3 h-3 text-gray-400" />
|
||||||
<span>
|
<span>{new Date(opportunity.expectedCloseDate).toLocaleDateString('tr-TR')}</span>
|
||||||
{new Date(opportunity.expectedCloseDate).toLocaleDateString(
|
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "assignedTo",
|
key: 'assignedTo',
|
||||||
header: "Sorumlu",
|
header: 'Sorumlu',
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaUser className="w-4 h-4 text-gray-400" />
|
<FaUser className="w-4 h-4 text-gray-400" />
|
||||||
|
|
@ -205,8 +186,8 @@ const OpportunityManagement: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (opportunity: CrmOpportunity) => (
|
render: (opportunity: CrmOpportunity) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -233,238 +214,195 @@ const OpportunityManagement: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
// Calculate statistics
|
// Calculate statistics
|
||||||
const totalOpportunities = opportunities.length;
|
const totalOpportunities = opportunities.length
|
||||||
const activeOpportunities = opportunities.filter(
|
const activeOpportunities = opportunities.filter(
|
||||||
(o) =>
|
(o) =>
|
||||||
o.stage !== OpportunityStageEnum.ClosedWon &&
|
o.stage !== OpportunityStageEnum.ClosedWon && o.stage !== OpportunityStageEnum.ClosedLost,
|
||||||
o.stage !== OpportunityStageEnum.ClosedLost
|
).length
|
||||||
).length;
|
const totalValue = opportunities.reduce((sum, opp) => sum + opp.estimatedValue, 0)
|
||||||
const totalValue = opportunities.reduce(
|
|
||||||
(sum, opp) => sum + opp.estimatedValue,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const averageProbability =
|
const averageProbability =
|
||||||
opportunities.reduce((sum, opp) => sum + opp.probability, 0) /
|
opportunities.reduce((sum, opp) => sum + opp.probability, 0) / opportunities.length || 0
|
||||||
opportunities.length || 0;
|
|
||||||
|
|
||||||
// Stage distribution
|
// Stage distribution
|
||||||
const stageDistribution = Object.values(OpportunityStageEnum).map(
|
const stageDistribution = Object.values(OpportunityStageEnum).map((stage) => ({
|
||||||
(stage) => ({
|
stage,
|
||||||
stage,
|
count: opportunities.filter((o) => o.stage === stage).length,
|
||||||
count: opportunities.filter((o) => o.stage === stage).length,
|
value: opportunities
|
||||||
value: opportunities
|
.filter((o) => o.stage === stage)
|
||||||
.filter((o) => o.stage === stage)
|
.reduce((sum, o) => sum + o.estimatedValue, 0),
|
||||||
.reduce((sum, o) => sum + o.estimatedValue, 0),
|
}))
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-3 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-bold text-gray-900">
|
<div>
|
||||||
Teklif & Fırsat Yönetimi
|
<h2 className="text-xl font-bold text-gray-900">Teklif & Fırsat Yönetimi</h2>
|
||||||
</h2>
|
<p className="text-sm text-gray-600">Satış fırsatları ve teklif takibi</p>
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Satış fırsatları ve teklif takibi
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Yeni Fırsat
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|
||||||
<Widget
|
|
||||||
title="Toplam Fırsat"
|
|
||||||
value={totalOpportunities}
|
|
||||||
color="blue"
|
|
||||||
icon="FaBullseye"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Aktif Fırsat"
|
|
||||||
value={activeOpportunities}
|
|
||||||
color="green"
|
|
||||||
icon="FaArrowUp"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Toplam Değer"
|
|
||||||
value={`₺${totalValue.toLocaleString()}`}
|
|
||||||
color="purple"
|
|
||||||
icon="FaDollarSign"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Ortalama Olasılık"
|
|
||||||
value={`%${averageProbability.toFixed(0)}`}
|
|
||||||
color="orange"
|
|
||||||
icon="FaArrowUp"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stage Pipeline */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-3">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-3">
|
|
||||||
Satış Aşamaları
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-6 gap-2">
|
|
||||||
{stageDistribution.map(({ stage, count, value }) => (
|
|
||||||
<div key={stage} className="text-center p-2 border rounded-lg">
|
|
||||||
<div
|
|
||||||
className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getOpportunityStageColor(
|
|
||||||
stage
|
|
||||||
)}`}
|
|
||||||
>
|
|
||||||
{getOpportunityStageText(stage)}
|
|
||||||
</div>
|
|
||||||
<div className="text-lg font-bold text-gray-900 mb-1">
|
|
||||||
{count}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500">
|
|
||||||
₺{value.toLocaleString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Win Rate Analysis */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-3">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-3">
|
|
||||||
Başarı Oranı Analizi
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-green-600 mb-1">
|
|
||||||
{
|
|
||||||
opportunities.filter(
|
|
||||||
(o) => o.stage === OpportunityStageEnum.ClosedWon
|
|
||||||
).length
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">Kazanılan Fırsat</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-red-600 mb-1">
|
|
||||||
{
|
|
||||||
opportunities.filter(
|
|
||||||
(o) => o.stage === OpportunityStageEnum.ClosedLost
|
|
||||||
).length
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">Kaybedilen Fırsat</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 mb-1">
|
|
||||||
{Math.round(
|
|
||||||
(opportunities.filter(
|
|
||||||
(o) => o.stage === OpportunityStageEnum.ClosedWon
|
|
||||||
).length /
|
|
||||||
Math.max(
|
|
||||||
opportunities.filter(
|
|
||||||
(o) =>
|
|
||||||
o.stage === OpportunityStageEnum.ClosedWon ||
|
|
||||||
o.stage === OpportunityStageEnum.ClosedLost
|
|
||||||
).length,
|
|
||||||
1
|
|
||||||
)) *
|
|
||||||
100
|
|
||||||
)}
|
|
||||||
%
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">Kazanma Oranı</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Yeni Fırsat
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
{/* Stats Cards */}
|
||||||
<div className="flex gap-3 items-center">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<div className="flex-1">
|
<Widget title="Toplam Fırsat" value={totalOpportunities} color="blue" icon="FaBullseye" />
|
||||||
<input
|
|
||||||
type="text"
|
<Widget title="Aktif Fırsat" value={activeOpportunities} color="green" icon="FaArrowUp" />
|
||||||
placeholder="Fırsat başlığı ara..."
|
|
||||||
value={searchTerm}
|
<Widget
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
title="Toplam Değer"
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
value={`₺${totalValue.toLocaleString()}`}
|
||||||
|
color="purple"
|
||||||
|
icon="FaDollarSign"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Widget
|
||||||
|
title="Ortalama Olasılık"
|
||||||
|
value={`%${averageProbability.toFixed(0)}`}
|
||||||
|
color="orange"
|
||||||
|
icon="FaArrowUp"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select
|
{/* Stage Pipeline */}
|
||||||
value={selectedStage}
|
<div className="bg-white rounded-lg shadow-sm border p-3">
|
||||||
onChange={(e) =>
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Satış Aşamaları</h3>
|
||||||
setSelectedStage(e.target.value as OpportunityStageEnum | "all")
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-2">
|
||||||
}
|
{stageDistribution.map(({ stage, count, value }) => (
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
<div key={stage} className="text-center p-2 border rounded-lg">
|
||||||
>
|
<div
|
||||||
<option value="all">Tüm Aşamalar</option>
|
className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getOpportunityStageColor(
|
||||||
{Object.values(OpportunityStageEnum).map((stage) => (
|
stage,
|
||||||
<option key={stage} value={stage}>
|
)}`}
|
||||||
{getOpportunityStageText(stage)}
|
>
|
||||||
</option>
|
{getOpportunityStageText(stage)}
|
||||||
))}
|
</div>
|
||||||
</select>
|
<div className="text-lg font-bold text-gray-900 mb-1">{count}</div>
|
||||||
|
<div className="text-xs text-gray-500">₺{value.toLocaleString()}</div>
|
||||||
<select
|
</div>
|
||||||
value={selectedCustomer}
|
))}
|
||||||
onChange={(e) => setSelectedCustomer(e.target.value)}
|
</div>
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="all">Tüm Müşteriler</option>
|
|
||||||
{customers.map((customer) => (
|
|
||||||
<option key={customer.id} value={customer.id}>
|
|
||||||
{customer.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Data Table */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
|
||||||
<DataTable data={filteredOpportunities} columns={columns} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{filteredOpportunities.length === 0 && (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<FaBullseye className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
||||||
Fırsat bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Win Rate Analysis */}
|
||||||
<OpportunityForm
|
<div className="bg-white rounded-lg shadow-sm border p-3">
|
||||||
isOpen={isFormOpen}
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Başarı Oranı Analizi</h3>
|
||||||
onClose={handleCloseForm}
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
onSave={handleSaveOpportunity}
|
<div className="text-center">
|
||||||
opportunity={selectedOpportunity}
|
<div className="text-2xl font-bold text-green-600 mb-1">
|
||||||
mode={formMode}
|
{opportunities.filter((o) => o.stage === OpportunityStageEnum.ClosedWon).length}
|
||||||
/>
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">Kazanılan Fırsat</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<OpportunityDetails
|
<div className="text-center">
|
||||||
isOpen={isDetailsOpen}
|
<div className="text-2xl font-bold text-red-600 mb-1">
|
||||||
onClose={handleCloseDetails}
|
{opportunities.filter((o) => o.stage === OpportunityStageEnum.ClosedLost).length}
|
||||||
onEdit={handleEditFromDetails}
|
</div>
|
||||||
opportunity={selectedOpportunity}
|
<p className="text-sm text-gray-600">Kaybedilen Fırsat</p>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OpportunityManagement;
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-blue-600 mb-1">
|
||||||
|
{Math.round(
|
||||||
|
(opportunities.filter((o) => o.stage === OpportunityStageEnum.ClosedWon).length /
|
||||||
|
Math.max(
|
||||||
|
opportunities.filter(
|
||||||
|
(o) =>
|
||||||
|
o.stage === OpportunityStageEnum.ClosedWon ||
|
||||||
|
o.stage === OpportunityStageEnum.ClosedLost,
|
||||||
|
).length,
|
||||||
|
1,
|
||||||
|
)) *
|
||||||
|
100,
|
||||||
|
)}
|
||||||
|
%
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">Kazanma Oranı</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex gap-3 items-center">
|
||||||
|
<div className="flex-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Fırsat başlığı ara..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedStage}
|
||||||
|
onChange={(e) => setSelectedStage(e.target.value as OpportunityStageEnum | 'all')}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Aşamalar</option>
|
||||||
|
{Object.values(OpportunityStageEnum).map((stage) => (
|
||||||
|
<option key={stage} value={stage}>
|
||||||
|
{getOpportunityStageText(stage)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedCustomer}
|
||||||
|
onChange={(e) => setSelectedCustomer(e.target.value)}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Müşteriler</option>
|
||||||
|
{customers.map((customer) => (
|
||||||
|
<option key={customer.id} value={customer.id}>
|
||||||
|
{customer.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Data Table */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
|
<DataTable data={filteredOpportunities} columns={columns} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredOpportunities.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<FaBullseye className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Fırsat bulunamadı</h3>
|
||||||
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
<OpportunityForm
|
||||||
|
isOpen={isFormOpen}
|
||||||
|
onClose={handleCloseForm}
|
||||||
|
onSave={handleSaveOpportunity}
|
||||||
|
opportunity={selectedOpportunity}
|
||||||
|
mode={formMode}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<OpportunityDetails
|
||||||
|
isOpen={isDetailsOpen}
|
||||||
|
onClose={handleCloseDetails}
|
||||||
|
onEdit={handleEditFromDetails}
|
||||||
|
opportunity={selectedOpportunity}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OpportunityManagement
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from 'react'
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
FaEdit,
|
FaEdit,
|
||||||
FaArrowLeft,
|
FaArrowLeft,
|
||||||
|
|
@ -17,440 +17,397 @@ import {
|
||||||
FaTruck,
|
FaTruck,
|
||||||
FaFileInvoiceDollar,
|
FaFileInvoiceDollar,
|
||||||
FaExclamationCircle,
|
FaExclamationCircle,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import {
|
import { CrmSalesOrder, CrmSalesOrderItem, SaleOrderItemStatusEnum } from '../../../types/crm'
|
||||||
CrmSalesOrder,
|
import { mockSalesOrders } from '../../../mocks/mockSalesOrders'
|
||||||
CrmSalesOrderItem,
|
|
||||||
SaleOrderItemStatusEnum,
|
|
||||||
} from "../../../types/crm";
|
|
||||||
import { mockSalesOrders } from "../../../mocks/mockSalesOrders";
|
|
||||||
import {
|
import {
|
||||||
getSaleOrderItemStatusnfo,
|
getSaleOrderItemStatusnfo,
|
||||||
getSaleOrderStatusColor,
|
getSaleOrderStatusColor,
|
||||||
getSaleOrderStatusText,
|
getSaleOrderStatusText,
|
||||||
} from "../../../utils/erp";
|
} from '../../../utils/erp'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const SalesOrderView: React.FC = () => {
|
const SalesOrderView: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const { id } = useParams();
|
const { id } = useParams()
|
||||||
|
|
||||||
const [order, setOrder] = useState<CrmSalesOrder | null>(null);
|
const [order, setOrder] = useState<CrmSalesOrder | null>(null)
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (id) {
|
if (id) {
|
||||||
// Find the order from mock data
|
// Find the order from mock data
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const foundOrder = mockSalesOrders.find((order) => order.id === id);
|
const foundOrder = mockSalesOrders.find((order) => order.id === id)
|
||||||
if (foundOrder) {
|
if (foundOrder) {
|
||||||
setOrder(foundOrder);
|
setOrder(foundOrder)
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false)
|
||||||
}, 1000);
|
}, 1000)
|
||||||
}
|
}
|
||||||
}, [id]);
|
}, [id])
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-64">
|
<div className="flex items-center justify-center h-64">
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!order) {
|
if (!order) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center h-64">
|
<div className="flex flex-col items-center justify-center h-64">
|
||||||
<FaExclamationCircle className="text-4xl text-red-500 mb-4" />
|
<FaExclamationCircle className="text-4xl text-red-500 mb-4" />
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
<h2 className="text-xl font-semibold text-gray-900 mb-2">Sipariş Bulunamadı</h2>
|
||||||
Sipariş Bulunamadı
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 mb-4">Belirtilen sipariş mevcut değil.</p>
|
<p className="text-gray-600 mb-4">Belirtilen sipariş mevcut değil.</p>
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate("/admin/crm/sales-orders")}
|
onClick={() => navigate('/admin/crm/sales-orders')}
|
||||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
Sipariş Listesine Dön
|
Sipariş Listesine Dön
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-4">
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<button
|
<div className="flex items-center space-x-4">
|
||||||
onClick={() => navigate("/admin/crm/sales-orders")}
|
<button
|
||||||
className="flex items-center text-gray-600 hover:text-gray-800 transition-colors"
|
onClick={() => navigate('/admin/crm/sales-orders')}
|
||||||
>
|
className="flex items-center text-gray-600 hover:text-gray-800 transition-colors"
|
||||||
<FaArrowLeft className="mr-2" />
|
>
|
||||||
Geri
|
<FaArrowLeft className="mr-2" />
|
||||||
</button>
|
Geri
|
||||||
<div className="h-6 border-l border-gray-300"></div>
|
</button>
|
||||||
|
<div className="h-6 border-l border-gray-300"></div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold text-gray-900 flex items-center">
|
||||||
|
<FaShoppingCart className="mr-3 text-blue-600" />
|
||||||
|
{order.orderNumber}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Satış Siparişi Detayları</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span
|
||||||
|
className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${getSaleOrderStatusColor(
|
||||||
|
order.status,
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{getSaleOrderStatusText(order.status)}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate(`/admin/crm/sales-orders/edit/${order.id}`)}
|
||||||
|
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center"
|
||||||
|
>
|
||||||
|
<FaEdit className="mr-2" />
|
||||||
|
Düzenle
|
||||||
|
</button>
|
||||||
|
<button className="bg-gray-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-gray-700 transition-colors flex items-center">
|
||||||
|
<FaPrint className="mr-2" />
|
||||||
|
Yazdır
|
||||||
|
</button>
|
||||||
|
<button className="bg-green-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-green-700 transition-colors flex items-center">
|
||||||
|
<FaDownload className="mr-2" />
|
||||||
|
İndir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Order Info Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
|
||||||
|
<div className="bg-gradient-to-r from-blue-50 to-blue-100 p-3 rounded-lg border border-blue-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-blue-800">Sipariş Tarihi</p>
|
||||||
|
<p className="text-base font-bold text-blue-900">
|
||||||
|
{new Date(order.orderDate).toLocaleDateString('tr-TR')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<FaCalendar className="text-2xl text-blue-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-r from-green-50 to-green-100 p-3 rounded-lg border border-green-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-green-800">Talep Edilen Tarih</p>
|
||||||
|
<p className="text-base font-bold text-green-900">
|
||||||
|
{new Date(order.requestedDeliveryDate).toLocaleDateString('tr-TR')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<FaCalendar className="text-2xl text-green-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-r from-purple-50 to-purple-100 p-3 rounded-lg border border-purple-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-purple-800">Onaylanan Tarih</p>
|
||||||
|
<p className="text-base font-bold text-purple-900">
|
||||||
|
{order.confirmedDeliveryDate
|
||||||
|
? new Date(order.confirmedDeliveryDate).toLocaleDateString('tr-TR')
|
||||||
|
: 'Belirtilmemiş'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<FaCalendar className="text-2xl text-purple-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-r from-amber-50 to-amber-100 p-3 rounded-lg border border-amber-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-amber-800">Toplam Tutar</p>
|
||||||
|
<p className="text-base font-bold text-amber-900">
|
||||||
|
{order.totalAmount.toLocaleString('tr-TR')} {order.currency}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<FaCalculator className="text-2xl text-amber-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Info */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl font-bold text-gray-900 flex items-center">
|
<span className="font-medium text-gray-700">Ödeme Koşulları:</span>
|
||||||
<FaShoppingCart className="mr-3 text-blue-600" />
|
<p className="text-gray-900">{order.paymentTerms}</p>
|
||||||
{order.orderNumber}
|
</div>
|
||||||
</h1>
|
<div>
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
<span className="font-medium text-gray-700">Para Birimi:</span>
|
||||||
Satış Siparişi Detayları
|
<p className="text-gray-900">{order.currency}</p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
<div className="mt-3 pt-3 border-t border-gray-200">
|
||||||
<span
|
<div className="text-sm text-gray-600">
|
||||||
className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${getSaleOrderStatusColor(
|
<span className="font-medium">Son Güncelleme:</span>
|
||||||
order.status
|
<div className="mt-1">
|
||||||
)}`}
|
{order.lastModificationTime
|
||||||
>
|
? new Date(order.lastModificationTime).toLocaleString('tr-TR')
|
||||||
{getSaleOrderStatusText(order.status)}
|
: 'Güncelleme yok'}
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
navigate(`/admin/crm/sales-orders/edit/${order.id}`)
|
|
||||||
}
|
|
||||||
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center"
|
|
||||||
>
|
|
||||||
<FaEdit className="mr-2" />
|
|
||||||
Düzenle
|
|
||||||
</button>
|
|
||||||
<button className="bg-gray-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-gray-700 transition-colors flex items-center">
|
|
||||||
<FaPrint className="mr-2" />
|
|
||||||
Yazdır
|
|
||||||
</button>
|
|
||||||
<button className="bg-green-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-green-700 transition-colors flex items-center">
|
|
||||||
<FaDownload className="mr-2" />
|
|
||||||
İndir
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Order Info Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
|
|
||||||
<div className="bg-gradient-to-r from-blue-50 to-blue-100 p-3 rounded-lg border border-blue-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-blue-800">
|
|
||||||
Sipariş Tarihi
|
|
||||||
</p>
|
|
||||||
<p className="text-base font-bold text-blue-900">
|
|
||||||
{new Date(order.orderDate).toLocaleDateString("tr-TR")}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<FaCalendar className="text-2xl text-blue-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gradient-to-r from-green-50 to-green-100 p-3 rounded-lg border border-green-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-green-800">
|
|
||||||
Talep Edilen Tarih
|
|
||||||
</p>
|
|
||||||
<p className="text-base font-bold text-green-900">
|
|
||||||
{new Date(order.requestedDeliveryDate).toLocaleDateString(
|
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FaCalendar className="text-2xl text-green-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gradient-to-r from-purple-50 to-purple-100 p-3 rounded-lg border border-purple-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-purple-800">
|
|
||||||
Onaylanan Tarih
|
|
||||||
</p>
|
|
||||||
<p className="text-base font-bold text-purple-900">
|
|
||||||
{order.confirmedDeliveryDate
|
|
||||||
? new Date(order.confirmedDeliveryDate).toLocaleDateString(
|
|
||||||
"tr-TR"
|
|
||||||
)
|
|
||||||
: "Belirtilmemiş"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FaCalendar className="text-2xl text-purple-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gradient-to-r from-amber-50 to-amber-100 p-3 rounded-lg border border-amber-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-amber-800">
|
|
||||||
Toplam Tutar
|
|
||||||
</p>
|
|
||||||
<p className="text-base font-bold text-amber-900">
|
|
||||||
{order.totalAmount.toLocaleString("tr-TR")} {order.currency}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FaCalculator className="text-2xl text-amber-600" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Additional Info */}
|
{/* Customer Information */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<div>
|
<h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
<span className="font-medium text-gray-700">Ödeme Koşulları:</span>
|
<FaBuilding className="mr-3 text-blue-600" />
|
||||||
<p className="text-gray-900">{order.paymentTerms}</p>
|
Müşteri Bilgileri
|
||||||
</div>
|
</h2>
|
||||||
<div>
|
|
||||||
<span className="font-medium text-gray-700">Para Birimi:</span>
|
|
||||||
<p className="text-gray-900">{order.currency}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3 pt-3 border-t border-gray-200">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="text-sm text-gray-600">
|
<div>
|
||||||
<span className="font-medium">Son Güncelleme:</span>
|
<h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
|
||||||
<div className="mt-1">
|
<FaUser className="mr-2 text-gray-600" />
|
||||||
{order.lastModificationTime
|
Müşteri Detayları
|
||||||
? new Date(order.lastModificationTime).toLocaleString("tr-TR")
|
</h3>
|
||||||
: "Güncelleme yok"}
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-600">Firma Adı:</span>
|
||||||
|
<p className="text-sm font-medium text-gray-900">
|
||||||
|
{order.customer?.name || 'Müşteri bilgisi yok'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-600">İletişim Kişisi:</span>
|
||||||
|
<p className="text-sm text-gray-900">
|
||||||
|
{order.customer?.primaryContact?.fullName || 'Belirtilmemiş'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<FaPhone className="mr-2" />
|
||||||
|
<span>{order.customer?.primaryContact?.phone || 'Belirtilmemiş'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<FaEnvelope className="mr-2" />
|
||||||
|
<span>{order.customer?.primaryContact?.email || 'Belirtilmemiş'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Customer Information */}
|
<div>
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
<h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
<FaMapMarkerAlt className="mr-2 text-gray-600" />
|
||||||
<FaBuilding className="mr-3 text-blue-600" />
|
Teslimat Adresi
|
||||||
Müşteri Bilgileri
|
</h3>
|
||||||
</h2>
|
<div className="text-sm text-gray-900 space-y-1">
|
||||||
|
<p>{order.deliveryAddress.street}</p>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<p>
|
||||||
<div>
|
{order.deliveryAddress.city}, {order.deliveryAddress.state}
|
||||||
<h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
|
|
||||||
<FaUser className="mr-2 text-gray-600" />
|
|
||||||
Müşteri Detayları
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-600">
|
|
||||||
Firma Adı:
|
|
||||||
</span>
|
|
||||||
<p className="text-sm font-medium text-gray-900">
|
|
||||||
{order.customer?.name || "Müşteri bilgisi yok"}
|
|
||||||
</p>
|
</p>
|
||||||
|
<p>{order.deliveryAddress.postalCode}</p>
|
||||||
|
<p>{order.deliveryAddress.country}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-600">
|
|
||||||
İletişim Kişisi:
|
|
||||||
</span>
|
|
||||||
<p className="text-sm text-gray-900">
|
|
||||||
{order.customer?.primaryContact?.fullName || "Belirtilmemiş"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center text-sm text-gray-600">
|
|
||||||
<FaPhone className="mr-2" />
|
|
||||||
<span>
|
|
||||||
{order.customer?.primaryContact?.phone || "Belirtilmemiş"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center text-sm text-gray-600">
|
|
||||||
<FaEnvelope className="mr-2" />
|
|
||||||
<span>
|
|
||||||
{order.customer?.primaryContact?.email || "Belirtilmemiş"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-base font-medium text-gray-800 mb-2 flex items-center">
|
|
||||||
<FaMapMarkerAlt className="mr-2 text-gray-600" />
|
|
||||||
Teslimat Adresi
|
|
||||||
</h3>
|
|
||||||
<div className="text-sm text-gray-900 space-y-1">
|
|
||||||
<p>{order.deliveryAddress.street}</p>
|
|
||||||
<p>
|
|
||||||
{order.deliveryAddress.city}, {order.deliveryAddress.state}
|
|
||||||
</p>
|
|
||||||
<p>{order.deliveryAddress.postalCode}</p>
|
|
||||||
<p>{order.deliveryAddress.country}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Order Items */}
|
{/* Order Items */}
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
<h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
<FaClipboardList className="mr-3 text-blue-600" />
|
<FaClipboardList className="mr-3 text-blue-600" />
|
||||||
Sipariş Kalemleri
|
Sipariş Kalemleri
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<table className="min-w-full divide-y divide-gray-200">
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
<thead className="bg-gray-50">
|
<thead className="bg-gray-50">
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
Malzeme
|
Malzeme
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
Miktar
|
Miktar
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
Teslim Edilen
|
Teslim Edilen
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
Birim Fiyat
|
Birim Fiyat
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
Toplam
|
Toplam
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
Durum
|
Durum
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
{order.items.map((item: CrmSalesOrderItem) => {
|
{order.items.map((item: CrmSalesOrderItem) => {
|
||||||
const itemStatus = getSaleOrderItemStatusnfo(item.status);
|
const itemStatus = getSaleOrderItemStatusnfo(item.status)
|
||||||
return (
|
return (
|
||||||
<tr key={item.id} className="hover:bg-gray-50">
|
<tr key={item.id} className="hover:bg-gray-50">
|
||||||
<td className="px-4 py-2 whitespace-nowrap">
|
<td className="px-4 py-2 whitespace-nowrap">
|
||||||
<div>
|
<div>
|
||||||
<div className="text-sm font-medium text-gray-900">
|
<div className="text-sm font-medium text-gray-900">
|
||||||
{item.material?.code || item.materialId}
|
{item.material?.code || item.materialId}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
{item.material?.name || item.description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
|
||||||
|
{item.quantity} {item.material?.baseUnit?.name || 'Adet'}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap">
|
||||||
|
<div className="font-medium">
|
||||||
|
{item.deliveredQuantity} {item.material?.baseUnit?.name || 'Adet'}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-gray-500">
|
<div className="text-xs text-gray-500">
|
||||||
{item.material?.name || item.description}
|
{((item.deliveredQuantity / item.quantity) * 100).toFixed(1)}% tamamlandı
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</td>
|
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
|
||||||
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
|
{item.unitPrice.toLocaleString('tr-TR')} {order.currency}
|
||||||
{item.quantity} {item.material?.baseUnit?.name || "Adet"}
|
</td>
|
||||||
</td>
|
<td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||||
<td className="px-4 py-2 whitespace-nowrap">
|
{item.totalAmount.toLocaleString('tr-TR')} {order.currency}
|
||||||
<div className="font-medium">
|
</td>
|
||||||
{item.deliveredQuantity}{" "}
|
<td className="px-4 py-2 whitespace-nowrap">
|
||||||
{item.material?.baseUnit?.name || "Adet"}
|
<span
|
||||||
</div>
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${itemStatus.color}`}
|
||||||
<div className="text-xs text-gray-500">
|
>
|
||||||
{(
|
<itemStatus.icon className={`mr-1 ${itemStatus.iconColor}`} />
|
||||||
(item.deliveredQuantity / item.quantity) *
|
{itemStatus.label}
|
||||||
100
|
</span>
|
||||||
).toFixed(1)}
|
</td>
|
||||||
% tamamlandı
|
</tr>
|
||||||
</div>
|
)
|
||||||
</td>
|
})}
|
||||||
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
|
</tbody>
|
||||||
{item.unitPrice.toLocaleString("tr-TR")} {order.currency}
|
</table>
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
{item.totalAmount.toLocaleString("tr-TR")}{" "}
|
|
||||||
{order.currency}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 whitespace-nowrap">
|
|
||||||
<span
|
|
||||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${itemStatus.color}`}
|
|
||||||
>
|
|
||||||
<itemStatus.icon
|
|
||||||
className={`mr-1 ${itemStatus.iconColor}`}
|
|
||||||
/>
|
|
||||||
{itemStatus.label}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Financial Summary */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
|
||||||
<FaCalculator className="mr-3 text-blue-600" />
|
|
||||||
Mali Özet
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex justify-between py-1.5 border-b border-gray-100">
|
|
||||||
<span className="text-sm font-medium text-gray-600">
|
|
||||||
Ara Toplam:
|
|
||||||
</span>
|
|
||||||
<span className="text-sm text-gray-900">
|
|
||||||
{order.subtotal.toLocaleString("tr-TR")} {order.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between py-1.5 border-b border-gray-100">
|
|
||||||
<span className="text-sm font-medium text-gray-600">
|
|
||||||
İndirim:
|
|
||||||
</span>
|
|
||||||
<span className="text-sm text-gray-900">
|
|
||||||
-{order.discountAmount.toLocaleString("tr-TR")} {order.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between py-1.5 border-b border-gray-100">
|
|
||||||
<span className="text-sm font-medium text-gray-600">KDV:</span>
|
|
||||||
<span className="text-sm text-gray-900">
|
|
||||||
{order.taxAmount.toLocaleString("tr-TR")} {order.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between py-2 border-t-2 border-gray-200">
|
|
||||||
<span className="text-base font-bold text-gray-900">
|
|
||||||
Genel Toplam:
|
|
||||||
</span>
|
|
||||||
<span className="text-base font-bold text-gray-900">
|
|
||||||
{order.totalAmount.toLocaleString("tr-TR")} {order.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4">
|
{/* Financial Summary */}
|
||||||
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<h3 className="text-sm font-medium text-blue-800 mb-2 flex items-center">
|
<h2 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
<FaTruck className="mr-2" />
|
<FaCalculator className="mr-3 text-blue-600" />
|
||||||
Teslimat Durumu
|
Mali Özet
|
||||||
</h3>
|
</h2>
|
||||||
<div className="text-sm text-blue-900">
|
|
||||||
<p>Toplam Kalem: {order.items.length}</p>
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<p>
|
<div className="space-y-2">
|
||||||
Teslim Edilenler:{" "}
|
<div className="flex justify-between py-1.5 border-b border-gray-100">
|
||||||
{
|
<span className="text-sm font-medium text-gray-600">Ara Toplam:</span>
|
||||||
order.items.filter(
|
<span className="text-sm text-gray-900">
|
||||||
(item) =>
|
{order.subtotal.toLocaleString('tr-TR')} {order.currency}
|
||||||
item.status === SaleOrderItemStatusEnum.Delivered
|
</span>
|
||||||
).length
|
</div>
|
||||||
}
|
<div className="flex justify-between py-1.5 border-b border-gray-100">
|
||||||
</p>
|
<span className="text-sm font-medium text-gray-600">İndirim:</span>
|
||||||
<p>
|
<span className="text-sm text-gray-900">
|
||||||
Bekleyenler:{" "}
|
-{order.discountAmount.toLocaleString('tr-TR')} {order.currency}
|
||||||
{
|
</span>
|
||||||
order.items.filter(
|
</div>
|
||||||
(item) =>
|
<div className="flex justify-between py-1.5 border-b border-gray-100">
|
||||||
item.status !== SaleOrderItemStatusEnum.Delivered
|
<span className="text-sm font-medium text-gray-600">KDV:</span>
|
||||||
).length
|
<span className="text-sm text-gray-900">
|
||||||
}
|
{order.taxAmount.toLocaleString('tr-TR')} {order.currency}
|
||||||
</p>
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-t-2 border-gray-200">
|
||||||
|
<span className="text-base font-bold text-gray-900">Genel Toplam:</span>
|
||||||
|
<span className="text-base font-bold text-gray-900">
|
||||||
|
{order.totalAmount.toLocaleString('tr-TR')} {order.currency}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-green-50 p-4 rounded-lg border border-green-200">
|
<div className="space-y-4">
|
||||||
<h3 className="text-sm font-medium text-green-800 mb-2 flex items-center">
|
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
|
||||||
<FaFileInvoiceDollar className="mr-2" />
|
<h3 className="text-sm font-medium text-blue-800 mb-2 flex items-center">
|
||||||
Faturalama Durumu
|
<FaTruck className="mr-2" />
|
||||||
</h3>
|
Teslimat Durumu
|
||||||
<div className="text-sm text-green-900">
|
</h3>
|
||||||
<p>Teslimat Sayısı: {order.deliveries?.length || 0}</p>
|
<div className="text-sm text-blue-900">
|
||||||
|
<p>Toplam Kalem: {order.items.length}</p>
|
||||||
|
<p>
|
||||||
|
Teslim Edilenler:{' '}
|
||||||
|
{
|
||||||
|
order.items.filter(
|
||||||
|
(item) => item.status === SaleOrderItemStatusEnum.Delivered,
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Bekleyenler:{' '}
|
||||||
|
{
|
||||||
|
order.items.filter(
|
||||||
|
(item) => item.status !== SaleOrderItemStatusEnum.Delivered,
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-green-50 p-4 rounded-lg border border-green-200">
|
||||||
|
<h3 className="text-sm font-medium text-green-800 mb-2 flex items-center">
|
||||||
|
<FaFileInvoiceDollar className="mr-2" />
|
||||||
|
Faturalama Durumu
|
||||||
|
</h3>
|
||||||
|
<div className="text-sm text-green-900">
|
||||||
|
<p>Teslimat Sayısı: {order.deliveries?.length || 0}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default SalesOrderView;
|
export default SalesOrderView
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
FaShoppingCart,
|
FaShoppingCart,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
|
|
@ -9,146 +9,128 @@ import {
|
||||||
FaCalendar,
|
FaCalendar,
|
||||||
FaBox,
|
FaBox,
|
||||||
FaBuilding,
|
FaBuilding,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { CrmSalesOrder, SaleOrderStatusEnum } from "../../../types/crm";
|
import { CrmSalesOrder, SaleOrderStatusEnum } from '../../../types/crm'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||||
import { mockSalesOrders } from "../../../mocks/mockSalesOrders";
|
import { mockSalesOrders } from '../../../mocks/mockSalesOrders'
|
||||||
import { BusinessParty } from "../../../types/common";
|
import { BusinessParty } from '../../../types/common'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import {
|
import { getSaleOrderStatusColor, getSaleOrderStatusText } from '../../../utils/erp'
|
||||||
getSaleOrderStatusColor,
|
import { Container } from '@/components/shared'
|
||||||
getSaleOrderStatusText,
|
|
||||||
} from "../../../utils/erp";
|
|
||||||
|
|
||||||
const SalesOrders: React.FC = () => {
|
const SalesOrders: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const [salesOrders] = useState<CrmSalesOrder[]>(mockSalesOrders);
|
const [salesOrders] = useState<CrmSalesOrder[]>(mockSalesOrders)
|
||||||
const [customers] = useState<BusinessParty[]>(mockBusinessParties);
|
const [customers] = useState<BusinessParty[]>(mockBusinessParties)
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [selectedStatus, setSelectedStatus] = useState<
|
const [selectedStatus, setSelectedStatus] = useState<SaleOrderStatusEnum | 'all'>('all')
|
||||||
SaleOrderStatusEnum | "all"
|
const [selectedCustomer, setSelectedCustomer] = useState<string>('all')
|
||||||
>("all");
|
|
||||||
const [selectedCustomer, setSelectedCustomer] = useState<string>("all");
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
navigate("/admin/crm/sales-orders/new");
|
navigate('/admin/crm/sales-orders/new')
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (order: CrmSalesOrder) => {
|
const handleEdit = (order: CrmSalesOrder) => {
|
||||||
navigate(`/admin/crm/sales-orders/edit/${order.id}`);
|
navigate(`/admin/crm/sales-orders/edit/${order.id}`)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
console.log("Delete sales order:", id);
|
console.log('Delete sales order:', id)
|
||||||
// Implement delete functionality
|
// Implement delete functionality
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleViewDetails = (order: CrmSalesOrder) => {
|
const handleViewDetails = (order: CrmSalesOrder) => {
|
||||||
navigate(`/admin/crm/sales-orders/${order.id}`);
|
navigate(`/admin/crm/sales-orders/${order.id}`)
|
||||||
};
|
}
|
||||||
|
|
||||||
const filteredOrders = salesOrders.filter((order) => {
|
const filteredOrders = salesOrders.filter((order) => {
|
||||||
if (
|
if (searchTerm && !order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase())) {
|
||||||
searchTerm &&
|
return false
|
||||||
!order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase())
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
if (selectedStatus !== "all" && order.status !== selectedStatus) {
|
if (selectedStatus !== 'all' && order.status !== selectedStatus) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
if (selectedCustomer !== "all" && order.customerId !== selectedCustomer) {
|
if (selectedCustomer !== 'all' && order.customerId !== selectedCustomer) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
return true;
|
return true
|
||||||
});
|
})
|
||||||
|
|
||||||
const columns: Column<CrmSalesOrder>[] = [
|
const columns: Column<CrmSalesOrder>[] = [
|
||||||
{
|
{
|
||||||
key: "orderNumber",
|
key: 'orderNumber',
|
||||||
header: "Sipariş No",
|
header: 'Sipariş No',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (order: CrmSalesOrder) => (
|
render: (order: CrmSalesOrder) => (
|
||||||
<div>
|
<div>
|
||||||
<div className="font-medium text-gray-900">{order.orderNumber}</div>
|
<div className="font-medium text-gray-900">{order.orderNumber}</div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">Sipariş #{order.id.substring(0, 8)}</div>
|
||||||
Sipariş #{order.id.substring(0, 8)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "customer",
|
key: 'customer',
|
||||||
header: "Müşteri",
|
header: 'Müşteri',
|
||||||
render: (order: CrmSalesOrder) => {
|
render: (order: CrmSalesOrder) => {
|
||||||
const customer = customers.find((c) => c.id === order.customerId);
|
const customer = customers.find((c) => c.id === order.customerId)
|
||||||
return customer ? (
|
return customer ? (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaBuilding className="w-4 h-4 text-gray-400" />
|
<FaBuilding className="w-4 h-4 text-gray-400" />
|
||||||
<span>{customer.name}</span>
|
<span>{customer.name}</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
"-"
|
'-'
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "orderDate",
|
key: 'orderDate',
|
||||||
header: "Sipariş Tarihi",
|
header: 'Sipariş Tarihi',
|
||||||
render: (order: CrmSalesOrder) => (
|
render: (order: CrmSalesOrder) => (
|
||||||
<div className="flex items-center gap-1 text-sm">
|
<div className="flex items-center gap-1 text-sm">
|
||||||
<FaCalendar className="w-3 h-3 text-gray-400" />
|
<FaCalendar className="w-3 h-3 text-gray-400" />
|
||||||
<span>{new Date(order.orderDate).toLocaleDateString("tr-TR")}</span>
|
<span>{new Date(order.orderDate).toLocaleDateString('tr-TR')}</span>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "deliveryDate",
|
key: 'deliveryDate',
|
||||||
header: "Teslimat Tarihi",
|
header: 'Teslimat Tarihi',
|
||||||
render: (order: CrmSalesOrder) =>
|
render: (order: CrmSalesOrder) =>
|
||||||
order.confirmedDeliveryDate ? (
|
order.confirmedDeliveryDate ? (
|
||||||
<div className="flex items-center gap-1 text-sm">
|
<div className="flex items-center gap-1 text-sm">
|
||||||
<FaBox className="w-3 h-3 text-gray-400" />
|
<FaBox className="w-3 h-3 text-gray-400" />
|
||||||
<span>
|
<span>{new Date(order.confirmedDeliveryDate).toLocaleDateString('tr-TR')}</span>
|
||||||
{new Date(order.confirmedDeliveryDate).toLocaleDateString(
|
|
||||||
"tr-TR"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
) : order.requestedDeliveryDate ? (
|
) : order.requestedDeliveryDate ? (
|
||||||
<div className="flex items-center gap-1 text-sm text-gray-500">
|
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||||||
<FaBox className="w-3 h-3 text-gray-400" />
|
<FaBox className="w-3 h-3 text-gray-400" />
|
||||||
<span>
|
<span>
|
||||||
{new Date(order.requestedDeliveryDate).toLocaleDateString(
|
{new Date(order.requestedDeliveryDate).toLocaleDateString('tr-TR')} (İstenen)
|
||||||
"tr-TR"
|
|
||||||
)}{" "}
|
|
||||||
(İstenen)
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
"-"
|
'-'
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "totalAmount",
|
key: 'totalAmount',
|
||||||
header: "Toplam Tutar",
|
header: 'Toplam Tutar',
|
||||||
render: (order: CrmSalesOrder) => (
|
render: (order: CrmSalesOrder) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-400" />
|
<FaDollarSign className="w-4 h-4 text-gray-400" />
|
||||||
<span className="font-medium">
|
<span className="font-medium">₺{order.totalAmount.toLocaleString()}</span>
|
||||||
₺{order.totalAmount.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (order: CrmSalesOrder) => (
|
render: (order: CrmSalesOrder) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${getSaleOrderStatusColor(
|
className={`px-2 py-1 text-xs font-medium rounded-full ${getSaleOrderStatusColor(
|
||||||
order.status
|
order.status,
|
||||||
)}`}
|
)}`}
|
||||||
>
|
>
|
||||||
{getSaleOrderStatusText(order.status)}
|
{getSaleOrderStatusText(order.status)}
|
||||||
|
|
@ -156,8 +138,8 @@ const SalesOrders: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (order: CrmSalesOrder) => (
|
render: (order: CrmSalesOrder) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -184,231 +166,185 @@ const SalesOrders: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
// Calculate statistics
|
// Calculate statistics
|
||||||
const totalOrders = salesOrders.length;
|
const totalOrders = salesOrders.length
|
||||||
const activeOrders = salesOrders.filter(
|
const activeOrders = salesOrders.filter(
|
||||||
(o) =>
|
(o) =>
|
||||||
o.status === SaleOrderStatusEnum.Confirmed ||
|
o.status === SaleOrderStatusEnum.Confirmed || o.status === SaleOrderStatusEnum.InProduction,
|
||||||
o.status === SaleOrderStatusEnum.InProduction
|
).length
|
||||||
).length;
|
|
||||||
const totalRevenue = salesOrders
|
const totalRevenue = salesOrders
|
||||||
.filter((o) => o.status === SaleOrderStatusEnum.Delivered)
|
.filter((o) => o.status === SaleOrderStatusEnum.Delivered)
|
||||||
.reduce((sum, order) => sum + order.totalAmount, 0);
|
.reduce((sum, order) => sum + order.totalAmount, 0)
|
||||||
const averageOrderValue =
|
const averageOrderValue =
|
||||||
salesOrders.reduce((sum, order) => sum + order.totalAmount, 0) /
|
salesOrders.reduce((sum, order) => sum + order.totalAmount, 0) / salesOrders.length || 0
|
||||||
salesOrders.length || 0;
|
|
||||||
|
|
||||||
// Status distribution
|
// Status distribution
|
||||||
const statusDistribution = Object.values(SaleOrderStatusEnum).map(
|
const statusDistribution = Object.values(SaleOrderStatusEnum).map((status) => ({
|
||||||
(status) => ({
|
status,
|
||||||
status,
|
count: salesOrders.filter((o) => o.status === status).length,
|
||||||
count: salesOrders.filter((o) => o.status === status).length,
|
value: salesOrders
|
||||||
value: salesOrders
|
.filter((o) => o.status === status)
|
||||||
.filter((o) => o.status === status)
|
.reduce((sum, o) => sum + o.totalAmount, 0),
|
||||||
.reduce((sum, o) => sum + o.totalAmount, 0),
|
}))
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Monthly trend
|
// Monthly trend
|
||||||
const currentMonth = new Date();
|
const currentMonth = new Date()
|
||||||
const lastMonth = new Date(
|
const lastMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
|
||||||
currentMonth.getFullYear(),
|
const currentMonthOrders = salesOrders.filter((o) => new Date(o.orderDate) >= lastMonth).length
|
||||||
currentMonth.getMonth() - 1,
|
|
||||||
1
|
|
||||||
);
|
|
||||||
const currentMonthOrders = salesOrders.filter(
|
|
||||||
(o) => new Date(o.orderDate) >= lastMonth
|
|
||||||
).length;
|
|
||||||
const previousMonthOrders = salesOrders.filter((o) => {
|
const previousMonthOrders = salesOrders.filter((o) => {
|
||||||
const orderDate = new Date(o.orderDate);
|
const orderDate = new Date(o.orderDate)
|
||||||
return (
|
return (
|
||||||
orderDate >=
|
orderDate >= new Date(lastMonth.getFullYear(), lastMonth.getMonth() - 1, 1) &&
|
||||||
new Date(lastMonth.getFullYear(), lastMonth.getMonth() - 1, 1) &&
|
|
||||||
orderDate < lastMonth
|
orderDate < lastMonth
|
||||||
);
|
)
|
||||||
}).length;
|
}).length
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-3 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-bold text-gray-900">Satış Siparişleri</h2>
|
<div>
|
||||||
<p className="text-sm text-gray-600">
|
<h2 className="text-xl font-bold text-gray-900">Satış Siparişleri</h2>
|
||||||
Müşteri siparişleri ve teslimat takibi
|
<p className="text-sm text-gray-600">Müşteri siparişleri ve teslimat takibi</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Yeni Sipariş
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|
||||||
<Widget
|
|
||||||
title="Toplam Sipariş"
|
|
||||||
value={totalOrders}
|
|
||||||
color="blue"
|
|
||||||
icon="FaShoppingCart"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Aktif Sipariş"
|
|
||||||
value={activeOrders}
|
|
||||||
color="orange"
|
|
||||||
icon="FaBox"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Toplam Gelir"
|
|
||||||
value={`₺${totalRevenue.toLocaleString()}`}
|
|
||||||
color="green"
|
|
||||||
icon="FaDollarSign"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
|
||||||
title="Ortalama Sipariş"
|
|
||||||
value={`₺${averageOrderValue.toLocaleString()}`}
|
|
||||||
color="purple"
|
|
||||||
icon="FaArrowUp"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Order Status Pipeline */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-3">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-3">
|
|
||||||
Sipariş Durumu Dağılımı
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-7 gap-2">
|
|
||||||
{statusDistribution.map(({ status, count, value }) => (
|
|
||||||
<div
|
|
||||||
key={status as string}
|
|
||||||
className="text-center p-2 border rounded-lg"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getSaleOrderStatusColor(
|
|
||||||
status as SaleOrderStatusEnum
|
|
||||||
)}`}
|
|
||||||
>
|
|
||||||
{getSaleOrderStatusText(status as SaleOrderStatusEnum)}
|
|
||||||
</div>
|
|
||||||
<div className="text-xl font-bold text-gray-900 mb-1">
|
|
||||||
{count}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500">
|
|
||||||
₺{value.toLocaleString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Monthly Performance */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-3">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-3">
|
|
||||||
Aylık Performans
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 mb-1">
|
|
||||||
{currentMonthOrders}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">Bu Ay</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-gray-600 mb-1">
|
|
||||||
{previousMonthOrders}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">Geçen Ay</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<div
|
|
||||||
className={`text-2xl font-bold mb-1 ${
|
|
||||||
currentMonthOrders >= previousMonthOrders
|
|
||||||
? "text-green-600"
|
|
||||||
: "text-red-600"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{previousMonthOrders > 0
|
|
||||||
? `${Math.round(
|
|
||||||
((currentMonthOrders - previousMonthOrders) /
|
|
||||||
previousMonthOrders) *
|
|
||||||
100
|
|
||||||
)}%`
|
|
||||||
: "-%"}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">Değişim</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Yeni Sipariş
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
{/* Stats Cards */}
|
||||||
<div className="flex gap-3 items-center">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||||
<div className="flex-1">
|
<Widget title="Toplam Sipariş" value={totalOrders} color="blue" icon="FaShoppingCart" />
|
||||||
<input
|
|
||||||
type="text"
|
<Widget title="Aktif Sipariş" value={activeOrders} color="orange" icon="FaBox" />
|
||||||
placeholder="Sipariş numarası ara..."
|
|
||||||
value={searchTerm}
|
<Widget
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
title="Toplam Gelir"
|
||||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
value={`₺${totalRevenue.toLocaleString()}`}
|
||||||
|
color="green"
|
||||||
|
icon="FaDollarSign"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Widget
|
||||||
|
title="Ortalama Sipariş"
|
||||||
|
value={`₺${averageOrderValue.toLocaleString()}`}
|
||||||
|
color="purple"
|
||||||
|
icon="FaArrowUp"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select
|
{/* Order Status Pipeline */}
|
||||||
value={selectedStatus}
|
<div className="bg-white rounded-lg shadow-sm border p-3">
|
||||||
onChange={(e) =>
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Sipariş Durumu Dağılımı</h3>
|
||||||
setSelectedStatus(e.target.value as SaleOrderStatusEnum | "all")
|
<div className="grid grid-cols-2 md:grid-cols-7 gap-2">
|
||||||
}
|
{statusDistribution.map(({ status, count, value }) => (
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
<div key={status as string} className="text-center p-2 border rounded-lg">
|
||||||
>
|
<div
|
||||||
<option value="all">Tüm Durumlar</option>
|
className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mb-1 ${getSaleOrderStatusColor(
|
||||||
{Object.values(SaleOrderStatusEnum).map((status) => (
|
status as SaleOrderStatusEnum,
|
||||||
<option key={status as string} value={status as string}>
|
)}`}
|
||||||
{getSaleOrderStatusText(status as SaleOrderStatusEnum)}
|
>
|
||||||
</option>
|
{getSaleOrderStatusText(status as SaleOrderStatusEnum)}
|
||||||
))}
|
</div>
|
||||||
</select>
|
<div className="text-xl font-bold text-gray-900 mb-1">{count}</div>
|
||||||
|
<div className="text-xs text-gray-500">₺{value.toLocaleString()}</div>
|
||||||
<select
|
</div>
|
||||||
value={selectedCustomer}
|
))}
|
||||||
onChange={(e) => setSelectedCustomer(e.target.value)}
|
</div>
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="all">Tüm Müşteriler</option>
|
|
||||||
{customers.map((customer) => (
|
|
||||||
<option key={customer.id} value={customer.id}>
|
|
||||||
{customer.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Data Table */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
|
||||||
<DataTable data={filteredOrders} columns={columns} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{filteredOrders.length === 0 && (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<FaShoppingCart className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
||||||
Sipariş bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SalesOrders;
|
{/* Monthly Performance */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border p-3">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Aylık Performans</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-blue-600 mb-1">{currentMonthOrders}</div>
|
||||||
|
<p className="text-sm text-gray-600">Bu Ay</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-gray-600 mb-1">{previousMonthOrders}</div>
|
||||||
|
<p className="text-sm text-gray-600">Geçen Ay</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div
|
||||||
|
className={`text-2xl font-bold mb-1 ${
|
||||||
|
currentMonthOrders >= previousMonthOrders ? 'text-green-600' : 'text-red-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{previousMonthOrders > 0
|
||||||
|
? `${Math.round(
|
||||||
|
((currentMonthOrders - previousMonthOrders) / previousMonthOrders) * 100,
|
||||||
|
)}%`
|
||||||
|
: '-%'}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">Değişim</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex gap-3 items-center">
|
||||||
|
<div className="flex-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Sipariş numarası ara..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedStatus}
|
||||||
|
onChange={(e) => setSelectedStatus(e.target.value as SaleOrderStatusEnum | 'all')}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Durumlar</option>
|
||||||
|
{Object.values(SaleOrderStatusEnum).map((status) => (
|
||||||
|
<option key={status as string} value={status as string}>
|
||||||
|
{getSaleOrderStatusText(status as SaleOrderStatusEnum)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedCustomer}
|
||||||
|
onChange={(e) => setSelectedCustomer(e.target.value)}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="all">Tüm Müşteriler</option>
|
||||||
|
{customers.map((customer) => (
|
||||||
|
<option key={customer.id} value={customer.id}>
|
||||||
|
{customer.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Data Table */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
|
<DataTable data={filteredOrders} columns={columns} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredOrders.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<FaShoppingCart className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Sipariş bulunamadı</h3>
|
||||||
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesOrders
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaUsers,
|
FaUsers,
|
||||||
FaArrowLeft,
|
FaArrowLeft,
|
||||||
|
|
@ -7,475 +7,421 @@ import {
|
||||||
FaPlus,
|
FaPlus,
|
||||||
FaTrash,
|
FaTrash,
|
||||||
FaMapMarkerAlt,
|
FaMapMarkerAlt,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { CrmTerritory } from "../../../types/crm";
|
import { CrmTerritory } from '../../../types/crm'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { Team, TeamMember, TeamRoleEnum } from "../../../types/common";
|
import { Team, TeamMember, TeamRoleEnum } from '../../../types/common'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const SalesTeamCreate: React.FC = () => {
|
const SalesTeamCreate: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
teamCode: "",
|
teamCode: '',
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
managerId: "",
|
managerId: '',
|
||||||
isActive: true,
|
isActive: true,
|
||||||
});
|
})
|
||||||
|
|
||||||
const [members, setMembers] = useState<Partial<TeamMember>[]>([]);
|
const [members, setMembers] = useState<Partial<TeamMember>[]>([])
|
||||||
const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([]);
|
const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([])
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||||
|
|
||||||
const handleInputChange = (field: string, value: string | boolean) => {
|
const handleInputChange = (field: string, value: string | boolean) => {
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||||
if (errors[field]) {
|
if (errors[field]) {
|
||||||
setErrors((prev) => ({ ...prev, [field]: "" }));
|
setErrors((prev) => ({ ...prev, [field]: '' }))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const addMember = () => {
|
const addMember = () => {
|
||||||
setMembers((prev) => [
|
setMembers((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
{
|
{
|
||||||
employeeId: "",
|
employeeId: '',
|
||||||
role: TeamRoleEnum.Member,
|
role: TeamRoleEnum.Member,
|
||||||
isActive: true,
|
isActive: true,
|
||||||
},
|
},
|
||||||
]);
|
])
|
||||||
};
|
}
|
||||||
|
|
||||||
const removeMember = (index: number) => {
|
const removeMember = (index: number) => {
|
||||||
setMembers((prev) => prev.filter((_, i) => i !== index));
|
setMembers((prev) => prev.filter((_, i) => i !== index))
|
||||||
};
|
}
|
||||||
|
|
||||||
const updateMember = (
|
const updateMember = (index: number, field: string, value: string | TeamRoleEnum | boolean) => {
|
||||||
index: number,
|
|
||||||
field: string,
|
|
||||||
value: string | TeamRoleEnum | boolean
|
|
||||||
) => {
|
|
||||||
setMembers((prev) =>
|
setMembers((prev) =>
|
||||||
prev.map((member, i) =>
|
prev.map((member, i) => (i === index ? { ...member, [field]: value } : member)),
|
||||||
i === index ? { ...member, [field]: value } : member
|
)
|
||||||
)
|
}
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addTerritory = () => {
|
const addTerritory = () => {
|
||||||
setTerritories((prev) => [
|
setTerritories((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
{
|
{
|
||||||
territoryCode: "",
|
territoryCode: '',
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
region: "",
|
region: '',
|
||||||
countries: [],
|
countries: [],
|
||||||
cities: [],
|
cities: [],
|
||||||
isActive: true,
|
isActive: true,
|
||||||
},
|
},
|
||||||
]);
|
])
|
||||||
};
|
}
|
||||||
|
|
||||||
const removeTerritory = (index: number) => {
|
const removeTerritory = (index: number) => {
|
||||||
setTerritories((prev) => prev.filter((_, i) => i !== index));
|
setTerritories((prev) => prev.filter((_, i) => i !== index))
|
||||||
};
|
}
|
||||||
|
|
||||||
const updateTerritory = (
|
const updateTerritory = (index: number, field: string, value: string | string[] | boolean) => {
|
||||||
index: number,
|
|
||||||
field: string,
|
|
||||||
value: string | string[] | boolean
|
|
||||||
) => {
|
|
||||||
setTerritories((prev) =>
|
setTerritories((prev) =>
|
||||||
prev.map((territory, i) =>
|
prev.map((territory, i) => (i === index ? { ...territory, [field]: value } : territory)),
|
||||||
i === index ? { ...territory, [field]: value } : territory
|
)
|
||||||
)
|
}
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
const newErrors: Record<string, string> = {};
|
const newErrors: Record<string, string> = {}
|
||||||
|
|
||||||
if (!formData.teamCode.trim()) {
|
if (!formData.teamCode.trim()) {
|
||||||
newErrors.teamCode = "Takım kodu zorunludur";
|
newErrors.teamCode = 'Takım kodu zorunludur'
|
||||||
}
|
}
|
||||||
if (!formData.name.trim()) {
|
if (!formData.name.trim()) {
|
||||||
newErrors.name = "Takım adı zorunludur";
|
newErrors.name = 'Takım adı zorunludur'
|
||||||
}
|
}
|
||||||
if (!formData.managerId.trim()) {
|
if (!formData.managerId.trim()) {
|
||||||
newErrors.managerId = "Takım lideri seçimi zorunludur";
|
newErrors.managerId = 'Takım lideri seçimi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
if (!validateForm()) return;
|
if (!validateForm()) return
|
||||||
|
|
||||||
const newTeam: Partial<Team> = {
|
const newTeam: Partial<Team> = {
|
||||||
...formData,
|
...formData,
|
||||||
members: members.map((member, index) => ({
|
members: members.map((member, index) => ({
|
||||||
...member,
|
...member,
|
||||||
id: `member-new-${index}`,
|
id: `member-new-${index}`,
|
||||||
teamId: "new-team",
|
teamId: 'new-team',
|
||||||
joinDate: new Date(),
|
joinDate: new Date(),
|
||||||
})) as TeamMember[],
|
})) as TeamMember[],
|
||||||
territories: territories.map((territory, index) => ({
|
territories: territories.map((territory, index) => ({
|
||||||
...territory,
|
...territory,
|
||||||
id: `territory-new-${index}`,
|
id: `territory-new-${index}`,
|
||||||
assignedTeamId: "new-team",
|
assignedTeamId: 'new-team',
|
||||||
})) as CrmTerritory[],
|
})) as CrmTerritory[],
|
||||||
targets: [],
|
targets: [],
|
||||||
creationTime: new Date(),
|
creationTime: new Date(),
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
|
|
||||||
console.log("Creating new sales team:", newTeam);
|
console.log('Creating new sales team:', newTeam)
|
||||||
alert("Satış ekibi başarıyla oluşturuldu!");
|
alert('Satış ekibi başarıyla oluşturuldu!')
|
||||||
navigate("/admin/crm/sales-teams");
|
navigate('/admin/crm/sales-teams')
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
if (
|
if (confirm('Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?')) {
|
||||||
confirm("Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?")
|
navigate('/admin/crm/sales-teams')
|
||||||
) {
|
|
||||||
navigate("/admin/crm/sales-teams");
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-4 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center justify-between">
|
||||||
<button
|
<div className="flex items-center gap-4">
|
||||||
onClick={() => navigate("/admin/crm/sales-teams")}
|
<button
|
||||||
className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
onClick={() => navigate('/admin/crm/sales-teams')}
|
||||||
>
|
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>
|
<FaArrowLeft className="w-5 h-5" />
|
||||||
<div>
|
</button>
|
||||||
<h2 className="text-xl font-bold text-gray-900">
|
<div>
|
||||||
Yeni Satış Ekibi
|
<h2 className="text-xl font-bold text-gray-900">Yeni Satış Ekibi</h2>
|
||||||
</h2>
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
Yeni satış ekibi oluşturun ve ekip üyelerini atayın
|
||||||
Yeni satış ekibi oluşturun ve ekip üyelerini atayın
|
</p>
|
||||||
</p>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<FaTimes className="w-4 h-4" />
|
||||||
|
İptal
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaSave className="w-4 h-4" />
|
||||||
|
Kaydet
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2">
|
{/* Form */}
|
||||||
<button
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||||
onClick={handleCancel}
|
{/* Basic Information */}
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
<div className="lg:col-span-2">
|
||||||
>
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
<FaTimes className="w-4 h-4" />
|
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
İptal
|
<FaUsers className="w-5 h-5 mr-2" />
|
||||||
</button>
|
Temel Bilgiler
|
||||||
<button
|
</h3>
|
||||||
onClick={handleSave}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaSave className="w-4 h-4" />
|
|
||||||
Kaydet
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form */}
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
<div>
|
||||||
{/* Basic Information */}
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
<div className="lg:col-span-2">
|
Takım Kodu *
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
</label>
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
<input
|
||||||
<FaUsers className="w-5 h-5 mr-2" />
|
type="text"
|
||||||
Temel Bilgiler
|
value={formData.teamCode}
|
||||||
</h3>
|
onChange={(e) => handleInputChange('teamCode', e.target.value)}
|
||||||
|
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
|
errors.teamCode ? 'border-red-500' : 'border-gray-300'
|
||||||
|
}`}
|
||||||
|
placeholder="ST-001"
|
||||||
|
/>
|
||||||
|
{errors.teamCode && (
|
||||||
|
<p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div>
|
||||||
<div>
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
Takım Lideri *
|
||||||
Takım Kodu *
|
</label>
|
||||||
</label>
|
|
||||||
|
<select
|
||||||
|
value={formData.managerId}
|
||||||
|
onChange={(e) => handleInputChange('managerId', e.target.value)}
|
||||||
|
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
|
errors.managerId ? 'border-red-500' : 'border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<option value="">Çalışan seçin</option>
|
||||||
|
{mockEmployees.map((employee) => (
|
||||||
|
<option key={employee.id} value={employee.id}>
|
||||||
|
{employee.fullName}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
{errors.managerId && (
|
||||||
|
<p className="text-red-500 text-sm mt-1">{errors.managerId}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<label className="block text-xs font-medium text-gray-700 mb-1">Takım Adı *</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={formData.teamCode}
|
value={formData.name}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
handleInputChange("teamCode", e.target.value)
|
|
||||||
}
|
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
errors.teamCode ? "border-red-500" : "border-gray-300"
|
errors.name ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="ST-001"
|
placeholder="Kurumsal Satış Ekibi"
|
||||||
/>
|
/>
|
||||||
{errors.teamCode && (
|
{errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="mt-4">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||||
Takım Lideri *
|
<textarea
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => handleInputChange('description', 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"
|
||||||
|
rows={3}
|
||||||
|
placeholder="Ekip açıklaması..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isActive}
|
||||||
|
onChange={(e) => handleInputChange('isActive', e.target.checked)}
|
||||||
|
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-sm text-gray-700">Aktif</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<select
|
|
||||||
value={formData.managerId}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("managerId", e.target.value)
|
|
||||||
}
|
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
|
||||||
errors.managerId ? "border-red-500" : "border-gray-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<option value="">Çalışan seçin</option>
|
|
||||||
{mockEmployees.map((employee) => (
|
|
||||||
<option key={employee.id} value={employee.id}>
|
|
||||||
{employee.fullName}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
{errors.managerId && (
|
|
||||||
<p className="text-red-500 text-sm mt-1">
|
|
||||||
{errors.managerId}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4">
|
{/* Team Members */}
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
|
||||||
Takım Adı *
|
<div className="flex items-center justify-between mb-4">
|
||||||
</label>
|
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
||||||
<input
|
<FaUsers className="w-5 h-5 mr-2" />
|
||||||
type="text"
|
Ekip Üyeleri
|
||||||
value={formData.name}
|
</h3>
|
||||||
onChange={(e) => handleInputChange("name", e.target.value)}
|
<button
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
onClick={addMember}
|
||||||
errors.name ? "border-red-500" : "border-gray-300"
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
||||||
}`}
|
|
||||||
placeholder="Kurumsal Satış Ekibi"
|
|
||||||
/>
|
|
||||||
{errors.name && (
|
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={formData.description}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("description", 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"
|
|
||||||
rows={3}
|
|
||||||
placeholder="Ekip açıklaması..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={formData.isActive}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("isActive", e.target.checked)
|
|
||||||
}
|
|
||||||
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
<span className="ml-2 text-sm text-gray-700">Aktif</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Team Members */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
|
||||||
<FaUsers className="w-5 h-5 mr-2" />
|
|
||||||
Ekip Üyeleri
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={addMember}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Üye Ekle
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{members.map((member, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
|
|
||||||
>
|
>
|
||||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
|
<FaPlus className="w-4 h-4" />
|
||||||
<div>
|
Üye Ekle
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
</button>
|
||||||
Çalışan
|
</div>
|
||||||
</label>
|
|
||||||
<select
|
<div className="space-y-3">
|
||||||
value={member.employeeId || ""}
|
{members.map((member, index) => (
|
||||||
onChange={(e) =>
|
<div
|
||||||
updateMember(index, "employeeId", e.target.value)
|
key={index}
|
||||||
}
|
className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
|
||||||
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"
|
|
||||||
>
|
|
||||||
<option value="">Çalışan seçin</option>
|
|
||||||
{mockEmployees.map((employee) => (
|
|
||||||
<option key={employee.id} value={employee.id}>
|
|
||||||
{employee.fullName}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|
||||||
Rol
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={member.role || TeamRoleEnum.Member}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateMember(index, "role", e.target.value)
|
|
||||||
}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
>
|
|
||||||
<option value={TeamRoleEnum.Member}>Üye</option>
|
|
||||||
<option value={TeamRoleEnum.Lead}>Takım Lideri</option>
|
|
||||||
<option value={TeamRoleEnum.Manager}>Yönetici</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => removeMember(index)}
|
|
||||||
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
|
||||||
>
|
>
|
||||||
<FaTrash className="w-4 h-4" />
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
</button>
|
<div>
|
||||||
</div>
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
))}
|
Çalışan
|
||||||
|
</label>
|
||||||
{members.length === 0 && (
|
<select
|
||||||
<div className="text-center py-8 text-gray-500">
|
value={member.employeeId || ''}
|
||||||
<FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
onChange={(e) => updateMember(index, 'employeeId', e.target.value)}
|
||||||
<p>Henüz ekip üyesi eklenmedi</p>
|
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"
|
||||||
<p className="text-sm">
|
>
|
||||||
Üye eklemek için yukarıdaki butona tıklayın
|
<option value="">Çalışan seçin</option>
|
||||||
</p>
|
{mockEmployees.map((employee) => (
|
||||||
</div>
|
<option key={employee.id} value={employee.id}>
|
||||||
)}
|
{employee.fullName}
|
||||||
</div>
|
</option>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</select>
|
||||||
|
</div>
|
||||||
{/* Territories */}
|
<div>
|
||||||
<div>
|
<label className="block text-xs font-medium text-gray-700 mb-1">Rol</label>
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
<select
|
||||||
<div className="flex items-center justify-between mb-4">
|
value={member.role || TeamRoleEnum.Member}
|
||||||
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
onChange={(e) => updateMember(index, 'role', e.target.value)}
|
||||||
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
Bölgeler
|
>
|
||||||
</h3>
|
<option value={TeamRoleEnum.Member}>Üye</option>
|
||||||
<button
|
<option value={TeamRoleEnum.Lead}>Takım Lideri</option>
|
||||||
onClick={addTerritory}
|
<option value={TeamRoleEnum.Manager}>Yönetici</option>
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
</select>
|
||||||
>
|
</div>
|
||||||
<FaPlus className="w-4 h-4" />
|
</div>
|
||||||
Bölge Ekle
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{territories.map((territory, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="p-3 border border-gray-200 rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex justify-between items-start mb-3">
|
|
||||||
<h4 className="font-medium text-gray-900">
|
|
||||||
Bölge {index + 1}
|
|
||||||
</h4>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => removeTerritory(index)}
|
onClick={() => removeMember(index)}
|
||||||
className="p-1.5 text-red-600 hover:bg-red-50 rounded"
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||||
>
|
>
|
||||||
<FaTrash className="w-4 h-4" />
|
<FaTrash className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
<div className="space-y-2">
|
{members.length === 0 && (
|
||||||
<div>
|
<div className="text-center py-8 text-gray-500">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
||||||
Bölge Kodu
|
<p>Henüz ekip üyesi eklenmedi</p>
|
||||||
</label>
|
<p className="text-sm">Üye eklemek için yukarıdaki butona tıklayın</p>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
)}
|
||||||
value={territory.territoryCode || ""}
|
</div>
|
||||||
onChange={(e) =>
|
</div>
|
||||||
updateTerritory(
|
</div>
|
||||||
index,
|
|
||||||
"territoryCode",
|
{/* Territories */}
|
||||||
e.target.value
|
<div>
|
||||||
)
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
}
|
<div className="flex items-center justify-between mb-4">
|
||||||
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"
|
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
||||||
placeholder="TR-IST"
|
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
||||||
/>
|
Bölgeler
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={addTerritory}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Bölge Ekle
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{territories.map((territory, index) => (
|
||||||
|
<div key={index} className="p-3 border border-gray-200 rounded-lg">
|
||||||
|
<div className="flex justify-between items-start mb-3">
|
||||||
|
<h4 className="font-medium text-gray-900">Bölge {index + 1}</h4>
|
||||||
|
<button
|
||||||
|
onClick={() => removeTerritory(index)}
|
||||||
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded"
|
||||||
|
>
|
||||||
|
<FaTrash className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="space-y-2">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<div>
|
||||||
Bölge Adı
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
</label>
|
Bölge Kodu
|
||||||
<input
|
</label>
|
||||||
type="text"
|
<input
|
||||||
value={territory.name || ""}
|
type="text"
|
||||||
onChange={(e) =>
|
value={territory.territoryCode || ''}
|
||||||
updateTerritory(index, "name", e.target.value)
|
onChange={(e) => updateTerritory(index, 'territoryCode', 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"
|
||||||
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="TR-IST"
|
||||||
placeholder="İstanbul Anadolu"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
Bölge
|
Bölge Adı
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={territory.region || ""}
|
value={territory.name || ''}
|
||||||
onChange={(e) =>
|
onChange={(e) => updateTerritory(index, 'name', e.target.value)}
|
||||||
updateTerritory(index, "region", 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="İstanbul Anadolu"
|
||||||
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="Marmara"
|
</div>
|
||||||
/>
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
|
Bölge
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={territory.region || ''}
|
||||||
|
onChange={(e) => updateTerritory(index, 'region', 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="Marmara"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
|
||||||
|
|
||||||
{territories.length === 0 && (
|
{territories.length === 0 && (
|
||||||
<div className="text-center py-8 text-gray-500">
|
<div className="text-center py-8 text-gray-500">
|
||||||
<FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
<FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
||||||
<p>Henüz bölge eklenmedi</p>
|
<p>Henüz bölge eklenmedi</p>
|
||||||
<p className="text-sm">
|
<p className="text-sm">Bölge eklemek için yukarıdaki butona tıklayın</p>
|
||||||
Bölge eklemek için yukarıdaki butona tıklayın
|
</div>
|
||||||
</p>
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default SalesTeamCreate;
|
export default SalesTeamCreate
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from 'react'
|
||||||
import {
|
import {
|
||||||
FaUsers,
|
FaUsers,
|
||||||
FaArrowLeft,
|
FaArrowLeft,
|
||||||
|
|
@ -7,131 +7,120 @@ import {
|
||||||
FaPlus,
|
FaPlus,
|
||||||
FaTrash,
|
FaTrash,
|
||||||
FaMapMarkerAlt,
|
FaMapMarkerAlt,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from 'react-router-dom'
|
||||||
import { CrmTerritory } from "../../../types/crm";
|
import { CrmTerritory } from '../../../types/crm'
|
||||||
import mockSalesTeams from "../../../mocks/mockSalesTeams";
|
import mockSalesTeams from '../../../mocks/mockSalesTeams'
|
||||||
import { mockEmployees } from "../../../mocks/mockEmployees";
|
import { mockEmployees } from '../../../mocks/mockEmployees'
|
||||||
import { Team, TeamMember, TeamRoleEnum } from "../../../types/common";
|
import { Team, TeamMember, TeamRoleEnum } from '../../../types/common'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const SalesTeamEdit: React.FC = () => {
|
const SalesTeamEdit: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>()
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
teamCode: "",
|
teamCode: '',
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
managerId: "",
|
managerId: '',
|
||||||
isActive: true,
|
isActive: true,
|
||||||
});
|
})
|
||||||
|
|
||||||
const [members, setMembers] = useState<Partial<TeamMember>[]>([]);
|
const [members, setMembers] = useState<Partial<TeamMember>[]>([])
|
||||||
const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([]);
|
const [territories, setTerritories] = useState<Partial<CrmTerritory>[]>([])
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
// Load team data on component mount
|
// Load team data on component mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const team = mockSalesTeams.find((t) => t.id === id);
|
const team = mockSalesTeams.find((t) => t.id === id)
|
||||||
if (team) {
|
if (team) {
|
||||||
setFormData({
|
setFormData({
|
||||||
teamCode: team.code,
|
teamCode: team.code,
|
||||||
name: team.name,
|
name: team.name,
|
||||||
description: team.description || "",
|
description: team.description || '',
|
||||||
managerId: team.managerId,
|
managerId: team.managerId,
|
||||||
isActive: team.isActive,
|
isActive: team.isActive,
|
||||||
});
|
})
|
||||||
setMembers(team.members || []);
|
setMembers(team.members || [])
|
||||||
setTerritories(team.territories || []);
|
setTerritories(team.territories || [])
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false)
|
||||||
}, [id]);
|
}, [id])
|
||||||
|
|
||||||
const handleInputChange = (field: string, value: string | boolean) => {
|
const handleInputChange = (field: string, value: string | boolean) => {
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||||
if (errors[field]) {
|
if (errors[field]) {
|
||||||
setErrors((prev) => ({ ...prev, [field]: "" }));
|
setErrors((prev) => ({ ...prev, [field]: '' }))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const addMember = () => {
|
const addMember = () => {
|
||||||
setMembers((prev) => [
|
setMembers((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
{
|
{
|
||||||
employeeId: "",
|
employeeId: '',
|
||||||
role: TeamRoleEnum.Member,
|
role: TeamRoleEnum.Member,
|
||||||
isActive: true,
|
isActive: true,
|
||||||
},
|
},
|
||||||
]);
|
])
|
||||||
};
|
}
|
||||||
|
|
||||||
const removeMember = (index: number) => {
|
const removeMember = (index: number) => {
|
||||||
setMembers((prev) => prev.filter((_, i) => i !== index));
|
setMembers((prev) => prev.filter((_, i) => i !== index))
|
||||||
};
|
}
|
||||||
|
|
||||||
const updateMember = (
|
const updateMember = (index: number, field: string, value: string | TeamRoleEnum | boolean) => {
|
||||||
index: number,
|
|
||||||
field: string,
|
|
||||||
value: string | TeamRoleEnum | boolean
|
|
||||||
) => {
|
|
||||||
setMembers((prev) =>
|
setMembers((prev) =>
|
||||||
prev.map((member, i) =>
|
prev.map((member, i) => (i === index ? { ...member, [field]: value } : member)),
|
||||||
i === index ? { ...member, [field]: value } : member
|
)
|
||||||
)
|
}
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addTerritory = () => {
|
const addTerritory = () => {
|
||||||
setTerritories((prev) => [
|
setTerritories((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
{
|
{
|
||||||
territoryCode: "",
|
territoryCode: '',
|
||||||
name: "",
|
name: '',
|
||||||
description: "",
|
description: '',
|
||||||
region: "",
|
region: '',
|
||||||
countries: [],
|
countries: [],
|
||||||
cities: [],
|
cities: [],
|
||||||
isActive: true,
|
isActive: true,
|
||||||
},
|
},
|
||||||
]);
|
])
|
||||||
};
|
}
|
||||||
|
|
||||||
const removeTerritory = (index: number) => {
|
const removeTerritory = (index: number) => {
|
||||||
setTerritories((prev) => prev.filter((_, i) => i !== index));
|
setTerritories((prev) => prev.filter((_, i) => i !== index))
|
||||||
};
|
}
|
||||||
|
|
||||||
const updateTerritory = (
|
const updateTerritory = (index: number, field: string, value: string | string[] | boolean) => {
|
||||||
index: number,
|
|
||||||
field: string,
|
|
||||||
value: string | string[] | boolean
|
|
||||||
) => {
|
|
||||||
setTerritories((prev) =>
|
setTerritories((prev) =>
|
||||||
prev.map((territory, i) =>
|
prev.map((territory, i) => (i === index ? { ...territory, [field]: value } : territory)),
|
||||||
i === index ? { ...territory, [field]: value } : territory
|
)
|
||||||
)
|
}
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
const newErrors: Record<string, string> = {};
|
const newErrors: Record<string, string> = {}
|
||||||
|
|
||||||
if (!formData.teamCode.trim()) {
|
if (!formData.teamCode.trim()) {
|
||||||
newErrors.teamCode = "Takım kodu zorunludur";
|
newErrors.teamCode = 'Takım kodu zorunludur'
|
||||||
}
|
}
|
||||||
if (!formData.name.trim()) {
|
if (!formData.name.trim()) {
|
||||||
newErrors.name = "Takım adı zorunludur";
|
newErrors.name = 'Takım adı zorunludur'
|
||||||
}
|
}
|
||||||
if (!formData.managerId.trim()) {
|
if (!formData.managerId.trim()) {
|
||||||
newErrors.managerId = "Takım lideri seçimi zorunludur";
|
newErrors.managerId = 'Takım lideri seçimi zorunludur'
|
||||||
}
|
}
|
||||||
|
|
||||||
setErrors(newErrors);
|
setErrors(newErrors)
|
||||||
return Object.keys(newErrors).length === 0;
|
return Object.keys(newErrors).length === 0
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
if (!validateForm()) return;
|
if (!validateForm()) return
|
||||||
|
|
||||||
const updatedTeam: Partial<Team> = {
|
const updatedTeam: Partial<Team> = {
|
||||||
id,
|
id,
|
||||||
|
|
@ -139,29 +128,27 @@ const SalesTeamEdit: React.FC = () => {
|
||||||
members: members.map((member, index) => ({
|
members: members.map((member, index) => ({
|
||||||
...member,
|
...member,
|
||||||
id: member.id || `member-updated-${index}`,
|
id: member.id || `member-updated-${index}`,
|
||||||
teamId: id || "",
|
teamId: id || '',
|
||||||
joinDate: member.joinDate || new Date(),
|
joinDate: member.joinDate || new Date(),
|
||||||
})) as TeamMember[],
|
})) as TeamMember[],
|
||||||
territories: territories.map((territory, index) => ({
|
territories: territories.map((territory, index) => ({
|
||||||
...territory,
|
...territory,
|
||||||
id: territory.id || `territory-updated-${index}`,
|
id: territory.id || `territory-updated-${index}`,
|
||||||
assignedTeamId: id || "",
|
assignedTeamId: id || '',
|
||||||
})) as CrmTerritory[],
|
})) as CrmTerritory[],
|
||||||
lastModificationTime: new Date(),
|
lastModificationTime: new Date(),
|
||||||
};
|
}
|
||||||
|
|
||||||
console.log("Updating sales team:", updatedTeam);
|
console.log('Updating sales team:', updatedTeam)
|
||||||
alert("Satış ekibi başarıyla güncellendi!");
|
alert('Satış ekibi başarıyla güncellendi!')
|
||||||
navigate("/admin/crm/sales-teams");
|
navigate('/admin/crm/sales-teams')
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
if (
|
if (confirm('Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?')) {
|
||||||
confirm("Değişiklikler kaydedilmedi. Çıkmak istediğinizden emin misiniz?")
|
navigate('/admin/crm/sales-teams')
|
||||||
) {
|
|
||||||
navigate("/admin/crm/sales-teams");
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -171,365 +158,320 @@ const SalesTeamEdit: React.FC = () => {
|
||||||
<p className="mt-4 text-gray-600">Yükleniyor...</p>
|
<p className="mt-4 text-gray-600">Yükleniyor...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const team = mockSalesTeams.find((t) => t.id === id);
|
const team = mockSalesTeams.find((t) => t.id === id)
|
||||||
if (!team) {
|
if (!team) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Satış ekibi bulunamadı</h3>
|
||||||
Satış ekibi bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500 mb-4">
|
<p className="text-gray-500 mb-4">
|
||||||
Aradığınız satış ekibi mevcut değil veya silinmiş olabilir.
|
Aradığınız satış ekibi mevcut değil veya silinmiş olabilir.
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate("/admin/crm/sales-teams")}
|
onClick={() => navigate('/admin/crm/sales-teams')}
|
||||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
Geri Dön
|
Geri Dön
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-4 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center justify-between">
|
||||||
<button
|
<div className="flex items-center gap-4">
|
||||||
onClick={() => navigate("/admin/crm/sales-teams")}
|
<button
|
||||||
className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
onClick={() => navigate('/admin/crm/sales-teams')}
|
||||||
>
|
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>
|
<FaArrowLeft className="w-5 h-5" />
|
||||||
<div>
|
</button>
|
||||||
<h2 className="text-xl font-bold text-gray-900">
|
<div>
|
||||||
Satış Ekibi Düzenle
|
<h2 className="text-xl font-bold text-gray-900">Satış Ekibi Düzenle</h2>
|
||||||
</h2>
|
<p className="text-sm text-gray-600 mt-1">{team.name} ekibini düzenleyin</p>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
</div>
|
||||||
{team.name} ekibini düzenleyin
|
</div>
|
||||||
</p>
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<FaTimes className="w-4 h-4" />
|
||||||
|
İptal
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaSave className="w-4 h-4" />
|
||||||
|
Güncelle
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2">
|
{/* Form */}
|
||||||
<button
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||||
onClick={handleCancel}
|
{/* Basic Information */}
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
<div className="lg:col-span-2">
|
||||||
>
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
<FaTimes className="w-4 h-4" />
|
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
İptal
|
<FaUsers className="w-5 h-5 mr-2" />
|
||||||
</button>
|
Temel Bilgiler
|
||||||
<button
|
</h3>
|
||||||
onClick={handleSave}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaSave className="w-4 h-4" />
|
|
||||||
Güncelle
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form */}
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
<div>
|
||||||
{/* Basic Information */}
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
<div className="lg:col-span-2">
|
Takım Kodu *
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
</label>
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
<input
|
||||||
<FaUsers className="w-5 h-5 mr-2" />
|
type="text"
|
||||||
Temel Bilgiler
|
value={formData.teamCode}
|
||||||
</h3>
|
onChange={(e) => handleInputChange('teamCode', e.target.value)}
|
||||||
|
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
|
errors.teamCode ? 'border-red-500' : 'border-gray-300'
|
||||||
|
}`}
|
||||||
|
placeholder="ST-001"
|
||||||
|
/>
|
||||||
|
{errors.teamCode && (
|
||||||
|
<p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div>
|
||||||
<div>
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
Takım Lideri *
|
||||||
Takım Kodu *
|
</label>
|
||||||
</label>
|
|
||||||
|
<select
|
||||||
|
value={formData.managerId}
|
||||||
|
onChange={(e) => handleInputChange('managerId', e.target.value)}
|
||||||
|
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
|
errors.managerId ? 'border-red-500' : 'border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<option value="">Lider seçin</option>
|
||||||
|
{mockEmployees.map((employee) => (
|
||||||
|
<option key={employee.id} value={employee.id}>
|
||||||
|
{employee.fullName}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{errors.managerId && (
|
||||||
|
<p className="text-red-500 text-sm mt-1">{errors.managerId}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<label className="block text-xs font-medium text-gray-700 mb-1">Takım Adı *</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={formData.teamCode}
|
value={formData.name}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||||
handleInputChange("teamCode", e.target.value)
|
|
||||||
}
|
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
errors.teamCode ? "border-red-500" : "border-gray-300"
|
errors.name ? 'border-red-500' : 'border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
placeholder="ST-001"
|
placeholder="Kurumsal Satış Ekibi"
|
||||||
/>
|
/>
|
||||||
{errors.teamCode && (
|
{errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.teamCode}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="mt-4">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||||
Takım Lideri *
|
<textarea
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => handleInputChange('description', 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"
|
||||||
|
rows={3}
|
||||||
|
placeholder="Ekip açıklaması..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isActive}
|
||||||
|
onChange={(e) => handleInputChange('isActive', e.target.checked)}
|
||||||
|
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-sm text-gray-700">Aktif</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<select
|
|
||||||
value={formData.managerId}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("managerId", e.target.value)
|
|
||||||
}
|
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
|
||||||
errors.managerId ? "border-red-500" : "border-gray-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<option value="">Lider seçin</option>
|
|
||||||
{mockEmployees.map((employee) => (
|
|
||||||
<option key={employee.id} value={employee.id}>
|
|
||||||
{employee.fullName}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{errors.managerId && (
|
|
||||||
<p className="text-red-500 text-sm mt-1">
|
|
||||||
{errors.managerId}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4">
|
{/* Team Members */}
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
|
||||||
Takım Adı *
|
<div className="flex items-center justify-between mb-4">
|
||||||
</label>
|
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
||||||
<input
|
<FaUsers className="w-5 h-5 mr-2" />
|
||||||
type="text"
|
Ekip Üyeleri
|
||||||
value={formData.name}
|
</h3>
|
||||||
onChange={(e) => handleInputChange("name", e.target.value)}
|
<button
|
||||||
className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
onClick={addMember}
|
||||||
errors.name ? "border-red-500" : "border-gray-300"
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
||||||
}`}
|
|
||||||
placeholder="Kurumsal Satış Ekibi"
|
|
||||||
/>
|
|
||||||
{errors.name && (
|
|
||||||
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={formData.description}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("description", 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"
|
|
||||||
rows={3}
|
|
||||||
placeholder="Ekip açıklaması..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={formData.isActive}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("isActive", e.target.checked)
|
|
||||||
}
|
|
||||||
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
<span className="ml-2 text-sm text-gray-700">Aktif</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Team Members */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4 mt-4">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
|
||||||
<FaUsers className="w-5 h-5 mr-2" />
|
|
||||||
Ekip Üyeleri
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={addMember}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Üye Ekle
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{members.map((member, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
|
|
||||||
>
|
>
|
||||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
|
<FaPlus className="w-4 h-4" />
|
||||||
<div>
|
Üye Ekle
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
</button>
|
||||||
Çalışan
|
</div>
|
||||||
</label>
|
|
||||||
|
|
||||||
<select
|
<div className="space-y-3">
|
||||||
value={member.employeeId || ""}
|
{members.map((member, index) => (
|
||||||
onChange={(e) =>
|
<div
|
||||||
updateMember(index, "employeeId", e.target.value)
|
key={index}
|
||||||
}
|
className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg"
|
||||||
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"
|
|
||||||
>
|
|
||||||
<option value="">Çalışan seçin</option>
|
|
||||||
{mockEmployees.map((employee) => (
|
|
||||||
<option key={employee.id} value={employee.id}>
|
|
||||||
{employee.fullName}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
|
||||||
Rol
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={member.role || TeamRoleEnum.Member}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateMember(
|
|
||||||
index,
|
|
||||||
"role",
|
|
||||||
e.target.value as TeamRoleEnum
|
|
||||||
)
|
|
||||||
}
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<option value={TeamRoleEnum.Member}>Üye</option>
|
|
||||||
<option value={TeamRoleEnum.Lead}>Takım Lideri</option>
|
|
||||||
<option value={TeamRoleEnum.Manager}>Yönetici</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => removeMember(index)}
|
|
||||||
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
|
||||||
>
|
>
|
||||||
<FaTrash className="w-4 h-4" />
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
</button>
|
<div>
|
||||||
</div>
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
))}
|
Çalışan
|
||||||
|
</label>
|
||||||
|
|
||||||
{members.length === 0 && (
|
<select
|
||||||
<div className="text-center py-8 text-gray-500">
|
value={member.employeeId || ''}
|
||||||
<FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
onChange={(e) => updateMember(index, 'employeeId', e.target.value)}
|
||||||
<p>Henüz ekip üyesi yok</p>
|
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"
|
||||||
<p className="text-sm">
|
>
|
||||||
Üye eklemek için yukarıdaki butona tıklayın
|
<option value="">Çalışan seçin</option>
|
||||||
</p>
|
{mockEmployees.map((employee) => (
|
||||||
</div>
|
<option key={employee.id} value={employee.id}>
|
||||||
)}
|
{employee.fullName}
|
||||||
</div>
|
</option>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</select>
|
||||||
|
</div>
|
||||||
{/* Territories */}
|
<div>
|
||||||
<div>
|
<label className="block text-xs font-medium text-gray-700 mb-1">Rol</label>
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
<select
|
||||||
<div className="flex items-center justify-between mb-4">
|
value={member.role || TeamRoleEnum.Member}
|
||||||
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
onChange={(e) =>
|
||||||
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
updateMember(index, 'role', e.target.value as TeamRoleEnum)
|
||||||
Bölgeler
|
}
|
||||||
</h3>
|
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"
|
||||||
<button
|
>
|
||||||
onClick={addTerritory}
|
<option value={TeamRoleEnum.Member}>Üye</option>
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
<option value={TeamRoleEnum.Lead}>Takım Lideri</option>
|
||||||
>
|
<option value={TeamRoleEnum.Manager}>Yönetici</option>
|
||||||
<FaPlus className="w-4 h-4" />
|
</select>
|
||||||
Bölge Ekle
|
</div>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{territories.map((territory, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="p-3 border border-gray-200 rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex justify-between items-start mb-3">
|
|
||||||
<h4 className="font-medium text-gray-900">
|
|
||||||
{territory.name || `Bölge ${index + 1}`}
|
|
||||||
</h4>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => removeTerritory(index)}
|
onClick={() => removeMember(index)}
|
||||||
className="p-1.5 text-red-600 hover:bg-red-50 rounded"
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||||
>
|
>
|
||||||
<FaTrash className="w-4 h-4" />
|
<FaTrash className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
<div className="space-y-2">
|
{members.length === 0 && (
|
||||||
<div>
|
<div className="text-center py-8 text-gray-500">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
||||||
Bölge Kodu
|
<p>Henüz ekip üyesi yok</p>
|
||||||
</label>
|
<p className="text-sm">Üye eklemek için yukarıdaki butona tıklayın</p>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
)}
|
||||||
value={territory.territoryCode || ""}
|
</div>
|
||||||
onChange={(e) =>
|
</div>
|
||||||
updateTerritory(
|
</div>
|
||||||
index,
|
|
||||||
"territoryCode",
|
{/* Territories */}
|
||||||
e.target.value
|
<div>
|
||||||
)
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
}
|
<div className="flex items-center justify-between mb-4">
|
||||||
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"
|
<h3 className="text-base font-semibold text-gray-900 flex items-center">
|
||||||
placeholder="TR-IST"
|
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
||||||
/>
|
Bölgeler
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={addTerritory}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Bölge Ekle
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{territories.map((territory, index) => (
|
||||||
|
<div key={index} className="p-3 border border-gray-200 rounded-lg">
|
||||||
|
<div className="flex justify-between items-start mb-3">
|
||||||
|
<h4 className="font-medium text-gray-900">
|
||||||
|
{territory.name || `Bölge ${index + 1}`}
|
||||||
|
</h4>
|
||||||
|
<button
|
||||||
|
onClick={() => removeTerritory(index)}
|
||||||
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded"
|
||||||
|
>
|
||||||
|
<FaTrash className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="space-y-2">
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<div>
|
||||||
Bölge Adı
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
</label>
|
Bölge Kodu
|
||||||
<input
|
</label>
|
||||||
type="text"
|
<input
|
||||||
value={territory.name || ""}
|
type="text"
|
||||||
onChange={(e) =>
|
value={territory.territoryCode || ''}
|
||||||
updateTerritory(index, "name", e.target.value)
|
onChange={(e) => updateTerritory(index, 'territoryCode', 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"
|
||||||
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="TR-IST"
|
||||||
placeholder="İstanbul Anadolu"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
Bölge
|
Bölge Adı
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={territory.region || ""}
|
value={territory.name || ''}
|
||||||
onChange={(e) =>
|
onChange={(e) => updateTerritory(index, 'name', e.target.value)}
|
||||||
updateTerritory(index, "region", 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="İstanbul Anadolu"
|
||||||
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="Marmara"
|
</div>
|
||||||
/>
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||||
|
Bölge
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={territory.region || ''}
|
||||||
|
onChange={(e) => updateTerritory(index, 'region', 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="Marmara"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
|
||||||
|
|
||||||
{territories.length === 0 && (
|
{territories.length === 0 && (
|
||||||
<div className="text-center py-8 text-gray-500">
|
<div className="text-center py-8 text-gray-500">
|
||||||
<FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
<FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
||||||
<p>Henüz bölge yok</p>
|
<p>Henüz bölge yok</p>
|
||||||
<p className="text-sm">
|
<p className="text-sm">Bölge eklemek için yukarıdaki butona tıklayın</p>
|
||||||
Bölge eklemek için yukarıdaki butona tıklayın
|
</div>
|
||||||
</p>
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default SalesTeamEdit;
|
export default SalesTeamEdit
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React from 'react'
|
||||||
import {
|
import {
|
||||||
FaUsers,
|
FaUsers,
|
||||||
FaArrowLeft,
|
FaArrowLeft,
|
||||||
|
|
@ -11,475 +11,439 @@ import {
|
||||||
FaAward,
|
FaAward,
|
||||||
FaTrophy,
|
FaTrophy,
|
||||||
FaChartLine,
|
FaChartLine,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from 'react-router-dom'
|
||||||
import mockSalesTeams from "../../../mocks/mockSalesTeams";
|
import mockSalesTeams from '../../../mocks/mockSalesTeams'
|
||||||
import dayjs from "dayjs";
|
import dayjs from 'dayjs'
|
||||||
import { Team, TeamRoleEnum } from "../../../types/common";
|
import { Team, TeamRoleEnum } from '../../../types/common'
|
||||||
import { getTeamRoleText } from "../../../utils/erp";
|
import { getTeamRoleText } from '../../../utils/erp'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const SalesTeamView: React.FC = () => {
|
const SalesTeamView: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>()
|
||||||
|
|
||||||
const team = mockSalesTeams.find((t) => t.id === id);
|
const team = mockSalesTeams.find((t) => t.id === id)
|
||||||
|
|
||||||
const calculateTeamPerformance = (team: Team): number => {
|
const calculateTeamPerformance = (team: Team): number => {
|
||||||
if (!team.targets || team.targets.length === 0) return 0;
|
if (!team.targets || team.targets.length === 0) return 0
|
||||||
const activeTarget = team.targets.find((t) => t.status === "ACTIVE");
|
const activeTarget = team.targets.find((t) => t.status === 'ACTIVE')
|
||||||
if (!activeTarget || activeTarget.targetValue === 0) return 0;
|
if (!activeTarget || activeTarget.targetValue === 0) return 0
|
||||||
return (activeTarget.actualValue / activeTarget.targetValue) * 100;
|
return (activeTarget.actualValue / activeTarget.targetValue) * 100
|
||||||
};
|
}
|
||||||
|
|
||||||
const calculateTeamRevenue = (team: Team): number => {
|
const calculateTeamRevenue = (team: Team): number => {
|
||||||
if (!team.targets || team.targets.length === 0) return 0;
|
if (!team.targets || team.targets.length === 0) return 0
|
||||||
return team.targets.reduce((sum, target) => sum + target.actualValue, 0);
|
return team.targets.reduce((sum, target) => sum + target.actualValue, 0)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = () => {
|
const handleEdit = () => {
|
||||||
navigate(`/admin/crm/sales-teams/edit/${id}`);
|
navigate(`/admin/crm/sales-teams/edit/${id}`)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = () => {
|
const handleDelete = () => {
|
||||||
if (confirm(`${team?.name} ekibini silmek istediğinizden emin misiniz?`)) {
|
if (confirm(`${team?.name} ekibini silmek istediğinizden emin misiniz?`)) {
|
||||||
console.log("Delete sales team:", id);
|
console.log('Delete sales team:', id)
|
||||||
alert("Ekip silindi (mock)");
|
alert('Ekip silindi (mock)')
|
||||||
navigate("/admin/crm/sales-teams");
|
navigate('/admin/crm/sales-teams')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
if (!team) {
|
if (!team) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Satış ekibi bulunamadı</h3>
|
||||||
Satış ekibi bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500 mb-4">
|
<p className="text-gray-500 mb-4">
|
||||||
Aradığınız satış ekibi mevcut değil veya silinmiş olabilir.
|
Aradığınız satış ekibi mevcut değil veya silinmiş olabilir.
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate("/admin/crm/sales-teams")}
|
onClick={() => navigate('/admin/crm/sales-teams')}
|
||||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
>
|
>
|
||||||
Geri Dön
|
Geri Dön
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const performance = calculateTeamPerformance(team);
|
const performance = calculateTeamPerformance(team)
|
||||||
const revenue = calculateTeamRevenue(team);
|
const revenue = calculateTeamRevenue(team)
|
||||||
const activeTarget = team.targets?.find((t) => t.status === "ACTIVE");
|
const activeTarget = team.targets?.find((t) => t.status === 'ACTIVE')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-6 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center justify-between">
|
||||||
<button
|
<div className="flex items-center gap-4">
|
||||||
onClick={() => navigate("/admin/crm/sales-teams")}
|
<button
|
||||||
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
onClick={() => navigate('/admin/crm/sales-teams')}
|
||||||
>
|
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
<FaArrowLeft className="w-5 h-5" />
|
>
|
||||||
</button>
|
<FaArrowLeft className="w-5 h-5" />
|
||||||
<div>
|
</button>
|
||||||
<h2 className="text-xl font-bold text-gray-900">{team.name}</h2>
|
<div>
|
||||||
<p className="text-gray-600 mt-1">
|
<h2 className="text-xl font-bold text-gray-900">{team.name}</h2>
|
||||||
{team.code} • Satış ekibi detayları
|
<p className="text-gray-600 mt-1">{team.code} • Satış ekibi detayları</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<button
|
|
||||||
onClick={handleEdit}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
|
||||||
>
|
|
||||||
<FaEdit className="w-4 h-4" />
|
|
||||||
Düzenle
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleDelete}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
|
|
||||||
>
|
|
||||||
<FaTrash className="w-4 h-4" />
|
|
||||||
Sil
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Overview Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<FaUsers className="w-6 h-6 text-blue-500" />
|
|
||||||
<div className="ml-4">
|
|
||||||
<p className="text-sm font-medium text-gray-600">Üye Sayısı</p>
|
|
||||||
<p className="text-xl font-bold text-gray-900">
|
|
||||||
{team.members?.length || 0}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
<div className="flex gap-3">
|
||||||
<div className="flex items-center">
|
<button
|
||||||
<FaMapMarkerAlt className="w-6 h-6 text-green-500" />
|
onClick={handleEdit}
|
||||||
<div className="ml-4">
|
className="flex items-center gap-2 px-4 py-2 text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
||||||
<p className="text-sm font-medium text-gray-600">Bölge Sayısı</p>
|
>
|
||||||
<p className="text-xl font-bold text-gray-900">
|
<FaEdit className="w-4 h-4" />
|
||||||
{team.territories?.length || 0}
|
Düzenle
|
||||||
</p>
|
</button>
|
||||||
</div>
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
|
||||||
|
>
|
||||||
|
<FaTrash className="w-4 h-4" />
|
||||||
|
Sil
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
{/* Overview Cards */}
|
||||||
<div className="flex items-center">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
<FaArrowUp
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
className={`w-6 h-6 ${
|
<div className="flex items-center">
|
||||||
performance >= 100
|
<FaUsers className="w-6 h-6 text-blue-500" />
|
||||||
? "text-green-600"
|
<div className="ml-4">
|
||||||
: performance >= 80
|
<p className="text-sm font-medium text-gray-600">Üye Sayısı</p>
|
||||||
? "text-yellow-600"
|
<p className="text-xl font-bold text-gray-900">{team.members?.length || 0}</p>
|
||||||
: "text-red-600"
|
</div>
|
||||||
}`}
|
</div>
|
||||||
/>
|
</div>
|
||||||
<div className="ml-4">
|
|
||||||
<p className="text-sm font-medium text-gray-600">Performans</p>
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
<p
|
<div className="flex items-center">
|
||||||
className={`text-xl font-bold ${
|
<FaMapMarkerAlt className="w-6 h-6 text-green-500" />
|
||||||
|
<div className="ml-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600">Bölge Sayısı</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">{team.territories?.length || 0}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FaArrowUp
|
||||||
|
className={`w-6 h-6 ${
|
||||||
performance >= 100
|
performance >= 100
|
||||||
? "text-green-600"
|
? 'text-green-600'
|
||||||
: performance >= 80
|
: performance >= 80
|
||||||
? "text-yellow-600"
|
? 'text-yellow-600'
|
||||||
: "text-red-600"
|
: 'text-red-600'
|
||||||
}`}
|
}`}
|
||||||
>
|
/>
|
||||||
%{performance.toFixed(1)}
|
<div className="ml-4">
|
||||||
</p>
|
<p className="text-sm font-medium text-gray-600">Performans</p>
|
||||||
</div>
|
<p
|
||||||
</div>
|
className={`text-xl font-bold ${
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<FaDollarSign className="w-6 h-6 text-purple-500" />
|
|
||||||
<div className="ml-4">
|
|
||||||
<p className="text-sm font-medium text-gray-600">Toplam Gelir</p>
|
|
||||||
<p className="text-lg font-bold text-gray-900">
|
|
||||||
₺{revenue.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
||||||
{/* Team Information */}
|
|
||||||
<div className="lg:col-span-2 space-y-4">
|
|
||||||
{/* Basic Info */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
|
||||||
<FaUsers className="w-5 h-5 mr-2" />
|
|
||||||
Ekip Bilgileri
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Ekip Kodu
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">{team.code}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Durum
|
|
||||||
</label>
|
|
||||||
<span
|
|
||||||
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
|
||||||
team.isActive
|
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{team.isActive ? "Aktif" : "Pasif"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Açıklama
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">
|
|
||||||
{team.description || "Açıklama girilmemiş"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Yönetici
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">
|
|
||||||
{team.manager?.fullName || "Yönetici bilgisi girilmemiş"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Oluşturulma Tarihi
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">
|
|
||||||
{dayjs(team.creationTime).format("DD.MM.YYYY")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Son Güncelleme
|
|
||||||
</label>
|
|
||||||
<p className="text-gray-900">
|
|
||||||
{dayjs(team.lastModificationTime).format("DD.MM.YYYY")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Team Members */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
|
||||||
<FaUser className="w-5 h-5 mr-2" />
|
|
||||||
Ekip Üyeleri ({team.members?.length || 0})
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{team.members && team.members.length > 0 ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{team.members.map((member, index) => (
|
|
||||||
<div
|
|
||||||
key={member.id || index}
|
|
||||||
className="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
||||||
<FaUser className="w-5 h-5 text-blue-600" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-gray-900">
|
|
||||||
{member.employee?.fullName}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
Katılım: {dayjs(member.joinDate).format("DD.MM.YYYY")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<span
|
|
||||||
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
|
||||||
member.role === TeamRoleEnum.Manager
|
|
||||||
? "bg-purple-100 text-purple-800"
|
|
||||||
: member.role === TeamRoleEnum.Lead
|
|
||||||
? "bg-blue-100 text-blue-800"
|
|
||||||
: "bg-gray-100 text-gray-800"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{getTeamRoleText(member.role)}
|
|
||||||
</span>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
|
||||||
{member.isActive ? "Aktif" : "Pasif"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-8 text-gray-500">
|
|
||||||
<FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
|
||||||
<p>Henüz ekip üyesi eklenmemiş</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Territories */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
|
||||||
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
|
||||||
Sorumlu Bölgeler ({team.territories?.length || 0})
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{team.territories && team.territories.length > 0 ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{team.territories.map((territory, index) => (
|
|
||||||
<div
|
|
||||||
key={territory.id || index}
|
|
||||||
className="p-3 border border-gray-200 rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex justify-between items-start mb-2">
|
|
||||||
<h4 className="font-medium text-gray-900">
|
|
||||||
{territory.name}
|
|
||||||
</h4>
|
|
||||||
<span className="text-sm text-gray-500">
|
|
||||||
{territory.territoryCode}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600 mb-2">
|
|
||||||
{territory.description}
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-4 text-sm text-gray-500">
|
|
||||||
<span>Bölge: {territory.region}</span>
|
|
||||||
<span>Ülke: {territory.countries?.join(", ")}</span>
|
|
||||||
{territory.cities && territory.cities.length > 0 && (
|
|
||||||
<span>Şehir: {territory.cities.join(", ")}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-8 text-gray-500">
|
|
||||||
<FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
|
||||||
<p>Henüz bölge atanmamış</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Performance & Targets */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Performance Overview */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
|
|
||||||
<FaChartLine className="w-5 h-5 mr-2" />
|
|
||||||
Performans
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="text-center">
|
|
||||||
<div
|
|
||||||
className={`text-3xl font-bold mb-2 ${
|
|
||||||
performance >= 100
|
performance >= 100
|
||||||
? "text-green-600"
|
? 'text-green-600'
|
||||||
: performance >= 80
|
: performance >= 80
|
||||||
? "text-yellow-600"
|
? 'text-yellow-600'
|
||||||
: "text-red-600"
|
: 'text-red-600'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
%{performance.toFixed(1)}
|
%{performance.toFixed(1)}
|
||||||
</div>
|
</p>
|
||||||
<p className="text-sm text-gray-600">Hedef Başarımı</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
|
||||||
<div
|
|
||||||
className={`h-2.5 rounded-full ${
|
|
||||||
performance >= 100
|
|
||||||
? "bg-green-500"
|
|
||||||
: performance >= 80
|
|
||||||
? "bg-yellow-500"
|
|
||||||
: "bg-red-500"
|
|
||||||
}`}
|
|
||||||
style={{ width: `${Math.min(performance, 100)}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between text-sm text-gray-600">
|
|
||||||
<span>0%</span>
|
|
||||||
<span>100%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Current Target */}
|
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||||
{activeTarget && (
|
<div className="flex items-center">
|
||||||
|
<FaDollarSign className="w-6 h-6 text-purple-500" />
|
||||||
|
<div className="ml-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600">Toplam Gelir</p>
|
||||||
|
<p className="text-lg font-bold text-gray-900">₺{revenue.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||||
|
{/* Team Information */}
|
||||||
|
<div className="lg:col-span-2 space-y-4">
|
||||||
|
{/* Basic Info */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<FaUsers className="w-5 h-5 mr-2" />
|
||||||
|
Ekip Bilgileri
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">Ekip Kodu</label>
|
||||||
|
<p className="text-gray-900">{team.code}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">Durum</label>
|
||||||
|
<span
|
||||||
|
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
|
team.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{team.isActive ? 'Aktif' : 'Pasif'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">Açıklama</label>
|
||||||
|
<p className="text-gray-900">{team.description || 'Açıklama girilmemiş'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">Yönetici</label>
|
||||||
|
<p className="text-gray-900">
|
||||||
|
{team.manager?.fullName || 'Yönetici bilgisi girilmemiş'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
|
Oluşturulma Tarihi
|
||||||
|
</label>
|
||||||
|
<p className="text-gray-900">{dayjs(team.creationTime).format('DD.MM.YYYY')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
|
Son Güncelleme
|
||||||
|
</label>
|
||||||
|
<p className="text-gray-900">
|
||||||
|
{dayjs(team.lastModificationTime).format('DD.MM.YYYY')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team Members */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<FaUser className="w-5 h-5 mr-2" />
|
||||||
|
Ekip Üyeleri ({team.members?.length || 0})
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{team.members && team.members.length > 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{team.members.map((member, index) => (
|
||||||
|
<div
|
||||||
|
key={member.id || index}
|
||||||
|
className="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
||||||
|
<FaUser className="w-5 h-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">{member.employee?.fullName}</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Katılım: {dayjs(member.joinDate).format('DD.MM.YYYY')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span
|
||||||
|
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
|
member.role === TeamRoleEnum.Manager
|
||||||
|
? 'bg-purple-100 text-purple-800'
|
||||||
|
: member.role === TeamRoleEnum.Lead
|
||||||
|
? 'bg-blue-100 text-blue-800'
|
||||||
|
: 'bg-gray-100 text-gray-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{getTeamRoleText(member.role)}
|
||||||
|
</span>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
{member.isActive ? 'Aktif' : 'Pasif'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-gray-500">
|
||||||
|
<FaUsers className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
||||||
|
<p>Henüz ekip üyesi eklenmemiş</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Territories */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<FaMapMarkerAlt className="w-5 h-5 mr-2" />
|
||||||
|
Sorumlu Bölgeler ({team.territories?.length || 0})
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{team.territories && team.territories.length > 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{team.territories.map((territory, index) => (
|
||||||
|
<div
|
||||||
|
key={territory.id || index}
|
||||||
|
className="p-3 border border-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-start mb-2">
|
||||||
|
<h4 className="font-medium text-gray-900">{territory.name}</h4>
|
||||||
|
<span className="text-sm text-gray-500">{territory.territoryCode}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600 mb-2">{territory.description}</p>
|
||||||
|
<div className="flex gap-4 text-sm text-gray-500">
|
||||||
|
<span>Bölge: {territory.region}</span>
|
||||||
|
<span>Ülke: {territory.countries?.join(', ')}</span>
|
||||||
|
{territory.cities && territory.cities.length > 0 && (
|
||||||
|
<span>Şehir: {territory.cities.join(', ')}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-gray-500">
|
||||||
|
<FaMapMarkerAlt className="w-8 h-8 mx-auto mb-2 text-gray-400" />
|
||||||
|
<p>Henüz bölge atanmamış</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Performance & Targets */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Performance Overview */}
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
|
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
<FaTrophy className="w-5 h-5 mr-2" />
|
<FaChartLine className="w-5 h-5 mr-2" />
|
||||||
Aktif Hedef
|
Performans
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div className="text-center">
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
<div
|
||||||
Hedef Dönem
|
className={`text-3xl font-bold mb-2 ${
|
||||||
</label>
|
performance >= 100
|
||||||
<p className="text-gray-900">{activeTarget.targetPeriod}</p>
|
? 'text-green-600'
|
||||||
|
: performance >= 80
|
||||||
|
? 'text-yellow-600'
|
||||||
|
: 'text-red-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
%{performance.toFixed(1)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">Hedef Başarımı</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
<div
|
||||||
Hedef Tutar
|
className={`h-2.5 rounded-full ${
|
||||||
</label>
|
performance >= 100
|
||||||
<p className="text-lg font-bold text-gray-900">
|
? 'bg-green-500'
|
||||||
₺{activeTarget.targetValue.toLocaleString()}
|
: performance >= 80
|
||||||
</p>
|
? 'bg-yellow-500'
|
||||||
|
: 'bg-red-500'
|
||||||
|
}`}
|
||||||
|
style={{ width: `${Math.min(performance, 100)}%` }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="flex justify-between text-sm text-gray-600">
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
<span>0%</span>
|
||||||
Gerçekleşen
|
<span>100%</span>
|
||||||
</label>
|
|
||||||
<p className="text-lg font-bold text-blue-600">
|
|
||||||
₺{activeTarget.actualValue.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
|
||||||
Başlangıç - Bitiş
|
|
||||||
</label>
|
|
||||||
<p className="text-sm text-gray-900">
|
|
||||||
{dayjs(activeTarget.startDate).format("DD.MM.YYYY")} -{" "}
|
|
||||||
{dayjs(activeTarget.endDate).format("DD.MM.YYYY")}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Achievement Badge */}
|
{/* Current Target */}
|
||||||
{performance >= 100 && (
|
{activeTarget && (
|
||||||
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg p-4 text-center text-white">
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
<FaAward className="w-10 h-10 mx-auto mb-2" />
|
<h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center">
|
||||||
<h3 className="text-base font-bold mb-1">Tebrikler!</h3>
|
<FaTrophy className="w-5 h-5 mr-2" />
|
||||||
<p className="text-sm">
|
Aktif Hedef
|
||||||
Bu ekip hedefini aştı ve başarı ödülünü hak etti!
|
</h3>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Quick Stats */}
|
<div className="space-y-3">
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
<div>
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-3">
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
Hızlı İstatistikler
|
Hedef Dönem
|
||||||
</h3>
|
</label>
|
||||||
|
<p className="text-gray-900">{activeTarget.targetPeriod}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div>
|
||||||
<div className="flex justify-between">
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
<span className="text-gray-600">Toplam Hedef:</span>
|
Hedef Tutar
|
||||||
<span className="font-medium">{team.targets?.length || 0}</span>
|
</label>
|
||||||
|
<p className="text-lg font-bold text-gray-900">
|
||||||
|
₺{activeTarget.targetValue.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
|
Gerçekleşen
|
||||||
|
</label>
|
||||||
|
<p className="text-lg font-bold text-blue-600">
|
||||||
|
₺{activeTarget.actualValue.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
|
Başlangıç - Bitiş
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-gray-900">
|
||||||
|
{dayjs(activeTarget.startDate).format('DD.MM.YYYY')} -{' '}
|
||||||
|
{dayjs(activeTarget.endDate).format('DD.MM.YYYY')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
)}
|
||||||
<span className="text-gray-600">Aktif Üye:</span>
|
|
||||||
<span className="font-medium">
|
{/* Achievement Badge */}
|
||||||
{team.members?.filter((m) => m.isActive).length || 0}
|
{performance >= 100 && (
|
||||||
</span>
|
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg p-4 text-center text-white">
|
||||||
|
<FaAward className="w-10 h-10 mx-auto mb-2" />
|
||||||
|
<h3 className="text-base font-bold mb-1">Tebrikler!</h3>
|
||||||
|
<p className="text-sm">Bu ekip hedefini aştı ve başarı ödülünü hak etti!</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
)}
|
||||||
<span className="text-gray-600">Kapsam Alanı:</span>
|
|
||||||
<span className="font-medium">
|
{/* Quick Stats */}
|
||||||
{team.territories?.reduce(
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
(acc, t) => acc + (t.cities?.length || 0),
|
<h3 className="text-base font-semibold text-gray-900 mb-3">Hızlı İstatistikler</h3>
|
||||||
0
|
|
||||||
) || 0}{" "}
|
<div className="space-y-3">
|
||||||
şehir
|
<div className="flex justify-between">
|
||||||
</span>
|
<span className="text-gray-600">Toplam Hedef:</span>
|
||||||
|
<span className="font-medium">{team.targets?.length || 0}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-600">Aktif Üye:</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{team.members?.filter((m) => m.isActive).length || 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-600">Kapsam Alanı:</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{team.territories?.reduce((acc, t) => acc + (t.cities?.length || 0), 0) || 0}{' '}
|
||||||
|
şehir
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default SalesTeamView;
|
export default SalesTeamView
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
FaUsers,
|
FaUsers,
|
||||||
FaPlus,
|
FaPlus,
|
||||||
|
|
@ -12,96 +12,93 @@ import {
|
||||||
FaList,
|
FaList,
|
||||||
FaSearch,
|
FaSearch,
|
||||||
FaFilter,
|
FaFilter,
|
||||||
} from "react-icons/fa";
|
} from 'react-icons/fa'
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from 'react-router-dom'
|
||||||
import DataTable, { Column } from "../../../components/common/DataTable";
|
import DataTable, { Column } from '../../../components/common/DataTable'
|
||||||
import mockSalesTeams from "../../../mocks/mockSalesTeams";
|
import mockSalesTeams from '../../../mocks/mockSalesTeams'
|
||||||
import Widget from "../../../components/common/Widget";
|
import Widget from '../../../components/common/Widget'
|
||||||
import { Team } from "../../../types/common";
|
import { Team } from '../../../types/common'
|
||||||
|
import { Container } from '@/components/shared'
|
||||||
|
|
||||||
const SalesTeams: React.FC = () => {
|
const SalesTeams: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate()
|
||||||
const [teams] = useState<Team[]>(mockSalesTeams);
|
const [teams] = useState<Team[]>(mockSalesTeams)
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
const [viewMode, setViewMode] = useState<"cards" | "list">("cards");
|
const [viewMode, setViewMode] = useState<'cards' | 'list'>('cards')
|
||||||
const [filterStatus, setFilterStatus] = useState<
|
const [filterStatus, setFilterStatus] = useState<'all' | 'active' | 'inactive'>('all')
|
||||||
"all" | "active" | "inactive"
|
|
||||||
>("all");
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
navigate("/admin/crm/sales-teams/new");
|
navigate('/admin/crm/sales-teams/new')
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleEdit = (team: Team) => {
|
const handleEdit = (team: Team) => {
|
||||||
navigate(`/admin/crm/sales-teams/edit/${team.id}`);
|
navigate(`/admin/crm/sales-teams/edit/${team.id}`)
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
const team = teams.find((t) => t.id === id);
|
const team = teams.find((t) => t.id === id)
|
||||||
if (confirm(`${team?.name} ekibini silmek istediğinizden emin misiniz?`)) {
|
if (confirm(`${team?.name} ekibini silmek istediğinizden emin misiniz?`)) {
|
||||||
console.log("Delete sales team:", id);
|
console.log('Delete sales team:', id)
|
||||||
// Implement delete logic here
|
// Implement delete logic here
|
||||||
alert("Ekip silindi (mock)");
|
alert('Ekip silindi (mock)')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleViewDetails = (team: Team) => {
|
const handleViewDetails = (team: Team) => {
|
||||||
navigate(`/admin/crm/sales-teams/${team.id}`);
|
navigate(`/admin/crm/sales-teams/${team.id}`)
|
||||||
};
|
}
|
||||||
|
|
||||||
// Calculate team performance based on targets
|
// Calculate team performance based on targets
|
||||||
const calculateTeamPerformance = (team: Team): number => {
|
const calculateTeamPerformance = (team: Team): number => {
|
||||||
if (!team.targets || team.targets.length === 0) return 0;
|
if (!team.targets || team.targets.length === 0) return 0
|
||||||
const activeTarget = team.targets.find((t) => t.status === "ACTIVE");
|
const activeTarget = team.targets.find((t) => t.status === 'ACTIVE')
|
||||||
if (!activeTarget || activeTarget.targetValue === 0) return 0;
|
if (!activeTarget || activeTarget.targetValue === 0) return 0
|
||||||
return (activeTarget.actualValue / activeTarget.targetValue) * 100;
|
return (activeTarget.actualValue / activeTarget.targetValue) * 100
|
||||||
};
|
}
|
||||||
|
|
||||||
// Calculate team revenue
|
// Calculate team revenue
|
||||||
const calculateTeamRevenue = (team: Team): number => {
|
const calculateTeamRevenue = (team: Team): number => {
|
||||||
if (!team.targets || team.targets.length === 0) return 0;
|
if (!team.targets || team.targets.length === 0) return 0
|
||||||
return team.targets.reduce((sum, target) => sum + target.actualValue, 0);
|
return team.targets.reduce((sum, target) => sum + target.actualValue, 0)
|
||||||
};
|
}
|
||||||
|
|
||||||
// Filter teams based on search and status
|
// Filter teams based on search and status
|
||||||
const filteredTeams = teams.filter((team) => {
|
const filteredTeams = teams.filter((team) => {
|
||||||
const matchesSearch =
|
const matchesSearch =
|
||||||
searchTerm === "" ||
|
searchTerm === '' ||
|
||||||
team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
team.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
team.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
team.description?.toLowerCase().includes(searchTerm.toLowerCase());
|
team.description?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
|
||||||
const matchesStatus =
|
const matchesStatus =
|
||||||
filterStatus === "all" ||
|
filterStatus === 'all' ||
|
||||||
(filterStatus === "active" && team.isActive) ||
|
(filterStatus === 'active' && team.isActive) ||
|
||||||
(filterStatus === "inactive" && !team.isActive);
|
(filterStatus === 'inactive' && !team.isActive)
|
||||||
|
|
||||||
return matchesSearch && matchesStatus;
|
return matchesSearch && matchesStatus
|
||||||
});
|
})
|
||||||
|
|
||||||
// Table columns for list view
|
// Table columns for list view
|
||||||
const columns: Column<Team>[] = [
|
const columns: Column<Team>[] = [
|
||||||
{
|
{
|
||||||
key: "teamCode",
|
key: 'teamCode',
|
||||||
header: "Takım Kodu",
|
header: 'Takım Kodu',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "name",
|
key: 'name',
|
||||||
header: "Takım Adı",
|
header: 'Takım Adı',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (team: Team) => (
|
render: (team: Team) => (
|
||||||
<div>
|
<div>
|
||||||
<div className="font-medium text-gray-900">{team.name}</div>
|
<div className="font-medium text-gray-900">{team.name}</div>
|
||||||
<div className="text-sm text-gray-500 truncate max-w-xs">
|
<div className="text-sm text-gray-500 truncate max-w-xs">{team.description}</div>
|
||||||
{team.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "memberCount",
|
key: 'memberCount',
|
||||||
header: "Üye Sayısı",
|
header: 'Üye Sayısı',
|
||||||
render: (team: Team) => (
|
render: (team: Team) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaUsers className="w-4 h-4 text-gray-500" />
|
<FaUsers className="w-4 h-4 text-gray-500" />
|
||||||
|
|
@ -110,8 +107,8 @@ const SalesTeams: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "territories",
|
key: 'territories',
|
||||||
header: "Bölge Sayısı",
|
header: 'Bölge Sayısı',
|
||||||
render: (team: Team) => (
|
render: (team: Team) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaMapMarkerAlt className="w-4 h-4 text-gray-500" />
|
<FaMapMarkerAlt className="w-4 h-4 text-gray-500" />
|
||||||
|
|
@ -120,55 +117,53 @@ const SalesTeams: React.FC = () => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "performance",
|
key: 'performance',
|
||||||
header: "Performans",
|
header: 'Performans',
|
||||||
render: (team: Team) => {
|
render: (team: Team) => {
|
||||||
const performance = calculateTeamPerformance(team);
|
const performance = calculateTeamPerformance(team)
|
||||||
const color =
|
const color =
|
||||||
performance >= 100
|
performance >= 100
|
||||||
? "text-green-600"
|
? 'text-green-600'
|
||||||
: performance >= 80
|
: performance >= 80
|
||||||
? "text-yellow-600"
|
? 'text-yellow-600'
|
||||||
: "text-red-600";
|
: 'text-red-600'
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-center gap-1 ${color}`}>
|
<div className={`flex items-center gap-1 ${color}`}>
|
||||||
<FaArrowUp className="w-4 h-4" />
|
<FaArrowUp className="w-4 h-4" />
|
||||||
<span className="font-medium">%{performance.toFixed(1)}</span>
|
<span className="font-medium">%{performance.toFixed(1)}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "totalRevenue",
|
key: 'totalRevenue',
|
||||||
header: "Toplam Gelir",
|
header: 'Toplam Gelir',
|
||||||
render: (team: Team) => {
|
render: (team: Team) => {
|
||||||
const revenue = calculateTeamRevenue(team);
|
const revenue = calculateTeamRevenue(team)
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
<FaDollarSign className="w-4 h-4 text-gray-500" />
|
||||||
<span>₺{revenue.toLocaleString()}</span>
|
<span>₺{revenue.toLocaleString()}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "status",
|
key: 'status',
|
||||||
header: "Durum",
|
header: 'Durum',
|
||||||
render: (team: Team) => (
|
render: (team: Team) => (
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
team.isActive
|
team.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{team.isActive ? "Aktif" : "Pasif"}
|
{team.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "actions",
|
key: 'actions',
|
||||||
header: "İşlemler",
|
header: 'İşlemler',
|
||||||
render: (team: Team) => (
|
render: (team: Team) => (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -195,302 +190,258 @@ const SalesTeams: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
// Calculate overall statistics
|
// Calculate overall statistics
|
||||||
const totalMembers = teams.reduce(
|
const totalMembers = teams.reduce((sum, team) => sum + (team.members?.length || 0), 0)
|
||||||
(sum, team) => sum + (team.members?.length || 0),
|
const totalRevenue = teams.reduce((sum, team) => sum + calculateTeamRevenue(team), 0)
|
||||||
0
|
|
||||||
);
|
|
||||||
const totalRevenue = teams.reduce(
|
|
||||||
(sum, team) => sum + calculateTeamRevenue(team),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const averagePerformance =
|
const averagePerformance =
|
||||||
teams.reduce((sum, team) => sum + calculateTeamPerformance(team), 0) /
|
teams.reduce((sum, team) => sum + calculateTeamPerformance(team), 0) / teams.length || 0
|
||||||
teams.length || 0;
|
const topPerformingTeams = teams.filter((team) => calculateTeamPerformance(team) >= 100).length
|
||||||
const topPerformingTeams = teams.filter(
|
|
||||||
(team) => calculateTeamPerformance(team) >= 100
|
|
||||||
).length;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 pt-2">
|
<Container>
|
||||||
{/* Header */}
|
<div className="space-y-4 pt-2">
|
||||||
<div className="flex items-center justify-between">
|
{/* Header */}
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-bold text-gray-900">Satış Ekipleri</h2>
|
<div>
|
||||||
<p className="text-gray-600 mt-1">
|
<h2 className="text-xl font-bold text-gray-900">Satış Ekipleri</h2>
|
||||||
Satış ekipleri ve performans yönetimi
|
<p className="text-gray-600 mt-1">Satış ekipleri ve performans yönetimi</p>
|
||||||
</p>
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<FaPlus className="w-4 h-4" />
|
||||||
|
Yeni Ekip
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
onClick={handleAdd}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<FaPlus className="w-4 h-4" />
|
|
||||||
Yeni Ekip
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
<Widget
|
<Widget title="Toplam Ekip" value={teams.length} color="blue" icon="FaUsers" />
|
||||||
title="Toplam Ekip"
|
|
||||||
value={teams.length}
|
|
||||||
color="blue"
|
|
||||||
icon="FaUsers"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
<Widget title="Toplam Üye" value={totalMembers} color="green" icon="FaUser" />
|
||||||
title="Toplam Üye"
|
|
||||||
value={totalMembers}
|
|
||||||
color="green"
|
|
||||||
icon="FaUser"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Toplam Gelir"
|
title="Toplam Gelir"
|
||||||
value={`₺${totalRevenue.toLocaleString()}`}
|
value={`₺${totalRevenue.toLocaleString()}`}
|
||||||
color="purple"
|
color="purple"
|
||||||
icon="FaDollarSign"
|
icon="FaDollarSign"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="Hedef Aşan Ekip"
|
title="Hedef Aşan Ekip"
|
||||||
value={topPerformingTeams}
|
value={topPerformingTeams}
|
||||||
color="orange"
|
color="orange"
|
||||||
icon="FaAward"
|
icon="FaAward"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Performance Overview */}
|
{/* Performance Overview */}
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
<h3 className="text-base font-semibold text-gray-900 mb-3">
|
<h3 className="text-base font-semibold text-gray-900 mb-3">Performans Özeti</h3>
|
||||||
Performans Özeti
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
</h3>
|
<div className="text-center">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="text-2xl font-bold text-blue-600 mb-1">
|
||||||
<div className="text-center">
|
%{averagePerformance.toFixed(1)}
|
||||||
<div className="text-2xl font-bold text-blue-600 mb-1">
|
</div>
|
||||||
%{averagePerformance.toFixed(1)}
|
<p className="text-sm text-gray-600">Ortalama Performans</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-600">Ortalama Performans</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-green-600 mb-1">
|
<div className="text-2xl font-bold text-green-600 mb-1">{topPerformingTeams}</div>
|
||||||
{topPerformingTeams}
|
<p className="text-sm text-gray-600">Hedef Aşan Ekip</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-600">Hedef Aşan Ekip</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-purple-600 mb-1">
|
<div className="text-2xl font-bold text-purple-600 mb-1">
|
||||||
₺{Math.round(totalRevenue / teams.length || 0).toLocaleString()}
|
₺{Math.round(totalRevenue / teams.length || 0).toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">Ekip Başına Ortalama</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-600">Ekip Başına Ortalama</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Controls */}
|
{/* Controls */}
|
||||||
<div className="bg-white rounded-lg shadow-sm border p-3">
|
<div className="bg-white rounded-lg shadow-sm border p-3">
|
||||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
||||||
{/* Search */}
|
{/* Search */}
|
||||||
<div className="flex items-center gap-2 flex-1">
|
<div className="flex items-center gap-2 flex-1">
|
||||||
<FaSearch className="w-4 h-4 text-gray-400" />
|
<FaSearch className="w-4 h-4 text-gray-400" />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Ekip adı, kod veya açıklama ara..."
|
placeholder="Ekip adı, kod veya açıklama ara..."
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Status Filter */}
|
{/* Status Filter */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FaFilter className="w-4 h-4 text-gray-400" />
|
<FaFilter className="w-4 h-4 text-gray-400" />
|
||||||
<select
|
<select
|
||||||
value={filterStatus}
|
value={filterStatus}
|
||||||
onChange={(e) =>
|
onChange={(e) => setFilterStatus(e.target.value as 'all' | 'active' | 'inactive')}
|
||||||
setFilterStatus(e.target.value as "all" | "active" | "inactive")
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
}
|
|
||||||
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="all">Tüm Durumlar</option>
|
|
||||||
<option value="active">Aktif</option>
|
|
||||||
<option value="inactive">Pasif</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* View Mode Toggle */}
|
|
||||||
<div className="flex bg-gray-100 rounded-lg p-1">
|
|
||||||
<button
|
|
||||||
onClick={() => setViewMode("list")}
|
|
||||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
|
|
||||||
viewMode === "list"
|
|
||||||
? "bg-white text-blue-600 shadow-sm"
|
|
||||||
: "text-gray-600 hover:text-gray-900"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FaList className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setViewMode("cards")}
|
|
||||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
|
|
||||||
viewMode === "cards"
|
|
||||||
? "bg-white text-blue-600 shadow-sm"
|
|
||||||
: "text-gray-600 hover:text-gray-900"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FaTh className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
{viewMode === "cards" ? (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
||||||
{filteredTeams.map((team) => {
|
|
||||||
const performance = calculateTeamPerformance(team);
|
|
||||||
const revenue = calculateTeamRevenue(team);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={team.id}
|
|
||||||
className="bg-white rounded-lg shadow-sm border p-4"
|
|
||||||
>
|
>
|
||||||
{/* Card Header */}
|
<option value="all">Tüm Durumlar</option>
|
||||||
<div className="flex items-start justify-between mb-3">
|
<option value="active">Aktif</option>
|
||||||
<div className="flex-1">
|
<option value="inactive">Pasif</option>
|
||||||
<h3 className="text-base font-semibold text-gray-900">
|
</select>
|
||||||
{team.name}
|
</div>
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-500">{team.code}</p>
|
|
||||||
{team.description && (
|
|
||||||
<p className="text-sm text-gray-600 mt-1 line-clamp-2">
|
|
||||||
{team.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
||||||
team.isActive
|
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{team.isActive ? "Aktif" : "Pasif"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card Stats */}
|
{/* View Mode Toggle */}
|
||||||
<div className="space-y-2 mb-3">
|
<div className="flex bg-gray-100 rounded-lg p-1">
|
||||||
<div className="flex items-center justify-between">
|
<button
|
||||||
<div className="flex items-center gap-2">
|
onClick={() => setViewMode('list')}
|
||||||
<FaUsers className="w-4 h-4 text-gray-400" />
|
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
|
||||||
<span className="text-sm text-gray-600">Yönetici</span>
|
viewMode === 'list'
|
||||||
</div>
|
? 'bg-white text-blue-600 shadow-sm'
|
||||||
<span className="font-medium">
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
{team.manager?.fullName}
|
}`}
|
||||||
</span>
|
>
|
||||||
</div>
|
<FaList className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('cards')}
|
||||||
|
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${
|
||||||
|
viewMode === 'cards'
|
||||||
|
? 'bg-white text-blue-600 shadow-sm'
|
||||||
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FaTh className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
{/* Content */}
|
||||||
<div className="flex items-center gap-2">
|
{viewMode === 'cards' ? (
|
||||||
<FaUsers className="w-4 h-4 text-gray-400" />
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
<span className="text-sm text-gray-600">Üye Sayısı</span>
|
{filteredTeams.map((team) => {
|
||||||
</div>
|
const performance = calculateTeamPerformance(team)
|
||||||
<span className="font-medium">
|
const revenue = calculateTeamRevenue(team)
|
||||||
{team.members?.length || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div key={team.id} className="bg-white rounded-lg shadow-sm border p-4">
|
||||||
<FaMapMarkerAlt className="w-4 h-4 text-gray-400" />
|
{/* Card Header */}
|
||||||
<span className="text-sm text-gray-600">Bölge</span>
|
<div className="flex items-start justify-between mb-3">
|
||||||
</div>
|
<div className="flex-1">
|
||||||
<span className="font-medium">
|
<h3 className="text-base font-semibold text-gray-900">{team.name}</h3>
|
||||||
{team.territories?.length || 0}
|
<p className="text-sm text-gray-500">{team.code}</p>
|
||||||
</span>
|
{team.description && (
|
||||||
</div>
|
<p className="text-sm text-gray-600 mt-1 line-clamp-2">
|
||||||
|
{team.description}
|
||||||
<div className="flex items-center justify-between">
|
</p>
|
||||||
<div className="flex items-center gap-2">
|
)}
|
||||||
<FaArrowUp className="w-4 h-4 text-gray-400" />
|
|
||||||
<span className="text-sm text-gray-600">Performans</span>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className={`font-medium ${
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||||
performance >= 100
|
team.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||||
? "text-green-600"
|
|
||||||
: performance >= 80
|
|
||||||
? "text-yellow-600"
|
|
||||||
: "text-red-600"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
%{performance.toFixed(1)}
|
{team.isActive ? 'Aktif' : 'Pasif'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
{/* Card Stats */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="space-y-2 mb-3">
|
||||||
<FaDollarSign className="w-4 h-4 text-gray-400" />
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-gray-600">Gelir</span>
|
<div className="flex items-center gap-2">
|
||||||
|
<FaUsers className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600">Yönetici</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-medium">{team.manager?.fullName}</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="font-medium">
|
|
||||||
₺{revenue.toLocaleString()}
|
<div className="flex items-center justify-between">
|
||||||
</span>
|
<div className="flex items-center gap-2">
|
||||||
|
<FaUsers className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600">Üye Sayısı</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-medium">{team.members?.length || 0}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FaMapMarkerAlt className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600">Bölge</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-medium">{team.territories?.length || 0}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FaArrowUp className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600">Performans</span>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`font-medium ${
|
||||||
|
performance >= 100
|
||||||
|
? 'text-green-600'
|
||||||
|
: performance >= 80
|
||||||
|
? 'text-yellow-600'
|
||||||
|
: 'text-red-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
%{performance.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FaDollarSign className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600">Gelir</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-medium">₺{revenue.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card Actions */}
|
||||||
|
<div className="flex gap-2 pt-3 border-t justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewDetails(team)}
|
||||||
|
className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
||||||
|
>
|
||||||
|
<FaEye className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(team)}
|
||||||
|
className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-green-600 border border-green-200 rounded-md hover:bg-green-50 transition-colors"
|
||||||
|
>
|
||||||
|
<FaEdit className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(team.id)}
|
||||||
|
className="px-2.5 py-1.5 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
|
||||||
|
title="Sil"
|
||||||
|
>
|
||||||
|
<FaTrash className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
|
<DataTable data={filteredTeams} columns={columns} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Card Actions */}
|
{filteredTeams.length === 0 && (
|
||||||
<div className="flex gap-2 pt-3 border-t justify-end">
|
<div className="text-center py-12">
|
||||||
<button
|
<FaUsers className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||||
onClick={() => handleViewDetails(team)}
|
<h3 className="text-base font-medium text-gray-900 mb-2">Ekip bulunamadı</h3>
|
||||||
className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50 transition-colors"
|
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
|
||||||
>
|
</div>
|
||||||
<FaEye className="w-4 h-4" />
|
)}
|
||||||
</button>
|
</div>
|
||||||
<button
|
</Container>
|
||||||
onClick={() => handleEdit(team)}
|
)
|
||||||
className="flex items-center justify-center gap-2 px-2.5 py-1.5 text-sm text-green-600 border border-green-200 rounded-md hover:bg-green-50 transition-colors"
|
}
|
||||||
>
|
|
||||||
<FaEdit className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleDelete(team.id)}
|
|
||||||
className="px-2.5 py-1.5 text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
|
|
||||||
title="Sil"
|
|
||||||
>
|
|
||||||
<FaTrash className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border">
|
|
||||||
<DataTable data={filteredTeams} columns={columns} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{filteredTeams.length === 0 && (
|
export default SalesTeams
|
||||||
<div className="text-center py-12">
|
|
||||||
<FaUsers className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
|
||||||
Ekip bulunamadı
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
Arama kriterlerinizi değiştirmeyi deneyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SalesTeams;
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue