Supply Management
This commit is contained in:
Sedat Öztürk
parent
4b7fd59e61
commit
811a575ff7
21 changed files with 6426 additions and 7554 deletions
|
|
@ -3270,16 +3270,6 @@
|
|||
"RequiredPermissionName": null,
|
||||
"IsDisabled": false
|
||||
},
|
||||
{
|
||||
"ParentCode": "App.SupplyChain",
|
||||
"Code": "App.SupplyChain.Requisitions",
|
||||
"DisplayName": "Satınalma İstekleri",
|
||||
"Order": 6,
|
||||
"Url": "/admin/supplychain/requisitions",
|
||||
"Icon": "FcPlanner",
|
||||
"RequiredPermissionName": null,
|
||||
"IsDisabled": false
|
||||
},
|
||||
{
|
||||
"ParentCode": "App.SupplyChain",
|
||||
"Code": "App.SupplyChain.Quotations",
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { FaTimes, FaSave, FaUsers, FaPlus, FaTrash } from "react-icons/fa";
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { FaTimes, FaSave, FaUsers, FaPlus, FaTrash } from 'react-icons/fa'
|
||||
import {
|
||||
MmApprovalWorkflow,
|
||||
MmApprovalWorkflowLevel,
|
||||
RequestTypeEnum,
|
||||
ApprovalLevelEnum,
|
||||
} from "../../../types/mm";
|
||||
import MultiSelectEmployee from "../../../components/common/MultiSelectEmployee";
|
||||
import { mockDepartments } from "../../../mocks/mockDepartments";
|
||||
} from '../../../types/mm'
|
||||
import MultiSelectEmployee from '../../../components/common/MultiSelectEmployee'
|
||||
import { mockDepartments } from '../../../mocks/mockDepartments'
|
||||
|
||||
interface ApprovalWorkflowModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (workflow: MmApprovalWorkflow) => void;
|
||||
workflow?: MmApprovalWorkflow | null;
|
||||
mode: "create" | "view" | "edit";
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSave: (workflow: MmApprovalWorkflow) => void
|
||||
workflow?: MmApprovalWorkflow | null
|
||||
mode: 'create' | 'view' | 'edit'
|
||||
}
|
||||
|
||||
const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
||||
|
|
@ -25,119 +25,117 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
mode,
|
||||
}) => {
|
||||
const [formData, setFormData] = useState<Partial<MmApprovalWorkflow>>({
|
||||
name: "",
|
||||
departmentId: "",
|
||||
name: '',
|
||||
departmentId: '',
|
||||
requestType: RequestTypeEnum.Material,
|
||||
amountThreshold: 0,
|
||||
approvalLevels: [],
|
||||
isActive: true,
|
||||
});
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === "create") {
|
||||
if (mode === 'create') {
|
||||
// Reset form to initial empty state for new workflow
|
||||
setFormData({
|
||||
name: "",
|
||||
departmentId: "",
|
||||
name: '',
|
||||
departmentId: '',
|
||||
requestType: RequestTypeEnum.Material,
|
||||
amountThreshold: 0,
|
||||
approvalLevels: [],
|
||||
isActive: true,
|
||||
});
|
||||
})
|
||||
} else if (workflow) {
|
||||
// Load existing workflow data for view/edit modes
|
||||
setFormData(workflow);
|
||||
setFormData(workflow)
|
||||
}
|
||||
}, [workflow, mode]);
|
||||
}, [workflow, mode])
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||||
>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const { name, value, type } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
type === "number"
|
||||
type === 'number'
|
||||
? parseFloat(value) || 0
|
||||
: type === "checkbox"
|
||||
: type === 'checkbox'
|
||||
? (e.target as HTMLInputElement).checked
|
||||
: value,
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const addApprovalLevel = () => {
|
||||
const newLevel: MmApprovalWorkflowLevel = {
|
||||
id: `level-${Date.now()}`,
|
||||
workflowId: formData.id || "",
|
||||
workflowId: formData.id || '',
|
||||
level: ApprovalLevelEnum.Supervisor,
|
||||
approverUserIds: [],
|
||||
approverNames: [],
|
||||
sequence: (formData.approvalLevels?.length || 0) + 1,
|
||||
isRequired: true,
|
||||
isParallel: false,
|
||||
};
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
approvalLevels: [...(prev.approvalLevels || []), newLevel],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const removeApprovalLevel = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
approvalLevels: prev.approvalLevels?.filter((_, i) => i !== index) || [],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const updateApprovalLevel = (
|
||||
index: number,
|
||||
field: keyof MmApprovalWorkflowLevel,
|
||||
value: string | number | boolean | string[] | undefined
|
||||
value: string | number | boolean | string[] | undefined,
|
||||
) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
approvalLevels:
|
||||
prev.approvalLevels?.map((level, i) =>
|
||||
i === index ? { ...level, [field]: value } : level
|
||||
i === index ? { ...level, [field]: value } : level,
|
||||
) || [],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const handleApproverNamesChange = (index: number, employees: string[]) => {
|
||||
updateApprovalLevel(index, "approverNames", employees);
|
||||
};
|
||||
updateApprovalLevel(index, 'approverNames', employees)
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (mode !== "view") {
|
||||
e.preventDefault()
|
||||
if (mode !== 'view') {
|
||||
const newWorkflow: MmApprovalWorkflow = {
|
||||
id: workflow?.id || `WF-${Date.now()}`,
|
||||
name: formData.name || "",
|
||||
departmentId: formData.departmentId || "",
|
||||
name: formData.name || '',
|
||||
departmentId: formData.departmentId || '',
|
||||
requestType: formData.requestType || RequestTypeEnum.Material,
|
||||
amountThreshold: formData.amountThreshold || 0,
|
||||
approvalLevels: formData.approvalLevels || [],
|
||||
isActive: formData.isActive ?? true,
|
||||
creationTime: workflow?.creationTime || new Date(),
|
||||
lastModificationTime: new Date(),
|
||||
};
|
||||
onSave(newWorkflow);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
onSave(newWorkflow)
|
||||
}
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null;
|
||||
if (!isOpen) return null
|
||||
|
||||
const isReadOnly = mode === "view";
|
||||
const isReadOnly = mode === 'view'
|
||||
const modalTitle =
|
||||
mode === "create"
|
||||
? "Yeni Onay Süreci"
|
||||
: mode === "edit"
|
||||
? "Onay Sürecini Düzenle"
|
||||
: "Onay Süreci Detayları";
|
||||
mode === 'create'
|
||||
? 'Yeni Onay Süreci'
|
||||
: mode === 'edit'
|
||||
? 'Onay Sürecini Düzenle'
|
||||
: 'Onay Süreci Detayları'
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
|
|
@ -147,10 +145,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
<FaUsers className="mr-2 text-blue-600" />
|
||||
{modalTitle}
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 p-1"
|
||||
>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-1">
|
||||
<FaTimes />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -159,18 +154,14 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Temel Bilgiler */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-base font-medium text-gray-900 border-b pb-1">
|
||||
Temel Bilgiler
|
||||
</h4>
|
||||
<h4 className="text-base font-medium text-gray-900 border-b pb-1">Temel Bilgiler</h4>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Süreç Adı
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Süreç Adı</label>
|
||||
<input
|
||||
type="text"
|
||||
name="workflowName"
|
||||
value={formData.name || ""}
|
||||
value={formData.name || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -179,11 +170,9 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Departman
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Departman</label>
|
||||
<select
|
||||
value={formData.departmentId || ""}
|
||||
value={formData.departmentId || ''}
|
||||
onChange={handleInputChange}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
required
|
||||
|
|
@ -198,9 +187,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Talep Tipi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Talep Tipi</label>
|
||||
<select
|
||||
name="requestType"
|
||||
value={formData.requestType || RequestTypeEnum.Material}
|
||||
|
|
@ -216,9 +203,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Tutar Eşiği (TL)
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Tutar Eşiği (TL)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="amountThreshold"
|
||||
|
|
@ -239,9 +224,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
disabled={isReadOnly}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Aktif
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-700">Aktif</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -266,10 +249,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
|
||||
<div className="space-y-2 max-h-56 overflow-y-auto p-1">
|
||||
{formData.approvalLevels?.map((level, index) => (
|
||||
<div
|
||||
key={level.id}
|
||||
className="border rounded-lg p-2 bg-gray-50"
|
||||
>
|
||||
<div key={level.id} className="border rounded-lg p-2 bg-gray-50">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Seviye {level.sequence}
|
||||
|
|
@ -292,30 +272,18 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</label>
|
||||
<select
|
||||
value={level.level}
|
||||
onChange={(e) =>
|
||||
updateApprovalLevel(index, "level", e.target.value)
|
||||
}
|
||||
onChange={(e) => updateApprovalLevel(index, 'level', e.target.value)}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value={ApprovalLevelEnum.Supervisor}>
|
||||
Süpervizör
|
||||
</option>
|
||||
<option value={ApprovalLevelEnum.Manager}>
|
||||
Müdür
|
||||
</option>
|
||||
<option value={ApprovalLevelEnum.Director}>
|
||||
Direktör
|
||||
</option>
|
||||
<option value={ApprovalLevelEnum.GeneralManager}>
|
||||
Genel Müdür
|
||||
</option>
|
||||
<option value={ApprovalLevelEnum.Supervisor}>Süpervizör</option>
|
||||
<option value={ApprovalLevelEnum.Manager}>Müdür</option>
|
||||
<option value={ApprovalLevelEnum.Director}>Direktör</option>
|
||||
<option value={ApprovalLevelEnum.GeneralManager}>Genel Müdür</option>
|
||||
<option value={ApprovalLevelEnum.FinanceManager}>
|
||||
Mali İşler Müdürü
|
||||
</option>
|
||||
<option value={ApprovalLevelEnum.TechnicalManager}>
|
||||
Teknik Müdür
|
||||
</option>
|
||||
<option value={ApprovalLevelEnum.TechnicalManager}>Teknik Müdür</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -325,9 +293,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</label>
|
||||
<MultiSelectEmployee
|
||||
selectedEmployees={level.approverNames || []}
|
||||
onChange={(employees) =>
|
||||
handleApproverNamesChange(index, employees)
|
||||
}
|
||||
onChange={(employees) => handleApproverNamesChange(index, employees)}
|
||||
disabled={isReadOnly}
|
||||
placeholder="Onaylayıcı seçin..."
|
||||
className="mt-1"
|
||||
|
|
@ -340,12 +306,12 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={level.timeoutDays || ""}
|
||||
value={level.timeoutDays || ''}
|
||||
onChange={(e) =>
|
||||
updateApprovalLevel(
|
||||
index,
|
||||
"timeoutDays",
|
||||
parseInt(e.target.value) || undefined
|
||||
'timeoutDays',
|
||||
parseInt(e.target.value) || undefined,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -360,11 +326,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
type="checkbox"
|
||||
checked={level.isRequired}
|
||||
onChange={(e) =>
|
||||
updateApprovalLevel(
|
||||
index,
|
||||
"isRequired",
|
||||
e.target.checked
|
||||
)
|
||||
updateApprovalLevel(index, 'isRequired', e.target.checked)
|
||||
}
|
||||
disabled={isReadOnly}
|
||||
className="mr-1"
|
||||
|
|
@ -376,11 +338,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
type="checkbox"
|
||||
checked={level.isParallel}
|
||||
onChange={(e) =>
|
||||
updateApprovalLevel(
|
||||
index,
|
||||
"isParallel",
|
||||
e.target.checked
|
||||
)
|
||||
updateApprovalLevel(index, 'isParallel', e.target.checked)
|
||||
}
|
||||
disabled={isReadOnly}
|
||||
className="mr-1"
|
||||
|
|
@ -408,9 +366,9 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
onClick={onClose}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
{mode === "view" ? "Kapat" : "İptal"}
|
||||
{mode === 'view' ? 'Kapat' : 'İptal'}
|
||||
</button>
|
||||
{mode !== "view" && (
|
||||
{mode !== 'view' && (
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm"
|
||||
|
|
@ -423,7 +381,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default ApprovalWorkflowModal;
|
||||
export default ApprovalWorkflowModal
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
FaPlus,
|
||||
FaSearch,
|
||||
|
|
@ -10,94 +10,88 @@ import {
|
|||
FaClock,
|
||||
FaCheckCircle,
|
||||
FaEye,
|
||||
} from "react-icons/fa";
|
||||
import { MmApprovalWorkflow } from "../../../types/mm";
|
||||
import ApprovalWorkflowModal from "./ApprovalWorkflowModal";
|
||||
import { mockApprovalWorkflows } from "../../../mocks/mockApprovalWorkflows";
|
||||
} from 'react-icons/fa'
|
||||
import { MmApprovalWorkflow } from '../../../types/mm'
|
||||
import ApprovalWorkflowModal from './ApprovalWorkflowModal'
|
||||
import { mockApprovalWorkflows } from '../../../mocks/mockApprovalWorkflows'
|
||||
import {
|
||||
getApprovalLevelColor,
|
||||
getApprovalLevelText,
|
||||
getRequestTypeColor,
|
||||
getRequestTypeText,
|
||||
} from "../../../utils/erp";
|
||||
} from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const ApprovalWorkflows: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingWorkflow, setEditingWorkflow] =
|
||||
useState<MmApprovalWorkflow | null>(null);
|
||||
const [selectedWorkflow, setSelectedWorkflow] =
|
||||
useState<MmApprovalWorkflow | null>(null);
|
||||
const [modalMode, setModalMode] = useState<"create" | "view" | "edit">(
|
||||
"create"
|
||||
);
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [editingWorkflow, setEditingWorkflow] = useState<MmApprovalWorkflow | null>(null)
|
||||
const [selectedWorkflow, setSelectedWorkflow] = useState<MmApprovalWorkflow | null>(null)
|
||||
const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('create')
|
||||
|
||||
// Mock data - replace with actual API calls
|
||||
const [workflows] = useState<MmApprovalWorkflow[]>(mockApprovalWorkflows);
|
||||
const [workflows] = useState<MmApprovalWorkflow[]>(mockApprovalWorkflows)
|
||||
|
||||
const filteredWorkflows = workflows.filter(
|
||||
(workflow) =>
|
||||
workflow.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
workflow.departmentId.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
workflow.departmentId.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
const getTotalSteps = (workflow: MmApprovalWorkflow) => {
|
||||
return workflow.approvalLevels.length;
|
||||
};
|
||||
return workflow.approvalLevels.length
|
||||
}
|
||||
|
||||
const getRequiredSteps = (workflow: MmApprovalWorkflow) => {
|
||||
return workflow.approvalLevels.filter((level) => level.isRequired).length;
|
||||
};
|
||||
return workflow.approvalLevels.filter((level) => level.isRequired).length
|
||||
}
|
||||
|
||||
const getMaxTimeout = (workflow: MmApprovalWorkflow) => {
|
||||
return Math.max(
|
||||
...workflow.approvalLevels.map((level) => level.timeoutDays || 0)
|
||||
);
|
||||
};
|
||||
return Math.max(...workflow.approvalLevels.map((level) => level.timeoutDays || 0))
|
||||
}
|
||||
|
||||
const handleEdit = (workflow: MmApprovalWorkflow) => {
|
||||
setEditingWorkflow(workflow);
|
||||
setModalMode("edit");
|
||||
setShowModal(true);
|
||||
};
|
||||
setEditingWorkflow(workflow)
|
||||
setModalMode('edit')
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleView = (workflow: MmApprovalWorkflow) => {
|
||||
setEditingWorkflow(workflow);
|
||||
setModalMode("view");
|
||||
setShowModal(true);
|
||||
};
|
||||
setEditingWorkflow(workflow)
|
||||
setModalMode('view')
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleAddNew = () => {
|
||||
setEditingWorkflow(null);
|
||||
setModalMode("create");
|
||||
setShowModal(true);
|
||||
};
|
||||
setEditingWorkflow(null)
|
||||
setModalMode('create')
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleViewDetails = (workflow: MmApprovalWorkflow) => {
|
||||
setSelectedWorkflow(workflow);
|
||||
};
|
||||
setSelectedWorkflow(workflow)
|
||||
}
|
||||
|
||||
const handleSaveWorkflow = (workflow: MmApprovalWorkflow) => {
|
||||
// TODO: Implement save logic
|
||||
console.log("Saving workflow:", workflow);
|
||||
setShowModal(false);
|
||||
setEditingWorkflow(null);
|
||||
};
|
||||
console.log('Saving workflow:', workflow)
|
||||
setShowModal(false)
|
||||
setEditingWorkflow(null)
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
setEditingWorkflow(null);
|
||||
};
|
||||
setShowModal(false)
|
||||
setEditingWorkflow(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Onay Süreçleri</h2>
|
||||
<p className="text-gray-600">
|
||||
Departman bazlı satınalma onay süreçlerini yönetin
|
||||
</p>
|
||||
<p className="text-gray-600">Departman bazlı satınalma onay süreçlerini yönetin</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddNew}
|
||||
|
|
@ -123,9 +117,7 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Workflow List */}
|
||||
<div className="space-y-3 pt-2">
|
||||
<h3 className="text-base font-semibold text-gray-900">
|
||||
Onay Süreçleri
|
||||
</h3>
|
||||
<h3 className="text-base font-semibold text-gray-900">Onay Süreçleri</h3>
|
||||
{filteredWorkflows.map((workflow) => (
|
||||
<div
|
||||
key={workflow.id}
|
||||
|
|
@ -136,12 +128,10 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<FaCodeBranch className="w-4 h-4 text-gray-600" />
|
||||
<h4 className="text-base font-semibold text-gray-900">
|
||||
{workflow.name}
|
||||
</h4>
|
||||
<h4 className="text-base font-semibold text-gray-900">{workflow.name}</h4>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
|
||||
workflow.requestType
|
||||
workflow.requestType,
|
||||
)}`}
|
||||
>
|
||||
{getRequestTypeText(workflow.requestType)}
|
||||
|
|
@ -157,8 +147,8 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
<div className="flex space-x-1">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleView(workflow);
|
||||
e.stopPropagation()
|
||||
handleView(workflow)
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
|
||||
title="Görüntüle"
|
||||
|
|
@ -167,8 +157,8 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEdit(workflow);
|
||||
e.stopPropagation()
|
||||
handleEdit(workflow)
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
|
||||
title="Düzenle"
|
||||
|
|
@ -198,23 +188,19 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
<FaCheckCircle className="w-4 h-4 mr-1" />
|
||||
Zorunlu Adım
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
{getRequiredSteps(workflow)}
|
||||
</span>
|
||||
<span className="font-medium">{getRequiredSteps(workflow)}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-500 flex items-center">
|
||||
<FaClock className="w-4 h-4 mr-1" />
|
||||
Maks. Süre
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
{getMaxTimeout(workflow)} gün
|
||||
</span>
|
||||
<span className="font-medium">{getMaxTimeout(workflow)} gün</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-500">Son Güncelleme</span>
|
||||
<span className="font-medium">
|
||||
{workflow.lastModificationTime.toLocaleDateString("tr-TR")}
|
||||
{workflow.lastModificationTime.toLocaleDateString('tr-TR')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -222,17 +208,13 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
workflow.isActive
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
workflow.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}`}
|
||||
>
|
||||
{workflow.isActive ? "Aktif" : "Pasif"}
|
||||
{workflow.isActive ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
{workflow.approvalLevels.some(
|
||||
(level) => level.isParallel
|
||||
) && (
|
||||
{workflow.approvalLevels.some((level) => level.isParallel) && (
|
||||
<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded flex items-center">
|
||||
<FaCodeBranch className="w-3 h-3 mr-1" />
|
||||
Paralel Onay
|
||||
|
|
@ -246,12 +228,9 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
{filteredWorkflows.length === 0 && (
|
||||
<div className="text-center py-6">
|
||||
<FaCodeBranch className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||||
Onay süreci bulunamadı
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-2">Onay süreci bulunamadı</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Arama kriterlerinizi değiştirin veya yeni bir onay süreci
|
||||
ekleyin.
|
||||
Arama kriterlerinizi değiştirin veya yeni bir onay süreci ekleyin.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -259,9 +238,7 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
|
||||
{/* Workflow Details */}
|
||||
<div className="space-y-3 pt-2">
|
||||
<h3 className="text-base font-semibold text-gray-900">
|
||||
Onay Adımları
|
||||
</h3>
|
||||
<h3 className="text-base font-semibold text-gray-900">Onay Adımları</h3>
|
||||
{selectedWorkflow ? (
|
||||
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-3">
|
||||
<div className="mb-3">
|
||||
|
|
@ -270,16 +247,9 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
</h4>
|
||||
<div className="grid grid-cols-2 gap-1 text-xs text-gray-600 mb-2">
|
||||
<div>Departman: {selectedWorkflow.departmentId}</div>
|
||||
<div>
|
||||
Tür: {getRequestTypeText(selectedWorkflow.requestType)}
|
||||
</div>
|
||||
<div>
|
||||
Tutar Limiti: ₺
|
||||
{selectedWorkflow.amountThreshold.toLocaleString()}
|
||||
</div>
|
||||
<div>
|
||||
Durum: {selectedWorkflow.isActive ? "Aktif" : "Pasif"}
|
||||
</div>
|
||||
<div>Tür: {getRequestTypeText(selectedWorkflow.requestType)}</div>
|
||||
<div>Tutar Limiti: ₺{selectedWorkflow.amountThreshold.toLocaleString()}</div>
|
||||
<div>Durum: {selectedWorkflow.isActive ? 'Aktif' : 'Pasif'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -287,10 +257,7 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
{selectedWorkflow.approvalLevels
|
||||
.sort((a, b) => a.sequence - b.sequence)
|
||||
.map((level, index) => (
|
||||
<div
|
||||
key={level.id}
|
||||
className="border border-gray-200 rounded-lg p-2"
|
||||
>
|
||||
<div key={level.id} className="border border-gray-200 rounded-lg p-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">
|
||||
|
|
@ -298,7 +265,7 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
</span>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getApprovalLevelColor(
|
||||
level.level
|
||||
level.level,
|
||||
)}`}
|
||||
>
|
||||
{getApprovalLevelText(level.level)}
|
||||
|
|
@ -323,15 +290,10 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="text-xs">
|
||||
<div className="font-medium text-gray-900 mb-1">
|
||||
Onaylayanlar:
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 mb-1">Onaylayanlar:</div>
|
||||
<div className="space-y-1">
|
||||
{level.approverNames.map((name, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<div key={idx} className="flex items-center space-x-2">
|
||||
<FaUsers className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-gray-700">{name}</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
|
|
@ -388,6 +350,7 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Approval Workflow Modal */}
|
||||
<ApprovalWorkflowModal
|
||||
|
|
@ -397,8 +360,8 @@ const ApprovalWorkflows: React.FC = () => {
|
|||
workflow={editingWorkflow}
|
||||
mode={modalMode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApprovalWorkflows;
|
||||
export default ApprovalWorkflows
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
FaSearch,
|
||||
FaFilter,
|
||||
|
|
@ -9,14 +9,14 @@ import {
|
|||
FaBox,
|
||||
FaUser,
|
||||
FaFileAlt,
|
||||
} from "react-icons/fa";
|
||||
} from 'react-icons/fa'
|
||||
import {
|
||||
DeliveryStatusEnum,
|
||||
MmDelivery,
|
||||
MmGoodsReceipt,
|
||||
ReceiptStatusEnum,
|
||||
QualityStatusEnum,
|
||||
} from "../../../types/mm";
|
||||
} from '../../../types/mm'
|
||||
import {
|
||||
getConditionColor,
|
||||
getConditionText,
|
||||
|
|
@ -24,43 +24,34 @@ import {
|
|||
getRequestTypeText,
|
||||
getDeliveryStatusColor,
|
||||
getDeliveryStatusIcon,
|
||||
} from "../../../utils/erp";
|
||||
import { mockDeliveries } from "../../../mocks/mockDeliveries";
|
||||
import DeliveryTrackingModal from "./DeliveryTrackingModal";
|
||||
import Widget from "../../../components/common/Widget";
|
||||
} from '../../../utils/erp'
|
||||
import { mockDeliveries } from '../../../mocks/mockDeliveries'
|
||||
import DeliveryTrackingModal from './DeliveryTrackingModal'
|
||||
import Widget from '../../../components/common/Widget'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const DeliveryTracking: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<DeliveryStatusEnum | "all">(
|
||||
"all"
|
||||
);
|
||||
const [selectedDelivery, setSelectedDelivery] = useState<MmDelivery | null>(
|
||||
null
|
||||
);
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<DeliveryStatusEnum | 'all'>('all')
|
||||
const [selectedDelivery, setSelectedDelivery] = useState<MmDelivery | null>(null)
|
||||
|
||||
// Modal state
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [modalMode, setModalMode] = useState<"create" | "view" | "edit">(
|
||||
"view"
|
||||
);
|
||||
const [selectedReceipt, setSelectedReceipt] = useState<MmGoodsReceipt | null>(
|
||||
null
|
||||
);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('view')
|
||||
const [selectedReceipt, setSelectedReceipt] = useState<MmGoodsReceipt | null>(null)
|
||||
|
||||
// Mock data - replace with actual API calls
|
||||
const [deliveries] = useState<MmDelivery[]>(mockDeliveries);
|
||||
const [deliveries] = useState<MmDelivery[]>(mockDeliveries)
|
||||
|
||||
// Convert Delivery to GoodsReceipt for modal compatibility
|
||||
const convertDeliveryToGoodsReceipt = (
|
||||
delivery: MmDelivery
|
||||
): MmGoodsReceipt => {
|
||||
const convertDeliveryToGoodsReceipt = (delivery: MmDelivery): MmGoodsReceipt => {
|
||||
return {
|
||||
id: delivery.id,
|
||||
receiptNumber: delivery.deliveryNumber,
|
||||
orderId: delivery.orderNumber,
|
||||
receiptDate: delivery.actualDeliveryDate || delivery.expectedDeliveryDate,
|
||||
receivedBy: delivery.receivedBy || "",
|
||||
warehouseId: "WH001", // Default warehouse, could be mapped from delivery
|
||||
receivedBy: delivery.receivedBy || '',
|
||||
warehouseId: 'WH001', // Default warehouse, could be mapped from delivery
|
||||
status:
|
||||
delivery.status === DeliveryStatusEnum.Delivered
|
||||
? ReceiptStatusEnum.Completed
|
||||
|
|
@ -74,100 +65,84 @@ const DeliveryTracking: React.FC = () => {
|
|||
receivedQuantity: item.deliveredQuantity,
|
||||
acceptedQuantity: item.deliveredQuantity,
|
||||
rejectedQuantity: 0,
|
||||
lotNumber: "",
|
||||
lotNumber: '',
|
||||
expiryDate: undefined,
|
||||
qualityStatus:
|
||||
item.condition === "Good"
|
||||
item.condition === 'Good'
|
||||
? QualityStatusEnum.Approved
|
||||
: item.condition === "Damaged"
|
||||
: item.condition === 'Damaged'
|
||||
? QualityStatusEnum.Rejected
|
||||
: QualityStatusEnum.Pending,
|
||||
storageLocation: undefined,
|
||||
})),
|
||||
creationTime: new Date(),
|
||||
lastModificationTime: new Date(),
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const handleViewDelivery = (delivery: MmDelivery) => {
|
||||
const receipt = convertDeliveryToGoodsReceipt(delivery);
|
||||
setSelectedReceipt(receipt);
|
||||
setModalMode("view");
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const receipt = convertDeliveryToGoodsReceipt(delivery)
|
||||
setSelectedReceipt(receipt)
|
||||
setModalMode('view')
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
const handleEditDelivery = (delivery: MmDelivery) => {
|
||||
const receipt = convertDeliveryToGoodsReceipt(delivery);
|
||||
setSelectedReceipt(receipt);
|
||||
setModalMode("edit");
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const receipt = convertDeliveryToGoodsReceipt(delivery)
|
||||
setSelectedReceipt(receipt)
|
||||
setModalMode('edit')
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
const handleSaveReceipt = (receipt: MmGoodsReceipt) => {
|
||||
// Handle saving the receipt
|
||||
// This would typically involve API calls to update the backend
|
||||
console.log("Saving receipt:", receipt);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
console.log('Saving receipt:', receipt)
|
||||
setIsModalOpen(false)
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setSelectedReceipt(null);
|
||||
};
|
||||
setIsModalOpen(false)
|
||||
setSelectedReceipt(null)
|
||||
}
|
||||
|
||||
const filteredDeliveries = deliveries.filter((delivery) => {
|
||||
const matchesSearch =
|
||||
delivery.deliveryNumber
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()) ||
|
||||
delivery.deliveryNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
delivery.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
delivery.supplierName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(delivery.trackingNumber &&
|
||||
delivery.trackingNumber
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()));
|
||||
const matchesStatus =
|
||||
statusFilter === "all" || delivery.status === statusFilter;
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
delivery.trackingNumber.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
const matchesStatus = statusFilter === 'all' || delivery.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
const isDelayed = (delivery: MmDelivery) => {
|
||||
const today = new Date();
|
||||
return (
|
||||
delivery.expectedDeliveryDate < today && !delivery.actualDeliveryDate
|
||||
);
|
||||
};
|
||||
const today = new Date()
|
||||
return delivery.expectedDeliveryDate < today && !delivery.actualDeliveryDate
|
||||
}
|
||||
|
||||
const getDaysDelay = (delivery: MmDelivery) => {
|
||||
if (!isDelayed(delivery)) return 0;
|
||||
const today = new Date();
|
||||
const diffTime = today.getTime() - delivery.expectedDeliveryDate.getTime();
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
};
|
||||
if (!isDelayed(delivery)) return 0
|
||||
const today = new Date()
|
||||
const diffTime = today.getTime() - delivery.expectedDeliveryDate.getTime()
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
}
|
||||
|
||||
const getDeliveryProgress = (delivery: MmDelivery) => {
|
||||
const totalQuantity = delivery.items.reduce(
|
||||
(sum, item) => sum + item.orderedQuantity,
|
||||
0
|
||||
);
|
||||
const deliveredQuantity = delivery.items.reduce(
|
||||
(sum, item) => sum + item.deliveredQuantity,
|
||||
0
|
||||
);
|
||||
return totalQuantity > 0
|
||||
? Math.round((deliveredQuantity / totalQuantity) * 100)
|
||||
: 0;
|
||||
};
|
||||
const totalQuantity = delivery.items.reduce((sum, item) => sum + item.orderedQuantity, 0)
|
||||
const deliveredQuantity = delivery.items.reduce((sum, item) => sum + item.deliveredQuantity, 0)
|
||||
return totalQuantity > 0 ? Math.round((deliveredQuantity / totalQuantity) * 100) : 0
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Teslimat Takibi</h2>
|
||||
<p className="text-gray-600">
|
||||
Sipariş teslimatlarını takip edin ve yönetin
|
||||
</p>
|
||||
<p className="text-gray-600">Sipariş teslimatlarını takip edin ve yönetin</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -181,7 +156,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
DeliveryStatusEnum.InTransit,
|
||||
DeliveryStatusEnum.OutForDelivery,
|
||||
DeliveryStatusEnum.Shipped,
|
||||
].includes(d.status)
|
||||
].includes(d.status),
|
||||
).length
|
||||
}
|
||||
color="blue"
|
||||
|
|
@ -190,10 +165,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
|
||||
<Widget
|
||||
title="Teslim Edildi"
|
||||
value={
|
||||
deliveries.filter((d) => d.status === DeliveryStatusEnum.Delivered)
|
||||
.length
|
||||
}
|
||||
value={deliveries.filter((d) => d.status === DeliveryStatusEnum.Delivered).length}
|
||||
color="green"
|
||||
icon="FaCheckCircle"
|
||||
/>
|
||||
|
|
@ -201,9 +173,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
<Widget
|
||||
title="Kısmi Teslim"
|
||||
value={
|
||||
deliveries.filter(
|
||||
(d) => d.status === DeliveryStatusEnum.PartiallyDelivered
|
||||
).length
|
||||
deliveries.filter((d) => d.status === DeliveryStatusEnum.PartiallyDelivered).length
|
||||
}
|
||||
color="orange"
|
||||
icon="FaExclamationTriangle"
|
||||
|
|
@ -212,9 +182,8 @@ const DeliveryTracking: React.FC = () => {
|
|||
<Widget
|
||||
title="Gecikmeli"
|
||||
value={
|
||||
deliveries.filter(
|
||||
(d) => d.status === DeliveryStatusEnum.Delayed || isDelayed(d)
|
||||
).length
|
||||
deliveries.filter((d) => d.status === DeliveryStatusEnum.Delayed || isDelayed(d))
|
||||
.length
|
||||
}
|
||||
color="teal"
|
||||
icon="FaClock"
|
||||
|
|
@ -237,9 +206,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
<FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) =>
|
||||
setStatusFilter(e.target.value as DeliveryStatusEnum | "all")
|
||||
}
|
||||
onChange={(e) => setStatusFilter(e.target.value as DeliveryStatusEnum | 'all')}
|
||||
className="pl-10 pr-4 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
>
|
||||
<option value="all">Tüm Durumlar</option>
|
||||
|
|
@ -248,9 +215,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
<option value={DeliveryStatusEnum.InTransit}>Yolda</option>
|
||||
<option value={DeliveryStatusEnum.OutForDelivery}>Dağıtımda</option>
|
||||
<option value={DeliveryStatusEnum.Delivered}>Teslim Edildi</option>
|
||||
<option value={DeliveryStatusEnum.PartiallyDelivered}>
|
||||
Kısmi Teslim
|
||||
</option>
|
||||
<option value={DeliveryStatusEnum.PartiallyDelivered}>Kısmi Teslim</option>
|
||||
<option value={DeliveryStatusEnum.Delayed}>Gecikmeli</option>
|
||||
<option value={DeliveryStatusEnum.Returned}>İade Edildi</option>
|
||||
<option value={DeliveryStatusEnum.Cancelled}>İptal Edildi</option>
|
||||
|
|
@ -266,9 +231,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
<div
|
||||
key={delivery.id}
|
||||
className={`bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer ${
|
||||
selectedDelivery?.id === delivery.id
|
||||
? "ring-2 ring-blue-500"
|
||||
: ""
|
||||
selectedDelivery?.id === delivery.id ? 'ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
onClick={() => setSelectedDelivery(delivery)}
|
||||
>
|
||||
|
|
@ -280,7 +243,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
</h4>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getDeliveryStatusColor(
|
||||
delivery.status
|
||||
delivery.status,
|
||||
)}`}
|
||||
>
|
||||
{getDeliveryStatusIcon(delivery.status)}
|
||||
|
|
@ -292,12 +255,8 @@ const DeliveryTracking: React.FC = () => {
|
|||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-1">
|
||||
Sipariş: {delivery.orderNumber}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{delivery.supplierName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 mb-1">Sipariş: {delivery.orderNumber}</p>
|
||||
<p className="text-sm text-gray-600">{delivery.supplierName}</p>
|
||||
{delivery.trackingNumber && (
|
||||
<p className="text-xs text-blue-600 mt-1">
|
||||
Takip No: {delivery.trackingNumber}
|
||||
|
|
@ -327,17 +286,15 @@ const DeliveryTracking: React.FC = () => {
|
|||
<span className="text-gray-500">Beklenen Tarih</span>
|
||||
<p
|
||||
className={`font-medium ${
|
||||
isDelayed(delivery) ? "text-red-600" : "text-gray-900"
|
||||
isDelayed(delivery) ? 'text-red-600' : 'text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{delivery.expectedDeliveryDate.toLocaleDateString("tr-TR")}
|
||||
{delivery.expectedDeliveryDate.toLocaleDateString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Teslimat Durumu</span>
|
||||
<p className="font-medium text-gray-900">
|
||||
{getDeliveryProgress(delivery)}%
|
||||
</p>
|
||||
<p className="font-medium text-gray-900">{getDeliveryProgress(delivery)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -347,13 +304,12 @@ const DeliveryTracking: React.FC = () => {
|
|||
<div
|
||||
className={`h-2 rounded-full transition-all duration-300 ${
|
||||
delivery.status === DeliveryStatusEnum.Delivered
|
||||
? "bg-green-600"
|
||||
: delivery.status ===
|
||||
DeliveryStatusEnum.PartiallyDelivered
|
||||
? "bg-orange-600"
|
||||
? 'bg-green-600'
|
||||
: delivery.status === DeliveryStatusEnum.PartiallyDelivered
|
||||
? 'bg-orange-600'
|
||||
: delivery.status === DeliveryStatusEnum.Delayed
|
||||
? "bg-red-600"
|
||||
: "bg-blue-600"
|
||||
? 'bg-red-600'
|
||||
: 'bg-blue-600'
|
||||
}`}
|
||||
style={{ width: `${getDeliveryProgress(delivery)}%` }}
|
||||
></div>
|
||||
|
|
@ -365,9 +321,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
<FaMapMarkerAlt className="w-3 h-3" />
|
||||
<span>{getRequestTypeText(delivery.requestType)}</span>
|
||||
</div>
|
||||
{delivery.courierCompany && (
|
||||
<span>{delivery.courierCompany}</span>
|
||||
)}
|
||||
{delivery.courierCompany && <span>{delivery.courierCompany}</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -375,21 +329,15 @@ const DeliveryTracking: React.FC = () => {
|
|||
{filteredDeliveries.length === 0 && (
|
||||
<div className="text-center py-6">
|
||||
<FaTruck className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-base font-medium text-gray-900 mb-2">
|
||||
Teslimat bulunamadı
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Arama kriterlerinizi değiştirin.
|
||||
</p>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-2">Teslimat bulunamadı</h3>
|
||||
<p className="text-sm text-gray-500">Arama kriterlerinizi değiştirin.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Delivery Details */}
|
||||
<div className="space-y-3 pt-2">
|
||||
<h3 className="text-base font-semibold text-gray-900">
|
||||
Teslimat Detayları
|
||||
</h3>
|
||||
<h3 className="text-base font-semibold text-gray-900">Teslimat Detayları</h3>
|
||||
{selectedDelivery ? (
|
||||
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-4">
|
||||
<div className="mb-4">
|
||||
|
|
@ -399,45 +347,35 @@ const DeliveryTracking: React.FC = () => {
|
|||
</h4>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-sm font-medium flex items-center space-x-1 ${getDeliveryStatusColor(
|
||||
selectedDelivery.status
|
||||
selectedDelivery.status,
|
||||
)}`}
|
||||
>
|
||||
{getDeliveryStatusIcon(selectedDelivery.status)}
|
||||
<span>
|
||||
{getDeliveryStatusText(selectedDelivery.status)}
|
||||
</span>
|
||||
<span>{getDeliveryStatusText(selectedDelivery.status)}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 text-xs mb-3">
|
||||
<div>
|
||||
<span className="text-gray-500">Sipariş No:</span>
|
||||
<p className="font-medium">
|
||||
{selectedDelivery.orderNumber}
|
||||
</p>
|
||||
<p className="font-medium">{selectedDelivery.orderNumber}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Tedarikçi:</span>
|
||||
<p className="font-medium">
|
||||
{selectedDelivery.supplierName}
|
||||
</p>
|
||||
<p className="font-medium">{selectedDelivery.supplierName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Beklenen Tarih:</span>
|
||||
<p className="font-medium">
|
||||
{selectedDelivery.expectedDeliveryDate.toLocaleDateString(
|
||||
"tr-TR"
|
||||
)}
|
||||
{selectedDelivery.expectedDeliveryDate.toLocaleDateString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Gerçek Tarih:</span>
|
||||
<p className="font-medium">
|
||||
{selectedDelivery.actualDeliveryDate
|
||||
? selectedDelivery.actualDeliveryDate.toLocaleDateString(
|
||||
"tr-TR"
|
||||
)
|
||||
: "Henüz teslim edilmedi"}
|
||||
? selectedDelivery.actualDeliveryDate.toLocaleDateString('tr-TR')
|
||||
: 'Henüz teslim edilmedi'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -446,17 +384,13 @@ const DeliveryTracking: React.FC = () => {
|
|||
<div className="mb-3 p-2 bg-blue-50 rounded-lg text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-gray-600">
|
||||
Kargo Takip No:
|
||||
</span>
|
||||
<span className="text-sm text-gray-600">Kargo Takip No:</span>
|
||||
<p className="font-medium text-blue-900">
|
||||
{selectedDelivery.trackingNumber}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-600">
|
||||
Kargo Şirketi:
|
||||
</span>
|
||||
<span className="text-sm text-gray-600">Kargo Şirketi:</span>
|
||||
<p className="font-medium text-blue-900">
|
||||
{selectedDelivery.courierCompany}
|
||||
</p>
|
||||
|
|
@ -481,36 +415,25 @@ const DeliveryTracking: React.FC = () => {
|
|||
<FaUser className="w-4 h-4 mr-1" />
|
||||
Teslim Alan:
|
||||
</span>
|
||||
<p className="text-xs text-gray-900">
|
||||
{selectedDelivery.receivedBy}
|
||||
</p>
|
||||
<p className="text-xs text-gray-900">{selectedDelivery.receivedBy}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div className="mb-4">
|
||||
<h5 className="font-medium text-gray-900 mb-3">
|
||||
Teslimat Kalemleri
|
||||
</h5>
|
||||
<h5 className="font-medium text-gray-900 mb-3">Teslimat Kalemleri</h5>
|
||||
<div className="space-y-2">
|
||||
{selectedDelivery.items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border border-gray-200 rounded-lg p-2"
|
||||
>
|
||||
<div key={item.id} className="border border-gray-200 rounded-lg p-2">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1">
|
||||
<h6 className="font-medium text-gray-900">
|
||||
{item.material?.name}
|
||||
</h6>
|
||||
<p className="text-sm text-gray-600">
|
||||
{item.material?.id}
|
||||
</p>
|
||||
<h6 className="font-medium text-gray-900">{item.material?.name}</h6>
|
||||
<p className="text-sm text-gray-600">{item.material?.id}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getConditionColor(
|
||||
item.condition
|
||||
item.condition,
|
||||
)}`}
|
||||
>
|
||||
{getConditionText(item.condition)}
|
||||
|
|
@ -533,8 +456,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
<div>
|
||||
<span className="text-gray-500">Kalan:</span>
|
||||
<p className="font-medium">
|
||||
{item.orderedQuantity - item.deliveredQuantity}{" "}
|
||||
{item.unit}
|
||||
{item.orderedQuantity - item.deliveredQuantity} {item.unit}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -551,12 +473,8 @@ const DeliveryTracking: React.FC = () => {
|
|||
|
||||
{selectedDelivery.notes && (
|
||||
<div className="mb-3 p-2 bg-yellow-50 rounded-lg">
|
||||
<span className="text-sm text-gray-600 font-medium">
|
||||
Genel Notlar:
|
||||
</span>
|
||||
<p className="text-sm text-gray-900 mt-1">
|
||||
{selectedDelivery.notes}
|
||||
</p>
|
||||
<span className="text-sm text-gray-600 font-medium">Genel Notlar:</span>
|
||||
<p className="text-sm text-gray-900 mt-1">{selectedDelivery.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -568,10 +486,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
</span>
|
||||
<div className="space-y-1">
|
||||
{selectedDelivery.attachments.map((attachment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center space-x-2 text-sm"
|
||||
>
|
||||
<div key={index} className="flex items-center space-x-2 text-sm">
|
||||
<FaFileAlt className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-blue-600 hover:underline cursor-pointer">
|
||||
{attachment}
|
||||
|
|
@ -595,6 +510,7 @@ const DeliveryTracking: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delivery Tracking Modal */}
|
||||
<DeliveryTrackingModal
|
||||
|
|
@ -604,8 +520,8 @@ const DeliveryTracking: React.FC = () => {
|
|||
receipt={selectedReceipt}
|
||||
mode={modalMode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeliveryTracking;
|
||||
export default DeliveryTracking
|
||||
|
|
|
|||
|
|
@ -1,25 +1,18 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
FaTimes,
|
||||
FaSave,
|
||||
FaTruck,
|
||||
FaMapMarkerAlt,
|
||||
FaCalendar,
|
||||
FaBox,
|
||||
} from "react-icons/fa";
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { FaTimes, FaSave, FaTruck, FaMapMarkerAlt, FaCalendar, FaBox } from 'react-icons/fa'
|
||||
import {
|
||||
MmGoodsReceipt,
|
||||
ReceiptStatusEnum,
|
||||
QualityStatusEnum,
|
||||
MmGoodsReceiptItem,
|
||||
} from "../../../types/mm";
|
||||
} from '../../../types/mm'
|
||||
|
||||
interface DeliveryTrackingModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (receipt: MmGoodsReceipt) => void;
|
||||
receipt?: MmGoodsReceipt | null;
|
||||
mode: "create" | "view" | "edit";
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSave: (receipt: MmGoodsReceipt) => void
|
||||
receipt?: MmGoodsReceipt | null
|
||||
mode: 'create' | 'view' | 'edit'
|
||||
}
|
||||
|
||||
const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
||||
|
|
@ -30,123 +23,114 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
mode,
|
||||
}) => {
|
||||
const [formData, setFormData] = useState<Partial<MmGoodsReceipt>>({
|
||||
receiptNumber: "",
|
||||
orderId: "",
|
||||
receiptNumber: '',
|
||||
orderId: '',
|
||||
receiptDate: new Date(),
|
||||
receivedBy: "",
|
||||
warehouseId: "",
|
||||
receivedBy: '',
|
||||
warehouseId: '',
|
||||
status: ReceiptStatusEnum.Pending,
|
||||
notes: "",
|
||||
notes: '',
|
||||
items: [],
|
||||
});
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === "create") {
|
||||
if (mode === 'create') {
|
||||
// Reset form to initial empty state for new goods receipt
|
||||
setFormData({
|
||||
receiptNumber: "",
|
||||
orderId: "",
|
||||
receiptNumber: '',
|
||||
orderId: '',
|
||||
receiptDate: new Date(),
|
||||
receivedBy: "",
|
||||
warehouseId: "",
|
||||
receivedBy: '',
|
||||
warehouseId: '',
|
||||
status: ReceiptStatusEnum.Pending,
|
||||
notes: "",
|
||||
notes: '',
|
||||
items: [],
|
||||
});
|
||||
})
|
||||
} else if (receipt) {
|
||||
// Load existing receipt data for view/edit modes
|
||||
setFormData(receipt);
|
||||
setFormData(receipt)
|
||||
}
|
||||
}, [receipt, mode]);
|
||||
}, [receipt, mode])
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||||
>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const { name, value, type } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
type === "number"
|
||||
? parseFloat(value) || 0
|
||||
: type === "date"
|
||||
? new Date(value)
|
||||
: value,
|
||||
}));
|
||||
};
|
||||
type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
|
||||
}))
|
||||
}
|
||||
|
||||
const addReceiptItem = () => {
|
||||
const newItem: MmGoodsReceiptItem = {
|
||||
id: `item-${Date.now()}`,
|
||||
receiptId: formData.id || "",
|
||||
orderItemId: "",
|
||||
materialId: "",
|
||||
receiptId: formData.id || '',
|
||||
orderItemId: '',
|
||||
materialId: '',
|
||||
receivedQuantity: 0,
|
||||
acceptedQuantity: 0,
|
||||
rejectedQuantity: 0,
|
||||
qualityStatus: QualityStatusEnum.Pending,
|
||||
};
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: [...(prev.items || []), newItem],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const removeReceiptItem = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: prev.items?.filter((_, i) => i !== index) || [],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const updateReceiptItem = (
|
||||
index: number,
|
||||
field: keyof MmGoodsReceiptItem,
|
||||
value: string | number | QualityStatusEnum | Date | undefined
|
||||
value: string | number | QualityStatusEnum | Date | undefined,
|
||||
) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items:
|
||||
prev.items?.map((item, i) =>
|
||||
i === index ? { ...item, [field]: value } : item
|
||||
) || [],
|
||||
}));
|
||||
};
|
||||
items: prev.items?.map((item, i) => (i === index ? { ...item, [field]: value } : item)) || [],
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (mode !== "view") {
|
||||
e.preventDefault()
|
||||
if (mode !== 'view') {
|
||||
const newReceipt: MmGoodsReceipt = {
|
||||
id: receipt?.id || `GR-${Date.now()}`,
|
||||
receiptNumber:
|
||||
formData.receiptNumber ||
|
||||
`GR-${new Date().getFullYear()}-${Date.now().toString().slice(-3)}`,
|
||||
orderId: formData.orderId || "",
|
||||
orderId: formData.orderId || '',
|
||||
receiptDate: formData.receiptDate || new Date(),
|
||||
receivedBy: formData.receivedBy || "",
|
||||
warehouseId: formData.warehouseId || "",
|
||||
receivedBy: formData.receivedBy || '',
|
||||
warehouseId: formData.warehouseId || '',
|
||||
status: formData.status || ReceiptStatusEnum.Pending,
|
||||
notes: formData.notes,
|
||||
items: formData.items || [],
|
||||
creationTime: receipt?.creationTime || new Date(),
|
||||
lastModificationTime: new Date(),
|
||||
};
|
||||
onSave(newReceipt);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
onSave(newReceipt)
|
||||
}
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null;
|
||||
if (!isOpen) return null
|
||||
|
||||
const isReadOnly = mode === "view";
|
||||
const isReadOnly = mode === 'view'
|
||||
const modalTitle =
|
||||
mode === "create"
|
||||
? "Yeni Teslimat Takibi"
|
||||
: mode === "edit"
|
||||
? "Teslimat Takibini Düzenle"
|
||||
: "Teslimat Takibi Detayları";
|
||||
mode === 'create'
|
||||
? 'Yeni Teslimat Takibi'
|
||||
: mode === 'edit'
|
||||
? 'Teslimat Takibini Düzenle'
|
||||
: 'Teslimat Takibi Detayları'
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
|
|
@ -156,10 +140,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
<FaTruck className="mr-2 text-blue-600" />
|
||||
{modalTitle}
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 p-1"
|
||||
>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-1">
|
||||
<FaTimes />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -174,13 +155,11 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</h4>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Giriş Numarası
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Giriş Numarası</label>
|
||||
<input
|
||||
type="text"
|
||||
name="receiptNumber"
|
||||
value={formData.receiptNumber || ""}
|
||||
value={formData.receiptNumber || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -189,13 +168,11 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Sipariş ID
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Sipariş ID</label>
|
||||
<input
|
||||
type="text"
|
||||
name="orderId"
|
||||
value={formData.orderId || ""}
|
||||
value={formData.orderId || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -213,10 +190,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
name="receiptDate"
|
||||
value={
|
||||
formData.receiptDate
|
||||
? new Date(formData.receiptDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.receiptDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -225,13 +200,11 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Teslim Alan
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Teslim Alan</label>
|
||||
<input
|
||||
type="text"
|
||||
name="receivedBy"
|
||||
value={formData.receivedBy || ""}
|
||||
value={formData.receivedBy || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -246,7 +219,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</label>
|
||||
<select
|
||||
name="warehouseId"
|
||||
value={formData.warehouseId || ""}
|
||||
value={formData.warehouseId || ''}
|
||||
onChange={handleInputChange}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -261,9 +234,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Durum
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Durum</label>
|
||||
<select
|
||||
name="status"
|
||||
value={formData.status || ReceiptStatusEnum.Pending}
|
||||
|
|
@ -273,20 +244,16 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
>
|
||||
<option value={ReceiptStatusEnum.Pending}>Beklemede</option>
|
||||
<option value={ReceiptStatusEnum.InProgress}>İşlemde</option>
|
||||
<option value={ReceiptStatusEnum.Completed}>
|
||||
Tamamlandı
|
||||
</option>
|
||||
<option value={ReceiptStatusEnum.Completed}>Tamamlandı</option>
|
||||
<option value={ReceiptStatusEnum.OnHold}>Bekletildi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Notlar
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Notlar</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
value={formData.notes || ""}
|
||||
value={formData.notes || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
rows={2}
|
||||
|
|
@ -315,14 +282,9 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
|
||||
<div className="space-y-2 max-h-72 overflow-y-auto p-1">
|
||||
{formData.items?.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border rounded-lg p-2 bg-gray-50"
|
||||
>
|
||||
<div key={item.id} className="border rounded-lg p-2 bg-gray-50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Kalem {index + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -342,13 +304,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
<input
|
||||
type="text"
|
||||
value={item.materialId}
|
||||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"materialId",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onChange={(e) => updateReceiptItem(index, 'materialId', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -361,13 +317,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
<input
|
||||
type="text"
|
||||
value={item.orderItemId}
|
||||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"orderItemId",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onChange={(e) => updateReceiptItem(index, 'orderItemId', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -383,8 +333,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"receivedQuantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
'receivedQuantity',
|
||||
parseFloat(e.target.value) || 0,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -404,8 +354,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"acceptedQuantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
'acceptedQuantity',
|
||||
parseFloat(e.target.value) || 0,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -425,8 +375,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"rejectedQuantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
'rejectedQuantity',
|
||||
parseFloat(e.target.value) || 0,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -445,25 +395,17 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"qualityStatus",
|
||||
e.target.value as QualityStatusEnum
|
||||
'qualityStatus',
|
||||
e.target.value as QualityStatusEnum,
|
||||
)
|
||||
}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value={QualityStatusEnum.Pending}>
|
||||
Beklemede
|
||||
</option>
|
||||
<option value={QualityStatusEnum.Approved}>
|
||||
Kabul
|
||||
</option>
|
||||
<option value={QualityStatusEnum.Rejected}>
|
||||
Red
|
||||
</option>
|
||||
<option value={QualityStatusEnum.Conditional}>
|
||||
Koşullu
|
||||
</option>
|
||||
<option value={QualityStatusEnum.Pending}>Beklemede</option>
|
||||
<option value={QualityStatusEnum.Approved}>Kabul</option>
|
||||
<option value={QualityStatusEnum.Rejected}>Red</option>
|
||||
<option value={QualityStatusEnum.Conditional}>Koşullu</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -473,14 +415,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.lotNumber || ""}
|
||||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"lotNumber",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
value={item.lotNumber || ''}
|
||||
onChange={(e) => updateReceiptItem(index, 'lotNumber', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -494,18 +430,14 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
type="date"
|
||||
value={
|
||||
item.expiryDate
|
||||
? new Date(item.expiryDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(item.expiryDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={(e) =>
|
||||
updateReceiptItem(
|
||||
index,
|
||||
"expiryDate",
|
||||
e.target.value
|
||||
? new Date(e.target.value)
|
||||
: undefined
|
||||
'expiryDate',
|
||||
e.target.value ? new Date(e.target.value) : undefined,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -532,9 +464,9 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
onClick={onClose}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
{mode === "view" ? "Kapat" : "İptal"}
|
||||
{mode === 'view' ? 'Kapat' : 'İptal'}
|
||||
</button>
|
||||
{mode !== "view" && (
|
||||
{mode !== 'view' && (
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm"
|
||||
|
|
@ -547,7 +479,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default DeliveryTrackingModal;
|
||||
export default DeliveryTrackingModal
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
FaBox,
|
||||
FaFileAlt,
|
||||
|
|
@ -10,54 +10,54 @@ import {
|
|||
FaArrowsAltH,
|
||||
FaWarehouse,
|
||||
FaSitemap,
|
||||
} from "react-icons/fa";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { mockMaterials } from "../../../mocks/mockMaterials";
|
||||
import classNames from "classnames";
|
||||
import { InfoItem, InfoSection } from "../../../components/common/InfoSection";
|
||||
} from 'react-icons/fa'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { mockMaterials } from '../../../mocks/mockMaterials'
|
||||
import classNames from 'classnames'
|
||||
import { InfoItem, InfoSection } from '../../../components/common/InfoSection'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const MaterialCard: React.FC = () => {
|
||||
const { id } = useParams();
|
||||
const material = mockMaterials.find((m) => m.id === id)!;
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams()
|
||||
const material = mockMaterials.find((m) => m.id === id)!
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
| "basic"
|
||||
| "pricing"
|
||||
| "specifications"
|
||||
| "alternativeUnits"
|
||||
| "suppliers"
|
||||
| "stockLevels"
|
||||
| "variants"
|
||||
>("basic");
|
||||
| 'basic'
|
||||
| 'pricing'
|
||||
| 'specifications'
|
||||
| 'alternativeUnits'
|
||||
| 'suppliers'
|
||||
| 'stockLevels'
|
||||
| 'variants'
|
||||
>('basic')
|
||||
|
||||
if (!material) {
|
||||
return (
|
||||
<div className="text-center py-10">
|
||||
<h2 className="text-xl font-bold text-gray-700">Malzeme Bulunamadı</h2>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Belirtilen ID ile eşleşen bir malzeme bulunamadı.
|
||||
</p>
|
||||
<p className="text-gray-500 mt-2">Belirtilen ID ile eşleşen bir malzeme bulunamadı.</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: "basic", label: "Temel Bilgiler", icon: FaFileAlt },
|
||||
{ key: "pricing", label: "Fiyatlandırma", icon: FaDollarSign },
|
||||
{ key: "specifications", label: "Özellikler", icon: FaCog },
|
||||
{ key: 'basic', label: 'Temel Bilgiler', icon: FaFileAlt },
|
||||
{ key: 'pricing', label: 'Fiyatlandırma', icon: FaDollarSign },
|
||||
{ key: 'specifications', label: 'Özellikler', icon: FaCog },
|
||||
{
|
||||
key: "alternativeUnits",
|
||||
label: "Alternatif Birimler",
|
||||
key: 'alternativeUnits',
|
||||
label: 'Alternatif Birimler',
|
||||
icon: FaArrowsAltH,
|
||||
},
|
||||
{ key: "suppliers", label: "Tedarikçiler", icon: FaTruck },
|
||||
{ key: "stockLevels", label: "Stok Seviyeleri", icon: FaWarehouse },
|
||||
{ key: "variants", label: "Varyantlar", icon: FaSitemap },
|
||||
];
|
||||
{ key: 'suppliers', label: 'Tedarikçiler', icon: FaTruck },
|
||||
{ key: 'stockLevels', label: 'Stok Seviyeleri', icon: FaWarehouse },
|
||||
{ key: 'variants', label: 'Varyantlar', icon: FaSitemap },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="py-4 space-y-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2.5">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
|
||||
|
|
@ -66,26 +66,20 @@ const MaterialCard: React.FC = () => {
|
|||
<FaBox className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{material.code}
|
||||
</h2>
|
||||
<h2 className="text-2xl font-bold text-gray-900">{material.code}</h2>
|
||||
<p className="text-gray-600">{material.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1.5">
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/admin/supplychain/materials/edit/${material.id}`)
|
||||
}
|
||||
onClick={() => navigate(`/admin/supplychain/materials/edit/${material.id}`)}
|
||||
className="px-3 py-2 text-sm border border-gray-300 bg-white text-gray-700 rounded-md hover:bg-gray-50 transition-colors flex items-center"
|
||||
>
|
||||
<FaEdit size={14} className="mr-1.5 inline" />
|
||||
Düzenle
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/admin/warehouse/movements/${material.id}`)
|
||||
}
|
||||
onClick={() => navigate(`/admin/warehouse/movements/${material.id}`)}
|
||||
className="px-3 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center"
|
||||
>
|
||||
<FaEye size={14} className="mr-1.5 inline" />
|
||||
|
|
@ -101,7 +95,7 @@ const MaterialCard: React.FC = () => {
|
|||
<div className="min-w-max">
|
||||
<nav className="flex space-x-4 px-3 -mb-px">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const Icon = tab.icon
|
||||
return (
|
||||
<button
|
||||
key={tab.key}
|
||||
|
|
@ -109,48 +103,39 @@ const MaterialCard: React.FC = () => {
|
|||
onClick={() =>
|
||||
setActiveTab(
|
||||
tab.key as
|
||||
| "basic"
|
||||
| "pricing"
|
||||
| "specifications"
|
||||
| "alternativeUnits"
|
||||
| "suppliers"
|
||||
| "stockLevels"
|
||||
| "variants"
|
||||
| 'basic'
|
||||
| 'pricing'
|
||||
| 'specifications'
|
||||
| 'alternativeUnits'
|
||||
| 'suppliers'
|
||||
| 'stockLevels'
|
||||
| 'variants',
|
||||
)
|
||||
}
|
||||
className={classNames(
|
||||
"flex items-center py-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap",
|
||||
'flex items-center py-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap',
|
||||
activeTab === tab.key
|
||||
? "border-blue-500 text-blue-600"
|
||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
? 'border-blue-500 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
|
||||
)}
|
||||
>
|
||||
<Icon size={14} className="mr-2" />
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
{activeTab === "basic" && (
|
||||
{activeTab === 'basic' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<InfoSection title="Genel Bilgiler">
|
||||
<InfoItem
|
||||
label="Malzeme Türü"
|
||||
value={material.materialType?.name || "-"}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Malzeme Grubu"
|
||||
value={material.materialGroup?.name || "-"}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Temel Birim"
|
||||
value={material.baseUnit?.code || "-"}
|
||||
/>
|
||||
<InfoItem label="Barkod" value={material.barcode || "-"} />
|
||||
<InfoItem label="Malzeme Türü" value={material.materialType?.name || '-'} />
|
||||
<InfoItem label="Malzeme Grubu" value={material.materialGroup?.name || '-'} />
|
||||
<InfoItem label="Temel Birim" value={material.baseUnit?.code || '-'} />
|
||||
<InfoItem label="Barkod" value={material.barcode || '-'} />
|
||||
</InfoSection>
|
||||
|
||||
<InfoSection title="Takip Bilgileri">
|
||||
|
|
@ -159,59 +144,46 @@ const MaterialCard: React.FC = () => {
|
|||
value={material.trackingType}
|
||||
isBadge
|
||||
badgeColor={
|
||||
material.trackingType === "Quantity"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
material.trackingType === 'Quantity'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Oluşturma Tarihi"
|
||||
value={new Date(material.creationTime).toLocaleDateString(
|
||||
"tr-TR"
|
||||
)}
|
||||
value={new Date(material.creationTime).toLocaleDateString('tr-TR')}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Son Değişiklik"
|
||||
value={new Date(
|
||||
material.lastModificationTime
|
||||
).toLocaleDateString("tr-TR")}
|
||||
value={new Date(material.lastModificationTime).toLocaleDateString('tr-TR')}
|
||||
/>
|
||||
</InfoSection>
|
||||
|
||||
<InfoSection title="Durum">
|
||||
<InfoItem
|
||||
label="Aktiflik Durumu"
|
||||
value={material.isActive ? "Aktif" : "Pasif"}
|
||||
value={material.isActive ? 'Aktif' : 'Pasif'}
|
||||
isBadge
|
||||
badgeColor={
|
||||
material.isActive
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
material.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Açıklama"
|
||||
value={material.description || "-"}
|
||||
/>
|
||||
<InfoItem label="Açıklama" value={material.description || '-'} />
|
||||
</InfoSection>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "pricing" && (
|
||||
{activeTab === 'pricing' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<InfoSection title="Fiyatlandırma">
|
||||
<InfoItem
|
||||
label="Maliyet Fiyatı"
|
||||
value={`${material.costPrice.toLocaleString("tr-TR")} ${
|
||||
material.currency
|
||||
}`}
|
||||
value={`${material.costPrice.toLocaleString('tr-TR')} ${material.currency}`}
|
||||
isBold
|
||||
/>
|
||||
<InfoItem
|
||||
label="Satış Fiyatı"
|
||||
value={`${material.salesPrice.toLocaleString("tr-TR")} ${
|
||||
material.currency
|
||||
}`}
|
||||
value={`${material.salesPrice.toLocaleString('tr-TR')} ${material.currency}`}
|
||||
isBold
|
||||
/>
|
||||
<InfoItem label="Para Birimi" value={material.currency} />
|
||||
|
|
@ -219,10 +191,9 @@ const MaterialCard: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "alternativeUnits" && (
|
||||
{activeTab === 'alternativeUnits' && (
|
||||
<div>
|
||||
{material.alternativeUnits &&
|
||||
material.alternativeUnits.length > 0 ? (
|
||||
{material.alternativeUnits && material.alternativeUnits.length > 0 ? (
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
|
|
@ -248,7 +219,7 @@ const MaterialCard: React.FC = () => {
|
|||
{altUnit.conversionFactor}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{altUnit.isDefault ? "Evet" : "Hayır"}
|
||||
{altUnit.isDefault ? 'Evet' : 'Hayır'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -258,9 +229,7 @@ const MaterialCard: React.FC = () => {
|
|||
) : (
|
||||
<div className="text-center py-12">
|
||||
<FaCog className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">
|
||||
Alternatif birim
|
||||
</h3>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Alternatif birim</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Bu malzeme için henüz alternatif birim tanımlanmamış.
|
||||
</p>
|
||||
|
|
@ -269,7 +238,7 @@ const MaterialCard: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "specifications" && (
|
||||
{activeTab === 'specifications' && (
|
||||
<div>
|
||||
{material.specifications && material.specifications.length > 0 ? (
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
|
|
@ -300,17 +269,17 @@ const MaterialCard: React.FC = () => {
|
|||
{spec.specificationValue}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{spec.unitId || "-"}
|
||||
{spec.unitId || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
spec.isRequired
|
||||
? "bg-red-100 text-red-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
? 'bg-red-100 text-red-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}
|
||||
>
|
||||
{spec.isRequired ? "Zorunlu" : "İsteğe Bağlı"}
|
||||
{spec.isRequired ? 'Zorunlu' : 'İsteğe Bağlı'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -321,9 +290,7 @@ const MaterialCard: React.FC = () => {
|
|||
) : (
|
||||
<div className="text-center py-12">
|
||||
<FaCog className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">
|
||||
Özellik bulunamadı
|
||||
</h3>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Özellik bulunamadı</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Bu malzeme için henüz özellik tanımlanmamış.
|
||||
</p>
|
||||
|
|
@ -332,7 +299,7 @@ const MaterialCard: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "suppliers" && (
|
||||
{activeTab === 'suppliers' && (
|
||||
<div>
|
||||
{material.suppliers && material.suppliers.length > 0 ? (
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
|
|
@ -366,7 +333,7 @@ const MaterialCard: React.FC = () => {
|
|||
{item.supplier?.name}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.supplierMaterialCode || "-"}
|
||||
{item.supplierMaterialCode || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.leadTime}
|
||||
|
|
@ -375,18 +342,17 @@ const MaterialCard: React.FC = () => {
|
|||
{item.minimumOrderQuantity}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.price.toLocaleString("tr-TR")}{" "}
|
||||
{material.currency}
|
||||
{item.price.toLocaleString('tr-TR')} {material.currency}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
item.isPreferred
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}
|
||||
>
|
||||
{item.isPreferred ? "Aktif" : "Pasif"}
|
||||
{item.isPreferred ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -397,9 +363,7 @@ const MaterialCard: React.FC = () => {
|
|||
) : (
|
||||
<div className="text-center py-8 p-3">
|
||||
<FaTruck className="mx-auto h-8 w-8 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">
|
||||
Tedarikçi Yönetimi
|
||||
</h3>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Tedarikçi Yönetimi</h3>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Bu malzeme için henüz tedarikçi tanımlanmamış.
|
||||
</p>
|
||||
|
|
@ -408,7 +372,7 @@ const MaterialCard: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "stockLevels" && (
|
||||
{activeTab === 'stockLevels' && (
|
||||
<div>
|
||||
{material.stockLevels && material.stockLevels.length > 0 ? (
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
|
|
@ -445,13 +409,13 @@ const MaterialCard: React.FC = () => {
|
|||
{material.stockLevels.map((item) => (
|
||||
<tr key={item.id} className="text-xs">
|
||||
<td className="px-3 py-1.5 whitespace-nowrap font-medium text-gray-900">
|
||||
{item.warehouse?.name || "-"}
|
||||
{item.warehouse?.name || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.zone?.name || "-"}
|
||||
{item.zone?.name || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.location?.name || "-"}
|
||||
{item.location?.name || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.minimumStock}
|
||||
|
|
@ -459,9 +423,7 @@ const MaterialCard: React.FC = () => {
|
|||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.maximumStock}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
{item.reorderPoint}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">{item.reorderPoint}</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
{item.availableQuantity}
|
||||
</td>
|
||||
|
|
@ -476,9 +438,7 @@ const MaterialCard: React.FC = () => {
|
|||
) : (
|
||||
<div className="text-center py-8 p-3">
|
||||
<FaTruck className="mx-auto h-8 w-8 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">
|
||||
Stok Seviyeleri
|
||||
</h3>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Stok Seviyeleri</h3>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Stok seviyeleri için henüz veri bulunmamaktadır.
|
||||
</p>
|
||||
|
|
@ -487,7 +447,7 @@ const MaterialCard: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "variants" && (
|
||||
{activeTab === 'variants' && (
|
||||
<div>
|
||||
{material.variants && material.variants.length > 0 ? (
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
|
|
@ -512,16 +472,16 @@ const MaterialCard: React.FC = () => {
|
|||
{material.variants.map((item) => (
|
||||
<tr key={item.id} className="text-xs">
|
||||
<td className="px-3 py-1.5 whitespace-nowrap font-medium text-gray-900">
|
||||
{item.variantCode || "-"}
|
||||
{item.variantCode || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.variantName || "-"}
|
||||
{item.variantName || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.additionalCost.toLocaleString("tr-TR")}
|
||||
{item.additionalCost.toLocaleString('tr-TR')}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-gray-900">
|
||||
{item.isActive ? "Evet" : "Hayır"}
|
||||
{item.isActive ? 'Evet' : 'Hayır'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -531,9 +491,7 @@ const MaterialCard: React.FC = () => {
|
|||
) : (
|
||||
<div className="text-center py-8 p-3">
|
||||
<FaTruck className="mx-auto h-8 w-8 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">
|
||||
Varyantlar
|
||||
</h3>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Varyantlar</h3>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Varyantlar için henüz veri bulunmamaktadır.
|
||||
</p>
|
||||
|
|
@ -544,7 +502,8 @@ const MaterialCard: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default MaterialCard;
|
||||
export default MaterialCard
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@ import {
|
|||
} from 'react-icons/fa'
|
||||
import { mockMaterialGroups, populateParentGroups } from '../../../mocks/mockMaterialGroups'
|
||||
import { MmMaterialGroup } from '../../../types/mm'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
interface MaterialGroupNode extends MmMaterialGroup {
|
||||
children: MaterialGroupNode[]
|
||||
|
|
@ -98,7 +99,8 @@ const MaterialGroups: React.FC = () => {
|
|||
}, [filteredGroups])
|
||||
|
||||
return (
|
||||
<div className="space-y-3 py-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
{/* Title & Description */}
|
||||
|
|
@ -323,7 +325,12 @@ const MaterialGroups: React.FC = () => {
|
|||
{viewMode === 'tree' && (
|
||||
<div className="bg-white shadow-sm rounded-lg p-3">
|
||||
{groupTree.map((node) => (
|
||||
<GroupTreeNode key={node.id} node={node} onEdit={handleEdit} onDelete={handleDelete} />
|
||||
<GroupTreeNode
|
||||
key={node.id}
|
||||
node={node}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
{groupTree.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
|
|
@ -332,6 +339,7 @@ const MaterialGroups: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
|
|
@ -341,7 +349,7 @@ const MaterialGroups: React.FC = () => {
|
|||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
FaPlus,
|
||||
FaSearch,
|
||||
|
|
@ -11,220 +11,207 @@ import {
|
|||
FaExclamationTriangle,
|
||||
FaArchive,
|
||||
FaHeartbeat,
|
||||
} from "react-icons/fa";
|
||||
import Widget from "../../../components/common/Widget";
|
||||
import DataTable from "../../../components/common/DataTable";
|
||||
import LoadingSpinner from "../../../components/common/LoadingSpinner";
|
||||
import StatusBadge from "../../../components/common/StatusBadge";
|
||||
import { MmMaterial } from "../../../types/mm";
|
||||
import { mockMaterials } from "../../../mocks/mockMaterials";
|
||||
} from 'react-icons/fa'
|
||||
import Widget from '../../../components/common/Widget'
|
||||
import DataTable from '../../../components/common/DataTable'
|
||||
import LoadingSpinner from '../../../components/common/LoadingSpinner'
|
||||
import StatusBadge from '../../../components/common/StatusBadge'
|
||||
import { MmMaterial } from '../../../types/mm'
|
||||
import { mockMaterials } from '../../../mocks/mockMaterials'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
export interface MaterialSearchFilters {
|
||||
materialCode?: string;
|
||||
description?: string;
|
||||
materialTypeId?: string;
|
||||
materialGroupId?: string;
|
||||
isActive?: boolean;
|
||||
hasStock?: boolean;
|
||||
materialCode?: string
|
||||
description?: string
|
||||
materialTypeId?: string
|
||||
materialGroupId?: string
|
||||
isActive?: boolean
|
||||
hasStock?: boolean
|
||||
}
|
||||
|
||||
const MaterialList: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [materials, setMaterials] = useState<MmMaterial[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchFilters, setSearchFilters] = useState<MaterialSearchFilters>({});
|
||||
const [selectedMaterials] = useState<string[]>([]);
|
||||
const navigate = useNavigate()
|
||||
const [materials, setMaterials] = useState<MmMaterial[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searchFilters, setSearchFilters] = useState<MaterialSearchFilters>({})
|
||||
const [selectedMaterials] = useState<string[]>([])
|
||||
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [sortBy, setSortBy] = useState<string>("materialCode");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
||||
const [totalCount, setTotalCount] = useState(0)
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(10)
|
||||
const [sortBy, setSortBy] = useState<string>('materialCode')
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
||||
|
||||
const loadMaterials = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setLoading(true)
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
// Apply filters
|
||||
let filteredMaterials = [...mockMaterials];
|
||||
let filteredMaterials = [...mockMaterials]
|
||||
|
||||
if (searchFilters.materialCode) {
|
||||
filteredMaterials = filteredMaterials.filter((m) =>
|
||||
m.code
|
||||
.toLowerCase()
|
||||
.includes(searchFilters.materialCode!.toLowerCase())
|
||||
);
|
||||
m.code.toLowerCase().includes(searchFilters.materialCode!.toLowerCase()),
|
||||
)
|
||||
}
|
||||
|
||||
if (searchFilters.description) {
|
||||
filteredMaterials = filteredMaterials.filter((m) =>
|
||||
m.name
|
||||
.toLowerCase()
|
||||
.includes(searchFilters.description!.toLowerCase())
|
||||
);
|
||||
m.name.toLowerCase().includes(searchFilters.description!.toLowerCase()),
|
||||
)
|
||||
}
|
||||
|
||||
if (searchFilters.isActive !== undefined) {
|
||||
filteredMaterials = filteredMaterials.filter(
|
||||
(m) => m.isActive === searchFilters.isActive
|
||||
);
|
||||
filteredMaterials = filteredMaterials.filter((m) => m.isActive === searchFilters.isActive)
|
||||
}
|
||||
|
||||
if (searchFilters.hasStock !== undefined) {
|
||||
if (searchFilters.hasStock) {
|
||||
filteredMaterials = filteredMaterials.filter((m) => m.totalStock > 0);
|
||||
filteredMaterials = filteredMaterials.filter((m) => m.totalStock > 0)
|
||||
} else {
|
||||
filteredMaterials = filteredMaterials.filter(
|
||||
(m) => m.totalStock === 0
|
||||
);
|
||||
filteredMaterials = filteredMaterials.filter((m) => m.totalStock === 0)
|
||||
}
|
||||
}
|
||||
|
||||
// Apply sorting
|
||||
filteredMaterials.sort((a, b) => {
|
||||
let aValue: string | number;
|
||||
let bValue: string | number;
|
||||
let aValue: string | number
|
||||
let bValue: string | number
|
||||
|
||||
switch (sortBy) {
|
||||
case "materialCode":
|
||||
aValue = a.code;
|
||||
bValue = b.code;
|
||||
break;
|
||||
case "description":
|
||||
aValue = a.name;
|
||||
bValue = b.name;
|
||||
break;
|
||||
case "materialType":
|
||||
aValue = a.materialType?.name || "";
|
||||
bValue = b.materialType?.name || "";
|
||||
break;
|
||||
case "materialGroupName":
|
||||
aValue = a.materialGroup?.name || "";
|
||||
bValue = b.materialGroup?.name || "";
|
||||
break;
|
||||
case "baseUnitName":
|
||||
aValue = a.baseUnit?.name || "";
|
||||
bValue = b.baseUnit?.name || "";
|
||||
break;
|
||||
case "costPrice":
|
||||
aValue = a.costPrice;
|
||||
bValue = b.costPrice;
|
||||
break;
|
||||
case "salesPrice":
|
||||
aValue = a.salesPrice;
|
||||
bValue = b.salesPrice;
|
||||
break;
|
||||
case "totalStock":
|
||||
aValue = a.totalStock;
|
||||
bValue = b.totalStock;
|
||||
break;
|
||||
case "isActive":
|
||||
aValue = a.isActive ? 1 : 0;
|
||||
bValue = b.isActive ? 1 : 0;
|
||||
break;
|
||||
case 'materialCode':
|
||||
aValue = a.code
|
||||
bValue = b.code
|
||||
break
|
||||
case 'description':
|
||||
aValue = a.name
|
||||
bValue = b.name
|
||||
break
|
||||
case 'materialType':
|
||||
aValue = a.materialType?.name || ''
|
||||
bValue = b.materialType?.name || ''
|
||||
break
|
||||
case 'materialGroupName':
|
||||
aValue = a.materialGroup?.name || ''
|
||||
bValue = b.materialGroup?.name || ''
|
||||
break
|
||||
case 'baseUnitName':
|
||||
aValue = a.baseUnit?.name || ''
|
||||
bValue = b.baseUnit?.name || ''
|
||||
break
|
||||
case 'costPrice':
|
||||
aValue = a.costPrice
|
||||
bValue = b.costPrice
|
||||
break
|
||||
case 'salesPrice':
|
||||
aValue = a.salesPrice
|
||||
bValue = b.salesPrice
|
||||
break
|
||||
case 'totalStock':
|
||||
aValue = a.totalStock
|
||||
bValue = b.totalStock
|
||||
break
|
||||
case 'isActive':
|
||||
aValue = a.isActive ? 1 : 0
|
||||
bValue = b.isActive ? 1 : 0
|
||||
break
|
||||
default:
|
||||
aValue = "";
|
||||
bValue = "";
|
||||
aValue = ''
|
||||
bValue = ''
|
||||
}
|
||||
|
||||
if (sortDirection === "asc") {
|
||||
return aValue > bValue ? 1 : -1;
|
||||
if (sortDirection === 'asc') {
|
||||
return aValue > bValue ? 1 : -1
|
||||
} else {
|
||||
return aValue < bValue ? 1 : -1;
|
||||
return aValue < bValue ? 1 : -1
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
setTotalCount(filteredMaterials.length);
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setMaterials(filteredMaterials.slice(startIndex, endIndex));
|
||||
setTotalCount(filteredMaterials.length)
|
||||
const startIndex = (currentPage - 1) * pageSize
|
||||
const endIndex = startIndex + pageSize
|
||||
setMaterials(filteredMaterials.slice(startIndex, endIndex))
|
||||
} catch (error) {
|
||||
console.error("Error loading materials:", error);
|
||||
console.error('Error loading materials:', error)
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoading(false)
|
||||
}
|
||||
}, [searchFilters, sortBy, sortDirection, currentPage, pageSize]);
|
||||
}, [searchFilters, sortBy, sortDirection, currentPage, pageSize])
|
||||
|
||||
useEffect(() => {
|
||||
loadMaterials();
|
||||
}, [loadMaterials]);
|
||||
loadMaterials()
|
||||
}, [loadMaterials])
|
||||
|
||||
const handleSearch = (field: keyof MaterialSearchFilters, value: string) => {
|
||||
setSearchFilters((prev) => ({
|
||||
...prev,
|
||||
[field]: value || undefined,
|
||||
}));
|
||||
setCurrentPage(1);
|
||||
};
|
||||
}))
|
||||
setCurrentPage(1)
|
||||
}
|
||||
|
||||
const handleSort = (key: string) => {
|
||||
if (sortBy === key) {
|
||||
setSortDirection((prev) => (prev === "asc" ? "desc" : "asc"));
|
||||
setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'))
|
||||
} else {
|
||||
setSortBy(key);
|
||||
setSortDirection("asc");
|
||||
setSortBy(key)
|
||||
setSortDirection('asc')
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleView = (material: MmMaterial) => {
|
||||
navigate(`/admin/supplychain/materials/detail/${material.id}`);
|
||||
};
|
||||
navigate(`/admin/supplychain/materials/detail/${material.id}`)
|
||||
}
|
||||
|
||||
const handleEdit = (material: MmMaterial) => {
|
||||
navigate(`/admin/supplychain/materials/edit/${material.id}`);
|
||||
};
|
||||
navigate(`/admin/supplychain/materials/edit/${material.id}`)
|
||||
}
|
||||
|
||||
const handleDelete = async (material: MmMaterial) => {
|
||||
if (
|
||||
window.confirm(
|
||||
`"${material.name}" malzemesini silmek istediğinizden emin misiniz?`
|
||||
)
|
||||
) {
|
||||
if (window.confirm(`"${material.name}" malzemesini silmek istediğinizden emin misiniz?`)) {
|
||||
// Implement delete logic
|
||||
console.log("Deleting material:", material.id);
|
||||
console.log('Deleting material:', material.id)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
if (selectedMaterials.length === 0) return;
|
||||
if (selectedMaterials.length === 0) return
|
||||
|
||||
if (
|
||||
window.confirm(
|
||||
`${selectedMaterials.length} malzemeyi silmek istediğinizden emin misiniz?`
|
||||
)
|
||||
window.confirm(`${selectedMaterials.length} malzemeyi silmek istediğinizden emin misiniz?`)
|
||||
) {
|
||||
// Implement bulk delete logic
|
||||
console.log("Bulk deleting materials:", selectedMaterials);
|
||||
console.log('Bulk deleting materials:', selectedMaterials)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// Implement export logic
|
||||
console.log("Exporting materials with filters:", searchFilters);
|
||||
};
|
||||
console.log('Exporting materials with filters:', searchFilters)
|
||||
}
|
||||
|
||||
const handleImport = () => {
|
||||
// Implement import logic
|
||||
};
|
||||
}
|
||||
|
||||
const getStockStatusColor = (stock: number): string => {
|
||||
if (stock === 0) return "text-red-600";
|
||||
if (stock < 100) return "text-yellow-600";
|
||||
return "text-green-600";
|
||||
};
|
||||
if (stock === 0) return 'text-red-600'
|
||||
if (stock < 100) return 'text-yellow-600'
|
||||
return 'text-green-600'
|
||||
}
|
||||
|
||||
const getStockStatusIcon = (stock: number) => {
|
||||
if (stock === 0) return <FaExclamationTriangle className="w-4 h-4" />;
|
||||
if (stock < 100) return <FaHeartbeat className="w-4 h-4" />;
|
||||
return <FaArchive className="w-4 h-4" />;
|
||||
};
|
||||
if (stock === 0) return <FaExclamationTriangle className="w-4 h-4" />
|
||||
if (stock < 100) return <FaHeartbeat className="w-4 h-4" />
|
||||
return <FaArchive className="w-4 h-4" />
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: "materialCode",
|
||||
header: "Malzeme Kodu",
|
||||
key: 'materialCode',
|
||||
header: 'Malzeme Kodu',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<div
|
||||
|
|
@ -236,8 +223,8 @@ const MaterialList: React.FC = () => {
|
|||
),
|
||||
},
|
||||
{
|
||||
key: "materialName",
|
||||
header: "Maleme Adı",
|
||||
key: 'materialName',
|
||||
header: 'Maleme Adı',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<div className="max-w-xs truncate" title={item.name}>
|
||||
|
|
@ -246,14 +233,14 @@ const MaterialList: React.FC = () => {
|
|||
),
|
||||
},
|
||||
{
|
||||
key: "materialTypeName",
|
||||
header: "Malzeme Tipi",
|
||||
key: 'materialTypeName',
|
||||
header: 'Malzeme Tipi',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => item.materialType?.name || "-",
|
||||
render: (item: MmMaterial) => item.materialType?.name || '-',
|
||||
},
|
||||
{
|
||||
key: "materialGroupName",
|
||||
header: "Malzeme Grubu",
|
||||
key: 'materialGroupName',
|
||||
header: 'Malzeme Grubu',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<div className="max-w-xs truncate" title={item.materialGroup?.name}>
|
||||
|
|
@ -262,71 +249,69 @@ const MaterialList: React.FC = () => {
|
|||
),
|
||||
},
|
||||
{
|
||||
key: "baseUnitName",
|
||||
header: "Birim",
|
||||
key: 'baseUnitName',
|
||||
header: 'Birim',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => item.baseUnit?.code || "-",
|
||||
render: (item: MmMaterial) => item.baseUnit?.code || '-',
|
||||
},
|
||||
{
|
||||
key: "costPrice",
|
||||
header: "Maliyet",
|
||||
key: 'costPrice',
|
||||
header: 'Maliyet',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<div className="text-right">
|
||||
{item.costPrice.toLocaleString("tr-TR", {
|
||||
{item.costPrice.toLocaleString('tr-TR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}{" "}
|
||||
})}{' '}
|
||||
{item.currency}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "salesPrice",
|
||||
header: "Satış Fiyatı",
|
||||
key: 'salesPrice',
|
||||
header: 'Satış Fiyatı',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<div className="text-right">
|
||||
{item.salesPrice.toLocaleString("tr-TR", {
|
||||
{item.salesPrice.toLocaleString('tr-TR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}{" "}
|
||||
})}{' '}
|
||||
{item.currency}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "totalStock",
|
||||
header: "Stok",
|
||||
key: 'totalStock',
|
||||
header: 'Stok',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<div
|
||||
className={`text-right flex items-center justify-end space-x-1 ${getStockStatusColor(
|
||||
item.totalStock
|
||||
item.totalStock,
|
||||
)}`}
|
||||
>
|
||||
{getStockStatusIcon(item.totalStock)}
|
||||
<span>
|
||||
{item.totalStock.toLocaleString("tr-TR", {
|
||||
{item.totalStock.toLocaleString('tr-TR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}{" "}
|
||||
})}{' '}
|
||||
{item.baseUnit?.code}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "isActive",
|
||||
header: "Durum",
|
||||
key: 'isActive',
|
||||
header: 'Durum',
|
||||
sortable: true,
|
||||
render: (item: MmMaterial) => (
|
||||
<StatusBadge status={item.isActive ? "active" : "inactive"} />
|
||||
),
|
||||
render: (item: MmMaterial) => <StatusBadge status={item.isActive ? 'active' : 'inactive'} />,
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
header: "İşlemler",
|
||||
key: 'actions',
|
||||
header: 'İşlemler',
|
||||
render: (item: MmMaterial) => (
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
|
|
@ -353,22 +338,21 @@ const MaterialList: React.FC = () => {
|
|||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
if (loading && materials.length === 0) {
|
||||
return <LoadingSpinner />;
|
||||
return <LoadingSpinner />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 py-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
{/* Title & Description */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Malzeme Listesi</h2>
|
||||
<p className="text-gray-600">
|
||||
Toplam {totalCount} malzeme bulundu
|
||||
</p>
|
||||
<p className="text-gray-600">Toplam {totalCount} malzeme bulundu</p>
|
||||
</div>
|
||||
|
||||
{/* Header Actions */}
|
||||
|
|
@ -390,7 +374,7 @@ const MaterialList: React.FC = () => {
|
|||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/admin/supplychain/materials/new")}
|
||||
onClick={() => navigate('/admin/supplychain/materials/new')}
|
||||
className="flex items-center px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<FaPlus size={14} className="mr-2" />
|
||||
|
|
@ -401,12 +385,7 @@ const MaterialList: React.FC = () => {
|
|||
|
||||
{/* Stat Widgets */}
|
||||
<div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<Widget
|
||||
title="Toplam Malzeme"
|
||||
value={totalCount}
|
||||
color="blue"
|
||||
icon="FaArchive"
|
||||
/>
|
||||
<Widget title="Toplam Malzeme" value={totalCount} color="blue" icon="FaArchive" />
|
||||
<Widget
|
||||
title="Aktif Malzeme"
|
||||
value={materials.filter((m) => m.isActive).length}
|
||||
|
|
@ -442,8 +421,8 @@ const MaterialList: React.FC = () => {
|
|||
type="text"
|
||||
placeholder="Malzeme kodu ara..."
|
||||
className="pl-8 pr-3 py-1 w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
value={searchFilters.materialCode || ""}
|
||||
onChange={(e) => handleSearch("materialCode", e.target.value)}
|
||||
value={searchFilters.materialCode || ''}
|
||||
onChange={(e) => handleSearch('materialCode', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -453,8 +432,8 @@ const MaterialList: React.FC = () => {
|
|||
type="text"
|
||||
placeholder="Açıklama ara..."
|
||||
className="px-3 py-1 w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
value={searchFilters.description || ""}
|
||||
onChange={(e) => handleSearch("description", e.target.value)}
|
||||
value={searchFilters.description || ''}
|
||||
onChange={(e) => handleSearch('description', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -463,16 +442,14 @@ const MaterialList: React.FC = () => {
|
|||
<select
|
||||
className="block w-full px-3 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
value={
|
||||
searchFilters.isActive === undefined
|
||||
? ""
|
||||
: searchFilters.isActive.toString()
|
||||
searchFilters.isActive === undefined ? '' : searchFilters.isActive.toString()
|
||||
}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
const value = e.target.value
|
||||
setSearchFilters((prev) => ({
|
||||
...prev,
|
||||
isActive: value === "" ? undefined : value === "true",
|
||||
}));
|
||||
isActive: value === '' ? undefined : value === 'true',
|
||||
}))
|
||||
}}
|
||||
>
|
||||
<option value="">Durum (Tümü)</option>
|
||||
|
|
@ -486,16 +463,14 @@ const MaterialList: React.FC = () => {
|
|||
<select
|
||||
className="block w-full px-3 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
value={
|
||||
searchFilters.hasStock === undefined
|
||||
? ""
|
||||
: searchFilters.hasStock.toString()
|
||||
searchFilters.hasStock === undefined ? '' : searchFilters.hasStock.toString()
|
||||
}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
const value = e.target.value
|
||||
setSearchFilters((prev) => ({
|
||||
...prev,
|
||||
hasStock: value === "" ? undefined : value === "true",
|
||||
}));
|
||||
hasStock: value === '' ? undefined : value === 'true',
|
||||
}))
|
||||
}}
|
||||
>
|
||||
<option value="">Stok Durumu (Tümü)</option>
|
||||
|
|
@ -510,8 +485,8 @@ const MaterialList: React.FC = () => {
|
|||
{/* Reset */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchFilters({});
|
||||
setCurrentPage(1);
|
||||
setSearchFilters({})
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
className="flex items-center px-2.5 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
|
|
@ -565,9 +540,7 @@ const MaterialList: React.FC = () => {
|
|||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setCurrentPage(
|
||||
Math.min(Math.ceil(totalCount / pageSize), currentPage + 1)
|
||||
)
|
||||
setCurrentPage(Math.min(Math.ceil(totalCount / pageSize), currentPage + 1))
|
||||
}
|
||||
disabled={currentPage === Math.ceil(totalCount / pageSize)}
|
||||
className="ml-3 relative inline-flex items-center px-2.5 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
|
|
@ -578,24 +551,22 @@ const MaterialList: React.FC = () => {
|
|||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-700">
|
||||
<span className="font-medium">
|
||||
{(currentPage - 1) * pageSize + 1}
|
||||
</span>
|
||||
{" - "}
|
||||
<span className="font-medium">{(currentPage - 1) * pageSize + 1}</span>
|
||||
{' - '}
|
||||
<span className="font-medium">
|
||||
{Math.min(currentPage * pageSize, totalCount)}
|
||||
</span>
|
||||
{" / "}
|
||||
{' / '}
|
||||
<span className="font-medium">{totalCount}</span>
|
||||
{" kayıt"}
|
||||
{' kayıt'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => {
|
||||
setPageSize(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
setPageSize(Number(e.target.value))
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
className="border border-gray-300 rounded-md text-sm px-2 py-0.5 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
|
|
@ -612,16 +583,13 @@ const MaterialList: React.FC = () => {
|
|||
>
|
||||
Önceki
|
||||
</button>
|
||||
{Array.from(
|
||||
{ length: Math.ceil(totalCount / pageSize) },
|
||||
(_, i) => i + 1
|
||||
)
|
||||
{Array.from({ length: Math.ceil(totalCount / pageSize) }, (_, i) => i + 1)
|
||||
.filter((page) => {
|
||||
return (
|
||||
page === 1 ||
|
||||
page === Math.ceil(totalCount / pageSize) ||
|
||||
Math.abs(page - currentPage) <= 2
|
||||
);
|
||||
)
|
||||
})
|
||||
.map((page, index, array) => {
|
||||
if (index > 0 && array[index - 1] !== page - 1) {
|
||||
|
|
@ -637,13 +605,13 @@ const MaterialList: React.FC = () => {
|
|||
onClick={() => setCurrentPage(page)}
|
||||
className={`relative inline-flex items-center px-2.5 py-1 border text-sm font-medium ${
|
||||
currentPage === page
|
||||
? "z-10 bg-blue-50 border-blue-500 text-blue-600"
|
||||
: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50"
|
||||
? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
|
||||
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>,
|
||||
];
|
||||
]
|
||||
}
|
||||
return (
|
||||
<button
|
||||
|
|
@ -651,22 +619,17 @@ const MaterialList: React.FC = () => {
|
|||
onClick={() => setCurrentPage(page)}
|
||||
className={`relative inline-flex items-center px-2.5 py-1 border text-sm font-medium ${
|
||||
currentPage === page
|
||||
? "z-10 bg-blue-50 border-blue-500 text-blue-600"
|
||||
: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50"
|
||||
? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
|
||||
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
);
|
||||
)
|
||||
})}
|
||||
<button
|
||||
onClick={() =>
|
||||
setCurrentPage(
|
||||
Math.min(
|
||||
Math.ceil(totalCount / pageSize),
|
||||
currentPage + 1
|
||||
)
|
||||
)
|
||||
setCurrentPage(Math.min(Math.ceil(totalCount / pageSize), currentPage + 1))
|
||||
}
|
||||
disabled={currentPage === Math.ceil(totalCount / pageSize)}
|
||||
className="relative inline-flex items-center px-2 py-1 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
|
|
@ -680,7 +643,8 @@ const MaterialList: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default MaterialList;
|
||||
export default MaterialList
|
||||
|
|
|
|||
|
|
@ -1,56 +1,47 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
FaPlus,
|
||||
FaEdit,
|
||||
FaTrash,
|
||||
FaSearch,
|
||||
FaTh,
|
||||
FaList,
|
||||
} from "react-icons/fa";
|
||||
import { MmMaterialType, MaterialTypeEnum } from "../../../types/mm";
|
||||
import { mockMaterialTypes } from "../../../mocks/mockMaterialTypes";
|
||||
import { getMaterialTypeDisplay } from "../../../utils/erp";
|
||||
import React, { useState } from 'react'
|
||||
import { FaPlus, FaEdit, FaTrash, FaSearch, FaTh, FaList } from 'react-icons/fa'
|
||||
import { MmMaterialType, MaterialTypeEnum } from '../../../types/mm'
|
||||
import { mockMaterialTypes } from '../../../mocks/mockMaterialTypes'
|
||||
import { getMaterialTypeDisplay } from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const MaterialTypes: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingType, setEditingType] = useState<MmMaterialType | null>(null);
|
||||
const [viewMode, setViewMode] = useState<"list" | "card">("list");
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [editingType, setEditingType] = useState<MmMaterialType | null>(null)
|
||||
const [viewMode, setViewMode] = useState<'list' | 'card'>('list')
|
||||
|
||||
// Mock data - gerçek uygulamada API'den gelecek
|
||||
const [materialTypes, setMaterialTypes] =
|
||||
useState<MmMaterialType[]>(mockMaterialTypes);
|
||||
const [materialTypes, setMaterialTypes] = useState<MmMaterialType[]>(mockMaterialTypes)
|
||||
|
||||
const filteredTypes = materialTypes.filter(
|
||||
(type) =>
|
||||
type.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
type.description?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
type.description?.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingType(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
setEditingType(null)
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
const handleEdit = (type: MmMaterialType) => {
|
||||
setEditingType(type);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
setEditingType(type)
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
const handleDelete = (type: MmMaterialType) => {
|
||||
if (
|
||||
window.confirm(`${type.name} türünü silmek istediğinizden emin misiniz?`)
|
||||
) {
|
||||
setMaterialTypes((prev) => prev.filter((t) => t.id !== type.id));
|
||||
if (window.confirm(`${type.name} türünü silmek istediğinizden emin misiniz?`)) {
|
||||
setMaterialTypes((prev) => prev.filter((t) => t.id !== type.id))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = (formData: Partial<MmMaterialType>) => {
|
||||
if (editingType) {
|
||||
// Update existing type
|
||||
setMaterialTypes((prev) =>
|
||||
prev.map((t) => (t.id === editingType.id ? { ...t, ...formData } : t))
|
||||
);
|
||||
prev.map((t) => (t.id === editingType.id ? { ...t, ...formData } : t)),
|
||||
)
|
||||
} else {
|
||||
// Add new type
|
||||
const newType: MmMaterialType = {
|
||||
|
|
@ -59,15 +50,16 @@ const MaterialTypes: React.FC = () => {
|
|||
name: formData.name!,
|
||||
description: formData.description,
|
||||
isActive: formData.isActive ?? true,
|
||||
className: "",
|
||||
};
|
||||
setMaterialTypes((prev) => [...prev, newType]);
|
||||
className: '',
|
||||
}
|
||||
setMaterialTypes((prev) => [...prev, newType])
|
||||
}
|
||||
setIsModalOpen(false)
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3 py-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
{/* Title & Description */}
|
||||
|
|
@ -81,22 +73,22 @@ const MaterialTypes: React.FC = () => {
|
|||
{/* View Mode Toggle */}
|
||||
<div className="flex bg-gray-100 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setViewMode("list")}
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-1.5 rounded-md transition-colors ${
|
||||
viewMode === "list"
|
||||
? "bg-white text-blue-600 shadow-sm"
|
||||
: "text-gray-600 hover:text-gray-900"
|
||||
viewMode === 'list'
|
||||
? 'bg-white text-blue-600 shadow-sm'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
title="Liste Görünümü"
|
||||
>
|
||||
<FaList className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode("card")}
|
||||
onClick={() => setViewMode('card')}
|
||||
className={`p-1.5 rounded-md transition-colors ${
|
||||
viewMode === "card"
|
||||
? "bg-white text-blue-600 shadow-sm"
|
||||
: "text-gray-600 hover:text-gray-900"
|
||||
viewMode === 'card'
|
||||
? 'bg-white text-blue-600 shadow-sm'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
title="Kart Görünümü"
|
||||
>
|
||||
|
|
@ -131,7 +123,7 @@ const MaterialTypes: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Types Display */}
|
||||
{viewMode === "list" ? (
|
||||
{viewMode === 'list' ? (
|
||||
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
|
|
@ -162,24 +154,18 @@ const MaterialTypes: React.FC = () => {
|
|||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{type.name}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-900">{type.name}</div>
|
||||
</td>
|
||||
<td className="px-3 py-1.5">
|
||||
<div className="text-sm text-gray-900">
|
||||
{type.description}
|
||||
</div>
|
||||
<div className="text-sm text-gray-900">{type.description}</div>
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||||
type.isActive
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
type.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}`}
|
||||
>
|
||||
{type.isActive ? "Aktif" : "Pasif"}
|
||||
{type.isActive ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-right text-sm font-medium">
|
||||
|
|
@ -240,25 +226,19 @@ const MaterialTypes: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-medium text-gray-900 mb-1.5 text-sm">
|
||||
{type.name}
|
||||
</h3>
|
||||
<h3 className="font-medium text-gray-900 mb-1.5 text-sm">{type.name}</h3>
|
||||
|
||||
{type.description && (
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
|
||||
{type.description}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{type.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||||
type.isActive
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
type.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}`}
|
||||
>
|
||||
{type.isActive ? "Aktif" : "Pasif"}
|
||||
{type.isActive ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -271,6 +251,7 @@ const MaterialTypes: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
|
|
@ -280,47 +261,41 @@ const MaterialTypes: React.FC = () => {
|
|||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface MaterialTypeModalProps {
|
||||
type?: MmMaterialType | null;
|
||||
onSave: (data: Partial<MmMaterialType>) => void;
|
||||
onClose: () => void;
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
|
||||
type,
|
||||
onSave,
|
||||
onClose,
|
||||
}) => {
|
||||
interface MaterialTypeModalProps {
|
||||
type?: MmMaterialType | null
|
||||
onSave: (data: Partial<MmMaterialType>) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({ type, onSave, onClose }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
code: type?.code || MaterialTypeEnum.RawMaterial,
|
||||
name: type?.name || "",
|
||||
description: type?.description || "",
|
||||
name: type?.name || '',
|
||||
description: type?.description || '',
|
||||
isActive: type?.isActive ?? true,
|
||||
});
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
e.preventDefault()
|
||||
onSave(formData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg w-full max-w-xs">
|
||||
<div className="px-3 py-2 border-b border-gray-200">
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{type ? "Malzeme Türünü Düzenle" : "Yeni Malzeme Türü"}
|
||||
{type ? 'Malzeme Türünü Düzenle' : 'Yeni Malzeme Türü'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-3 space-y-2">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Tür Kodu
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Tür Kodu</label>
|
||||
<select
|
||||
value={formData.code}
|
||||
onChange={(e) =>
|
||||
|
|
@ -335,38 +310,28 @@ const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
|
|||
<option value={MaterialTypeEnum.RawMaterial}>Hammadde</option>
|
||||
<option value={MaterialTypeEnum.SemiFinished}>Yarı Mamul</option>
|
||||
<option value={MaterialTypeEnum.Finished}>Mamul</option>
|
||||
<option value={MaterialTypeEnum.Consumable}>
|
||||
Sarf Malzemesi
|
||||
</option>
|
||||
<option value={MaterialTypeEnum.Consumable}>Sarf Malzemesi</option>
|
||||
<option value={MaterialTypeEnum.Service}>Hizmet</option>
|
||||
<option value={MaterialTypeEnum.Spare}>Yedek Parça</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Ad
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Ad</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Açıklama
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, description: e.target.value })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
rows={3}
|
||||
/>
|
||||
|
|
@ -377,9 +342,7 @@ const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
|
|||
type="checkbox"
|
||||
id="isActive"
|
||||
checked={formData.isActive}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, isActive: e.target.checked })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, 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 text-sm text-gray-700">
|
||||
|
|
@ -405,7 +368,7 @@ const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default MaterialTypes;
|
||||
export default MaterialTypes
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import React, { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
FaPlus,
|
||||
FaSearch,
|
||||
|
|
@ -14,145 +14,126 @@ import {
|
|||
FaCheckCircle,
|
||||
FaTimesCircle,
|
||||
FaExclamationTriangle,
|
||||
} from "react-icons/fa";
|
||||
import { OrderStatusEnum, MmPurchaseOrder } from "../../../types/mm";
|
||||
import { mockPurchaseOrders } from "../../../mocks/mockPurchaseOrders";
|
||||
import Widget from "../../../components/common/Widget";
|
||||
} from 'react-icons/fa'
|
||||
import { OrderStatusEnum, MmPurchaseOrder } from '../../../types/mm'
|
||||
import { mockPurchaseOrders } from '../../../mocks/mockPurchaseOrders'
|
||||
import Widget from '../../../components/common/Widget'
|
||||
import {
|
||||
getOrderStatusColor,
|
||||
getOrderStatusIcon,
|
||||
getOrderStatusText,
|
||||
getRequestTypeText,
|
||||
} from "../../../utils/erp";
|
||||
} from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const OrderManagement: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<OrderStatusEnum | "all">(
|
||||
"all"
|
||||
);
|
||||
const [selectedOrders, setSelectedOrders] = useState<string[]>([]);
|
||||
const [showBulkModal, setShowBulkModal] = useState(false);
|
||||
const [bulkModalType, setBulkModalType] = useState<"approval" | "status">(
|
||||
"approval"
|
||||
);
|
||||
const navigate = useNavigate()
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<OrderStatusEnum | 'all'>('all')
|
||||
const [selectedOrders, setSelectedOrders] = useState<string[]>([])
|
||||
const [showBulkModal, setShowBulkModal] = useState(false)
|
||||
const [bulkModalType, setBulkModalType] = useState<'approval' | 'status'>('approval')
|
||||
|
||||
// Mock data - replace with actual API calls
|
||||
const [orders, setOrders] = useState<MmPurchaseOrder[]>(mockPurchaseOrders);
|
||||
const [orders, setOrders] = useState<MmPurchaseOrder[]>(mockPurchaseOrders)
|
||||
|
||||
const filteredOrders = orders.filter((order) => {
|
||||
const matchesSearch =
|
||||
order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
order.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
order.requestTitle.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesStatus =
|
||||
statusFilter === "all" || order.status === statusFilter;
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
order.requestTitle.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesStatus = statusFilter === 'all' || order.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
const getStatusText = (status: OrderStatusEnum) => getOrderStatusText(status);
|
||||
const getStatusText = (status: OrderStatusEnum) => getOrderStatusText(status)
|
||||
|
||||
const getStatusColor = (status: OrderStatusEnum): string =>
|
||||
getOrderStatusColor(status);
|
||||
const getStatusColor = (status: OrderStatusEnum): string => getOrderStatusColor(status)
|
||||
|
||||
const getStatusIcon = (status: OrderStatusEnum): JSX.Element =>
|
||||
getOrderStatusIcon(status);
|
||||
const getStatusIcon = (status: OrderStatusEnum): JSX.Element => getOrderStatusIcon(status)
|
||||
|
||||
const getDeliveryProgress = (order: MmPurchaseOrder) => {
|
||||
const totalQuantity = order.items.reduce(
|
||||
(sum, item) => sum + item.quantity,
|
||||
0
|
||||
);
|
||||
const deliveredQuantity = order.items.reduce(
|
||||
(sum, item) => sum + item.deliveredQuantity,
|
||||
0
|
||||
);
|
||||
return totalQuantity > 0
|
||||
? Math.round((deliveredQuantity / totalQuantity) * 100)
|
||||
: 0;
|
||||
};
|
||||
const totalQuantity = order.items.reduce((sum, item) => sum + item.quantity, 0)
|
||||
const deliveredQuantity = order.items.reduce((sum, item) => sum + item.deliveredQuantity, 0)
|
||||
return totalQuantity > 0 ? Math.round((deliveredQuantity / totalQuantity) * 100) : 0
|
||||
}
|
||||
|
||||
const isOverdue = (order: MmPurchaseOrder) => {
|
||||
const today = new Date();
|
||||
const today = new Date()
|
||||
return (
|
||||
order.expectedDeliveryDate < today &&
|
||||
order.status !== OrderStatusEnum.Delivered &&
|
||||
order.status !== OrderStatusEnum.Completed
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const getDaysUntilDelivery = (order: MmPurchaseOrder) => {
|
||||
const today = new Date();
|
||||
const diffTime = order.expectedDeliveryDate.getTime() - today.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
return diffDays;
|
||||
};
|
||||
const today = new Date()
|
||||
const diffTime = order.expectedDeliveryDate.getTime() - today.getTime()
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
return diffDays
|
||||
}
|
||||
|
||||
const handleAddOrder = () => {
|
||||
navigate("/admin/supplychain/orders/new");
|
||||
};
|
||||
navigate('/admin/supplychain/orders/new')
|
||||
}
|
||||
|
||||
const handleEdit = (order: MmPurchaseOrder) => {
|
||||
navigate(`/admin/supplychain/orders/edit/${order.id}`);
|
||||
};
|
||||
navigate(`/admin/supplychain/orders/edit/${order.id}`)
|
||||
}
|
||||
|
||||
const handleView = (order: MmPurchaseOrder) => {
|
||||
navigate(`/admin/supplychain/orders/view/${order.id}`);
|
||||
};
|
||||
navigate(`/admin/supplychain/orders/view/${order.id}`)
|
||||
}
|
||||
|
||||
const handleSelectOrder = (orderId: string) => {
|
||||
setSelectedOrders((prev) =>
|
||||
prev.includes(orderId)
|
||||
? prev.filter((id) => id !== orderId)
|
||||
: [...prev, orderId]
|
||||
);
|
||||
};
|
||||
prev.includes(orderId) ? prev.filter((id) => id !== orderId) : [...prev, orderId],
|
||||
)
|
||||
}
|
||||
|
||||
const handleBulkApproval = () => {
|
||||
setBulkModalType("approval");
|
||||
setShowBulkModal(true);
|
||||
};
|
||||
setBulkModalType('approval')
|
||||
setShowBulkModal(true)
|
||||
}
|
||||
|
||||
const handleBulkStatusUpdate = () => {
|
||||
setBulkModalType("status");
|
||||
setShowBulkModal(true);
|
||||
};
|
||||
setBulkModalType('status')
|
||||
setShowBulkModal(true)
|
||||
}
|
||||
|
||||
const processBulkApproval = () => {
|
||||
const updatedOrders = orders.map((order) => {
|
||||
if (selectedOrders.includes(order.id)) {
|
||||
return { ...order, status: OrderStatusEnum.Approved };
|
||||
return { ...order, status: OrderStatusEnum.Approved }
|
||||
}
|
||||
return order
|
||||
})
|
||||
setOrders(updatedOrders)
|
||||
setSelectedOrders([])
|
||||
setShowBulkModal(false)
|
||||
}
|
||||
return order;
|
||||
});
|
||||
setOrders(updatedOrders);
|
||||
setSelectedOrders([]);
|
||||
setShowBulkModal(false);
|
||||
};
|
||||
|
||||
const processBulkStatusUpdate = (newStatus: OrderStatusEnum) => {
|
||||
const updatedOrders = orders.map((order) => {
|
||||
if (selectedOrders.includes(order.id)) {
|
||||
return { ...order, status: newStatus };
|
||||
return { ...order, status: newStatus }
|
||||
}
|
||||
return order
|
||||
})
|
||||
setOrders(updatedOrders)
|
||||
setSelectedOrders([])
|
||||
setShowBulkModal(false)
|
||||
}
|
||||
return order;
|
||||
});
|
||||
setOrders(updatedOrders);
|
||||
setSelectedOrders([]);
|
||||
setShowBulkModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Satınalma Siparişleri
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
Satınalma siparişlerini oluşturun ve takip edin
|
||||
</p>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Satınalma Siparişleri</h2>
|
||||
<p className="text-gray-600">Satınalma siparişlerini oluşturun ve takip edin</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddOrder}
|
||||
|
|
@ -165,20 +146,13 @@ const OrderManagement: React.FC = () => {
|
|||
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Widget
|
||||
title="Toplam Sipariş"
|
||||
value={orders.length}
|
||||
color="blue"
|
||||
icon="FaShoppingCart"
|
||||
/>
|
||||
<Widget title="Toplam Sipariş" value={orders.length} color="blue" icon="FaShoppingCart" />
|
||||
|
||||
<Widget
|
||||
title="Bekleyen"
|
||||
value={
|
||||
orders.filter((o) =>
|
||||
[OrderStatusEnum.Pending, OrderStatusEnum.Confirmed].includes(
|
||||
o.status
|
||||
)
|
||||
[OrderStatusEnum.Pending, OrderStatusEnum.Confirmed].includes(o.status),
|
||||
).length
|
||||
}
|
||||
color="orange"
|
||||
|
|
@ -187,18 +161,14 @@ const OrderManagement: React.FC = () => {
|
|||
|
||||
<Widget
|
||||
title="Teslim Edildi"
|
||||
value={
|
||||
orders.filter((o) => o.status === OrderStatusEnum.Delivered).length
|
||||
}
|
||||
value={orders.filter((o) => o.status === OrderStatusEnum.Delivered).length}
|
||||
color="green"
|
||||
icon="FaTruck"
|
||||
/>
|
||||
|
||||
<Widget
|
||||
title="Toplam Tutar"
|
||||
value={`₺${orders
|
||||
.reduce((sum, order) => sum + order.totalAmount, 0)
|
||||
.toLocaleString()}`}
|
||||
value={`₺${orders.reduce((sum, order) => sum + order.totalAmount, 0).toLocaleString()}`}
|
||||
color="purple"
|
||||
icon="FaDollarSign"
|
||||
/>
|
||||
|
|
@ -220,9 +190,7 @@ const OrderManagement: React.FC = () => {
|
|||
<FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) =>
|
||||
setStatusFilter(e.target.value as OrderStatusEnum | "all")
|
||||
}
|
||||
onChange={(e) => setStatusFilter(e.target.value as OrderStatusEnum | 'all')}
|
||||
className="pl-10 pr-4 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="all">Tüm Durumlar</option>
|
||||
|
|
@ -231,9 +199,7 @@ const OrderManagement: React.FC = () => {
|
|||
<option value={OrderStatusEnum.Approved}>Onaylandı</option>
|
||||
<option value={OrderStatusEnum.Sent}>Gönderildi</option>
|
||||
<option value={OrderStatusEnum.Confirmed}>Onaylandı</option>
|
||||
<option value={OrderStatusEnum.PartiallyDelivered}>
|
||||
Kısmi Teslim
|
||||
</option>
|
||||
<option value={OrderStatusEnum.PartiallyDelivered}>Kısmi Teslim</option>
|
||||
<option value={OrderStatusEnum.Delivered}>Teslim Edildi</option>
|
||||
<option value={OrderStatusEnum.Completed}>Tamamlandı</option>
|
||||
<option value={OrderStatusEnum.Cancelled}>İptal Edildi</option>
|
||||
|
|
@ -257,12 +223,10 @@ const OrderManagement: React.FC = () => {
|
|||
onChange={() => handleSelectOrder(order.id)}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<h3 className="text-base font-semibold text-gray-900">
|
||||
{order.orderNumber}
|
||||
</h3>
|
||||
<h3 className="text-base font-semibold text-gray-900">{order.orderNumber}</h3>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getStatusColor(
|
||||
order.status
|
||||
order.status,
|
||||
)}`}
|
||||
>
|
||||
{getStatusIcon(order.status)}
|
||||
|
|
@ -277,8 +241,7 @@ const OrderManagement: React.FC = () => {
|
|||
</div>
|
||||
<p className="text-gray-600 mb-1">{order.requestTitle}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{order.supplier?.name} •{" "}
|
||||
{getRequestTypeText(order.requestType)}
|
||||
{order.supplier?.name} • {getRequestTypeText(order.requestType)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-1">
|
||||
|
|
@ -312,7 +275,7 @@ const OrderManagement: React.FC = () => {
|
|||
<div>
|
||||
<span className="text-sm text-gray-500">Sipariş Tarihi</span>
|
||||
<p className="font-medium text-gray-900">
|
||||
{order.orderDate.toLocaleDateString("tr-TR")}
|
||||
{order.orderDate.toLocaleDateString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -320,13 +283,13 @@ const OrderManagement: React.FC = () => {
|
|||
<p
|
||||
className={`font-medium ${
|
||||
isOverdue(order)
|
||||
? "text-red-600"
|
||||
? 'text-red-600'
|
||||
: getDaysUntilDelivery(order) <= 3
|
||||
? "text-orange-600"
|
||||
: "text-gray-900"
|
||||
? 'text-orange-600'
|
||||
: 'text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{order.expectedDeliveryDate.toLocaleDateString("tr-TR")}
|
||||
{order.expectedDeliveryDate.toLocaleDateString('tr-TR')}
|
||||
{!isOverdue(order) &&
|
||||
getDaysUntilDelivery(order) <= 7 &&
|
||||
getDaysUntilDelivery(order) > 0 && (
|
||||
|
|
@ -367,10 +330,7 @@ const OrderManagement: React.FC = () => {
|
|||
<div className="flex items-center justify-center mb-1">
|
||||
<FaCheckCircle className="w-4 h-4 text-green-400 mr-1" />
|
||||
<span className="font-medium">
|
||||
{order.items.reduce(
|
||||
(sum, item) => sum + item.deliveredQuantity,
|
||||
0
|
||||
)}
|
||||
{order.items.reduce((sum, item) => sum + item.deliveredQuantity, 0)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-gray-500">Teslim</span>
|
||||
|
|
@ -379,10 +339,7 @@ const OrderManagement: React.FC = () => {
|
|||
<div className="flex items-center justify-center mb-1">
|
||||
<FaClock className="w-4 h-4 text-orange-400 mr-1" />
|
||||
<span className="font-medium">
|
||||
{order.items.reduce(
|
||||
(sum, item) => sum + item.remainingQuantity,
|
||||
0
|
||||
)}
|
||||
{order.items.reduce((sum, item) => sum + item.remainingQuantity, 0)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-gray-500">Kalan</span>
|
||||
|
|
@ -392,9 +349,7 @@ const OrderManagement: React.FC = () => {
|
|||
{/* Items Details */}
|
||||
<div className="mt-3">
|
||||
<div className="mb-2">
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-2">
|
||||
Sipariş Kalemleri
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-2">Sipariş Kalemleri</h4>
|
||||
<div className="space-y-2">
|
||||
{order.items.map((item) => (
|
||||
<div key={item.id} className="bg-gray-50 p-2 rounded-lg">
|
||||
|
|
@ -404,8 +359,7 @@ const OrderManagement: React.FC = () => {
|
|||
{item.material?.name || item.description}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Malzeme Kodu:{" "}
|
||||
{item.material?.code || item.materialId} | Miktar:{" "}
|
||||
Malzeme Kodu: {item.material?.code || item.materialId} | Miktar:{' '}
|
||||
{item.quantity} {item.unit} | Birim Fiyat: ₺
|
||||
{item.unitPrice.toLocaleString()}
|
||||
</p>
|
||||
|
|
@ -417,7 +371,7 @@ const OrderManagement: React.FC = () => {
|
|||
<div className="text-xs text-gray-500">
|
||||
<span className="text-green-600">
|
||||
Teslim: {item.deliveredQuantity}
|
||||
</span>{" "}
|
||||
</span>{' '}
|
||||
|
|
||||
<span className="text-orange-600">
|
||||
Kalan: {item.remainingQuantity}
|
||||
|
|
@ -427,8 +381,7 @@ const OrderManagement: React.FC = () => {
|
|||
</div>
|
||||
{item.deliveryDate && (
|
||||
<div className="text-xs text-gray-500">
|
||||
Teslim Tarihi:{" "}
|
||||
{item.deliveryDate.toLocaleDateString("tr-TR")}
|
||||
Teslim Tarihi: {item.deliveryDate.toLocaleDateString('tr-TR')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -443,16 +396,14 @@ const OrderManagement: React.FC = () => {
|
|||
<div className="flex items-center space-x-1">
|
||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-gray-600">
|
||||
{order.creationTime.toLocaleDateString("tr-TR")}
|
||||
{order.creationTime.toLocaleDateString('tr-TR')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{order.approvedBy && (
|
||||
<div className="flex items-center space-x-1">
|
||||
<FaCheckCircle className="w-4 h-4 text-green-400" />
|
||||
<span className="text-gray-600">
|
||||
Onaylayan: {order.approvedBy}
|
||||
</span>
|
||||
<span className="text-gray-600">Onaylayan: {order.approvedBy}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -470,9 +421,7 @@ const OrderManagement: React.FC = () => {
|
|||
{filteredOrders.length === 0 && (
|
||||
<div className="text-center py-8">
|
||||
<FaShoppingCart className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
Sipariş bulunamadı
|
||||
</h3>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Sipariş bulunamadı</h3>
|
||||
<p className="text-gray-500 mb-3">
|
||||
Arama kriterlerinizi değiştirin veya yeni bir sipariş oluşturun.
|
||||
</p>
|
||||
|
|
@ -489,9 +438,7 @@ const OrderManagement: React.FC = () => {
|
|||
{selectedOrders.length > 0 && (
|
||||
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-white rounded-lg shadow-lg border border-gray-200 p-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-sm text-gray-600">
|
||||
{selectedOrders.length} sipariş seçildi
|
||||
</span>
|
||||
<span className="text-sm text-gray-600">{selectedOrders.length} sipariş seçildi</span>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={handleBulkApproval}
|
||||
|
|
@ -515,6 +462,7 @@ const OrderManagement: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bulk Action Modals */}
|
||||
{showBulkModal && (
|
||||
|
|
@ -522,8 +470,8 @@ const OrderManagement: React.FC = () => {
|
|||
<div className="bg-white rounded-lg p-4 w-full max-w-2xl mx-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">
|
||||
{bulkModalType === "approval" && "Toplu Onay İşlemi"}
|
||||
{bulkModalType === "status" && "Toplu Durum Güncelleme"}
|
||||
{bulkModalType === 'approval' && 'Toplu Onay İşlemi'}
|
||||
{bulkModalType === 'status' && 'Toplu Durum Güncelleme'}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowBulkModal(false)}
|
||||
|
|
@ -533,7 +481,7 @@ const OrderManagement: React.FC = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{bulkModalType === "approval" && (
|
||||
{bulkModalType === 'approval' && (
|
||||
<div className="space-y-3">
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
|
||||
<div className="flex items-center">
|
||||
|
|
@ -545,9 +493,7 @@ const OrderManagement: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900">
|
||||
Seçili Siparişler:
|
||||
</h4>
|
||||
<h4 className="font-medium text-gray-900">Seçili Siparişler:</h4>
|
||||
<div className="max-h-40 overflow-y-auto">
|
||||
{orders
|
||||
.filter((order) => selectedOrders.includes(order.id))
|
||||
|
|
@ -559,7 +505,7 @@ const OrderManagement: React.FC = () => {
|
|||
<span className="text-sm">{order.orderNumber}</span>
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded-full ${getStatusColor(
|
||||
order.status
|
||||
order.status,
|
||||
)}`}
|
||||
>
|
||||
{getStatusText(order.status)}
|
||||
|
|
@ -586,7 +532,7 @@ const OrderManagement: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{bulkModalType === "status" && (
|
||||
{bulkModalType === 'status' && (
|
||||
<div className="space-y-3">
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||||
<div className="flex items-center">
|
||||
|
|
@ -604,9 +550,9 @@ const OrderManagement: React.FC = () => {
|
|||
<select
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
onChange={(e) => {
|
||||
const newStatus = e.target.value as OrderStatusEnum;
|
||||
const newStatus = e.target.value as OrderStatusEnum
|
||||
if (newStatus) {
|
||||
processBulkStatusUpdate(newStatus);
|
||||
processBulkStatusUpdate(newStatus)
|
||||
}
|
||||
}}
|
||||
defaultValue=""
|
||||
|
|
@ -616,25 +562,15 @@ const OrderManagement: React.FC = () => {
|
|||
<option value={OrderStatusEnum.Approved}>Onaylandı</option>
|
||||
<option value={OrderStatusEnum.Sent}>Gönderildi</option>
|
||||
<option value={OrderStatusEnum.Confirmed}>Onaylandı</option>
|
||||
<option value={OrderStatusEnum.PartiallyDelivered}>
|
||||
Kısmi Teslim
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Delivered}>
|
||||
Teslim Edildi
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Completed}>
|
||||
Tamamlandı
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Cancelled}>
|
||||
İptal Edildi
|
||||
</option>
|
||||
<option value={OrderStatusEnum.PartiallyDelivered}>Kısmi Teslim</option>
|
||||
<option value={OrderStatusEnum.Delivered}>Teslim Edildi</option>
|
||||
<option value={OrderStatusEnum.Completed}>Tamamlandı</option>
|
||||
<option value={OrderStatusEnum.Cancelled}>İptal Edildi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900">
|
||||
Seçili Siparişler:
|
||||
</h4>
|
||||
<h4 className="font-medium text-gray-900">Seçili Siparişler:</h4>
|
||||
<div className="max-h-40 overflow-y-auto">
|
||||
{orders
|
||||
.filter((order) => selectedOrders.includes(order.id))
|
||||
|
|
@ -646,7 +582,7 @@ const OrderManagement: React.FC = () => {
|
|||
<span className="text-sm">{order.orderNumber}</span>
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded-full ${getStatusColor(
|
||||
order.status
|
||||
order.status,
|
||||
)}`}
|
||||
>
|
||||
{getStatusText(order.status)}
|
||||
|
|
@ -669,8 +605,8 @@ const OrderManagement: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderManagement;
|
||||
export default OrderManagement
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
FaArrowLeft,
|
||||
FaSave,
|
||||
|
|
@ -11,85 +11,76 @@ import {
|
|||
FaTrash,
|
||||
FaMapMarkerAlt,
|
||||
FaUser,
|
||||
} from "react-icons/fa";
|
||||
import {
|
||||
MmPurchaseOrder,
|
||||
OrderStatusEnum,
|
||||
MmPurchaseOrderItem,
|
||||
} from "../../../types/mm";
|
||||
import { mockMaterials } from "../../../mocks/mockMaterials";
|
||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
||||
import { mockPurchaseOrders } from "../../../mocks/mockPurchaseOrders";
|
||||
import { Address, PaymentTerms } from "../../../types/common";
|
||||
} from 'react-icons/fa'
|
||||
import { MmPurchaseOrder, OrderStatusEnum, MmPurchaseOrderItem } from '../../../types/mm'
|
||||
import { mockMaterials } from '../../../mocks/mockMaterials'
|
||||
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||
import { mockPurchaseOrders } from '../../../mocks/mockPurchaseOrders'
|
||||
import { Address, PaymentTerms } from '../../../types/common'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const OrderManagementForm: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const isEdit = id !== undefined && id !== "new";
|
||||
const isView = window.location.pathname.includes("/view/");
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const isEdit = id !== undefined && id !== 'new'
|
||||
const isView = window.location.pathname.includes('/view/')
|
||||
|
||||
// Yeni sipariş için başlangıç şablonu
|
||||
const newOrderDefaults: Partial<MmPurchaseOrder> = {
|
||||
orderNumber: "",
|
||||
supplierId: "",
|
||||
orderNumber: '',
|
||||
supplierId: '',
|
||||
orderDate: new Date(),
|
||||
deliveryDate: new Date(),
|
||||
status: OrderStatusEnum.Draft,
|
||||
paymentTerms: PaymentTerms.Net30,
|
||||
currency: "TRY",
|
||||
currency: 'TRY',
|
||||
exchangeRate: 1,
|
||||
subtotal: 0,
|
||||
taxAmount: 0,
|
||||
totalAmount: 0,
|
||||
items: [],
|
||||
deliveryAddress: {
|
||||
street: "",
|
||||
city: "",
|
||||
state: "",
|
||||
postalCode: "",
|
||||
country: "Türkiye",
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postalCode: '',
|
||||
country: 'Türkiye',
|
||||
},
|
||||
terms: "",
|
||||
notes: "",
|
||||
terms: '',
|
||||
notes: '',
|
||||
receipts: [],
|
||||
};
|
||||
}
|
||||
|
||||
// İlk state (isEdit vs new)
|
||||
const [formData, setFormData] = useState<Partial<MmPurchaseOrder>>(() => {
|
||||
if (isEdit) {
|
||||
const po = mockPurchaseOrders.find((o) => o.id === id);
|
||||
return { ...po };
|
||||
const po = mockPurchaseOrders.find((o) => o.id === id)
|
||||
return { ...po }
|
||||
}
|
||||
return { ...newOrderDefaults };
|
||||
});
|
||||
return { ...newOrderDefaults }
|
||||
})
|
||||
|
||||
// id değişirse formu güncelle
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
const po = mockPurchaseOrders.find((o) => o.id === id);
|
||||
setFormData(po ? { ...po } : { ...newOrderDefaults });
|
||||
const po = mockPurchaseOrders.find((o) => o.id === id)
|
||||
setFormData(po ? { ...po } : { ...newOrderDefaults })
|
||||
} else {
|
||||
setFormData({ ...newOrderDefaults });
|
||||
setFormData({ ...newOrderDefaults })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id, isEdit]);
|
||||
}, [id, isEdit])
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||||
>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const { name, value, type } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
type === "number"
|
||||
? parseFloat(value) || 0
|
||||
: type === "date"
|
||||
? new Date(value)
|
||||
: value,
|
||||
}));
|
||||
};
|
||||
type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
|
||||
}))
|
||||
}
|
||||
|
||||
const handleAddressChange = (field: keyof Address, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
|
|
@ -98,15 +89,15 @@ const OrderManagementForm: React.FC = () => {
|
|||
...prev.deliveryAddress!,
|
||||
[field]: value,
|
||||
},
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const addOrderItem = () => {
|
||||
const newItem: MmPurchaseOrderItem = {
|
||||
id: `item-${Date.now()}`,
|
||||
orderId: formData.id || "",
|
||||
materialId: "",
|
||||
description: "",
|
||||
orderId: formData.id || '',
|
||||
materialId: '',
|
||||
description: '',
|
||||
quantity: 0,
|
||||
unitPrice: 0,
|
||||
totalPrice: 0,
|
||||
|
|
@ -114,91 +105,88 @@ const OrderManagementForm: React.FC = () => {
|
|||
receivedQuantity: 0,
|
||||
deliveredQuantity: 0,
|
||||
remainingQuantity: 0,
|
||||
unit: "",
|
||||
};
|
||||
unit: '',
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: [...(prev.items || []), newItem],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const removeOrderItem = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: prev.items?.filter((_, i) => i !== index) || [],
|
||||
}));
|
||||
calculateTotals();
|
||||
};
|
||||
}))
|
||||
calculateTotals()
|
||||
}
|
||||
|
||||
const updateOrderItem = (
|
||||
index: number,
|
||||
field: keyof MmPurchaseOrderItem,
|
||||
value: string | number | Date | undefined
|
||||
value: string | number | Date | undefined,
|
||||
) => {
|
||||
setFormData((prev) => {
|
||||
const updatedItems =
|
||||
prev.items?.map((item, i) => {
|
||||
if (i === index) {
|
||||
const updatedItem = { ...item, [field]: value };
|
||||
const updatedItem = { ...item, [field]: value }
|
||||
// Auto-calculate total amount when quantity or unit price changes
|
||||
if (field === "quantity" || field === "unitPrice") {
|
||||
updatedItem.totalPrice =
|
||||
(updatedItem.quantity || 0) * (updatedItem.unitPrice || 0);
|
||||
if (field === 'quantity' || field === 'unitPrice') {
|
||||
updatedItem.totalPrice = (updatedItem.quantity || 0) * (updatedItem.unitPrice || 0)
|
||||
updatedItem.remainingQuantity =
|
||||
updatedItem.quantity - (updatedItem.receivedQuantity || 0);
|
||||
updatedItem.quantity - (updatedItem.receivedQuantity || 0)
|
||||
}
|
||||
return updatedItem;
|
||||
return updatedItem
|
||||
}
|
||||
return item;
|
||||
}) || [];
|
||||
return item
|
||||
}) || []
|
||||
|
||||
return {
|
||||
...prev,
|
||||
items: updatedItems,
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// Recalculate totals
|
||||
setTimeout(calculateTotals, 0);
|
||||
};
|
||||
setTimeout(calculateTotals, 0)
|
||||
}
|
||||
|
||||
const calculateTotals = () => {
|
||||
const subtotal =
|
||||
formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) ||
|
||||
0;
|
||||
const taxAmount = subtotal * 0.18; // %18 KDV
|
||||
const totalAmount = subtotal + taxAmount;
|
||||
const subtotal = formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) || 0
|
||||
const taxAmount = subtotal * 0.18 // %18 KDV
|
||||
const totalAmount = subtotal + taxAmount
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
subtotal,
|
||||
taxAmount,
|
||||
totalAmount,
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
// TODO: Implement save logic
|
||||
console.log("Saving purchase order:", formData);
|
||||
navigate("/admin/supplychain/orders");
|
||||
};
|
||||
console.log('Saving purchase order:', formData)
|
||||
navigate('/admin/supplychain/orders')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/admin/supplychain/orders");
|
||||
};
|
||||
navigate('/admin/supplychain/orders')
|
||||
}
|
||||
|
||||
const isReadOnly = isView;
|
||||
const isReadOnly = isView
|
||||
const pageTitle = isEdit
|
||||
? "Satınalma Siparişini Düzenle"
|
||||
? 'Satınalma Siparişini Düzenle'
|
||||
: isView
|
||||
? "Satınalma Siparişi Detayları"
|
||||
: "Yeni Satınalma Siparişi";
|
||||
? 'Satınalma Siparişi Detayları'
|
||||
: 'Yeni Satınalma Siparişi'
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-4">
|
||||
<div className="mx-auto">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow-md p-2 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -217,7 +205,7 @@ const OrderManagementForm: React.FC = () => {
|
|||
className="px-3 py-1.5 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 flex items-center"
|
||||
>
|
||||
<FaTimes className="mr-2" />
|
||||
{isView ? "Kapat" : "İptal"}
|
||||
{isView ? 'Kapat' : 'İptal'}
|
||||
</button>
|
||||
{!isView && (
|
||||
<button
|
||||
|
|
@ -251,7 +239,7 @@ const OrderManagementForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
name="orderNumber"
|
||||
value={formData.orderNumber || ""}
|
||||
value={formData.orderNumber || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly || isEdit}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -265,7 +253,7 @@ const OrderManagementForm: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
name="supplierId"
|
||||
value={formData.supplierId || ""}
|
||||
value={formData.supplierId || ''}
|
||||
onChange={handleInputChange}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -290,10 +278,8 @@ const OrderManagementForm: React.FC = () => {
|
|||
name="orderDate"
|
||||
value={
|
||||
formData.orderDate
|
||||
? new Date(formData.orderDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.orderDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -311,10 +297,8 @@ const OrderManagementForm: React.FC = () => {
|
|||
name="deliveryDate"
|
||||
value={
|
||||
formData.deliveryDate
|
||||
? new Date(formData.deliveryDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.deliveryDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -345,12 +329,10 @@ const OrderManagementForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Para Birimi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Para Birimi</label>
|
||||
<select
|
||||
name="currency"
|
||||
value={formData.currency || "TRY"}
|
||||
value={formData.currency || 'TRY'}
|
||||
onChange={handleInputChange}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -367,7 +349,7 @@ const OrderManagementForm: React.FC = () => {
|
|||
</label>
|
||||
<textarea
|
||||
name="terms"
|
||||
value={formData.terms || ""}
|
||||
value={formData.terms || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
rows={2}
|
||||
|
|
@ -376,12 +358,10 @@ const OrderManagementForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Notlar
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Notlar</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
value={formData.notes || ""}
|
||||
value={formData.notes || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
rows={1}
|
||||
|
|
@ -400,75 +380,55 @@ const OrderManagementForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Adres
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Adres</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.deliveryAddress?.street || ""}
|
||||
onChange={(e) =>
|
||||
handleAddressChange("street", e.target.value)
|
||||
}
|
||||
value={formData.deliveryAddress?.street || ''}
|
||||
onChange={(e) => handleAddressChange('street', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Şehir
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Şehir</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.deliveryAddress?.city || ""}
|
||||
onChange={(e) =>
|
||||
handleAddressChange("city", e.target.value)
|
||||
}
|
||||
value={formData.deliveryAddress?.city || ''}
|
||||
onChange={(e) => handleAddressChange('city', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
İl/Bölge
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">İl/Bölge</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.deliveryAddress?.state || ""}
|
||||
onChange={(e) =>
|
||||
handleAddressChange("state", e.target.value)
|
||||
}
|
||||
value={formData.deliveryAddress?.state || ''}
|
||||
onChange={(e) => handleAddressChange('state', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Posta Kodu
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Posta Kodu</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.deliveryAddress?.postalCode || ""}
|
||||
onChange={(e) =>
|
||||
handleAddressChange("postalCode", e.target.value)
|
||||
}
|
||||
value={formData.deliveryAddress?.postalCode || ''}
|
||||
onChange={(e) => handleAddressChange('postalCode', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Ülke
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Ülke</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.deliveryAddress?.country || ""}
|
||||
onChange={(e) =>
|
||||
handleAddressChange("country", e.target.value)
|
||||
}
|
||||
value={formData.deliveryAddress?.country || ''}
|
||||
onChange={(e) => handleAddressChange('country', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -479,9 +439,7 @@ const OrderManagementForm: React.FC = () => {
|
|||
{/* Sipariş Kalemleri */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Sipariş Kalemleri
|
||||
</h3>
|
||||
<h3 className="text-lg font-medium text-gray-900">Sipariş Kalemleri</h3>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -496,14 +454,9 @@ const OrderManagementForm: React.FC = () => {
|
|||
|
||||
<div className="space-y-3">
|
||||
{formData.items?.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border rounded-lg p-3 bg-gray-50"
|
||||
>
|
||||
<div key={item.id} className="border rounded-lg p-3 bg-gray-50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Kalem {index + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -517,18 +470,10 @@ const OrderManagementForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Malzeme
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Malzeme</label>
|
||||
<select
|
||||
value={item.materialId}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"materialId",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onChange={(e) => updateOrderItem(index, 'materialId', e.target.value)}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
|
|
@ -548,31 +493,19 @@ const OrderManagementForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
value={item.description}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"description",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onChange={(e) => updateOrderItem(index, 'description', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Miktar
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Miktar</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"quantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
updateOrderItem(index, 'quantity', parseFloat(e.target.value) || 0)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
min="0"
|
||||
|
|
@ -589,11 +522,7 @@ const OrderManagementForm: React.FC = () => {
|
|||
type="number"
|
||||
value={item.unitPrice}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"unitPrice",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
updateOrderItem(index, 'unitPrice', parseFloat(e.target.value) || 0)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
min="0"
|
||||
|
|
@ -622,17 +551,11 @@ const OrderManagementForm: React.FC = () => {
|
|||
type="date"
|
||||
value={
|
||||
item.deliveryDate
|
||||
? new Date(item.deliveryDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(item.deliveryDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"deliveryDate",
|
||||
new Date(e.target.value)
|
||||
)
|
||||
updateOrderItem(index, 'deliveryDate', new Date(e.target.value))
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -649,8 +572,8 @@ const OrderManagementForm: React.FC = () => {
|
|||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"receivedQuantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
'receivedQuantity',
|
||||
parseFloat(e.target.value) || 0,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -678,13 +601,9 @@ const OrderManagementForm: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.specifications || ""}
|
||||
value={item.specifications || ''}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"specifications",
|
||||
e.target.value
|
||||
)
|
||||
updateOrderItem(index, 'specifications', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -697,13 +616,9 @@ const OrderManagementForm: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.qualityRequirements || ""}
|
||||
value={item.qualityRequirements || ''}
|
||||
onChange={(e) =>
|
||||
updateOrderItem(
|
||||
index,
|
||||
"qualityRequirements",
|
||||
e.target.value
|
||||
)
|
||||
updateOrderItem(index, 'qualityRequirements', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -726,15 +641,11 @@ const OrderManagementForm: React.FC = () => {
|
|||
<div className="space-y-4">
|
||||
{/* Durum ve Tutar */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-3">
|
||||
Durum Bilgileri
|
||||
</h3>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Durum
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Durum</label>
|
||||
<select
|
||||
name="status"
|
||||
value={formData.status || OrderStatusEnum.Draft}
|
||||
|
|
@ -744,29 +655,17 @@ const OrderManagementForm: React.FC = () => {
|
|||
>
|
||||
<option value={OrderStatusEnum.Draft}>Taslak</option>
|
||||
<option value={OrderStatusEnum.Sent}>Gönderildi</option>
|
||||
<option value={OrderStatusEnum.Confirmed}>
|
||||
Onaylandı
|
||||
</option>
|
||||
<option value={OrderStatusEnum.PartiallyReceived}>
|
||||
Kısmi Teslim
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Received}>
|
||||
Teslim Alındı
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Invoiced}>
|
||||
Faturalandı
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Confirmed}>Onaylandı</option>
|
||||
<option value={OrderStatusEnum.PartiallyReceived}>Kısmi Teslim</option>
|
||||
<option value={OrderStatusEnum.Received}>Teslim Alındı</option>
|
||||
<option value={OrderStatusEnum.Invoiced}>Faturalandı</option>
|
||||
<option value={OrderStatusEnum.Closed}>Kapatıldı</option>
|
||||
<option value={OrderStatusEnum.Cancelled}>
|
||||
İptal Edildi
|
||||
</option>
|
||||
<option value={OrderStatusEnum.Cancelled}>İptal Edildi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Döviz Kuru
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Döviz Kuru</label>
|
||||
<input
|
||||
type="number"
|
||||
name="exchangeRate"
|
||||
|
|
@ -805,12 +704,9 @@ const OrderManagementForm: React.FC = () => {
|
|||
|
||||
<div className="border-t pt-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-lg font-medium text-gray-900">
|
||||
Genel Toplam:
|
||||
</span>
|
||||
<span className="text-lg font-medium text-gray-900">Genel Toplam:</span>
|
||||
<span className="text-lg font-bold text-green-600">
|
||||
{formData.totalAmount?.toLocaleString()}{" "}
|
||||
{formData.currency}
|
||||
{formData.totalAmount?.toLocaleString()} {formData.currency}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -820,27 +716,18 @@ const OrderManagementForm: React.FC = () => {
|
|||
{/* Sipariş Geçmişi (sadece görüntüleme) */}
|
||||
{isView && formData.receipts && formData.receipts.length > 0 && (
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">
|
||||
Teslimat Geçmişi
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">Teslimat Geçmişi</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
{formData.receipts.map((receipt) => (
|
||||
<div
|
||||
key={receipt.id}
|
||||
className="border-l-4 border-green-500 pl-4"
|
||||
>
|
||||
<div key={receipt.id} className="border-l-4 border-green-500 pl-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{receipt.receiptNumber}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{new Date(receipt.receiptDate).toLocaleDateString(
|
||||
"tr-TR"
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">
|
||||
Durumu: {receipt.status}
|
||||
{new Date(receipt.receiptDate).toLocaleDateString('tr-TR')}
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">Durumu: {receipt.status}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -850,8 +737,8 @@ const OrderManagementForm: React.FC = () => {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderManagementForm;
|
||||
export default OrderManagementForm
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
FaArrowLeft,
|
||||
FaSave,
|
||||
|
|
@ -9,135 +9,127 @@ import {
|
|||
FaExclamationTriangle,
|
||||
FaPlus,
|
||||
FaTrash,
|
||||
} from "react-icons/fa";
|
||||
} from 'react-icons/fa'
|
||||
import {
|
||||
MmPurchaseRequest,
|
||||
RequestTypeEnum,
|
||||
RequestStatusEnum,
|
||||
MmPurchaseRequestItem,
|
||||
} from "../../../types/mm";
|
||||
import { mockMaterials } from "../../../mocks/mockMaterials";
|
||||
import { mockPurchaseRequests } from "../../../mocks/mockPurchaseRequests";
|
||||
import { PriorityEnum } from "../../../types/common";
|
||||
} from '../../../types/mm'
|
||||
import { mockMaterials } from '../../../mocks/mockMaterials'
|
||||
import { mockPurchaseRequests } from '../../../mocks/mockPurchaseRequests'
|
||||
import { PriorityEnum } from '../../../types/common'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const PurchaseRequestForm: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const isEdit = id !== undefined && id !== "new";
|
||||
const isView = window.location.pathname.includes("/view/");
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const isEdit = id !== undefined && id !== 'new'
|
||||
const isView = window.location.pathname.includes('/view/')
|
||||
|
||||
// Yeni kayıt için başlangıç şablonu
|
||||
const newRequestDefaults: Partial<MmPurchaseRequest> = {
|
||||
requestNumber: "",
|
||||
requestNumber: '',
|
||||
requestType: RequestTypeEnum.Material,
|
||||
description: "",
|
||||
department: "",
|
||||
requestedBy: "",
|
||||
description: '',
|
||||
department: '',
|
||||
requestedBy: '',
|
||||
requestDate: new Date(),
|
||||
requiredDate: new Date(),
|
||||
priority: PriorityEnum.Normal,
|
||||
status: RequestStatusEnum.Draft,
|
||||
currency: "TRY",
|
||||
currency: 'TRY',
|
||||
items: [],
|
||||
approvals: [],
|
||||
attachments: [],
|
||||
comments: [],
|
||||
};
|
||||
}
|
||||
|
||||
// isEdit & id'ye göre ilk state
|
||||
const [formData, setFormData] = useState<Partial<MmPurchaseRequest>>(() => {
|
||||
if (isEdit) {
|
||||
const pr = mockPurchaseRequests.find((a) => a.id === id); // DİKKAT: === kullan
|
||||
return { ...pr };
|
||||
const pr = mockPurchaseRequests.find((a) => a.id === id) // DİKKAT: === kullan
|
||||
return { ...pr }
|
||||
}
|
||||
// new
|
||||
return { ...newRequestDefaults };
|
||||
});
|
||||
return { ...newRequestDefaults }
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
const pr = mockPurchaseRequests.find((a) => a.id === id);
|
||||
setFormData({ ...pr });
|
||||
const pr = mockPurchaseRequests.find((a) => a.id === id)
|
||||
setFormData({ ...pr })
|
||||
} else {
|
||||
setFormData({ ...newRequestDefaults });
|
||||
setFormData({ ...newRequestDefaults })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id, isEdit]);
|
||||
}, [id, isEdit])
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||||
>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const { name, value, type } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
type === "number"
|
||||
? parseFloat(value) || 0
|
||||
: type === "date"
|
||||
? new Date(value)
|
||||
: value,
|
||||
}));
|
||||
};
|
||||
type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
|
||||
}))
|
||||
}
|
||||
|
||||
const addRequestItem = () => {
|
||||
const newItem: MmPurchaseRequestItem = {
|
||||
id: `item-${Date.now()}`,
|
||||
requestId: formData.id || "",
|
||||
requestId: formData.id || '',
|
||||
quantity: 0,
|
||||
unit: "",
|
||||
unit: '',
|
||||
isUrgent: false,
|
||||
};
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: [...(prev.items || []), newItem],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const removeRequestItem = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: prev.items?.filter((_, i) => i !== index) || [],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const updateRequestItem = (
|
||||
index: number,
|
||||
field: keyof MmPurchaseRequestItem,
|
||||
value: string | number | boolean | undefined
|
||||
value: string | number | boolean | undefined,
|
||||
) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items:
|
||||
prev.items?.map((item, i) =>
|
||||
i === index ? { ...item, [field]: value } : item
|
||||
) || [],
|
||||
}));
|
||||
};
|
||||
items: prev.items?.map((item, i) => (i === index ? { ...item, [field]: value } : item)) || [],
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
// TODO: Implement save logic
|
||||
console.log("Saving purchase request:", formData);
|
||||
navigate("/admin/supplychain/requests");
|
||||
};
|
||||
console.log('Saving purchase request:', formData)
|
||||
navigate('/admin/supplychain/requests')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/admin/supplychain/requests");
|
||||
};
|
||||
navigate('/admin/supplychain/requests')
|
||||
}
|
||||
|
||||
const isReadOnly = isView;
|
||||
const isReadOnly = isView
|
||||
const pageTitle = isEdit
|
||||
? "Satınalma Talebini Düzenle"
|
||||
? 'Satınalma Talebini Düzenle'
|
||||
: isView
|
||||
? "Satınalma Talebi Detayları"
|
||||
: "Yeni Satınalma Talebi";
|
||||
? 'Satınalma Talebi Detayları'
|
||||
: 'Yeni Satınalma Talebi'
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-4">
|
||||
<div className="mx-auto">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow-md p-2 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -156,7 +148,7 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
className="px-3 py-1.5 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 flex items-center"
|
||||
>
|
||||
<FaTimes className="mr-2" />
|
||||
{isView ? "Kapat" : "İptal"}
|
||||
{isView ? 'Kapat' : 'İptal'}
|
||||
</button>
|
||||
{!isView && (
|
||||
<button
|
||||
|
|
@ -189,7 +181,7 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
name="requestNumber"
|
||||
value={formData.requestNumber || ""}
|
||||
value={formData.requestNumber || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly || isEdit}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -197,9 +189,7 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Talep Tipi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Talep Tipi</label>
|
||||
<select
|
||||
name="requestType"
|
||||
value={formData.requestType || RequestTypeEnum.Material}
|
||||
|
|
@ -209,20 +199,16 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
>
|
||||
<option value={RequestTypeEnum.Material}>Malzeme</option>
|
||||
<option value={RequestTypeEnum.Service}>Hizmet</option>
|
||||
<option value={RequestTypeEnum.WorkCenter}>
|
||||
İş Merkezi
|
||||
</option>
|
||||
<option value={RequestTypeEnum.WorkCenter}>İş Merkezi</option>
|
||||
<option value={RequestTypeEnum.Maintenance}>Bakım</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Açıklama
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Açıklama</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description || ""}
|
||||
value={formData.description || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
rows={2}
|
||||
|
|
@ -232,13 +218,11 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Departman
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Departman</label>
|
||||
<input
|
||||
type="text"
|
||||
name="department"
|
||||
value={formData.department || ""}
|
||||
value={formData.department || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -247,13 +231,11 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Talep Eden
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Talep Eden</label>
|
||||
<input
|
||||
type="text"
|
||||
name="requestedBy"
|
||||
value={formData.requestedBy || ""}
|
||||
value={formData.requestedBy || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -271,10 +253,8 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
name="requestDate"
|
||||
value={
|
||||
formData.requestDate
|
||||
? new Date(formData.requestDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.requestDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -292,10 +272,8 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
name="requiredDate"
|
||||
value={
|
||||
formData.requiredDate
|
||||
? new Date(formData.requiredDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.requiredDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -323,12 +301,10 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Para Birimi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Para Birimi</label>
|
||||
<select
|
||||
name="currency"
|
||||
value={formData.currency || "TRY"}
|
||||
value={formData.currency || 'TRY'}
|
||||
onChange={handleInputChange}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -344,9 +320,7 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
{/* Talep Kalemleri */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
Talep Kalemleri
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900">Talep Kalemleri</h3>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -361,14 +335,9 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
|
||||
<div className="space-y-3">
|
||||
{formData.items?.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border rounded-lg p-3 bg-gray-50"
|
||||
>
|
||||
<div key={item.id} className="border rounded-lg p-3 bg-gray-50">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Kalem {index + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -382,18 +351,10 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Malzeme
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Malzeme</label>
|
||||
<select
|
||||
value={item.materialId || ""}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"materialId",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
value={item.materialId || ''}
|
||||
onChange={(e) => updateRequestItem(index, 'materialId', e.target.value)}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
|
|
@ -412,13 +373,9 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.serviceDescription || ""}
|
||||
value={item.serviceDescription || ''}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"serviceDescription",
|
||||
e.target.value
|
||||
)
|
||||
updateRequestItem(index, 'serviceDescription', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -426,18 +383,12 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Miktar
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Miktar</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"quantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
updateRequestItem(index, 'quantity', parseFloat(e.target.value) || 0)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
min="0"
|
||||
|
|
@ -447,15 +398,11 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Birim
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Birim</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.unit}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(index, "unit", e.target.value)
|
||||
}
|
||||
onChange={(e) => updateRequestItem(index, 'unit', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -467,12 +414,12 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.estimatedPrice || ""}
|
||||
value={item.estimatedPrice || ''}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"estimatedPrice",
|
||||
parseFloat(e.target.value) || undefined
|
||||
'estimatedPrice',
|
||||
parseFloat(e.target.value) || undefined,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -488,11 +435,7 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
type="checkbox"
|
||||
checked={item.isUrgent}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"isUrgent",
|
||||
e.target.checked
|
||||
)
|
||||
updateRequestItem(index, 'isUrgent', e.target.checked)
|
||||
}
|
||||
disabled={isReadOnly}
|
||||
className="mr-1"
|
||||
|
|
@ -507,13 +450,9 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.specification || ""}
|
||||
value={item.specification || ''}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"specification",
|
||||
e.target.value
|
||||
)
|
||||
updateRequestItem(index, 'specification', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -521,18 +460,12 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Gerekçe
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Gerekçe</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.justification || ""}
|
||||
value={item.justification || ''}
|
||||
onChange={(e) =>
|
||||
updateRequestItem(
|
||||
index,
|
||||
"justification",
|
||||
e.target.value
|
||||
)
|
||||
updateRequestItem(index, 'justification', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -554,15 +487,11 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
{/* Yan Panel - Durum ve Onaylar */}
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">
|
||||
Durum Bilgileri
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Durum
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Durum</label>
|
||||
<select
|
||||
name="status"
|
||||
value={formData.status || RequestStatusEnum.Draft}
|
||||
|
|
@ -571,21 +500,11 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value={RequestStatusEnum.Draft}>Taslak</option>
|
||||
<option value={RequestStatusEnum.Submitted}>
|
||||
Gönderildi
|
||||
</option>
|
||||
<option value={RequestStatusEnum.InReview}>
|
||||
İncelemede
|
||||
</option>
|
||||
<option value={RequestStatusEnum.Approved}>
|
||||
Onaylandı
|
||||
</option>
|
||||
<option value={RequestStatusEnum.Rejected}>
|
||||
Reddedildi
|
||||
</option>
|
||||
<option value={RequestStatusEnum.Cancelled}>
|
||||
İptal Edildi
|
||||
</option>
|
||||
<option value={RequestStatusEnum.Submitted}>Gönderildi</option>
|
||||
<option value={RequestStatusEnum.InReview}>İncelemede</option>
|
||||
<option value={RequestStatusEnum.Approved}>Onaylandı</option>
|
||||
<option value={RequestStatusEnum.Rejected}>Reddedildi</option>
|
||||
<option value={RequestStatusEnum.Cancelled}>İptal Edildi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -595,8 +514,7 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
Toplam Tutar
|
||||
</label>
|
||||
<div className="mt-1 text-base font-semibold text-green-600">
|
||||
{formData.totalAmount?.toLocaleString()}{" "}
|
||||
{formData.currency}
|
||||
{formData.totalAmount?.toLocaleString()} {formData.currency}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -604,46 +522,36 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Onay Geçmişi (sadece görüntüleme) */}
|
||||
{isView &&
|
||||
formData.approvals &&
|
||||
formData.approvals.length > 0 && (
|
||||
{isView && formData.approvals && formData.approvals.length > 0 && (
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">
|
||||
Onay Geçmişi
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">Onay Geçmişi</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{formData.approvals.map((approval) => (
|
||||
<div
|
||||
key={approval.id}
|
||||
className="border-l-4 border-blue-500 pl-4"
|
||||
>
|
||||
<div key={approval.id} className="border-l-4 border-blue-500 pl-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{approval.approverName}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{approval.approvalLevel} - Seviye{" "}
|
||||
{approval.sequence}
|
||||
{approval.approvalLevel} - Seviye {approval.sequence}
|
||||
</div>
|
||||
<div
|
||||
className={`text-xs mt-1 ${
|
||||
approval.status === "APPROVED"
|
||||
? "text-green-600"
|
||||
: approval.status === "REJECTED"
|
||||
? "text-red-600"
|
||||
: "text-yellow-600"
|
||||
approval.status === 'APPROVED'
|
||||
? 'text-green-600'
|
||||
: approval.status === 'REJECTED'
|
||||
? 'text-red-600'
|
||||
: 'text-yellow-600'
|
||||
}`}
|
||||
>
|
||||
{approval.status === "APPROVED"
|
||||
? "Onaylandı"
|
||||
: approval.status === "REJECTED"
|
||||
? "Reddedildi"
|
||||
: "Beklemede"}
|
||||
{approval.status === 'APPROVED'
|
||||
? 'Onaylandı'
|
||||
: approval.status === 'REJECTED'
|
||||
? 'Reddedildi'
|
||||
: 'Beklemede'}
|
||||
</div>
|
||||
{approval.comments && (
|
||||
<div className="text-xs text-gray-600 mt-1">
|
||||
{approval.comments}
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 mt-1">{approval.comments}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -654,8 +562,8 @@ const PurchaseRequestForm: React.FC = () => {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default PurchaseRequestForm;
|
||||
export default PurchaseRequestForm
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import {
|
|||
getRequestStatusColor,
|
||||
getRequestStatusText,
|
||||
} from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const PurchaseRequests: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
|
|
@ -60,7 +61,8 @@ const PurchaseRequests: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
|
|
@ -127,7 +129,9 @@ const PurchaseRequests: React.FC = () => {
|
|||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-1.5">
|
||||
<FaFileAlt className="w-5 h-5 text-gray-600" />
|
||||
<h4 className="text-lg font-semibold text-gray-900">{request.requestNumber}</h4>
|
||||
<h4 className="text-lg font-semibold text-gray-900">
|
||||
{request.requestNumber}
|
||||
</h4>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
|
||||
request.requestType,
|
||||
|
|
@ -282,6 +286,7 @@ const PurchaseRequests: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
FaFileAlt,
|
||||
FaPlus,
|
||||
|
|
@ -14,64 +14,54 @@ import {
|
|||
FaExclamationTriangle,
|
||||
FaUser,
|
||||
FaCalendar,
|
||||
} from "react-icons/fa";
|
||||
import classNames from "classnames";
|
||||
import { RequisitionStatusEnum } from "../../../types/mm";
|
||||
import dayjs from "dayjs";
|
||||
import { mockPurchaseRequisitions } from "../../../mocks/mockPurchaseRequisitions";
|
||||
import { PriorityEnum } from "../../../types/common";
|
||||
} from 'react-icons/fa'
|
||||
import classNames from 'classnames'
|
||||
import { RequisitionStatusEnum } from '../../../types/mm'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockPurchaseRequisitions } from '../../../mocks/mockPurchaseRequisitions'
|
||||
import { PriorityEnum } from '../../../types/common'
|
||||
import {
|
||||
getPriorityColor,
|
||||
getPriorityText,
|
||||
getRequisitionStatusColor,
|
||||
getRequisitionStatusIcon,
|
||||
getRequisitionStatusText,
|
||||
} from "../../../utils/erp";
|
||||
} from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const PurchaseRequisitionList: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filterStatus, setFilterStatus] = useState("all");
|
||||
const [filterPriority, setFilterPriority] = useState("all");
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [filterStatus, setFilterStatus] = useState('all')
|
||||
const [filterPriority, setFilterPriority] = useState('all')
|
||||
const [showFilters, setShowFilters] = useState(false)
|
||||
|
||||
const {
|
||||
data: requisitions,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: [
|
||||
"purchase-requisitions",
|
||||
searchTerm,
|
||||
filterStatus,
|
||||
filterPriority,
|
||||
],
|
||||
queryKey: ['purchase-requisitions', searchTerm, filterStatus, filterPriority],
|
||||
queryFn: async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
return mockPurchaseRequisitions.filter((req) => {
|
||||
const matchesSearch =
|
||||
req.requisitionNumber
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()) ||
|
||||
req.requisitionNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
req.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
req.requestedBy.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesStatus =
|
||||
filterStatus === "all" || req.status === filterStatus;
|
||||
const matchesPriority =
|
||||
filterPriority === "all" || req.priority === filterPriority;
|
||||
return matchesSearch && matchesStatus && matchesPriority;
|
||||
});
|
||||
req.requestedBy.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesStatus = filterStatus === 'all' || req.status === filterStatus
|
||||
const matchesPriority = filterPriority === 'all' || req.priority === filterPriority
|
||||
return matchesSearch && matchesStatus && matchesPriority
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<span className="ml-3 text-gray-600">
|
||||
Satınalma talepleri yükleniyor...
|
||||
</span>
|
||||
<span className="ml-3 text-gray-600">Satınalma talepleri yükleniyor...</span>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
|
|
@ -79,16 +69,15 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<div className="flex items-center">
|
||||
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
||||
<span className="text-red-800">
|
||||
Satınalma talepleri yüklenirken hata oluştu.
|
||||
</span>
|
||||
<span className="text-red-800">Satınalma talepleri yüklenirken hata oluştu.</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header Actions */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
|
|
@ -109,10 +98,10 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={classNames(
|
||||
"flex items-center px-3 py-1.5 border rounded-lg transition-colors",
|
||||
'flex items-center px-3 py-1.5 border rounded-lg transition-colors',
|
||||
showFilters
|
||||
? "border-blue-500 bg-blue-50 text-blue-700"
|
||||
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
|
||||
)}
|
||||
>
|
||||
<FaFilter size={16} className="mr-2" />
|
||||
|
|
@ -122,7 +111,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
|
||||
<div className="flex items-center space-x-3">
|
||||
<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 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<FaDownload size={16} className="mr-2" />
|
||||
|
|
@ -144,9 +133,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<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>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Durum
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Durum</label>
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value)}
|
||||
|
|
@ -154,23 +141,15 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
>
|
||||
<option value="all">Tümü</option>
|
||||
<option value={RequisitionStatusEnum.Draft}>Taslak</option>
|
||||
<option value={RequisitionStatusEnum.Submitted}>
|
||||
Gönderildi
|
||||
</option>
|
||||
<option value={RequisitionStatusEnum.Submitted}>Gönderildi</option>
|
||||
<option value={RequisitionStatusEnum.InApproval}>Onayda</option>
|
||||
<option value={RequisitionStatusEnum.Approved}>
|
||||
Onaylandı
|
||||
</option>
|
||||
<option value={RequisitionStatusEnum.Rejected}>
|
||||
Reddedildi
|
||||
</option>
|
||||
<option value={RequisitionStatusEnum.Approved}>Onaylandı</option>
|
||||
<option value={RequisitionStatusEnum.Rejected}>Reddedildi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Öncelik
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Öncelik</label>
|
||||
<select
|
||||
value={filterPriority}
|
||||
onChange={(e) => setFilterPriority(e.target.value)}
|
||||
|
|
@ -187,9 +166,9 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="flex items-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
setFilterStatus("all");
|
||||
setFilterPriority("all");
|
||||
setSearchTerm("");
|
||||
setFilterStatus('all')
|
||||
setFilterPriority('all')
|
||||
setSearchTerm('')
|
||||
}}
|
||||
className="w-full px-3 py-1.5 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
|
|
@ -206,9 +185,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Toplam Talep</p>
|
||||
<p className="text-xl font-bold text-gray-900">
|
||||
{requisitions?.length || 0}
|
||||
</p>
|
||||
<p className="text-xl font-bold text-gray-900">{requisitions?.length || 0}</p>
|
||||
</div>
|
||||
<FaFileAlt className="h-8 w-8 text-blue-600" />
|
||||
</div>
|
||||
|
|
@ -219,9 +196,8 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Onay Bekleyen</p>
|
||||
<p className="text-xl font-bold text-yellow-600">
|
||||
{requisitions?.filter(
|
||||
(r) => r.status === RequisitionStatusEnum.InApproval
|
||||
).length || 0}
|
||||
{requisitions?.filter((r) => r.status === RequisitionStatusEnum.InApproval)
|
||||
.length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<FaClock className="h-8 w-8 text-yellow-600" />
|
||||
|
|
@ -233,9 +209,8 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Onaylanan</p>
|
||||
<p className="text-xl font-bold text-green-600">
|
||||
{requisitions?.filter(
|
||||
(r) => r.status === RequisitionStatusEnum.Approved
|
||||
).length || 0}
|
||||
{requisitions?.filter((r) => r.status === RequisitionStatusEnum.Approved)
|
||||
.length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<FaCheckCircle className="h-8 w-8 text-green-600" />
|
||||
|
|
@ -247,8 +222,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Acil Talepler</p>
|
||||
<p className="text-xl font-bold text-red-600">
|
||||
{requisitions?.filter((r) => r.priority === PriorityEnum.Urgent)
|
||||
.length || 0}
|
||||
{requisitions?.filter((r) => r.priority === PriorityEnum.Urgent).length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<FaExclamationTriangle className="h-8 w-8 text-red-600" />
|
||||
|
|
@ -259,9 +233,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
{/* Requisitions Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="px-4 py-3 border-b border-gray-200">
|
||||
<h2 className="text-xl font-bold text-gray-900">
|
||||
Satınalma Talepleri
|
||||
</h2>
|
||||
<h2 className="text-xl font-bold text-gray-900">Satınalma Talepleri</h2>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
|
|
@ -294,10 +266,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{requisitions?.map((requisition) => (
|
||||
<tr
|
||||
key={requisition.id}
|
||||
className="hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<tr key={requisition.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-10 w-10">
|
||||
|
|
@ -320,12 +289,8 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="flex items-center text-sm">
|
||||
<FaUser size={16} className="text-gray-400 mr-2" />
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">
|
||||
{requisition.requestedBy}
|
||||
</div>
|
||||
<div className="text-gray-500">
|
||||
{requisition.departmentId}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900">{requisition.requestedBy}</div>
|
||||
<div className="text-gray-500">{requisition.departmentId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -334,16 +299,16 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="space-y-2">
|
||||
<div
|
||||
className={classNames(
|
||||
"text-sm font-medium",
|
||||
getPriorityColor(requisition.priority)
|
||||
'text-sm font-medium',
|
||||
getPriorityColor(requisition.priority),
|
||||
)}
|
||||
>
|
||||
{getPriorityText(requisition.priority)}
|
||||
</div>
|
||||
<span
|
||||
className={classNames(
|
||||
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
|
||||
getRequisitionStatusColor(requisition.status)
|
||||
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
|
||||
getRequisitionStatusColor(requisition.status),
|
||||
)}
|
||||
>
|
||||
{getRequisitionStatusIcon(requisition.status)}
|
||||
|
|
@ -358,11 +323,10 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="space-y-1">
|
||||
<div className="flex items-center text-sm text-gray-900">
|
||||
<FaCalendar size={14} className="mr-1" />
|
||||
{dayjs(requisition.requestDate).format("DD.MM.YYYY")}
|
||||
{dayjs(requisition.requestDate).format('DD.MM.YYYY')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
İhtiyaç:{" "}
|
||||
{dayjs(requisition.requiredDate).format("DD.MM.YYYY")}
|
||||
İhtiyaç: {dayjs(requisition.requiredDate).format('DD.MM.YYYY')}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -371,9 +335,7 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
<div className="text-sm font-medium text-gray-900">
|
||||
₺{requisition.totalAmount.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{requisition.currency}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{requisition.currency}</div>
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-3">
|
||||
|
|
@ -431,7 +393,8 @@ const PurchaseRequisitionList: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default PurchaseRequisitionList;
|
||||
export default PurchaseRequisitionList
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import React, { useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
FaArrowLeft,
|
||||
FaSave,
|
||||
|
|
@ -10,153 +10,139 @@ import {
|
|||
FaPlus,
|
||||
FaTrash,
|
||||
FaPaperclip,
|
||||
} from "react-icons/fa";
|
||||
} from 'react-icons/fa'
|
||||
import {
|
||||
MmQuotation,
|
||||
QuotationStatusEnum,
|
||||
RequestTypeEnum,
|
||||
MmQuotationItem,
|
||||
MmAttachment,
|
||||
} from "../../../types/mm";
|
||||
import { mockMaterials } from "../../../mocks/mockMaterials";
|
||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
||||
} from '../../../types/mm'
|
||||
import { mockMaterials } from '../../../mocks/mockMaterials'
|
||||
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const QuotationForm: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const isEdit = id !== undefined && id !== "new";
|
||||
const isView = window.location.pathname.includes("/view/");
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const isEdit = id !== undefined && id !== 'new'
|
||||
const isView = window.location.pathname.includes('/view/')
|
||||
|
||||
const [formData, setFormData] = useState<Partial<MmQuotation>>({
|
||||
quotationNumber: isEdit ? `TEK-2024-${id}` : "",
|
||||
requestId: "",
|
||||
requestTitle: "",
|
||||
quotationNumber: isEdit ? `TEK-2024-${id}` : '',
|
||||
requestId: '',
|
||||
requestTitle: '',
|
||||
requestType: RequestTypeEnum.Material,
|
||||
supplierId: "",
|
||||
supplierId: '',
|
||||
quotationDate: new Date(),
|
||||
validUntil: new Date(),
|
||||
status: QuotationStatusEnum.Draft,
|
||||
totalAmount: 0,
|
||||
currency: "TRY",
|
||||
paymentTerms: "",
|
||||
deliveryTerms: "",
|
||||
currency: 'TRY',
|
||||
paymentTerms: '',
|
||||
deliveryTerms: '',
|
||||
items: [],
|
||||
attachments: [],
|
||||
notes: "",
|
||||
});
|
||||
notes: '',
|
||||
})
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||||
>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const { name, value, type } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
type === "number"
|
||||
? parseFloat(value) || 0
|
||||
: type === "date"
|
||||
? new Date(value)
|
||||
: value,
|
||||
}));
|
||||
};
|
||||
type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
|
||||
}))
|
||||
}
|
||||
|
||||
const addQuotationItem = () => {
|
||||
const newItem: MmQuotationItem = {
|
||||
id: `item-${Date.now()}`,
|
||||
materialCode: "",
|
||||
materialName: "",
|
||||
description: "",
|
||||
materialCode: '',
|
||||
materialName: '',
|
||||
description: '',
|
||||
quantity: 0,
|
||||
unit: "",
|
||||
unit: '',
|
||||
unitPrice: 0,
|
||||
totalPrice: 0,
|
||||
specifications: [],
|
||||
};
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: [...(prev.items || []), newItem],
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const removeQuotationItem = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
items: prev.items?.filter((_, i) => i !== index) || [],
|
||||
}));
|
||||
calculateTotal();
|
||||
};
|
||||
}))
|
||||
calculateTotal()
|
||||
}
|
||||
|
||||
const updateQuotationItem = (
|
||||
index: number,
|
||||
field: keyof MmQuotationItem,
|
||||
value: string | number | string[] | undefined
|
||||
value: string | number | string[] | undefined,
|
||||
) => {
|
||||
setFormData((prev) => {
|
||||
const updatedItems =
|
||||
prev.items?.map((item, i) => {
|
||||
if (i === index) {
|
||||
const updatedItem = { ...item, [field]: value };
|
||||
const updatedItem = { ...item, [field]: value }
|
||||
// Auto-calculate total price when quantity or unit price changes
|
||||
if (field === "quantity" || field === "unitPrice") {
|
||||
updatedItem.totalPrice =
|
||||
(updatedItem.quantity || 0) * (updatedItem.unitPrice || 0);
|
||||
if (field === 'quantity' || field === 'unitPrice') {
|
||||
updatedItem.totalPrice = (updatedItem.quantity || 0) * (updatedItem.unitPrice || 0)
|
||||
}
|
||||
return updatedItem;
|
||||
return updatedItem
|
||||
}
|
||||
return item;
|
||||
}) || [];
|
||||
return item
|
||||
}) || []
|
||||
|
||||
return {
|
||||
...prev,
|
||||
items: updatedItems,
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// Recalculate total amount
|
||||
setTimeout(calculateTotal, 0);
|
||||
};
|
||||
setTimeout(calculateTotal, 0)
|
||||
}
|
||||
|
||||
const calculateTotal = () => {
|
||||
const total =
|
||||
formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) ||
|
||||
0;
|
||||
const total = formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) || 0
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
totalAmount: total,
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSpecificationsChange = (index: number, value: string) => {
|
||||
const specifications = value
|
||||
.split("\n")
|
||||
.filter((spec) => spec.trim() !== "");
|
||||
updateQuotationItem(index, "specifications", specifications);
|
||||
};
|
||||
const specifications = value.split('\n').filter((spec) => spec.trim() !== '')
|
||||
updateQuotationItem(index, 'specifications', specifications)
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
// TODO: Implement save logic
|
||||
console.log("Saving quotation:", formData);
|
||||
navigate("/admin/supplychain/quotations");
|
||||
};
|
||||
console.log('Saving quotation:', formData)
|
||||
navigate('/admin/supplychain/quotations')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/admin/supplychain/quotations");
|
||||
};
|
||||
navigate('/admin/supplychain/quotations')
|
||||
}
|
||||
|
||||
const isReadOnly = isView;
|
||||
const pageTitle = isEdit
|
||||
? "Teklifi Düzenle"
|
||||
: isView
|
||||
? "Teklif Detayları"
|
||||
: "Yeni Teklif";
|
||||
const isReadOnly = isView
|
||||
const pageTitle = isEdit ? 'Teklifi Düzenle' : isView ? 'Teklif Detayları' : 'Yeni Teklif'
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-4">
|
||||
<div className="mx-auto">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow-md p-2 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -175,7 +161,7 @@ const QuotationForm: React.FC = () => {
|
|||
className="px-3 py-1.5 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 flex items-center"
|
||||
>
|
||||
<FaTimes className="mr-2" />
|
||||
{isView ? "Kapat" : "İptal"}
|
||||
{isView ? 'Kapat' : 'İptal'}
|
||||
</button>
|
||||
{!isView && (
|
||||
<button
|
||||
|
|
@ -209,7 +195,7 @@ const QuotationForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
name="quotationNumber"
|
||||
value={formData.quotationNumber || ""}
|
||||
value={formData.quotationNumber || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly || isEdit}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -217,13 +203,11 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Talep ID
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Talep ID</label>
|
||||
<input
|
||||
type="text"
|
||||
name="requestId"
|
||||
value={formData.requestId || ""}
|
||||
value={formData.requestId || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -232,13 +216,11 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Talep Başlığı
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Talep Başlığı</label>
|
||||
<input
|
||||
type="text"
|
||||
name="requestTitle"
|
||||
value={formData.requestTitle || ""}
|
||||
value={formData.requestTitle || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -247,9 +229,7 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Talep Tipi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Talep Tipi</label>
|
||||
<select
|
||||
name="requestType"
|
||||
value={formData.requestType || RequestTypeEnum.Material}
|
||||
|
|
@ -259,20 +239,16 @@ const QuotationForm: React.FC = () => {
|
|||
>
|
||||
<option value={RequestTypeEnum.Material}>Malzeme</option>
|
||||
<option value={RequestTypeEnum.Service}>Hizmet</option>
|
||||
<option value={RequestTypeEnum.WorkCenter}>
|
||||
İş Merkezi
|
||||
</option>
|
||||
<option value={RequestTypeEnum.WorkCenter}>İş Merkezi</option>
|
||||
<option value={RequestTypeEnum.Maintenance}>Bakım</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Tedarikçi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Tedarikçi</label>
|
||||
<select
|
||||
name="supplierId"
|
||||
value={formData.supplierId || ""}
|
||||
value={formData.supplierId || ''}
|
||||
onChange={handleInputChange}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -288,13 +264,11 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Tedarikçi Adı
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Tedarikçi Adı</label>
|
||||
<input
|
||||
type="text"
|
||||
name="supplierName"
|
||||
value={formData.supplier?.name || ""}
|
||||
value={formData.supplier?.name || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -312,10 +286,8 @@ const QuotationForm: React.FC = () => {
|
|||
name="quotationDate"
|
||||
value={
|
||||
formData.quotationDate
|
||||
? new Date(formData.quotationDate)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.quotationDate).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -333,10 +305,8 @@ const QuotationForm: React.FC = () => {
|
|||
name="validUntil"
|
||||
value={
|
||||
formData.validUntil
|
||||
? new Date(formData.validUntil)
|
||||
.toISOString()
|
||||
.split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.validUntil).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -345,12 +315,10 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Para Birimi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Para Birimi</label>
|
||||
<select
|
||||
name="currency"
|
||||
value={formData.currency || "TRY"}
|
||||
value={formData.currency || 'TRY'}
|
||||
onChange={handleInputChange}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -368,7 +336,7 @@ const QuotationForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
name="paymentTerms"
|
||||
value={formData.paymentTerms || ""}
|
||||
value={formData.paymentTerms || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
placeholder="ör: 30 gün vadeli"
|
||||
|
|
@ -383,7 +351,7 @@ const QuotationForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
name="deliveryTerms"
|
||||
value={formData.deliveryTerms || ""}
|
||||
value={formData.deliveryTerms || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
placeholder="ör: 15 gün içinde teslim"
|
||||
|
|
@ -398,7 +366,7 @@ const QuotationForm: React.FC = () => {
|
|||
<input
|
||||
type="number"
|
||||
name="deliveryTime"
|
||||
value={formData.deliveryTime || ""}
|
||||
value={formData.deliveryTime || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
min="0"
|
||||
|
|
@ -408,12 +376,10 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Notlar
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Notlar</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
value={formData.notes || ""}
|
||||
value={formData.notes || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
rows={2}
|
||||
|
|
@ -425,9 +391,7 @@ const QuotationForm: React.FC = () => {
|
|||
{/* Teklif Kalemleri */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
Teklif Kalemleri
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900">Teklif Kalemleri</h3>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -442,14 +406,9 @@ const QuotationForm: React.FC = () => {
|
|||
|
||||
<div className="space-y-3">
|
||||
{formData.items?.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border rounded-lg p-3 bg-gray-50"
|
||||
>
|
||||
<div key={item.id} className="border rounded-lg p-3 bg-gray-50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Kalem {index + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
|
||||
{!isReadOnly && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -463,17 +422,11 @@ const QuotationForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Malzeme
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Malzeme</label>
|
||||
<select
|
||||
value={item.materialCode}
|
||||
onChange={(e) =>
|
||||
updateQuotationItem(
|
||||
index,
|
||||
"materialCode",
|
||||
e.target.value
|
||||
)
|
||||
updateQuotationItem(index, 'materialCode', e.target.value)
|
||||
}
|
||||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -495,11 +448,7 @@ const QuotationForm: React.FC = () => {
|
|||
type="text"
|
||||
value={item.materialName}
|
||||
onChange={(e) =>
|
||||
updateQuotationItem(
|
||||
index,
|
||||
"materialName",
|
||||
e.target.value
|
||||
)
|
||||
updateQuotationItem(index, 'materialName', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -514,11 +463,7 @@ const QuotationForm: React.FC = () => {
|
|||
type="text"
|
||||
value={item.description}
|
||||
onChange={(e) =>
|
||||
updateQuotationItem(
|
||||
index,
|
||||
"description",
|
||||
e.target.value
|
||||
)
|
||||
updateQuotationItem(index, 'description', e.target.value)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -526,17 +471,15 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Miktar
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Miktar</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
onChange={(e) =>
|
||||
updateQuotationItem(
|
||||
index,
|
||||
"quantity",
|
||||
parseFloat(e.target.value) || 0
|
||||
'quantity',
|
||||
parseFloat(e.target.value) || 0,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -547,15 +490,11 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600">
|
||||
Birim
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-600">Birim</label>
|
||||
<input
|
||||
type="text"
|
||||
value={item.unit}
|
||||
onChange={(e) =>
|
||||
updateQuotationItem(index, "unit", e.target.value)
|
||||
}
|
||||
onChange={(e) => updateQuotationItem(index, 'unit', e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -571,8 +510,8 @@ const QuotationForm: React.FC = () => {
|
|||
onChange={(e) =>
|
||||
updateQuotationItem(
|
||||
index,
|
||||
"unitPrice",
|
||||
parseFloat(e.target.value) || 0
|
||||
'unitPrice',
|
||||
parseFloat(e.target.value) || 0,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -600,12 +539,12 @@ const QuotationForm: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.leadTime || ""}
|
||||
value={item.leadTime || ''}
|
||||
onChange={(e) =>
|
||||
updateQuotationItem(
|
||||
index,
|
||||
"leadTime",
|
||||
parseInt(e.target.value) || undefined
|
||||
'leadTime',
|
||||
parseInt(e.target.value) || undefined,
|
||||
)
|
||||
}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -619,10 +558,8 @@ const QuotationForm: React.FC = () => {
|
|||
Spesifikasyonlar (her satıra bir spesifikasyon)
|
||||
</label>
|
||||
<textarea
|
||||
value={item.specifications?.join("\n") || ""}
|
||||
onChange={(e) =>
|
||||
handleSpecificationsChange(index, e.target.value)
|
||||
}
|
||||
value={item.specifications?.join('\n') || ''}
|
||||
onChange={(e) => handleSpecificationsChange(index, e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
rows={1}
|
||||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -645,15 +582,11 @@ const QuotationForm: React.FC = () => {
|
|||
<div className="space-y-4">
|
||||
{/* Durum ve Tutar */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">
|
||||
Durum Bilgileri
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Durum
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Durum</label>
|
||||
<select
|
||||
name="status"
|
||||
value={formData.status || QuotationStatusEnum.Draft}
|
||||
|
|
@ -662,24 +595,12 @@ const QuotationForm: React.FC = () => {
|
|||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value={QuotationStatusEnum.Draft}>Taslak</option>
|
||||
<option value={QuotationStatusEnum.Pending}>
|
||||
Beklemede
|
||||
</option>
|
||||
<option value={QuotationStatusEnum.UnderReview}>
|
||||
İncelemede
|
||||
</option>
|
||||
<option value={QuotationStatusEnum.Submitted}>
|
||||
Gönderildi
|
||||
</option>
|
||||
<option value={QuotationStatusEnum.Approved}>
|
||||
Onaylandı
|
||||
</option>
|
||||
<option value={QuotationStatusEnum.Rejected}>
|
||||
Reddedildi
|
||||
</option>
|
||||
<option value={QuotationStatusEnum.Expired}>
|
||||
Süresi Doldu
|
||||
</option>
|
||||
<option value={QuotationStatusEnum.Pending}>Beklemede</option>
|
||||
<option value={QuotationStatusEnum.UnderReview}>İncelemede</option>
|
||||
<option value={QuotationStatusEnum.Submitted}>Gönderildi</option>
|
||||
<option value={QuotationStatusEnum.Approved}>Onaylandı</option>
|
||||
<option value={QuotationStatusEnum.Rejected}>Reddedildi</option>
|
||||
<option value={QuotationStatusEnum.Expired}>Süresi Doldu</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -689,8 +610,7 @@ const QuotationForm: React.FC = () => {
|
|||
Toplam Tutar
|
||||
</label>
|
||||
<div className="mt-1 text-base font-semibold text-green-600">
|
||||
{formData.totalAmount?.toLocaleString()}{" "}
|
||||
{formData.currency}
|
||||
{formData.totalAmount?.toLocaleString()} {formData.currency}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -699,15 +619,11 @@ const QuotationForm: React.FC = () => {
|
|||
{/* Değerlendirme (sadece görüntüleme) */}
|
||||
{isView && formData.evaluationScore && (
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">
|
||||
Değerlendirme
|
||||
</h3>
|
||||
<h3 className="text-base font-medium text-gray-900 mb-3">Değerlendirme</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-700">
|
||||
Değerlendirme Puanı
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-700">Değerlendirme Puanı</div>
|
||||
<div className="text-base font-semibold text-blue-600">
|
||||
{formData.evaluationScore}/100
|
||||
</div>
|
||||
|
|
@ -715,12 +631,8 @@ const QuotationForm: React.FC = () => {
|
|||
|
||||
{formData.evaluatedBy && (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-700">
|
||||
Değerlendiren
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{formData.evaluatedBy}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-700">Değerlendiren</div>
|
||||
<div className="text-sm text-gray-600">{formData.evaluatedBy}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -773,8 +685,8 @@ const QuotationForm: React.FC = () => {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default QuotationForm;
|
||||
export default QuotationForm
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import React, { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
FaPlus,
|
||||
FaSearch,
|
||||
|
|
@ -16,114 +16,102 @@ import {
|
|||
FaClock,
|
||||
FaCheckCircle,
|
||||
FaTimes,
|
||||
} from "react-icons/fa";
|
||||
import { MmQuotation, QuotationStatusEnum } from "../../../types/mm";
|
||||
import { mockQuotations } from "../../../mocks/mockQuotations";
|
||||
} from 'react-icons/fa'
|
||||
import { MmQuotation, QuotationStatusEnum } from '../../../types/mm'
|
||||
import { mockQuotations } from '../../../mocks/mockQuotations'
|
||||
import {
|
||||
getQuotationStatusColor,
|
||||
getQuotationStatusIcon,
|
||||
getQuotationStatusText,
|
||||
getRequestTypeText,
|
||||
} from "../../../utils/erp";
|
||||
} from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const QuotationManagement: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<QuotationStatusEnum | "all">(
|
||||
"all"
|
||||
);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalType, setModalType] = useState<"bulk" | "comparison">("bulk");
|
||||
const [selectedQuotations, setSelectedQuotations] = useState<string[]>([]);
|
||||
const navigate = useNavigate()
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<QuotationStatusEnum | 'all'>('all')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [modalType, setModalType] = useState<'bulk' | 'comparison'>('bulk')
|
||||
const [selectedQuotations, setSelectedQuotations] = useState<string[]>([])
|
||||
|
||||
// Mock data - replace with actual API calls
|
||||
const [quotations] = useState<MmQuotation[]>(mockQuotations);
|
||||
const [quotations] = useState<MmQuotation[]>(mockQuotations)
|
||||
|
||||
const filteredQuotations = quotations.filter((quotation) => {
|
||||
const matchesSearch =
|
||||
quotation.quotationNumber
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()) ||
|
||||
quotation.supplier?.name
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()) ||
|
||||
quotation.requestTitle.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesStatus =
|
||||
statusFilter === "all" || quotation.status === statusFilter;
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
quotation.quotationNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
quotation.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
quotation.requestTitle.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesStatus = statusFilter === 'all' || quotation.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
const isExpiringSoon = (date: Date) => {
|
||||
const today = new Date();
|
||||
const diffTime = date.getTime() - today.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
return diffDays <= 7 && diffDays > 0;
|
||||
};
|
||||
const today = new Date()
|
||||
const diffTime = date.getTime() - today.getTime()
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
return diffDays <= 7 && diffDays > 0
|
||||
}
|
||||
|
||||
const isExpired = (date: Date) => {
|
||||
const today = new Date();
|
||||
return date < today;
|
||||
};
|
||||
const today = new Date()
|
||||
return date < today
|
||||
}
|
||||
|
||||
const handleAddQuotation = () => {
|
||||
navigate("/admin/supplychain/quotations/new");
|
||||
};
|
||||
navigate('/admin/supplychain/quotations/new')
|
||||
}
|
||||
|
||||
const handleBulkQuotation = () => {
|
||||
if (selectedQuotations.length === 0) {
|
||||
alert("Toplu işlem için en az 1 teklif seçmelisiniz.");
|
||||
return;
|
||||
alert('Toplu işlem için en az 1 teklif seçmelisiniz.')
|
||||
return
|
||||
}
|
||||
setModalType('bulk')
|
||||
setShowModal(true)
|
||||
}
|
||||
setModalType("bulk");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleCompareQuotations = () => {
|
||||
if (selectedQuotations.length < 2) {
|
||||
alert("Karşılaştırma için en az 2 teklif seçmelisiniz.");
|
||||
return;
|
||||
alert('Karşılaştırma için en az 2 teklif seçmelisiniz.')
|
||||
return
|
||||
}
|
||||
setModalType('comparison')
|
||||
setShowModal(true)
|
||||
}
|
||||
setModalType("comparison");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleEdit = (quotation: MmQuotation) => {
|
||||
navigate(`/admin/supplychain/quotations/edit/${quotation.id}`);
|
||||
};
|
||||
navigate(`/admin/supplychain/quotations/edit/${quotation.id}`)
|
||||
}
|
||||
|
||||
const handleView = (quotation: MmQuotation) => {
|
||||
navigate(`/admin/supplychain/quotations/view/${quotation.id}`);
|
||||
};
|
||||
navigate(`/admin/supplychain/quotations/view/${quotation.id}`)
|
||||
}
|
||||
|
||||
const handleSelectQuotation = (quotationId: string) => {
|
||||
setSelectedQuotations((prev) =>
|
||||
prev.includes(quotationId)
|
||||
? prev.filter((id) => id !== quotationId)
|
||||
: [...prev, quotationId]
|
||||
);
|
||||
};
|
||||
prev.includes(quotationId) ? prev.filter((id) => id !== quotationId) : [...prev, quotationId],
|
||||
)
|
||||
}
|
||||
|
||||
const getTotalItems = (quotation: MmQuotation) => {
|
||||
return quotation.items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
};
|
||||
return quotation.items.reduce((sum, item) => sum + item.quantity, 0)
|
||||
}
|
||||
|
||||
const getAverageLeadTime = (quotation: MmQuotation) => {
|
||||
const totalLeadTime = quotation.items.reduce(
|
||||
(sum, item) => sum + (item.leadTime || 0),
|
||||
0
|
||||
);
|
||||
return Math.round(totalLeadTime / quotation.items.length);
|
||||
};
|
||||
const totalLeadTime = quotation.items.reduce((sum, item) => sum + (item.leadTime || 0), 0)
|
||||
return Math.round(totalLeadTime / quotation.items.length)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Teklif Yönetimi</h2>
|
||||
<p className="text-gray-600">
|
||||
Tedarikçi tekliflerini yönetin ve karşılaştırın
|
||||
</p>
|
||||
<p className="text-gray-600">Tedarikçi tekliflerini yönetin ve karşılaştırın</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
|
|
@ -166,9 +154,7 @@ const QuotationManagement: React.FC = () => {
|
|||
<FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) =>
|
||||
setStatusFilter(e.target.value as QuotationStatusEnum | "all")
|
||||
}
|
||||
onChange={(e) => setStatusFilter(e.target.value as QuotationStatusEnum | 'all')}
|
||||
className="pl-10 pr-4 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="all">Tüm Durumlar</option>
|
||||
|
|
@ -204,7 +190,7 @@ const QuotationManagement: React.FC = () => {
|
|||
</h3>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getQuotationStatusColor(
|
||||
quotation.status
|
||||
quotation.status,
|
||||
)}`}
|
||||
>
|
||||
{getQuotationStatusIcon(quotation.status)}
|
||||
|
|
@ -213,8 +199,7 @@ const QuotationManagement: React.FC = () => {
|
|||
</div>
|
||||
<p className="text-gray-600">{quotation.requestTitle}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{quotation.supplier?.name} •{" "}
|
||||
{getRequestTypeText(quotation.requestType)}
|
||||
{quotation.supplier?.name} • {getRequestTypeText(quotation.requestType)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-1">
|
||||
|
|
@ -253,18 +238,15 @@ const QuotationManagement: React.FC = () => {
|
|||
<p
|
||||
className={`font-medium ${
|
||||
isExpired(quotation.validUntil)
|
||||
? "text-red-600"
|
||||
? 'text-red-600'
|
||||
: isExpiringSoon(quotation.validUntil)
|
||||
? "text-orange-600"
|
||||
: "text-gray-900"
|
||||
? 'text-orange-600'
|
||||
: 'text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{quotation.validUntil.toLocaleDateString("tr-TR")}
|
||||
{isExpiringSoon(quotation.validUntil) &&
|
||||
!isExpired(quotation.validUntil) && (
|
||||
<span className="text-xs text-orange-600 ml-1">
|
||||
(Yakında)
|
||||
</span>
|
||||
{quotation.validUntil.toLocaleDateString('tr-TR')}
|
||||
{isExpiringSoon(quotation.validUntil) && !isExpired(quotation.validUntil) && (
|
||||
<span className="text-xs text-orange-600 ml-1">(Yakında)</span>
|
||||
)}
|
||||
{isExpired(quotation.validUntil) && (
|
||||
<span className="text-xs text-red-600 ml-1">(Doldu)</span>
|
||||
|
|
@ -284,18 +266,14 @@ const QuotationManagement: React.FC = () => {
|
|||
<div className="text-center">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<FaArrowUp className="w-4 h-4 text-gray-400 mr-1" />
|
||||
<span className="font-medium">
|
||||
{getTotalItems(quotation)}
|
||||
</span>
|
||||
<span className="font-medium">{getTotalItems(quotation)}</span>
|
||||
</div>
|
||||
<span className="text-gray-500">Adet</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<FaClock className="w-4 h-4 text-gray-400 mr-1" />
|
||||
<span className="font-medium">
|
||||
{getAverageLeadTime(quotation)}
|
||||
</span>
|
||||
<span className="font-medium">{getAverageLeadTime(quotation)}</span>
|
||||
</div>
|
||||
<span className="text-gray-500">Gün</span>
|
||||
</div>
|
||||
|
|
@ -303,40 +281,31 @@ const QuotationManagement: React.FC = () => {
|
|||
|
||||
{/* Items Details */}
|
||||
<div className="mt-3 mb-3">
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-1.5">
|
||||
Teklif Kalemleri
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-1.5">Teklif Kalemleri</h4>
|
||||
<div className="space-y-1.5">
|
||||
{quotation.items.map((item) => (
|
||||
<div key={item.id} className="bg-gray-50 p-2 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-gray-900">
|
||||
{item.materialName}
|
||||
</p>
|
||||
<p className="font-medium text-gray-900">{item.materialName}</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Malzeme Kodu: {item.materialCode} | Miktar:{" "}
|
||||
{item.quantity} {item.unit} | Birim Fiyat: ₺
|
||||
{item.unitPrice.toLocaleString()}
|
||||
Malzeme Kodu: {item.materialCode} | Miktar: {item.quantity} {item.unit}{' '}
|
||||
| Birim Fiyat: ₺{item.unitPrice.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-semibold text-gray-900">
|
||||
₺{item.totalPrice.toLocaleString()}
|
||||
</p>
|
||||
<div className="text-xs text-gray-500">
|
||||
Teslimat: {item.leadTime} gün
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Teslimat: {item.leadTime} gün</div>
|
||||
</div>
|
||||
</div>
|
||||
{item.description && (
|
||||
<div className="text-xs text-gray-500 mb-1">
|
||||
{item.description}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mb-1">{item.description}</div>
|
||||
)}
|
||||
{item.specifications && item.specifications.length > 0 && (
|
||||
<div className="text-xs text-gray-500">
|
||||
Özellikler: {item.specifications.join(", ")}
|
||||
Özellikler: {item.specifications.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -349,7 +318,7 @@ const QuotationManagement: React.FC = () => {
|
|||
<div className="flex items-center space-x-2">
|
||||
<FaCalendar className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-gray-600">
|
||||
{quotation.quotationDate.toLocaleDateString("tr-TR")}
|
||||
{quotation.quotationDate.toLocaleDateString('tr-TR')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -377,9 +346,7 @@ const QuotationManagement: React.FC = () => {
|
|||
{filteredQuotations.length === 0 && (
|
||||
<div className="text-center py-8">
|
||||
<FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
Teklif bulunamadı
|
||||
</h3>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Teklif bulunamadı</h3>
|
||||
<p className="text-gray-500 mb-3">
|
||||
Arama kriterlerinizi değiştirin veya yeni bir teklif ekleyin.
|
||||
</p>
|
||||
|
|
@ -419,6 +386,7 @@ const QuotationManagement: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal for Bulk/Comparison operations */}
|
||||
{showModal && (
|
||||
|
|
@ -426,8 +394,8 @@ const QuotationManagement: React.FC = () => {
|
|||
<div className="bg-white rounded-lg p-4 w-full max-w-6xl mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">
|
||||
{modalType === "bulk" && "Toplu Teklif Talebi"}
|
||||
{modalType === "comparison" && "Teklif Karşılaştırması"}
|
||||
{modalType === 'bulk' && 'Toplu Teklif Talebi'}
|
||||
{modalType === 'comparison' && 'Teklif Karşılaştırması'}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
|
|
@ -437,13 +405,11 @@ const QuotationManagement: React.FC = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{modalType === "comparison" && (
|
||||
{modalType === 'comparison' && (
|
||||
<div className="space-y-4">
|
||||
{/* Comparison Summary */}
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<h4 className="font-medium text-gray-900 mb-2">
|
||||
Karşılaştırma Özeti
|
||||
</h4>
|
||||
<h4 className="font-medium text-gray-900 mb-2">Karşılaştırma Özeti</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Toplam Teklif:</span>
|
||||
|
|
@ -456,7 +422,7 @@ const QuotationManagement: React.FC = () => {
|
|||
{Math.min(
|
||||
...quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount)
|
||||
.map((q) => q.totalAmount),
|
||||
).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -467,7 +433,7 @@ const QuotationManagement: React.FC = () => {
|
|||
{Math.max(
|
||||
...quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount)
|
||||
.map((q) => q.totalAmount),
|
||||
).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -478,21 +444,17 @@ const QuotationManagement: React.FC = () => {
|
|||
((Math.max(
|
||||
...quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount)
|
||||
.map((q) => q.totalAmount),
|
||||
) -
|
||||
Math.min(
|
||||
...quotations
|
||||
.filter((q) =>
|
||||
selectedQuotations.includes(q.id)
|
||||
)
|
||||
.map((q) => q.totalAmount)
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount),
|
||||
)) /
|
||||
Math.min(
|
||||
...quotations
|
||||
.filter((q) =>
|
||||
selectedQuotations.includes(q.id)
|
||||
)
|
||||
.map((q) => q.totalAmount)
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount),
|
||||
)) *
|
||||
100
|
||||
).toFixed(1)}
|
||||
|
|
@ -524,52 +486,38 @@ const QuotationManagement: React.FC = () => {
|
|||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">
|
||||
Teklif No
|
||||
</td>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">Teklif No</td>
|
||||
{quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((quotation) => (
|
||||
<td
|
||||
key={quotation.id}
|
||||
className="px-3 py-2 text-center text-gray-600"
|
||||
>
|
||||
<td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
|
||||
{quotation.quotationNumber}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
<tr className="bg-gray-50">
|
||||
<td className="px-3 py-2 font-medium text-gray-900">
|
||||
Toplam Tutar
|
||||
</td>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">Toplam Tutar</td>
|
||||
{quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((quotation) => (
|
||||
<td
|
||||
key={quotation.id}
|
||||
className="px-3 py-2 text-center"
|
||||
>
|
||||
<td key={quotation.id} className="px-3 py-2 text-center">
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
quotation.totalAmount ===
|
||||
Math.min(
|
||||
...quotations
|
||||
.filter((q) =>
|
||||
selectedQuotations.includes(q.id)
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount),
|
||||
)
|
||||
.map((q) => q.totalAmount)
|
||||
)
|
||||
? "text-green-600"
|
||||
? 'text-green-600'
|
||||
: quotation.totalAmount ===
|
||||
Math.max(
|
||||
...quotations
|
||||
.filter((q) =>
|
||||
selectedQuotations.includes(q.id)
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((q) => q.totalAmount),
|
||||
)
|
||||
.map((q) => q.totalAmount)
|
||||
)
|
||||
? "text-red-600"
|
||||
: "text-gray-900"
|
||||
? 'text-red-600'
|
||||
: 'text-gray-900'
|
||||
}`}
|
||||
>
|
||||
₺{quotation.totalAmount.toLocaleString()}
|
||||
|
|
@ -578,34 +526,24 @@ const QuotationManagement: React.FC = () => {
|
|||
))}
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">
|
||||
Geçerlilik Tarihi
|
||||
</td>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">Geçerlilik Tarihi</td>
|
||||
{quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((quotation) => (
|
||||
<td
|
||||
key={quotation.id}
|
||||
className="px-3 py-2 text-center text-gray-600"
|
||||
>
|
||||
{quotation.validUntil.toLocaleDateString("tr-TR")}
|
||||
<td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
|
||||
{quotation.validUntil.toLocaleDateString('tr-TR')}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
<tr className="bg-gray-50">
|
||||
<td className="px-3 py-2 font-medium text-gray-900">
|
||||
Durum
|
||||
</td>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">Durum</td>
|
||||
{quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((quotation) => (
|
||||
<td
|
||||
key={quotation.id}
|
||||
className="px-3 py-2 text-center"
|
||||
>
|
||||
<td key={quotation.id} className="px-3 py-2 text-center">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getQuotationStatusColor(
|
||||
quotation.status
|
||||
quotation.status,
|
||||
)}`}
|
||||
>
|
||||
{getQuotationStatusText(quotation.status)}
|
||||
|
|
@ -614,16 +552,11 @@ const QuotationManagement: React.FC = () => {
|
|||
))}
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">
|
||||
Kalem Sayısı
|
||||
</td>
|
||||
<td className="px-3 py-2 font-medium text-gray-900">Kalem Sayısı</td>
|
||||
{quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((quotation) => (
|
||||
<td
|
||||
key={quotation.id}
|
||||
className="px-3 py-2 text-center text-gray-600"
|
||||
>
|
||||
<td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
|
||||
{quotation.items.length}
|
||||
</td>
|
||||
))}
|
||||
|
|
@ -635,10 +568,7 @@ const QuotationManagement: React.FC = () => {
|
|||
{quotations
|
||||
.filter((q) => selectedQuotations.includes(q.id))
|
||||
.map((quotation) => (
|
||||
<td
|
||||
key={quotation.id}
|
||||
className="px-3 py-2 text-center text-gray-600"
|
||||
>
|
||||
<td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
|
||||
{getAverageLeadTime(quotation)} gün
|
||||
</td>
|
||||
))}
|
||||
|
|
@ -671,7 +601,7 @@ const QuotationManagement: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{modalType === "bulk" && (
|
||||
{modalType === 'bulk' && (
|
||||
<div className="space-y-6">
|
||||
{/* Bulk Request Form */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
|
@ -711,9 +641,7 @@ const QuotationManagement: React.FC = () => {
|
|||
>
|
||||
{quotation.supplier?.name}
|
||||
<button
|
||||
onClick={() =>
|
||||
handleSelectQuotation(quotation.id)
|
||||
}
|
||||
onClick={() => handleSelectQuotation(quotation.id)}
|
||||
className="ml-2 text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
<FaTimes className="w-3 h-3" />
|
||||
|
|
@ -785,8 +713,8 @@ const QuotationManagement: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default QuotationManagement;
|
||||
export default QuotationManagement
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { FaTimes, FaSave, FaCreditCard, FaStar } from "react-icons/fa";
|
||||
import { SupplierCardTypeEnum, SupplierTypeEnum } from "../../../types/mm";
|
||||
import { mockBusinessPartyNew } from "../../../mocks/mockBusinessParties";
|
||||
import { BusinessParty, PartyType, PaymentTerms } from "../../../types/common";
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { FaTimes, FaSave, FaCreditCard, FaStar } from 'react-icons/fa'
|
||||
import { SupplierCardTypeEnum, SupplierTypeEnum } from '../../../types/mm'
|
||||
import { mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
|
||||
import { BusinessParty, PartyType, PaymentTerms } from '../../../types/common'
|
||||
|
||||
interface SupplierCardModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (supplierCard: BusinessParty) => void;
|
||||
supplierCard?: BusinessParty | null;
|
||||
mode: "create" | "view" | "edit";
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSave: (supplierCard: BusinessParty) => void
|
||||
supplierCard?: BusinessParty | null
|
||||
mode: 'create' | 'view' | 'edit'
|
||||
}
|
||||
|
||||
const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
||||
|
|
@ -19,50 +19,45 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
supplierCard,
|
||||
mode,
|
||||
}) => {
|
||||
const [formData, setFormData] =
|
||||
useState<Partial<BusinessParty>>(mockBusinessPartyNew);
|
||||
const [formData, setFormData] = useState<Partial<BusinessParty>>(mockBusinessPartyNew)
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === "create") {
|
||||
setFormData(mockBusinessPartyNew);
|
||||
if (mode === 'create') {
|
||||
setFormData(mockBusinessPartyNew)
|
||||
} else if (supplierCard) {
|
||||
setFormData(supplierCard);
|
||||
setFormData(supplierCard)
|
||||
}
|
||||
}, [supplierCard, mode]);
|
||||
}, [supplierCard, mode])
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
||||
>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const { name, value, type } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
type === "number"
|
||||
type === 'number'
|
||||
? parseFloat(value) || 0
|
||||
: type === "checkbox"
|
||||
: type === 'checkbox'
|
||||
? (e.target as HTMLInputElement).checked
|
||||
: value,
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSpecialConditionsChange = (value: string) => {
|
||||
const conditions = value
|
||||
.split("\n")
|
||||
.filter((condition) => condition.trim() !== "");
|
||||
const conditions = value.split('\n').filter((condition) => condition.trim() !== '')
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
specialConditions: conditions,
|
||||
}));
|
||||
};
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (mode !== "view") {
|
||||
e.preventDefault()
|
||||
if (mode !== 'view') {
|
||||
const newSupplierCard: BusinessParty = {
|
||||
id: supplierCard?.id || `SC-${Date.now()}`,
|
||||
code: formData.code || "",
|
||||
code: formData.code || '',
|
||||
cardNumber:
|
||||
formData.cardNumber ||
|
||||
`SC-${new Date().getFullYear()}-${Date.now().toString().slice(-3)}`,
|
||||
|
|
@ -88,27 +83,27 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
creationTime: supplierCard?.creationTime || new Date(),
|
||||
lastModificationTime: new Date(),
|
||||
supplierType: SupplierTypeEnum.Material,
|
||||
name: "",
|
||||
currency: "",
|
||||
name: '',
|
||||
currency: '',
|
||||
certifications: [],
|
||||
bankAccounts: [],
|
||||
contacts: [],
|
||||
partyType: PartyType.Supplier,
|
||||
};
|
||||
onSave(newSupplierCard);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
onSave(newSupplierCard)
|
||||
}
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null;
|
||||
if (!isOpen) return null
|
||||
|
||||
const isReadOnly = mode === "view";
|
||||
const isReadOnly = mode === 'view'
|
||||
const modalTitle =
|
||||
mode === "create"
|
||||
? "Yeni Tedarikçi Kartı"
|
||||
: mode === "edit"
|
||||
? "Tedarikçi Kartını Düzenle"
|
||||
: "Tedarikçi Kartı Detayları";
|
||||
mode === 'create'
|
||||
? 'Yeni Tedarikçi Kartı'
|
||||
: mode === 'edit'
|
||||
? 'Tedarikçi Kartını Düzenle'
|
||||
: 'Tedarikçi Kartı Detayları'
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
|
|
@ -118,10 +113,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
<FaCreditCard className="mr-2 text-blue-600" />
|
||||
{modalTitle}
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600">
|
||||
<FaTimes />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -130,18 +122,14 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Temel Bilgiler */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5">
|
||||
Temel Bilgiler
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5">Temel Bilgiler</h4>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Tedarikçi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Tedarikçi</label>
|
||||
<input
|
||||
type="text"
|
||||
name="customerCode"
|
||||
value={formData.code || ""}
|
||||
value={formData.code || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -150,13 +138,11 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Kart Numarası
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Kart Numarası</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cardNumber"
|
||||
value={formData.cardNumber || ""}
|
||||
value={formData.cardNumber || ''}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
|
|
@ -164,9 +150,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Kart Tipi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Kart Tipi</label>
|
||||
<select
|
||||
name="cardType"
|
||||
value={formData.cardType || SupplierCardTypeEnum.Standard}
|
||||
|
|
@ -174,16 +158,10 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
disabled={isReadOnly}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option value={SupplierCardTypeEnum.Standard}>
|
||||
Standart
|
||||
</option>
|
||||
<option value={SupplierCardTypeEnum.Standard}>Standart</option>
|
||||
<option value={SupplierCardTypeEnum.Premium}>Premium</option>
|
||||
<option value={SupplierCardTypeEnum.Strategic}>
|
||||
Stratejik
|
||||
</option>
|
||||
<option value={SupplierCardTypeEnum.Preferred}>
|
||||
Tercihli
|
||||
</option>
|
||||
<option value={SupplierCardTypeEnum.Strategic}>Stratejik</option>
|
||||
<option value={SupplierCardTypeEnum.Preferred}>Tercihli</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -196,8 +174,8 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
name="validFrom"
|
||||
value={
|
||||
formData.validFrom
|
||||
? new Date(formData.validFrom).toISOString().split("T")[0]
|
||||
: ""
|
||||
? new Date(formData.validFrom).toISOString().split('T')[0]
|
||||
: ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -206,16 +184,12 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Geçerlilik Bitişi
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Geçerlilik Bitişi</label>
|
||||
<input
|
||||
type="date"
|
||||
name="validTo"
|
||||
value={
|
||||
formData.validTo
|
||||
? new Date(formData.validTo).toISOString().split("T")[0]
|
||||
: ""
|
||||
formData.validTo ? new Date(formData.validTo).toISOString().split('T')[0] : ''
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
readOnly={isReadOnly}
|
||||
|
|
@ -226,14 +200,10 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
|
||||
{/* Mali Bilgiler */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5">
|
||||
Mali Bilgiler
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5">Mali Bilgiler</h4>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Kredi Limiti (TL)
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Kredi Limiti (TL)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="creditLimit"
|
||||
|
|
@ -259,9 +229,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Ödeme Koşulları
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">Ödeme Koşulları</label>
|
||||
<select
|
||||
name="paymentTerms"
|
||||
value={formData.paymentTerms || PaymentTerms.Net30}
|
||||
|
|
@ -281,9 +249,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
İndirim Oranı (%)
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700">İndirim Oranı (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="discountRate"
|
||||
|
|
@ -307,9 +273,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
disabled={isReadOnly}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Aktif
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-700">Aktif</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -322,7 +286,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</h4>
|
||||
<textarea
|
||||
name="specialConditions"
|
||||
value={formData.specialConditions?.join("\n") || ""}
|
||||
value={formData.specialConditions?.join('\n') || ''}
|
||||
onChange={(e) => handleSpecialConditionsChange(e.target.value)}
|
||||
readOnly={isReadOnly}
|
||||
rows={3}
|
||||
|
|
@ -332,7 +296,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</div>
|
||||
|
||||
{/* Performans Metrikleri - Sadece görüntüleme modu */}
|
||||
{mode === "view" && formData.performanceMetrics && (
|
||||
{mode === 'view' && formData.performanceMetrics && (
|
||||
<div className="mt-4">
|
||||
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5 mb-3 flex items-center">
|
||||
<FaStar className="mr-2 text-yellow-500" />
|
||||
|
|
@ -343,17 +307,13 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
<div className="text-2xl font-bold text-blue-600">
|
||||
{formData.performanceMetrics.deliveryPerformance}%
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
Teslimat Performansı
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Teslimat Performansı</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{formData.performanceMetrics.qualityRating}%
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
Kalite Değerlendirmesi
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Kalite Değerlendirmesi</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">
|
||||
|
|
@ -390,9 +350,9 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
onClick={onClose}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
{mode === "view" ? "Kapat" : "İptal"}
|
||||
{mode === 'view' ? 'Kapat' : 'İptal'}
|
||||
</button>
|
||||
{mode !== "view" && (
|
||||
{mode !== 'view' && (
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 flex items-center"
|
||||
|
|
@ -405,7 +365,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default SupplierCardModal;
|
||||
export default SupplierCardModal
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
FaPlus,
|
||||
FaSearch,
|
||||
|
|
@ -13,113 +13,112 @@ import {
|
|||
FaTh,
|
||||
FaList,
|
||||
FaBuilding,
|
||||
} from "react-icons/fa";
|
||||
import SupplierCardModal from "./SupplierCardModal";
|
||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
||||
import { BusinessParty, PartyType } from "../../../types/common";
|
||||
} from 'react-icons/fa'
|
||||
import SupplierCardModal from './SupplierCardModal'
|
||||
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||
import { BusinessParty, PartyType } from '../../../types/common'
|
||||
import {
|
||||
getSupplierCardTypeColor,
|
||||
getSupplierCardTypeText,
|
||||
getPaymentTermsText,
|
||||
} from "../../../utils/erp";
|
||||
} from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const SupplierCards: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingCard, setEditingCard] = useState<BusinessParty | null>(null);
|
||||
const [modalMode, setModalMode] = useState<"create" | "view" | "edit">(
|
||||
"create"
|
||||
);
|
||||
const [viewMode, setViewMode] = useState<"cards" | "list">("cards");
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [editingCard, setEditingCard] = useState<BusinessParty | null>(null)
|
||||
const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('create')
|
||||
const [viewMode, setViewMode] = useState<'cards' | 'list'>('cards')
|
||||
|
||||
// Mock data - replace with actual API calls
|
||||
const [supplierCards] = useState<BusinessParty[]>(mockBusinessParties);
|
||||
const [supplierCards] = useState<BusinessParty[]>(mockBusinessParties)
|
||||
|
||||
const filteredCards = supplierCards
|
||||
.filter((card) => card.partyType === PartyType.Supplier)
|
||||
.filter(
|
||||
(card) =>
|
||||
card.cardNumber!.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.id.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
card.id.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
const getCreditUtilization = (card: BusinessParty) => {
|
||||
return (card.currentBalance! / card.creditLimit) * 100;
|
||||
};
|
||||
return (card.currentBalance! / card.creditLimit) * 100
|
||||
}
|
||||
|
||||
const getPerformanceColor = (score: number) => {
|
||||
if (score >= 90) return "text-green-600";
|
||||
if (score >= 80) return "text-yellow-600";
|
||||
return "text-red-600";
|
||||
};
|
||||
if (score >= 90) return 'text-green-600'
|
||||
if (score >= 80) return 'text-yellow-600'
|
||||
return 'text-red-600'
|
||||
}
|
||||
|
||||
const handleEdit = (card: BusinessParty) => {
|
||||
setEditingCard(card);
|
||||
setModalMode("edit");
|
||||
setShowModal(true);
|
||||
};
|
||||
setEditingCard(card)
|
||||
setModalMode('edit')
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleView = (card: BusinessParty) => {
|
||||
setEditingCard(card);
|
||||
setModalMode("view");
|
||||
setShowModal(true);
|
||||
};
|
||||
setEditingCard(card)
|
||||
setModalMode('view')
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleAddNew = () => {
|
||||
setEditingCard(null);
|
||||
setModalMode("create");
|
||||
setShowModal(true);
|
||||
};
|
||||
setEditingCard(null)
|
||||
setModalMode('create')
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleSaveCard = (card: BusinessParty) => {
|
||||
// TODO: Implement save logic
|
||||
console.log("Saving supplier card:", card);
|
||||
setShowModal(false);
|
||||
setEditingCard(null);
|
||||
};
|
||||
console.log('Saving supplier card:', card)
|
||||
setShowModal(false)
|
||||
setEditingCard(null)
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
setEditingCard(null);
|
||||
};
|
||||
setShowModal(false)
|
||||
setEditingCard(null)
|
||||
}
|
||||
|
||||
const isCardExpiring = (card: BusinessParty) => {
|
||||
if (!card.validTo) return false;
|
||||
if (!card.validTo) return false
|
||||
const daysUntilExpiry = Math.ceil(
|
||||
(card.validTo.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
|
||||
);
|
||||
return daysUntilExpiry <= 30;
|
||||
};
|
||||
(card.validTo.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24),
|
||||
)
|
||||
return daysUntilExpiry <= 30
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Tedarikçiler</h2>
|
||||
<p className="text-gray-600">
|
||||
Tedarikçi kredi limitleri, özel şartlar ve performans metriklerini
|
||||
yönetin
|
||||
Tedarikçi kredi limitleri, özel şartlar ve performans metriklerini yönetin
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex bg-gray-100 rounded-lg">
|
||||
<button
|
||||
onClick={() => setViewMode("cards")}
|
||||
onClick={() => setViewMode('cards')}
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
viewMode === "cards"
|
||||
? "bg-white text-gray-900 shadow-sm"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
viewMode === 'cards'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<FaTh className="w-4 h-4 inline" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode("list")}
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
viewMode === "list"
|
||||
? "bg-white text-gray-900 shadow-sm"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
viewMode === 'list'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<FaList className="w-4 h-4 inline" />
|
||||
|
|
@ -150,40 +149,34 @@ const SupplierCards: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
{viewMode === "cards" ? (
|
||||
{viewMode === 'cards' ? (
|
||||
/* Cards Grid */
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{filteredCards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`bg-white rounded-lg shadow-md border-l-4 p-4 hover:shadow-lg transition-shadow ${
|
||||
getSupplierCardTypeColor(card.cardType!).split(" ").slice(-1)[0]
|
||||
getSupplierCardTypeColor(card.cardType!).split(' ').slice(-1)[0]
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-1.5">
|
||||
<FaCreditCard className="w-6 h-6 text-gray-600" />
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
{card.cardNumber}
|
||||
</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{card.cardNumber}</h3>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-sm font-medium border ${getSupplierCardTypeColor(
|
||||
card.cardType!
|
||||
card.cardType!,
|
||||
)}`}
|
||||
>
|
||||
{getSupplierCardTypeText(card.cardType!)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
Tedarikçi: {card.code}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mb-1">Tedarikçi: {card.code}</p>
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500">
|
||||
<span>Ödeme: {getPaymentTermsText(card.paymentTerms)}</span>
|
||||
{card.discountRate && (
|
||||
<span className="text-green-600">
|
||||
%{card.discountRate} indirim
|
||||
</span>
|
||||
<span className="text-green-600">%{card.discountRate} indirim</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -223,9 +216,7 @@ const SupplierCards: React.FC = () => {
|
|||
{isCardExpiring(card) && (
|
||||
<div className="flex items-center space-x-2 text-orange-600 bg-orange-50 px-2.5 py-1.5 rounded-lg">
|
||||
<FaCalendar className="w-4 h-4" />
|
||||
<span className="text-sm">
|
||||
Kartın süresi 30 gün içinde dolacak
|
||||
</span>
|
||||
<span className="text-sm">Kartın süresi 30 gün içinde dolacak</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -238,36 +229,28 @@ const SupplierCards: React.FC = () => {
|
|||
<FaDollarSign className="w-4 h-4 mr-1" />
|
||||
Kredi Limiti
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
₺{card.creditLimit.toLocaleString()}
|
||||
</span>
|
||||
<span className="font-medium">₺{card.creditLimit.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<span className="text-sm text-gray-600">Kullanılan</span>
|
||||
<span className="font-medium">
|
||||
₺{card.currentBalance!.toLocaleString()}
|
||||
</span>
|
||||
<span className="font-medium">₺{card.currentBalance!.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full ${
|
||||
getCreditUtilization(card) > 80
|
||||
? "bg-red-500"
|
||||
? 'bg-red-500'
|
||||
: getCreditUtilization(card) > 60
|
||||
? "bg-yellow-500"
|
||||
: "bg-green-500"
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${getCreditUtilization(card)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>%{getCreditUtilization(card).toFixed(1)} kullanıldı</span>
|
||||
<span>
|
||||
%{getCreditUtilization(card).toFixed(1)} kullanıldı
|
||||
</span>
|
||||
<span>
|
||||
₺
|
||||
{(card.creditLimit - card.currentBalance!).toLocaleString()}{" "}
|
||||
müsait
|
||||
₺{(card.creditLimit - card.currentBalance!).toLocaleString()} müsait
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -281,7 +264,7 @@ const SupplierCards: React.FC = () => {
|
|||
</span>
|
||||
<span
|
||||
className={`font-bold text-lg ${getPerformanceColor(
|
||||
card.performanceMetrics!.overallScore
|
||||
card.performanceMetrics!.overallScore,
|
||||
)}`}
|
||||
>
|
||||
{card.performanceMetrics!.overallScore}/100
|
||||
|
|
@ -292,7 +275,7 @@ const SupplierCards: React.FC = () => {
|
|||
<span className="text-gray-600">Teslimat:</span>
|
||||
<span
|
||||
className={getPerformanceColor(
|
||||
card.performanceMetrics!.deliveryPerformance
|
||||
card.performanceMetrics!.deliveryPerformance,
|
||||
)}
|
||||
>
|
||||
{card.performanceMetrics!.deliveryPerformance}%
|
||||
|
|
@ -300,11 +283,7 @@ const SupplierCards: React.FC = () => {
|
|||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Kalite:</span>
|
||||
<span
|
||||
className={getPerformanceColor(
|
||||
card.performanceMetrics!.qualityRating
|
||||
)}
|
||||
>
|
||||
<span className={getPerformanceColor(card.performanceMetrics!.qualityRating)}>
|
||||
{card.performanceMetrics!.qualityRating}%
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -312,7 +291,7 @@ const SupplierCards: React.FC = () => {
|
|||
<span className="text-gray-600">Fiyat:</span>
|
||||
<span
|
||||
className={getPerformanceColor(
|
||||
card.performanceMetrics!.priceCompetitiveness
|
||||
card.performanceMetrics!.priceCompetitiveness,
|
||||
)}
|
||||
>
|
||||
{card.performanceMetrics!.priceCompetitiveness}%
|
||||
|
|
@ -321,9 +300,7 @@ const SupplierCards: React.FC = () => {
|
|||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Uyum:</span>
|
||||
<span
|
||||
className={getPerformanceColor(
|
||||
card.performanceMetrics!.complianceRating
|
||||
)}
|
||||
className={getPerformanceColor(card.performanceMetrics!.complianceRating)}
|
||||
>
|
||||
{card.performanceMetrics!.complianceRating}%
|
||||
</span>
|
||||
|
|
@ -334,9 +311,7 @@ const SupplierCards: React.FC = () => {
|
|||
{/* Special Conditions */}
|
||||
{card.specialConditions && card.specialConditions.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-2">
|
||||
Özel Şartlar:
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-2">Özel Şartlar:</h4>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{card.specialConditions.map((condition, index) => (
|
||||
<span
|
||||
|
|
@ -355,21 +330,19 @@ const SupplierCards: React.FC = () => {
|
|||
<div className="flex items-center space-x-2">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
card.isActive
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
card.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}`}
|
||||
>
|
||||
{card.isActive ? "Aktif" : "Pasif"}
|
||||
{card.isActive ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
Geçerli: {card.validFrom!.toLocaleDateString("tr-TR")} -{" "}
|
||||
{card.validTo?.toLocaleDateString("tr-TR") || "Süresiz"}
|
||||
Geçerli: {card.validFrom!.toLocaleDateString('tr-TR')} -{' '}
|
||||
{card.validTo?.toLocaleDateString('tr-TR') || 'Süresiz'}
|
||||
</span>
|
||||
</div>
|
||||
{card.lastOrderDate && (
|
||||
<span className="text-xs text-gray-400">
|
||||
Son işlem: {card.lastOrderDate.toLocaleDateString("tr-TR")}
|
||||
Son işlem: {card.lastOrderDate.toLocaleDateString('tr-TR')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -423,16 +396,14 @@ const SupplierCards: React.FC = () => {
|
|||
<div className="text-sm font-medium text-gray-900">
|
||||
{card.cardNumber}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{card.code}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{card.code}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2 py-2 whitespace-nowrap">
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getSupplierCardTypeColor(
|
||||
card.cardType!
|
||||
card.cardType!,
|
||||
)}`}
|
||||
>
|
||||
{getSupplierCardTypeText(card.cardType!)}
|
||||
|
|
@ -447,10 +418,10 @@ const SupplierCards: React.FC = () => {
|
|||
<div
|
||||
className={`h-2 rounded-full ${
|
||||
getCreditUtilization(card) > 80
|
||||
? "bg-red-500"
|
||||
? 'bg-red-500'
|
||||
: getCreditUtilization(card) > 60
|
||||
? "bg-yellow-500"
|
||||
: "bg-green-500"
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${getCreditUtilization(card)}%` }}
|
||||
></div>
|
||||
|
|
@ -465,7 +436,7 @@ const SupplierCards: React.FC = () => {
|
|||
<FaStar className="w-4 h-4 text-yellow-400 mr-1" />
|
||||
<span
|
||||
className={`text-sm font-medium ${getPerformanceColor(
|
||||
card.performanceMetrics!.overallScore
|
||||
card.performanceMetrics!.overallScore,
|
||||
)}`}
|
||||
>
|
||||
{card.performanceMetrics!.overallScore}/100
|
||||
|
|
@ -480,17 +451,17 @@ const SupplierCards: React.FC = () => {
|
|||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
|
||||
card.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'
|
||||
}`}
|
||||
>
|
||||
{card.isActive ? "Aktif" : "Pasif"}
|
||||
{card.isActive ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
{(isCardExpiring(card) || !card.isActive) && (
|
||||
<div className="flex items-center">
|
||||
<FaExclamationCircle className="w-3 h-3 text-orange-500 mr-1" />
|
||||
<span className="text-xs text-orange-600">
|
||||
{!card.isActive ? "Pasif" : "Süre dolacak"}
|
||||
{!card.isActive ? 'Pasif' : 'Süre dolacak'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -531,15 +502,13 @@ const SupplierCards: React.FC = () => {
|
|||
{filteredCards.length === 0 && (
|
||||
<div className="text-center py-8">
|
||||
<FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
Tedarikçi kartı bulunamadı
|
||||
</h3>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Tedarikçi kartı bulunamadı</h3>
|
||||
<p className="text-gray-500">
|
||||
Arama kriterlerinizi değiştirin veya yeni bir tedarikçi kartı
|
||||
ekleyin.
|
||||
Arama kriterlerinizi değiştirin veya yeni bir tedarikçi kartı ekleyin.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Supplier Card Modal */}
|
||||
<SupplierCardModal
|
||||
|
|
@ -549,8 +518,8 @@ const SupplierCards: React.FC = () => {
|
|||
supplierCard={editingCard}
|
||||
mode={modalMode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default SupplierCards;
|
||||
export default SupplierCards
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import {
|
||||
FaSave,
|
||||
FaTimes,
|
||||
|
|
@ -10,163 +10,156 @@ import {
|
|||
FaPhone,
|
||||
FaEnvelope,
|
||||
FaStar,
|
||||
} from "react-icons/fa";
|
||||
import LoadingSpinner from "../../../components/common/LoadingSpinner";
|
||||
import {
|
||||
mockBusinessParties,
|
||||
mockBusinessPartyNew,
|
||||
} from "../../../mocks/mockBusinessParties";
|
||||
import { BusinessParty } from "../../../types/common";
|
||||
} from 'react-icons/fa'
|
||||
import LoadingSpinner from '../../../components/common/LoadingSpinner'
|
||||
import { mockBusinessParties, mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
|
||||
import { BusinessParty } from '../../../types/common'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
interface ValidationErrors {
|
||||
[key: string]: string;
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
const SupplierForm: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const isEdit = Boolean(id);
|
||||
const navigate = useNavigate()
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const isEdit = Boolean(id)
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [errors, setErrors] = useState<ValidationErrors>({});
|
||||
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [errors, setErrors] = useState<ValidationErrors>({})
|
||||
const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew)
|
||||
|
||||
const loadFormData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setLoading(true)
|
||||
try {
|
||||
if (isEdit && id) {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
setFormData(
|
||||
mockBusinessParties.find((s) => s.id === id) || mockBusinessPartyNew
|
||||
);
|
||||
setFormData(mockBusinessParties.find((s) => s.id === id) || mockBusinessPartyNew)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading form data:", error);
|
||||
console.error('Error loading form data:', error)
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoading(false)
|
||||
}
|
||||
}, [isEdit, id]);
|
||||
}, [isEdit, id])
|
||||
|
||||
useEffect(() => {
|
||||
loadFormData();
|
||||
}, [loadFormData]);
|
||||
loadFormData()
|
||||
}, [loadFormData])
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: ValidationErrors = {};
|
||||
const newErrors: ValidationErrors = {}
|
||||
|
||||
if (!formData.code?.trim()) {
|
||||
newErrors.customerCode = "Tedarikçi kodu zorunludur";
|
||||
newErrors.customerCode = 'Tedarikçi kodu zorunludur'
|
||||
}
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.companyName = "Şirket adı zorunludur";
|
||||
newErrors.companyName = 'Şirket adı zorunludur'
|
||||
}
|
||||
if (!formData.primaryContact?.fullName?.trim()) {
|
||||
newErrors.contactPerson = "İletişim kişisi zorunludur";
|
||||
newErrors.contactPerson = 'İletişim kişisi zorunludur'
|
||||
}
|
||||
if (!formData.email?.trim()) {
|
||||
newErrors.email = "Email zorunludur";
|
||||
newErrors.email = 'Email zorunludur'
|
||||
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
|
||||
newErrors.email = "Geçerli bir email adresi girin";
|
||||
newErrors.email = 'Geçerli bir email adresi girin'
|
||||
}
|
||||
if (!formData.phone?.trim()) {
|
||||
newErrors.phone = "Telefon numarası zorunludur";
|
||||
newErrors.phone = 'Telefon numarası zorunludur'
|
||||
}
|
||||
if (!formData.address?.street?.trim()) {
|
||||
newErrors.street = "Adres zorunludur";
|
||||
newErrors.street = 'Adres zorunludur'
|
||||
}
|
||||
if (!formData.address?.city.trim()) {
|
||||
newErrors.city = "Şehir zorunludur";
|
||||
newErrors.city = 'Şehir zorunludur'
|
||||
}
|
||||
if (!formData.address?.country.trim()) {
|
||||
newErrors.country = "Ülke zorunludur";
|
||||
newErrors.country = 'Ülke zorunludur'
|
||||
}
|
||||
if (!formData.paymentTerms) {
|
||||
newErrors.paymentTerms = "Ödeme koşulları seçilmelidir";
|
||||
newErrors.paymentTerms = 'Ödeme koşulları seçilmelidir'
|
||||
}
|
||||
if (!formData.supplierType) {
|
||||
newErrors.supplierType = "Tedarikçi tipi seçilmelidir";
|
||||
newErrors.supplierType = 'Tedarikçi tipi seçilmelidir'
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
setErrors(newErrors)
|
||||
return Object.keys(newErrors).length === 0
|
||||
}
|
||||
|
||||
const handleInputChange = (field: string, value: any) => {
|
||||
setFormData((prev) => {
|
||||
const keys = field.split(".");
|
||||
const updated: any = { ...prev };
|
||||
let temp = updated;
|
||||
const keys = field.split('.')
|
||||
const updated: any = { ...prev }
|
||||
let temp = updated
|
||||
|
||||
keys.forEach((key, index) => {
|
||||
if (index === keys.length - 1) {
|
||||
temp[key] = value;
|
||||
temp[key] = value
|
||||
} else {
|
||||
temp[key] = { ...temp[key] };
|
||||
temp = temp[key];
|
||||
temp[key] = { ...temp[key] }
|
||||
temp = temp[key]
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
return updated
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setSaving(true)
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||
|
||||
console.log("Supplier data:", {
|
||||
console.log('Supplier data:', {
|
||||
...formData,
|
||||
id: isEdit ? id : undefined,
|
||||
});
|
||||
})
|
||||
|
||||
// Show success message
|
||||
alert(
|
||||
isEdit
|
||||
? "Tedarikçi başarıyla güncellendi!"
|
||||
: "Tedarikçi başarıyla oluşturuldu!"
|
||||
);
|
||||
alert(isEdit ? 'Tedarikçi başarıyla güncellendi!' : 'Tedarikçi başarıyla oluşturuldu!')
|
||||
|
||||
// Navigate back to list
|
||||
navigate("/admin/supplychain");
|
||||
navigate('/admin/supplychain')
|
||||
} catch (error) {
|
||||
console.error("Error saving supplier:", error);
|
||||
alert("Bir hata oluştu. Lütfen tekrar deneyin.");
|
||||
console.error('Error saving supplier:', error)
|
||||
alert('Bir hata oluştu. Lütfen tekrar deneyin.')
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/admin/supplychain");
|
||||
};
|
||||
navigate('/admin/supplychain')
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <LoadingSpinner />;
|
||||
return <LoadingSpinner />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
{isEdit ? "Tedarikçi Düzenle" : "Yeni Tedarikçi"}
|
||||
{isEdit ? 'Tedarikçi Düzenle' : 'Yeni Tedarikçi'}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{isEdit
|
||||
? "Mevcut tedarikçi bilgilerini güncelleyin"
|
||||
: "Yeni tedarikçi bilgilerini girin"}
|
||||
? 'Mevcut tedarikçi bilgilerini güncelleyin'
|
||||
: 'Yeni tedarikçi bilgilerini girin'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -191,20 +184,16 @@ const SupplierForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
value={formData.code}
|
||||
onChange={(e) =>
|
||||
handleInputChange("customerCode", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('customerCode', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.customerCode
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Örn: SUP001"
|
||||
/>
|
||||
{errors.supplierCode && (
|
||||
<p className="mt-1 text-sm text-red-600">
|
||||
{errors.supplierCode}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-red-600">{errors.supplierCode}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -214,13 +203,11 @@ const SupplierForm: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={formData.supplierType}
|
||||
onChange={(e) =>
|
||||
handleInputChange("supplierType", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('supplierType', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.supplierType
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
>
|
||||
<option value="">Tip seçin</option>
|
||||
|
|
@ -231,34 +218,26 @@ const SupplierForm: React.FC = () => {
|
|||
<option value="OTHER">Diğer</option>
|
||||
</select>
|
||||
{errors.supplierType && (
|
||||
<p className="mt-1 text-sm text-red-600">
|
||||
{errors.supplierType}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-red-600">{errors.supplierType}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Şirket Adı *
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Şirket Adı *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
handleInputChange("companyName", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('companyName', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.companyName
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Şirket adı"
|
||||
/>
|
||||
{errors.companyName && (
|
||||
<p className="mt-1 text-sm text-red-600">
|
||||
{errors.companyName}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-red-600">{errors.companyName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -270,9 +249,7 @@ const SupplierForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
value={formData.taxNumber}
|
||||
onChange={(e) =>
|
||||
handleInputChange("taxNumber", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('taxNumber', e.target.value)}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="1234567890"
|
||||
/>
|
||||
|
|
@ -285,9 +262,7 @@ const SupplierForm: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
value={formData.certifications}
|
||||
onChange={(e) =>
|
||||
handleInputChange("certifications", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('certifications', e.target.value)}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="ISO 9001, ISO 14001, CE"
|
||||
/>
|
||||
|
|
@ -315,17 +290,12 @@ const SupplierForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Ad *
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Ad *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.primaryContact?.firstName}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"primaryContact.firstName",
|
||||
e.target.value
|
||||
)
|
||||
handleInputChange('primaryContact.firstName', e.target.value)
|
||||
}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
|
|
@ -333,33 +303,22 @@ const SupplierForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Soyad *
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Soyad *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.primaryContact?.lastName}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"primaryContact.lastName",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onChange={(e) => handleInputChange('primaryContact.lastName', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Ünvan
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Ünvan</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.primaryContact?.title}
|
||||
onChange={(e) =>
|
||||
handleInputChange("primaryContact.title", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('primaryContact.title', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Genel Müdür, Satış Direktörü vb."
|
||||
/>
|
||||
|
|
@ -373,10 +332,7 @@ const SupplierForm: React.FC = () => {
|
|||
type="text"
|
||||
value={formData.primaryContact?.department}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"primaryContact.department",
|
||||
e.target.value
|
||||
)
|
||||
handleInputChange('primaryContact.department', e.target.value)
|
||||
}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Satış, Pazarlama, İnsan Kaynakları vb."
|
||||
|
|
@ -390,24 +346,18 @@ const SupplierForm: React.FC = () => {
|
|||
<input
|
||||
type="email"
|
||||
value={formData.primaryContact?.email}
|
||||
onChange={(e) =>
|
||||
handleInputChange("primaryContact.email", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('primaryContact.email', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Telefon
|
||||
</label>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Telefon</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.primaryContact?.phone}
|
||||
onChange={(e) =>
|
||||
handleInputChange("primaryContact.phone", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('primaryContact.phone', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="+90 (212) 555 0123"
|
||||
/>
|
||||
|
|
@ -420,9 +370,7 @@ const SupplierForm: React.FC = () => {
|
|||
<input
|
||||
type="tel"
|
||||
value={formData.primaryContact?.mobile}
|
||||
onChange={(e) =>
|
||||
handleInputChange("primaryContact.mobile", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('primaryContact.mobile', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="+90 (555) 123 4567"
|
||||
/>
|
||||
|
|
@ -432,49 +380,41 @@ const SupplierForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email *
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
|
||||
<div className="relative">
|
||||
<FaEnvelope className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
className={`block w-full pl-10 pr-3 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.email
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
||||
)}
|
||||
{errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Telefon *
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Telefon *</label>
|
||||
<div className="relative">
|
||||
<FaPhone className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange("phone", e.target.value)}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
className={`block w-full pl-10 pr-3 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.phone
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="+90 212 555 0123"
|
||||
/>
|
||||
</div>
|
||||
{errors.phone && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.phone}</p>
|
||||
)}
|
||||
{errors.phone && <p className="mt-1 text-sm text-red-600">{errors.phone}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -491,100 +431,74 @@ const SupplierForm: React.FC = () => {
|
|||
|
||||
<div className="px-4 py-3 space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Adres *
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Adres *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.address?.street}
|
||||
onChange={(e) =>
|
||||
handleInputChange("address.street", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('address.street', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.street
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Sokak, cadde, mahalle"
|
||||
/>
|
||||
{errors.street && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.street}</p>
|
||||
)}
|
||||
{errors.street && <p className="mt-1 text-sm text-red-600">{errors.street}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Şehir *
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Şehir *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.address?.city}
|
||||
onChange={(e) =>
|
||||
handleInputChange("address.city", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('address.city', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.city
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Şehir"
|
||||
/>
|
||||
{errors.city && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.city}</p>
|
||||
)}
|
||||
{errors.city && <p className="mt-1 text-sm text-red-600">{errors.city}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
İl/Bölge
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">İl/Bölge</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.address?.state}
|
||||
onChange={(e) =>
|
||||
handleInputChange("address.state", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('address.state', e.target.value)}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="İl/Bölge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Posta Kodu
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Posta Kodu</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.address?.postalCode}
|
||||
onChange={(e) =>
|
||||
handleInputChange("address.postalCode", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('address.postalCode', e.target.value)}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="34000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Ülke *
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Ülke *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.address?.country}
|
||||
onChange={(e) =>
|
||||
handleInputChange("address.country", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('address.country', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.country
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Ülke"
|
||||
/>
|
||||
{errors.country && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.country}</p>
|
||||
)}
|
||||
{errors.country && <p className="mt-1 text-sm text-red-600">{errors.country}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -611,10 +525,7 @@ const SupplierForm: React.FC = () => {
|
|||
min="0"
|
||||
value={formData.creditLimit}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"creditLimit",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
handleInputChange('creditLimit', parseFloat(e.target.value) || 0)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="0.00"
|
||||
|
|
@ -627,13 +538,11 @@ const SupplierForm: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={formData.paymentTerms}
|
||||
onChange={(e) =>
|
||||
handleInputChange("paymentTerms", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('paymentTerms', e.target.value)}
|
||||
className={`block w-full px-2.5 py-1.5 border rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 ${
|
||||
errors.paymentTerms
|
||||
? "border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
||||
}`}
|
||||
>
|
||||
<option value="">Ödeme koşulu seçin</option>
|
||||
|
|
@ -644,9 +553,7 @@ const SupplierForm: React.FC = () => {
|
|||
<option value="NET_90">Net 90 Gün</option>
|
||||
</select>
|
||||
{errors.paymentTerms && (
|
||||
<p className="mt-1 text-sm text-red-600">
|
||||
{errors.paymentTerms}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-red-600">{errors.paymentTerms}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -656,9 +563,7 @@ const SupplierForm: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={formData.currency}
|
||||
onChange={(e) =>
|
||||
handleInputChange("currency", e.target.value)
|
||||
}
|
||||
onChange={(e) => handleInputChange('currency', e.target.value)}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
>
|
||||
<option value="TRY">Türk Lirası (TRY)</option>
|
||||
|
|
@ -670,9 +575,7 @@ const SupplierForm: React.FC = () => {
|
|||
|
||||
{formData.bankAccounts?.map((account, index) => (
|
||||
<div key={account.id || index} className="space-y-3 mb-4">
|
||||
<h4 className="text-md font-semibold text-gray-800">
|
||||
Banka Hesabı {index + 1}
|
||||
</h4>
|
||||
<h4 className="text-md font-semibold text-gray-800">Banka Hesabı {index + 1}</h4>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
|
|
@ -683,10 +586,7 @@ const SupplierForm: React.FC = () => {
|
|||
type="text"
|
||||
value={account.bankName}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
`bankAccounts.${index}.bankName`,
|
||||
e.target.value
|
||||
)
|
||||
handleInputChange(`bankAccounts.${index}.bankName`, e.target.value)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="Banka adı"
|
||||
|
|
@ -701,10 +601,7 @@ const SupplierForm: React.FC = () => {
|
|||
type="text"
|
||||
value={account.accountNumber}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
`bankAccounts.${index}.accountNumber`,
|
||||
e.target.value
|
||||
)
|
||||
handleInputChange(`bankAccounts.${index}.accountNumber`, e.target.value)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="Hesap numarası"
|
||||
|
|
@ -714,17 +611,12 @@ const SupplierForm: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
IBAN
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
|
||||
<input
|
||||
type="text"
|
||||
value={account.iban}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
`bankAccounts.${index}.iban`,
|
||||
e.target.value
|
||||
)
|
||||
handleInputChange(`bankAccounts.${index}.iban`, e.target.value)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="TR00 0000 0000 0000 0000 0000 00"
|
||||
|
|
@ -739,10 +631,7 @@ const SupplierForm: React.FC = () => {
|
|||
type="text"
|
||||
value={account.swiftCode}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
`bankAccounts.${index}.swiftCode`,
|
||||
e.target.value
|
||||
)
|
||||
handleInputChange(`bankAccounts.${index}.swiftCode`, e.target.value)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
placeholder="SWIFT kodu"
|
||||
|
|
@ -776,10 +665,7 @@ const SupplierForm: React.FC = () => {
|
|||
max="5"
|
||||
value={formData.performanceMetrics?.qualityRating}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"qualityRating",
|
||||
parseFloat(e.target.value) || 1
|
||||
)
|
||||
handleInputChange('qualityRating', parseFloat(e.target.value) || 1)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -796,10 +682,7 @@ const SupplierForm: React.FC = () => {
|
|||
max="5"
|
||||
value={formData.performanceMetrics?.deliveryPerformance}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"deliveryRating",
|
||||
parseFloat(e.target.value) || 1
|
||||
)
|
||||
handleInputChange('deliveryRating', parseFloat(e.target.value) || 1)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -816,10 +699,7 @@ const SupplierForm: React.FC = () => {
|
|||
max="5"
|
||||
value={formData.performanceMetrics?.priceCompetitiveness}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"priceRating",
|
||||
parseFloat(e.target.value) || 1
|
||||
)
|
||||
handleInputChange('priceRating', parseFloat(e.target.value) || 1)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -836,10 +716,7 @@ const SupplierForm: React.FC = () => {
|
|||
max="5"
|
||||
value={formData.performanceMetrics?.overallScore}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"overallRating",
|
||||
parseFloat(e.target.value) || 1
|
||||
)
|
||||
handleInputChange('overallRating', parseFloat(e.target.value) || 1)
|
||||
}
|
||||
className="block w-full px-2.5 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
|
|
@ -851,15 +728,10 @@ const SupplierForm: React.FC = () => {
|
|||
type="checkbox"
|
||||
id="isActive"
|
||||
checked={formData.isActive}
|
||||
onChange={(e) =>
|
||||
handleInputChange("isActive", e.target.checked)
|
||||
}
|
||||
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"
|
||||
>
|
||||
<label htmlFor="isActive" className="ml-2 block text-sm text-gray-900">
|
||||
Aktif
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -889,14 +761,15 @@ const SupplierForm: React.FC = () => {
|
|||
) : (
|
||||
<>
|
||||
<FaSave className="w-4 h-4 mr-2" />
|
||||
{isEdit ? "Güncelle" : "Kaydet"}
|
||||
{isEdit ? 'Güncelle' : 'Kaydet'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default SupplierForm;
|
||||
export default SupplierForm
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
FaTruck,
|
||||
FaPlus,
|
||||
|
|
@ -17,45 +17,39 @@ import {
|
|||
FaArrowUp,
|
||||
FaUsers,
|
||||
FaBuilding,
|
||||
} from "react-icons/fa";
|
||||
import classNames from "classnames";
|
||||
import { SupplierTypeEnum } from "../../../types/mm";
|
||||
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
|
||||
import { PartyType } from "../../../types/common";
|
||||
import {
|
||||
getSupplierTypeColor,
|
||||
getSupplierTypeText,
|
||||
getRatingColor,
|
||||
} from "../../../utils/erp";
|
||||
} from 'react-icons/fa'
|
||||
import classNames from 'classnames'
|
||||
import { SupplierTypeEnum } from '../../../types/mm'
|
||||
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||||
import { PartyType } from '../../../types/common'
|
||||
import { getSupplierTypeColor, getSupplierTypeText, getRatingColor } from '../../../utils/erp'
|
||||
import { Container } from '@/components/shared'
|
||||
|
||||
const SupplierList: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filterType, setFilterType] = useState("all");
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [filterType, setFilterType] = useState('all')
|
||||
const [showFilters, setShowFilters] = useState(false)
|
||||
|
||||
const {
|
||||
data: suppliers,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["suppliers", searchTerm, filterType],
|
||||
queryKey: ['suppliers', searchTerm, filterType],
|
||||
queryFn: async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
|
||||
const filtredSuppliers = mockBusinessParties.filter(
|
||||
(a) => a.partyType === PartyType.Supplier
|
||||
);
|
||||
const filtredSuppliers = mockBusinessParties.filter((a) => a.partyType === PartyType.Supplier)
|
||||
|
||||
return filtredSuppliers.filter((supplier) => {
|
||||
const matchesSearch =
|
||||
supplier.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
supplier.name.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesType =
|
||||
filterType === "all" || supplier.supplierType === filterType;
|
||||
return matchesSearch && matchesType;
|
||||
});
|
||||
supplier.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesType = filterType === 'all' || supplier.supplierType === filterType
|
||||
return matchesSearch && matchesType
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
|
|
@ -63,7 +57,7 @@ const SupplierList: React.FC = () => {
|
|||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<span className="ml-3 text-gray-600">Tedarikçiler yükleniyor...</span>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
|
|
@ -71,16 +65,15 @@ const SupplierList: React.FC = () => {
|
|||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<div className="flex items-center">
|
||||
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
|
||||
<span className="text-red-800">
|
||||
Tedarikçiler yüklenirken hata oluştu.
|
||||
</span>
|
||||
<span className="text-red-800">Tedarikçiler yüklenirken hata oluştu.</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 pt-2">
|
||||
<Container>
|
||||
<div className="space-y-2">
|
||||
{/* Header Actions */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
|
|
@ -101,10 +94,10 @@ const SupplierList: React.FC = () => {
|
|||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={classNames(
|
||||
"flex items-center px-3 py-1.5 border rounded-lg transition-colors",
|
||||
'flex items-center px-3 py-1.5 border rounded-lg transition-colors',
|
||||
showFilters
|
||||
? "border-blue-500 bg-blue-50 text-blue-700"
|
||||
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
|
||||
)}
|
||||
>
|
||||
<FaFilter size={16} className="mr-2" />
|
||||
|
|
@ -114,7 +107,7 @@ const SupplierList: React.FC = () => {
|
|||
|
||||
<div className="flex items-center space-x-3">
|
||||
<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 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<FaDownload size={16} className="mr-2" />
|
||||
|
|
@ -154,8 +147,8 @@ const SupplierList: React.FC = () => {
|
|||
<div className="flex items-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
setFilterType("all");
|
||||
setSearchTerm("");
|
||||
setFilterType('all')
|
||||
setSearchTerm('')
|
||||
}}
|
||||
className="w-full px-3 py-1.5 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
|
|
@ -171,12 +164,8 @@ const SupplierList: React.FC = () => {
|
|||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">
|
||||
Toplam Tedarikçi
|
||||
</p>
|
||||
<p className="text-xl font-bold text-gray-900">
|
||||
{suppliers?.length || 0}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-gray-600">Toplam Tedarikçi</p>
|
||||
<p className="text-xl font-bold text-gray-900">{suppliers?.length || 0}</p>
|
||||
</div>
|
||||
<FaBuilding className="h-8 w-8 text-blue-600" />
|
||||
</div>
|
||||
|
|
@ -185,9 +174,7 @@ const SupplierList: React.FC = () => {
|
|||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">
|
||||
Aktif Tedarikçi
|
||||
</p>
|
||||
<p className="text-sm font-medium text-gray-600">Aktif Tedarikçi</p>
|
||||
<p className="text-xl font-bold text-green-600">
|
||||
{suppliers?.filter((s) => s.isActive).length || 0}
|
||||
</p>
|
||||
|
|
@ -204,12 +191,11 @@ const SupplierList: React.FC = () => {
|
|||
{suppliers?.length
|
||||
? (
|
||||
suppliers.reduce(
|
||||
(acc, s) =>
|
||||
acc + (s.performanceMetrics?.overallScore ?? 0),
|
||||
0
|
||||
(acc, s) => acc + (s.performanceMetrics?.overallScore ?? 0),
|
||||
0,
|
||||
) / suppliers.length
|
||||
).toFixed(1)
|
||||
: "0.0"}
|
||||
: '0.0'}
|
||||
</p>
|
||||
</div>
|
||||
<FaStar className="h-8 w-8 text-yellow-600" />
|
||||
|
|
@ -219,13 +205,10 @@ const SupplierList: React.FC = () => {
|
|||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">
|
||||
Yüksek Performans
|
||||
</p>
|
||||
<p className="text-sm font-medium text-gray-600">Yüksek Performans</p>
|
||||
<p className="text-xl font-bold text-purple-600">
|
||||
{suppliers?.filter(
|
||||
(s) => (s.performanceMetrics?.overallScore ?? 0) >= 4.5
|
||||
).length || 0}
|
||||
{suppliers?.filter((s) => (s.performanceMetrics?.overallScore ?? 0) >= 4.5)
|
||||
.length || 0}
|
||||
</p>
|
||||
</div>
|
||||
<FaArrowUp className="h-8 w-8 text-purple-600" />
|
||||
|
|
@ -269,10 +252,7 @@ const SupplierList: React.FC = () => {
|
|||
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{suppliers?.map((supplier) => (
|
||||
<tr
|
||||
key={supplier.id}
|
||||
className="hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<tr key={supplier.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-10 w-10">
|
||||
|
|
@ -281,12 +261,8 @@ const SupplierList: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{supplier.code}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{supplier.name}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-900">{supplier.code}</div>
|
||||
<div className="text-sm text-gray-500">{supplier.name}</div>
|
||||
{supplier.taxNumber && (
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
VKN: {supplier.taxNumber}
|
||||
|
|
@ -322,8 +298,8 @@ const SupplierList: React.FC = () => {
|
|||
<div className="space-y-1">
|
||||
<span
|
||||
className={classNames(
|
||||
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
|
||||
getSupplierTypeColor(supplier.supplierType!)
|
||||
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
|
||||
getSupplierTypeColor(supplier.supplierType!),
|
||||
)}
|
||||
>
|
||||
{getSupplierTypeText(supplier.supplierType!)}
|
||||
|
|
@ -341,43 +317,28 @@ const SupplierList: React.FC = () => {
|
|||
<FaStar
|
||||
size={14}
|
||||
className={classNames(
|
||||
"mr-1",
|
||||
getRatingColor(
|
||||
supplier.performanceMetrics?.overallScore ?? 0
|
||||
)
|
||||
'mr-1',
|
||||
getRatingColor(supplier.performanceMetrics?.overallScore ?? 0),
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={classNames(
|
||||
"text-sm font-medium",
|
||||
getRatingColor(
|
||||
supplier.performanceMetrics?.overallScore ?? 0
|
||||
)
|
||||
'text-sm font-medium',
|
||||
getRatingColor(supplier.performanceMetrics?.overallScore ?? 0),
|
||||
)}
|
||||
>
|
||||
{(
|
||||
supplier.performanceMetrics?.overallScore ?? 0
|
||||
).toFixed(1)}
|
||||
{(supplier.performanceMetrics?.overallScore ?? 0).toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
K:
|
||||
{(
|
||||
supplier.performanceMetrics?.qualityRating ?? 0
|
||||
).toFixed(1)}{" "}
|
||||
T:
|
||||
{(
|
||||
supplier.performanceMetrics?.deliveryPerformance ?? 0
|
||||
).toFixed(1)}{" "}
|
||||
F:
|
||||
{(
|
||||
supplier.performanceMetrics?.priceCompetitiveness ?? 0
|
||||
).toFixed(1)}
|
||||
{(supplier.performanceMetrics?.qualityRating ?? 0).toFixed(1)} T:
|
||||
{(supplier.performanceMetrics?.deliveryPerformance ?? 0).toFixed(1)} F:
|
||||
{(supplier.performanceMetrics?.priceCompetitiveness ?? 0).toFixed(1)}
|
||||
</div>
|
||||
{supplier.certifications &&
|
||||
supplier.certifications.length > 0 && (
|
||||
{supplier.certifications && supplier.certifications.length > 0 && (
|
||||
<div className="text-xs text-blue-600">
|
||||
{supplier.certifications.join(", ")}
|
||||
{supplier.certifications.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -387,21 +348,19 @@ const SupplierList: React.FC = () => {
|
|||
<div className="text-sm font-medium text-gray-900">
|
||||
₺{supplier.creditLimit.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{supplier.paymentTerms}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{supplier.paymentTerms}</div>
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
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',
|
||||
supplier.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',
|
||||
)}
|
||||
>
|
||||
{supplier.isActive ? "Aktif" : "Pasif"}
|
||||
{supplier.isActive ? 'Aktif' : 'Pasif'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
|
|
@ -433,12 +392,8 @@ const SupplierList: React.FC = () => {
|
|||
{(!suppliers || suppliers.length === 0) && (
|
||||
<div className="text-center py-10">
|
||||
<FaTruck className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">
|
||||
Tedarikçi bulunamadı
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Yeni tedarikçi ekleyerek başlayın.
|
||||
</p>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">Tedarikçi bulunamadı</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Yeni tedarikçi ekleyerek başlayın.</p>
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
to="/admin/supplychain/suppliers/new"
|
||||
|
|
@ -452,7 +407,8 @@ const SupplierList: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default SupplierList;
|
||||
export default SupplierList
|
||||
|
|
|
|||
Loading…
Reference in a new issue