449 lines
20 KiB
TypeScript
449 lines
20 KiB
TypeScript
import React, { useMemo } from 'react'
|
||
import { useParams, useNavigate } from 'react-router-dom'
|
||
import { useQuery } from '@tanstack/react-query'
|
||
import { mockProductionOrders } from '../../../mocks/mockProductionOrders'
|
||
import { MrpProductionOrder, MrpProductionOrderMaterial } from '../../../types/mrp'
|
||
import {
|
||
FaCog,
|
||
FaCalendarAlt,
|
||
FaClipboardList,
|
||
FaTruck,
|
||
FaMoneyBillWave,
|
||
FaArrowLeft,
|
||
FaExclamationTriangle,
|
||
} from 'react-icons/fa'
|
||
import StatusBadge from '../../../components/common/StatusBadge'
|
||
import { getPriorityColor } from '../../../utils/erp'
|
||
import { Container } from '@/components/shared'
|
||
|
||
const ProductionOrderView: React.FC = () => {
|
||
const { id } = useParams()
|
||
const navigate = useNavigate()
|
||
|
||
const { data: productionOrder, isLoading } = useQuery({
|
||
queryKey: ['production-order', id],
|
||
queryFn: async () => {
|
||
await new Promise((r) => setTimeout(r, 200))
|
||
return mockProductionOrders.find((p) => p.id === id) as MrpProductionOrder | undefined
|
||
},
|
||
enabled: !!id,
|
||
})
|
||
|
||
const materials: MrpProductionOrderMaterial[] = useMemo(
|
||
() => productionOrder?.materials || [],
|
||
[productionOrder],
|
||
)
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="flex justify-center items-center min-h-screen">
|
||
<div className="flex flex-col items-center space-y-4">
|
||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600"></div>
|
||
<p className="text-gray-600 font-medium">Üretim emri yükleniyor...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!productionOrder) {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
|
||
<div className="text-center bg-white p-8 rounded-2xl shadow-xl max-w-md">
|
||
<div className="mb-6">
|
||
<FaExclamationTriangle className="mx-auto h-16 w-16 text-gray-400" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-2">Üretim Emri Bulunamadı</h2>
|
||
<p className="text-gray-600 mb-6">
|
||
İstenen üretim emri mevcut değil veya silinmiş olabilir.
|
||
</p>
|
||
<button
|
||
onClick={() => navigate('/admin/mrp/production-orders')}
|
||
className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-medium rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl"
|
||
>
|
||
<FaArrowLeft className="mr-2" />
|
||
Üretim Emirleri Listesine Dön
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const getProgressPercentage = () => {
|
||
if (productionOrder.plannedQuantity === 0) return 0
|
||
return Math.round((productionOrder.confirmedQuantity / productionOrder.plannedQuantity) * 100)
|
||
}
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
{/* Header */}
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<button
|
||
onClick={() => navigate('/admin/mrp/production-orders')}
|
||
className="inline-flex items-center px-3 py-2 bg-white text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-sm border border-gray-200"
|
||
>
|
||
<FaArrowLeft className="mr-2 text-sm" />
|
||
Geri
|
||
</button>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">Üretim Emri Detayları</h1>
|
||
<p className="text-gray-600 mt-1 text-sm">
|
||
{productionOrder.orderNumber} - Detaylı bilgiler
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order Header Card */}
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 mb-4">
|
||
<div className="flex flex-wrap justify-between items-start mb-4">
|
||
<div className="space-y-2">
|
||
<div className="text-sm font-medium text-gray-500 uppercase tracking-wide">
|
||
Üretim Emri No
|
||
</div>
|
||
<div className="text-xl font-bold text-gray-900">{productionOrder.orderNumber}</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 text-right">
|
||
<div className="text-sm font-medium text-gray-500 uppercase tracking-wide">Durum</div>
|
||
<StatusBadge status={productionOrder.status} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-4 rounded-xl border border-blue-200">
|
||
<div className="text-sm font-medium text-blue-700 mb-2 uppercase tracking-wide">
|
||
Öncelik
|
||
</div>
|
||
<span
|
||
className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold border ${getPriorityColor(
|
||
productionOrder.priority,
|
||
)}`}
|
||
>
|
||
{productionOrder.priority}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-br from-purple-50 to-purple-100 p-4 rounded-xl border border-purple-200">
|
||
<div className="text-sm font-medium text-purple-700 mb-2 uppercase tracking-wide">
|
||
Tür
|
||
</div>
|
||
<div className="text-base font-semibold text-purple-900">
|
||
{productionOrder.orderType}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-br from-orange-50 to-orange-100 p-4 rounded-xl border border-orange-200">
|
||
<div className="text-sm font-medium text-orange-700 mb-2 uppercase tracking-wide">
|
||
İlerleme
|
||
</div>
|
||
<div className="text-xl font-bold text-orange-900">{getProgressPercentage()}%</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Progress Bar */}
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="text-sm font-medium text-gray-700">Üretim İlerlemesi</div>
|
||
<div className="text-sm text-gray-500">
|
||
{productionOrder.confirmedQuantity} / {productionOrder.plannedQuantity} adet
|
||
</div>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
|
||
<div
|
||
className="bg-gradient-to-r from-blue-500 to-blue-600 h-3 rounded-full transition-all duration-500 ease-out"
|
||
style={{ width: `${getProgressPercentage()}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
{productionOrder.customerRequirement && (
|
||
<div className="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
|
||
<div className="flex items-center mb-3">
|
||
<FaClipboardList className="text-blue-600 mr-2" />
|
||
<div className="text-sm font-semibold text-blue-800 uppercase tracking-wide">
|
||
Müşteri Talebi
|
||
</div>
|
||
</div>
|
||
<p className="text-blue-700 leading-relaxed">{productionOrder.customerRequirement}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Info Cards Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||
{/* Quantities Card */}
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="p-1.5 bg-blue-100 rounded-lg">
|
||
<FaCog className="text-blue-600 text-base" />
|
||
</div>
|
||
<h3 className="text-base font-bold text-gray-900">Miktar Bilgileri</h3>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between items-center py-1.5 border-b border-gray-100">
|
||
<span className="text-gray-600 font-medium">Planlanan:</span>
|
||
<span className="font-bold text-gray-900">{productionOrder.plannedQuantity}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-1.5 border-b border-gray-100">
|
||
<span className="text-gray-600 font-medium">Üretilen:</span>
|
||
<span className="font-bold text-green-600">
|
||
{productionOrder.confirmedQuantity}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-1.5 border-b border-gray-100">
|
||
<span className="text-gray-600 font-medium">Gereken:</span>
|
||
<span className="font-bold text-blue-600">{productionOrder.requiredQuantity}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2">
|
||
<span className="text-gray-600 font-medium">Fire:</span>
|
||
<span className="font-bold text-red-600">{productionOrder.scrapQuantity}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Schedule Card */}
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="p-1.5 bg-purple-100 rounded-lg">
|
||
<FaCalendarAlt className="text-purple-600 text-base" />
|
||
</div>
|
||
<h3 className="text-base font-bold text-gray-900">Zamanlama</h3>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Plan Başlangıç
|
||
</div>
|
||
<div className="font-semibold text-gray-900">
|
||
{new Date(productionOrder.plannedStartDate).toLocaleDateString('tr-TR', {
|
||
weekday: 'long',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Plan Bitiş
|
||
</div>
|
||
<div className="font-semibold text-gray-900">
|
||
{new Date(productionOrder.plannedEndDate).toLocaleDateString('tr-TR', {
|
||
weekday: 'long',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
{productionOrder.actualStartDate && (
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Gerçek Başlangıç
|
||
</div>
|
||
<div className="font-semibold text-green-600">
|
||
{new Date(productionOrder.actualStartDate).toLocaleDateString('tr-TR', {
|
||
weekday: 'long',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{productionOrder.actualEndDate && (
|
||
<div className="py-1.5">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Gerçek Bitiş
|
||
</div>
|
||
<div className="font-semibold text-green-600">
|
||
{new Date(productionOrder.actualEndDate).toLocaleDateString('tr-TR', {
|
||
weekday: 'long',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Costs Card */}
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="p-1.5 bg-green-100 rounded-lg">
|
||
<FaMoneyBillWave className="text-green-600 text-base" />
|
||
</div>
|
||
<h3 className="text-base font-bold text-gray-900">Maliyet Bilgileri</h3>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Planlanan Maliyet
|
||
</div>
|
||
<div className="text-lg font-bold text-gray-900">
|
||
{new Intl.NumberFormat('tr-TR', {
|
||
style: 'currency',
|
||
currency: productionOrder.currency,
|
||
}).format(productionOrder.plannedCost)}
|
||
</div>
|
||
</div>
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Gerçekleşen Maliyet
|
||
</div>
|
||
<div className="text-lg font-bold text-green-600">
|
||
{new Intl.NumberFormat('tr-TR', {
|
||
style: 'currency',
|
||
currency: productionOrder.currency,
|
||
}).format(productionOrder.actualCost)}
|
||
</div>
|
||
</div>
|
||
<div className="py-1.5">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Para Birimi
|
||
</div>
|
||
<div className="font-semibold text-gray-900">{productionOrder.currency}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Metadata Card */}
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="p-1.5 bg-gray-100 rounded-lg">
|
||
<FaClipboardList className="text-gray-600 text-base" />
|
||
</div>
|
||
<h3 className="text-base font-bold text-gray-900">Sistem Bilgileri</h3>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Oluşturulma
|
||
</div>
|
||
<div className="font-semibold text-gray-900">
|
||
{new Date(productionOrder.creationTime).toLocaleDateString('tr-TR', {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="py-1.5 border-b border-gray-100">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Son Güncelleme
|
||
</div>
|
||
<div className="font-semibold text-gray-900">
|
||
{new Date(productionOrder.lastModificationTime).toLocaleDateString('tr-TR', {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Materials List */}
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className="p-1.5 bg-indigo-100 rounded-lg">
|
||
<FaTruck className="text-indigo-600 text-base" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-base font-bold text-gray-900">Malzemeler</h3>
|
||
<p className="text-gray-600 mt-1 text-sm">Üretim emrine bağlı malzeme satırları</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-lg font-bold text-indigo-600">{materials.length}</div>
|
||
<div className="text-sm text-gray-500">Malzeme</div>
|
||
</div>
|
||
</div>
|
||
|
||
{materials.length === 0 ? (
|
||
<div className="p-8 text-center bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-dashed border-gray-300">
|
||
<FaTruck className="mx-auto h-16 w-16 text-gray-400 mb-4" />
|
||
<p className="text-gray-500 text-base font-medium">
|
||
Bu üretim emrine bağlı malzeme bulunmamaktadır.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||
{materials.map((m: MrpProductionOrderMaterial) => (
|
||
<div
|
||
key={m.id}
|
||
className="flex flex-col lg:flex-row lg:items-center justify-between p-4 border border-gray-200 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:border-blue-300 transition-all duration-200 group"
|
||
>
|
||
<div className="mb-4 lg:mb-0 flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="p-1.5 bg-blue-100 rounded-lg group-hover:bg-blue-200 transition-colors">
|
||
<FaTruck className="text-blue-600" />
|
||
</div>
|
||
<div>
|
||
<div className="text-gray-600">
|
||
{m.salesOrder?.orderNumber || m.salesOrder?.id}
|
||
</div>
|
||
<div className="font-bold text-gray-900 text-base">
|
||
{m.material?.code || m.materialId}
|
||
{' - '}
|
||
{m.material?.name || 'Malzeme adı bulunamadı'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{m.customerRequirement && (
|
||
<div className="text-sm text-blue-600 italic rounded-lg mt-3">
|
||
"{m.customerRequirement}"
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4">
|
||
<div className="text-center p-2 bg-gray-50 rounded-lg">
|
||
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
|
||
Planlanan
|
||
</div>
|
||
<div className="font-bold text-gray-900 text-base">{m.plannedQuantity}</div>
|
||
</div>
|
||
|
||
<div className="text-center p-2 bg-green-50 rounded-lg">
|
||
<div className="text-xs font-medium text-green-600 uppercase tracking-wide mb-1">
|
||
Üretilen
|
||
</div>
|
||
<div className="font-bold text-green-700 text-base">
|
||
{m.confirmedQuantity}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-center p-2 bg-blue-50 rounded-lg">
|
||
<div className="text-xs font-medium text-blue-600 uppercase tracking-wide mb-1">
|
||
Gereken
|
||
</div>
|
||
<div className="font-bold text-blue-700 text-base">{m.requiredQuantity}</div>
|
||
</div>
|
||
|
||
<div className="text-center p-2 bg-red-50 rounded-lg">
|
||
<div className="text-xs font-medium text-red-600 uppercase tracking-wide mb-1">
|
||
Fire
|
||
</div>
|
||
<div className="font-bold text-red-700 text-base">{m.scrapQuantity}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default ProductionOrderView
|