sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Supply Management

Browse source
This commit is contained in:
Sedat Öztürk 2025-09-16 00:42:39 +03:00
parent 4b7fd59e61
commit 811a575ff7
21 changed files with 6426 additions and 7554 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
View file

@ -3270,16 +3270,6 @@
"RequiredPermissionName": null, "RequiredPermissionName": null,
"IsDisabled": false "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", "ParentCode": "App.SupplyChain",
"Code": "App.SupplyChain.Quotations", "Code": "App.SupplyChain.Quotations",

204
ui/src/views/supplyChain/components/ApprovalWorkflowModal.tsx
View file

@ -1,20 +1,20 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react'
import { FaTimes, FaSave, FaUsers, FaPlus, FaTrash } from "react-icons/fa"; import { FaTimes, FaSave, FaUsers, FaPlus, FaTrash } from 'react-icons/fa'
import { import {
MmApprovalWorkflow, MmApprovalWorkflow,
MmApprovalWorkflowLevel, MmApprovalWorkflowLevel,
RequestTypeEnum, RequestTypeEnum,
ApprovalLevelEnum, ApprovalLevelEnum,
} from "../../../types/mm"; } from '../../../types/mm'
import MultiSelectEmployee from "../../../components/common/MultiSelectEmployee"; import MultiSelectEmployee from '../../../components/common/MultiSelectEmployee'
import { mockDepartments } from "../../../mocks/mockDepartments"; import { mockDepartments } from '../../../mocks/mockDepartments'
interface ApprovalWorkflowModalProps { interface ApprovalWorkflowModalProps {
isOpen: boolean; isOpen: boolean
onClose: () => void; onClose: () => void
onSave: (workflow: MmApprovalWorkflow) => void; onSave: (workflow: MmApprovalWorkflow) => void
workflow?: MmApprovalWorkflow | null; workflow?: MmApprovalWorkflow | null
mode: "create" | "view" | "edit"; mode: 'create' | 'view' | 'edit'
} }
const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
@ -25,119 +25,117 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
mode, mode,
}) => { }) => {
const [formData, setFormData] = useState<Partial<MmApprovalWorkflow>>({ const [formData, setFormData] = useState<Partial<MmApprovalWorkflow>>({
name: "", name: '',
departmentId: "", departmentId: '',
requestType: RequestTypeEnum.Material, requestType: RequestTypeEnum.Material,
amountThreshold: 0, amountThreshold: 0,
approvalLevels: [], approvalLevels: [],
isActive: true, isActive: true,
}); })
useEffect(() => { useEffect(() => {
if (mode === "create") { if (mode === 'create') {
// Reset form to initial empty state for new workflow // Reset form to initial empty state for new workflow
setFormData({ setFormData({
name: "", name: '',
departmentId: "", departmentId: '',
requestType: RequestTypeEnum.Material, requestType: RequestTypeEnum.Material,
amountThreshold: 0, amountThreshold: 0,
approvalLevels: [], approvalLevels: [],
isActive: true, isActive: true,
}); })
} else if (workflow) { } else if (workflow) {
// Load existing workflow data for view/edit modes // Load existing workflow data for view/edit modes
setFormData(workflow); setFormData(workflow)
} }
}, [workflow, mode]); }, [workflow, mode])
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent< e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>
) => { ) => {
const { name, value, type } = e.target; const { name, value, type } = e.target
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
[name]: [name]:
type === "number" type === 'number'
? parseFloat(value) || 0 ? parseFloat(value) || 0
: type === "checkbox" : type === 'checkbox'
? (e.target as HTMLInputElement).checked ? (e.target as HTMLInputElement).checked
: value, : value,
})); }))
}; }
const addApprovalLevel = () => { const addApprovalLevel = () => {
const newLevel: MmApprovalWorkflowLevel = { const newLevel: MmApprovalWorkflowLevel = {
id: `level-${Date.now()}`, id: `level-${Date.now()}`,
workflowId: formData.id || "", workflowId: formData.id || '',
level: ApprovalLevelEnum.Supervisor, level: ApprovalLevelEnum.Supervisor,
approverUserIds: [], approverUserIds: [],
approverNames: [], approverNames: [],
sequence: (formData.approvalLevels?.length || 0) + 1, sequence: (formData.approvalLevels?.length || 0) + 1,
isRequired: true, isRequired: true,
isParallel: false, isParallel: false,
}; }
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
approvalLevels: [...(prev.approvalLevels || []), newLevel], approvalLevels: [...(prev.approvalLevels || []), newLevel],
})); }))
}; }
const removeApprovalLevel = (index: number) => { const removeApprovalLevel = (index: number) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
approvalLevels: prev.approvalLevels?.filter((_, i) => i !== index) || [], approvalLevels: prev.approvalLevels?.filter((_, i) => i !== index) || [],
})); }))
}; }
const updateApprovalLevel = ( const updateApprovalLevel = (
index: number, index: number,
field: keyof MmApprovalWorkflowLevel, field: keyof MmApprovalWorkflowLevel,
value: string | number | boolean | string[] | undefined value: string | number | boolean | string[] | undefined,
) => { ) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
approvalLevels: approvalLevels:
prev.approvalLevels?.map((level, i) => prev.approvalLevels?.map((level, i) =>
i === index ? { ...level, [field]: value } : level i === index ? { ...level, [field]: value } : level,
) || [], ) || [],
})); }))
}; }
const handleApproverNamesChange = (index: number, employees: string[]) => { const handleApproverNamesChange = (index: number, employees: string[]) => {
updateApprovalLevel(index, "approverNames", employees); updateApprovalLevel(index, 'approverNames', employees)
}; }
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
if (mode !== "view") { if (mode !== 'view') {
const newWorkflow: MmApprovalWorkflow = { const newWorkflow: MmApprovalWorkflow = {
id: workflow?.id || `WF-${Date.now()}`, id: workflow?.id || `WF-${Date.now()}`,
name: formData.name || "", name: formData.name || '',
departmentId: formData.departmentId || "", departmentId: formData.departmentId || '',
requestType: formData.requestType || RequestTypeEnum.Material, requestType: formData.requestType || RequestTypeEnum.Material,
amountThreshold: formData.amountThreshold || 0, amountThreshold: formData.amountThreshold || 0,
approvalLevels: formData.approvalLevels || [], approvalLevels: formData.approvalLevels || [],
isActive: formData.isActive ?? true, isActive: formData.isActive ?? true,
creationTime: workflow?.creationTime || new Date(), creationTime: workflow?.creationTime || new Date(),
lastModificationTime: new Date(), lastModificationTime: new Date(),
}; }
onSave(newWorkflow); onSave(newWorkflow)
} }
onClose(); onClose()
}; }
if (!isOpen) return null; if (!isOpen) return null
const isReadOnly = mode === "view"; const isReadOnly = mode === 'view'
const modalTitle = const modalTitle =
mode === "create" mode === 'create'
? "Yeni Onay Süreci" ? 'Yeni Onay Süreci'
: mode === "edit" : mode === 'edit'
? "Onay Sürecini Düzenle" ? 'Onay Sürecini Düzenle'
: "Onay Süreci Detayları"; : 'Onay Süreci Detayları'
return ( return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"> <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" /> <FaUsers className="mr-2 text-blue-600" />
{modalTitle} {modalTitle}
</h3> </h3>
<button <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-1">
onClick={onClose}
className="text-gray-400 hover:text-gray-600 p-1"
>
<FaTimes /> <FaTimes />
</button> </button>
</div> </div>
@ -159,18 +154,14 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Temel Bilgiler */} {/* Temel Bilgiler */}
<div className="space-y-3"> <div className="space-y-3">
<h4 className="text-base font-medium text-gray-900 border-b pb-1"> <h4 className="text-base font-medium text-gray-900 border-b pb-1">Temel Bilgiler</h4>
Temel Bilgiler
</h4>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Süreç Adı</label>
Süreç Adı
</label>
<input <input
type="text" type="text"
name="workflowName" name="workflowName"
value={formData.name || ""} value={formData.name || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Departman</label>
Departman
</label>
<select <select
value={formData.departmentId || ""} value={formData.departmentId || ''}
onChange={handleInputChange} 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" 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 required
@ -198,9 +187,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Talep Tipi</label>
Talep Tipi
</label>
<select <select
name="requestType" name="requestType"
value={formData.requestType || RequestTypeEnum.Material} value={formData.requestType || RequestTypeEnum.Material}
@ -216,9 +203,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Tutar Eşiği (TL)</label>
Tutar Eşiği (TL)
</label>
<input <input
type="number" type="number"
name="amountThreshold" name="amountThreshold"
@ -239,9 +224,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
disabled={isReadOnly} disabled={isReadOnly}
className="mr-2" className="mr-2"
/> />
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">Aktif</span>
Aktif
</span>
</label> </label>
</div> </div>
</div> </div>
@ -266,10 +249,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
<div className="space-y-2 max-h-56 overflow-y-auto p-1"> <div className="space-y-2 max-h-56 overflow-y-auto p-1">
{formData.approvalLevels?.map((level, index) => ( {formData.approvalLevels?.map((level, index) => (
<div <div key={level.id} className="border rounded-lg p-2 bg-gray-50">
key={level.id}
className="border rounded-lg p-2 bg-gray-50"
>
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">
Seviye {level.sequence} Seviye {level.sequence}
@ -292,30 +272,18 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
</label> </label>
<select <select
value={level.level} value={level.level}
onChange={(e) => onChange={(e) => updateApprovalLevel(index, 'level', e.target.value)}
updateApprovalLevel(index, "level", e.target.value)
}
disabled={isReadOnly} 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" 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}> <option value={ApprovalLevelEnum.Supervisor}>Süpervizör</option>
Süpervizör <option value={ApprovalLevelEnum.Manager}>Müdür</option>
</option> <option value={ApprovalLevelEnum.Director}>Direktör</option>
<option value={ApprovalLevelEnum.Manager}> <option value={ApprovalLevelEnum.GeneralManager}>Genel Müdür</option>
Müdür
</option>
<option value={ApprovalLevelEnum.Director}>
Direktör
</option>
<option value={ApprovalLevelEnum.GeneralManager}>
Genel Müdür
</option>
<option value={ApprovalLevelEnum.FinanceManager}> <option value={ApprovalLevelEnum.FinanceManager}>
Mali İşler Müdürü Mali İşler Müdürü
</option> </option>
<option value={ApprovalLevelEnum.TechnicalManager}> <option value={ApprovalLevelEnum.TechnicalManager}>Teknik Müdür</option>
Teknik Müdür
</option>
</select> </select>
</div> </div>
@ -325,9 +293,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
</label> </label>
<MultiSelectEmployee <MultiSelectEmployee
selectedEmployees={level.approverNames || []} selectedEmployees={level.approverNames || []}
onChange={(employees) => onChange={(employees) => handleApproverNamesChange(index, employees)}
handleApproverNamesChange(index, employees)
}
disabled={isReadOnly} disabled={isReadOnly}
placeholder="Onaylayıcı seçin..." placeholder="Onaylayıcı seçin..."
className="mt-1" className="mt-1"
@ -340,12 +306,12 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
</label> </label>
<input <input
type="number" type="number"
value={level.timeoutDays || ""} value={level.timeoutDays || ''}
onChange={(e) => onChange={(e) =>
updateApprovalLevel( updateApprovalLevel(
index, index,
"timeoutDays", 'timeoutDays',
parseInt(e.target.value) || undefined parseInt(e.target.value) || undefined,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -360,11 +326,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
type="checkbox" type="checkbox"
checked={level.isRequired} checked={level.isRequired}
onChange={(e) => onChange={(e) =>
updateApprovalLevel( updateApprovalLevel(index, 'isRequired', e.target.checked)
index,
"isRequired",
e.target.checked
)
} }
disabled={isReadOnly} disabled={isReadOnly}
className="mr-1" className="mr-1"
@ -376,11 +338,7 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
type="checkbox" type="checkbox"
checked={level.isParallel} checked={level.isParallel}
onChange={(e) => onChange={(e) =>
updateApprovalLevel( updateApprovalLevel(index, 'isParallel', e.target.checked)
index,
"isParallel",
e.target.checked
)
} }
disabled={isReadOnly} disabled={isReadOnly}
className="mr-1" className="mr-1"
@ -408,9 +366,9 @@ const ApprovalWorkflowModal: React.FC<ApprovalWorkflowModalProps> = ({
onClick={onClose} onClick={onClose}
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50" 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> </button>
{mode !== "view" && ( {mode !== 'view' && (
<button <button
type="submit" type="submit"
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm" 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> </form>
</div> </div>
</div> </div>
); )
}; }
export default ApprovalWorkflowModal; export default ApprovalWorkflowModal

613
ui/src/views/supplyChain/components/ApprovalWorkflows.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { import {
FaPlus, FaPlus,
FaSearch, FaSearch,
@ -10,382 +10,345 @@ import {
FaClock, FaClock,
FaCheckCircle, FaCheckCircle,
FaEye, FaEye,
} from "react-icons/fa"; } from 'react-icons/fa'
import { MmApprovalWorkflow } from "../../../types/mm"; import { MmApprovalWorkflow } from '../../../types/mm'
import ApprovalWorkflowModal from "./ApprovalWorkflowModal"; import ApprovalWorkflowModal from './ApprovalWorkflowModal'
import { mockApprovalWorkflows } from "../../../mocks/mockApprovalWorkflows"; import { mockApprovalWorkflows } from '../../../mocks/mockApprovalWorkflows'
import { import {
getApprovalLevelColor, getApprovalLevelColor,
getApprovalLevelText, getApprovalLevelText,
getRequestTypeColor, getRequestTypeColor,
getRequestTypeText, getRequestTypeText,
} from "../../../utils/erp"; } from '../../../utils/erp'
import { Container } from '@/components/shared'
const ApprovalWorkflows: React.FC = () => { const ApprovalWorkflows: React.FC = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false)
const [editingWorkflow, setEditingWorkflow] = const [editingWorkflow, setEditingWorkflow] = useState<MmApprovalWorkflow | null>(null)
useState<MmApprovalWorkflow | null>(null); const [selectedWorkflow, setSelectedWorkflow] = useState<MmApprovalWorkflow | null>(null)
const [selectedWorkflow, setSelectedWorkflow] = const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('create')
useState<MmApprovalWorkflow | null>(null);
const [modalMode, setModalMode] = useState<"create" | "view" | "edit">(
"create"
);
// Mock data - replace with actual API calls // Mock data - replace with actual API calls
const [workflows] = useState<MmApprovalWorkflow[]>(mockApprovalWorkflows); const [workflows] = useState<MmApprovalWorkflow[]>(mockApprovalWorkflows)
const filteredWorkflows = workflows.filter( const filteredWorkflows = workflows.filter(
(workflow) => (workflow) =>
workflow.name.toLowerCase().includes(searchTerm.toLowerCase()) || workflow.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
workflow.departmentId.toLowerCase().includes(searchTerm.toLowerCase()) workflow.departmentId.toLowerCase().includes(searchTerm.toLowerCase()),
); )
const getTotalSteps = (workflow: MmApprovalWorkflow) => { const getTotalSteps = (workflow: MmApprovalWorkflow) => {
return workflow.approvalLevels.length; return workflow.approvalLevels.length
}; }
const getRequiredSteps = (workflow: MmApprovalWorkflow) => { const getRequiredSteps = (workflow: MmApprovalWorkflow) => {
return workflow.approvalLevels.filter((level) => level.isRequired).length; return workflow.approvalLevels.filter((level) => level.isRequired).length
}; }
const getMaxTimeout = (workflow: MmApprovalWorkflow) => { const getMaxTimeout = (workflow: MmApprovalWorkflow) => {
return Math.max( return Math.max(...workflow.approvalLevels.map((level) => level.timeoutDays || 0))
...workflow.approvalLevels.map((level) => level.timeoutDays || 0) }
);
};
const handleEdit = (workflow: MmApprovalWorkflow) => { const handleEdit = (workflow: MmApprovalWorkflow) => {
setEditingWorkflow(workflow); setEditingWorkflow(workflow)
setModalMode("edit"); setModalMode('edit')
setShowModal(true); setShowModal(true)
}; }
const handleView = (workflow: MmApprovalWorkflow) => { const handleView = (workflow: MmApprovalWorkflow) => {
setEditingWorkflow(workflow); setEditingWorkflow(workflow)
setModalMode("view"); setModalMode('view')
setShowModal(true); setShowModal(true)
}; }
const handleAddNew = () => { const handleAddNew = () => {
setEditingWorkflow(null); setEditingWorkflow(null)
setModalMode("create"); setModalMode('create')
setShowModal(true); setShowModal(true)
}; }
const handleViewDetails = (workflow: MmApprovalWorkflow) => { const handleViewDetails = (workflow: MmApprovalWorkflow) => {
setSelectedWorkflow(workflow); setSelectedWorkflow(workflow)
}; }
const handleSaveWorkflow = (workflow: MmApprovalWorkflow) => { const handleSaveWorkflow = (workflow: MmApprovalWorkflow) => {
// TODO: Implement save logic // TODO: Implement save logic
console.log("Saving workflow:", workflow); console.log('Saving workflow:', workflow)
setShowModal(false); setShowModal(false)
setEditingWorkflow(null); setEditingWorkflow(null)
}; }
const handleCloseModal = () => { const handleCloseModal = () => {
setShowModal(false); setShowModal(false)
setEditingWorkflow(null); setEditingWorkflow(null)
}; }
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex items-center justify-between"> {/* Header */}
<div> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">Onay Süreçleri</h2> <div>
<p className="text-gray-600"> <h2 className="text-2xl font-bold text-gray-900">Onay Süreçleri</h2>
Departman bazlı satınalma onay süreçlerini yönetin <p className="text-gray-600">Departman bazlı satınalma onay süreçlerini yönetin</p>
</p> </div>
</div> <button
<button onClick={handleAddNew}
onClick={handleAddNew} className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-2 text-sm"
className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-2 text-sm" >
> <FaPlus className="w-4 h-4" />
<FaPlus className="w-4 h-4" /> <span>Yeni Onay Süreci</span>
<span>Yeni Onay Süreci</span> </button>
</button>
</div>
{/* Search Bar */}
<div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<input
type="text"
placeholder="Onay süreci ara..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<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>
{filteredWorkflows.map((workflow) => (
<div
key={workflow.id}
className="bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => handleViewDetails(workflow)}
>
<div className="flex items-start justify-between mb-2">
<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>
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
workflow.requestType
)}`}
>
{getRequestTypeText(workflow.requestType)}
</span>
</div>
<p className="text-xs text-gray-600 mb-1">
Departman: {workflow.department?.name}
</p>
<p className="text-sm text-gray-600">
Limit: ₺{workflow.amountThreshold.toLocaleString()} ve üzeri
</p>
</div>
<div className="flex space-x-1">
<button
onClick={(e) => {
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"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={(e) => {
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"
>
<FaEdit className="w-4 h-4" />
</button>
<button
onClick={(e) => e.stopPropagation()}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
title="Sil"
>
<FaTrash className="w-4 h-4" />
</button>
</div>
</div>
<div className="grid grid-cols-2 gap-3 text-xs mb-2">
<div className="flex items-center justify-between">
<span className="text-gray-500 flex items-center">
<FaUsers className="w-4 h-4 mr-1" />
Toplam Adım
</span>
<span className="font-medium">{getTotalSteps(workflow)}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500 flex items-center">
<FaCheckCircle className="w-4 h-4 mr-1" />
Zorunlu Adım
</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>
</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")}
</span>
</div>
</div>
<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 ? "Aktif" : "Pasif"}
</span>
<div className="flex items-center space-x-1">
{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
</span>
)}
</div>
</div>
</div>
))}
{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>
<p className="text-sm text-gray-500">
Arama kriterlerinizi değiştirin veya yeni bir onay süreci
ekleyin.
</p>
</div>
)}
</div> </div>
{/* Workflow Details */} {/* Search Bar */}
<div className="space-y-3 pt-2"> <div className="relative">
<h3 className="text-base font-semibold text-gray-900"> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
Onay Adımları <input
</h3> type="text"
{selectedWorkflow ? ( placeholder="Onay süreci ara..."
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-3"> value={searchTerm}
<div className="mb-3"> onChange={(e) => setSearchTerm(e.target.value)}
<h4 className="font-semibold text-base text-gray-900 mb-2"> className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
{selectedWorkflow.name} />
</h4> </div>
<div className="grid grid-cols-2 gap-1 text-xs text-gray-600 mb-2">
<div>Departman: {selectedWorkflow.departmentId}</div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div> {/* Workflow List */}
Tür: {getRequestTypeText(selectedWorkflow.requestType)} <div className="space-y-3 pt-2">
<h3 className="text-base font-semibold text-gray-900">Onay Süreçleri</h3>
{filteredWorkflows.map((workflow) => (
<div
key={workflow.id}
className="bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => handleViewDetails(workflow)}
>
<div className="flex items-start justify-between mb-2">
<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>
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
workflow.requestType,
)}`}
>
{getRequestTypeText(workflow.requestType)}
</span>
</div>
<p className="text-xs text-gray-600 mb-1">
Departman: {workflow.department?.name}
</p>
<p className="text-sm text-gray-600">
Limit: ₺{workflow.amountThreshold.toLocaleString()} ve üzeri
</p>
</div> </div>
<div> <div className="flex space-x-1">
Tutar Limiti: ₺ <button
{selectedWorkflow.amountThreshold.toLocaleString()} onClick={(e) => {
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"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={(e) => {
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"
>
<FaEdit className="w-4 h-4" />
</button>
<button
onClick={(e) => e.stopPropagation()}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
title="Sil"
>
<FaTrash className="w-4 h-4" />
</button>
</div> </div>
<div> </div>
Durum: {selectedWorkflow.isActive ? "Aktif" : "Pasif"}
<div className="grid grid-cols-2 gap-3 text-xs mb-2">
<div className="flex items-center justify-between">
<span className="text-gray-500 flex items-center">
<FaUsers className="w-4 h-4 mr-1" />
Toplam Adım
</span>
<span className="font-medium">{getTotalSteps(workflow)}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500 flex items-center">
<FaCheckCircle className="w-4 h-4 mr-1" />
Zorunlu Adım
</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>
</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')}
</span>
</div>
</div>
<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 ? 'Aktif' : 'Pasif'}
</span>
<div className="flex items-center space-x-1">
{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
</span>
)}
</div> </div>
</div> </div>
</div> </div>
))}
<div className="space-y-2"> {filteredWorkflows.length === 0 && (
{selectedWorkflow.approvalLevels <div className="text-center py-6">
.sort((a, b) => a.sequence - b.sequence) <FaCodeBranch className="w-12 h-12 text-gray-400 mx-auto mb-4" />
.map((level, index) => ( <h3 className="text-base font-medium text-gray-900 mb-2">Onay süreci bulunamadı</h3>
<div <p className="text-sm text-gray-500">
key={level.id} Arama kriterlerinizi değiştirin veya yeni bir onay süreci ekleyin.
className="border border-gray-200 rounded-lg p-2" </p>
> </div>
<div className="flex items-center justify-between mb-2"> )}
<div className="flex items-center space-x-2"> </div>
<span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">
Adım {level.sequence} {/* Workflow Details */}
</span> <div className="space-y-3 pt-2">
<span <h3 className="text-base font-semibold text-gray-900">Onay Adımları</h3>
className={`px-2 py-1 rounded-full text-xs font-medium ${getApprovalLevelColor( {selectedWorkflow ? (
level.level <div className="bg-white rounded-lg shadow-md border border-gray-200 p-3">
)}`} <div className="mb-3">
> <h4 className="font-semibold text-base text-gray-900 mb-2">
{getApprovalLevelText(level.level)} {selectedWorkflow.name}
</span> </h4>
{level.isRequired && ( <div className="grid grid-cols-2 gap-1 text-xs text-gray-600 mb-2">
<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded"> <div>Departman: {selectedWorkflow.departmentId}</div>
Zorunlu <div>Tür: {getRequestTypeText(selectedWorkflow.requestType)}</div>
<div>Tutar Limiti: ₺{selectedWorkflow.amountThreshold.toLocaleString()}</div>
<div>Durum: {selectedWorkflow.isActive ? 'Aktif' : 'Pasif'}</div>
</div>
</div>
<div className="space-y-2">
{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 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">
Adım {level.sequence}
</span> </span>
)} <span
{level.isParallel && ( className={`px-2 py-1 rounded-full text-xs font-medium ${getApprovalLevelColor(
<span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded"> level.level,
Paralel )}`}
>
{getApprovalLevelText(level.level)}
</span>
{level.isRequired && (
<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">
Zorunlu
</span>
)}
{level.isParallel && (
<span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
Paralel
</span>
)}
</div>
{level.timeoutDays && (
<span className="text-xs text-gray-500 flex items-center">
<FaClock className="w-3 h-3 mr-1" />
{level.timeoutDays} gün
</span> </span>
)} )}
</div> </div>
{level.timeoutDays && (
<span className="text-xs text-gray-500 flex items-center"> <div className="text-xs">
<FaClock className="w-3 h-3 mr-1" /> <div className="font-medium text-gray-900 mb-1">Onaylayanlar:</div>
{level.timeoutDays} gün <div className="space-y-1">
</span> {level.approverNames.map((name, idx) => (
<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">
({level.approverUserIds[idx]})
</span>
</div>
))}
</div>
</div>
{index < selectedWorkflow.approvalLevels.length - 1 && (
<div className="flex justify-center mt-3">
<div className="w-px h-4 bg-gray-300"></div>
</div>
)} )}
</div> </div>
))}
</div>
<div className="text-xs"> {/* Workflow Statistics */}
<div className="font-medium text-gray-900 mb-1"> <div className="mt-3 pt-3 border-t border-gray-100">
Onaylayanlar: <div className="grid grid-cols-3 gap-3 text-xs">
</div> <div className="text-center">
<div className="space-y-1"> <div className="font-medium text-gray-900">
{level.approverNames.map((name, idx) => ( {getTotalSteps(selectedWorkflow)}
<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">
({level.approverUserIds[idx]})
</span>
</div>
))}
</div>
</div> </div>
<div className="text-gray-500">Toplam Adım</div>
{index < selectedWorkflow.approvalLevels.length - 1 && (
<div className="flex justify-center mt-3">
<div className="w-px h-4 bg-gray-300"></div>
</div>
)}
</div> </div>
))} <div className="text-center">
</div> <div className="font-medium text-gray-900">
{getRequiredSteps(selectedWorkflow)}
{/* Workflow Statistics */} </div>
<div className="mt-3 pt-3 border-t border-gray-100"> <div className="text-gray-500">Zorunlu Adım</div>
<div className="grid grid-cols-3 gap-3 text-xs">
<div className="text-center">
<div className="font-medium text-gray-900">
{getTotalSteps(selectedWorkflow)}
</div> </div>
<div className="text-gray-500">Toplam Adım</div> <div className="text-center">
</div> <div className="font-medium text-gray-900">
<div className="text-center"> {getMaxTimeout(selectedWorkflow)}
<div className="font-medium text-gray-900"> </div>
{getRequiredSteps(selectedWorkflow)} <div className="text-gray-500">Maks. Gün</div>
</div> </div>
<div className="text-gray-500">Zorunlu Adım</div>
</div>
<div className="text-center">
<div className="font-medium text-gray-900">
{getMaxTimeout(selectedWorkflow)}
</div>
<div className="text-gray-500">Maks. Gün</div>
</div> </div>
</div> </div>
</div> </div>
</div> ) : (
) : ( <div className="bg-gray-50 rounded-lg p-6 text-center">
<div className="bg-gray-50 rounded-lg p-6 text-center"> <FaCog className="w-12 h-12 text-gray-400 mx-auto mb-4" />
<FaCog className="w-12 h-12 text-gray-400 mx-auto mb-4" /> <h3 className="text-base font-medium text-gray-900 mb-2">
<h3 className="text-base font-medium text-gray-900 mb-2"> Onay Adımlarını Görüntüle
Onay Adımlarını Görüntüle </h3>
</h3> <p className="text-sm text-gray-500">
<p className="text-sm text-gray-500"> Detaylarını görmek için sol taraftan bir onay süreci seçin.
Detaylarını görmek için sol taraftan bir onay süreci seçin. </p>
</p> </div>
</div> )}
)} </div>
</div> </div>
</div> </div>
@ -397,8 +360,8 @@ const ApprovalWorkflows: React.FC = () => {
workflow={editingWorkflow} workflow={editingWorkflow}
mode={modalMode} mode={modalMode}
/> />
</div> </Container>
); )
}; }
export default ApprovalWorkflows; export default ApprovalWorkflows

906
ui/src/views/supplyChain/components/DeliveryTracking.tsx
View file

File diff suppressed because it is too large Load diff

262
ui/src/views/supplyChain/components/DeliveryTrackingModal.tsx
View file

@ -1,25 +1,18 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react'
import { import { FaTimes, FaSave, FaTruck, FaMapMarkerAlt, FaCalendar, FaBox } from 'react-icons/fa'
FaTimes,
FaSave,
FaTruck,
FaMapMarkerAlt,
FaCalendar,
FaBox,
} from "react-icons/fa";
import { import {
MmGoodsReceipt, MmGoodsReceipt,
ReceiptStatusEnum, ReceiptStatusEnum,
QualityStatusEnum, QualityStatusEnum,
MmGoodsReceiptItem, MmGoodsReceiptItem,
} from "../../../types/mm"; } from '../../../types/mm'
interface DeliveryTrackingModalProps { interface DeliveryTrackingModalProps {
isOpen: boolean; isOpen: boolean
onClose: () => void; onClose: () => void
onSave: (receipt: MmGoodsReceipt) => void; onSave: (receipt: MmGoodsReceipt) => void
receipt?: MmGoodsReceipt | null; receipt?: MmGoodsReceipt | null
mode: "create" | "view" | "edit"; mode: 'create' | 'view' | 'edit'
} }
const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
@ -30,123 +23,114 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
mode, mode,
}) => { }) => {
const [formData, setFormData] = useState<Partial<MmGoodsReceipt>>({ const [formData, setFormData] = useState<Partial<MmGoodsReceipt>>({
receiptNumber: "", receiptNumber: '',
orderId: "", orderId: '',
receiptDate: new Date(), receiptDate: new Date(),
receivedBy: "", receivedBy: '',
warehouseId: "", warehouseId: '',
status: ReceiptStatusEnum.Pending, status: ReceiptStatusEnum.Pending,
notes: "", notes: '',
items: [], items: [],
}); })
useEffect(() => { useEffect(() => {
if (mode === "create") { if (mode === 'create') {
// Reset form to initial empty state for new goods receipt // Reset form to initial empty state for new goods receipt
setFormData({ setFormData({
receiptNumber: "", receiptNumber: '',
orderId: "", orderId: '',
receiptDate: new Date(), receiptDate: new Date(),
receivedBy: "", receivedBy: '',
warehouseId: "", warehouseId: '',
status: ReceiptStatusEnum.Pending, status: ReceiptStatusEnum.Pending,
notes: "", notes: '',
items: [], items: [],
}); })
} else if (receipt) { } else if (receipt) {
// Load existing receipt data for view/edit modes // Load existing receipt data for view/edit modes
setFormData(receipt); setFormData(receipt)
} }
}, [receipt, mode]); }, [receipt, mode])
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent< e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>
) => { ) => {
const { name, value, type } = e.target; const { name, value, type } = e.target
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
[name]: [name]:
type === "number" type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
? parseFloat(value) || 0 }))
: type === "date" }
? new Date(value)
: value,
}));
};
const addReceiptItem = () => { const addReceiptItem = () => {
const newItem: MmGoodsReceiptItem = { const newItem: MmGoodsReceiptItem = {
id: `item-${Date.now()}`, id: `item-${Date.now()}`,
receiptId: formData.id || "", receiptId: formData.id || '',
orderItemId: "", orderItemId: '',
materialId: "", materialId: '',
receivedQuantity: 0, receivedQuantity: 0,
acceptedQuantity: 0, acceptedQuantity: 0,
rejectedQuantity: 0, rejectedQuantity: 0,
qualityStatus: QualityStatusEnum.Pending, qualityStatus: QualityStatusEnum.Pending,
}; }
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: [...(prev.items || []), newItem], items: [...(prev.items || []), newItem],
})); }))
}; }
const removeReceiptItem = (index: number) => { const removeReceiptItem = (index: number) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: prev.items?.filter((_, i) => i !== index) || [], items: prev.items?.filter((_, i) => i !== index) || [],
})); }))
}; }
const updateReceiptItem = ( const updateReceiptItem = (
index: number, index: number,
field: keyof MmGoodsReceiptItem, field: keyof MmGoodsReceiptItem,
value: string | number | QualityStatusEnum | Date | undefined value: string | number | QualityStatusEnum | Date | undefined,
) => { ) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: items: prev.items?.map((item, i) => (i === index ? { ...item, [field]: value } : item)) || [],
prev.items?.map((item, i) => }))
i === index ? { ...item, [field]: value } : item }
) || [],
}));
};
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
if (mode !== "view") { if (mode !== 'view') {
const newReceipt: MmGoodsReceipt = { const newReceipt: MmGoodsReceipt = {
id: receipt?.id || `GR-${Date.now()}`, id: receipt?.id || `GR-${Date.now()}`,
receiptNumber: receiptNumber:
formData.receiptNumber || formData.receiptNumber ||
`GR-${new Date().getFullYear()}-${Date.now().toString().slice(-3)}`, `GR-${new Date().getFullYear()}-${Date.now().toString().slice(-3)}`,
orderId: formData.orderId || "", orderId: formData.orderId || '',
receiptDate: formData.receiptDate || new Date(), receiptDate: formData.receiptDate || new Date(),
receivedBy: formData.receivedBy || "", receivedBy: formData.receivedBy || '',
warehouseId: formData.warehouseId || "", warehouseId: formData.warehouseId || '',
status: formData.status || ReceiptStatusEnum.Pending, status: formData.status || ReceiptStatusEnum.Pending,
notes: formData.notes, notes: formData.notes,
items: formData.items || [], items: formData.items || [],
creationTime: receipt?.creationTime || new Date(), creationTime: receipt?.creationTime || new Date(),
lastModificationTime: new Date(), lastModificationTime: new Date(),
}; }
onSave(newReceipt); onSave(newReceipt)
} }
onClose(); onClose()
}; }
if (!isOpen) return null; if (!isOpen) return null
const isReadOnly = mode === "view"; const isReadOnly = mode === 'view'
const modalTitle = const modalTitle =
mode === "create" mode === 'create'
? "Yeni Teslimat Takibi" ? 'Yeni Teslimat Takibi'
: mode === "edit" : mode === 'edit'
? "Teslimat Takibini Düzenle" ? 'Teslimat Takibini Düzenle'
: "Teslimat Takibi Detayları"; : 'Teslimat Takibi Detayları'
return ( return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"> <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" /> <FaTruck className="mr-2 text-blue-600" />
{modalTitle} {modalTitle}
</h3> </h3>
<button <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-1">
onClick={onClose}
className="text-gray-400 hover:text-gray-600 p-1"
>
<FaTimes /> <FaTimes />
</button> </button>
</div> </div>
@ -174,13 +155,11 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
</h4> </h4>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Giriş Numarası</label>
Giriş Numarası
</label>
<input <input
type="text" type="text"
name="receiptNumber" name="receiptNumber"
value={formData.receiptNumber || ""} value={formData.receiptNumber || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Sipariş ID</label>
Sipariş ID
</label>
<input <input
type="text" type="text"
name="orderId" name="orderId"
value={formData.orderId || ""} value={formData.orderId || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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" name="receiptDate"
value={ value={
formData.receiptDate formData.receiptDate
? new Date(formData.receiptDate) ? new Date(formData.receiptDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -225,13 +200,11 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Teslim Alan</label>
Teslim Alan
</label>
<input <input
type="text" type="text"
name="receivedBy" name="receivedBy"
value={formData.receivedBy || ""} value={formData.receivedBy || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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> </label>
<select <select
name="warehouseId" name="warehouseId"
value={formData.warehouseId || ""} value={formData.warehouseId || ''}
onChange={handleInputChange} onChange={handleInputChange}
disabled={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Durum</label>
Durum
</label>
<select <select
name="status" name="status"
value={formData.status || ReceiptStatusEnum.Pending} value={formData.status || ReceiptStatusEnum.Pending}
@ -273,20 +244,16 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
> >
<option value={ReceiptStatusEnum.Pending}>Beklemede</option> <option value={ReceiptStatusEnum.Pending}>Beklemede</option>
<option value={ReceiptStatusEnum.InProgress}>İşlemde</option> <option value={ReceiptStatusEnum.InProgress}>İşlemde</option>
<option value={ReceiptStatusEnum.Completed}> <option value={ReceiptStatusEnum.Completed}>Tamamlandı</option>
Tamamlandı
</option>
<option value={ReceiptStatusEnum.OnHold}>Bekletildi</option> <option value={ReceiptStatusEnum.OnHold}>Bekletildi</option>
</select> </select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Notlar</label>
Notlar
</label>
<textarea <textarea
name="notes" name="notes"
value={formData.notes || ""} value={formData.notes || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={2} rows={2}
@ -315,14 +282,9 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
<div className="space-y-2 max-h-72 overflow-y-auto p-1"> <div className="space-y-2 max-h-72 overflow-y-auto p-1">
{formData.items?.map((item, index) => ( {formData.items?.map((item, index) => (
<div <div key={item.id} className="border rounded-lg p-2 bg-gray-50">
key={item.id}
className="border rounded-lg p-2 bg-gray-50"
>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
Kalem {index + 1}
</span>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="button" type="button"
@ -342,13 +304,7 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
<input <input
type="text" type="text"
value={item.materialId} value={item.materialId}
onChange={(e) => onChange={(e) => updateReceiptItem(index, 'materialId', e.target.value)}
updateReceiptItem(
index,
"materialId",
e.target.value
)
}
readOnly={isReadOnly} 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" 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 <input
type="text" type="text"
value={item.orderItemId} value={item.orderItemId}
onChange={(e) => onChange={(e) => updateReceiptItem(index, 'orderItemId', e.target.value)}
updateReceiptItem(
index,
"orderItemId",
e.target.value
)
}
readOnly={isReadOnly} 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" 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) => onChange={(e) =>
updateReceiptItem( updateReceiptItem(
index, index,
"receivedQuantity", 'receivedQuantity',
parseFloat(e.target.value) || 0 parseFloat(e.target.value) || 0,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -404,8 +354,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
onChange={(e) => onChange={(e) =>
updateReceiptItem( updateReceiptItem(
index, index,
"acceptedQuantity", 'acceptedQuantity',
parseFloat(e.target.value) || 0 parseFloat(e.target.value) || 0,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -425,8 +375,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
onChange={(e) => onChange={(e) =>
updateReceiptItem( updateReceiptItem(
index, index,
"rejectedQuantity", 'rejectedQuantity',
parseFloat(e.target.value) || 0 parseFloat(e.target.value) || 0,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -445,25 +395,17 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
onChange={(e) => onChange={(e) =>
updateReceiptItem( updateReceiptItem(
index, index,
"qualityStatus", 'qualityStatus',
e.target.value as QualityStatusEnum e.target.value as QualityStatusEnum,
) )
} }
disabled={isReadOnly} 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" 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}> <option value={QualityStatusEnum.Pending}>Beklemede</option>
Beklemede <option value={QualityStatusEnum.Approved}>Kabul</option>
</option> <option value={QualityStatusEnum.Rejected}>Red</option>
<option value={QualityStatusEnum.Approved}> <option value={QualityStatusEnum.Conditional}>Koşullu</option>
Kabul
</option>
<option value={QualityStatusEnum.Rejected}>
Red
</option>
<option value={QualityStatusEnum.Conditional}>
Koşullu
</option>
</select> </select>
</div> </div>
@ -473,14 +415,8 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
</label> </label>
<input <input
type="text" type="text"
value={item.lotNumber || ""} value={item.lotNumber || ''}
onChange={(e) => onChange={(e) => updateReceiptItem(index, 'lotNumber', e.target.value)}
updateReceiptItem(
index,
"lotNumber",
e.target.value
)
}
readOnly={isReadOnly} 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" 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" type="date"
value={ value={
item.expiryDate item.expiryDate
? new Date(item.expiryDate) ? new Date(item.expiryDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={(e) => onChange={(e) =>
updateReceiptItem( updateReceiptItem(
index, index,
"expiryDate", 'expiryDate',
e.target.value e.target.value ? new Date(e.target.value) : undefined,
? new Date(e.target.value)
: undefined
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -532,9 +464,9 @@ const DeliveryTrackingModal: React.FC<DeliveryTrackingModalProps> = ({
onClick={onClose} onClick={onClose}
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50" 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> </button>
{mode !== "view" && ( {mode !== 'view' && (
<button <button
type="submit" type="submit"
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm" 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> </form>
</div> </div>
</div> </div>
); )
}; }
export default DeliveryTrackingModal; export default DeliveryTrackingModal

981
ui/src/views/supplyChain/components/MaterialCard.tsx
View file

File diff suppressed because it is too large Load diff

2078
ui/src/views/supplyChain/components/MaterialForm.tsx
View file

File diff suppressed because it is too large Load diff

446
ui/src/views/supplyChain/components/MaterialGroups.tsx
View file

@ -13,6 +13,7 @@ import {
} from 'react-icons/fa' } from 'react-icons/fa'
import { mockMaterialGroups, populateParentGroups } from '../../../mocks/mockMaterialGroups' import { mockMaterialGroups, populateParentGroups } from '../../../mocks/mockMaterialGroups'
import { MmMaterialGroup } from '../../../types/mm' import { MmMaterialGroup } from '../../../types/mm'
import { Container } from '@/components/shared'
interface MaterialGroupNode extends MmMaterialGroup { interface MaterialGroupNode extends MmMaterialGroup {
children: MaterialGroupNode[] children: MaterialGroupNode[]
@ -98,240 +99,247 @@ const MaterialGroups: React.FC = () => {
}, [filteredGroups]) }, [filteredGroups])
return ( return (
<div className="space-y-3 py-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3"> {/* Header */}
{/* Title & Description */} <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div> {/* Title & Description */}
<h2 className="text-2xl font-bold text-gray-900">Malzeme Grupları</h2> <div>
<p className="text-gray-600">Malzeme gruplarını yönetin</p> <h2 className="text-2xl font-bold text-gray-900">Malzeme Grupları</h2>
</div> <p className="text-gray-600">Malzeme gruplarını yönetin</p>
{/* Header Actions */}
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-1.5">
{/* View Mode Toggle */}
<div className="flex bg-gray-100 rounded-lg p-1">
<button
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'
}`}
title="Liste Görünümü"
>
<FaList className="w-4 h-4" />
</button>
<button
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'
}`}
title="Kart Görünümü"
>
<FaTh className="w-4 h-4" />
</button>
<button
onClick={() => setViewMode('tree')}
className={`p-1.5 rounded-md transition-colors ${
viewMode === 'tree'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600 hover:text-gray-900'
}`}
title="Ağaç Görünümü"
>
<FaSitemap className="w-4 h-4" />
</button>
</div> </div>
{/* Search Box */} {/* Header Actions */}
<div className="relative"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-1.5">
<FaSearch {/* View Mode Toggle */}
size={16} <div className="flex bg-gray-100 rounded-lg p-1">
className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400" <button
/> onClick={() => setViewMode('list')}
<input className={`p-1.5 rounded-md transition-colors ${
type="text" viewMode === 'list'
placeholder="Malzeme grubu ara..." ? 'bg-white text-blue-600 shadow-sm'
value={searchTerm} : 'text-gray-600 hover:text-gray-900'
onChange={(e) => setSearchTerm(e.target.value)} }`}
className="pl-8 pr-3 py-1 w-full sm:w-56 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" title="Liste Görünümü"
/> >
<FaList className="w-4 h-4" />
</button>
<button
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'
}`}
title="Kart Görünümü"
>
<FaTh className="w-4 h-4" />
</button>
<button
onClick={() => setViewMode('tree')}
className={`p-1.5 rounded-md transition-colors ${
viewMode === 'tree'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600 hover:text-gray-900'
}`}
title="Ağaç Görünümü"
>
<FaSitemap className="w-4 h-4" />
</button>
</div>
{/* Search Box */}
<div className="relative">
<FaSearch
size={16}
className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
/>
<input
type="text"
placeholder="Malzeme grubu ara..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-8 pr-3 py-1 w-full sm:w-56 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
/>
</div>
{/* Add New Group */}
<button
onClick={handleAdd}
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" />
Yeni Grup
</button>
</div> </div>
{/* Add New Group */}
<button
onClick={handleAdd}
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" />
Yeni Grup
</button>
</div> </div>
</div>
{viewMode === 'list' && ( {viewMode === 'list' && (
<div className="bg-white shadow-sm rounded-lg overflow-hidden"> <div className="bg-white shadow-sm rounded-lg overflow-hidden">
<table className="min-w-full divide-y divide-gray-200"> <table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Grup Kodu Grup Kodu
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Grup Adı Grup Adı
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Üst Grup Üst Grup
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Açıklama Açıklama
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum Durum
</th> </th>
<th className="px-3 py-1.5 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler İşlemler
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{filteredGroups.map((group) => ( {filteredGroups.map((group) => (
<tr key={group.id} className="hover:bg-gray-50 text-xs"> <tr key={group.id} className="hover:bg-gray-50 text-xs">
<td className="px-3 py-1.5 whitespace-nowrap"> <td className="px-3 py-1.5 whitespace-nowrap">
<span className="text-sm font-mono font-medium text-gray-900"> <span className="text-sm font-mono font-medium text-gray-900">
{group.code}
</span>
</td>
<td className="px-3 py-1.5 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">{group.name}</div>
</td>
<td className="px-3 py-1.5">
<div className="text-sm text-gray-900">
{group.parentGroup ? group.parentGroup.name : '-'}
</div>
</td>
<td className="px-3 py-1.5">
<div className="text-sm text-gray-900">{group.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 ${
group.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
>
{group.isActive ? 'Aktif' : 'Pasif'}
</span>
</td>
<td className="px-3 py-1.5 whitespace-nowrap text-right text-sm font-medium">
<div className="flex items-center justify-end space-x-2">
<button
onClick={() => handleEdit(group)}
className="text-blue-600 hover:text-blue-900"
>
<FaEdit className="h-4 w-4" />
</button>
<button
onClick={() => handleDelete(group)}
className="text-red-600 hover:text-red-900"
>
<FaTrash className="h-4 w-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
{filteredGroups.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-500">Malzeme grubu bulunamadı</p>
</div>
)}
</div>
)}
{viewMode === 'card' && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{filteredGroups.map((group) => (
<div
key={group.id}
className="bg-white shadow-sm rounded-lg p-2.5 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<span className="text-xs font-mono font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">
{group.code} {group.code}
</span> </span>
</td> </div>
<td className="px-3 py-1.5 whitespace-nowrap"> <div className="flex items-center space-x-1">
<div className="text-sm font-medium text-gray-900">{group.name}</div> <button
</td> onClick={() => handleEdit(group)}
<td className="px-3 py-1.5"> className="text-blue-600 hover:text-blue-900 p-1"
<div className="text-sm text-gray-900"> title="Düzenle"
{group.parentGroup ? group.parentGroup.name : '-'}
</div>
</td>
<td className="px-3 py-1.5">
<div className="text-sm text-gray-900">{group.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 ${
group.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
> >
{group.isActive ? 'Aktif' : 'Pasif'} <FaEdit className="h-3 w-3" />
</span> </button>
</td> <button
<td className="px-3 py-1.5 whitespace-nowrap text-right text-sm font-medium"> onClick={() => handleDelete(group)}
<div className="flex items-center justify-end space-x-2"> className="text-red-600 hover:text-red-900 p-1"
<button title="Sil"
onClick={() => handleEdit(group)} >
className="text-blue-600 hover:text-blue-900" <FaTrash className="h-3 w-3" />
> </button>
<FaEdit className="h-4 w-4" /> </div>
</button>
<button
onClick={() => handleDelete(group)}
className="text-red-600 hover:text-red-900"
>
<FaTrash className="h-4 w-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
{filteredGroups.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-500">Malzeme grubu bulunamadı</p>
</div>
)}
</div>
)}
{viewMode === 'card' && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{filteredGroups.map((group) => (
<div
key={group.id}
className="bg-white shadow-sm rounded-lg p-2.5 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<span className="text-xs font-mono font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">
{group.code}
</span>
</div> </div>
<div className="flex items-center space-x-1">
<button
onClick={() => handleEdit(group)}
className="text-blue-600 hover:text-blue-900 p-1"
title="Düzenle"
>
<FaEdit className="h-3 w-3" />
</button>
<button
onClick={() => handleDelete(group)}
className="text-red-600 hover:text-red-900 p-1"
title="Sil"
>
<FaTrash className="h-3 w-3" />
</button>
</div>
</div>
<h3 className="font-medium text-gray-900 mb-1.5 text-sm">{group.name}</h3> <h3 className="font-medium text-gray-900 mb-1.5 text-sm">{group.name}</h3>
{group.description && ( {group.description && (
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{group.description}</p> <p className="text-sm text-gray-600 mb-3 line-clamp-2">{group.description}</p>
)}
<h3 className="text-gray-900 mb-3 text-sm">
{group.parentGroupId && (
<span className="text-sm text-gray-600">
<FaAngleRight className="inline text-gray-600 mb-1" />
{group.parentGroup?.name}
</span>
)} )}
</h3>
<div className="flex items-center justify-between"> <h3 className="text-gray-900 mb-3 text-sm">
<span {group.parentGroupId && (
className={`px-2 py-0.5 text-xs font-medium rounded-full ${ <span className="text-sm text-gray-600">
group.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' <FaAngleRight className="inline text-gray-600 mb-1" />
}`} {group.parentGroup?.name}
> </span>
{group.isActive ? 'Aktif' : 'Pasif'} )}
</span> </h3>
<div className="flex items-center justify-between">
<span
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
group.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
>
{group.isActive ? 'Aktif' : 'Pasif'}
</span>
</div>
</div> </div>
</div> ))}
))}
{filteredGroups.length === 0 && ( {filteredGroups.length === 0 && (
<div className="col-span-full text-center py-12"> <div className="col-span-full text-center py-12">
<p className="text-gray-500">Malzeme grubu bulunamadı</p> <p className="text-gray-500">Malzeme grubu bulunamadı</p>
</div> </div>
)} )}
</div> </div>
)} )}
{viewMode === 'tree' && ( {viewMode === 'tree' && (
<div className="bg-white shadow-sm rounded-lg p-3"> <div className="bg-white shadow-sm rounded-lg p-3">
{groupTree.map((node) => ( {groupTree.map((node) => (
<GroupTreeNode key={node.id} node={node} onEdit={handleEdit} onDelete={handleDelete} /> <GroupTreeNode
))} key={node.id}
{groupTree.length === 0 && ( node={node}
<div className="text-center py-12"> onEdit={handleEdit}
<p className="text-gray-500">Ağaç görünümü için uygun malzeme grubu bulunamadı.</p> onDelete={handleDelete}
</div> />
)} ))}
</div> {groupTree.length === 0 && (
)} <div className="text-center py-12">
<p className="text-gray-500">Ağaç görünümü için uygun malzeme grubu bulunamadı.</p>
</div>
)}
</div>
)}
</div>
{/* Modal */} {/* Modal */}
{isModalOpen && ( {isModalOpen && (
@ -341,7 +349,7 @@ const MaterialGroups: React.FC = () => {
onClose={() => setIsModalOpen(false)} onClose={() => setIsModalOpen(false)}
/> />
)} )}
</div> </Container>
) )
} }

880
ui/src/views/supplyChain/components/MaterialList.tsx
View file

File diff suppressed because it is too large Load diff

507
ui/src/views/supplyChain/components/MaterialTypes.tsx
View file

@ -1,56 +1,47 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { import { FaPlus, FaEdit, FaTrash, FaSearch, FaTh, FaList } from 'react-icons/fa'
FaPlus, import { MmMaterialType, MaterialTypeEnum } from '../../../types/mm'
FaEdit, import { mockMaterialTypes } from '../../../mocks/mockMaterialTypes'
FaTrash, import { getMaterialTypeDisplay } from '../../../utils/erp'
FaSearch, import { Container } from '@/components/shared'
FaTh,
FaList,
} from "react-icons/fa";
import { MmMaterialType, MaterialTypeEnum } from "../../../types/mm";
import { mockMaterialTypes } from "../../../mocks/mockMaterialTypes";
import { getMaterialTypeDisplay } from "../../../utils/erp";
const MaterialTypes: React.FC = () => { const MaterialTypes: React.FC = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false)
const [editingType, setEditingType] = useState<MmMaterialType | null>(null); const [editingType, setEditingType] = useState<MmMaterialType | null>(null)
const [viewMode, setViewMode] = useState<"list" | "card">("list"); const [viewMode, setViewMode] = useState<'list' | 'card'>('list')
// Mock data - gerçek uygulamada API'den gelecek // Mock data - gerçek uygulamada API'den gelecek
const [materialTypes, setMaterialTypes] = const [materialTypes, setMaterialTypes] = useState<MmMaterialType[]>(mockMaterialTypes)
useState<MmMaterialType[]>(mockMaterialTypes);
const filteredTypes = materialTypes.filter( const filteredTypes = materialTypes.filter(
(type) => (type) =>
type.name.toLowerCase().includes(searchTerm.toLowerCase()) || type.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
type.description?.toLowerCase().includes(searchTerm.toLowerCase()) type.description?.toLowerCase().includes(searchTerm.toLowerCase()),
); )
const handleAdd = () => { const handleAdd = () => {
setEditingType(null); setEditingType(null)
setIsModalOpen(true); setIsModalOpen(true)
}; }
const handleEdit = (type: MmMaterialType) => { const handleEdit = (type: MmMaterialType) => {
setEditingType(type); setEditingType(type)
setIsModalOpen(true); setIsModalOpen(true)
}; }
const handleDelete = (type: MmMaterialType) => { const handleDelete = (type: MmMaterialType) => {
if ( if (window.confirm(`${type.name} türünü silmek istediğinizden emin misiniz?`)) {
window.confirm(`${type.name} türünü silmek istediğinizden emin misiniz?`) setMaterialTypes((prev) => prev.filter((t) => t.id !== type.id))
) {
setMaterialTypes((prev) => prev.filter((t) => t.id !== type.id));
} }
}; }
const handleSave = (formData: Partial<MmMaterialType>) => { const handleSave = (formData: Partial<MmMaterialType>) => {
if (editingType) { if (editingType) {
// Update existing type // Update existing type
setMaterialTypes((prev) => setMaterialTypes((prev) =>
prev.map((t) => (t.id === editingType.id ? { ...t, ...formData } : t)) prev.map((t) => (t.id === editingType.id ? { ...t, ...formData } : t)),
); )
} else { } else {
// Add new type // Add new type
const newType: MmMaterialType = { const newType: MmMaterialType = {
@ -59,218 +50,208 @@ const MaterialTypes: React.FC = () => {
name: formData.name!, name: formData.name!,
description: formData.description, description: formData.description,
isActive: formData.isActive ?? true, isActive: formData.isActive ?? true,
className: "", className: '',
}; }
setMaterialTypes((prev) => [...prev, newType]); setMaterialTypes((prev) => [...prev, newType])
} }
setIsModalOpen(false); setIsModalOpen(false)
}; }
return ( return (
<div className="space-y-3 py-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3"> {/* Header */}
{/* Title & Description */} <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div> {/* Title & Description */}
<h2 className="text-2xl font-bold text-gray-900">Malzeme Türleri</h2> <div>
<p className="text-gray-600">Malzeme türlerini yönetin</p> <h2 className="text-2xl font-bold text-gray-900">Malzeme Türleri</h2>
</div> <p className="text-gray-600">Malzeme türlerini yönetin</p>
{/* Header Actions */}
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-1.5">
{/* View Mode Toggle */}
<div className="flex bg-gray-100 rounded-lg p-1">
<button
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"
}`}
title="Liste Görünümü"
>
<FaList className="w-4 h-4" />
</button>
<button
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"
}`}
title="Kart Görünümü"
>
<FaTh className="w-4 h-4" />
</button>
</div> </div>
{/* Search Box */} {/* Header Actions */}
<div className="relative"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-1.5">
<FaSearch {/* View Mode Toggle */}
size={16} <div className="flex bg-gray-100 rounded-lg p-1">
className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400" <button
/> onClick={() => setViewMode('list')}
<input className={`p-1.5 rounded-md transition-colors ${
type="text" viewMode === 'list'
placeholder="Malzeme türü ara..." ? 'bg-white text-blue-600 shadow-sm'
value={searchTerm} : 'text-gray-600 hover:text-gray-900'
onChange={(e) => setSearchTerm(e.target.value)} }`}
className="pl-8 pr-3 py-1 w-full sm:w-56 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" title="Liste Görünümü"
/> >
<FaList className="w-4 h-4" />
</button>
<button
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'
}`}
title="Kart Görünümü"
>
<FaTh className="w-4 h-4" />
</button>
</div>
{/* Search Box */}
<div className="relative">
<FaSearch
size={16}
className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400"
/>
<input
type="text"
placeholder="Malzeme türü ara..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-8 pr-3 py-1 w-full sm:w-56 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
/>
</div>
{/* Add New Type */}
<button
onClick={handleAdd}
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" />
Yeni Tür
</button>
</div> </div>
{/* Add New Type */}
<button
onClick={handleAdd}
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" />
Yeni Tür
</button>
</div> </div>
</div>
{/* Types Display */} {/* Types Display */}
{viewMode === "list" ? ( {viewMode === 'list' ? (
<div className="bg-white shadow-sm rounded-lg overflow-hidden"> <div className="bg-white shadow-sm rounded-lg overflow-hidden">
<table className="min-w-full divide-y divide-gray-200"> <table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kod Kod
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Ad Ad
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Açıklama Açıklama
</th> </th>
<th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum Durum
</th> </th>
<th className="px-3 py-1.5 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-3 py-1.5 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler İşlemler
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{filteredTypes.map((type) => ( {filteredTypes.map((type) => (
<tr key={type.id} className="hover:bg-gray-50 text-xs"> <tr key={type.id} className="hover:bg-gray-50 text-xs">
<td className="px-3 py-1.5 whitespace-nowrap"> <td className="px-3 py-1.5 whitespace-nowrap">
<span className="text-sm font-mono font-medium text-gray-900"> <span className="text-sm font-mono font-medium text-gray-900">
{getMaterialTypeDisplay(type.code)}
</span>
</td>
<td className="px-3 py-1.5 whitespace-nowrap">
<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>
</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 ? 'Aktif' : 'Pasif'}
</span>
</td>
<td className="px-3 py-1.5 whitespace-nowrap text-right text-sm font-medium">
<div className="flex items-center justify-end space-x-2">
<button
onClick={() => handleEdit(type)}
className="text-blue-600 hover:text-blue-900"
>
<FaEdit className="h-4 w-4" />
</button>
<button
onClick={() => handleDelete(type)}
className="text-red-600 hover:text-red-900"
>
<FaTrash className="h-4 w-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
{filteredTypes.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-500">Malzeme türü bulunamadı</p>
</div>
)}
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{filteredTypes.map((type) => (
<div
key={type.id}
className="bg-white shadow-sm rounded-lg p-2.5 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<span className="text-xs font-mono font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">
{getMaterialTypeDisplay(type.code)} {getMaterialTypeDisplay(type.code)}
</span> </span>
</td> </div>
<td className="px-3 py-1.5 whitespace-nowrap"> <div className="flex items-center space-x-1">
<div className="text-sm font-medium text-gray-900"> <button
{type.name} onClick={() => handleEdit(type)}
</div> className="text-blue-600 hover:text-blue-900 p-1"
</td> title="Düzenle"
<td className="px-3 py-1.5">
<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 ? "Aktif" : "Pasif"} <FaEdit className="h-3 w-3" />
</span> </button>
</td> <button
<td className="px-3 py-1.5 whitespace-nowrap text-right text-sm font-medium"> onClick={() => handleDelete(type)}
<div className="flex items-center justify-end space-x-2"> className="text-red-600 hover:text-red-900 p-1"
<button title="Sil"
onClick={() => handleEdit(type)} >
className="text-blue-600 hover:text-blue-900" <FaTrash className="h-3 w-3" />
> </button>
<FaEdit className="h-4 w-4" /> </div>
</button> </div>
<button
onClick={() => handleDelete(type)}
className="text-red-600 hover:text-red-900"
>
<FaTrash className="h-4 w-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
{filteredTypes.length === 0 && ( <h3 className="font-medium text-gray-900 mb-1.5 text-sm">{type.name}</h3>
<div className="text-center py-12">
<p className="text-gray-500">Malzeme türü bulunamadı</p> {type.description && (
</div> <p className="text-sm text-gray-600 mb-3 line-clamp-2">{type.description}</p>
)} )}
</div>
) : ( <div className="flex items-center justify-between">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2"> <span
{filteredTypes.map((type) => ( className={`px-2 py-0.5 text-xs font-medium rounded-full ${
<div type.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
key={type.id} }`}
className="bg-white shadow-sm rounded-lg p-2.5 hover:shadow-md transition-shadow" >
> {type.isActive ? 'Aktif' : 'Pasif'}
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<span className="text-xs font-mono font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">
{getMaterialTypeDisplay(type.code)}
</span> </span>
</div> </div>
<div className="flex items-center space-x-1">
<button
onClick={() => handleEdit(type)}
className="text-blue-600 hover:text-blue-900 p-1"
title="Düzenle"
>
<FaEdit className="h-3 w-3" />
</button>
<button
onClick={() => handleDelete(type)}
className="text-red-600 hover:text-red-900 p-1"
title="Sil"
>
<FaTrash className="h-3 w-3" />
</button>
</div>
</div> </div>
))}
<h3 className="font-medium text-gray-900 mb-1.5 text-sm"> {filteredTypes.length === 0 && (
{type.name} <div className="col-span-full text-center py-12">
</h3> <p className="text-gray-500">Malzeme türü bulunamadı</p>
{type.description && (
<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 ? "Aktif" : "Pasif"}
</span>
</div> </div>
</div> )}
))} </div>
)}
{filteredTypes.length === 0 && ( </div>
<div className="col-span-full text-center py-12">
<p className="text-gray-500">Malzeme türü bulunamadı</p>
</div>
)}
</div>
)}
{/* Modal */} {/* Modal */}
{isModalOpen && ( {isModalOpen && (
@ -280,47 +261,41 @@ const MaterialTypes: React.FC = () => {
onClose={() => setIsModalOpen(false)} onClose={() => setIsModalOpen(false)}
/> />
)} )}
</div> </Container>
); )
};
interface MaterialTypeModalProps {
type?: MmMaterialType | null;
onSave: (data: Partial<MmMaterialType>) => void;
onClose: () => void;
} }
const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({ interface MaterialTypeModalProps {
type, type?: MmMaterialType | null
onSave, onSave: (data: Partial<MmMaterialType>) => void
onClose, onClose: () => void
}) => { }
const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({ type, onSave, onClose }) => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
code: type?.code || MaterialTypeEnum.RawMaterial, code: type?.code || MaterialTypeEnum.RawMaterial,
name: type?.name || "", name: type?.name || '',
description: type?.description || "", description: type?.description || '',
isActive: type?.isActive ?? true, isActive: type?.isActive ?? true,
}); })
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
onSave(formData); onSave(formData)
}; }
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> <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="bg-white rounded-lg w-full max-w-xs">
<div className="px-3 py-2 border-b border-gray-200"> <div className="px-3 py-2 border-b border-gray-200">
<h3 className="text-sm font-medium text-gray-900"> <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> </h3>
</div> </div>
<form onSubmit={handleSubmit} className="p-3 space-y-2"> <form onSubmit={handleSubmit} className="p-3 space-y-2">
<div> <div>
<label className="block text-xs font-medium text-gray-700 mb-1"> <label className="block text-xs font-medium text-gray-700 mb-1">Tür Kodu</label>
Tür Kodu
</label>
<select <select
value={formData.code} value={formData.code}
onChange={(e) => onChange={(e) =>
@ -335,38 +310,28 @@ const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
<option value={MaterialTypeEnum.RawMaterial}>Hammadde</option> <option value={MaterialTypeEnum.RawMaterial}>Hammadde</option>
<option value={MaterialTypeEnum.SemiFinished}>Yarı Mamul</option> <option value={MaterialTypeEnum.SemiFinished}>Yarı Mamul</option>
<option value={MaterialTypeEnum.Finished}>Mamul</option> <option value={MaterialTypeEnum.Finished}>Mamul</option>
<option value={MaterialTypeEnum.Consumable}> <option value={MaterialTypeEnum.Consumable}>Sarf Malzemesi</option>
Sarf Malzemesi
</option>
<option value={MaterialTypeEnum.Service}>Hizmet</option> <option value={MaterialTypeEnum.Service}>Hizmet</option>
<option value={MaterialTypeEnum.Spare}>Yedek Parça</option> <option value={MaterialTypeEnum.Spare}>Yedek Parça</option>
</select> </select>
</div> </div>
<div> <div>
<label className="block text-xs font-medium text-gray-700 mb-1"> <label className="block text-xs font-medium text-gray-700 mb-1">Ad</label>
Ad
</label>
<input <input
type="text" type="text"
value={formData.name} value={formData.name}
onChange={(e) => onChange={(e) => setFormData({ ...formData, name: e.target.value })}
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" 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 required
/> />
</div> </div>
<div> <div>
<label className="block text-xs font-medium text-gray-700 mb-1"> <label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
Açıklama
</label>
<textarea <textarea
value={formData.description} value={formData.description}
onChange={(e) => onChange={(e) => setFormData({ ...formData, description: e.target.value })}
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" 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} rows={3}
/> />
@ -377,9 +342,7 @@ const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
type="checkbox" type="checkbox"
id="isActive" id="isActive"
checked={formData.isActive} checked={formData.isActive}
onChange={(e) => onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
setFormData({ ...formData, isActive: e.target.checked })
}
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 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"> <label htmlFor="isActive" className="ml-2 text-sm text-gray-700">
@ -405,7 +368,7 @@ const MaterialTypeModal: React.FC<MaterialTypeModalProps> = ({
</form> </form>
</div> </div>
</div> </div>
); )
}; }
export default MaterialTypes; export default MaterialTypes

836
ui/src/views/supplyChain/components/OrderManagement.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom'
import { import {
FaPlus, FaPlus,
FaSearch, FaSearch,
@ -14,516 +14,464 @@ import {
FaCheckCircle, FaCheckCircle,
FaTimesCircle, FaTimesCircle,
FaExclamationTriangle, FaExclamationTriangle,
} from "react-icons/fa"; } from 'react-icons/fa'
import { OrderStatusEnum, MmPurchaseOrder } from "../../../types/mm"; import { OrderStatusEnum, MmPurchaseOrder } from '../../../types/mm'
import { mockPurchaseOrders } from "../../../mocks/mockPurchaseOrders"; import { mockPurchaseOrders } from '../../../mocks/mockPurchaseOrders'
import Widget from "../../../components/common/Widget"; import Widget from '../../../components/common/Widget'
import { import {
getOrderStatusColor, getOrderStatusColor,
getOrderStatusIcon, getOrderStatusIcon,
getOrderStatusText, getOrderStatusText,
getRequestTypeText, getRequestTypeText,
} from "../../../utils/erp"; } from '../../../utils/erp'
import { Container } from '@/components/shared'
const OrderManagement: React.FC = () => { const OrderManagement: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate()
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [statusFilter, setStatusFilter] = useState<OrderStatusEnum | "all">( const [statusFilter, setStatusFilter] = useState<OrderStatusEnum | 'all'>('all')
"all" const [selectedOrders, setSelectedOrders] = useState<string[]>([])
); const [showBulkModal, setShowBulkModal] = useState(false)
const [selectedOrders, setSelectedOrders] = useState<string[]>([]); const [bulkModalType, setBulkModalType] = useState<'approval' | 'status'>('approval')
const [showBulkModal, setShowBulkModal] = useState(false);
const [bulkModalType, setBulkModalType] = useState<"approval" | "status">(
"approval"
);
// Mock data - replace with actual API calls // 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 filteredOrders = orders.filter((order) => {
const matchesSearch = const matchesSearch =
order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) || order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
order.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) || order.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
order.requestTitle.toLowerCase().includes(searchTerm.toLowerCase()); order.requestTitle.toLowerCase().includes(searchTerm.toLowerCase())
const matchesStatus = const matchesStatus = statusFilter === 'all' || order.status === statusFilter
statusFilter === "all" || order.status === statusFilter; return matchesSearch && matchesStatus
return matchesSearch && matchesStatus; })
});
const getStatusText = (status: OrderStatusEnum) => getOrderStatusText(status); const getStatusText = (status: OrderStatusEnum) => getOrderStatusText(status)
const getStatusColor = (status: OrderStatusEnum): string => const getStatusColor = (status: OrderStatusEnum): string => getOrderStatusColor(status)
getOrderStatusColor(status);
const getStatusIcon = (status: OrderStatusEnum): JSX.Element => const getStatusIcon = (status: OrderStatusEnum): JSX.Element => getOrderStatusIcon(status)
getOrderStatusIcon(status);
const getDeliveryProgress = (order: MmPurchaseOrder) => { const getDeliveryProgress = (order: MmPurchaseOrder) => {
const totalQuantity = order.items.reduce( const totalQuantity = order.items.reduce((sum, item) => sum + item.quantity, 0)
(sum, item) => sum + item.quantity, const deliveredQuantity = order.items.reduce((sum, item) => sum + item.deliveredQuantity, 0)
0 return totalQuantity > 0 ? Math.round((deliveredQuantity / totalQuantity) * 100) : 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 isOverdue = (order: MmPurchaseOrder) => {
const today = new Date(); const today = new Date()
return ( return (
order.expectedDeliveryDate < today && order.expectedDeliveryDate < today &&
order.status !== OrderStatusEnum.Delivered && order.status !== OrderStatusEnum.Delivered &&
order.status !== OrderStatusEnum.Completed order.status !== OrderStatusEnum.Completed
); )
}; }
const getDaysUntilDelivery = (order: MmPurchaseOrder) => { const getDaysUntilDelivery = (order: MmPurchaseOrder) => {
const today = new Date(); const today = new Date()
const diffTime = order.expectedDeliveryDate.getTime() - today.getTime(); const diffTime = order.expectedDeliveryDate.getTime() - today.getTime()
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
return diffDays; return diffDays
}; }
const handleAddOrder = () => { const handleAddOrder = () => {
navigate("/admin/supplychain/orders/new"); navigate('/admin/supplychain/orders/new')
}; }
const handleEdit = (order: MmPurchaseOrder) => { const handleEdit = (order: MmPurchaseOrder) => {
navigate(`/admin/supplychain/orders/edit/${order.id}`); navigate(`/admin/supplychain/orders/edit/${order.id}`)
}; }
const handleView = (order: MmPurchaseOrder) => { const handleView = (order: MmPurchaseOrder) => {
navigate(`/admin/supplychain/orders/view/${order.id}`); navigate(`/admin/supplychain/orders/view/${order.id}`)
}; }
const handleSelectOrder = (orderId: string) => { const handleSelectOrder = (orderId: string) => {
setSelectedOrders((prev) => setSelectedOrders((prev) =>
prev.includes(orderId) prev.includes(orderId) ? prev.filter((id) => id !== orderId) : [...prev, orderId],
? prev.filter((id) => id !== orderId) )
: [...prev, orderId] }
);
};
const handleBulkApproval = () => { const handleBulkApproval = () => {
setBulkModalType("approval"); setBulkModalType('approval')
setShowBulkModal(true); setShowBulkModal(true)
}; }
const handleBulkStatusUpdate = () => { const handleBulkStatusUpdate = () => {
setBulkModalType("status"); setBulkModalType('status')
setShowBulkModal(true); setShowBulkModal(true)
}; }
const processBulkApproval = () => { const processBulkApproval = () => {
const updatedOrders = orders.map((order) => { const updatedOrders = orders.map((order) => {
if (selectedOrders.includes(order.id)) { if (selectedOrders.includes(order.id)) {
return { ...order, status: OrderStatusEnum.Approved }; return { ...order, status: OrderStatusEnum.Approved }
} }
return order; return order
}); })
setOrders(updatedOrders); setOrders(updatedOrders)
setSelectedOrders([]); setSelectedOrders([])
setShowBulkModal(false); setShowBulkModal(false)
}; }
const processBulkStatusUpdate = (newStatus: OrderStatusEnum) => { const processBulkStatusUpdate = (newStatus: OrderStatusEnum) => {
const updatedOrders = orders.map((order) => { const updatedOrders = orders.map((order) => {
if (selectedOrders.includes(order.id)) { if (selectedOrders.includes(order.id)) {
return { ...order, status: newStatus }; return { ...order, status: newStatus }
} }
return order; return order
}); })
setOrders(updatedOrders); setOrders(updatedOrders)
setSelectedOrders([]); setSelectedOrders([])
setShowBulkModal(false); setShowBulkModal(false)
}; }
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex items-center justify-between"> {/* Header */}
<div> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900"> <div>
Satınalma Siparişleri <h2 className="text-2xl font-bold text-gray-900">Satınalma Siparişleri</h2>
</h2> <p className="text-gray-600">Satınalma siparişlerini oluşturun ve takip edin</p>
<p className="text-gray-600"> </div>
Satınalma siparişlerini oluşturun ve takip edin <button
</p> onClick={handleAddOrder}
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
>
<FaPlus className="w-4 h-4" />
<span>Yeni Sipariş</span>
</button>
</div> </div>
<button
onClick={handleAddOrder}
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
>
<FaPlus className="w-4 h-4" />
<span>Yeni Sipariş</span>
</button>
</div>
{/* Summary Cards */} {/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Widget <Widget title="Toplam Sipariş" value={orders.length} color="blue" icon="FaShoppingCart" />
title="Toplam Sipariş"
value={orders.length}
color="blue"
icon="FaShoppingCart"
/>
<Widget <Widget
title="Bekleyen" title="Bekleyen"
value={ value={
orders.filter((o) => orders.filter((o) =>
[OrderStatusEnum.Pending, OrderStatusEnum.Confirmed].includes( [OrderStatusEnum.Pending, OrderStatusEnum.Confirmed].includes(o.status),
o.status ).length
) }
).length color="orange"
} icon="FaClock"
color="orange" />
icon="FaClock"
/>
<Widget <Widget
title="Teslim Edildi" title="Teslim Edildi"
value={ value={orders.filter((o) => o.status === OrderStatusEnum.Delivered).length}
orders.filter((o) => o.status === OrderStatusEnum.Delivered).length color="green"
} icon="FaTruck"
color="green" />
icon="FaTruck"
/>
<Widget <Widget
title="Toplam Tutar" title="Toplam Tutar"
value={`₺${orders value={`₺${orders.reduce((sum, order) => sum + order.totalAmount, 0).toLocaleString()}`}
.reduce((sum, order) => sum + order.totalAmount, 0) color="purple"
.toLocaleString()}`} icon="FaDollarSign"
color="purple"
icon="FaDollarSign"
/>
</div>
{/* Filters */}
<div className="flex space-x-2">
<div className="flex-1 relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
type="text"
placeholder="Sipariş ara..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div> </div>
<div className="relative">
<FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> {/* Filters */}
<select <div className="flex space-x-2">
value={statusFilter} <div className="flex-1 relative">
onChange={(e) => <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
setStatusFilter(e.target.value as OrderStatusEnum | "all") <input
} type="text"
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" placeholder="Sipariş ara..."
> value={searchTerm}
<option value="all">Tüm Durumlar</option> onChange={(e) => setSearchTerm(e.target.value)}
<option value={OrderStatusEnum.Draft}>Taslak</option> className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<option value={OrderStatusEnum.Pending}>Beklemede</option> />
<option value={OrderStatusEnum.Approved}>Onaylandı</option> </div>
<option value={OrderStatusEnum.Sent}>Gönderildi</option> <div className="relative">
<option value={OrderStatusEnum.Confirmed}>Onaylandı</option> <FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<option value={OrderStatusEnum.PartiallyDelivered}> <select
Kısmi Teslim value={statusFilter}
</option> onChange={(e) => setStatusFilter(e.target.value as OrderStatusEnum | 'all')}
<option value={OrderStatusEnum.Delivered}>Teslim Edildi</option> 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={OrderStatusEnum.Completed}>Tamamlandı</option> >
<option value={OrderStatusEnum.Cancelled}>İptal Edildi</option> <option value="all">Tüm Durumlar</option>
</select> <option value={OrderStatusEnum.Draft}>Taslak</option>
<option value={OrderStatusEnum.Pending}>Beklemede</option>
<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>
</select>
</div>
</div> </div>
</div>
{/* Orders List */} {/* Orders List */}
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
{filteredOrders.map((order) => ( {filteredOrders.map((order) => (
<div <div
key={order.id} key={order.id}
className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow" className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow"
> >
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center space-x-3 mb-2"> <div className="flex items-center space-x-3 mb-2">
<input <input
type="checkbox" type="checkbox"
checked={selectedOrders.includes(order.id)} checked={selectedOrders.includes(order.id)}
onChange={() => handleSelectOrder(order.id)} onChange={() => handleSelectOrder(order.id)}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/> />
<h3 className="text-base font-semibold text-gray-900"> <h3 className="text-base font-semibold text-gray-900">{order.orderNumber}</h3>
{order.orderNumber} <span
</h3> className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getStatusColor(
<span order.status,
className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getStatusColor( )}`}
order.status >
)}`} {getStatusIcon(order.status)}
> <span>{getStatusText(order.status)}</span>
{getStatusIcon(order.status)}
<span>{getStatusText(order.status)}</span>
</span>
{isOverdue(order) && (
<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded flex items-center">
<FaExclamationTriangle className="w-3 h-3 mr-1" />
Gecikme
</span> </span>
)} {isOverdue(order) && (
</div> <span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded flex items-center">
<p className="text-gray-600 mb-1">{order.requestTitle}</p> <FaExclamationTriangle className="w-3 h-3 mr-1" />
<p className="text-sm text-gray-500"> Gecikme
{order.supplier?.name} •{" "}
{getRequestTypeText(order.requestType)}
</p>
</div>
<div className="flex space-x-1">
<button
onClick={() => handleView(order)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
title="Görüntüle"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={() => handleEdit(order)}
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
<FaTrash className="w-4 h-4" />
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
<div>
<span className="text-sm text-gray-500">Toplam Tutar</span>
<p className="font-semibold text-base text-gray-900">
₺{order.totalAmount.toLocaleString()}
</p>
</div>
<div>
<span className="text-sm text-gray-500">Sipariş Tarihi</span>
<p className="font-medium text-gray-900">
{order.orderDate.toLocaleDateString("tr-TR")}
</p>
</div>
<div>
<span className="text-sm text-gray-500">Teslim Tarihi</span>
<p
className={`font-medium ${
isOverdue(order)
? "text-red-600"
: getDaysUntilDelivery(order) <= 3
? "text-orange-600"
: "text-gray-900"
}`}
>
{order.expectedDeliveryDate.toLocaleDateString("tr-TR")}
{!isOverdue(order) &&
getDaysUntilDelivery(order) <= 7 &&
getDaysUntilDelivery(order) > 0 && (
<span className="text-xs text-orange-600 ml-1">
({getDaysUntilDelivery(order)} gün)
</span> </span>
)} )}
</p> </div>
</div> <p className="text-gray-600 mb-1">{order.requestTitle}</p>
</div> <p className="text-sm text-gray-500">
{order.supplier?.name} • {getRequestTypeText(order.requestType)}
{/* Delivery Progress */} </p>
<div className="mb-3">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-500">Teslimat Durumu</span>
<span className="text-sm font-medium text-gray-900">
{getDeliveryProgress(order)}%
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
style={{ width: `${getDeliveryProgress(order)}%` }}
></div>
</div>
</div>
{/* Items Summary */}
<div className="grid grid-cols-3 gap-3 mb-3 text-sm">
<div className="text-center">
<div className="flex items-center justify-center mb-1">
<FaBox className="w-4 h-4 text-gray-400 mr-1" />
<span className="font-medium">{order.items.length}</span>
</div> </div>
<span className="text-gray-500">Kalem</span> <div className="flex space-x-1">
</div> <button
<div className="text-center"> onClick={() => handleView(order)}
<div className="flex items-center justify-center mb-1"> className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
<FaCheckCircle className="w-4 h-4 text-green-400 mr-1" /> title="Görüntüle"
<span className="font-medium"> >
{order.items.reduce( <FaEye className="w-4 h-4" />
(sum, item) => sum + item.deliveredQuantity, </button>
0 <button
)} onClick={() => handleEdit(order)}
</span> className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
<FaTrash className="w-4 h-4" />
</button>
</div> </div>
<span className="text-gray-500">Teslim</span>
</div> </div>
<div className="text-center">
<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
)}
</span>
</div>
<span className="text-gray-500">Kalan</span>
</div>
</div>
{/* Items Details */} <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
<div className="mt-3"> <div>
<div className="mb-2"> <span className="text-sm text-gray-500">Toplam Tutar</span>
<h4 className="text-sm font-medium text-gray-900 mb-2"> <p className="font-semibold text-base text-gray-900">
Sipariş Kalemleri ₺{order.totalAmount.toLocaleString()}
</h4> </p>
<div className="space-y-2"> </div>
{order.items.map((item) => ( <div>
<div key={item.id} className="bg-gray-50 p-2 rounded-lg"> <span className="text-sm text-gray-500">Sipariş Tarihi</span>
<div className="flex items-center justify-between mb-1.5"> <p className="font-medium text-gray-900">
<div className="flex-1"> {order.orderDate.toLocaleDateString('tr-TR')}
<p className="font-medium text-gray-900"> </p>
{item.material?.name || item.description} </div>
</p> <div>
<p className="text-sm text-gray-600"> <span className="text-sm text-gray-500">Teslim Tarihi</span>
Malzeme Kodu:{" "} <p
{item.material?.code || item.materialId} | Miktar:{" "} className={`font-medium ${
{item.quantity} {item.unit} | Birim Fiyat: ₺ isOverdue(order)
{item.unitPrice.toLocaleString()} ? 'text-red-600'
</p> : getDaysUntilDelivery(order) <= 3
</div> ? 'text-orange-600'
<div className="text-right"> : 'text-gray-900'
<p className="font-semibold text-gray-900"> }`}
₺{item.totalPrice.toLocaleString()} >
</p> {order.expectedDeliveryDate.toLocaleDateString('tr-TR')}
<div className="text-xs text-gray-500"> {!isOverdue(order) &&
<span className="text-green-600"> getDaysUntilDelivery(order) <= 7 &&
Teslim: {item.deliveredQuantity} getDaysUntilDelivery(order) > 0 && (
</span>{" "} <span className="text-xs text-orange-600 ml-1">
| ({getDaysUntilDelivery(order)} gün)
<span className="text-orange-600"> </span>
Kalan: {item.remainingQuantity}
</span>
</div>
</div>
</div>
{item.deliveryDate && (
<div className="text-xs text-gray-500">
Teslim Tarihi:{" "}
{item.deliveryDate.toLocaleDateString("tr-TR")}
</div>
)} )}
</div> </p>
))}
</div> </div>
</div> </div>
</div>
<div className="border-t border-gray-100 pt-3"> {/* Delivery Progress */}
<div className="flex items-center justify-between text-sm"> <div className="mb-3">
<div className="flex items-center space-x-4"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-1"> <span className="text-sm text-gray-500">Teslimat Durumu</span>
<FaCalendar className="w-4 h-4 text-gray-400" /> <span className="text-sm font-medium text-gray-900">
<span className="text-gray-600"> {getDeliveryProgress(order)}%
{order.creationTime.toLocaleDateString("tr-TR")} </span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
style={{ width: `${getDeliveryProgress(order)}%` }}
></div>
</div>
</div>
{/* Items Summary */}
<div className="grid grid-cols-3 gap-3 mb-3 text-sm">
<div className="text-center">
<div className="flex items-center justify-center mb-1">
<FaBox className="w-4 h-4 text-gray-400 mr-1" />
<span className="font-medium">{order.items.length}</span>
</div>
<span className="text-gray-500">Kalem</span>
</div>
<div className="text-center">
<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)}
</span> </span>
</div> </div>
<span className="text-gray-500">Teslim</span>
</div> </div>
{order.approvedBy && ( <div className="text-center">
<div className="flex items-center space-x-1"> <div className="flex items-center justify-center mb-1">
<FaCheckCircle className="w-4 h-4 text-green-400" /> <FaClock className="w-4 h-4 text-orange-400 mr-1" />
<span className="text-gray-600"> <span className="font-medium">
Onaylayan: {order.approvedBy} {order.items.reduce((sum, item) => sum + item.remainingQuantity, 0)}
</span> </span>
</div> </div>
<span className="text-gray-500">Kalan</span>
</div>
</div>
{/* Items Details */}
<div className="mt-3">
<div className="mb-2">
<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">
<div className="flex items-center justify-between mb-1.5">
<div className="flex-1">
<p className="font-medium text-gray-900">
{item.material?.name || item.description}
</p>
<p className="text-sm text-gray-600">
Malzeme Kodu: {item.material?.code || item.materialId} | 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">
<span className="text-green-600">
Teslim: {item.deliveredQuantity}
</span>{' '}
|
<span className="text-orange-600">
Kalan: {item.remainingQuantity}
</span>
</div>
</div>
</div>
{item.deliveryDate && (
<div className="text-xs text-gray-500">
Teslim Tarihi: {item.deliveryDate.toLocaleDateString('tr-TR')}
</div>
)}
</div>
))}
</div>
</div>
</div>
<div className="border-t border-gray-100 pt-3">
<div className="flex items-center justify-between text-sm">
<div className="flex items-center space-x-4">
<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')}
</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>
</div>
)}
</div>
{order.notes && (
<div className="mt-2 p-2 bg-gray-50 rounded text-sm text-gray-600">
<strong>Not:</strong> {order.notes}
</div>
)} )}
</div> </div>
</div>
))}
</div>
{order.notes && ( {filteredOrders.length === 0 && (
<div className="mt-2 p-2 bg-gray-50 rounded text-sm text-gray-600"> <div className="text-center py-8">
<strong>Not:</strong> {order.notes} <FaShoppingCart className="w-16 h-16 text-gray-400 mx-auto mb-4" />
</div> <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>
<button
onClick={handleAddOrder}
className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700"
>
Yeni Sipariş Oluştur
</button>
</div>
)}
{/* Bulk Actions */}
{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>
<div className="flex space-x-2">
<button
onClick={handleBulkApproval}
className="bg-green-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-green-700"
>
Toplu Onay
</button>
<button
onClick={handleBulkStatusUpdate}
className="bg-blue-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-blue-700"
>
Durum Güncelle
</button>
<button
onClick={() => setSelectedOrders([])}
className="bg-gray-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-gray-700"
>
Temizle
</button>
</div>
</div> </div>
</div> </div>
))} )}
</div> </div>
{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>
<p className="text-gray-500 mb-3">
Arama kriterlerinizi değiştirin veya yeni bir sipariş oluşturun.
</p>
<button
onClick={handleAddOrder}
className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700"
>
Yeni Sipariş Oluştur
</button>
</div>
)}
{/* Bulk Actions */}
{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>
<div className="flex space-x-2">
<button
onClick={handleBulkApproval}
className="bg-green-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-green-700"
>
Toplu Onay
</button>
<button
onClick={handleBulkStatusUpdate}
className="bg-blue-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-blue-700"
>
Durum Güncelle
</button>
<button
onClick={() => setSelectedOrders([])}
className="bg-gray-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-gray-700"
>
Temizle
</button>
</div>
</div>
</div>
)}
{/* Bulk Action Modals */} {/* Bulk Action Modals */}
{showBulkModal && ( {showBulkModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-4 w-full max-w-2xl mx-4"> <div className="bg-white rounded-lg p-4 w-full max-w-2xl mx-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold"> <h3 className="text-lg font-semibold">
{bulkModalType === "approval" && "Toplu Onay İşlemi"} {bulkModalType === 'approval' && 'Toplu Onay İşlemi'}
{bulkModalType === "status" && "Toplu Durum Güncelleme"} {bulkModalType === 'status' && 'Toplu Durum Güncelleme'}
</h3> </h3>
<button <button
onClick={() => setShowBulkModal(false)} onClick={() => setShowBulkModal(false)}
@ -533,7 +481,7 @@ const OrderManagement: React.FC = () => {
</button> </button>
</div> </div>
{bulkModalType === "approval" && ( {bulkModalType === 'approval' && (
<div className="space-y-3"> <div className="space-y-3">
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3"> <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
<div className="flex items-center"> <div className="flex items-center">
@ -545,9 +493,7 @@ const OrderManagement: React.FC = () => {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="font-medium text-gray-900"> <h4 className="font-medium text-gray-900">Seçili Siparişler:</h4>
Seçili Siparişler:
</h4>
<div className="max-h-40 overflow-y-auto"> <div className="max-h-40 overflow-y-auto">
{orders {orders
.filter((order) => selectedOrders.includes(order.id)) .filter((order) => selectedOrders.includes(order.id))
@ -559,7 +505,7 @@ const OrderManagement: React.FC = () => {
<span className="text-sm">{order.orderNumber}</span> <span className="text-sm">{order.orderNumber}</span>
<span <span
className={`text-xs px-2 py-1 rounded-full ${getStatusColor( className={`text-xs px-2 py-1 rounded-full ${getStatusColor(
order.status order.status,
)}`} )}`}
> >
{getStatusText(order.status)} {getStatusText(order.status)}
@ -586,7 +532,7 @@ const OrderManagement: React.FC = () => {
</div> </div>
)} )}
{bulkModalType === "status" && ( {bulkModalType === 'status' && (
<div className="space-y-3"> <div className="space-y-3">
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3"> <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
<div className="flex items-center"> <div className="flex items-center">
@ -604,9 +550,9 @@ const OrderManagement: React.FC = () => {
<select <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" 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) => { onChange={(e) => {
const newStatus = e.target.value as OrderStatusEnum; const newStatus = e.target.value as OrderStatusEnum
if (newStatus) { if (newStatus) {
processBulkStatusUpdate(newStatus); processBulkStatusUpdate(newStatus)
} }
}} }}
defaultValue="" defaultValue=""
@ -616,25 +562,15 @@ const OrderManagement: React.FC = () => {
<option value={OrderStatusEnum.Approved}>Onaylandı</option> <option value={OrderStatusEnum.Approved}>Onaylandı</option>
<option value={OrderStatusEnum.Sent}>Gönderildi</option> <option value={OrderStatusEnum.Sent}>Gönderildi</option>
<option value={OrderStatusEnum.Confirmed}>Onaylandı</option> <option value={OrderStatusEnum.Confirmed}>Onaylandı</option>
<option value={OrderStatusEnum.PartiallyDelivered}> <option value={OrderStatusEnum.PartiallyDelivered}>Kısmi Teslim</option>
Kısmi Teslim <option value={OrderStatusEnum.Delivered}>Teslim Edildi</option>
</option> <option value={OrderStatusEnum.Completed}>Tamamlandı</option>
<option value={OrderStatusEnum.Delivered}> <option value={OrderStatusEnum.Cancelled}>İptal Edildi</option>
Teslim Edildi
</option>
<option value={OrderStatusEnum.Completed}>
Tamamlandı
</option>
<option value={OrderStatusEnum.Cancelled}>
İptal Edildi
</option>
</select> </select>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="font-medium text-gray-900"> <h4 className="font-medium text-gray-900">Seçili Siparişler:</h4>
Seçili Siparişler:
</h4>
<div className="max-h-40 overflow-y-auto"> <div className="max-h-40 overflow-y-auto">
{orders {orders
.filter((order) => selectedOrders.includes(order.id)) .filter((order) => selectedOrders.includes(order.id))
@ -646,7 +582,7 @@ const OrderManagement: React.FC = () => {
<span className="text-sm">{order.orderNumber}</span> <span className="text-sm">{order.orderNumber}</span>
<span <span
className={`text-xs px-2 py-1 rounded-full ${getStatusColor( className={`text-xs px-2 py-1 rounded-full ${getStatusColor(
order.status order.status,
)}`} )}`}
> >
{getStatusText(order.status)} {getStatusText(order.status)}
@ -669,8 +605,8 @@ const OrderManagement: React.FC = () => {
</div> </div>
</div> </div>
)} )}
</div> </Container>
); )
}; }
export default OrderManagement; export default OrderManagement

395
ui/src/views/supplyChain/components/OrderManagementForm.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react'
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from 'react-router-dom'
import { import {
FaArrowLeft, FaArrowLeft,
FaSave, FaSave,
@ -11,85 +11,76 @@ import {
FaTrash, FaTrash,
FaMapMarkerAlt, FaMapMarkerAlt,
FaUser, FaUser,
} from "react-icons/fa"; } from 'react-icons/fa'
import { import { MmPurchaseOrder, OrderStatusEnum, MmPurchaseOrderItem } from '../../../types/mm'
MmPurchaseOrder, import { mockMaterials } from '../../../mocks/mockMaterials'
OrderStatusEnum, import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
MmPurchaseOrderItem, import { mockPurchaseOrders } from '../../../mocks/mockPurchaseOrders'
} from "../../../types/mm"; import { Address, PaymentTerms } from '../../../types/common'
import { mockMaterials } from "../../../mocks/mockMaterials"; import { Container } from '@/components/shared'
import { mockBusinessParties } from "../../../mocks/mockBusinessParties";
import { mockPurchaseOrders } from "../../../mocks/mockPurchaseOrders";
import { Address, PaymentTerms } from "../../../types/common";
const OrderManagementForm: React.FC = () => { const OrderManagementForm: React.FC = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>()
const navigate = useNavigate(); const navigate = useNavigate()
const isEdit = id !== undefined && id !== "new"; const isEdit = id !== undefined && id !== 'new'
const isView = window.location.pathname.includes("/view/"); const isView = window.location.pathname.includes('/view/')
// Yeni sipariş için başlangıç şablonu // Yeni sipariş için başlangıç şablonu
const newOrderDefaults: Partial<MmPurchaseOrder> = { const newOrderDefaults: Partial<MmPurchaseOrder> = {
orderNumber: "", orderNumber: '',
supplierId: "", supplierId: '',
orderDate: new Date(), orderDate: new Date(),
deliveryDate: new Date(), deliveryDate: new Date(),
status: OrderStatusEnum.Draft, status: OrderStatusEnum.Draft,
paymentTerms: PaymentTerms.Net30, paymentTerms: PaymentTerms.Net30,
currency: "TRY", currency: 'TRY',
exchangeRate: 1, exchangeRate: 1,
subtotal: 0, subtotal: 0,
taxAmount: 0, taxAmount: 0,
totalAmount: 0, totalAmount: 0,
items: [], items: [],
deliveryAddress: { deliveryAddress: {
street: "", street: '',
city: "", city: '',
state: "", state: '',
postalCode: "", postalCode: '',
country: "Türkiye", country: 'Türkiye',
}, },
terms: "", terms: '',
notes: "", notes: '',
receipts: [], receipts: [],
}; }
// İlk state (isEdit vs new) // İlk state (isEdit vs new)
const [formData, setFormData] = useState<Partial<MmPurchaseOrder>>(() => { const [formData, setFormData] = useState<Partial<MmPurchaseOrder>>(() => {
if (isEdit) { if (isEdit) {
const po = mockPurchaseOrders.find((o) => o.id === id); const po = mockPurchaseOrders.find((o) => o.id === id)
return { ...po }; return { ...po }
} }
return { ...newOrderDefaults }; return { ...newOrderDefaults }
}); })
// id değişirse formu güncelle // id değişirse formu güncelle
useEffect(() => { useEffect(() => {
if (isEdit) { if (isEdit) {
const po = mockPurchaseOrders.find((o) => o.id === id); const po = mockPurchaseOrders.find((o) => o.id === id)
setFormData(po ? { ...po } : { ...newOrderDefaults }); setFormData(po ? { ...po } : { ...newOrderDefaults })
} else { } else {
setFormData({ ...newOrderDefaults }); setFormData({ ...newOrderDefaults })
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, isEdit]); }, [id, isEdit])
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent< e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>
) => { ) => {
const { name, value, type } = e.target; const { name, value, type } = e.target
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
[name]: [name]:
type === "number" type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
? parseFloat(value) || 0 }))
: type === "date" }
? new Date(value)
: value,
}));
};
const handleAddressChange = (field: keyof Address, value: string) => { const handleAddressChange = (field: keyof Address, value: string) => {
setFormData((prev) => ({ setFormData((prev) => ({
@ -98,15 +89,15 @@ const OrderManagementForm: React.FC = () => {
...prev.deliveryAddress!, ...prev.deliveryAddress!,
[field]: value, [field]: value,
}, },
})); }))
}; }
const addOrderItem = () => { const addOrderItem = () => {
const newItem: MmPurchaseOrderItem = { const newItem: MmPurchaseOrderItem = {
id: `item-${Date.now()}`, id: `item-${Date.now()}`,
orderId: formData.id || "", orderId: formData.id || '',
materialId: "", materialId: '',
description: "", description: '',
quantity: 0, quantity: 0,
unitPrice: 0, unitPrice: 0,
totalPrice: 0, totalPrice: 0,
@ -114,91 +105,88 @@ const OrderManagementForm: React.FC = () => {
receivedQuantity: 0, receivedQuantity: 0,
deliveredQuantity: 0, deliveredQuantity: 0,
remainingQuantity: 0, remainingQuantity: 0,
unit: "", unit: '',
}; }
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: [...(prev.items || []), newItem], items: [...(prev.items || []), newItem],
})); }))
}; }
const removeOrderItem = (index: number) => { const removeOrderItem = (index: number) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: prev.items?.filter((_, i) => i !== index) || [], items: prev.items?.filter((_, i) => i !== index) || [],
})); }))
calculateTotals(); calculateTotals()
}; }
const updateOrderItem = ( const updateOrderItem = (
index: number, index: number,
field: keyof MmPurchaseOrderItem, field: keyof MmPurchaseOrderItem,
value: string | number | Date | undefined value: string | number | Date | undefined,
) => { ) => {
setFormData((prev) => { setFormData((prev) => {
const updatedItems = const updatedItems =
prev.items?.map((item, i) => { prev.items?.map((item, i) => {
if (i === index) { if (i === index) {
const updatedItem = { ...item, [field]: value }; const updatedItem = { ...item, [field]: value }
// Auto-calculate total amount when quantity or unit price changes // Auto-calculate total amount when quantity or unit price changes
if (field === "quantity" || field === "unitPrice") { if (field === 'quantity' || field === 'unitPrice') {
updatedItem.totalPrice = updatedItem.totalPrice = (updatedItem.quantity || 0) * (updatedItem.unitPrice || 0)
(updatedItem.quantity || 0) * (updatedItem.unitPrice || 0);
updatedItem.remainingQuantity = updatedItem.remainingQuantity =
updatedItem.quantity - (updatedItem.receivedQuantity || 0); updatedItem.quantity - (updatedItem.receivedQuantity || 0)
} }
return updatedItem; return updatedItem
} }
return item; return item
}) || []; }) || []
return { return {
...prev, ...prev,
items: updatedItems, items: updatedItems,
}; }
}); })
// Recalculate totals // Recalculate totals
setTimeout(calculateTotals, 0); setTimeout(calculateTotals, 0)
}; }
const calculateTotals = () => { const calculateTotals = () => {
const subtotal = const subtotal = formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) || 0
formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) || const taxAmount = subtotal * 0.18 // %18 KDV
0; const totalAmount = subtotal + taxAmount
const taxAmount = subtotal * 0.18; // %18 KDV
const totalAmount = subtotal + taxAmount;
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
subtotal, subtotal,
taxAmount, taxAmount,
totalAmount, totalAmount,
})); }))
}; }
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
// TODO: Implement save logic // TODO: Implement save logic
console.log("Saving purchase order:", formData); console.log('Saving purchase order:', formData)
navigate("/admin/supplychain/orders"); navigate('/admin/supplychain/orders')
}; }
const handleCancel = () => { const handleCancel = () => {
navigate("/admin/supplychain/orders"); navigate('/admin/supplychain/orders')
}; }
const isReadOnly = isView; const isReadOnly = isView
const pageTitle = isEdit const pageTitle = isEdit
? "Satınalma Siparişini Düzenle" ? 'Satınalma Siparişini Düzenle'
: isView : isView
? "Satınalma Siparişi Detayları" ? 'Satınalma Siparişi Detayları'
: "Yeni Satınalma Siparişi"; : 'Yeni Satınalma Siparişi'
return ( return (
<div className="min-h-screen bg-gray-50 py-4"> <Container>
<div className="mx-auto"> <div className="space-y-2">
{/* Header */} {/* Header */}
<div className="bg-white rounded-lg shadow-md p-2 mb-2"> <div className="bg-white rounded-lg shadow-md p-2 mb-2">
<div className="flex items-center justify-between"> <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" 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" /> <FaTimes className="mr-2" />
{isView ? "Kapat" : "İptal"} {isView ? 'Kapat' : 'İptal'}
</button> </button>
{!isView && ( {!isView && (
<button <button
@ -251,7 +239,7 @@ const OrderManagementForm: React.FC = () => {
<input <input
type="text" type="text"
name="orderNumber" name="orderNumber"
value={formData.orderNumber || ""} value={formData.orderNumber || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly || isEdit} 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" 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> </label>
<select <select
name="supplierId" name="supplierId"
value={formData.supplierId || ""} value={formData.supplierId || ''}
onChange={handleInputChange} onChange={handleInputChange}
disabled={isReadOnly} 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" 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" name="orderDate"
value={ value={
formData.orderDate formData.orderDate
? new Date(formData.orderDate) ? new Date(formData.orderDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -311,10 +297,8 @@ const OrderManagementForm: React.FC = () => {
name="deliveryDate" name="deliveryDate"
value={ value={
formData.deliveryDate formData.deliveryDate
? new Date(formData.deliveryDate) ? new Date(formData.deliveryDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -345,12 +329,10 @@ const OrderManagementForm: React.FC = () => {
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Para Birimi</label>
Para Birimi
</label>
<select <select
name="currency" name="currency"
value={formData.currency || "TRY"} value={formData.currency || 'TRY'}
onChange={handleInputChange} onChange={handleInputChange}
disabled={isReadOnly} 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" 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> </label>
<textarea <textarea
name="terms" name="terms"
value={formData.terms || ""} value={formData.terms || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={2} rows={2}
@ -376,12 +358,10 @@ const OrderManagementForm: React.FC = () => {
</div> </div>
<div className="md:col-span-2"> <div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Notlar</label>
Notlar
</label>
<textarea <textarea
name="notes" name="notes"
value={formData.notes || ""} value={formData.notes || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={1} rows={1}
@ -400,75 +380,55 @@ const OrderManagementForm: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="md:col-span-2"> <div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Adres</label>
Adres
</label>
<input <input
type="text" type="text"
value={formData.deliveryAddress?.street || ""} value={formData.deliveryAddress?.street || ''}
onChange={(e) => onChange={(e) => handleAddressChange('street', e.target.value)}
handleAddressChange("street", e.target.value)
}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Şehir</label>
Şehir
</label>
<input <input
type="text" type="text"
value={formData.deliveryAddress?.city || ""} value={formData.deliveryAddress?.city || ''}
onChange={(e) => onChange={(e) => handleAddressChange('city', e.target.value)}
handleAddressChange("city", e.target.value)
}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">İl/Bölge</label>
İl/Bölge
</label>
<input <input
type="text" type="text"
value={formData.deliveryAddress?.state || ""} value={formData.deliveryAddress?.state || ''}
onChange={(e) => onChange={(e) => handleAddressChange('state', e.target.value)}
handleAddressChange("state", e.target.value)
}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Posta Kodu</label>
Posta Kodu
</label>
<input <input
type="text" type="text"
value={formData.deliveryAddress?.postalCode || ""} value={formData.deliveryAddress?.postalCode || ''}
onChange={(e) => onChange={(e) => handleAddressChange('postalCode', e.target.value)}
handleAddressChange("postalCode", e.target.value)
}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Ülke</label>
Ülke
</label>
<input <input
type="text" type="text"
value={formData.deliveryAddress?.country || ""} value={formData.deliveryAddress?.country || ''}
onChange={(e) => onChange={(e) => handleAddressChange('country', e.target.value)}
handleAddressChange("country", e.target.value)
}
readOnly={isReadOnly} 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" 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 */} {/* Sipariş Kalemleri */}
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-medium text-gray-900"> <h3 className="text-lg font-medium text-gray-900">Sipariş Kalemleri</h3>
Sipariş Kalemleri
</h3>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="button" type="button"
@ -496,14 +454,9 @@ const OrderManagementForm: React.FC = () => {
<div className="space-y-3"> <div className="space-y-3">
{formData.items?.map((item, index) => ( {formData.items?.map((item, index) => (
<div <div key={item.id} className="border rounded-lg p-3 bg-gray-50">
key={item.id}
className="border rounded-lg p-3 bg-gray-50"
>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
Kalem {index + 1}
</span>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Malzeme</label>
Malzeme
</label>
<select <select
value={item.materialId} value={item.materialId}
onChange={(e) => onChange={(e) => updateOrderItem(index, 'materialId', e.target.value)}
updateOrderItem(
index,
"materialId",
e.target.value
)
}
disabled={isReadOnly} 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" 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 <input
type="text" type="text"
value={item.description} value={item.description}
onChange={(e) => onChange={(e) => updateOrderItem(index, 'description', e.target.value)}
updateOrderItem(
index,
"description",
e.target.value
)
}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Miktar</label>
Miktar
</label>
<input <input
type="number" type="number"
value={item.quantity} value={item.quantity}
onChange={(e) => onChange={(e) =>
updateOrderItem( updateOrderItem(index, 'quantity', parseFloat(e.target.value) || 0)
index,
"quantity",
parseFloat(e.target.value) || 0
)
} }
readOnly={isReadOnly} readOnly={isReadOnly}
min="0" min="0"
@ -589,11 +522,7 @@ const OrderManagementForm: React.FC = () => {
type="number" type="number"
value={item.unitPrice} value={item.unitPrice}
onChange={(e) => onChange={(e) =>
updateOrderItem( updateOrderItem(index, 'unitPrice', parseFloat(e.target.value) || 0)
index,
"unitPrice",
parseFloat(e.target.value) || 0
)
} }
readOnly={isReadOnly} readOnly={isReadOnly}
min="0" min="0"
@ -622,17 +551,11 @@ const OrderManagementForm: React.FC = () => {
type="date" type="date"
value={ value={
item.deliveryDate item.deliveryDate
? new Date(item.deliveryDate) ? new Date(item.deliveryDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={(e) => onChange={(e) =>
updateOrderItem( updateOrderItem(index, 'deliveryDate', new Date(e.target.value))
index,
"deliveryDate",
new Date(e.target.value)
)
} }
readOnly={isReadOnly} 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" 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) => onChange={(e) =>
updateOrderItem( updateOrderItem(
index, index,
"receivedQuantity", 'receivedQuantity',
parseFloat(e.target.value) || 0 parseFloat(e.target.value) || 0,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -678,13 +601,9 @@ const OrderManagementForm: React.FC = () => {
</label> </label>
<input <input
type="text" type="text"
value={item.specifications || ""} value={item.specifications || ''}
onChange={(e) => onChange={(e) =>
updateOrderItem( updateOrderItem(index, 'specifications', e.target.value)
index,
"specifications",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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> </label>
<input <input
type="text" type="text"
value={item.qualityRequirements || ""} value={item.qualityRequirements || ''}
onChange={(e) => onChange={(e) =>
updateOrderItem( updateOrderItem(index, 'qualityRequirements', e.target.value)
index,
"qualityRequirements",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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"> <div className="space-y-4">
{/* Durum ve Tutar */} {/* Durum ve Tutar */}
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<h3 className="text-lg font-medium text-gray-900 mb-3"> <h3 className="text-lg font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
Durum Bilgileri
</h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Durum</label>
Durum
</label>
<select <select
name="status" name="status"
value={formData.status || OrderStatusEnum.Draft} value={formData.status || OrderStatusEnum.Draft}
@ -744,29 +655,17 @@ const OrderManagementForm: React.FC = () => {
> >
<option value={OrderStatusEnum.Draft}>Taslak</option> <option value={OrderStatusEnum.Draft}>Taslak</option>
<option value={OrderStatusEnum.Sent}>Gönderildi</option> <option value={OrderStatusEnum.Sent}>Gönderildi</option>
<option value={OrderStatusEnum.Confirmed}> <option value={OrderStatusEnum.Confirmed}>Onaylandı</option>
Onaylandı <option value={OrderStatusEnum.PartiallyReceived}>Kısmi Teslim</option>
</option> <option value={OrderStatusEnum.Received}>Teslim Alındı</option>
<option value={OrderStatusEnum.PartiallyReceived}> <option value={OrderStatusEnum.Invoiced}>Faturalandı</option>
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.Closed}>Kapatıldı</option>
<option value={OrderStatusEnum.Cancelled}> <option value={OrderStatusEnum.Cancelled}>İptal Edildi</option>
İptal Edildi
</option>
</select> </select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Döviz Kuru</label>
Döviz Kuru
</label>
<input <input
type="number" type="number"
name="exchangeRate" name="exchangeRate"
@ -805,12 +704,9 @@ const OrderManagementForm: React.FC = () => {
<div className="border-t pt-2"> <div className="border-t pt-2">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-lg font-medium text-gray-900"> <span className="text-lg font-medium text-gray-900">Genel Toplam:</span>
Genel Toplam:
</span>
<span className="text-lg font-bold text-green-600"> <span className="text-lg font-bold text-green-600">
{formData.totalAmount?.toLocaleString()}{" "} {formData.totalAmount?.toLocaleString()} {formData.currency}
{formData.currency}
</span> </span>
</div> </div>
</div> </div>
@ -820,27 +716,18 @@ const OrderManagementForm: React.FC = () => {
{/* Sipariş Geçmişi (sadece görüntüleme) */} {/* Sipariş Geçmişi (sadece görüntüleme) */}
{isView && formData.receipts && formData.receipts.length > 0 && ( {isView && formData.receipts && formData.receipts.length > 0 && (
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<h3 className="text-base font-medium text-gray-900 mb-3"> <h3 className="text-base font-medium text-gray-900 mb-3">Teslimat Geçmişi</h3>
Teslimat Geçmişi
</h3>
<div className="space-y-2"> <div className="space-y-2">
{formData.receipts.map((receipt) => ( {formData.receipts.map((receipt) => (
<div <div key={receipt.id} className="border-l-4 border-green-500 pl-4">
key={receipt.id}
className="border-l-4 border-green-500 pl-4"
>
<div className="text-sm font-medium text-gray-900"> <div className="text-sm font-medium text-gray-900">
{receipt.receiptNumber} {receipt.receiptNumber}
</div> </div>
<div className="text-xs text-gray-500"> <div className="text-xs text-gray-500">
{new Date(receipt.receiptDate).toLocaleDateString( {new Date(receipt.receiptDate).toLocaleDateString('tr-TR')}
"tr-TR"
)}
</div>
<div className="text-xs text-gray-600">
Durumu: {receipt.status}
</div> </div>
<div className="text-xs text-gray-600">Durumu: {receipt.status}</div>
</div> </div>
))} ))}
</div> </div>
@ -850,8 +737,8 @@ const OrderManagementForm: React.FC = () => {
</div> </div>
</form> </form>
</div> </div>
</div> </Container>
); )
}; }
export default OrderManagementForm; export default OrderManagementForm

364
ui/src/views/supplyChain/components/PurchaseRequestForm.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react'
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from 'react-router-dom'
import { import {
FaArrowLeft, FaArrowLeft,
FaSave, FaSave,
@ -9,135 +9,127 @@ import {
FaExclamationTriangle, FaExclamationTriangle,
FaPlus, FaPlus,
FaTrash, FaTrash,
} from "react-icons/fa"; } from 'react-icons/fa'
import { import {
MmPurchaseRequest, MmPurchaseRequest,
RequestTypeEnum, RequestTypeEnum,
RequestStatusEnum, RequestStatusEnum,
MmPurchaseRequestItem, MmPurchaseRequestItem,
} from "../../../types/mm"; } from '../../../types/mm'
import { mockMaterials } from "../../../mocks/mockMaterials"; import { mockMaterials } from '../../../mocks/mockMaterials'
import { mockPurchaseRequests } from "../../../mocks/mockPurchaseRequests"; import { mockPurchaseRequests } from '../../../mocks/mockPurchaseRequests'
import { PriorityEnum } from "../../../types/common"; import { PriorityEnum } from '../../../types/common'
import { Container } from '@/components/shared'
const PurchaseRequestForm: React.FC = () => { const PurchaseRequestForm: React.FC = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>()
const navigate = useNavigate(); const navigate = useNavigate()
const isEdit = id !== undefined && id !== "new"; const isEdit = id !== undefined && id !== 'new'
const isView = window.location.pathname.includes("/view/"); const isView = window.location.pathname.includes('/view/')
// Yeni kayıt için başlangıç şablonu // Yeni kayıt için başlangıç şablonu
const newRequestDefaults: Partial<MmPurchaseRequest> = { const newRequestDefaults: Partial<MmPurchaseRequest> = {
requestNumber: "", requestNumber: '',
requestType: RequestTypeEnum.Material, requestType: RequestTypeEnum.Material,
description: "", description: '',
department: "", department: '',
requestedBy: "", requestedBy: '',
requestDate: new Date(), requestDate: new Date(),
requiredDate: new Date(), requiredDate: new Date(),
priority: PriorityEnum.Normal, priority: PriorityEnum.Normal,
status: RequestStatusEnum.Draft, status: RequestStatusEnum.Draft,
currency: "TRY", currency: 'TRY',
items: [], items: [],
approvals: [], approvals: [],
attachments: [], attachments: [],
comments: [], comments: [],
}; }
// isEdit & id'ye göre ilk state // isEdit & id'ye göre ilk state
const [formData, setFormData] = useState<Partial<MmPurchaseRequest>>(() => { const [formData, setFormData] = useState<Partial<MmPurchaseRequest>>(() => {
if (isEdit) { if (isEdit) {
const pr = mockPurchaseRequests.find((a) => a.id === id); // DİKKAT: === kullan const pr = mockPurchaseRequests.find((a) => a.id === id) // DİKKAT: === kullan
return { ...pr }; return { ...pr }
} }
// new // new
return { ...newRequestDefaults }; return { ...newRequestDefaults }
}); })
useEffect(() => { useEffect(() => {
if (isEdit) { if (isEdit) {
const pr = mockPurchaseRequests.find((a) => a.id === id); const pr = mockPurchaseRequests.find((a) => a.id === id)
setFormData({ ...pr }); setFormData({ ...pr })
} else { } else {
setFormData({ ...newRequestDefaults }); setFormData({ ...newRequestDefaults })
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, isEdit]); }, [id, isEdit])
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent< e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>
) => { ) => {
const { name, value, type } = e.target; const { name, value, type } = e.target
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
[name]: [name]:
type === "number" type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
? parseFloat(value) || 0 }))
: type === "date" }
? new Date(value)
: value,
}));
};
const addRequestItem = () => { const addRequestItem = () => {
const newItem: MmPurchaseRequestItem = { const newItem: MmPurchaseRequestItem = {
id: `item-${Date.now()}`, id: `item-${Date.now()}`,
requestId: formData.id || "", requestId: formData.id || '',
quantity: 0, quantity: 0,
unit: "", unit: '',
isUrgent: false, isUrgent: false,
}; }
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: [...(prev.items || []), newItem], items: [...(prev.items || []), newItem],
})); }))
}; }
const removeRequestItem = (index: number) => { const removeRequestItem = (index: number) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: prev.items?.filter((_, i) => i !== index) || [], items: prev.items?.filter((_, i) => i !== index) || [],
})); }))
}; }
const updateRequestItem = ( const updateRequestItem = (
index: number, index: number,
field: keyof MmPurchaseRequestItem, field: keyof MmPurchaseRequestItem,
value: string | number | boolean | undefined value: string | number | boolean | undefined,
) => { ) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: items: prev.items?.map((item, i) => (i === index ? { ...item, [field]: value } : item)) || [],
prev.items?.map((item, i) => }))
i === index ? { ...item, [field]: value } : item }
) || [],
}));
};
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
// TODO: Implement save logic // TODO: Implement save logic
console.log("Saving purchase request:", formData); console.log('Saving purchase request:', formData)
navigate("/admin/supplychain/requests"); navigate('/admin/supplychain/requests')
}; }
const handleCancel = () => { const handleCancel = () => {
navigate("/admin/supplychain/requests"); navigate('/admin/supplychain/requests')
}; }
const isReadOnly = isView; const isReadOnly = isView
const pageTitle = isEdit const pageTitle = isEdit
? "Satınalma Talebini Düzenle" ? 'Satınalma Talebini Düzenle'
: isView : isView
? "Satınalma Talebi Detayları" ? 'Satınalma Talebi Detayları'
: "Yeni Satınalma Talebi"; : 'Yeni Satınalma Talebi'
return ( return (
<div className="min-h-screen bg-gray-50 py-4"> <Container>
<div className="mx-auto"> <div className="space-y-2">
{/* Header */} {/* Header */}
<div className="bg-white rounded-lg shadow-md p-2 mb-2"> <div className="bg-white rounded-lg shadow-md p-2 mb-2">
<div className="flex items-center justify-between"> <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" 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" /> <FaTimes className="mr-2" />
{isView ? "Kapat" : "İptal"} {isView ? 'Kapat' : 'İptal'}
</button> </button>
{!isView && ( {!isView && (
<button <button
@ -189,7 +181,7 @@ const PurchaseRequestForm: React.FC = () => {
<input <input
type="text" type="text"
name="requestNumber" name="requestNumber"
value={formData.requestNumber || ""} value={formData.requestNumber || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly || isEdit} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Talep Tipi</label>
Talep Tipi
</label>
<select <select
name="requestType" name="requestType"
value={formData.requestType || RequestTypeEnum.Material} value={formData.requestType || RequestTypeEnum.Material}
@ -209,20 +199,16 @@ const PurchaseRequestForm: React.FC = () => {
> >
<option value={RequestTypeEnum.Material}>Malzeme</option> <option value={RequestTypeEnum.Material}>Malzeme</option>
<option value={RequestTypeEnum.Service}>Hizmet</option> <option value={RequestTypeEnum.Service}>Hizmet</option>
<option value={RequestTypeEnum.WorkCenter}> <option value={RequestTypeEnum.WorkCenter}>İş Merkezi</option>
İş Merkezi
</option>
<option value={RequestTypeEnum.Maintenance}>Bakım</option> <option value={RequestTypeEnum.Maintenance}>Bakım</option>
</select> </select>
</div> </div>
<div className="md:col-span-2"> <div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Açıklama</label>
Açıklama
</label>
<textarea <textarea
name="description" name="description"
value={formData.description || ""} value={formData.description || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={2} rows={2}
@ -232,13 +218,11 @@ const PurchaseRequestForm: React.FC = () => {
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Departman</label>
Departman
</label>
<input <input
type="text" type="text"
name="department" name="department"
value={formData.department || ""} value={formData.department || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Talep Eden</label>
Talep Eden
</label>
<input <input
type="text" type="text"
name="requestedBy" name="requestedBy"
value={formData.requestedBy || ""} value={formData.requestedBy || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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" name="requestDate"
value={ value={
formData.requestDate formData.requestDate
? new Date(formData.requestDate) ? new Date(formData.requestDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -292,10 +272,8 @@ const PurchaseRequestForm: React.FC = () => {
name="requiredDate" name="requiredDate"
value={ value={
formData.requiredDate formData.requiredDate
? new Date(formData.requiredDate) ? new Date(formData.requiredDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -323,12 +301,10 @@ const PurchaseRequestForm: React.FC = () => {
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Para Birimi</label>
Para Birimi
</label>
<select <select
name="currency" name="currency"
value={formData.currency || "TRY"} value={formData.currency || 'TRY'}
onChange={handleInputChange} onChange={handleInputChange}
disabled={isReadOnly} 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" 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 */} {/* Talep Kalemleri */}
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-base font-medium text-gray-900"> <h3 className="text-base font-medium text-gray-900">Talep Kalemleri</h3>
Talep Kalemleri
</h3>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="button" type="button"
@ -361,14 +335,9 @@ const PurchaseRequestForm: React.FC = () => {
<div className="space-y-3"> <div className="space-y-3">
{formData.items?.map((item, index) => ( {formData.items?.map((item, index) => (
<div <div key={item.id} className="border rounded-lg p-3 bg-gray-50">
key={item.id}
className="border rounded-lg p-3 bg-gray-50"
>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
Kalem {index + 1}
</span>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Malzeme</label>
Malzeme
</label>
<select <select
value={item.materialId || ""} value={item.materialId || ''}
onChange={(e) => onChange={(e) => updateRequestItem(index, 'materialId', e.target.value)}
updateRequestItem(
index,
"materialId",
e.target.value
)
}
disabled={isReadOnly} 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" 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> </label>
<input <input
type="text" type="text"
value={item.serviceDescription || ""} value={item.serviceDescription || ''}
onChange={(e) => onChange={(e) =>
updateRequestItem( updateRequestItem(index, 'serviceDescription', e.target.value)
index,
"serviceDescription",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Miktar</label>
Miktar
</label>
<input <input
type="number" type="number"
value={item.quantity} value={item.quantity}
onChange={(e) => onChange={(e) =>
updateRequestItem( updateRequestItem(index, 'quantity', parseFloat(e.target.value) || 0)
index,
"quantity",
parseFloat(e.target.value) || 0
)
} }
readOnly={isReadOnly} readOnly={isReadOnly}
min="0" min="0"
@ -447,15 +398,11 @@ const PurchaseRequestForm: React.FC = () => {
</div> </div>
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Birim</label>
Birim
</label>
<input <input
type="text" type="text"
value={item.unit} value={item.unit}
onChange={(e) => onChange={(e) => updateRequestItem(index, 'unit', e.target.value)}
updateRequestItem(index, "unit", e.target.value)
}
readOnly={isReadOnly} 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" 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> </label>
<input <input
type="number" type="number"
value={item.estimatedPrice || ""} value={item.estimatedPrice || ''}
onChange={(e) => onChange={(e) =>
updateRequestItem( updateRequestItem(
index, index,
"estimatedPrice", 'estimatedPrice',
parseFloat(e.target.value) || undefined parseFloat(e.target.value) || undefined,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -488,11 +435,7 @@ const PurchaseRequestForm: React.FC = () => {
type="checkbox" type="checkbox"
checked={item.isUrgent} checked={item.isUrgent}
onChange={(e) => onChange={(e) =>
updateRequestItem( updateRequestItem(index, 'isUrgent', e.target.checked)
index,
"isUrgent",
e.target.checked
)
} }
disabled={isReadOnly} disabled={isReadOnly}
className="mr-1" className="mr-1"
@ -507,13 +450,9 @@ const PurchaseRequestForm: React.FC = () => {
</label> </label>
<input <input
type="text" type="text"
value={item.specification || ""} value={item.specification || ''}
onChange={(e) => onChange={(e) =>
updateRequestItem( updateRequestItem(index, 'specification', e.target.value)
index,
"specification",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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>
<div className="md:col-span-2 lg:col-span-3"> <div className="md:col-span-2 lg:col-span-3">
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Gerekçe</label>
Gerekçe
</label>
<input <input
type="text" type="text"
value={item.justification || ""} value={item.justification || ''}
onChange={(e) => onChange={(e) =>
updateRequestItem( updateRequestItem(index, 'justification', e.target.value)
index,
"justification",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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 */} {/* Yan Panel - Durum ve Onaylar */}
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<h3 className="text-base font-medium text-gray-900 mb-3"> <h3 className="text-base font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
Durum Bilgileri
</h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Durum</label>
Durum
</label>
<select <select
name="status" name="status"
value={formData.status || RequestStatusEnum.Draft} 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" 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.Draft}>Taslak</option>
<option value={RequestStatusEnum.Submitted}> <option value={RequestStatusEnum.Submitted}>Gönderildi</option>
Gönderildi <option value={RequestStatusEnum.InReview}>İncelemede</option>
</option> <option value={RequestStatusEnum.Approved}>Onaylandı</option>
<option value={RequestStatusEnum.InReview}> <option value={RequestStatusEnum.Rejected}>Reddedildi</option>
İncelemede <option value={RequestStatusEnum.Cancelled}>İptal Edildi</option>
</option>
<option value={RequestStatusEnum.Approved}>
Onaylandı
</option>
<option value={RequestStatusEnum.Rejected}>
Reddedildi
</option>
<option value={RequestStatusEnum.Cancelled}>
İptal Edildi
</option>
</select> </select>
</div> </div>
@ -595,8 +514,7 @@ const PurchaseRequestForm: React.FC = () => {
Toplam Tutar Toplam Tutar
</label> </label>
<div className="mt-1 text-base font-semibold text-green-600"> <div className="mt-1 text-base font-semibold text-green-600">
{formData.totalAmount?.toLocaleString()}{" "} {formData.totalAmount?.toLocaleString()} {formData.currency}
{formData.currency}
</div> </div>
</div> </div>
)} )}
@ -604,58 +522,48 @@ const PurchaseRequestForm: React.FC = () => {
</div> </div>
{/* Onay Geçmişi (sadece görüntüleme) */} {/* Onay Geçmişi (sadece görüntüleme) */}
{isView && {isView && formData.approvals && formData.approvals.length > 0 && (
formData.approvals && <div className="bg-white rounded-lg shadow-md p-4">
formData.approvals.length > 0 && ( <h3 className="text-base font-medium text-gray-900 mb-3">Onay Geçmişi</h3>
<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>
<div className="space-y-3"> <div className="space-y-3">
{formData.approvals.map((approval) => ( {formData.approvals.map((approval) => (
<div <div key={approval.id} className="border-l-4 border-blue-500 pl-4">
key={approval.id} <div className="text-sm font-medium text-gray-900">
className="border-l-4 border-blue-500 pl-4" {approval.approverName}
>
<div className="text-sm font-medium text-gray-900">
{approval.approverName}
</div>
<div className="text-xs text-gray-500">
{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"
? "Onaylandı"
: approval.status === "REJECTED"
? "Reddedildi"
: "Beklemede"}
</div>
{approval.comments && (
<div className="text-xs text-gray-600 mt-1">
{approval.comments}
</div>
)}
</div> </div>
))} <div className="text-xs text-gray-500">
</div> {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'
? 'Onaylandı'
: approval.status === 'REJECTED'
? 'Reddedildi'
: 'Beklemede'}
</div>
{approval.comments && (
<div className="text-xs text-gray-600 mt-1">{approval.comments}</div>
)}
</div>
))}
</div> </div>
)} </div>
)}
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </Container>
); )
}; }
export default PurchaseRequestForm; export default PurchaseRequestForm

417
ui/src/views/supplyChain/components/PurchaseRequests.tsx
View file

@ -21,6 +21,7 @@ import {
getRequestStatusColor, getRequestStatusColor,
getRequestStatusText, getRequestStatusText,
} from '../../../utils/erp' } from '../../../utils/erp'
import { Container } from '@/components/shared'
const PurchaseRequests: React.FC = () => { const PurchaseRequests: React.FC = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -60,228 +61,232 @@ const PurchaseRequests: React.FC = () => {
} }
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex items-center justify-between"> {/* Header */}
<div> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">Satınalma Talepleri</h2> <div>
<p className="text-gray-600">Malzeme, hizmet ve iş merkezi taleplerini yönetin</p> <h2 className="text-2xl font-bold text-gray-900">Satınalma Talepleri</h2>
<p className="text-gray-600">Malzeme, hizmet ve iş merkezi taleplerini yönetin</p>
</div>
<button
onClick={handleAddNew}
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
>
<FaPlus className="w-4 h-4" />
<span>Yeni Talep</span>
</button>
</div> </div>
<button
onClick={handleAddNew}
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
>
<FaPlus className="w-4 h-4" />
<span>Yeni Talep</span>
</button>
</div>
{/* Filters */} {/* Filters */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-3"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="relative"> <div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input <input
type="text" type="text"
placeholder="Talep ara..." placeholder="Talep ara..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value as RequestStatusEnum | 'ALL')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="ALL">Tüm Durumlar</option>
<option value={RequestStatusEnum.Draft}>Taslak</option>
<option value={RequestStatusEnum.Submitted}>Gönderildi</option>
<option value={RequestStatusEnum.InReview}>İnceleniyor</option>
<option value={RequestStatusEnum.Approved}>Onaylandı</option>
<option value={RequestStatusEnum.Rejected}>Reddedildi</option>
</select>
<select
value={filterType}
onChange={(e) => setFilterType(e.target.value as RequestTypeEnum | 'ALL')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="ALL">Tüm Türler</option>
<option value={RequestTypeEnum.Material}>Malzeme</option>
<option value={RequestTypeEnum.Service}>Hizmet</option>
<option value={RequestTypeEnum.WorkCenter}>İş Merkezi</option>
<option value={RequestTypeEnum.Maintenance}>Bakım</option>
</select>
</div> </div>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value as RequestStatusEnum | 'ALL')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="ALL">Tüm Durumlar</option>
<option value={RequestStatusEnum.Draft}>Taslak</option>
<option value={RequestStatusEnum.Submitted}>Gönderildi</option>
<option value={RequestStatusEnum.InReview}>İnceleniyor</option>
<option value={RequestStatusEnum.Approved}>Onaylandı</option>
<option value={RequestStatusEnum.Rejected}>Reddedildi</option>
</select>
<select
value={filterType}
onChange={(e) => setFilterType(e.target.value as RequestTypeEnum | 'ALL')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="ALL">Tüm Türler</option>
<option value={RequestTypeEnum.Material}>Malzeme</option>
<option value={RequestTypeEnum.Service}>Hizmet</option>
<option value={RequestTypeEnum.WorkCenter}>İş Merkezi</option>
<option value={RequestTypeEnum.Maintenance}>Bakım</option>
</select>
</div>
<div className="space-y-4"> <div className="space-y-4">
{/* Request List */} {/* Request List */}
<div className="space-y-3 pt-2"> <div className="space-y-3 pt-2">
<h3 className="text-base font-semibold text-gray-900">Talep Listesi</h3> <h3 className="text-base font-semibold text-gray-900">Talep Listesi</h3>
{filteredRequests.map((request) => ( {filteredRequests.map((request) => (
<div <div
key={request.id} key={request.id}
className="bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer" className="bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => handleViewDetails(request)} onClick={() => handleViewDetails(request)}
> >
<div className="flex items-start justify-between mb-2"> <div className="flex items-start justify-between mb-2">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center space-x-2 mb-1.5"> <div className="flex items-center space-x-2 mb-1.5">
<FaFileAlt className="w-5 h-5 text-gray-600" /> <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">
<span {request.requestNumber}
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor( </h4>
request.requestType, <span
)}`} className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
> request.requestType,
{getRequestTypeText(request.requestType)} )}`}
</span> >
<span {getRequestTypeText(request.requestType)}
className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestStatusColor( </span>
request.status, <span
)}`} className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestStatusColor(
> request.status,
{getRequestStatusText(request.status)} )}`}
</span> >
</div> {getRequestStatusText(request.status)}
<p className="text-sm text-gray-600 mb-1">{request.description}</p> </span>
<div className="flex items-center space-x-4 text-sm text-gray-500">
<span className="flex items-center">
<FaUser className="w-4 h-4 mr-1" />
{request.requestedBy}
</span>
<span className="flex items-center">
<FaCalendar className="w-4 h-4 mr-1" />
{request.requestDate.toLocaleDateString('tr-TR')}
</span>
</div>
</div>
<div className="flex space-x-2">
<button
onClick={(e) => {
e.stopPropagation()
handleViewDetails(request)
}}
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Görüntüle"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={(e) => {
e.stopPropagation()
handleEdit(request)
}}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
</div>
</div>
<div className="grid grid-cols-2 gap-3 text-sm mb-2">
<div className="flex items-center justify-between">
<span className="text-gray-500">Departman:</span>
<span className="font-medium">{request.department}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500">Öncelik:</span>
<span className={`font-medium ${getPriorityColor(request.priority)}`}>
{getPriorityText(request.priority)}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500">Tutar:</span>
<span className="font-medium">
{request.totalAmount
? `₺${request.totalAmount.toLocaleString()}`
: 'Belirtilmemiş'}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500">Gerekli Tarih:</span>
<span className="font-medium">
{request.requiredDate.toLocaleDateString('tr-TR')}
</span>
</div>
</div>
{/* Urgency Warning */}
{getDaysUntilRequired(request.requiredDate) <= 3 &&
request.status !== RequestStatusEnum.Completed && (
<div className="flex items-center space-x-2 text-red-600 bg-red-50 px-2.5 py-1.5 rounded-lg mb-2">
<FaExclamationTriangle className="w-4 h-4" />
<span className="text-sm">
{getDaysUntilRequired(request.requiredDate) <= 0
? 'Gerekli tarih geçti!'
: `${getDaysUntilRequired(request.requiredDate)} gün kaldı`}
</span>
</div>
)}
{/* Items Details */}
<div className="mt-3 mb-3">
<h4 className="text-sm font-medium text-gray-900 mb-1.5">Talep Kalemleri</h4>
<div className="space-y-2">
{request.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.specification || 'Malzeme'}
</p>
<p className="text-sm text-gray-600">
Malzeme ID: {item.materialId} | Miktar: {item.quantity} {item.unit}
{item.estimatedPrice && (
<> | Tahmini Fiyat: ₺{item.estimatedPrice.toLocaleString()}</>
)}
</p>
</div>
{item.isUrgent && (
<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">
Acil
</span>
)}
</div>
{item.justification && (
<div className="text-xs text-gray-500">Gerekçe: {item.justification}</div>
)}
</div> </div>
))} <p className="text-sm text-gray-600 mb-1">{request.description}</p>
<div className="flex items-center space-x-4 text-sm text-gray-500">
<span className="flex items-center">
<FaUser className="w-4 h-4 mr-1" />
{request.requestedBy}
</span>
<span className="flex items-center">
<FaCalendar className="w-4 h-4 mr-1" />
{request.requestDate.toLocaleDateString('tr-TR')}
</span>
</div>
</div>
<div className="flex space-x-2">
<button
onClick={(e) => {
e.stopPropagation()
handleViewDetails(request)
}}
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Görüntüle"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={(e) => {
e.stopPropagation()
handleEdit(request)
}}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
</div>
</div> </div>
</div>
{/* Approval Status */} <div className="grid grid-cols-2 gap-3 text-sm mb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <span className="text-gray-500">Departman:</span>
<span className="text-sm text-gray-500">Onaylar:</span> <span className="font-medium">{request.department}</span>
<div className="flex space-x-1"> </div>
{request.approvals.map((approval) => ( <div className="flex items-center justify-between">
<div key={approval.id} className="flex items-center space-x-1"> <span className="text-gray-500">Öncelik:</span>
{getApprovalStatusIcon(approval.status)} <span className={`font-medium ${getPriorityColor(request.priority)}`}>
{getPriorityText(request.priority)}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500">Tutar:</span>
<span className="font-medium">
{request.totalAmount
? `₺${request.totalAmount.toLocaleString()}`
: 'Belirtilmemiş'}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-500">Gerekli Tarih:</span>
<span className="font-medium">
{request.requiredDate.toLocaleDateString('tr-TR')}
</span>
</div>
</div>
{/* Urgency Warning */}
{getDaysUntilRequired(request.requiredDate) <= 3 &&
request.status !== RequestStatusEnum.Completed && (
<div className="flex items-center space-x-2 text-red-600 bg-red-50 px-2.5 py-1.5 rounded-lg mb-2">
<FaExclamationTriangle className="w-4 h-4" />
<span className="text-sm">
{getDaysUntilRequired(request.requiredDate) <= 0
? 'Gerekli tarih geçti!'
: `${getDaysUntilRequired(request.requiredDate)} gün kaldı`}
</span>
</div>
)}
{/* Items Details */}
<div className="mt-3 mb-3">
<h4 className="text-sm font-medium text-gray-900 mb-1.5">Talep Kalemleri</h4>
<div className="space-y-2">
{request.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.specification || 'Malzeme'}
</p>
<p className="text-sm text-gray-600">
Malzeme ID: {item.materialId} | Miktar: {item.quantity} {item.unit}
{item.estimatedPrice && (
<> | Tahmini Fiyat: ₺{item.estimatedPrice.toLocaleString()}</>
)}
</p>
</div>
{item.isUrgent && (
<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">
Acil
</span>
)}
</div>
{item.justification && (
<div className="text-xs text-gray-500">Gerekçe: {item.justification}</div>
)}
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="flex items-center space-x-2">
<span className="text-xs text-gray-400">{request.items.length} kalem</span> {/* Approval Status */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-500">Onaylar:</span>
<div className="flex space-x-1">
{request.approvals.map((approval) => (
<div key={approval.id} className="flex items-center space-x-1">
{getApprovalStatusIcon(approval.status)}
</div>
))}
</div>
</div>
<div className="flex items-center space-x-2">
<span className="text-xs text-gray-400">{request.items.length} kalem</span>
</div>
</div> </div>
</div> </div>
</div> ))}
))}
{filteredRequests.length === 0 && ( {filteredRequests.length === 0 && (
<div className="text-center py-6"> <div className="text-center py-6">
<FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" /> <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">Talep bulunamadı</h3> <h3 className="text-lg font-medium text-gray-900 mb-2">Talep bulunamadı</h3>
<p className="text-gray-500"> <p className="text-gray-500">
Arama kriterlerinizi değiştirin veya yeni bir talep ekleyin. Arama kriterlerinizi değiştirin veya yeni bir talep ekleyin.
</p> </p>
</div> </div>
)} )}
</div>
</div> </div>
</div> </div>
</div> </Container>
) )
} }

711
ui/src/views/supplyChain/components/PurchaseRequisitionList.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from '@tanstack/react-query'
import { import {
FaFileAlt, FaFileAlt,
FaPlus, FaPlus,
@ -14,64 +14,54 @@ import {
FaExclamationTriangle, FaExclamationTriangle,
FaUser, FaUser,
FaCalendar, FaCalendar,
} from "react-icons/fa"; } from 'react-icons/fa'
import classNames from "classnames"; import classNames from 'classnames'
import { RequisitionStatusEnum } from "../../../types/mm"; import { RequisitionStatusEnum } from '../../../types/mm'
import dayjs from "dayjs"; import dayjs from 'dayjs'
import { mockPurchaseRequisitions } from "../../../mocks/mockPurchaseRequisitions"; import { mockPurchaseRequisitions } from '../../../mocks/mockPurchaseRequisitions'
import { PriorityEnum } from "../../../types/common"; import { PriorityEnum } from '../../../types/common'
import { import {
getPriorityColor, getPriorityColor,
getPriorityText, getPriorityText,
getRequisitionStatusColor, getRequisitionStatusColor,
getRequisitionStatusIcon, getRequisitionStatusIcon,
getRequisitionStatusText, getRequisitionStatusText,
} from "../../../utils/erp"; } from '../../../utils/erp'
import { Container } from '@/components/shared'
const PurchaseRequisitionList: React.FC = () => { const PurchaseRequisitionList: React.FC = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [filterStatus, setFilterStatus] = useState("all"); const [filterStatus, setFilterStatus] = useState('all')
const [filterPriority, setFilterPriority] = useState("all"); const [filterPriority, setFilterPriority] = useState('all')
const [showFilters, setShowFilters] = useState(false); const [showFilters, setShowFilters] = useState(false)
const { const {
data: requisitions, data: requisitions,
isLoading, isLoading,
error, error,
} = useQuery({ } = useQuery({
queryKey: [ queryKey: ['purchase-requisitions', searchTerm, filterStatus, filterPriority],
"purchase-requisitions",
searchTerm,
filterStatus,
filterPriority,
],
queryFn: async () => { queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 500)); await new Promise((resolve) => setTimeout(resolve, 500))
return mockPurchaseRequisitions.filter((req) => { return mockPurchaseRequisitions.filter((req) => {
const matchesSearch = const matchesSearch =
req.requisitionNumber req.requisitionNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
.toLowerCase()
.includes(searchTerm.toLowerCase()) ||
req.description?.toLowerCase().includes(searchTerm.toLowerCase()) || req.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
req.requestedBy.toLowerCase().includes(searchTerm.toLowerCase()); req.requestedBy.toLowerCase().includes(searchTerm.toLowerCase())
const matchesStatus = const matchesStatus = filterStatus === 'all' || req.status === filterStatus
filterStatus === "all" || req.status === filterStatus; const matchesPriority = filterPriority === 'all' || req.priority === filterPriority
const matchesPriority = return matchesSearch && matchesStatus && matchesPriority
filterPriority === "all" || req.priority === filterPriority; })
return matchesSearch && matchesStatus && matchesPriority;
});
}, },
}); })
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex items-center justify-center py-12"> <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> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<span className="ml-3 text-gray-600"> <span className="ml-3 text-gray-600">Satınalma talepleri yükleniyor...</span>
Satınalma talepleri yükleniyor...
</span>
</div> </div>
); )
} }
if (error) { if (error) {
@ -79,359 +69,332 @@ const PurchaseRequisitionList: React.FC = () => {
<div className="bg-red-50 border border-red-200 rounded-lg p-4"> <div className="bg-red-50 border border-red-200 rounded-lg p-4">
<div className="flex items-center"> <div className="flex items-center">
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" /> <FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
<span className="text-red-800"> <span className="text-red-800">Satınalma talepleri yüklenirken hata oluştu.</span>
Satınalma talepleri yüklenirken hata oluştu.
</span>
</div> </div>
</div> </div>
); )
} }
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header Actions */} <div className="space-y-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> {/* Header Actions */}
<div className="flex items-center space-x-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="relative"> <div className="flex items-center space-x-4">
<FaSearch <div className="relative">
size={20} <FaSearch
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20}
/> className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
<input />
type="text" <input
placeholder="Talep numarası veya açıklama..." type="text"
value={searchTerm} placeholder="Talep numarası veya açıklama..."
onChange={(e) => setSearchTerm(e.target.value)} value={searchTerm}
className="pl-10 pr-4 py-1.5 w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" onChange={(e) => setSearchTerm(e.target.value)}
/> className="pl-10 pr-4 py-1.5 w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<button
onClick={() => setShowFilters(!showFilters)}
className={classNames(
'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',
)}
>
<FaFilter size={16} className="mr-2" />
Filtreler
</button>
</div> </div>
<button <div className="flex items-center space-x-3">
onClick={() => setShowFilters(!showFilters)} <button
className={classNames( onClick={() => alert('Dışa aktarma özelliği yakında eklenecek')}
"flex items-center px-3 py-1.5 border rounded-lg transition-colors", 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"
showFilters >
? "border-blue-500 bg-blue-50 text-blue-700" <FaDownload size={16} className="mr-2" />
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50" Dışa Aktar
)} </button>
>
<FaFilter size={16} className="mr-2" />
Filtreler
</button>
</div>
<div className="flex items-center space-x-3"> <Link
<button to="/admin/supplychain/requisitions/new"
onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")} className="flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
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" >
> <FaPlus size={16} className="mr-2" />
<FaDownload size={16} className="mr-2" /> Yeni Talep
Dışa Aktar </Link>
</button>
<Link
to="/admin/supplychain/requisitions/new"
className="flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus size={16} className="mr-2" />
Yeni Talep
</Link>
</div>
</div>
{/* Filters Panel */}
{showFilters && (
<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>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">Tümü</option>
<option value={RequisitionStatusEnum.Draft}>Taslak</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>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Öncelik
</label>
<select
value={filterPriority}
onChange={(e) => setFilterPriority(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">Tümü</option>
<option value={PriorityEnum.Low}>Düşük</option>
<option value={PriorityEnum.Normal}>Normal</option>
<option value={PriorityEnum.High}>Yüksek</option>
<option value={PriorityEnum.Urgent}>Acil</option>
</select>
</div>
<div className="flex items-end">
<button
onClick={() => {
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"
>
Filtreleri Temizle
</button>
</div>
</div>
</div>
)}
{/* Statistics Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<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 Talep</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> </div>
</div> </div>
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3"> {/* Filters Panel */}
<div className="flex items-center justify-between"> {showFilters && (
<div> <div className="bg-white border border-gray-200 rounded-lg p-3">
<p className="text-sm font-medium text-gray-600">Onay Bekleyen</p> <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
<p className="text-xl font-bold text-yellow-600"> <div>
{requisitions?.filter( <label className="block text-sm font-medium text-gray-700 mb-1">Durum</label>
(r) => r.status === RequisitionStatusEnum.InApproval <select
).length || 0} value={filterStatus}
</p> onChange={(e) => setFilterStatus(e.target.value)}
</div> className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
<FaClock className="h-8 w-8 text-yellow-600" />
</div>
</div>
<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">Onaylanan</p>
<p className="text-xl font-bold text-green-600">
{requisitions?.filter(
(r) => r.status === RequisitionStatusEnum.Approved
).length || 0}
</p>
</div>
<FaCheckCircle className="h-8 w-8 text-green-600" />
</div>
</div>
<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">Acil Talepler</p>
<p className="text-xl font-bold text-red-600">
{requisitions?.filter((r) => r.priority === PriorityEnum.Urgent)
.length || 0}
</p>
</div>
<FaExclamationTriangle className="h-8 w-8 text-red-600" />
</div>
</div>
</div>
{/* 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>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50">
<tr>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Talep Bilgileri
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Talep Eden
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Öncelik / Durum
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tarihler
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tutar
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kalem Sayısı
</th>
<th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{requisitions?.map((requisition) => (
<tr
key={requisition.id}
className="hover:bg-gray-50 transition-colors"
> >
<td className="px-4 py-3"> <option value="all">Tümü</option>
<div className="flex items-center"> <option value={RequisitionStatusEnum.Draft}>Taslak</option>
<div className="flex-shrink-0 h-10 w-10"> <option value={RequisitionStatusEnum.Submitted}>Gönderildi</option>
<div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center"> <option value={RequisitionStatusEnum.InApproval}>Onayda</option>
<FaFileAlt className="h-5 w-5 text-blue-600" /> <option value={RequisitionStatusEnum.Approved}>Onaylandı</option>
</div> <option value={RequisitionStatusEnum.Rejected}>Reddedildi</option>
</div> </select>
<div className="ml-4"> </div>
<div className="text-sm font-medium text-gray-900">
{requisition.requisitionNumber}
</div>
<div className="text-sm text-gray-500 max-w-xs truncate">
{requisition.description}
</div>
</div>
</div>
</td>
<td className="px-4 py-3"> <div>
<div className="flex items-center text-sm"> <label className="block text-sm font-medium text-gray-700 mb-1">Öncelik</label>
<FaUser size={16} className="text-gray-400 mr-2" /> <select
<div> value={filterPriority}
<div className="font-medium text-gray-900"> onChange={(e) => setFilterPriority(e.target.value)}
{requisition.requestedBy} className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
</div> >
<div className="text-gray-500"> <option value="all">Tümü</option>
{requisition.departmentId} <option value={PriorityEnum.Low}>Düşük</option>
</div> <option value={PriorityEnum.Normal}>Normal</option>
</div> <option value={PriorityEnum.High}>Yüksek</option>
</div> <option value={PriorityEnum.Urgent}>Acil</option>
</td> </select>
</div>
<td className="px-4 py-3"> <div className="flex items-end">
<div className="space-y-2"> <button
<div onClick={() => {
className={classNames( setFilterStatus('all')
"text-sm font-medium", setFilterPriority('all')
getPriorityColor(requisition.priority) 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"
{getPriorityText(requisition.priority)} >
</div> Filtreleri Temizle
<span </button>
className={classNames( </div>
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
getRequisitionStatusColor(requisition.status)
)}
>
{getRequisitionStatusIcon(requisition.status)}
<span className="ml-1">
{getRequisitionStatusText(requisition.status)}
</span>
</span>
</div>
</td>
<td className="px-4 py-3">
<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")}
</div>
<div className="text-sm text-gray-500">
İhtiyaç:{" "}
{dayjs(requisition.requiredDate).format("DD.MM.YYYY")}
</div>
</div>
</td>
<td className="px-4 py-3">
<div className="text-sm font-medium text-gray-900">
₺{requisition.totalAmount.toLocaleString()}
</div>
<div className="text-sm text-gray-500">
{requisition.currency}
</div>
</td>
<td className="px-4 py-3">
<div className="text-sm font-medium text-gray-900">
{requisition.items.length} Kalem
</div>
</td>
<td className="px-4 py-3 text-right">
<div className="flex items-center justify-end space-x-2">
<Link
to={`/admin/supplychain/requisitions/${requisition.id}`}
className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="Detayları Görüntüle"
>
<FaEye size={16} />
</Link>
{requisition.status === RequisitionStatusEnum.Draft && (
<Link
to={`/admin/supplychain/requisitions/edit/${requisition.id}`}
className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
title="Düzenle"
>
<FaEdit size={16} />
</Link>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{(!requisitions || requisitions.length === 0) && (
<div className="text-center py-10">
<FaFileAlt className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
Satınalma talebi bulunamadı
</h3>
<p className="mt-1 text-sm text-gray-500">
Yeni satınalma talebi oluşturarak başlayın.
</p>
<div className="mt-6">
<Link
to="/admin/supplychain/requisitions/new"
className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus size={16} className="mr-2" />
Yeni Talep Oluştur
</Link>
</div> </div>
</div> </div>
)} )}
</div>
</div>
);
};
export default PurchaseRequisitionList; {/* Statistics Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<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 Talep</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>
</div>
<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">Onay Bekleyen</p>
<p className="text-xl font-bold text-yellow-600">
{requisitions?.filter((r) => r.status === RequisitionStatusEnum.InApproval)
.length || 0}
</p>
</div>
<FaClock className="h-8 w-8 text-yellow-600" />
</div>
</div>
<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">Onaylanan</p>
<p className="text-xl font-bold text-green-600">
{requisitions?.filter((r) => r.status === RequisitionStatusEnum.Approved)
.length || 0}
</p>
</div>
<FaCheckCircle className="h-8 w-8 text-green-600" />
</div>
</div>
<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">Acil Talepler</p>
<p className="text-xl font-bold text-red-600">
{requisitions?.filter((r) => r.priority === PriorityEnum.Urgent).length || 0}
</p>
</div>
<FaExclamationTriangle className="h-8 w-8 text-red-600" />
</div>
</div>
</div>
{/* 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>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50">
<tr>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Talep Bilgileri
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Talep Eden
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Öncelik / Durum
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tarihler
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tutar
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kalem Sayısı
</th>
<th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{requisitions?.map((requisition) => (
<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">
<div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center">
<FaFileAlt className="h-5 w-5 text-blue-600" />
</div>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{requisition.requisitionNumber}
</div>
<div className="text-sm text-gray-500 max-w-xs truncate">
{requisition.description}
</div>
</div>
</div>
</td>
<td className="px-4 py-3">
<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>
</div>
</td>
<td className="px-4 py-3">
<div className="space-y-2">
<div
className={classNames(
'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),
)}
>
{getRequisitionStatusIcon(requisition.status)}
<span className="ml-1">
{getRequisitionStatusText(requisition.status)}
</span>
</span>
</div>
</td>
<td className="px-4 py-3">
<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')}
</div>
<div className="text-sm text-gray-500">
İhtiyaç: {dayjs(requisition.requiredDate).format('DD.MM.YYYY')}
</div>
</div>
</td>
<td className="px-4 py-3">
<div className="text-sm font-medium text-gray-900">
₺{requisition.totalAmount.toLocaleString()}
</div>
<div className="text-sm text-gray-500">{requisition.currency}</div>
</td>
<td className="px-4 py-3">
<div className="text-sm font-medium text-gray-900">
{requisition.items.length} Kalem
</div>
</td>
<td className="px-4 py-3 text-right">
<div className="flex items-center justify-end space-x-2">
<Link
to={`/admin/supplychain/requisitions/${requisition.id}`}
className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="Detayları Görüntüle"
>
<FaEye size={16} />
</Link>
{requisition.status === RequisitionStatusEnum.Draft && (
<Link
to={`/admin/supplychain/requisitions/edit/${requisition.id}`}
className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
title="Düzenle"
>
<FaEdit size={16} />
</Link>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{(!requisitions || requisitions.length === 0) && (
<div className="text-center py-10">
<FaFileAlt className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
Satınalma talebi bulunamadı
</h3>
<p className="mt-1 text-sm text-gray-500">
Yeni satınalma talebi oluşturarak başlayın.
</p>
<div className="mt-6">
<Link
to="/admin/supplychain/requisitions/new"
className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus size={16} className="mr-2" />
Yeni Talep Oluştur
</Link>
</div>
</div>
)}
</div>
</div>
</Container>
)
}
export default PurchaseRequisitionList

330
ui/src/views/supplyChain/components/QuotationForm.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from 'react-router-dom'
import { import {
FaArrowLeft, FaArrowLeft,
FaSave, FaSave,
@ -10,153 +10,139 @@ import {
FaPlus, FaPlus,
FaTrash, FaTrash,
FaPaperclip, FaPaperclip,
} from "react-icons/fa"; } from 'react-icons/fa'
import { import {
MmQuotation, MmQuotation,
QuotationStatusEnum, QuotationStatusEnum,
RequestTypeEnum, RequestTypeEnum,
MmQuotationItem, MmQuotationItem,
MmAttachment, MmAttachment,
} from "../../../types/mm"; } from '../../../types/mm'
import { mockMaterials } from "../../../mocks/mockMaterials"; import { mockMaterials } from '../../../mocks/mockMaterials'
import { mockBusinessParties } from "../../../mocks/mockBusinessParties"; import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
import { Container } from '@/components/shared'
const QuotationForm: React.FC = () => { const QuotationForm: React.FC = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>()
const navigate = useNavigate(); const navigate = useNavigate()
const isEdit = id !== undefined && id !== "new"; const isEdit = id !== undefined && id !== 'new'
const isView = window.location.pathname.includes("/view/"); const isView = window.location.pathname.includes('/view/')
const [formData, setFormData] = useState<Partial<MmQuotation>>({ const [formData, setFormData] = useState<Partial<MmQuotation>>({
quotationNumber: isEdit ? `TEK-2024-${id}` : "", quotationNumber: isEdit ? `TEK-2024-${id}` : '',
requestId: "", requestId: '',
requestTitle: "", requestTitle: '',
requestType: RequestTypeEnum.Material, requestType: RequestTypeEnum.Material,
supplierId: "", supplierId: '',
quotationDate: new Date(), quotationDate: new Date(),
validUntil: new Date(), validUntil: new Date(),
status: QuotationStatusEnum.Draft, status: QuotationStatusEnum.Draft,
totalAmount: 0, totalAmount: 0,
currency: "TRY", currency: 'TRY',
paymentTerms: "", paymentTerms: '',
deliveryTerms: "", deliveryTerms: '',
items: [], items: [],
attachments: [], attachments: [],
notes: "", notes: '',
}); })
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent< e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>
) => { ) => {
const { name, value, type } = e.target; const { name, value, type } = e.target
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
[name]: [name]:
type === "number" type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
? parseFloat(value) || 0 }))
: type === "date" }
? new Date(value)
: value,
}));
};
const addQuotationItem = () => { const addQuotationItem = () => {
const newItem: MmQuotationItem = { const newItem: MmQuotationItem = {
id: `item-${Date.now()}`, id: `item-${Date.now()}`,
materialCode: "", materialCode: '',
materialName: "", materialName: '',
description: "", description: '',
quantity: 0, quantity: 0,
unit: "", unit: '',
unitPrice: 0, unitPrice: 0,
totalPrice: 0, totalPrice: 0,
specifications: [], specifications: [],
}; }
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: [...(prev.items || []), newItem], items: [...(prev.items || []), newItem],
})); }))
}; }
const removeQuotationItem = (index: number) => { const removeQuotationItem = (index: number) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: prev.items?.filter((_, i) => i !== index) || [], items: prev.items?.filter((_, i) => i !== index) || [],
})); }))
calculateTotal(); calculateTotal()
}; }
const updateQuotationItem = ( const updateQuotationItem = (
index: number, index: number,
field: keyof MmQuotationItem, field: keyof MmQuotationItem,
value: string | number | string[] | undefined value: string | number | string[] | undefined,
) => { ) => {
setFormData((prev) => { setFormData((prev) => {
const updatedItems = const updatedItems =
prev.items?.map((item, i) => { prev.items?.map((item, i) => {
if (i === index) { if (i === index) {
const updatedItem = { ...item, [field]: value }; const updatedItem = { ...item, [field]: value }
// Auto-calculate total price when quantity or unit price changes // Auto-calculate total price when quantity or unit price changes
if (field === "quantity" || field === "unitPrice") { if (field === 'quantity' || field === 'unitPrice') {
updatedItem.totalPrice = updatedItem.totalPrice = (updatedItem.quantity || 0) * (updatedItem.unitPrice || 0)
(updatedItem.quantity || 0) * (updatedItem.unitPrice || 0);
} }
return updatedItem; return updatedItem
} }
return item; return item
}) || []; }) || []
return { return {
...prev, ...prev,
items: updatedItems, items: updatedItems,
}; }
}); })
// Recalculate total amount // Recalculate total amount
setTimeout(calculateTotal, 0); setTimeout(calculateTotal, 0)
}; }
const calculateTotal = () => { const calculateTotal = () => {
const total = const total = formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) || 0
formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) ||
0;
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
totalAmount: total, totalAmount: total,
})); }))
}; }
const handleSpecificationsChange = (index: number, value: string) => { const handleSpecificationsChange = (index: number, value: string) => {
const specifications = value const specifications = value.split('\n').filter((spec) => spec.trim() !== '')
.split("\n") updateQuotationItem(index, 'specifications', specifications)
.filter((spec) => spec.trim() !== ""); }
updateQuotationItem(index, "specifications", specifications);
};
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
// TODO: Implement save logic // TODO: Implement save logic
console.log("Saving quotation:", formData); console.log('Saving quotation:', formData)
navigate("/admin/supplychain/quotations"); navigate('/admin/supplychain/quotations')
}; }
const handleCancel = () => { const handleCancel = () => {
navigate("/admin/supplychain/quotations"); navigate('/admin/supplychain/quotations')
}; }
const isReadOnly = isView; const isReadOnly = isView
const pageTitle = isEdit const pageTitle = isEdit ? 'Teklifi Düzenle' : isView ? 'Teklif Detayları' : 'Yeni Teklif'
? "Teklifi Düzenle"
: isView
? "Teklif Detayları"
: "Yeni Teklif";
return ( return (
<div className="min-h-screen bg-gray-50 py-4"> <Container>
<div className="mx-auto"> <div className="space-y-2">
{/* Header */} {/* Header */}
<div className="bg-white rounded-lg shadow-md p-2 mb-2"> <div className="bg-white rounded-lg shadow-md p-2 mb-2">
<div className="flex items-center justify-between"> <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" 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" /> <FaTimes className="mr-2" />
{isView ? "Kapat" : "İptal"} {isView ? 'Kapat' : 'İptal'}
</button> </button>
{!isView && ( {!isView && (
<button <button
@ -209,7 +195,7 @@ const QuotationForm: React.FC = () => {
<input <input
type="text" type="text"
name="quotationNumber" name="quotationNumber"
value={formData.quotationNumber || ""} value={formData.quotationNumber || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly || isEdit} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Talep ID</label>
Talep ID
</label>
<input <input
type="text" type="text"
name="requestId" name="requestId"
value={formData.requestId || ""} value={formData.requestId || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Talep Başlığı</label>
Talep Başlığı
</label>
<input <input
type="text" type="text"
name="requestTitle" name="requestTitle"
value={formData.requestTitle || ""} value={formData.requestTitle || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Talep Tipi</label>
Talep Tipi
</label>
<select <select
name="requestType" name="requestType"
value={formData.requestType || RequestTypeEnum.Material} value={formData.requestType || RequestTypeEnum.Material}
@ -259,20 +239,16 @@ const QuotationForm: React.FC = () => {
> >
<option value={RequestTypeEnum.Material}>Malzeme</option> <option value={RequestTypeEnum.Material}>Malzeme</option>
<option value={RequestTypeEnum.Service}>Hizmet</option> <option value={RequestTypeEnum.Service}>Hizmet</option>
<option value={RequestTypeEnum.WorkCenter}> <option value={RequestTypeEnum.WorkCenter}>İş Merkezi</option>
İş Merkezi
</option>
<option value={RequestTypeEnum.Maintenance}>Bakım</option> <option value={RequestTypeEnum.Maintenance}>Bakım</option>
</select> </select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Tedarikçi</label>
Tedarikçi
</label>
<select <select
name="supplierId" name="supplierId"
value={formData.supplierId || ""} value={formData.supplierId || ''}
onChange={handleInputChange} onChange={handleInputChange}
disabled={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Tedarikçi Adı</label>
Tedarikçi Adı
</label>
<input <input
type="text" type="text"
name="supplierName" name="supplierName"
value={formData.supplier?.name || ""} value={formData.supplier?.name || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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" name="quotationDate"
value={ value={
formData.quotationDate formData.quotationDate
? new Date(formData.quotationDate) ? new Date(formData.quotationDate).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -333,10 +305,8 @@ const QuotationForm: React.FC = () => {
name="validUntil" name="validUntil"
value={ value={
formData.validUntil formData.validUntil
? new Date(formData.validUntil) ? new Date(formData.validUntil).toISOString().split('T')[0]
.toISOString() : ''
.split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -345,12 +315,10 @@ const QuotationForm: React.FC = () => {
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Para Birimi</label>
Para Birimi
</label>
<select <select
name="currency" name="currency"
value={formData.currency || "TRY"} value={formData.currency || 'TRY'}
onChange={handleInputChange} onChange={handleInputChange}
disabled={isReadOnly} 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" 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 <input
type="text" type="text"
name="paymentTerms" name="paymentTerms"
value={formData.paymentTerms || ""} value={formData.paymentTerms || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
placeholder="ör: 30 gün vadeli" placeholder="ör: 30 gün vadeli"
@ -383,7 +351,7 @@ const QuotationForm: React.FC = () => {
<input <input
type="text" type="text"
name="deliveryTerms" name="deliveryTerms"
value={formData.deliveryTerms || ""} value={formData.deliveryTerms || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
placeholder="ör: 15 gün içinde teslim" placeholder="ör: 15 gün içinde teslim"
@ -398,7 +366,7 @@ const QuotationForm: React.FC = () => {
<input <input
type="number" type="number"
name="deliveryTime" name="deliveryTime"
value={formData.deliveryTime || ""} value={formData.deliveryTime || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
min="0" min="0"
@ -408,12 +376,10 @@ const QuotationForm: React.FC = () => {
</div> </div>
<div className="mt-4"> <div className="mt-4">
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Notlar</label>
Notlar
</label>
<textarea <textarea
name="notes" name="notes"
value={formData.notes || ""} value={formData.notes || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={2} rows={2}
@ -425,9 +391,7 @@ const QuotationForm: React.FC = () => {
{/* Teklif Kalemleri */} {/* Teklif Kalemleri */}
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-base font-medium text-gray-900"> <h3 className="text-base font-medium text-gray-900">Teklif Kalemleri</h3>
Teklif Kalemleri
</h3>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="button" type="button"
@ -442,14 +406,9 @@ const QuotationForm: React.FC = () => {
<div className="space-y-3"> <div className="space-y-3">
{formData.items?.map((item, index) => ( {formData.items?.map((item, index) => (
<div <div key={item.id} className="border rounded-lg p-3 bg-gray-50">
key={item.id}
className="border rounded-lg p-3 bg-gray-50"
>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
Kalem {index + 1}
</span>
{!isReadOnly && ( {!isReadOnly && (
<button <button
type="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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Malzeme</label>
Malzeme
</label>
<select <select
value={item.materialCode} value={item.materialCode}
onChange={(e) => onChange={(e) =>
updateQuotationItem( updateQuotationItem(index, 'materialCode', e.target.value)
index,
"materialCode",
e.target.value
)
} }
disabled={isReadOnly} 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" 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" type="text"
value={item.materialName} value={item.materialName}
onChange={(e) => onChange={(e) =>
updateQuotationItem( updateQuotationItem(index, 'materialName', e.target.value)
index,
"materialName",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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" type="text"
value={item.description} value={item.description}
onChange={(e) => onChange={(e) =>
updateQuotationItem( updateQuotationItem(index, 'description', e.target.value)
index,
"description",
e.target.value
)
} }
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Miktar</label>
Miktar
</label>
<input <input
type="number" type="number"
value={item.quantity} value={item.quantity}
onChange={(e) => onChange={(e) =>
updateQuotationItem( updateQuotationItem(
index, index,
"quantity", 'quantity',
parseFloat(e.target.value) || 0 parseFloat(e.target.value) || 0,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -547,15 +490,11 @@ const QuotationForm: React.FC = () => {
</div> </div>
<div> <div>
<label className="block text-xs font-medium text-gray-600"> <label className="block text-xs font-medium text-gray-600">Birim</label>
Birim
</label>
<input <input
type="text" type="text"
value={item.unit} value={item.unit}
onChange={(e) => onChange={(e) => updateQuotationItem(index, 'unit', e.target.value)}
updateQuotationItem(index, "unit", e.target.value)
}
readOnly={isReadOnly} 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" 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) => onChange={(e) =>
updateQuotationItem( updateQuotationItem(
index, index,
"unitPrice", 'unitPrice',
parseFloat(e.target.value) || 0 parseFloat(e.target.value) || 0,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -600,12 +539,12 @@ const QuotationForm: React.FC = () => {
</label> </label>
<input <input
type="number" type="number"
value={item.leadTime || ""} value={item.leadTime || ''}
onChange={(e) => onChange={(e) =>
updateQuotationItem( updateQuotationItem(
index, index,
"leadTime", 'leadTime',
parseInt(e.target.value) || undefined parseInt(e.target.value) || undefined,
) )
} }
readOnly={isReadOnly} readOnly={isReadOnly}
@ -619,10 +558,8 @@ const QuotationForm: React.FC = () => {
Spesifikasyonlar (her satıra bir spesifikasyon) Spesifikasyonlar (her satıra bir spesifikasyon)
</label> </label>
<textarea <textarea
value={item.specifications?.join("\n") || ""} value={item.specifications?.join('\n') || ''}
onChange={(e) => onChange={(e) => handleSpecificationsChange(index, e.target.value)}
handleSpecificationsChange(index, e.target.value)
}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={1} 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" 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"> <div className="space-y-4">
{/* Durum ve Tutar */} {/* Durum ve Tutar */}
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<h3 className="text-base font-medium text-gray-900 mb-3"> <h3 className="text-base font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
Durum Bilgileri
</h3>
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Durum</label>
Durum
</label>
<select <select
name="status" name="status"
value={formData.status || QuotationStatusEnum.Draft} 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" 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.Draft}>Taslak</option>
<option value={QuotationStatusEnum.Pending}> <option value={QuotationStatusEnum.Pending}>Beklemede</option>
Beklemede <option value={QuotationStatusEnum.UnderReview}>İncelemede</option>
</option> <option value={QuotationStatusEnum.Submitted}>Gönderildi</option>
<option value={QuotationStatusEnum.UnderReview}> <option value={QuotationStatusEnum.Approved}>Onaylandı</option>
İncelemede <option value={QuotationStatusEnum.Rejected}>Reddedildi</option>
</option> <option value={QuotationStatusEnum.Expired}>Süresi Doldu</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> </select>
</div> </div>
@ -689,8 +610,7 @@ const QuotationForm: React.FC = () => {
Toplam Tutar Toplam Tutar
</label> </label>
<div className="mt-1 text-base font-semibold text-green-600"> <div className="mt-1 text-base font-semibold text-green-600">
{formData.totalAmount?.toLocaleString()}{" "} {formData.totalAmount?.toLocaleString()} {formData.currency}
{formData.currency}
</div> </div>
</div> </div>
</div> </div>
@ -699,15 +619,11 @@ const QuotationForm: React.FC = () => {
{/* Değerlendirme (sadece görüntüleme) */} {/* Değerlendirme (sadece görüntüleme) */}
{isView && formData.evaluationScore && ( {isView && formData.evaluationScore && (
<div className="bg-white rounded-lg shadow-md p-4"> <div className="bg-white rounded-lg shadow-md p-4">
<h3 className="text-base font-medium text-gray-900 mb-3"> <h3 className="text-base font-medium text-gray-900 mb-3">Değerlendirme</h3>
Değerlendirme
</h3>
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<div className="text-sm font-medium text-gray-700"> <div className="text-sm font-medium text-gray-700">Değerlendirme Puanı</div>
Değerlendirme Puanı
</div>
<div className="text-base font-semibold text-blue-600"> <div className="text-base font-semibold text-blue-600">
{formData.evaluationScore}/100 {formData.evaluationScore}/100
</div> </div>
@ -715,12 +631,8 @@ const QuotationForm: React.FC = () => {
{formData.evaluatedBy && ( {formData.evaluatedBy && (
<div> <div>
<div className="text-sm font-medium text-gray-700"> <div className="text-sm font-medium text-gray-700">Değerlendiren</div>
Değerlendiren <div className="text-sm text-gray-600">{formData.evaluatedBy}</div>
</div>
<div className="text-sm text-gray-600">
{formData.evaluatedBy}
</div>
</div> </div>
)} )}
@ -773,8 +685,8 @@ const QuotationForm: React.FC = () => {
</div> </div>
</form> </form>
</div> </div>
</div> </Container>
); )
}; }
export default QuotationForm; export default QuotationForm

766
ui/src/views/supplyChain/components/QuotationManagement.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom'
import { import {
FaPlus, FaPlus,
FaSearch, FaSearch,
@ -16,418 +16,386 @@ import {
FaClock, FaClock,
FaCheckCircle, FaCheckCircle,
FaTimes, FaTimes,
} from "react-icons/fa"; } from 'react-icons/fa'
import { MmQuotation, QuotationStatusEnum } from "../../../types/mm"; import { MmQuotation, QuotationStatusEnum } from '../../../types/mm'
import { mockQuotations } from "../../../mocks/mockQuotations"; import { mockQuotations } from '../../../mocks/mockQuotations'
import { import {
getQuotationStatusColor, getQuotationStatusColor,
getQuotationStatusIcon, getQuotationStatusIcon,
getQuotationStatusText, getQuotationStatusText,
getRequestTypeText, getRequestTypeText,
} from "../../../utils/erp"; } from '../../../utils/erp'
import { Container } from '@/components/shared'
const QuotationManagement: React.FC = () => { const QuotationManagement: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate()
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [statusFilter, setStatusFilter] = useState<QuotationStatusEnum | "all">( const [statusFilter, setStatusFilter] = useState<QuotationStatusEnum | 'all'>('all')
"all" const [showModal, setShowModal] = useState(false)
); const [modalType, setModalType] = useState<'bulk' | 'comparison'>('bulk')
const [showModal, setShowModal] = useState(false); const [selectedQuotations, setSelectedQuotations] = useState<string[]>([])
const [modalType, setModalType] = useState<"bulk" | "comparison">("bulk");
const [selectedQuotations, setSelectedQuotations] = useState<string[]>([]);
// Mock data - replace with actual API calls // Mock data - replace with actual API calls
const [quotations] = useState<MmQuotation[]>(mockQuotations); const [quotations] = useState<MmQuotation[]>(mockQuotations)
const filteredQuotations = quotations.filter((quotation) => { const filteredQuotations = quotations.filter((quotation) => {
const matchesSearch = const matchesSearch =
quotation.quotationNumber quotation.quotationNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
.toLowerCase() quotation.supplier?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
.includes(searchTerm.toLowerCase()) || quotation.requestTitle.toLowerCase().includes(searchTerm.toLowerCase())
quotation.supplier?.name const matchesStatus = statusFilter === 'all' || quotation.status === statusFilter
.toLowerCase() return matchesSearch && matchesStatus
.includes(searchTerm.toLowerCase()) || })
quotation.requestTitle.toLowerCase().includes(searchTerm.toLowerCase());
const matchesStatus =
statusFilter === "all" || quotation.status === statusFilter;
return matchesSearch && matchesStatus;
});
const isExpiringSoon = (date: Date) => { const isExpiringSoon = (date: Date) => {
const today = new Date(); const today = new Date()
const diffTime = date.getTime() - today.getTime(); const diffTime = date.getTime() - today.getTime()
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
return diffDays <= 7 && diffDays > 0; return diffDays <= 7 && diffDays > 0
}; }
const isExpired = (date: Date) => { const isExpired = (date: Date) => {
const today = new Date(); const today = new Date()
return date < today; return date < today
}; }
const handleAddQuotation = () => { const handleAddQuotation = () => {
navigate("/admin/supplychain/quotations/new"); navigate('/admin/supplychain/quotations/new')
}; }
const handleBulkQuotation = () => { const handleBulkQuotation = () => {
if (selectedQuotations.length === 0) { if (selectedQuotations.length === 0) {
alert("Toplu işlem için en az 1 teklif seçmelisiniz."); alert('Toplu işlem için en az 1 teklif seçmelisiniz.')
return; return
} }
setModalType("bulk"); setModalType('bulk')
setShowModal(true); setShowModal(true)
}; }
const handleCompareQuotations = () => { const handleCompareQuotations = () => {
if (selectedQuotations.length < 2) { if (selectedQuotations.length < 2) {
alert("Karşılaştırma için en az 2 teklif seçmelisiniz."); alert('Karşılaştırma için en az 2 teklif seçmelisiniz.')
return; return
} }
setModalType("comparison"); setModalType('comparison')
setShowModal(true); setShowModal(true)
}; }
const handleEdit = (quotation: MmQuotation) => { const handleEdit = (quotation: MmQuotation) => {
navigate(`/admin/supplychain/quotations/edit/${quotation.id}`); navigate(`/admin/supplychain/quotations/edit/${quotation.id}`)
}; }
const handleView = (quotation: MmQuotation) => { const handleView = (quotation: MmQuotation) => {
navigate(`/admin/supplychain/quotations/view/${quotation.id}`); navigate(`/admin/supplychain/quotations/view/${quotation.id}`)
}; }
const handleSelectQuotation = (quotationId: string) => { const handleSelectQuotation = (quotationId: string) => {
setSelectedQuotations((prev) => setSelectedQuotations((prev) =>
prev.includes(quotationId) prev.includes(quotationId) ? prev.filter((id) => id !== quotationId) : [...prev, quotationId],
? prev.filter((id) => id !== quotationId) )
: [...prev, quotationId] }
);
};
const getTotalItems = (quotation: MmQuotation) => { 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 getAverageLeadTime = (quotation: MmQuotation) => {
const totalLeadTime = quotation.items.reduce( const totalLeadTime = quotation.items.reduce((sum, item) => sum + (item.leadTime || 0), 0)
(sum, item) => sum + (item.leadTime || 0), return Math.round(totalLeadTime / quotation.items.length)
0 }
);
return Math.round(totalLeadTime / quotation.items.length);
};
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex items-center justify-between"> {/* Header */}
<div> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">Teklif Yönetimi</h2> <div>
<p className="text-gray-600"> <h2 className="text-2xl font-bold text-gray-900">Teklif Yönetimi</h2>
Tedarikçi tekliflerini yönetin ve karşılaştırın <p className="text-gray-600">Tedarikçi tekliflerini yönetin ve karşılaştırın</p>
</p> </div>
<div className="flex space-x-2">
<button
onClick={handleBulkQuotation}
className="bg-purple-600 text-white text-sm px-3 py-1.5 rounded-lg hover:bg-purple-700 flex items-center space-x-1.5"
>
<FaUsers className="w-4 h-4" />
<span>Toplu Teklif</span>
</button>
<button
onClick={handleCompareQuotations}
className="bg-green-600 text-white text-sm px-3 py-1.5 rounded-lg hover:bg-green-700 flex items-center space-x-1.5"
>
<FaArrowUp className="w-4 h-4" />
<span>Karşılaştır</span>
</button>
<button
onClick={handleAddQuotation}
className="bg-blue-600 text-white text-sm px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
>
<FaPlus className="w-4 h-4" />
<span>Yeni Teklif</span>
</button>
</div>
</div> </div>
{/* Filters */}
<div className="flex space-x-2"> <div className="flex space-x-2">
<button <div className="flex-1 relative">
onClick={handleBulkQuotation} <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
className="bg-purple-600 text-white text-sm px-3 py-1.5 rounded-lg hover:bg-purple-700 flex items-center space-x-1.5" <input
> type="text"
<FaUsers className="w-4 h-4" /> placeholder="Teklif ara..."
<span>Toplu Teklif</span> value={searchTerm}
</button> onChange={(e) => setSearchTerm(e.target.value)}
<button className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
onClick={handleCompareQuotations} />
className="bg-green-600 text-white text-sm px-3 py-1.5 rounded-lg hover:bg-green-700 flex items-center space-x-1.5" </div>
> <div className="relative">
<FaArrowUp className="w-4 h-4" /> <FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<span>Karşılaştır</span> <select
</button> value={statusFilter}
<button onChange={(e) => setStatusFilter(e.target.value as QuotationStatusEnum | 'all')}
onClick={handleAddQuotation} 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"
className="bg-blue-600 text-white text-sm px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-1.5" >
> <option value="all">Tüm Durumlar</option>
<FaPlus className="w-4 h-4" /> <option value={QuotationStatusEnum.Draft}>Taslak</option>
<span>Yeni Teklif</span> <option value={QuotationStatusEnum.Pending}>Beklemede</option>
</button> <option value={QuotationStatusEnum.UnderReview}>İnceleme</option>
<option value={QuotationStatusEnum.Submitted}>Sunuldu</option>
<option value={QuotationStatusEnum.Approved}>Onaylandı</option>
<option value={QuotationStatusEnum.Rejected}>Reddedildi</option>
<option value={QuotationStatusEnum.Expired}>Süresi Doldu</option>
</select>
</div>
</div> </div>
</div>
{/* Filters */} {/* Quotation Cards */}
<div className="flex space-x-2"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="flex-1 relative"> {filteredQuotations.map((quotation) => (
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> <div
<input key={quotation.id}
type="text" className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow"
placeholder="Teklif ara..." >
value={searchTerm} <div className="flex items-start justify-between mb-3">
onChange={(e) => setSearchTerm(e.target.value)} <div className="flex-1">
className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" <div className="flex items-center space-x-1.5 mb-1.5">
/> <input
</div> type="checkbox"
<div className="relative"> checked={selectedQuotations.includes(quotation.id)}
<FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> onChange={() => handleSelectQuotation(quotation.id)}
<select className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
value={statusFilter} />
onChange={(e) => <h3 className="text-base font-semibold text-gray-900">
setStatusFilter(e.target.value as QuotationStatusEnum | "all") {quotation.quotationNumber}
} </h3>
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" <span
> className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getQuotationStatusColor(
<option value="all">Tüm Durumlar</option> quotation.status,
<option value={QuotationStatusEnum.Draft}>Taslak</option> )}`}
<option value={QuotationStatusEnum.Pending}>Beklemede</option> >
<option value={QuotationStatusEnum.UnderReview}>İnceleme</option> {getQuotationStatusIcon(quotation.status)}
<option value={QuotationStatusEnum.Submitted}>Sunuldu</option> <span>{getQuotationStatusText(quotation.status)}</span>
<option value={QuotationStatusEnum.Approved}>Onaylandı</option> </span>
<option value={QuotationStatusEnum.Rejected}>Reddedildi</option> </div>
<option value={QuotationStatusEnum.Expired}>Süresi Doldu</option> <p className="text-gray-600">{quotation.requestTitle}</p>
</select> <p className="text-sm text-gray-500">
</div> {quotation.supplier?.name} • {getRequestTypeText(quotation.requestType)}
</div> </p>
</div>
{/* Quotation Cards */} <div className="flex space-x-1">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> <button
{filteredQuotations.map((quotation) => ( onClick={() => handleView(quotation)}
<div className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
key={quotation.id} title="Görüntüle"
className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<div className="flex items-center space-x-1.5 mb-1.5">
<input
type="checkbox"
checked={selectedQuotations.includes(quotation.id)}
onChange={() => handleSelectQuotation(quotation.id)}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<h3 className="text-base font-semibold text-gray-900">
{quotation.quotationNumber}
</h3>
<span
className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getQuotationStatusColor(
quotation.status
)}`}
> >
{getQuotationStatusIcon(quotation.status)} <FaEye className="w-4 h-4" />
<span>{getQuotationStatusText(quotation.status)}</span> </button>
</span> <button
onClick={() => handleEdit(quotation)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors">
<FaDownload className="w-4 h-4" />
</button>
<button className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
<FaTrash className="w-4 h-4" />
</button>
</div> </div>
<p className="text-gray-600">{quotation.requestTitle}</p>
<p className="text-sm text-gray-500">
{quotation.supplier?.name} •{" "}
{getRequestTypeText(quotation.requestType)}
</p>
</div> </div>
<div className="flex space-x-1">
<button
onClick={() => handleView(quotation)}
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Görüntüle"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={() => handleEdit(quotation)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors">
<FaDownload className="w-4 h-4" />
</button>
<button className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
<FaTrash className="w-4 h-4" />
</button>
</div>
</div>
<div className="grid grid-cols-2 gap-3 mb-3"> <div className="grid grid-cols-2 gap-3 mb-3">
<div> <div>
<span className="text-sm text-gray-500">Toplam Tutar</span> <span className="text-sm text-gray-500">Toplam Tutar</span>
<p className="font-semibold text-base text-gray-900"> <p className="font-semibold text-base text-gray-900">
₺{quotation.totalAmount.toLocaleString()} ₺{quotation.totalAmount.toLocaleString()}
</p> </p>
</div> </div>
<div> <div>
<span className="text-sm text-gray-500">Geçerlilik</span> <span className="text-sm text-gray-500">Geçerlilik</span>
<p <p
className={`font-medium ${ className={`font-medium ${
isExpired(quotation.validUntil) isExpired(quotation.validUntil)
? "text-red-600" ? 'text-red-600'
: isExpiringSoon(quotation.validUntil) : isExpiringSoon(quotation.validUntil)
? "text-orange-600" ? 'text-orange-600'
: "text-gray-900" : 'text-gray-900'
}`} }`}
> >
{quotation.validUntil.toLocaleDateString("tr-TR")} {quotation.validUntil.toLocaleDateString('tr-TR')}
{isExpiringSoon(quotation.validUntil) && {isExpiringSoon(quotation.validUntil) && !isExpired(quotation.validUntil) && (
!isExpired(quotation.validUntil) && ( <span className="text-xs text-orange-600 ml-1">(Yakında)</span>
<span className="text-xs text-orange-600 ml-1">
(Yakında)
</span>
)} )}
{isExpired(quotation.validUntil) && ( {isExpired(quotation.validUntil) && (
<span className="text-xs text-red-600 ml-1">(Doldu)</span> <span className="text-xs text-red-600 ml-1">(Doldu)</span>
)} )}
</p> </p>
</div>
</div> </div>
</div>
<div className="grid grid-cols-3 gap-3 mb-3 text-sm"> <div className="grid grid-cols-3 gap-3 mb-3 text-sm">
<div className="text-center"> <div className="text-center">
<div className="flex items-center justify-center mb-1"> <div className="flex items-center justify-center mb-1">
<FaBox className="w-4 h-4 text-gray-400 mr-1" /> <FaBox className="w-4 h-4 text-gray-400 mr-1" />
<span className="font-medium">{quotation.items.length}</span> <span className="font-medium">{quotation.items.length}</span>
</div>
<span className="text-gray-500">Kalem</span>
</div> </div>
<span className="text-gray-500">Kalem</span> <div className="text-center">
</div> <div className="flex items-center justify-center mb-1">
<div className="text-center"> <FaArrowUp className="w-4 h-4 text-gray-400 mr-1" />
<div className="flex items-center justify-center mb-1"> <span className="font-medium">{getTotalItems(quotation)}</span>
<FaArrowUp className="w-4 h-4 text-gray-400 mr-1" /> </div>
<span className="font-medium"> <span className="text-gray-500">Adet</span>
{getTotalItems(quotation)}
</span>
</div> </div>
<span className="text-gray-500">Adet</span> <div className="text-center">
</div> <div className="flex items-center justify-center mb-1">
<div className="text-center"> <FaClock className="w-4 h-4 text-gray-400 mr-1" />
<div className="flex items-center justify-center mb-1"> <span className="font-medium">{getAverageLeadTime(quotation)}</span>
<FaClock className="w-4 h-4 text-gray-400 mr-1" /> </div>
<span className="font-medium"> <span className="text-gray-500">Gün</span>
{getAverageLeadTime(quotation)}
</span>
</div> </div>
<span className="text-gray-500">Gün</span>
</div> </div>
</div>
{/* Items Details */} {/* Items Details */}
<div className="mt-3 mb-3"> <div className="mt-3 mb-3">
<h4 className="text-sm font-medium text-gray-900 mb-1.5"> <h4 className="text-sm font-medium text-gray-900 mb-1.5">Teklif Kalemleri</h4>
Teklif Kalemleri <div className="space-y-1.5">
</h4> {quotation.items.map((item) => (
<div className="space-y-1.5"> <div key={item.id} className="bg-gray-50 p-2 rounded-lg">
{quotation.items.map((item) => ( <div className="flex items-center justify-between mb-1.5">
<div key={item.id} className="bg-gray-50 p-2 rounded-lg"> <div className="flex-1">
<div className="flex items-center justify-between mb-1.5"> <p className="font-medium text-gray-900">{item.materialName}</p>
<div className="flex-1"> <p className="text-sm text-gray-600">
<p className="font-medium text-gray-900"> Malzeme Kodu: {item.materialCode} | Miktar: {item.quantity} {item.unit}{' '}
{item.materialName} | Birim Fiyat: ₺{item.unitPrice.toLocaleString()}
</p> </p>
<p className="text-sm text-gray-600"> </div>
Malzeme Kodu: {item.materialCode} | Miktar:{" "} <div className="text-right">
{item.quantity} {item.unit} | Birim Fiyat: ₺ <p className="font-semibold text-gray-900">
{item.unitPrice.toLocaleString()} ₺{item.totalPrice.toLocaleString()}
</p> </p>
</div> <div className="text-xs text-gray-500">Teslimat: {item.leadTime} gün</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>
</div> </div>
{item.description && (
<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(', ')}
</div>
)}
</div> </div>
{item.description && ( ))}
<div className="text-xs text-gray-500 mb-1"> </div>
{item.description} </div>
</div>
)} <div className="border-t border-gray-100 pt-3">
{item.specifications && item.specifications.length > 0 && ( <div className="flex items-center justify-between text-sm">
<div className="text-xs text-gray-500"> <div className="flex items-center space-x-2">
Özellikler: {item.specifications.join(", ")} <FaCalendar className="w-4 h-4 text-gray-400" />
</div> <span className="text-gray-600">
)} {quotation.quotationDate.toLocaleDateString('tr-TR')}
</span>
</div> </div>
))} <div className="flex items-center space-x-2">
<FaUsers className="w-4 h-4 text-gray-400" />
<span className="text-gray-600">{quotation.submittedBy}</span>
</div>
</div>
{quotation.notes && (
<div className="mt-2 p-2 bg-gray-50 rounded text-sm text-gray-600">
<strong>Not:</strong> {quotation.notes}
</div>
)}
{quotation.evaluationNotes && (
<div className="mt-2 p-2 bg-blue-50 rounded text-sm text-gray-600">
<strong>Değerlendirme:</strong> {quotation.evaluationNotes}
</div>
)}
</div> </div>
</div> </div>
))}
</div>
<div className="border-t border-gray-100 pt-3"> {filteredQuotations.length === 0 && (
<div className="flex items-center justify-between text-sm"> <div className="text-center py-8">
<div className="flex items-center space-x-2"> <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
<FaCalendar className="w-4 h-4 text-gray-400" /> <h3 className="text-lg font-medium text-gray-900 mb-2">Teklif bulunamadı</h3>
<span className="text-gray-600"> <p className="text-gray-500 mb-3">
{quotation.quotationDate.toLocaleDateString("tr-TR")} Arama kriterlerinizi değiştirin veya yeni bir teklif ekleyin.
</span> </p>
</div> <button
<div className="flex items-center space-x-2"> onClick={handleAddQuotation}
<FaUsers className="w-4 h-4 text-gray-400" /> className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700"
<span className="text-gray-600">{quotation.submittedBy}</span> >
</div> Yeni Teklif Ekle
</button>
</div>
)}
{/* Bulk Actions */}
{selectedQuotations.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">
{selectedQuotations.length} teklif seçildi
</span>
<div className="flex space-x-2">
<button
onClick={handleCompareQuotations}
className="bg-green-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-green-700"
>
Karşılaştır
</button>
<button className="bg-blue-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-blue-700">
Toplu İşlem
</button>
<button
onClick={() => setSelectedQuotations([])}
className="bg-gray-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-gray-700"
>
Temizle
</button>
</div> </div>
{quotation.notes && (
<div className="mt-2 p-2 bg-gray-50 rounded text-sm text-gray-600">
<strong>Not:</strong> {quotation.notes}
</div>
)}
{quotation.evaluationNotes && (
<div className="mt-2 p-2 bg-blue-50 rounded text-sm text-gray-600">
<strong>Değerlendirme:</strong> {quotation.evaluationNotes}
</div>
)}
</div> </div>
</div> </div>
))} )}
</div> </div>
{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>
<p className="text-gray-500 mb-3">
Arama kriterlerinizi değiştirin veya yeni bir teklif ekleyin.
</p>
<button
onClick={handleAddQuotation}
className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700"
>
Yeni Teklif Ekle
</button>
</div>
)}
{/* Bulk Actions */}
{selectedQuotations.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">
{selectedQuotations.length} teklif seçildi
</span>
<div className="flex space-x-2">
<button
onClick={handleCompareQuotations}
className="bg-green-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-green-700"
>
Karşılaştır
</button>
<button className="bg-blue-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-blue-700">
Toplu İşlem
</button>
<button
onClick={() => setSelectedQuotations([])}
className="bg-gray-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-gray-700"
>
Temizle
</button>
</div>
</div>
</div>
)}
{/* Modal for Bulk/Comparison operations */} {/* Modal for Bulk/Comparison operations */}
{showModal && ( {showModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-4 w-full max-w-6xl mx-4 max-h-[90vh] overflow-y-auto"> <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"> <div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold"> <h3 className="text-lg font-semibold">
{modalType === "bulk" && "Toplu Teklif Talebi"} {modalType === 'bulk' && 'Toplu Teklif Talebi'}
{modalType === "comparison" && "Teklif Karşılaştırması"} {modalType === 'comparison' && 'Teklif Karşılaştırması'}
</h3> </h3>
<button <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
@ -437,13 +405,11 @@ const QuotationManagement: React.FC = () => {
</button> </button>
</div> </div>
{modalType === "comparison" && ( {modalType === 'comparison' && (
<div className="space-y-4"> <div className="space-y-4">
{/* Comparison Summary */} {/* Comparison Summary */}
<div className="bg-gray-50 p-3 rounded-lg"> <div className="bg-gray-50 p-3 rounded-lg">
<h4 className="font-medium text-gray-900 mb-2"> <h4 className="font-medium text-gray-900 mb-2">Karşılaştırma Özeti</h4>
Karşılaştırma Özeti
</h4>
<div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm"> <div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm">
<div> <div>
<span className="text-gray-500">Toplam Teklif:</span> <span className="text-gray-500">Toplam Teklif:</span>
@ -456,7 +422,7 @@ const QuotationManagement: React.FC = () => {
{Math.min( {Math.min(
...quotations ...quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((q) => q.totalAmount) .map((q) => q.totalAmount),
).toLocaleString()} ).toLocaleString()}
</p> </p>
</div> </div>
@ -467,7 +433,7 @@ const QuotationManagement: React.FC = () => {
{Math.max( {Math.max(
...quotations ...quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((q) => q.totalAmount) .map((q) => q.totalAmount),
).toLocaleString()} ).toLocaleString()}
</p> </p>
</div> </div>
@ -478,21 +444,17 @@ const QuotationManagement: React.FC = () => {
((Math.max( ((Math.max(
...quotations ...quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((q) => q.totalAmount) .map((q) => q.totalAmount),
) - ) -
Math.min( Math.min(
...quotations ...quotations
.filter((q) => .filter((q) => selectedQuotations.includes(q.id))
selectedQuotations.includes(q.id) .map((q) => q.totalAmount),
)
.map((q) => q.totalAmount)
)) / )) /
Math.min( Math.min(
...quotations ...quotations
.filter((q) => .filter((q) => selectedQuotations.includes(q.id))
selectedQuotations.includes(q.id) .map((q) => q.totalAmount),
)
.map((q) => q.totalAmount)
)) * )) *
100 100
).toFixed(1)} ).toFixed(1)}
@ -524,52 +486,38 @@ const QuotationManagement: React.FC = () => {
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
<tr> <tr>
<td className="px-3 py-2 font-medium text-gray-900"> <td className="px-3 py-2 font-medium text-gray-900">Teklif No</td>
Teklif No
</td>
{quotations {quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((quotation) => ( .map((quotation) => (
<td <td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
key={quotation.id}
className="px-3 py-2 text-center text-gray-600"
>
{quotation.quotationNumber} {quotation.quotationNumber}
</td> </td>
))} ))}
</tr> </tr>
<tr className="bg-gray-50"> <tr className="bg-gray-50">
<td className="px-3 py-2 font-medium text-gray-900"> <td className="px-3 py-2 font-medium text-gray-900">Toplam Tutar</td>
Toplam Tutar
</td>
{quotations {quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((quotation) => ( .map((quotation) => (
<td <td key={quotation.id} className="px-3 py-2 text-center">
key={quotation.id}
className="px-3 py-2 text-center"
>
<span <span
className={`font-semibold ${ className={`font-semibold ${
quotation.totalAmount === quotation.totalAmount ===
Math.min( Math.min(
...quotations ...quotations
.filter((q) => .filter((q) => selectedQuotations.includes(q.id))
selectedQuotations.includes(q.id) .map((q) => q.totalAmount),
)
.map((q) => q.totalAmount)
) )
? "text-green-600" ? 'text-green-600'
: quotation.totalAmount === : quotation.totalAmount ===
Math.max( Math.max(
...quotations ...quotations
.filter((q) => .filter((q) => selectedQuotations.includes(q.id))
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()} ₺{quotation.totalAmount.toLocaleString()}
@ -578,34 +526,24 @@ const QuotationManagement: React.FC = () => {
))} ))}
</tr> </tr>
<tr> <tr>
<td className="px-3 py-2 font-medium text-gray-900"> <td className="px-3 py-2 font-medium text-gray-900">Geçerlilik Tarihi</td>
Geçerlilik Tarihi
</td>
{quotations {quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((quotation) => ( .map((quotation) => (
<td <td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
key={quotation.id} {quotation.validUntil.toLocaleDateString('tr-TR')}
className="px-3 py-2 text-center text-gray-600"
>
{quotation.validUntil.toLocaleDateString("tr-TR")}
</td> </td>
))} ))}
</tr> </tr>
<tr className="bg-gray-50"> <tr className="bg-gray-50">
<td className="px-3 py-2 font-medium text-gray-900"> <td className="px-3 py-2 font-medium text-gray-900">Durum</td>
Durum
</td>
{quotations {quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((quotation) => ( .map((quotation) => (
<td <td key={quotation.id} className="px-3 py-2 text-center">
key={quotation.id}
className="px-3 py-2 text-center"
>
<span <span
className={`px-2 py-1 rounded-full text-xs font-medium ${getQuotationStatusColor( className={`px-2 py-1 rounded-full text-xs font-medium ${getQuotationStatusColor(
quotation.status quotation.status,
)}`} )}`}
> >
{getQuotationStatusText(quotation.status)} {getQuotationStatusText(quotation.status)}
@ -614,16 +552,11 @@ const QuotationManagement: React.FC = () => {
))} ))}
</tr> </tr>
<tr> <tr>
<td className="px-3 py-2 font-medium text-gray-900"> <td className="px-3 py-2 font-medium text-gray-900">Kalem Sayısı</td>
Kalem Sayısı
</td>
{quotations {quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((quotation) => ( .map((quotation) => (
<td <td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
key={quotation.id}
className="px-3 py-2 text-center text-gray-600"
>
{quotation.items.length} {quotation.items.length}
</td> </td>
))} ))}
@ -635,10 +568,7 @@ const QuotationManagement: React.FC = () => {
{quotations {quotations
.filter((q) => selectedQuotations.includes(q.id)) .filter((q) => selectedQuotations.includes(q.id))
.map((quotation) => ( .map((quotation) => (
<td <td key={quotation.id} className="px-3 py-2 text-center text-gray-600">
key={quotation.id}
className="px-3 py-2 text-center text-gray-600"
>
{getAverageLeadTime(quotation)} gün {getAverageLeadTime(quotation)} gün
</td> </td>
))} ))}
@ -671,7 +601,7 @@ const QuotationManagement: React.FC = () => {
</div> </div>
)} )}
{modalType === "bulk" && ( {modalType === 'bulk' && (
<div className="space-y-6"> <div className="space-y-6">
{/* Bulk Request Form */} {/* Bulk Request Form */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -711,9 +641,7 @@ const QuotationManagement: React.FC = () => {
> >
{quotation.supplier?.name} {quotation.supplier?.name}
<button <button
onClick={() => onClick={() => handleSelectQuotation(quotation.id)}
handleSelectQuotation(quotation.id)
}
className="ml-2 text-blue-600 hover:text-blue-800" className="ml-2 text-blue-600 hover:text-blue-800"
> >
<FaTimes className="w-3 h-3" /> <FaTimes className="w-3 h-3" />
@ -785,8 +713,8 @@ const QuotationManagement: React.FC = () => {
</div> </div>
</div> </div>
)} )}
</div> </Container>
); )
}; }
export default QuotationManagement; export default QuotationManagement

180
ui/src/views/supplyChain/components/SupplierCardModal.tsx
View file

@ -1,15 +1,15 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react'
import { FaTimes, FaSave, FaCreditCard, FaStar } from "react-icons/fa"; import { FaTimes, FaSave, FaCreditCard, FaStar } from 'react-icons/fa'
import { SupplierCardTypeEnum, SupplierTypeEnum } from "../../../types/mm"; import { SupplierCardTypeEnum, SupplierTypeEnum } from '../../../types/mm'
import { mockBusinessPartyNew } from "../../../mocks/mockBusinessParties"; import { mockBusinessPartyNew } from '../../../mocks/mockBusinessParties'
import { BusinessParty, PartyType, PaymentTerms } from "../../../types/common"; import { BusinessParty, PartyType, PaymentTerms } from '../../../types/common'
interface SupplierCardModalProps { interface SupplierCardModalProps {
isOpen: boolean; isOpen: boolean
onClose: () => void; onClose: () => void
onSave: (supplierCard: BusinessParty) => void; onSave: (supplierCard: BusinessParty) => void
supplierCard?: BusinessParty | null; supplierCard?: BusinessParty | null
mode: "create" | "view" | "edit"; mode: 'create' | 'view' | 'edit'
} }
const SupplierCardModal: React.FC<SupplierCardModalProps> = ({ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
@ -19,50 +19,45 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
supplierCard, supplierCard,
mode, mode,
}) => { }) => {
const [formData, setFormData] = const [formData, setFormData] = useState<Partial<BusinessParty>>(mockBusinessPartyNew)
useState<Partial<BusinessParty>>(mockBusinessPartyNew);
useEffect(() => { useEffect(() => {
if (mode === "create") { if (mode === 'create') {
setFormData(mockBusinessPartyNew); setFormData(mockBusinessPartyNew)
} else if (supplierCard) { } else if (supplierCard) {
setFormData(supplierCard); setFormData(supplierCard)
} }
}, [supplierCard, mode]); }, [supplierCard, mode])
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent< e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>
) => { ) => {
const { name, value, type } = e.target; const { name, value, type } = e.target
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
[name]: [name]:
type === "number" type === 'number'
? parseFloat(value) || 0 ? parseFloat(value) || 0
: type === "checkbox" : type === 'checkbox'
? (e.target as HTMLInputElement).checked ? (e.target as HTMLInputElement).checked
: value, : value,
})); }))
}; }
const handleSpecialConditionsChange = (value: string) => { const handleSpecialConditionsChange = (value: string) => {
const conditions = value const conditions = value.split('\n').filter((condition) => condition.trim() !== '')
.split("\n")
.filter((condition) => condition.trim() !== "");
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
specialConditions: conditions, specialConditions: conditions,
})); }))
}; }
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault()
if (mode !== "view") { if (mode !== 'view') {
const newSupplierCard: BusinessParty = { const newSupplierCard: BusinessParty = {
id: supplierCard?.id || `SC-${Date.now()}`, id: supplierCard?.id || `SC-${Date.now()}`,
code: formData.code || "", code: formData.code || '',
cardNumber: cardNumber:
formData.cardNumber || formData.cardNumber ||
`SC-${new Date().getFullYear()}-${Date.now().toString().slice(-3)}`, `SC-${new Date().getFullYear()}-${Date.now().toString().slice(-3)}`,
@ -88,27 +83,27 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
creationTime: supplierCard?.creationTime || new Date(), creationTime: supplierCard?.creationTime || new Date(),
lastModificationTime: new Date(), lastModificationTime: new Date(),
supplierType: SupplierTypeEnum.Material, supplierType: SupplierTypeEnum.Material,
name: "", name: '',
currency: "", currency: '',
certifications: [], certifications: [],
bankAccounts: [], bankAccounts: [],
contacts: [], contacts: [],
partyType: PartyType.Supplier, partyType: PartyType.Supplier,
}; }
onSave(newSupplierCard); onSave(newSupplierCard)
} }
onClose(); onClose()
}; }
if (!isOpen) return null; if (!isOpen) return null
const isReadOnly = mode === "view"; const isReadOnly = mode === 'view'
const modalTitle = const modalTitle =
mode === "create" mode === 'create'
? "Yeni Tedarikçi Kartı" ? 'Yeni Tedarikçi Kartı'
: mode === "edit" : mode === 'edit'
? "Tedarikçi Kartını Düzenle" ? 'Tedarikçi Kartını Düzenle'
: "Tedarikçi Kartı Detayları"; : 'Tedarikçi Kartı Detayları'
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@ -118,10 +113,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
<FaCreditCard className="mr-2 text-blue-600" /> <FaCreditCard className="mr-2 text-blue-600" />
{modalTitle} {modalTitle}
</h3> </h3>
<button <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600">
onClick={onClose}
className="p-1 text-gray-400 hover:text-gray-600"
>
<FaTimes /> <FaTimes />
</button> </button>
</div> </div>
@ -130,18 +122,14 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Temel Bilgiler */} {/* Temel Bilgiler */}
<div className="space-y-3"> <div className="space-y-3">
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5"> <h4 className="text-sm font-medium text-gray-900 border-b pb-1.5">Temel Bilgiler</h4>
Temel Bilgiler
</h4>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Tedarikçi</label>
Tedarikçi
</label>
<input <input
type="text" type="text"
name="customerCode" name="customerCode"
value={formData.code || ""} value={formData.code || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Kart Numarası</label>
Kart Numarası
</label>
<input <input
type="text" type="text"
name="cardNumber" name="cardNumber"
value={formData.cardNumber || ""} value={formData.cardNumber || ''}
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} 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" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Kart Tipi</label>
Kart Tipi
</label>
<select <select
name="cardType" name="cardType"
value={formData.cardType || SupplierCardTypeEnum.Standard} value={formData.cardType || SupplierCardTypeEnum.Standard}
@ -174,16 +158,10 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
disabled={isReadOnly} 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" 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}> <option value={SupplierCardTypeEnum.Standard}>Standart</option>
Standart
</option>
<option value={SupplierCardTypeEnum.Premium}>Premium</option> <option value={SupplierCardTypeEnum.Premium}>Premium</option>
<option value={SupplierCardTypeEnum.Strategic}> <option value={SupplierCardTypeEnum.Strategic}>Stratejik</option>
Stratejik <option value={SupplierCardTypeEnum.Preferred}>Tercihli</option>
</option>
<option value={SupplierCardTypeEnum.Preferred}>
Tercihli
</option>
</select> </select>
</div> </div>
@ -196,8 +174,8 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
name="validFrom" name="validFrom"
value={ value={
formData.validFrom formData.validFrom
? new Date(formData.validFrom).toISOString().split("T")[0] ? new Date(formData.validFrom).toISOString().split('T')[0]
: "" : ''
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -206,16 +184,12 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Geçerlilik Bitişi</label>
Geçerlilik Bitişi
</label>
<input <input
type="date" type="date"
name="validTo" name="validTo"
value={ value={
formData.validTo formData.validTo ? new Date(formData.validTo).toISOString().split('T')[0] : ''
? new Date(formData.validTo).toISOString().split("T")[0]
: ""
} }
onChange={handleInputChange} onChange={handleInputChange}
readOnly={isReadOnly} readOnly={isReadOnly}
@ -226,14 +200,10 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
{/* Mali Bilgiler */} {/* Mali Bilgiler */}
<div className="space-y-3"> <div className="space-y-3">
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5"> <h4 className="text-sm font-medium text-gray-900 border-b pb-1.5">Mali Bilgiler</h4>
Mali Bilgiler
</h4>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Kredi Limiti (TL)</label>
Kredi Limiti (TL)
</label>
<input <input
type="number" type="number"
name="creditLimit" name="creditLimit"
@ -259,9 +229,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">Ödeme Koşulları</label>
Ödeme Koşulları
</label>
<select <select
name="paymentTerms" name="paymentTerms"
value={formData.paymentTerms || PaymentTerms.Net30} value={formData.paymentTerms || PaymentTerms.Net30}
@ -281,9 +249,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">İndirim Oranı (%)</label>
İndirim Oranı (%)
</label>
<input <input
type="number" type="number"
name="discountRate" name="discountRate"
@ -307,9 +273,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
disabled={isReadOnly} disabled={isReadOnly}
className="mr-2" className="mr-2"
/> />
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700">Aktif</span>
Aktif
</span>
</label> </label>
</div> </div>
</div> </div>
@ -322,7 +286,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
</h4> </h4>
<textarea <textarea
name="specialConditions" name="specialConditions"
value={formData.specialConditions?.join("\n") || ""} value={formData.specialConditions?.join('\n') || ''}
onChange={(e) => handleSpecialConditionsChange(e.target.value)} onChange={(e) => handleSpecialConditionsChange(e.target.value)}
readOnly={isReadOnly} readOnly={isReadOnly}
rows={3} rows={3}
@ -332,7 +296,7 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
</div> </div>
{/* Performans Metrikleri - Sadece görüntüleme modu */} {/* Performans Metrikleri - Sadece görüntüleme modu */}
{mode === "view" && formData.performanceMetrics && ( {mode === 'view' && formData.performanceMetrics && (
<div className="mt-4"> <div className="mt-4">
<h4 className="text-sm font-medium text-gray-900 border-b pb-1.5 mb-3 flex items-center"> <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" /> <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"> <div className="text-2xl font-bold text-blue-600">
{formData.performanceMetrics.deliveryPerformance}% {formData.performanceMetrics.deliveryPerformance}%
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600">Teslimat Performansı</div>
Teslimat Performansı
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-2xl font-bold text-green-600"> <div className="text-2xl font-bold text-green-600">
{formData.performanceMetrics.qualityRating}% {formData.performanceMetrics.qualityRating}%
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600">Kalite Değerlendirmesi</div>
Kalite Değerlendirmesi
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-2xl font-bold text-purple-600"> <div className="text-2xl font-bold text-purple-600">
@ -390,9 +350,9 @@ const SupplierCardModal: React.FC<SupplierCardModalProps> = ({
onClick={onClose} onClick={onClose}
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50" 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> </button>
{mode !== "view" && ( {mode !== 'view' && (
<button <button
type="submit" type="submit"
className="px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 flex items-center" 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> </form>
</div> </div>
</div> </div>
); )
}; }
export default SupplierCardModal; export default SupplierCardModal

925
ui/src/views/supplyChain/components/SupplierCards.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { import {
FaPlus, FaPlus,
FaSearch, FaSearch,
@ -13,533 +13,502 @@ import {
FaTh, FaTh,
FaList, FaList,
FaBuilding, FaBuilding,
} from "react-icons/fa"; } from 'react-icons/fa'
import SupplierCardModal from "./SupplierCardModal"; import SupplierCardModal from './SupplierCardModal'
import { mockBusinessParties } from "../../../mocks/mockBusinessParties"; import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
import { BusinessParty, PartyType } from "../../../types/common"; import { BusinessParty, PartyType } from '../../../types/common'
import { import {
getSupplierCardTypeColor, getSupplierCardTypeColor,
getSupplierCardTypeText, getSupplierCardTypeText,
getPaymentTermsText, getPaymentTermsText,
} from "../../../utils/erp"; } from '../../../utils/erp'
import { Container } from '@/components/shared'
const SupplierCards: React.FC = () => { const SupplierCards: React.FC = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false)
const [editingCard, setEditingCard] = useState<BusinessParty | null>(null); const [editingCard, setEditingCard] = useState<BusinessParty | null>(null)
const [modalMode, setModalMode] = useState<"create" | "view" | "edit">( const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('create')
"create" const [viewMode, setViewMode] = useState<'cards' | 'list'>('cards')
);
const [viewMode, setViewMode] = useState<"cards" | "list">("cards");
// Mock data - replace with actual API calls // Mock data - replace with actual API calls
const [supplierCards] = useState<BusinessParty[]>(mockBusinessParties); const [supplierCards] = useState<BusinessParty[]>(mockBusinessParties)
const filteredCards = supplierCards const filteredCards = supplierCards
.filter((card) => card.partyType === PartyType.Supplier) .filter((card) => card.partyType === PartyType.Supplier)
.filter( .filter(
(card) => (card) =>
card.cardNumber!.toLowerCase().includes(searchTerm.toLowerCase()) || card.cardNumber!.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.id.toLowerCase().includes(searchTerm.toLowerCase()) card.id.toLowerCase().includes(searchTerm.toLowerCase()),
); )
const getCreditUtilization = (card: BusinessParty) => { const getCreditUtilization = (card: BusinessParty) => {
return (card.currentBalance! / card.creditLimit) * 100; return (card.currentBalance! / card.creditLimit) * 100
}; }
const getPerformanceColor = (score: number) => { const getPerformanceColor = (score: number) => {
if (score >= 90) return "text-green-600"; if (score >= 90) return 'text-green-600'
if (score >= 80) return "text-yellow-600"; if (score >= 80) return 'text-yellow-600'
return "text-red-600"; return 'text-red-600'
}; }
const handleEdit = (card: BusinessParty) => { const handleEdit = (card: BusinessParty) => {
setEditingCard(card); setEditingCard(card)
setModalMode("edit"); setModalMode('edit')
setShowModal(true); setShowModal(true)
}; }
const handleView = (card: BusinessParty) => { const handleView = (card: BusinessParty) => {
setEditingCard(card); setEditingCard(card)
setModalMode("view"); setModalMode('view')
setShowModal(true); setShowModal(true)
}; }
const handleAddNew = () => { const handleAddNew = () => {
setEditingCard(null); setEditingCard(null)
setModalMode("create"); setModalMode('create')
setShowModal(true); setShowModal(true)
}; }
const handleSaveCard = (card: BusinessParty) => { const handleSaveCard = (card: BusinessParty) => {
// TODO: Implement save logic // TODO: Implement save logic
console.log("Saving supplier card:", card); console.log('Saving supplier card:', card)
setShowModal(false); setShowModal(false)
setEditingCard(null); setEditingCard(null)
}; }
const handleCloseModal = () => { const handleCloseModal = () => {
setShowModal(false); setShowModal(false)
setEditingCard(null); setEditingCard(null)
}; }
const isCardExpiring = (card: BusinessParty) => { const isCardExpiring = (card: BusinessParty) => {
if (!card.validTo) return false; if (!card.validTo) return false
const daysUntilExpiry = Math.ceil( const daysUntilExpiry = Math.ceil(
(card.validTo.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24) (card.validTo.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24),
); )
return daysUntilExpiry <= 30; return daysUntilExpiry <= 30
}; }
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex items-center justify-between"> {/* Header */}
<div> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">Tedarikçiler</h2> <div>
<p className="text-gray-600"> <h2 className="text-2xl font-bold text-gray-900">Tedarikçiler</h2>
Tedarikçi kredi limitleri, özel şartlar ve performans metriklerini <p className="text-gray-600">
yönetin Tedarikçi kredi limitleri, özel şartlar ve performans metriklerini yönetin
</p> </p>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="flex bg-gray-100 rounded-lg"> <div className="flex bg-gray-100 rounded-lg">
<button
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'
}`}
>
<FaTh className="w-4 h-4 inline" />
</button>
<button
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'
}`}
>
<FaList className="w-4 h-4 inline" />
</button>
</div>
{/* View Toggle */}
<button <button
onClick={() => setViewMode("cards")} onClick={handleAddNew}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${ className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
viewMode === "cards"
? "bg-white text-gray-900 shadow-sm"
: "text-gray-500 hover:text-gray-700"
}`}
> >
<FaTh className="w-4 h-4 inline" /> <FaPlus className="w-4 h-4" />
</button> <span>Yeni Tedarikçi Kartı</span>
<button
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"
}`}
>
<FaList className="w-4 h-4 inline" />
</button> </button>
</div> </div>
{/* View Toggle */}
<button
onClick={handleAddNew}
className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-1.5"
>
<FaPlus className="w-4 h-4" />
<span>Yeni Tedarikçi Kartı</span>
</button>
</div> </div>
</div>
{/* Search Bar */} {/* Search Bar */}
<div className="relative"> <div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" /> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input <input
type="text" type="text"
placeholder="Tedarikçi kartı ara..." placeholder="Tedarikçi kartı ara..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div>
{/* Content Area */}
{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]
}`}
>
<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>
<span
className={`px-3 py-1 rounded-full text-sm font-medium border ${getSupplierCardTypeColor(
card.cardType!
)}`}
>
{getSupplierCardTypeText(card.cardType!)}
</span>
</div>
<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>
)}
</div>
</div>
<div className="flex space-x-1">
<button
onClick={() => handleView(card)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
title="Görüntüle"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={() => handleEdit(card)}
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
title="Sil"
>
<FaTrash className="w-4 h-4" />
</button>
</div>
</div>
{/* Warnings */}
{(isCardExpiring(card) || !card.isActive) && (
<div className="mb-3 space-y-2">
{!card.isActive && (
<div className="flex items-center space-x-2 text-red-600 bg-red-50 px-2.5 py-1.5 rounded-lg">
<FaExclamationCircle className="w-4 h-4" />
<span className="text-sm">Kart pasif durumda</span>
</div>
)}
{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>
</div>
)}
</div>
)}
{/* Credit Information */}
<div className="mb-3">
<div className="flex items-center justify-between mb-1.5">
<span className="text-sm text-gray-600 flex items-center">
<FaDollarSign className="w-4 h-4 mr-1" />
Kredi Limiti
</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>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${
getCreditUtilization(card) > 80
? "bg-red-500"
: getCreditUtilization(card) > 60
? "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>
₺
{(card.creditLimit - card.currentBalance!).toLocaleString()}{" "}
müsait
</span>
</div>
</div>
{/* Performance Metrics */}
<div className="mb-3">
<div className="flex items-center justify-between mb-1.5">
<span className="text-sm text-gray-600 flex items-center">
<FaStar className="w-4 h-4 mr-1" />
Genel Performans
</span>
<span
className={`font-bold text-lg ${getPerformanceColor(
card.performanceMetrics!.overallScore
)}`}
>
{card.performanceMetrics!.overallScore}/100
</span>
</div>
<div className="grid grid-cols-2 gap-2 text-xs">
<div className="flex justify-between">
<span className="text-gray-600">Teslimat:</span>
<span
className={getPerformanceColor(
card.performanceMetrics!.deliveryPerformance
)}
>
{card.performanceMetrics!.deliveryPerformance}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Kalite:</span>
<span
className={getPerformanceColor(
card.performanceMetrics!.qualityRating
)}
>
{card.performanceMetrics!.qualityRating}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Fiyat:</span>
<span
className={getPerformanceColor(
card.performanceMetrics!.priceCompetitiveness
)}
>
{card.performanceMetrics!.priceCompetitiveness}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Uyum:</span>
<span
className={getPerformanceColor(
card.performanceMetrics!.complianceRating
)}
>
{card.performanceMetrics!.complianceRating}%
</span>
</div>
</div>
</div>
{/* 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>
<div className="flex flex-wrap gap-1">
{card.specialConditions.map((condition, index) => (
<span
key={index}
className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full"
>
{condition}
</span>
))}
</div>
</div>
)}
{/* Footer */}
<div className="flex items-center justify-between pt-3 border-t border-gray-100">
<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 ? "Aktif" : "Pasif"}
</span>
<span className="text-xs text-gray-500">
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")}
</span>
)}
</div>
</div>
))}
</div> </div>
) : (
/* List View */ {/* Content Area */}
<div className="bg-white rounded-lg shadow overflow-hidden"> {viewMode === 'cards' ? (
<div className="overflow-x-auto"> /* Cards Grid */
<table className="min-w-full divide-y divide-gray-200"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<thead className="bg-gray-50"> {filteredCards.map((card) => (
<tr> <div
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> key={card.id}
Tedarikçi className={`bg-white rounded-lg shadow-md border-l-4 p-4 hover:shadow-lg transition-shadow ${
</th> getSupplierCardTypeColor(card.cardType!).split(' ').slice(-1)[0]
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> }`}
Kart Tipi >
</th> <div className="flex items-start justify-between mb-3">
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <div className="flex-1">
Kredi Limiti <div className="flex items-center space-x-2 mb-1.5">
</th> <FaCreditCard className="w-6 h-6 text-gray-600" />
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <h3 className="text-lg font-semibold text-gray-900">{card.cardNumber}</h3>
Kullanım Oranı
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Performans
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Ödeme Şartları
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{filteredCards.map((card) => (
<tr key={card.id} className="hover:bg-gray-50 text-sm">
<td className="px-2 py-2 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
<FaBuilding className="w-5 h-5 text-gray-600" />
</div>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{card.cardNumber}
</div>
<div className="text-sm text-gray-500">
{card.code}
</div>
</div>
</div>
</td>
<td className="px-2 py-2 whitespace-nowrap">
<span <span
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getSupplierCardTypeColor( className={`px-3 py-1 rounded-full text-sm font-medium border ${getSupplierCardTypeColor(
card.cardType! card.cardType!,
)}`} )}`}
> >
{getSupplierCardTypeText(card.cardType!)} {getSupplierCardTypeText(card.cardType!)}
</span> </span>
</td> </div>
<td className="px-2 py-2 whitespace-nowrap text-sm text-gray-900"> <p className="text-sm text-gray-600 mb-1">Tedarikçi: {card.code}</p>
₺{card.creditLimit.toLocaleString()} <div className="flex items-center space-x-4 text-sm text-gray-500">
</td> <span>Ödeme: {getPaymentTermsText(card.paymentTerms)}</span>
<td className="px-2 py-2 whitespace-nowrap"> {card.discountRate && (
<div className="flex items-center"> <span className="text-green-600">%{card.discountRate} indirim</span>
<div className="w-16 bg-gray-200 rounded-full h-2 mr-2"> )}
<div </div>
className={`h-2 rounded-full ${ </div>
getCreditUtilization(card) > 80 <div className="flex space-x-1">
? "bg-red-500" <button
: getCreditUtilization(card) > 60 onClick={() => handleView(card)}
? "bg-yellow-500" className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
: "bg-green-500" title="Görüntüle"
}`} >
style={{ width: `${getCreditUtilization(card)}%` }} <FaEye className="w-4 h-4" />
></div> </button>
</div> <button
<span className="text-sm text-gray-700"> onClick={() => handleEdit(card)}
%{getCreditUtilization(card).toFixed(1)} className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
</span> title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
title="Sil"
>
<FaTrash className="w-4 h-4" />
</button>
</div>
</div>
{/* Warnings */}
{(isCardExpiring(card) || !card.isActive) && (
<div className="mb-3 space-y-2">
{!card.isActive && (
<div className="flex items-center space-x-2 text-red-600 bg-red-50 px-2.5 py-1.5 rounded-lg">
<FaExclamationCircle className="w-4 h-4" />
<span className="text-sm">Kart pasif durumda</span>
</div> </div>
</td> )}
<td className="px-2 py-2 whitespace-nowrap"> {isCardExpiring(card) && (
<div className="flex items-center"> <div className="flex items-center space-x-2 text-orange-600 bg-orange-50 px-2.5 py-1.5 rounded-lg">
<FaStar className="w-4 h-4 text-yellow-400 mr-1" /> <FaCalendar className="w-4 h-4" />
<span className="text-sm">Kartın süresi 30 gün içinde dolacak</span>
</div>
)}
</div>
)}
{/* Credit Information */}
<div className="mb-3">
<div className="flex items-center justify-between mb-1.5">
<span className="text-sm text-gray-600 flex items-center">
<FaDollarSign className="w-4 h-4 mr-1" />
Kredi Limiti
</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>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${
getCreditUtilization(card) > 80
? 'bg-red-500'
: getCreditUtilization(card) > 60
? '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>
₺{(card.creditLimit - card.currentBalance!).toLocaleString()} müsait
</span>
</div>
</div>
{/* Performance Metrics */}
<div className="mb-3">
<div className="flex items-center justify-between mb-1.5">
<span className="text-sm text-gray-600 flex items-center">
<FaStar className="w-4 h-4 mr-1" />
Genel Performans
</span>
<span
className={`font-bold text-lg ${getPerformanceColor(
card.performanceMetrics!.overallScore,
)}`}
>
{card.performanceMetrics!.overallScore}/100
</span>
</div>
<div className="grid grid-cols-2 gap-2 text-xs">
<div className="flex justify-between">
<span className="text-gray-600">Teslimat:</span>
<span
className={getPerformanceColor(
card.performanceMetrics!.deliveryPerformance,
)}
>
{card.performanceMetrics!.deliveryPerformance}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Kalite:</span>
<span className={getPerformanceColor(card.performanceMetrics!.qualityRating)}>
{card.performanceMetrics!.qualityRating}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Fiyat:</span>
<span
className={getPerformanceColor(
card.performanceMetrics!.priceCompetitiveness,
)}
>
{card.performanceMetrics!.priceCompetitiveness}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Uyum:</span>
<span
className={getPerformanceColor(card.performanceMetrics!.complianceRating)}
>
{card.performanceMetrics!.complianceRating}%
</span>
</div>
</div>
</div>
{/* 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>
<div className="flex flex-wrap gap-1">
{card.specialConditions.map((condition, index) => (
<span <span
className={`text-sm font-medium ${getPerformanceColor( key={index}
card.performanceMetrics!.overallScore className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full"
>
{condition}
</span>
))}
</div>
</div>
)}
{/* Footer */}
<div className="flex items-center justify-between pt-3 border-t border-gray-100">
<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 ? 'Aktif' : 'Pasif'}
</span>
<span className="text-xs text-gray-500">
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')}
</span>
)}
</div>
</div>
))}
</div>
) : (
/* List View */
<div className="bg-white rounded-lg shadow overflow-hidden">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tedarikçi
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kart Tipi
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kredi Limiti
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kullanım Oranı
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Performans
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Ödeme Şartları
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum
</th>
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{filteredCards.map((card) => (
<tr key={card.id} className="hover:bg-gray-50 text-sm">
<td className="px-2 py-2 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
<FaBuilding className="w-5 h-5 text-gray-600" />
</div>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{card.cardNumber}
</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.performanceMetrics!.overallScore}/100 {getSupplierCardTypeText(card.cardType!)}
</span> </span>
</div> </td>
</td> <td className="px-2 py-2 whitespace-nowrap text-sm text-gray-900">
<td className="px-2 py-2 whitespace-nowrap text-sm text-gray-500"> ₺{card.creditLimit.toLocaleString()}
{getPaymentTermsText(card.paymentTerms)} </td>
</td> <td className="px-2 py-2 whitespace-nowrap">
<td className="px-2 py-2 whitespace-nowrap"> <div className="flex items-center">
<div className="flex flex-col space-y-1"> <div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
<span <div
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${ className={`h-2 rounded-full ${
card.isActive getCreditUtilization(card) > 80
? "bg-green-100 text-green-800" ? 'bg-red-500'
: "bg-red-100 text-red-800" : getCreditUtilization(card) > 60
}`} ? 'bg-yellow-500'
> : 'bg-green-500'
{card.isActive ? "Aktif" : "Pasif"} }`}
</span> style={{ width: `${getCreditUtilization(card)}%` }}
{(isCardExpiring(card) || !card.isActive) && ( ></div>
<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"}
</span>
</div> </div>
)} <span className="text-sm text-gray-700">
</div> %{getCreditUtilization(card).toFixed(1)}
</td> </span>
<td className="px-2 py-2 whitespace-nowrap text-right text-sm font-medium"> </div>
<div className="flex space-x-2"> </td>
<button <td className="px-2 py-2 whitespace-nowrap">
onClick={() => handleView(card)} <div className="flex items-center">
className="text-gray-400 hover:text-blue-600 hover:bg-blue-50 p-1 rounded" <FaStar className="w-4 h-4 text-yellow-400 mr-1" />
title="Görüntüle" <span
> className={`text-sm font-medium ${getPerformanceColor(
<FaEye className="w-4 h-4" /> card.performanceMetrics!.overallScore,
</button> )}`}
<button >
onClick={() => handleEdit(card)} {card.performanceMetrics!.overallScore}/100
className="text-gray-400 hover:text-green-600 hover:bg-green-50 p-1 rounded" </span>
title="Düzenle" </div>
> </td>
<FaEdit className="w-4 h-4" /> <td className="px-2 py-2 whitespace-nowrap text-sm text-gray-500">
</button> {getPaymentTermsText(card.paymentTerms)}
<button </td>
className="text-gray-400 hover:text-red-600 hover:bg-red-50 p-1 rounded" <td className="px-2 py-2 whitespace-nowrap">
title="Sil" <div className="flex flex-col space-y-1">
> <span
<FaTrash className="w-4 h-4" /> className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
</button> card.isActive
</div> ? 'bg-green-100 text-green-800'
</td> : 'bg-red-100 text-red-800'
</tr> }`}
))} >
</tbody> {card.isActive ? 'Aktif' : 'Pasif'}
</table> </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'}
</span>
</div>
)}
</div>
</td>
<td className="px-2 py-2 whitespace-nowrap text-right text-sm font-medium">
<div className="flex space-x-2">
<button
onClick={() => handleView(card)}
className="text-gray-400 hover:text-blue-600 hover:bg-blue-50 p-1 rounded"
title="Görüntüle"
>
<FaEye className="w-4 h-4" />
</button>
<button
onClick={() => handleEdit(card)}
className="text-gray-400 hover:text-green-600 hover:bg-green-50 p-1 rounded"
title="Düzenle"
>
<FaEdit className="w-4 h-4" />
</button>
<button
className="text-gray-400 hover:text-red-600 hover:bg-red-50 p-1 rounded"
title="Sil"
>
<FaTrash className="w-4 h-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div> </div>
</div> )}
)}
{filteredCards.length === 0 && ( {filteredCards.length === 0 && (
<div className="text-center py-8"> <div className="text-center py-8">
<FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" /> <FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2"> <h3 className="text-lg font-medium text-gray-900 mb-2">Tedarikçi kartı bulunamadı</h3>
Tedarikçi kartı bulunamadı <p className="text-gray-500">
</h3> Arama kriterlerinizi değiştirin veya yeni bir tedarikçi kartı ekleyin.
<p className="text-gray-500"> </p>
Arama kriterlerinizi değiştirin veya yeni bir tedarikçi kartı </div>
ekleyin. )}
</p> </div>
</div>
)}
{/* Supplier Card Modal */} {/* Supplier Card Modal */}
<SupplierCardModal <SupplierCardModal
@ -549,8 +518,8 @@ const SupplierCards: React.FC = () => {
supplierCard={editingCard} supplierCard={editingCard}
mode={modalMode} mode={modalMode}
/> />
</div> </Container>
); )
}; }
export default SupplierCards; export default SupplierCards

1421
ui/src/views/supplyChain/components/SupplierForm.tsx
View file

File diff suppressed because it is too large Load diff

748
ui/src/views/supplyChain/components/SupplierList.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
import { useQuery } from "@tanstack/react-query"; import { useQuery } from '@tanstack/react-query'
import { import {
FaTruck, FaTruck,
FaPlus, FaPlus,
@ -17,45 +17,39 @@ import {
FaArrowUp, FaArrowUp,
FaUsers, FaUsers,
FaBuilding, FaBuilding,
} from "react-icons/fa"; } from 'react-icons/fa'
import classNames from "classnames"; import classNames from 'classnames'
import { SupplierTypeEnum } from "../../../types/mm"; import { SupplierTypeEnum } from '../../../types/mm'
import { mockBusinessParties } from "../../../mocks/mockBusinessParties"; import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
import { PartyType } from "../../../types/common"; import { PartyType } from '../../../types/common'
import { import { getSupplierTypeColor, getSupplierTypeText, getRatingColor } from '../../../utils/erp'
getSupplierTypeColor, import { Container } from '@/components/shared'
getSupplierTypeText,
getRatingColor,
} from "../../../utils/erp";
const SupplierList: React.FC = () => { const SupplierList: React.FC = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState('')
const [filterType, setFilterType] = useState("all"); const [filterType, setFilterType] = useState('all')
const [showFilters, setShowFilters] = useState(false); const [showFilters, setShowFilters] = useState(false)
const { const {
data: suppliers, data: suppliers,
isLoading, isLoading,
error, error,
} = useQuery({ } = useQuery({
queryKey: ["suppliers", searchTerm, filterType], queryKey: ['suppliers', searchTerm, filterType],
queryFn: async () => { queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 500)); await new Promise((resolve) => setTimeout(resolve, 500))
const filtredSuppliers = mockBusinessParties.filter( const filtredSuppliers = mockBusinessParties.filter((a) => a.partyType === PartyType.Supplier)
(a) => a.partyType === PartyType.Supplier
);
return filtredSuppliers.filter((supplier) => { return filtredSuppliers.filter((supplier) => {
const matchesSearch = const matchesSearch =
supplier.code.toLowerCase().includes(searchTerm.toLowerCase()) || supplier.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
supplier.name.toLowerCase().includes(searchTerm.toLowerCase()); supplier.name.toLowerCase().includes(searchTerm.toLowerCase())
const matchesType = const matchesType = filterType === 'all' || supplier.supplierType === filterType
filterType === "all" || supplier.supplierType === filterType; return matchesSearch && matchesType
return matchesSearch && matchesType; })
});
}, },
}); })
if (isLoading) { if (isLoading) {
return ( 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> <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> <span className="ml-3 text-gray-600">Tedarikçiler yükleniyor...</span>
</div> </div>
); )
} }
if (error) { if (error) {
@ -71,388 +65,350 @@ const SupplierList: React.FC = () => {
<div className="bg-red-50 border border-red-200 rounded-lg p-4"> <div className="bg-red-50 border border-red-200 rounded-lg p-4">
<div className="flex items-center"> <div className="flex items-center">
<FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" /> <FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
<span className="text-red-800"> <span className="text-red-800">Tedarikçiler yüklenirken hata oluştu.</span>
Tedarikçiler yüklenirken hata oluştu.
</span>
</div> </div>
</div> </div>
); )
} }
return ( return (
<div className="space-y-3 pt-2"> <Container>
{/* Header Actions */} <div className="space-y-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> {/* Header Actions */}
<div className="flex items-center space-x-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="relative"> <div className="flex items-center space-x-4">
<FaSearch <div className="relative">
size={20} <FaSearch
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20}
/> className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
<input />
type="text" <input
placeholder="Tedarikçi kodu veya firma adı..." type="text"
value={searchTerm} placeholder="Tedarikçi kodu veya firma adı..."
onChange={(e) => setSearchTerm(e.target.value)} value={searchTerm}
className="pl-10 pr-4 py-1.5 w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" onChange={(e) => setSearchTerm(e.target.value)}
/> className="pl-10 pr-4 py-1.5 w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<button
onClick={() => setShowFilters(!showFilters)}
className={classNames(
'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',
)}
>
<FaFilter size={16} className="mr-2" />
Filtreler
</button>
</div> </div>
<button <div className="flex items-center space-x-3">
onClick={() => setShowFilters(!showFilters)} <button
className={classNames( onClick={() => alert('Dışa aktarma özelliği yakında eklenecek')}
"flex items-center px-3 py-1.5 border rounded-lg transition-colors", 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"
showFilters >
? "border-blue-500 bg-blue-50 text-blue-700" <FaDownload size={16} className="mr-2" />
: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50" Dışa Aktar
)} </button>
>
<FaFilter size={16} className="mr-2" />
Filtreler
</button>
</div>
<div className="flex items-center space-x-3"> <Link
<button to="/admin/supplychain/suppliers/new"
onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")} className="flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
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" >
> <FaPlus size={16} className="mr-2" />
<FaDownload size={16} className="mr-2" /> Yeni Tedarikçi
Dışa Aktar </Link>
</button>
<Link
to="/admin/supplychain/suppliers/new"
className="flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus size={16} className="mr-2" />
Yeni Tedarikçi
</Link>
</div>
</div>
{/* Filters Panel */}
{showFilters && (
<div className="bg-white border border-gray-200 rounded-lg p-3">
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Tedarikçi Türü
</label>
<select
value={filterType}
onChange={(e) => setFilterType(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">Tümü</option>
<option value={SupplierTypeEnum.Material}>Malzeme</option>
<option value={SupplierTypeEnum.Service}>Hizmet</option>
<option value={SupplierTypeEnum.Both}>Karma</option>
</select>
</div>
<div className="flex items-end">
<button
onClick={() => {
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"
>
Filtreleri Temizle
</button>
</div>
</div>
</div>
)}
{/* Statistics Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<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>
</div>
<FaBuilding className="h-8 w-8 text-blue-600" />
</div> </div>
</div> </div>
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3"> {/* Filters Panel */}
<div className="flex items-center justify-between"> {showFilters && (
<div> <div className="bg-white border border-gray-200 rounded-lg p-3">
<p className="text-sm font-medium text-gray-600"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
Aktif Tedarikçi <div>
</p> <label className="block text-sm font-medium text-gray-700 mb-2">
<p className="text-xl font-bold text-green-600"> Tedarikçi Türü
{suppliers?.filter((s) => s.isActive).length || 0} </label>
</p> <select
</div> value={filterType}
<FaUsers className="h-8 w-8 text-green-600" /> onChange={(e) => setFilterType(e.target.value)}
</div> className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
</div>
<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">Ortalama Puan</p>
<p className="text-xl font-bold text-yellow-600">
{suppliers?.length
? (
suppliers.reduce(
(acc, s) =>
acc + (s.performanceMetrics?.overallScore ?? 0),
0
) / suppliers.length
).toFixed(1)
: "0.0"}
</p>
</div>
<FaStar className="h-8 w-8 text-yellow-600" />
</div>
</div>
<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-xl font-bold text-purple-600">
{suppliers?.filter(
(s) => (s.performanceMetrics?.overallScore ?? 0) >= 4.5
).length || 0}
</p>
</div>
<FaArrowUp className="h-8 w-8 text-purple-600" />
</div>
</div>
</div>
{/* Suppliers 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">Tedarikçi Listesi</h2>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50">
<tr>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tedarikçi Bilgileri
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
İletişim
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tür / Konum
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Performans
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kredi Limiti
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum
</th>
<th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{suppliers?.map((supplier) => (
<tr
key={supplier.id}
className="hover:bg-gray-50 transition-colors"
> >
<td className="px-4 py-3"> <option value="all">Tümü</option>
<div className="flex items-center"> <option value={SupplierTypeEnum.Material}>Malzeme</option>
<div className="flex-shrink-0 h-10 w-10"> <option value={SupplierTypeEnum.Service}>Hizmet</option>
<div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center"> <option value={SupplierTypeEnum.Both}>Karma</option>
<FaTruck className="h-5 w-5 text-blue-600" /> </select>
</div> </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>
{supplier.taxNumber && (
<div className="text-xs text-gray-400 mt-1">
VKN: {supplier.taxNumber}
</div>
)}
</div>
</div>
</td>
<td className="px-4 py-3"> <div className="flex items-end">
<div className="space-y-1"> <button
{supplier.primaryContact && ( onClick={() => {
<div className="text-sm font-medium text-gray-900"> setFilterType('all')
{supplier.primaryContact.fullName} setSearchTerm('')
</div> }}
)} 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"
{supplier.email && ( >
<div className="flex items-center text-sm text-gray-500"> Filtreleri Temizle
<FaEnvelope size={14} className="mr-1" /> </button>
{supplier.email} </div>
</div>
)}
{supplier.phone && (
<div className="flex items-center text-sm text-gray-500">
<FaPhone size={14} className="mr-1" />
{supplier.phone}
</div>
)}
</div>
</td>
<td className="px-4 py-3">
<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!)
)}
>
{getSupplierTypeText(supplier.supplierType!)}
</span>
<div className="flex items-center text-sm text-gray-500">
<FaMapMarkerAlt size={14} className="mr-1" />
{supplier.address?.city}, {supplier.address?.country}
</div>
</div>
</td>
<td className="px-4 py-3">
<div className="space-y-1">
<div className="flex items-center">
<FaStar
size={14}
className={classNames(
"mr-1",
getRatingColor(
supplier.performanceMetrics?.overallScore ?? 0
)
)}
/>
<span
className={classNames(
"text-sm font-medium",
getRatingColor(
supplier.performanceMetrics?.overallScore ?? 0
)
)}
>
{(
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)}
</div>
{supplier.certifications &&
supplier.certifications.length > 0 && (
<div className="text-xs text-blue-600">
{supplier.certifications.join(", ")}
</div>
)}
</div>
</td>
<td className="px-4 py-3">
<div className="text-sm font-medium text-gray-900">
₺{supplier.creditLimit.toLocaleString()}
</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",
supplier.isActive
? "bg-green-100 text-green-800"
: "bg-red-100 text-red-800"
)}
>
{supplier.isActive ? "Aktif" : "Pasif"}
</span>
</td>
<td className="px-4 py-3 text-right">
<div className="flex items-center justify-end space-x-2">
<Link
to={`/admin/supplychain/suppliers/${supplier.id}`}
className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="Detayları Görüntüle"
>
<FaEye size={16} />
</Link>
<Link
to={`/admin/supplychain/suppliers/edit/${supplier.id}`}
className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
title="Düzenle"
>
<FaEdit size={16} />
</Link>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{(!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>
<div className="mt-6">
<Link
to="/admin/supplychain/suppliers/new"
className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus size={16} className="mr-2" />
Yeni Tedarikçi Ekle
</Link>
</div> </div>
</div> </div>
)} )}
</div>
</div>
);
};
export default SupplierList; {/* Statistics Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<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>
</div>
<FaBuilding className="h-8 w-8 text-blue-600" />
</div>
</div>
<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-xl font-bold text-green-600">
{suppliers?.filter((s) => s.isActive).length || 0}
</p>
</div>
<FaUsers className="h-8 w-8 text-green-600" />
</div>
</div>
<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">Ortalama Puan</p>
<p className="text-xl font-bold text-yellow-600">
{suppliers?.length
? (
suppliers.reduce(
(acc, s) => acc + (s.performanceMetrics?.overallScore ?? 0),
0,
) / suppliers.length
).toFixed(1)
: '0.0'}
</p>
</div>
<FaStar className="h-8 w-8 text-yellow-600" />
</div>
</div>
<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-xl font-bold text-purple-600">
{suppliers?.filter((s) => (s.performanceMetrics?.overallScore ?? 0) >= 4.5)
.length || 0}
</p>
</div>
<FaArrowUp className="h-8 w-8 text-purple-600" />
</div>
</div>
</div>
{/* Suppliers 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">Tedarikçi Listesi</h2>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50">
<tr>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tedarikçi Bilgileri
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
İletişim
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tür / Konum
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Performans
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kredi Limiti
</th>
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Durum
</th>
<th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
İşlemler
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{suppliers?.map((supplier) => (
<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">
<div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center">
<FaTruck className="h-5 w-5 text-blue-600" />
</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>
{supplier.taxNumber && (
<div className="text-xs text-gray-400 mt-1">
VKN: {supplier.taxNumber}
</div>
)}
</div>
</div>
</td>
<td className="px-4 py-3">
<div className="space-y-1">
{supplier.primaryContact && (
<div className="text-sm font-medium text-gray-900">
{supplier.primaryContact.fullName}
</div>
)}
{supplier.email && (
<div className="flex items-center text-sm text-gray-500">
<FaEnvelope size={14} className="mr-1" />
{supplier.email}
</div>
)}
{supplier.phone && (
<div className="flex items-center text-sm text-gray-500">
<FaPhone size={14} className="mr-1" />
{supplier.phone}
</div>
)}
</div>
</td>
<td className="px-4 py-3">
<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!),
)}
>
{getSupplierTypeText(supplier.supplierType!)}
</span>
<div className="flex items-center text-sm text-gray-500">
<FaMapMarkerAlt size={14} className="mr-1" />
{supplier.address?.city}, {supplier.address?.country}
</div>
</div>
</td>
<td className="px-4 py-3">
<div className="space-y-1">
<div className="flex items-center">
<FaStar
size={14}
className={classNames(
'mr-1',
getRatingColor(supplier.performanceMetrics?.overallScore ?? 0),
)}
/>
<span
className={classNames(
'text-sm font-medium',
getRatingColor(supplier.performanceMetrics?.overallScore ?? 0),
)}
>
{(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)}
</div>
{supplier.certifications && supplier.certifications.length > 0 && (
<div className="text-xs text-blue-600">
{supplier.certifications.join(', ')}
</div>
)}
</div>
</td>
<td className="px-4 py-3">
<div className="text-sm font-medium text-gray-900">
₺{supplier.creditLimit.toLocaleString()}
</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',
supplier.isActive
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800',
)}
>
{supplier.isActive ? 'Aktif' : 'Pasif'}
</span>
</td>
<td className="px-4 py-3 text-right">
<div className="flex items-center justify-end space-x-2">
<Link
to={`/admin/supplychain/suppliers/${supplier.id}`}
className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="Detayları Görüntüle"
>
<FaEye size={16} />
</Link>
<Link
to={`/admin/supplychain/suppliers/edit/${supplier.id}`}
className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
title="Düzenle"
>
<FaEdit size={16} />
</Link>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{(!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>
<div className="mt-6">
<Link
to="/admin/supplychain/suppliers/new"
className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus size={16} className="mr-2" />
Yeni Tedarikçi Ekle
</Link>
</div>
</div>
)}
</div>
</div>
</Container>
)
}
export default SupplierList