743 lines
31 KiB
TypeScript
743 lines
31 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
||
import { useParams, useNavigate } from 'react-router-dom'
|
||
import {
|
||
FaArrowLeft,
|
||
FaSave,
|
||
FaTimes,
|
||
FaShoppingCart,
|
||
FaCalendar,
|
||
FaDollarSign,
|
||
FaPlus,
|
||
FaTrash,
|
||
FaMapMarkerAlt,
|
||
FaUser,
|
||
} from 'react-icons/fa'
|
||
import { MmPurchaseOrder, OrderStatusEnum, MmPurchaseOrderItem } from '../../../types/mm'
|
||
import { mockMaterials } from '../../../mocks/mockMaterials'
|
||
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
|
||
import { mockPurchaseOrders } from '../../../mocks/mockPurchaseOrders'
|
||
import { Address, PaymentTerms } from '../../../types/common'
|
||
import { Container } from '@/components/shared'
|
||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
import { getOrderStatusText, getPaymentTermsText } from '@/utils/erp'
|
||
import { mockCurrencies } from '@/mocks/mockCurrencies'
|
||
|
||
const OrderManagementForm: React.FC = () => {
|
||
const { id } = useParams<{ id: string }>()
|
||
const navigate = useNavigate()
|
||
const isEdit = id !== undefined && id !== 'new'
|
||
const isView = window.location.pathname.includes('/view/')
|
||
|
||
// Yeni sipariş için başlangıç şablonu
|
||
const newOrderDefaults: Partial<MmPurchaseOrder> = {
|
||
orderNumber: '',
|
||
supplierId: '',
|
||
orderDate: new Date(),
|
||
deliveryDate: new Date(),
|
||
status: OrderStatusEnum.Draft,
|
||
paymentTerms: PaymentTerms.Net30,
|
||
currency: 'TRY',
|
||
exchangeRate: 1,
|
||
subtotal: 0,
|
||
taxAmount: 0,
|
||
totalAmount: 0,
|
||
items: [],
|
||
deliveryAddress: {
|
||
street: '',
|
||
city: '',
|
||
state: '',
|
||
postalCode: '',
|
||
country: 'Türkiye',
|
||
},
|
||
terms: '',
|
||
notes: '',
|
||
receipts: [],
|
||
}
|
||
|
||
// İlk state (isEdit vs new)
|
||
const [formData, setFormData] = useState<Partial<MmPurchaseOrder>>(() => {
|
||
if (isEdit) {
|
||
const po = mockPurchaseOrders.find((o) => o.id === id)
|
||
return { ...po }
|
||
}
|
||
return { ...newOrderDefaults }
|
||
})
|
||
|
||
// id değişirse formu güncelle
|
||
useEffect(() => {
|
||
if (isEdit) {
|
||
const po = mockPurchaseOrders.find((o) => o.id === id)
|
||
setFormData(po ? { ...po } : { ...newOrderDefaults })
|
||
} else {
|
||
setFormData({ ...newOrderDefaults })
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [id, isEdit])
|
||
|
||
const handleInputChange = (
|
||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||
) => {
|
||
const { name, value, type } = e.target
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[name]:
|
||
type === 'number' ? parseFloat(value) || 0 : type === 'date' ? new Date(value) : value,
|
||
}))
|
||
}
|
||
|
||
const handleAddressChange = (field: keyof Address, value: string) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
deliveryAddress: {
|
||
...prev.deliveryAddress!,
|
||
[field]: value,
|
||
},
|
||
}))
|
||
}
|
||
|
||
const addOrderItem = () => {
|
||
const newItem: MmPurchaseOrderItem = {
|
||
id: `item-${Date.now()}`,
|
||
orderId: formData.id || '',
|
||
materialId: '',
|
||
description: '',
|
||
quantity: 0,
|
||
unitPrice: 0,
|
||
totalPrice: 0,
|
||
deliveryDate: new Date(),
|
||
receivedQuantity: 0,
|
||
deliveredQuantity: 0,
|
||
remainingQuantity: 0,
|
||
unit: '',
|
||
}
|
||
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
items: [...(prev.items || []), newItem],
|
||
}))
|
||
}
|
||
|
||
const removeOrderItem = (index: number) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
items: prev.items?.filter((_, i) => i !== index) || [],
|
||
}))
|
||
calculateTotals()
|
||
}
|
||
|
||
const updateOrderItem = (
|
||
index: number,
|
||
field: keyof MmPurchaseOrderItem,
|
||
value: string | number | Date | undefined,
|
||
) => {
|
||
setFormData((prev) => {
|
||
const updatedItems =
|
||
prev.items?.map((item, i) => {
|
||
if (i === index) {
|
||
const updatedItem = { ...item, [field]: value }
|
||
// Auto-calculate total amount when quantity or unit price changes
|
||
if (field === 'quantity' || field === 'unitPrice') {
|
||
updatedItem.totalPrice = (updatedItem.quantity || 0) * (updatedItem.unitPrice || 0)
|
||
updatedItem.remainingQuantity =
|
||
updatedItem.quantity - (updatedItem.receivedQuantity || 0)
|
||
}
|
||
return updatedItem
|
||
}
|
||
return item
|
||
}) || []
|
||
|
||
return {
|
||
...prev,
|
||
items: updatedItems,
|
||
}
|
||
})
|
||
|
||
// Recalculate totals
|
||
setTimeout(calculateTotals, 0)
|
||
}
|
||
|
||
const calculateTotals = () => {
|
||
const subtotal = formData.items?.reduce((sum, item) => sum + (item.totalPrice || 0), 0) || 0
|
||
const taxAmount = subtotal * 0.18 // %18 KDV
|
||
const totalAmount = subtotal + taxAmount
|
||
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
subtotal,
|
||
taxAmount,
|
||
totalAmount,
|
||
}))
|
||
}
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
// TODO: Implement save logic
|
||
console.log('Saving purchase order:', formData)
|
||
navigate(ROUTES_ENUM.protected.supplychain.orders)
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
navigate(ROUTES_ENUM.protected.supplychain.orders)
|
||
}
|
||
|
||
const isReadOnly = isView
|
||
const pageTitle = isEdit
|
||
? 'Satınalma Siparişini Düzenle'
|
||
: isView
|
||
? 'Satınalma Siparişi Detayları'
|
||
: 'Yeni Satınalma Siparişi'
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-lg shadow-md p-2 mb-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center">
|
||
<button
|
||
onClick={handleCancel}
|
||
className="mr-2 p-1.5 text-gray-400 hover:text-gray-600"
|
||
>
|
||
<FaArrowLeft />
|
||
</button>
|
||
<h2 className="text-2xl font-bold text-gray-900">{pageTitle}</h2>
|
||
</div>
|
||
<div className="flex space-x-2">
|
||
<button
|
||
onClick={handleCancel}
|
||
className="px-3 py-1.5 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 flex items-center"
|
||
>
|
||
<FaTimes className="mr-2" />
|
||
{isView ? 'Kapat' : 'İptal'}
|
||
</button>
|
||
{!isView && (
|
||
<button
|
||
onClick={handleSubmit}
|
||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center"
|
||
>
|
||
<FaSave className="mr-2" />
|
||
Kaydet
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||
{/* Ana İçerik */}
|
||
<div className="lg:col-span-2">
|
||
{/* Sipariş Bilgileri */}
|
||
<div className="bg-white rounded-lg shadow-md p-4 mb-4">
|
||
<h3 className="text-base font-medium text-gray-900 mb-3 flex items-center">
|
||
<FaShoppingCart className="mr-2 text-blue-600" />
|
||
Sipariş Bilgileri
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
Sipariş Numarası
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="orderNumber"
|
||
value={formData.orderNumber || ''}
|
||
onChange={handleInputChange}
|
||
readOnly={isReadOnly || isEdit}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="flex items-center text-sm font-medium text-gray-700">
|
||
<FaUser className="mr-1" />
|
||
Tedarikçi
|
||
</label>
|
||
<select
|
||
name="supplierId"
|
||
value={formData.supplierId || ''}
|
||
onChange={handleInputChange}
|
||
disabled={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
required
|
||
>
|
||
<option value="">Tedarikçi Seçiniz</option>
|
||
{mockBusinessParties.map((supplier) => (
|
||
<option key={supplier.id} value={supplier.id}>
|
||
{supplier.name} ({supplier.code})
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="flex items-center text-sm font-medium text-gray-700">
|
||
<FaCalendar className="mr-1" />
|
||
Sipariş Tarihi
|
||
</label>
|
||
<input
|
||
type="date"
|
||
name="orderDate"
|
||
value={
|
||
formData.orderDate
|
||
? new Date(formData.orderDate).toISOString().split('T')[0]
|
||
: ''
|
||
}
|
||
onChange={handleInputChange}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="flex items-center text-sm font-medium text-gray-700">
|
||
<FaCalendar className="mr-1" />
|
||
Teslimat Tarihi
|
||
</label>
|
||
<input
|
||
type="date"
|
||
name="deliveryDate"
|
||
value={
|
||
formData.deliveryDate
|
||
? new Date(formData.deliveryDate).toISOString().split('T')[0]
|
||
: ''
|
||
}
|
||
onChange={handleInputChange}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
Ödeme Koşulları
|
||
</label>
|
||
<select
|
||
name="paymentTerms"
|
||
value={formData.paymentTerms || PaymentTerms.Net30}
|
||
onChange={handleInputChange}
|
||
disabled={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
>
|
||
{Object.values(PaymentTerms).map((term) => (
|
||
<option key={term} value={term}>
|
||
{getPaymentTermsText(term)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Para Birimi</label>
|
||
<select
|
||
name="currency"
|
||
value={formData.currency || 'TRY'}
|
||
onChange={handleInputChange}
|
||
disabled={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
>
|
||
{mockCurrencies.map((currency) => (
|
||
<option key={currency.value} value={currency.value}>
|
||
{currency.value} - {currency.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
Şartlar ve Koşullar
|
||
</label>
|
||
<textarea
|
||
name="terms"
|
||
value={formData.terms || ''}
|
||
onChange={handleInputChange}
|
||
readOnly={isReadOnly}
|
||
rows={2}
|
||
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 className="md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700">Notlar</label>
|
||
<textarea
|
||
name="notes"
|
||
value={formData.notes || ''}
|
||
onChange={handleInputChange}
|
||
readOnly={isReadOnly}
|
||
rows={1}
|
||
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>
|
||
|
||
{/* Teslimat Adresi */}
|
||
<div className="bg-white rounded-lg shadow-md p-4 mb-4">
|
||
<h3 className="text-base font-medium text-gray-900 mb-3 flex items-center">
|
||
<FaMapMarkerAlt className="mr-2 text-green-600" />
|
||
Teslimat Adresi
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div className="md:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700">Adres</label>
|
||
<input
|
||
type="text"
|
||
value={formData.deliveryAddress?.street || ''}
|
||
onChange={(e) => handleAddressChange('street', e.target.value)}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Şehir</label>
|
||
<input
|
||
type="text"
|
||
value={formData.deliveryAddress?.city || ''}
|
||
onChange={(e) => handleAddressChange('city', e.target.value)}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">İl/Bölge</label>
|
||
<input
|
||
type="text"
|
||
value={formData.deliveryAddress?.state || ''}
|
||
onChange={(e) => handleAddressChange('state', e.target.value)}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Posta Kodu</label>
|
||
<input
|
||
type="text"
|
||
value={formData.deliveryAddress?.postalCode || ''}
|
||
onChange={(e) => handleAddressChange('postalCode', e.target.value)}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Ülke</label>
|
||
<input
|
||
type="text"
|
||
value={formData.deliveryAddress?.country || ''}
|
||
onChange={(e) => handleAddressChange('country', e.target.value)}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sipariş Kalemleri */}
|
||
<div className="bg-white rounded-lg shadow-md p-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-lg font-medium text-gray-900">Sipariş Kalemleri</h3>
|
||
{!isReadOnly && (
|
||
<button
|
||
type="button"
|
||
onClick={addOrderItem}
|
||
className="px-2.5 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center"
|
||
>
|
||
<FaPlus className="mr-2" />
|
||
Kalem Ekle
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{formData.items?.map((item, index) => (
|
||
<div key={item.id} className="border rounded-lg p-3 bg-gray-50">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm font-medium text-gray-700">Kalem {index + 1}</span>
|
||
{!isReadOnly && (
|
||
<button
|
||
type="button"
|
||
onClick={() => removeOrderItem(index)}
|
||
className="text-red-600 hover:text-red-800"
|
||
>
|
||
<FaTrash />
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">Malzeme</label>
|
||
<select
|
||
value={item.materialId}
|
||
onChange={(e) => updateOrderItem(index, 'materialId', e.target.value)}
|
||
disabled={isReadOnly}
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
>
|
||
<option value="">Malzeme Seçiniz</option>
|
||
{mockMaterials.map((material) => (
|
||
<option key={material.id} value={material.id}>
|
||
{material.name} ({material.code})
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="lg:col-span-2">
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Açıklama
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={item.description}
|
||
onChange={(e) => updateOrderItem(index, 'description', e.target.value)}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">Miktar</label>
|
||
<input
|
||
type="number"
|
||
value={item.quantity}
|
||
onChange={(e) =>
|
||
updateOrderItem(index, 'quantity', parseFloat(e.target.value) || 0)
|
||
}
|
||
readOnly={isReadOnly}
|
||
min="0"
|
||
step="0.01"
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Birim Fiyat
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={item.unitPrice}
|
||
onChange={(e) =>
|
||
updateOrderItem(index, 'unitPrice', parseFloat(e.target.value) || 0)
|
||
}
|
||
readOnly={isReadOnly}
|
||
min="0"
|
||
step="0.01"
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Toplam Tutar
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={item.totalPrice}
|
||
readOnly
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 bg-gray-100"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Teslimat Tarihi
|
||
</label>
|
||
<input
|
||
type="date"
|
||
value={
|
||
item.deliveryDate
|
||
? new Date(item.deliveryDate).toISOString().split('T')[0]
|
||
: ''
|
||
}
|
||
onChange={(e) =>
|
||
updateOrderItem(index, 'deliveryDate', new Date(e.target.value))
|
||
}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Teslim Alınan Miktar
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={item.receivedQuantity}
|
||
onChange={(e) =>
|
||
updateOrderItem(
|
||
index,
|
||
'receivedQuantity',
|
||
parseFloat(e.target.value) || 0,
|
||
)
|
||
}
|
||
readOnly={isReadOnly}
|
||
min="0"
|
||
step="0.01"
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Kalan Miktar
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={item.remainingQuantity}
|
||
readOnly
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 bg-gray-100"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2 lg:col-span-3">
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Spesifikasyonlar
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={item.specifications || ''}
|
||
onChange={(e) =>
|
||
updateOrderItem(index, 'specifications', e.target.value)
|
||
}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2 lg:col-span-3">
|
||
<label className="block text-xs font-medium text-gray-600">
|
||
Kalite Gereksinimleri
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={item.qualityRequirements || ''}
|
||
onChange={(e) =>
|
||
updateOrderItem(index, 'qualityRequirements', e.target.value)
|
||
}
|
||
readOnly={isReadOnly}
|
||
className="mt-1 block w-full text-sm border border-gray-300 rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{formData.items?.length === 0 && (
|
||
<div className="text-center text-gray-500 text-sm py-6">
|
||
Henüz sipariş kalemi eklenmedi
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Yan Panel */}
|
||
<div className="space-y-4">
|
||
{/* Durum ve Tutar */}
|
||
<div className="bg-white rounded-lg shadow-md p-4">
|
||
<h3 className="text-lg font-medium text-gray-900 mb-3">Durum Bilgileri</h3>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Durum</label>
|
||
<select
|
||
name="status"
|
||
value={formData.status || OrderStatusEnum.Draft}
|
||
onChange={handleInputChange}
|
||
disabled={isReadOnly}
|
||
className="mt-1 block w-full border border-gray-300 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||
>
|
||
{Object.values(OrderStatusEnum).map((status) => (
|
||
<option key={status} value={status}>
|
||
{getOrderStatusText(status)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Döviz Kuru</label>
|
||
<input
|
||
type="number"
|
||
name="exchangeRate"
|
||
value={formData.exchangeRate || 1}
|
||
onChange={handleInputChange}
|
||
readOnly={isReadOnly}
|
||
min="0"
|
||
step="0.0001"
|
||
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>
|
||
|
||
{/* Tutar Özeti */}
|
||
<div className="bg-white rounded-lg shadow-md p-4">
|
||
<h3 className="text-base font-medium text-gray-900 mb-3 flex items-center">
|
||
<FaDollarSign className="mr-2 text-green-600" />
|
||
Tutar Özeti
|
||
</h3>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-600">Ara Toplam:</span>
|
||
<span className="text-sm font-medium">
|
||
{formData.subtotal?.toLocaleString()} {formData.currency}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-600">KDV (%18):</span>
|
||
<span className="text-sm font-medium">
|
||
{formData.taxAmount?.toLocaleString()} {formData.currency}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="border-t pt-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-lg font-medium text-gray-900">Genel Toplam:</span>
|
||
<span className="text-lg font-bold text-green-600">
|
||
{formData.totalAmount?.toLocaleString()} {formData.currency}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sipariş Geçmişi (sadece görüntüleme) */}
|
||
{isView && formData.receipts && formData.receipts.length > 0 && (
|
||
<div className="bg-white rounded-lg shadow-md p-4">
|
||
<h3 className="text-base font-medium text-gray-900 mb-3">Teslimat Geçmişi</h3>
|
||
|
||
<div className="space-y-2">
|
||
{formData.receipts.map((receipt) => (
|
||
<div key={receipt.id} className="border-l-4 border-green-500 pl-4">
|
||
<div className="text-sm font-medium text-gray-900">
|
||
{receipt.receiptNumber}
|
||
</div>
|
||
<div className="text-xs text-gray-500">
|
||
{new Date(receipt.receiptDate).toLocaleDateString('tr-TR')}
|
||
</div>
|
||
<div className="text-xs text-gray-600">Durumu: {receipt.status}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default OrderManagementForm
|