You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1078 lines
66 KiB
HTML
1078 lines
66 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Depot Management Interface | Container Depot</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.sidebar {
|
|
background: linear-gradient(180deg, #0f4c81 0%, #1a6baf 100%);
|
|
transition: all 0.3s;
|
|
}
|
|
.content-area {
|
|
transition: all 0.3s;
|
|
}
|
|
.nav-item {
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.nav-item.active {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-left: 4px solid white;
|
|
}
|
|
.card {
|
|
transition: all 0.3s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.tab {
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.form-section {
|
|
animation: slideIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.yard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, minmax(60px, 1fr));
|
|
gap: 4px;
|
|
}
|
|
.yard-cell {
|
|
aspect-ratio: 1/1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
.yard-cell:hover {
|
|
transform: scale(1.05);
|
|
z-index: 10;
|
|
}
|
|
.yard-cell.empty {
|
|
background-color: #e5e7eb;
|
|
color: #9ca3af;
|
|
}
|
|
.yard-cell.occupied {
|
|
background-color: #93c5fd;
|
|
color: #1e40af;
|
|
}
|
|
.yard-cell.damaged {
|
|
background-color: #fca5a5;
|
|
color: #991b1b;
|
|
}
|
|
.yard-cell.selected {
|
|
outline: 3px solid #2563eb;
|
|
z-index: 20;
|
|
}
|
|
.yard-cell.repair {
|
|
background-color: #fde68a;
|
|
color: #92400e;
|
|
}
|
|
.yard-cell.reserved {
|
|
background-color: #a7f3d0;
|
|
color: #065f46;
|
|
}
|
|
.yard-cell-tooltip {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
z-index: 30;
|
|
}
|
|
.yard-cell:hover .yard-cell-tooltip {
|
|
opacity: 1;
|
|
}
|
|
.yard-row-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
color: #4b5563;
|
|
}
|
|
.yard-col-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
color: #4b5563;
|
|
}
|
|
.container-type-indicator {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.container-type-20dv {
|
|
background-color: #3b82f6;
|
|
}
|
|
.container-type-40dv {
|
|
background-color: #10b981;
|
|
}
|
|
.container-type-40hc {
|
|
background-color: #8b5cf6;
|
|
}
|
|
.container-type-reefer {
|
|
background-color: #f59e0b;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
height: 200px;
|
|
}
|
|
.chart-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 40px;
|
|
background-color: #3b82f6;
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 1s ease-in-out;
|
|
}
|
|
.chart-label {
|
|
position: absolute;
|
|
bottom: -25px;
|
|
width: 40px;
|
|
text-align: center;
|
|
font-size: 0.7rem;
|
|
color: #4b5563;
|
|
}
|
|
.chart-value {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
width: 40px;
|
|
text-align: center;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: #1e40af;
|
|
}
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 50;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.modal.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.modal-content {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
transform: translateY(20px);
|
|
transition: transform 0.3s;
|
|
}
|
|
.modal.active .modal-content {
|
|
transform: translateY(0);
|
|
}
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
background-color: #ef4444;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 0.7rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar w-64 h-full text-white flex flex-col">
|
|
<div class="p-5 border-b border-blue-700">
|
|
<h1 class="text-xl font-bold">Container Depot</h1>
|
|
<p class="text-sm text-blue-200">Management Portal</p>
|
|
</div>
|
|
|
|
<nav class="flex-grow py-4">
|
|
<div class="px-4 py-2 text-xs text-blue-300 uppercase tracking-wider">Operations</div>
|
|
<a href="#" class="nav-item active flex items-center px-6 py-3 text-white" id="dashboardNav">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
Dashboard
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white" id="yardNav">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
Yard Management
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white" id="inventoryNav">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
Inventory
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
|
</svg>
|
|
Gate Operations
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
Customers
|
|
</a>
|
|
|
|
<div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">Reports</div>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
Analytics
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Activity Log
|
|
</a>
|
|
|
|
<div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">System</div>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Settings
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Help
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-blue-700">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
|
|
DM
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium">Sarah Johnson</p>
|
|
<p class="text-xs text-blue-300">Depot Manager</p>
|
|
</div>
|
|
<button class="ml-auto text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="content-area flex-1 overflow-y-auto">
|
|
<!-- Top Navigation -->
|
|
<header class="bg-white shadow-sm">
|
|
<div class="flex items-center justify-between px-6 py-4">
|
|
<div class="flex items-center">
|
|
<h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative">
|
|
<span class="absolute top-0 right-0 -mt-1 -mr-1 flex h-4 w-4">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-xs text-white justify-center items-center">5</span>
|
|
</span>
|
|
<button class="text-gray-500 hover:text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="relative">
|
|
<input type="text" placeholder="Search..." class="px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-64">
|
|
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div id="dashboardContent" class="tab-content active p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
|
<div class="bg-white rounded-lg shadow p-6 card">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-gray-500 text-sm">Total Containers</h3>
|
|
<p class="text-2xl font-semibold text-gray-800">247</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="flex items-center">
|
|
<span class="text-green-500 text-sm font-medium flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
|
</svg>
|
|
12%
|
|
</span>
|
|
<span class="text-gray-500 text-sm ml-2">from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 card">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-gray-500 text-sm">Available Capacity</h3>
|
|
<p class="text-2xl font-semibold text-gray-800">68%</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="flex items-center">
|
|
<span class="text-red-500 text-sm font-medium flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
5%
|
|
</span>
|
|
<span class="text-gray-500 text-sm ml-2">from last week</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 card">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-gray-500 text-sm">Avg. Dwell Time</h3>
|
|
<p class="text-2xl font-semibold text-gray-800">14.3 days</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="flex items-center">
|
|
<span class="text-green-500 text-sm font-medium flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
|
</svg>
|
|
2.1 days
|
|
</span>
|
|
<span class="text-gray-500 text-sm ml-2">improvement</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 card">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-red-100 text-red-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-gray-500 text-sm">Damaged Containers</h3>
|
|
<p class="text-2xl font-semibold text-gray-800">18</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="flex items-center">
|
|
<span class="text-red-500 text-sm font-medium flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
3
|
|
</span>
|
|
<span class="text-gray-500 text-sm ml-2">new this week</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<div class="bg-white rounded-lg shadow lg:col-span-2">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Container Movement</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Daily gate activity</p>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-sm font-medium">Week</button>
|
|
<button class="px-3 py-1 bg-white text-gray-600 rounded-md text-sm font-medium">Month</button>
|
|
<button class="px-3 py-1 bg-white text-gray-600 rounded-md text-sm font-medium">Year</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="chart-container">
|
|
<div class="chart-bar" style="left: 20px; height: 120px; background-color: #3b82f6;">
|
|
<div class="chart-value">12</div>
|
|
<div class="chart-label">Mon</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 80px; height: 80px; background-color: #3b82f6;">
|
|
<div class="chart-value">8</div>
|
|
<div class="chart-label">Tue</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 140px; height: 150px; background-color: #3b82f6;">
|
|
<div class="chart-value">15</div>
|
|
<div class="chart-label">Wed</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 200px; height: 100px; background-color: #3b82f6;">
|
|
<div class="chart-value">10</div>
|
|
<div class="chart-label">Thu</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 260px; height: 180px; background-color: #3b82f6;">
|
|
<div class="chart-value">18</div>
|
|
<div class="chart-label">Fri</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 320px; height: 60px; background-color: #3b82f6;">
|
|
<div class="chart-value">6</div>
|
|
<div class="chart-label">Sat</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 380px; height: 40px; background-color: #3b82f6;">
|
|
<div class="chart-value">4</div>
|
|
<div class="chart-label">Sun</div>
|
|
</div>
|
|
|
|
<div class="chart-bar" style="left: 460px; height: 100px; background-color: #ef4444;">
|
|
<div class="chart-value">10</div>
|
|
<div class="chart-label">Mon</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 520px; height: 70px; background-color: #ef4444;">
|
|
<div class="chart-value">7</div>
|
|
<div class="chart-label">Tue</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 580px; height: 130px; background-color: #ef4444;">
|
|
<div class="chart-value">13</div>
|
|
<div class="chart-label">Wed</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 640px; height: 90px; background-color: #ef4444;">
|
|
<div class="chart-value">9</div>
|
|
<div class="chart-label">Thu</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 700px; height: 160px; background-color: #ef4444;">
|
|
<div class="chart-value">16</div>
|
|
<div class="chart-label">Fri</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 760px; height: 50px; background-color: #ef4444;">
|
|
<div class="chart-value">5</div>
|
|
<div class="chart-label">Sat</div>
|
|
</div>
|
|
<div class="chart-bar" style="left: 820px; height: 30px; background-color: #ef4444;">
|
|
<div class="chart-value">3</div>
|
|
<div class="chart-label">Sun</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<div class="flex items-center mr-6">
|
|
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
|
|
<span class="text-sm text-gray-600">Gate In</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
|
|
<span class="text-sm text-gray-600">Gate Out</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-800">Container Types</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Current inventory</p>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-sm font-medium text-gray-700">40' High Cube (40HC)</span>
|
|
<span class="text-sm font-medium text-gray-700">42%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 42%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-sm font-medium text-gray-700">40' Dry Van (40DV)</span>
|
|
<span class="text-sm font-medium text-gray-700">28%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 28%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-sm font-medium text-gray-700">20' Dry Van (20DV)</span>
|
|
<span class="text-sm font-medium text-gray-700">18%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-yellow-600 h-2 rounded-full" style="width: 18%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-sm font-medium text-gray-700">Reefer Containers</span>
|
|
<span class="text-sm font-medium text-gray-700">8%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-red-600 h-2 rounded-full" style="width: 8%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-sm font-medium text-gray-700">Special Types</span>
|
|
<span class="text-sm font-medium text-gray-700">4%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 4%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">Container Conditions</h4>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="bg-green-50 p-3 rounded-md">
|
|
<div class="text-green-700 text-sm font-medium">Good Condition</div>
|
|
<div class="text-green-800 text-lg font-semibold">204</div>
|
|
</div>
|
|
<div class="bg-yellow-50 p-3 rounded-md">
|
|
<div class="text-yellow-700 text-sm font-medium">Minor Damage</div>
|
|
<div class="text-yellow-800 text-lg font-semibold">25</div>
|
|
</div>
|
|
<div class="bg-red-50 p-3 rounded-md">
|
|
<div class="text-red-700 text-sm font-medium">Major Damage</div>
|
|
<div class="text-red-800 text-lg font-semibold">18</div>
|
|
</div>
|
|
<div class="bg-blue-50 p-3 rounded-md">
|
|
<div class="text-blue-700 text-sm font-medium">In Repair</div>
|
|
<div class="text-blue-800 text-lg font-semibold">12</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="bg-white rounded-lg shadow lg:col-span-2">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Recent Activity</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Latest container movements</p>
|
|
</div>
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">View All</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Container</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Line</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Activity</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1234567</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40HC</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Maersk</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">10:15 AM</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Gate In</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">CMAU7654321</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">CMA CGM</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">09:42 AM</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Gate Out</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">OOLU2468135</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40DV</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">ONE</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">09:15 AM</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Repositioned</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">HLXU1357924</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Hapag-Lloyd</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">08:30 AM</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Gate Out</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU9876543</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40HC</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Maersk</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Yesterday</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Repair Started</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-800">Upcoming Tasks</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Scheduled operations</p>
|
|
</div>
|
|
<div class="p-6">
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start">
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-sm font-medium text-gray-900">Container Pickup</h4>
|
|
<p class="text-sm text-gray-600">MSCU2468135 - ABC Trucking</p>
|
|
<p class="text-xs text-gray-500 mt-1">Today, 2:30 PM</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Scheduled</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="flex items-start">
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-sm font-medium text-gray-900">Container Inspection</h4>
|
|
<p class="text-sm text-gray-600">Block B - 15 containers</p>
|
|
<p class="text-xs text-gray-500 mt-1">Tomorrow, 9:00 AM</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="flex items-start">
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-sm font-medium text-gray-900">Inventory Audit</h4>
|
|
<p class="text-sm text-gray-600">Monthly verification</p>
|
|
<p class="text-xs text-gray-500 mt-1">Jun 30, 10:00 AM</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="flex items-start">
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-sm font-medium text-gray-900">Staff Meeting</h4>
|
|
<p class="text-sm text-gray-600">Operations review</p>
|
|
<p class="text-xs text-gray-500 mt-1">Jun 28, 2:00 PM</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">Scheduled</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">Alerts</h4>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-700">Block A capacity at 92% - consider reorganization</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-700">3 reefer containers require maintenance</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Yard Management Content -->
|
|
<div id="yardContent" class="tab-content p-6">
|
|
<div class="bg-white rounded-lg shadow mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Yard Overview</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Visual representation of container positions</p>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<select class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option>Block A</option>
|
|
<option>Block B</option>
|
|
<option>Block C</option>
|
|
<option>Block D</option>
|
|
</select>
|
|
<button class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Add Container
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex mb-4 space-x-4">
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-gray-200 mr-2"></div>
|
|
<span class="text-sm text-gray-600">Empty</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-blue-400 mr-2"></div>
|
|
<span class="text-sm text-gray-600">Occupied</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-red-400 mr-2"></div>
|
|
<span class="text-sm text-gray-600">Damaged</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-yellow-400 mr-2"></div>
|
|
<span class="text-sm text-gray-600">In Repair</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-green-400 mr-2"></div>
|
|
<span class="text-sm text-gray-600">Reserved</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<div class="min-w-max">
|
|
<div class="flex mb-1">
|
|
<div class="w-10"></div>
|
|
<div class="yard-col-label w-16">1</div>
|
|
<div class="yard-col-label w-16">2</div>
|
|
<div class="yard-col-label w-16">3</div>
|
|
<div class="yard-col-label w-16">4</div>
|
|
<div class="yard-col-label w-16">5</div>
|
|
<div class="yard-col-label w-16">6</div>
|
|
<div class="yard-col-label w-16">7</div>
|
|
<div class="yard-col-label w-16">8</div>
|
|
<div class="yard-col-label w-16">9</div>
|
|
<div class="yard-col-label w-16">10</div>
|
|
</div>
|
|
|
|
<div class="flex mb-1">
|
|
<div class="yard-row-label w-10">A</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU1234567">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>A1</span>
|
|
<div class="yard-cell-tooltip">MSCU1234567 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="CMAU7654321">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>A2</span>
|
|
<div class="yard-cell-tooltip">CMAU7654321 (20DV)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>A3</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="OOLU2468135">
|
|
<div class="container-type-indicator container-type-40dv"></div>
|
|
<span>A4</span>
|
|
<div class="yard-cell-tooltip">OOLU2468135 (40DV)</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="HLXU1357924">
|
|
<div class="container-type-indicator container-type-reefer"></div>
|
|
<span>A5</span>
|
|
<div class="yard-cell-tooltip">HLXU1357924 (20RF)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>A6</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU9876543">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>A7</span>
|
|
<div class="yard-cell-tooltip">MSCU9876543 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>A8</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="CMAU1122334">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>A9</span>
|
|
<div class="yard-cell-tooltip">CMAU1122334 (20DV)</div>
|
|
</div>
|
|
<div class="yard-cell damaged w-16" data-container="OOLU5566778">
|
|
<div class="container-type-indicator container-type-40dv"></div>
|
|
<span>A10</span>
|
|
<div class="yard-cell-tooltip">OOLU5566778 (40DV) - Damaged</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mb-1">
|
|
<div class="yard-row-label w-10">B</div>
|
|
<div class="yard-cell occupied w-16" data-container="HLXU9988776">
|
|
<div class="container-type-indicator container-type-reefer"></div>
|
|
<span>B1</span>
|
|
<div class="yard-cell-tooltip">HLXU9988776 (40RF)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>B2</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU5544332">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>B3</span>
|
|
<div class="yard-cell-tooltip">MSCU5544332 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell repair w-16" data-container="CMAU3322114">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>B4</span>
|
|
<div class="yard-cell-tooltip">CMAU3322114 (20DV) - In Repair</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="OOLU7766554">
|
|
<div class="container-type-indicator container-type-40dv"></div>
|
|
<span>B5</span>
|
|
<div class="yard-cell-tooltip">OOLU7766554 (40DV)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>B6</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell damaged w-16" data-container="HLXU3344556">
|
|
<div class="container-type-indicator container-type-reefer"></div>
|
|
<span>B7</span>
|
|
<div class="yard-cell-tooltip">HLXU3344556 (20RF) - Damaged</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU7788990">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>B8</span>
|
|
<div class="yard-cell-tooltip">MSCU7788990 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>B9</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="CMAU1122334">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>B10</span>
|
|
<div class="yard-cell-tooltip">CMAU1122334 (20DV)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mb-1">
|
|
<div class="yard-row-label w-10">C</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>C1</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="OOLU9988776">
|
|
<div class="container-type-indicator container-type-40dv"></div>
|
|
<span>C2</span>
|
|
<div class="yard-cell-tooltip">OOLU9988776 (40DV)</div>
|
|
</div>
|
|
<div class="yard-cell repair w-16" data-container="HLXU5544332">
|
|
<div class="container-type-indicator container-type-reefer"></div>
|
|
<span>C3</span>
|
|
<div class="yard-cell-tooltip">HLXU5544332 (40RF) - In Repair</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU3322114">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>C4</span>
|
|
<div class="yard-cell-tooltip">MSCU3322114 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>C5</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="CMAU7766554">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>C6</span>
|
|
<div class="yard-cell-tooltip">CMAU7766554 (20DV)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>C7</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="OOLU3344556">
|
|
<div class="container-type-indicator container-type-40dv"></div>
|
|
<span>C8</span>
|
|
<div class="yard-cell-tooltip">OOLU3344556 (40DV)</div>
|
|
</div>
|
|
<div class="yard-cell damaged w-16" data-container="HLXU7788990">
|
|
<div class="container-type-indicator container-type-reefer"></div>
|
|
<span>C9</span>
|
|
<div class="yard-cell-tooltip">HLXU7788990 (20RF) - Damaged</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>C10</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mb-1">
|
|
<div class="yard-row-label w-10">D</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU1122334">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>D1</span>
|
|
<div class="yard-cell-tooltip">MSCU1122334 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>D2</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="CMAU9988776">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>D3</span>
|
|
<div class="yard-cell-tooltip">CMAU9988776 (20DV)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>D4</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell repair w-16" data-container="OOLU5544332">
|
|
<div class="container-type-indicator container-type-40dv"></div>
|
|
<span>D5</span>
|
|
<div class="yard-cell-tooltip">OOLU5544332 (40DV) - In Repair</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="HLXU3322114">
|
|
<div class="container-type-indicator container-type-reefer"></div>
|
|
<span>D6</span>
|
|
<div class="yard-cell-tooltip">HLXU3322114 (40RF)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>D7</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell occupied w-16" data-container="MSCU7766554">
|
|
<div class="container-type-indicator container-type-40hc"></div>
|
|
<span>D8</span>
|
|
<div class="yard-cell-tooltip">MSCU7766554 (40HC)</div>
|
|
</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>D9</span>
|
|
<div class="yard-cell-tooltip">Empty Position</div>
|
|
</div>
|
|
<div class="yard-cell reserved w-16" data-container="CMAU3344556">
|
|
<div class="container-type-indicator container-type-20dv"></div>
|
|
<span>D10</span>
|
|
<div class="yard-cell-tooltip">CMAU3344556 (20DV) - Reserved</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mb-1">
|
|
<div class="yard-row-label w-10">E</div>
|
|
<div class="yard-cell empty w-16">
|
|
<span>E1</span><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'94992a5934dd3139',t:'MTc0ODg5MDUzMS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script> |