491 lines
21 KiB
TypeScript
491 lines
21 KiB
TypeScript
import React, { useState } from 'react'
|
||
import {
|
||
FaSearch,
|
||
FaMapMarkerAlt,
|
||
FaExclamationTriangle,
|
||
FaCheckCircle,
|
||
FaEye,
|
||
FaTh,
|
||
FaList,
|
||
} from 'react-icons/fa'
|
||
import { mockWarehouses } from '../../../mocks/mockWarehouses'
|
||
import { mockLocations } from '../../../mocks/mockLocations'
|
||
import { mockStockItems } from '../../../mocks/mockStockItems'
|
||
import { getStockStatusColor, getStockStatusText } from '../../../utils/erp'
|
||
import { Container } from '@/components/shared'
|
||
|
||
const LocationTracking: React.FC = () => {
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [selectedWarehouse, setSelectedWarehouse] = useState<string>('')
|
||
const [selectedLocation, setSelectedLocation] = useState<string>('')
|
||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
|
||
|
||
const getLocationUtilization = (locationId: string) => {
|
||
const location = mockLocations.find((l) => l.id === locationId)
|
||
if (!location) return 0
|
||
return (location.currentStock / location.capacity) * 100
|
||
}
|
||
|
||
const getLocationStockItems = (locationId: string) => {
|
||
return mockStockItems.filter((item) => item.locationId === locationId)
|
||
}
|
||
|
||
const filteredLocations = mockLocations.filter((location) => {
|
||
const matchesSearch =
|
||
location.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
location.locationCode.toLowerCase().includes(searchTerm.toLowerCase())
|
||
const matchesWarehouse = selectedWarehouse === '' || location.warehouseId === selectedWarehouse
|
||
return matchesSearch && matchesWarehouse
|
||
})
|
||
|
||
const GridView = () => (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredLocations.map((location) => {
|
||
const warehouse = mockWarehouses.find((w) => w.id === location.warehouseId)
|
||
const locationStockItems = getLocationStockItems(location.id)
|
||
const utilization = getLocationUtilization(location.id)
|
||
|
||
return (
|
||
<div
|
||
key={location.id}
|
||
className="bg-white rounded-lg shadow-sm border border-gray-200 p-3"
|
||
>
|
||
<div className="flex items-start justify-between mb-3">
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 bg-blue-100 rounded-lg">
|
||
<FaMapMarkerAlt className="w-5 h-5 text-blue-600" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-medium text-gray-900">{location.name}</h3>
|
||
<p className="text-sm text-gray-500">{location.locationCode}</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => setSelectedLocation(location.id)}
|
||
className="text-blue-600 hover:text-blue-700"
|
||
>
|
||
<FaEye className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-3 pt-2">
|
||
<div className="text-sm text-gray-600">
|
||
<p>
|
||
<strong>Depo:</strong> {warehouse?.name}
|
||
</p>
|
||
<p>{location.description}</p>
|
||
</div>
|
||
|
||
{/* Utilization */}
|
||
<div className="space-y-1">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-600">Doluluk Oranı</span>
|
||
<span className="font-medium">%{Math.round(utilization)}</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||
<div
|
||
className={`h-2 rounded-full ${
|
||
utilization > 90
|
||
? 'bg-red-500'
|
||
: utilization > 70
|
||
? 'bg-yellow-500'
|
||
: 'bg-green-500'
|
||
}`}
|
||
style={{ width: `${utilization}%` }}
|
||
/>
|
||
</div>
|
||
<div className="text-xs text-gray-500">
|
||
{location.currentStock} / {location.capacity} birim
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stock Items Summary */}
|
||
<div className="bg-gray-50 rounded-lg p-2">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<h4 className="text-sm font-medium text-gray-900">Malzemeler</h4>
|
||
<span className="text-xs text-gray-500">{locationStockItems.length} çeşit</span>
|
||
</div>
|
||
|
||
{locationStockItems.length > 0 ? (
|
||
<div className="space-y-1">
|
||
{locationStockItems.slice(0, 3).map((item) => (
|
||
<div key={item.id} className="flex justify-between items-center text-xs">
|
||
<span className="text-gray-700 truncate">
|
||
{item.material?.code || 'N/A'}
|
||
</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-medium">{item.quantity}</span>
|
||
<span
|
||
className={`px-1.5 py-0.5 rounded-full text-xs ${getStockStatusColor(
|
||
item.status,
|
||
)}`}
|
||
>
|
||
{getStockStatusText(item.status)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{locationStockItems.length > 3 && (
|
||
<div className="text-xs text-gray-500 text-center pt-1">
|
||
+{locationStockItems.length - 3} malzeme daha
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="text-xs text-gray-500 text-center py-2">Malzeme bulunmuyor</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Restrictions */}
|
||
{location.restrictions && location.restrictions.length > 0 && (
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-900 mb-1">Kısıtlamalar</h4>
|
||
<div className="flex flex-wrap gap-1">
|
||
{location.restrictions.slice(0, 2).map((restriction, index) => (
|
||
<span
|
||
key={index}
|
||
className="inline-flex px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded"
|
||
>
|
||
{restriction}
|
||
</span>
|
||
))}
|
||
{location.restrictions.length > 2 && (
|
||
<span className="inline-flex px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded">
|
||
+{location.restrictions.length - 2}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between pt-3 mt-3 border-t border-gray-100">
|
||
<div className="flex items-center gap-2">
|
||
{location.isActive ? (
|
||
<>
|
||
<FaCheckCircle className="w-4 h-4 text-green-500" />
|
||
<span className="text-sm text-green-600">Aktif</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<FaExclamationTriangle className="w-4 h-4 text-red-500" />
|
||
<span className="text-sm text-red-600">Pasif</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="text-xs text-gray-500">
|
||
Son hareket:{' '}
|
||
{locationStockItems.length > 0
|
||
? new Date(
|
||
Math.max(
|
||
...locationStockItems.map((item) => item.lastMovementDate.getTime()),
|
||
),
|
||
).toLocaleDateString('tr-TR')
|
||
: 'N/A'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
|
||
const ListView = () => (
|
||
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full divide-y divide-gray-200">
|
||
<thead className="bg-gray-50">
|
||
<tr>
|
||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Lokasyon
|
||
</th>
|
||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Depo
|
||
</th>
|
||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Doluluk
|
||
</th>
|
||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Malzeme Çeşidi
|
||
</th>
|
||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Son Hareket
|
||
</th>
|
||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Durum
|
||
</th>
|
||
<th className="px-3 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">
|
||
{filteredLocations.map((location) => {
|
||
const warehouse = mockWarehouses.find((w) => w.id === location.warehouseId)
|
||
const locationStockItems = getLocationStockItems(location.id)
|
||
const utilization = getLocationUtilization(location.id)
|
||
|
||
return (
|
||
<tr key={location.id} className="hover:bg-gray-50">
|
||
<td className="px-3 py-2 whitespace-nowrap">
|
||
<div className="flex items-center">
|
||
<div className="p-2 bg-blue-100 rounded-lg mr-3">
|
||
<FaMapMarkerAlt className="w-4 h-4 text-blue-600" />
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-medium text-gray-900">{location.name}</div>
|
||
<div className="text-sm text-gray-500">{location.locationCode}</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-3 py-2 whitespace-nowrap">
|
||
<div className="text-sm text-gray-900">{warehouse?.name}</div>
|
||
<div className="text-sm text-gray-500">{warehouse?.code}</div>
|
||
</td>
|
||
<td className="px-3 py-2 whitespace-nowrap">
|
||
<div className="flex items-center">
|
||
<div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
|
||
<div
|
||
className={`h-2 rounded-full ${
|
||
utilization > 90
|
||
? 'bg-red-500'
|
||
: utilization > 70
|
||
? 'bg-yellow-500'
|
||
: 'bg-green-500'
|
||
}`}
|
||
style={{ width: `${utilization}%` }}
|
||
/>
|
||
</div>
|
||
<span className="text-sm text-gray-900">%{Math.round(utilization)}</span>
|
||
</div>
|
||
<div className="text-xs text-gray-500">
|
||
{location.currentStock} / {location.capacity}
|
||
</div>
|
||
</td>
|
||
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
|
||
{locationStockItems.length} çeşit
|
||
</td>
|
||
<td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
|
||
{locationStockItems.length > 0
|
||
? new Date(
|
||
Math.max(
|
||
...locationStockItems.map((item) => item.lastMovementDate.getTime()),
|
||
),
|
||
).toLocaleDateString('tr-TR')
|
||
: 'N/A'}
|
||
</td>
|
||
<td className="px-3 py-2 whitespace-nowrap">
|
||
{location.isActive ? (
|
||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||
<FaCheckCircle className="w-3 h-3 mr-1" />
|
||
Aktif
|
||
</span>
|
||
) : (
|
||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
||
<FaExclamationTriangle className="w-3 h-3 mr-1" />
|
||
Pasif
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
|
||
<button
|
||
onClick={() => setSelectedLocation(location.id)}
|
||
className="text-blue-600 hover:text-blue-900"
|
||
>
|
||
<FaEye className="w-4 h-4" />
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const LocationDetailModal = () => {
|
||
const location = mockLocations.find((l) => l.id === selectedLocation)
|
||
const locationStockItems = getLocationStockItems(selectedLocation)
|
||
|
||
if (!selectedLocation || !location) return null
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||
<div
|
||
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||
onClick={() => setSelectedLocation('')}
|
||
/>
|
||
|
||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
|
||
<div className="bg-white px-4 pt-4 pb-4 sm:p-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-lg font-medium text-gray-900">{location.name} - Detaylar</h3>
|
||
<button
|
||
onClick={() => setSelectedLocation('')}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M6 18L18 6M6 6l12 12"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* Location Info */}
|
||
<div className="bg-gray-50 rounded-lg p-3">
|
||
<h4 className="font-medium text-gray-900 mb-3">Lokasyon Bilgileri</h4>
|
||
<div className="space-y-2 text-sm">
|
||
<div>
|
||
<strong>Kod:</strong> {location.locationCode}
|
||
</div>
|
||
<div>
|
||
<strong>Açıklama:</strong> {location.description}
|
||
</div>
|
||
<div>
|
||
<strong>Tip:</strong> {location.locationType}
|
||
</div>
|
||
<div>
|
||
<strong>Kapasite:</strong> {location.capacity} birim
|
||
</div>
|
||
<div>
|
||
<strong>Mevcut Stok:</strong> {location.currentStock} birim
|
||
</div>
|
||
{location.dimensions && (
|
||
<div>
|
||
<strong>Boyutlar:</strong> {location.dimensions.length}x
|
||
{location.dimensions.width}x{location.dimensions.height}m
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stock Items */}
|
||
<div className="bg-gray-50 rounded-lg p-3">
|
||
<h4 className="font-medium text-gray-900 mb-3">
|
||
Stok Malzemeleri ({locationStockItems.length})
|
||
</h4>
|
||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||
{locationStockItems.map((item) => (
|
||
<div key={item.id} className="bg-white rounded p-3 border">
|
||
<div className="flex justify-between items-start mb-2">
|
||
<div>
|
||
<div className="font-medium text-sm">{item.material?.code}</div>
|
||
<div className="text-xs text-gray-500">{item.material?.code}</div>
|
||
</div>
|
||
<span
|
||
className={`px-2 py-1 rounded-full text-xs ${getStockStatusColor(
|
||
item.status,
|
||
)}`}
|
||
>
|
||
{getStockStatusText(item.status)}
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
|
||
<div>
|
||
Miktar: {item.quantity} {item.unitId}
|
||
</div>
|
||
<div>
|
||
Mevcut: {item.availableQuantity} {item.unitId}
|
||
</div>
|
||
<div>
|
||
Rezerve: {item.reservedQuantity} {item.unitId}
|
||
</div>
|
||
<div>Lot: {item.lotNumber || 'N/A'}</div>
|
||
</div>
|
||
<div className="mt-2 text-xs text-gray-500">
|
||
Son hareket: {item.lastMovementDate.toLocaleDateString('tr-TR')}
|
||
</div>
|
||
</div>
|
||
))}
|
||
{locationStockItems.length === 0 && (
|
||
<div className="text-sm text-gray-500 text-center py-4">
|
||
Bu lokasyonda malzeme bulunmuyor
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Container>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900">Raf/Lokasyon Bazlı Takip</h2>
|
||
<p className="text-gray-600">Lokasyonlardaki stok durumunu takip edin</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => setViewMode('grid')}
|
||
className={`p-1.5 rounded-lg ${
|
||
viewMode === 'grid'
|
||
? 'bg-blue-100 text-blue-600'
|
||
: 'text-gray-400 hover:text-gray-600'
|
||
}`}
|
||
>
|
||
<FaTh className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`p-1.5 rounded-lg ${
|
||
viewMode === 'list'
|
||
? 'bg-blue-100 text-blue-600'
|
||
: 'text-gray-400 hover:text-gray-600'
|
||
}`}
|
||
>
|
||
<FaList className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
<div className="relative flex-1">
|
||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||
<input
|
||
type="text"
|
||
placeholder="Lokasyon ara..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-10 pr-4 py-1.5 text-sm w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<select
|
||
value={selectedWarehouse}
|
||
onChange={(e) => setSelectedWarehouse(e.target.value)}
|
||
className="px-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="">Tüm Depolar</option>
|
||
{mockWarehouses.map((warehouse) => (
|
||
<option key={warehouse.id} value={warehouse.id}>
|
||
{warehouse.name} ({warehouse.code})
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
{viewMode === 'grid' ? <GridView /> : <ListView />}
|
||
</div>
|
||
|
||
{/* Location Detail Modal */}
|
||
<LocationDetailModal />
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default LocationTracking
|