

<!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>