gitea
ee550a4225
This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA.
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> |