Add IntelliJ IDEA project configuration files
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.master
parent
af8444c0e3
commit
ee550a4225
@ -0,0 +1,34 @@
|
|||||||
|
from django.db import models
|
||||||
|
|
||||||
|
# Create your models here.
|
||||||
|
class PreinfoModel(models.Model):
|
||||||
|
container_number = models.CharField(
|
||||||
|
max_length=11,
|
||||||
|
)
|
||||||
|
container_type = models.ForeignKey(
|
||||||
|
'common.ContainerTypeModel',
|
||||||
|
on_delete=models.CASCADE,
|
||||||
|
related_name='preinfo_container_types',
|
||||||
|
)
|
||||||
|
line = models.ForeignKey(
|
||||||
|
'common.LinesModel',
|
||||||
|
on_delete=models.CASCADE,
|
||||||
|
related_name='preinfo_lines',
|
||||||
|
)
|
||||||
|
created_on = models.DateTimeField(auto_now_add=True)
|
||||||
|
created_by = models.ForeignKey(
|
||||||
|
'users.DepotUser',
|
||||||
|
on_delete=models.CASCADE,
|
||||||
|
related_name='preinfo_created_by',
|
||||||
|
db_column='created_by_id', # Ensure the column name matches your database schema
|
||||||
|
)
|
||||||
|
deleted = models.BooleanField(default=False, null=False)
|
||||||
|
deleted_by = models.ForeignKey(
|
||||||
|
'users.DepotUser',
|
||||||
|
on_delete=models.CASCADE,
|
||||||
|
related_name='preinfo_deleted_by',
|
||||||
|
db_column='deleted_by_id', # Ensure the column name matches your database schema
|
||||||
|
null=True,
|
||||||
|
)
|
||||||
|
deleted_on = models.DateTimeField(null=True)
|
||||||
|
received = models.BooleanField(default=False, null=False)
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
from django.shortcuts import render
|
||||||
|
|
||||||
|
# Create your views here.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1,926 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Barrier Staff 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); }
|
||||||
|
}
|
||||||
|
.camera-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 50;
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.camera-frame {
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.image-preview {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
border: 2px dashed #d1d5db;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-preview svg {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
.image-preview.has-image {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.image-preview.has-image svg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.pulse {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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">Barrier Staff 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="receiveNav">
|
||||||
|
<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 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" />
|
||||||
|
</svg>
|
||||||
|
Receive Container
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white" id="expediteNav">
|
||||||
|
<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>
|
||||||
|
Expedite Container
|
||||||
|
</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="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>
|
||||||
|
Daily 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">
|
||||||
|
BS
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">John Smith</p>
|
||||||
|
<p class="text-xs text-blue-300">Barrier Staff</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">Receive Container</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">3</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>
|
||||||
|
<span class="text-gray-700 font-medium">Gate North</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Container Reception Content -->
|
||||||
|
<div id="receiveContent" class="tab-content active 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">Container Reception</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Process incoming containers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="receiveForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<button type="button" id="searchContainer" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="arrivalDate" class="block text-sm font-medium text-gray-700 mb-1">Arrival Date</label>
|
||||||
|
<input type="date" id="arrivalDate" name="arrivalDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Data (initially hidden) -->
|
||||||
|
<div id="preinfoData" class="hidden">
|
||||||
|
<div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-blue-800">Preinfo Found</h3>
|
||||||
|
<div class="mt-2 text-sm text-blue-700">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Container Type:</span> <span id="preinfoType">40HC</span></p>
|
||||||
|
<p><span class="font-medium">Line Operator:</span> <span id="preinfoOperator">Maersk Line</span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Expected Arrival:</span> <span id="preinfoArrival">2023-06-18</span></p>
|
||||||
|
<p><span class="font-medium">Vessel/Voyage:</span> <span id="preinfoVessel">MAERSK SEVILLE / 123E</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2"><span class="font-medium">Notes:</span> <span id="preinfoNotes">Container reported with minor damage on right side panel.</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC" selected>40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="truckInfo" class="block text-sm font-medium text-gray-700 mb-1">Truck Information</label>
|
||||||
|
<input type="text" id="truckInfo" name="truckInfo" placeholder="License plate / Company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Condition</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionGood" name="containerCondition" value="good" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="conditionGood" class="ml-2 block text-sm text-gray-700">Good Condition</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionMinor" name="containerCondition" value="minor" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="conditionMinor" class="ml-2 block text-sm text-gray-700">Minor Damage</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionMajor" name="containerCondition" value="major" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="conditionMajor" class="ml-2 block text-sm text-gray-700">Major Damage</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe any damage in detail">Minor dent on right side panel, approximately 30cm x 20cm. No structural damage.</textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Images</label>
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Take photos of the container from different angles, especially any damaged areas</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div class="image-preview has-image" id="preview1">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="70" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<circle cx="85" cy="45" r="8" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview has-image" id="preview2">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="80" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="preview3">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="preview4">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="takePhoto" 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 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
Take Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="positionLocation" class="block text-sm font-medium text-gray-700 mb-1">Position Location</label>
|
||||||
|
<input type="text" id="positionLocation" name="positionLocation" placeholder="e.g. Block A, Row 3, Position 5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Complete Reception
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Recent Container Movements</h3>
|
||||||
|
</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">Direction</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">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">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">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">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">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>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Expedition Content -->
|
||||||
|
<div id="expediteContent" 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">Container Expedition</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Process outgoing containers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="expediteForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label for="expediteContainerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="expediteContainerNumber" name="expediteContainerNumber" placeholder="e.g. MSCU1234567" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<button type="button" id="searchExpediteContainer" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="expeditionDate" class="block text-sm font-medium text-gray-700 mb-1">Expedition Date</label>
|
||||||
|
<input type="date" id="expeditionDate" name="expeditionDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Data (initially hidden) -->
|
||||||
|
<div id="orderData" class="hidden">
|
||||||
|
<div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" 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-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-green-800">Expedition Order Found</h3>
|
||||||
|
<div class="mt-2 text-sm text-green-700">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Order ID:</span> <span id="orderID">ORD-2023-0015</span></p>
|
||||||
|
<p><span class="font-medium">Line Operator:</span> <span id="orderOperator">Maersk Line</span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Requested Pickup:</span> <span id="orderPickup">2023-06-20</span></p>
|
||||||
|
<p><span class="font-medium">Transport Company:</span> <span id="orderTransport">ABC Trucking</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2"><span class="font-medium">Driver Info:</span> <span id="orderDriver">John Doe, +1 555-123-4567</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="expediteContainerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<input type="text" id="expediteContainerType" name="expediteContainerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-100" value="40HC" readonly>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="expediteTruckInfo" class="block text-sm font-medium text-gray-700 mb-1">Truck Information</label>
|
||||||
|
<input type="text" id="expediteTruckInfo" name="expediteTruckInfo" placeholder="License plate / Company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverIdentification" class="block text-sm font-medium text-gray-700 mb-1">Driver Identification</label>
|
||||||
|
<input type="text" id="driverIdentification" name="driverIdentification" placeholder="Driver's license or ID number" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Condition at Departure</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionGood" name="departureCondition" value="good" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="departureConditionGood" class="ml-2 block text-sm text-gray-700">Good Condition</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionMinor" name="departureCondition" value="minor" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="departureConditionMinor" class="ml-2 block text-sm text-gray-700">Minor Damage</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionMajor" name="departureCondition" value="major" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="departureConditionMajor" class="ml-2 block text-sm text-gray-700">Major Damage</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Images at Departure</label>
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Take photos of the container before it leaves the depot</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div class="image-preview" id="expeditePreview1">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="expeditePreview2">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="expediteTakePhoto" 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 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
Take Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="expediteNotes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
|
||||||
|
<textarea id="expediteNotes" name="expediteNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any additional information about this expedition"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Complete Expedition
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Pending Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Line</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transport</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</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">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">ABC Trucking</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 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">2023-06-19</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">XYZ Logistics</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0016</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">CMAU5678901</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">2023-06-21</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Fast Transport</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Camera Overlay -->
|
||||||
|
<div id="cameraOverlay" class="camera-overlay">
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="p-4 flex justify-between items-center">
|
||||||
|
<h3 class="text-lg font-semibold text-white">Take Container Photo</h3>
|
||||||
|
<button id="closeCamera" class="text-white hover:text-gray-300">
|
||||||
|
<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="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-grow flex items-center justify-center p-4">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="camera-frame w-full max-w-2xl aspect-[4/3] bg-gray-800 flex items-center justify-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Guide lines for container positioning -->
|
||||||
|
<div class="absolute inset-0 border-2 border-dashed border-white opacity-50 m-8"></div>
|
||||||
|
|
||||||
|
<!-- Positioning guides -->
|
||||||
|
<div class="absolute top-8 left-8 border-t-2 border-l-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute top-8 right-8 border-t-2 border-r-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute bottom-8 left-8 border-b-2 border-l-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute bottom-8 right-8 border-b-2 border-r-2 border-white w-8 h-8"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 flex justify-center">
|
||||||
|
<button id="capturePhoto" class="w-16 h-16 rounded-full bg-red-600 border-4 border-white flex items-center justify-center pulse">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-red-600"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Set current date as default
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
document.getElementById('arrivalDate').value = today;
|
||||||
|
document.getElementById('expeditionDate').value = today;
|
||||||
|
|
||||||
|
// Tab Navigation
|
||||||
|
const receiveContent = document.getElementById('receiveContent');
|
||||||
|
const expediteContent = document.getElementById('expediteContent');
|
||||||
|
|
||||||
|
const receiveNav = document.getElementById('receiveNav');
|
||||||
|
const expediteNav = document.getElementById('expediteNav');
|
||||||
|
|
||||||
|
receiveNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
receiveContent.classList.add('active');
|
||||||
|
expediteContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
receiveNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Receive Container';
|
||||||
|
});
|
||||||
|
|
||||||
|
expediteNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
receiveContent.classList.remove('active');
|
||||||
|
expediteContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
expediteNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedite Container';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Container search functionality
|
||||||
|
document.getElementById('searchContainer').addEventListener('click', function() {
|
||||||
|
const containerNumber = document.getElementById('containerNumber').value;
|
||||||
|
if (containerNumber) {
|
||||||
|
document.getElementById('preinfoData').classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
alert('Please enter a container number');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('searchExpediteContainer').addEventListener('click', function() {
|
||||||
|
const containerNumber = document.getElementById('expediteContainerNumber').value;
|
||||||
|
if (containerNumber) {
|
||||||
|
document.getElementById('orderData').classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
alert('Please enter a container number');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Camera functionality
|
||||||
|
const cameraOverlay = document.getElementById('cameraOverlay');
|
||||||
|
const takePhotoBtn = document.getElementById('takePhoto');
|
||||||
|
const expediteTakePhotoBtn = document.getElementById('expediteTakePhoto');
|
||||||
|
const closeCamera = document.getElementById('closeCamera');
|
||||||
|
const capturePhoto = document.getElementById('capturePhoto');
|
||||||
|
|
||||||
|
let currentImageTarget = null;
|
||||||
|
|
||||||
|
function openCamera(imageTarget) {
|
||||||
|
cameraOverlay.style.display = 'block';
|
||||||
|
currentImageTarget = imageTarget;
|
||||||
|
}
|
||||||
|
|
||||||
|
takePhotoBtn.addEventListener('click', function() {
|
||||||
|
// Find the first empty preview slot
|
||||||
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
const previewEl = document.getElementById(`preview${i}`);
|
||||||
|
if (!previewEl.classList.contains('has-image')) {
|
||||||
|
openCamera(`preview${i}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
expediteTakePhotoBtn.addEventListener('click', function() {
|
||||||
|
// Find the first empty preview slot
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
const previewEl = document.getElementById(`expeditePreview${i}`);
|
||||||
|
if (!previewEl.classList.contains('has-image')) {
|
||||||
|
openCamera(`expeditePreview${i}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
closeCamera.addEventListener('click', function() {
|
||||||
|
cameraOverlay.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
capturePhoto.addEventListener('click', function() {
|
||||||
|
if (currentImageTarget) {
|
||||||
|
const previewEl = document.getElementById(currentImageTarget);
|
||||||
|
|
||||||
|
// Create a container SVG image
|
||||||
|
const containerSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
containerSvg.setAttribute("class", "w-full h-full");
|
||||||
|
containerSvg.setAttribute("viewBox", "0 0 120 120");
|
||||||
|
|
||||||
|
// Random container color
|
||||||
|
const colors = ['#2563eb', '#059669', '#d97706', '#7c3aed'];
|
||||||
|
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
|
||||||
|
// Create container body
|
||||||
|
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
rect.setAttribute("x", "10");
|
||||||
|
rect.setAttribute("y", "20");
|
||||||
|
rect.setAttribute("width", "100");
|
||||||
|
rect.setAttribute("height", "80");
|
||||||
|
rect.setAttribute("fill", randomColor);
|
||||||
|
containerSvg.appendChild(rect);
|
||||||
|
|
||||||
|
// Add some container details
|
||||||
|
const detail1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
detail1.setAttribute("x", "20");
|
||||||
|
detail1.setAttribute("y", "30");
|
||||||
|
detail1.setAttribute("width", "80");
|
||||||
|
detail1.setAttribute("height", "20");
|
||||||
|
detail1.setAttribute("fill", shadeColor(randomColor, -20));
|
||||||
|
containerSvg.appendChild(detail1);
|
||||||
|
|
||||||
|
const detail2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
detail2.setAttribute("x", "20");
|
||||||
|
detail2.setAttribute("y", "60");
|
||||||
|
detail2.setAttribute("width", "80");
|
||||||
|
detail2.setAttribute("height", "30");
|
||||||
|
detail2.setAttribute("fill", shadeColor(randomColor, -20));
|
||||||
|
containerSvg.appendChild(detail2);
|
||||||
|
|
||||||
|
// Clear the preview and add the new SVG
|
||||||
|
previewEl.innerHTML = '';
|
||||||
|
previewEl.appendChild(containerSvg);
|
||||||
|
previewEl.classList.add('has-image');
|
||||||
|
|
||||||
|
// Close the camera
|
||||||
|
cameraOverlay.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Helper function to darken/lighten colors
|
||||||
|
function shadeColor(color, percent) {
|
||||||
|
let R = parseInt(color.substring(1,3), 16);
|
||||||
|
let G = parseInt(color.substring(3,5), 16);
|
||||||
|
let B = parseInt(color.substring(5,7), 16);
|
||||||
|
|
||||||
|
R = parseInt(R * (100 + percent) / 100);
|
||||||
|
G = parseInt(G * (100 + percent) / 100);
|
||||||
|
B = parseInt(B * (100 + percent) / 100);
|
||||||
|
|
||||||
|
R = (R<255)?R:255;
|
||||||
|
G = (G<255)?G:255;
|
||||||
|
B = (B<255)?B:255;
|
||||||
|
|
||||||
|
R = Math.round(R);
|
||||||
|
G = Math.round(G);
|
||||||
|
B = Math.round(B);
|
||||||
|
|
||||||
|
const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
|
||||||
|
const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
|
||||||
|
const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
|
||||||
|
|
||||||
|
return "#"+RR+GG+BB;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('receiveForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if container data is loaded
|
||||||
|
if (document.getElementById('preinfoData').classList.contains('hidden')) {
|
||||||
|
alert('Please search for a container first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Container reception completed successfully!');
|
||||||
|
this.reset();
|
||||||
|
document.getElementById('preinfoData').classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset image previews
|
||||||
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
const previewEl = document.getElementById(`preview${i}`);
|
||||||
|
previewEl.classList.remove('has-image');
|
||||||
|
previewEl.innerHTML = `
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the first two images back
|
||||||
|
document.getElementById('preview1').classList.add('has-image');
|
||||||
|
document.getElementById('preview1').innerHTML = `
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="70" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<circle cx="85" cy="45" r="8" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('preview2').classList.add('has-image');
|
||||||
|
document.getElementById('preview2').innerHTML = `
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="80" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('expediteForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if order data is loaded
|
||||||
|
if (document.getElementById('orderData').classList.contains('hidden')) {
|
||||||
|
alert('Please search for a container first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Container expedition completed successfully!');
|
||||||
|
this.reset();
|
||||||
|
document.getElementById('orderData').classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset image previews
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
const previewEl = document.getElementById(`expeditePreview${i}`);
|
||||||
|
previewEl.classList.remove('has-image');
|
||||||
|
previewEl.innerHTML = `
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'9498ddc2d702313f',t:'MTc0ODg4NzM5My4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,926 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Barrier Staff 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); }
|
||||||
|
}
|
||||||
|
.camera-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 50;
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.camera-frame {
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.image-preview {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
border: 2px dashed #d1d5db;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-preview svg {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
.image-preview.has-image {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.image-preview.has-image svg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.pulse {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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">Barrier Staff 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="receiveNav">
|
||||||
|
<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 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" />
|
||||||
|
</svg>
|
||||||
|
Receive Container
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white" id="expediteNav">
|
||||||
|
<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>
|
||||||
|
Expedite Container
|
||||||
|
</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="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>
|
||||||
|
Daily 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">
|
||||||
|
BS
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">John Smith</p>
|
||||||
|
<p class="text-xs text-blue-300">Barrier Staff</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">Receive Container</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">3</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>
|
||||||
|
<span class="text-gray-700 font-medium">Gate North</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Container Reception Content -->
|
||||||
|
<div id="receiveContent" class="tab-content active 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">Container Reception</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Process incoming containers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="receiveForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<button type="button" id="searchContainer" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="arrivalDate" class="block text-sm font-medium text-gray-700 mb-1">Arrival Date</label>
|
||||||
|
<input type="date" id="arrivalDate" name="arrivalDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Data (initially hidden) -->
|
||||||
|
<div id="preinfoData" class="hidden">
|
||||||
|
<div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-blue-800">Preinfo Found</h3>
|
||||||
|
<div class="mt-2 text-sm text-blue-700">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Container Type:</span> <span id="preinfoType">40HC</span></p>
|
||||||
|
<p><span class="font-medium">Line Operator:</span> <span id="preinfoOperator">Maersk Line</span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Expected Arrival:</span> <span id="preinfoArrival">2023-06-18</span></p>
|
||||||
|
<p><span class="font-medium">Vessel/Voyage:</span> <span id="preinfoVessel">MAERSK SEVILLE / 123E</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2"><span class="font-medium">Notes:</span> <span id="preinfoNotes">Container reported with minor damage on right side panel.</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC" selected>40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="truckInfo" class="block text-sm font-medium text-gray-700 mb-1">Truck Information</label>
|
||||||
|
<input type="text" id="truckInfo" name="truckInfo" placeholder="License plate / Company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Condition</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionGood" name="containerCondition" value="good" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="conditionGood" class="ml-2 block text-sm text-gray-700">Good Condition</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionMinor" name="containerCondition" value="minor" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="conditionMinor" class="ml-2 block text-sm text-gray-700">Minor Damage</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionMajor" name="containerCondition" value="major" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="conditionMajor" class="ml-2 block text-sm text-gray-700">Major Damage</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe any damage in detail">Minor dent on right side panel, approximately 30cm x 20cm. No structural damage.</textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Images</label>
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Take photos of the container from different angles, especially any damaged areas</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div class="image-preview has-image" id="preview1">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="70" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<circle cx="85" cy="45" r="8" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview has-image" id="preview2">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="80" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="preview3">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="preview4">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="takePhoto" 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 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
Take Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="positionLocation" class="block text-sm font-medium text-gray-700 mb-1">Position Location</label>
|
||||||
|
<input type="text" id="positionLocation" name="positionLocation" placeholder="e.g. Block A, Row 3, Position 5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Complete Reception
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Recent Container Movements</h3>
|
||||||
|
</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">Direction</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">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">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">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">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">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>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Expedition Content -->
|
||||||
|
<div id="expediteContent" 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">Container Expedition</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Process outgoing containers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="expediteForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label for="expediteContainerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="expediteContainerNumber" name="expediteContainerNumber" placeholder="e.g. MSCU1234567" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<button type="button" id="searchExpediteContainer" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="expeditionDate" class="block text-sm font-medium text-gray-700 mb-1">Expedition Date</label>
|
||||||
|
<input type="date" id="expeditionDate" name="expeditionDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Data (initially hidden) -->
|
||||||
|
<div id="orderData" class="hidden">
|
||||||
|
<div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" 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-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-green-800">Expedition Order Found</h3>
|
||||||
|
<div class="mt-2 text-sm text-green-700">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Order ID:</span> <span id="orderID">ORD-2023-0015</span></p>
|
||||||
|
<p><span class="font-medium">Line Operator:</span> <span id="orderOperator">Maersk Line</span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Requested Pickup:</span> <span id="orderPickup">2023-06-20</span></p>
|
||||||
|
<p><span class="font-medium">Transport Company:</span> <span id="orderTransport">ABC Trucking</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2"><span class="font-medium">Driver Info:</span> <span id="orderDriver">John Doe, +1 555-123-4567</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="expediteContainerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<input type="text" id="expediteContainerType" name="expediteContainerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-100" value="40HC" readonly>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="expediteTruckInfo" class="block text-sm font-medium text-gray-700 mb-1">Truck Information</label>
|
||||||
|
<input type="text" id="expediteTruckInfo" name="expediteTruckInfo" placeholder="License plate / Company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverIdentification" class="block text-sm font-medium text-gray-700 mb-1">Driver Identification</label>
|
||||||
|
<input type="text" id="driverIdentification" name="driverIdentification" placeholder="Driver's license or ID number" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Condition at Departure</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionGood" name="departureCondition" value="good" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="departureConditionGood" class="ml-2 block text-sm text-gray-700">Good Condition</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionMinor" name="departureCondition" value="minor" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="departureConditionMinor" class="ml-2 block text-sm text-gray-700">Minor Damage</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionMajor" name="departureCondition" value="major" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="departureConditionMajor" class="ml-2 block text-sm text-gray-700">Major Damage</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Images at Departure</label>
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Take photos of the container before it leaves the depot</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div class="image-preview" id="expeditePreview1">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="expeditePreview2">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="expediteTakePhoto" 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 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
Take Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="expediteNotes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
|
||||||
|
<textarea id="expediteNotes" name="expediteNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any additional information about this expedition"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Complete Expedition
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Pending Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Line</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transport</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</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">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">ABC Trucking</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 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">2023-06-19</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">XYZ Logistics</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0016</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">CMAU5678901</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">2023-06-21</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Fast Transport</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Camera Overlay -->
|
||||||
|
<div id="cameraOverlay" class="camera-overlay">
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="p-4 flex justify-between items-center">
|
||||||
|
<h3 class="text-lg font-semibold text-white">Take Container Photo</h3>
|
||||||
|
<button id="closeCamera" class="text-white hover:text-gray-300">
|
||||||
|
<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="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-grow flex items-center justify-center p-4">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="camera-frame w-full max-w-2xl aspect-[4/3] bg-gray-800 flex items-center justify-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Guide lines for container positioning -->
|
||||||
|
<div class="absolute inset-0 border-2 border-dashed border-white opacity-50 m-8"></div>
|
||||||
|
|
||||||
|
<!-- Positioning guides -->
|
||||||
|
<div class="absolute top-8 left-8 border-t-2 border-l-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute top-8 right-8 border-t-2 border-r-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute bottom-8 left-8 border-b-2 border-l-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute bottom-8 right-8 border-b-2 border-r-2 border-white w-8 h-8"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 flex justify-center">
|
||||||
|
<button id="capturePhoto" class="w-16 h-16 rounded-full bg-red-600 border-4 border-white flex items-center justify-center pulse">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-red-600"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Set current date as default
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
document.getElementById('arrivalDate').value = today;
|
||||||
|
document.getElementById('expeditionDate').value = today;
|
||||||
|
|
||||||
|
// Tab Navigation
|
||||||
|
const receiveContent = document.getElementById('receiveContent');
|
||||||
|
const expediteContent = document.getElementById('expediteContent');
|
||||||
|
|
||||||
|
const receiveNav = document.getElementById('receiveNav');
|
||||||
|
const expediteNav = document.getElementById('expediteNav');
|
||||||
|
|
||||||
|
receiveNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
receiveContent.classList.add('active');
|
||||||
|
expediteContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
receiveNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Receive Container';
|
||||||
|
});
|
||||||
|
|
||||||
|
expediteNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
receiveContent.classList.remove('active');
|
||||||
|
expediteContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
expediteNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedite Container';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Container search functionality
|
||||||
|
document.getElementById('searchContainer').addEventListener('click', function() {
|
||||||
|
const containerNumber = document.getElementById('containerNumber').value;
|
||||||
|
if (containerNumber) {
|
||||||
|
document.getElementById('preinfoData').classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
alert('Please enter a container number');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('searchExpediteContainer').addEventListener('click', function() {
|
||||||
|
const containerNumber = document.getElementById('expediteContainerNumber').value;
|
||||||
|
if (containerNumber) {
|
||||||
|
document.getElementById('orderData').classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
alert('Please enter a container number');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Camera functionality
|
||||||
|
const cameraOverlay = document.getElementById('cameraOverlay');
|
||||||
|
const takePhotoBtn = document.getElementById('takePhoto');
|
||||||
|
const expediteTakePhotoBtn = document.getElementById('expediteTakePhoto');
|
||||||
|
const closeCamera = document.getElementById('closeCamera');
|
||||||
|
const capturePhoto = document.getElementById('capturePhoto');
|
||||||
|
|
||||||
|
let currentImageTarget = null;
|
||||||
|
|
||||||
|
function openCamera(imageTarget) {
|
||||||
|
cameraOverlay.style.display = 'block';
|
||||||
|
currentImageTarget = imageTarget;
|
||||||
|
}
|
||||||
|
|
||||||
|
takePhotoBtn.addEventListener('click', function() {
|
||||||
|
// Find the first empty preview slot
|
||||||
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
const previewEl = document.getElementById(`preview${i}`);
|
||||||
|
if (!previewEl.classList.contains('has-image')) {
|
||||||
|
openCamera(`preview${i}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
expediteTakePhotoBtn.addEventListener('click', function() {
|
||||||
|
// Find the first empty preview slot
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
const previewEl = document.getElementById(`expeditePreview${i}`);
|
||||||
|
if (!previewEl.classList.contains('has-image')) {
|
||||||
|
openCamera(`expeditePreview${i}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
closeCamera.addEventListener('click', function() {
|
||||||
|
cameraOverlay.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
capturePhoto.addEventListener('click', function() {
|
||||||
|
if (currentImageTarget) {
|
||||||
|
const previewEl = document.getElementById(currentImageTarget);
|
||||||
|
|
||||||
|
// Create a container SVG image
|
||||||
|
const containerSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
containerSvg.setAttribute("class", "w-full h-full");
|
||||||
|
containerSvg.setAttribute("viewBox", "0 0 120 120");
|
||||||
|
|
||||||
|
// Random container color
|
||||||
|
const colors = ['#2563eb', '#059669', '#d97706', '#7c3aed'];
|
||||||
|
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
|
||||||
|
// Create container body
|
||||||
|
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
rect.setAttribute("x", "10");
|
||||||
|
rect.setAttribute("y", "20");
|
||||||
|
rect.setAttribute("width", "100");
|
||||||
|
rect.setAttribute("height", "80");
|
||||||
|
rect.setAttribute("fill", randomColor);
|
||||||
|
containerSvg.appendChild(rect);
|
||||||
|
|
||||||
|
// Add some container details
|
||||||
|
const detail1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
detail1.setAttribute("x", "20");
|
||||||
|
detail1.setAttribute("y", "30");
|
||||||
|
detail1.setAttribute("width", "80");
|
||||||
|
detail1.setAttribute("height", "20");
|
||||||
|
detail1.setAttribute("fill", shadeColor(randomColor, -20));
|
||||||
|
containerSvg.appendChild(detail1);
|
||||||
|
|
||||||
|
const detail2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
detail2.setAttribute("x", "20");
|
||||||
|
detail2.setAttribute("y", "60");
|
||||||
|
detail2.setAttribute("width", "80");
|
||||||
|
detail2.setAttribute("height", "30");
|
||||||
|
detail2.setAttribute("fill", shadeColor(randomColor, -20));
|
||||||
|
containerSvg.appendChild(detail2);
|
||||||
|
|
||||||
|
// Clear the preview and add the new SVG
|
||||||
|
previewEl.innerHTML = '';
|
||||||
|
previewEl.appendChild(containerSvg);
|
||||||
|
previewEl.classList.add('has-image');
|
||||||
|
|
||||||
|
// Close the camera
|
||||||
|
cameraOverlay.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Helper function to darken/lighten colors
|
||||||
|
function shadeColor(color, percent) {
|
||||||
|
let R = parseInt(color.substring(1,3), 16);
|
||||||
|
let G = parseInt(color.substring(3,5), 16);
|
||||||
|
let B = parseInt(color.substring(5,7), 16);
|
||||||
|
|
||||||
|
R = parseInt(R * (100 + percent) / 100);
|
||||||
|
G = parseInt(G * (100 + percent) / 100);
|
||||||
|
B = parseInt(B * (100 + percent) / 100);
|
||||||
|
|
||||||
|
R = (R<255)?R:255;
|
||||||
|
G = (G<255)?G:255;
|
||||||
|
B = (B<255)?B:255;
|
||||||
|
|
||||||
|
R = Math.round(R);
|
||||||
|
G = Math.round(G);
|
||||||
|
B = Math.round(B);
|
||||||
|
|
||||||
|
const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
|
||||||
|
const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
|
||||||
|
const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
|
||||||
|
|
||||||
|
return "#"+RR+GG+BB;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('receiveForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if container data is loaded
|
||||||
|
if (document.getElementById('preinfoData').classList.contains('hidden')) {
|
||||||
|
alert('Please search for a container first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Container reception completed successfully!');
|
||||||
|
this.reset();
|
||||||
|
document.getElementById('preinfoData').classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset image previews
|
||||||
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
const previewEl = document.getElementById(`preview${i}`);
|
||||||
|
previewEl.classList.remove('has-image');
|
||||||
|
previewEl.innerHTML = `
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the first two images back
|
||||||
|
document.getElementById('preview1').classList.add('has-image');
|
||||||
|
document.getElementById('preview1').innerHTML = `
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="70" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<circle cx="85" cy="45" r="8" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('preview2').classList.add('has-image');
|
||||||
|
document.getElementById('preview2').innerHTML = `
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="80" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('expediteForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if order data is loaded
|
||||||
|
if (document.getElementById('orderData').classList.contains('hidden')) {
|
||||||
|
alert('Please search for a container first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Container expedition completed successfully!');
|
||||||
|
this.reset();
|
||||||
|
document.getElementById('orderData').classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset image previews
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
const previewEl = document.getElementById(`expeditePreview${i}`);
|
||||||
|
previewEl.classList.remove('has-image');
|
||||||
|
previewEl.innerHTML = `
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'9498ddc2d702313f',t:'MTc0ODg4NzM5My4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,926 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Barrier Staff 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); }
|
||||||
|
}
|
||||||
|
.camera-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 50;
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.camera-frame {
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.image-preview {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
border: 2px dashed #d1d5db;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-preview svg {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
.image-preview.has-image {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.image-preview.has-image svg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.pulse {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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">Barrier Staff 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="receiveNav">
|
||||||
|
<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 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" />
|
||||||
|
</svg>
|
||||||
|
Receive Container
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center px-6 py-3 text-white" id="expediteNav">
|
||||||
|
<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>
|
||||||
|
Expedite Container
|
||||||
|
</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="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>
|
||||||
|
Daily 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">
|
||||||
|
BS
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">John Smith</p>
|
||||||
|
<p class="text-xs text-blue-300">Barrier Staff</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">Receive Container</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">3</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>
|
||||||
|
<span class="text-gray-700 font-medium">Gate North</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Container Reception Content -->
|
||||||
|
<div id="receiveContent" class="tab-content active 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">Container Reception</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Process incoming containers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="receiveForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<button type="button" id="searchContainer" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="arrivalDate" class="block text-sm font-medium text-gray-700 mb-1">Arrival Date</label>
|
||||||
|
<input type="date" id="arrivalDate" name="arrivalDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Data (initially hidden) -->
|
||||||
|
<div id="preinfoData" class="hidden">
|
||||||
|
<div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-blue-800">Preinfo Found</h3>
|
||||||
|
<div class="mt-2 text-sm text-blue-700">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Container Type:</span> <span id="preinfoType">40HC</span></p>
|
||||||
|
<p><span class="font-medium">Line Operator:</span> <span id="preinfoOperator">Maersk Line</span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Expected Arrival:</span> <span id="preinfoArrival">2023-06-18</span></p>
|
||||||
|
<p><span class="font-medium">Vessel/Voyage:</span> <span id="preinfoVessel">MAERSK SEVILLE / 123E</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2"><span class="font-medium">Notes:</span> <span id="preinfoNotes">Container reported with minor damage on right side panel.</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC" selected>40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="truckInfo" class="block text-sm font-medium text-gray-700 mb-1">Truck Information</label>
|
||||||
|
<input type="text" id="truckInfo" name="truckInfo" placeholder="License plate / Company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Condition</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionGood" name="containerCondition" value="good" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="conditionGood" class="ml-2 block text-sm text-gray-700">Good Condition</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionMinor" name="containerCondition" value="minor" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="conditionMinor" class="ml-2 block text-sm text-gray-700">Minor Damage</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="conditionMajor" name="containerCondition" value="major" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="conditionMajor" class="ml-2 block text-sm text-gray-700">Major Damage</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe any damage in detail">Minor dent on right side panel, approximately 30cm x 20cm. No structural damage.</textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Images</label>
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Take photos of the container from different angles, especially any damaged areas</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div class="image-preview has-image" id="preview1">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="70" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<circle cx="85" cy="45" r="8" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview has-image" id="preview2">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="80" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="preview3">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="preview4">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="takePhoto" 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 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
Take Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="positionLocation" class="block text-sm font-medium text-gray-700 mb-1">Position Location</label>
|
||||||
|
<input type="text" id="positionLocation" name="positionLocation" placeholder="e.g. Block A, Row 3, Position 5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Complete Reception
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Recent Container Movements</h3>
|
||||||
|
</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">Direction</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">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">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">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">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">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>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Expedition Content -->
|
||||||
|
<div id="expediteContent" 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">Container Expedition</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Process outgoing containers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="expediteForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label for="expediteContainerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="expediteContainerNumber" name="expediteContainerNumber" placeholder="e.g. MSCU1234567" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<button type="button" id="searchExpediteContainer" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="expeditionDate" class="block text-sm font-medium text-gray-700 mb-1">Expedition Date</label>
|
||||||
|
<input type="date" id="expeditionDate" name="expeditionDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Data (initially hidden) -->
|
||||||
|
<div id="orderData" class="hidden">
|
||||||
|
<div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" 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-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-green-800">Expedition Order Found</h3>
|
||||||
|
<div class="mt-2 text-sm text-green-700">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Order ID:</span> <span id="orderID">ORD-2023-0015</span></p>
|
||||||
|
<p><span class="font-medium">Line Operator:</span> <span id="orderOperator">Maersk Line</span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><span class="font-medium">Requested Pickup:</span> <span id="orderPickup">2023-06-20</span></p>
|
||||||
|
<p><span class="font-medium">Transport Company:</span> <span id="orderTransport">ABC Trucking</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2"><span class="font-medium">Driver Info:</span> <span id="orderDriver">John Doe, +1 555-123-4567</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="expediteContainerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<input type="text" id="expediteContainerType" name="expediteContainerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-100" value="40HC" readonly>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="expediteTruckInfo" class="block text-sm font-medium text-gray-700 mb-1">Truck Information</label>
|
||||||
|
<input type="text" id="expediteTruckInfo" name="expediteTruckInfo" placeholder="License plate / Company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverIdentification" class="block text-sm font-medium text-gray-700 mb-1">Driver Identification</label>
|
||||||
|
<input type="text" id="driverIdentification" name="driverIdentification" placeholder="Driver's license or ID number" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Condition at Departure</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionGood" name="departureCondition" value="good" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="departureConditionGood" class="ml-2 block text-sm text-gray-700">Good Condition</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionMinor" name="departureCondition" value="minor" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="departureConditionMinor" class="ml-2 block text-sm text-gray-700">Minor Damage</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="departureConditionMajor" name="departureCondition" value="major" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="departureConditionMajor" class="ml-2 block text-sm text-gray-700">Major Damage</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-3">Container Images at Departure</label>
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Take photos of the container before it leaves the depot</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<div class="image-preview" id="expeditePreview1">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="image-preview" id="expeditePreview2">
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="expediteTakePhoto" 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 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
Take Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="expediteNotes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
|
||||||
|
<textarea id="expediteNotes" name="expediteNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any additional information about this expedition"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Complete Expedition
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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">Pending Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Line</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transport</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</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">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">ABC Trucking</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 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">2023-06-19</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">XYZ Logistics</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0016</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">CMAU5678901</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">2023-06-21</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Fast Transport</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<button class="hover:text-blue-800">Process</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Camera Overlay -->
|
||||||
|
<div id="cameraOverlay" class="camera-overlay">
|
||||||
|
<div class="h-full flex flex-col">
|
||||||
|
<div class="p-4 flex justify-between items-center">
|
||||||
|
<h3 class="text-lg font-semibold text-white">Take Container Photo</h3>
|
||||||
|
<button id="closeCamera" class="text-white hover:text-gray-300">
|
||||||
|
<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="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-grow flex items-center justify-center p-4">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="camera-frame w-full max-w-2xl aspect-[4/3] bg-gray-800 flex items-center justify-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Guide lines for container positioning -->
|
||||||
|
<div class="absolute inset-0 border-2 border-dashed border-white opacity-50 m-8"></div>
|
||||||
|
|
||||||
|
<!-- Positioning guides -->
|
||||||
|
<div class="absolute top-8 left-8 border-t-2 border-l-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute top-8 right-8 border-t-2 border-r-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute bottom-8 left-8 border-b-2 border-l-2 border-white w-8 h-8"></div>
|
||||||
|
<div class="absolute bottom-8 right-8 border-b-2 border-r-2 border-white w-8 h-8"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 flex justify-center">
|
||||||
|
<button id="capturePhoto" class="w-16 h-16 rounded-full bg-red-600 border-4 border-white flex items-center justify-center pulse">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-red-600"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Set current date as default
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
document.getElementById('arrivalDate').value = today;
|
||||||
|
document.getElementById('expeditionDate').value = today;
|
||||||
|
|
||||||
|
// Tab Navigation
|
||||||
|
const receiveContent = document.getElementById('receiveContent');
|
||||||
|
const expediteContent = document.getElementById('expediteContent');
|
||||||
|
|
||||||
|
const receiveNav = document.getElementById('receiveNav');
|
||||||
|
const expediteNav = document.getElementById('expediteNav');
|
||||||
|
|
||||||
|
receiveNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
receiveContent.classList.add('active');
|
||||||
|
expediteContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
receiveNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Receive Container';
|
||||||
|
});
|
||||||
|
|
||||||
|
expediteNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
receiveContent.classList.remove('active');
|
||||||
|
expediteContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
expediteNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedite Container';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Container search functionality
|
||||||
|
document.getElementById('searchContainer').addEventListener('click', function() {
|
||||||
|
const containerNumber = document.getElementById('containerNumber').value;
|
||||||
|
if (containerNumber) {
|
||||||
|
document.getElementById('preinfoData').classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
alert('Please enter a container number');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('searchExpediteContainer').addEventListener('click', function() {
|
||||||
|
const containerNumber = document.getElementById('expediteContainerNumber').value;
|
||||||
|
if (containerNumber) {
|
||||||
|
document.getElementById('orderData').classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
alert('Please enter a container number');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Camera functionality
|
||||||
|
const cameraOverlay = document.getElementById('cameraOverlay');
|
||||||
|
const takePhotoBtn = document.getElementById('takePhoto');
|
||||||
|
const expediteTakePhotoBtn = document.getElementById('expediteTakePhoto');
|
||||||
|
const closeCamera = document.getElementById('closeCamera');
|
||||||
|
const capturePhoto = document.getElementById('capturePhoto');
|
||||||
|
|
||||||
|
let currentImageTarget = null;
|
||||||
|
|
||||||
|
function openCamera(imageTarget) {
|
||||||
|
cameraOverlay.style.display = 'block';
|
||||||
|
currentImageTarget = imageTarget;
|
||||||
|
}
|
||||||
|
|
||||||
|
takePhotoBtn.addEventListener('click', function() {
|
||||||
|
// Find the first empty preview slot
|
||||||
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
const previewEl = document.getElementById(`preview${i}`);
|
||||||
|
if (!previewEl.classList.contains('has-image')) {
|
||||||
|
openCamera(`preview${i}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
expediteTakePhotoBtn.addEventListener('click', function() {
|
||||||
|
// Find the first empty preview slot
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
const previewEl = document.getElementById(`expeditePreview${i}`);
|
||||||
|
if (!previewEl.classList.contains('has-image')) {
|
||||||
|
openCamera(`expeditePreview${i}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
closeCamera.addEventListener('click', function() {
|
||||||
|
cameraOverlay.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
capturePhoto.addEventListener('click', function() {
|
||||||
|
if (currentImageTarget) {
|
||||||
|
const previewEl = document.getElementById(currentImageTarget);
|
||||||
|
|
||||||
|
// Create a container SVG image
|
||||||
|
const containerSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
containerSvg.setAttribute("class", "w-full h-full");
|
||||||
|
containerSvg.setAttribute("viewBox", "0 0 120 120");
|
||||||
|
|
||||||
|
// Random container color
|
||||||
|
const colors = ['#2563eb', '#059669', '#d97706', '#7c3aed'];
|
||||||
|
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
|
||||||
|
// Create container body
|
||||||
|
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
rect.setAttribute("x", "10");
|
||||||
|
rect.setAttribute("y", "20");
|
||||||
|
rect.setAttribute("width", "100");
|
||||||
|
rect.setAttribute("height", "80");
|
||||||
|
rect.setAttribute("fill", randomColor);
|
||||||
|
containerSvg.appendChild(rect);
|
||||||
|
|
||||||
|
// Add some container details
|
||||||
|
const detail1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
detail1.setAttribute("x", "20");
|
||||||
|
detail1.setAttribute("y", "30");
|
||||||
|
detail1.setAttribute("width", "80");
|
||||||
|
detail1.setAttribute("height", "20");
|
||||||
|
detail1.setAttribute("fill", shadeColor(randomColor, -20));
|
||||||
|
containerSvg.appendChild(detail1);
|
||||||
|
|
||||||
|
const detail2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||||
|
detail2.setAttribute("x", "20");
|
||||||
|
detail2.setAttribute("y", "60");
|
||||||
|
detail2.setAttribute("width", "80");
|
||||||
|
detail2.setAttribute("height", "30");
|
||||||
|
detail2.setAttribute("fill", shadeColor(randomColor, -20));
|
||||||
|
containerSvg.appendChild(detail2);
|
||||||
|
|
||||||
|
// Clear the preview and add the new SVG
|
||||||
|
previewEl.innerHTML = '';
|
||||||
|
previewEl.appendChild(containerSvg);
|
||||||
|
previewEl.classList.add('has-image');
|
||||||
|
|
||||||
|
// Close the camera
|
||||||
|
cameraOverlay.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Helper function to darken/lighten colors
|
||||||
|
function shadeColor(color, percent) {
|
||||||
|
let R = parseInt(color.substring(1,3), 16);
|
||||||
|
let G = parseInt(color.substring(3,5), 16);
|
||||||
|
let B = parseInt(color.substring(5,7), 16);
|
||||||
|
|
||||||
|
R = parseInt(R * (100 + percent) / 100);
|
||||||
|
G = parseInt(G * (100 + percent) / 100);
|
||||||
|
B = parseInt(B * (100 + percent) / 100);
|
||||||
|
|
||||||
|
R = (R<255)?R:255;
|
||||||
|
G = (G<255)?G:255;
|
||||||
|
B = (B<255)?B:255;
|
||||||
|
|
||||||
|
R = Math.round(R);
|
||||||
|
G = Math.round(G);
|
||||||
|
B = Math.round(B);
|
||||||
|
|
||||||
|
const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
|
||||||
|
const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
|
||||||
|
const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
|
||||||
|
|
||||||
|
return "#"+RR+GG+BB;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('receiveForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if container data is loaded
|
||||||
|
if (document.getElementById('preinfoData').classList.contains('hidden')) {
|
||||||
|
alert('Please search for a container first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Container reception completed successfully!');
|
||||||
|
this.reset();
|
||||||
|
document.getElementById('preinfoData').classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset image previews
|
||||||
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
const previewEl = document.getElementById(`preview${i}`);
|
||||||
|
previewEl.classList.remove('has-image');
|
||||||
|
previewEl.innerHTML = `
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the first two images back
|
||||||
|
document.getElementById('preview1').classList.add('has-image');
|
||||||
|
document.getElementById('preview1').innerHTML = `
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="70" y="30" width="30" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<circle cx="85" cy="45" r="8" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('preview2').classList.add('has-image');
|
||||||
|
document.getElementById('preview2').innerHTML = `
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="20" width="100" height="80" fill="#2563eb" />
|
||||||
|
<rect x="20" y="30" width="80" height="20" fill="#1e40af" />
|
||||||
|
<rect x="20" y="60" width="80" height="30" fill="#1e40af" />
|
||||||
|
<path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('expediteForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if order data is loaded
|
||||||
|
if (document.getElementById('orderData').classList.contains('hidden')) {
|
||||||
|
alert('Please search for a container first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Container expedition completed successfully!');
|
||||||
|
this.reset();
|
||||||
|
document.getElementById('orderData').classList.add('hidden');
|
||||||
|
|
||||||
|
// Reset image previews
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
const previewEl = document.getElementById(`expeditePreview${i}`);
|
||||||
|
previewEl.classList.remove('has-image');
|
||||||
|
previewEl.innerHTML = `
|
||||||
|
<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 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'9498ddc2d702313f',t:'MTc0ODg4NzM5My4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,689 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Line Operator Dashboard | 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(-5px);
|
||||||
|
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); }
|
||||||
|
}
|
||||||
|
</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">Line Operator Portal</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="flex-grow py-4">
|
||||||
|
<div class="px-4 py-2 text-xs text-blue-300 uppercase tracking-wider">Main</div>
|
||||||
|
<a href="#" class="nav-item active 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="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="#" id="preinfoNav" 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 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 2" />
|
||||||
|
</svg>
|
||||||
|
Container Preinfo
|
||||||
|
</a>
|
||||||
|
<a href="#" id="ordersNav" 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>
|
||||||
|
Expedition Orders
|
||||||
|
</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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
Reports
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">Account</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>
|
||||||
|
</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">
|
||||||
|
LO
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">Maersk Line</p>
|
||||||
|
<p class="text-xs text-blue-300">Line Operator</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">
|
||||||
|
<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>
|
||||||
|
<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="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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<div class="p-6">
|
||||||
|
<!-- Dashboard Overview -->
|
||||||
|
<div id="dashboardContent" class="tab-content active">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Active Containers</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">42</p>
|
||||||
|
<p class="text-sm text-green-600">+3 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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-lg font-semibold text-gray-700">Preinfo Sent</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">18</p>
|
||||||
|
<p class="text-sm text-green-600">+5 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="p-3 rounded-full bg-orange-100 text-orange-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Pending Orders</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">7</p>
|
||||||
|
<p class="text-sm text-orange-600">2 require attention</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<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">Recent Container Activity</h3>
|
||||||
|
</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">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</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">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU7654321</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Preinfo</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">Order</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-13</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Expedited</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-12</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">Payment Status</h3>
|
||||||
|
</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">Invoice</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</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">INV-2023-0042</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$1,250.00</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0041</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$875.50</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0040</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$2,100.00</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Overdue</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-05</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0039</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$950.25</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-05-28</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Form -->
|
||||||
|
<div id="preinfoContent" class="tab-content">
|
||||||
|
<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">Submit Container Preinfo</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Provide information about containers that will arrive at the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="preinfoForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="estimatedArrival" class="block text-sm font-medium text-gray-700 mb-1">Estimated Arrival Date</label>
|
||||||
|
<input type="date" id="estimatedArrival" name="estimatedArrival" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="vesselVoyage" class="block text-sm font-medium text-gray-700 mb-1">Vessel/Voyage</label>
|
||||||
|
<input type="text" id="vesselVoyage" name="vesselVoyage" placeholder="e.g. MAERSK SEVILLE / 123E" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="additionalInfo" class="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
|
||||||
|
<textarea id="additionalInfo" name="additionalInfo" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex items-center">
|
||||||
|
<input type="checkbox" id="damageCheck" name="damageCheck" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||||
|
<label for="damageCheck" class="ml-2 block text-sm text-gray-700">Container has visible damage</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="damageDetails" class="form-section hidden">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe the damage in detail"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end space-x-3">
|
||||||
|
<button type="button" id="addMoreContainer" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||||||
|
Add Another Container
|
||||||
|
</button>
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Preinfo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Recent Preinfo Submissions</h3>
|
||||||
|
</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">Est. Arrival</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">MSCU7654321</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">2023-06-18</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</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">2023-06-17</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">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1122334</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">2023-06-16</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">Delayed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expedition Orders Form -->
|
||||||
|
<div id="ordersContent" class="tab-content">
|
||||||
|
<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">Create Expedition Order</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Request containers to be expedited from the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="orderForm" class="space-y-6">
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderType" class="block text-sm font-medium text-gray-700 mb-1">Order Type</label>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="specificContainer" name="orderType" value="specific" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="specificContainer" class="ml-2 block text-sm text-gray-700">Specific Container</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="anyContainer" name="orderType" value="any" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="anyContainer" class="ml-2 block text-sm text-gray-700">Any Available Container</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="specificContainerFields" class="form-section">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="orderContainerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="anyContainerFields" class="form-section hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="orderContainerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerCondition" class="block text-sm font-medium text-gray-700 mb-1">Container Condition</label>
|
||||||
|
<select id="containerCondition" name="containerCondition" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="any">Any Condition</option>
|
||||||
|
<option value="new">New / Like New</option>
|
||||||
|
<option value="good">Good Condition</option>
|
||||||
|
<option value="acceptable">Acceptable</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date</label>
|
||||||
|
<input type="date" id="pickupDate" name="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="transportCompany" class="block text-sm font-medium text-gray-700 mb-1">Transport Company</label>
|
||||||
|
<input type="text" id="transportCompany" name="transportCompany" placeholder="e.g. ABC Trucking" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverInfo" class="block text-sm font-medium text-gray-700 mb-1">Driver Information</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<input type="text" id="driverName" name="driverName" placeholder="Driver Name" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<input type="text" id="driverPhone" name="driverPhone" placeholder="Driver Phone" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderNotes" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
|
||||||
|
<textarea id="orderNotes" name="orderNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Active Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 40HC</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-19</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0013</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</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">Completed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab Navigation
|
||||||
|
const dashboardContent = document.getElementById('dashboardContent');
|
||||||
|
const preinfoContent = document.getElementById('preinfoContent');
|
||||||
|
const ordersContent = document.getElementById('ordersContent');
|
||||||
|
|
||||||
|
const preinfoNav = document.getElementById('preinfoNav');
|
||||||
|
const ordersNav = document.getElementById('ordersNav');
|
||||||
|
|
||||||
|
preinfoNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.add('active');
|
||||||
|
ordersContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
preinfoNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Container Preinfo';
|
||||||
|
});
|
||||||
|
|
||||||
|
ordersNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.remove('active');
|
||||||
|
ordersContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
ordersNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedition Orders';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Damage checkbox toggle
|
||||||
|
const damageCheck = document.getElementById('damageCheck');
|
||||||
|
const damageDetails = document.getElementById('damageDetails');
|
||||||
|
|
||||||
|
damageCheck.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
damageDetails.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
damageDetails.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Order type toggle
|
||||||
|
const specificContainer = document.getElementById('specificContainer');
|
||||||
|
const anyContainer = document.getElementById('anyContainer');
|
||||||
|
const specificContainerFields = document.getElementById('specificContainerFields');
|
||||||
|
const anyContainerFields = document.getElementById('anyContainerFields');
|
||||||
|
|
||||||
|
specificContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.remove('hidden');
|
||||||
|
anyContainerFields.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
anyContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.add('hidden');
|
||||||
|
anyContainerFields.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('preinfoForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Preinfo submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('orderForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Expedition order submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add more container button
|
||||||
|
document.getElementById('addMoreContainer').addEventListener('click', function() {
|
||||||
|
alert('In a real app, this would add fields for another container');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,689 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Line Operator Dashboard | 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(-5px);
|
||||||
|
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); }
|
||||||
|
}
|
||||||
|
</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">Line Operator Portal</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="flex-grow py-4">
|
||||||
|
<div class="px-4 py-2 text-xs text-blue-300 uppercase tracking-wider">Main</div>
|
||||||
|
<a href="#" class="nav-item active 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="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="#" id="preinfoNav" 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 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 2" />
|
||||||
|
</svg>
|
||||||
|
Container Preinfo
|
||||||
|
</a>
|
||||||
|
<a href="#" id="ordersNav" 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>
|
||||||
|
Expedition Orders
|
||||||
|
</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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
Reports
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">Account</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>
|
||||||
|
</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">
|
||||||
|
LO
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">Maersk Line</p>
|
||||||
|
<p class="text-xs text-blue-300">Line Operator</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">
|
||||||
|
<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>
|
||||||
|
<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="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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<div class="p-6">
|
||||||
|
<!-- Dashboard Overview -->
|
||||||
|
<div id="dashboardContent" class="tab-content active">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Active Containers</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">42</p>
|
||||||
|
<p class="text-sm text-green-600">+3 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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-lg font-semibold text-gray-700">Preinfo Sent</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">18</p>
|
||||||
|
<p class="text-sm text-green-600">+5 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="p-3 rounded-full bg-orange-100 text-orange-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Pending Orders</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">7</p>
|
||||||
|
<p class="text-sm text-orange-600">2 require attention</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<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">Recent Container Activity</h3>
|
||||||
|
</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">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</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">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU7654321</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Preinfo</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">Order</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-13</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Expedited</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-12</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">Payment Status</h3>
|
||||||
|
</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">Invoice</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</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">INV-2023-0042</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$1,250.00</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0041</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$875.50</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0040</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$2,100.00</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Overdue</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-05</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0039</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$950.25</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-05-28</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Form -->
|
||||||
|
<div id="preinfoContent" class="tab-content">
|
||||||
|
<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">Submit Container Preinfo</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Provide information about containers that will arrive at the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="preinfoForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="estimatedArrival" class="block text-sm font-medium text-gray-700 mb-1">Estimated Arrival Date</label>
|
||||||
|
<input type="date" id="estimatedArrival" name="estimatedArrival" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="vesselVoyage" class="block text-sm font-medium text-gray-700 mb-1">Vessel/Voyage</label>
|
||||||
|
<input type="text" id="vesselVoyage" name="vesselVoyage" placeholder="e.g. MAERSK SEVILLE / 123E" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="additionalInfo" class="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
|
||||||
|
<textarea id="additionalInfo" name="additionalInfo" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex items-center">
|
||||||
|
<input type="checkbox" id="damageCheck" name="damageCheck" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||||
|
<label for="damageCheck" class="ml-2 block text-sm text-gray-700">Container has visible damage</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="damageDetails" class="form-section hidden">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe the damage in detail"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end space-x-3">
|
||||||
|
<button type="button" id="addMoreContainer" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||||||
|
Add Another Container
|
||||||
|
</button>
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Preinfo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Recent Preinfo Submissions</h3>
|
||||||
|
</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">Est. Arrival</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">MSCU7654321</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">2023-06-18</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</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">2023-06-17</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">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1122334</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">2023-06-16</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">Delayed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expedition Orders Form -->
|
||||||
|
<div id="ordersContent" class="tab-content">
|
||||||
|
<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">Create Expedition Order</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Request containers to be expedited from the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="orderForm" class="space-y-6">
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderType" class="block text-sm font-medium text-gray-700 mb-1">Order Type</label>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="specificContainer" name="orderType" value="specific" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="specificContainer" class="ml-2 block text-sm text-gray-700">Specific Container</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="anyContainer" name="orderType" value="any" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="anyContainer" class="ml-2 block text-sm text-gray-700">Any Available Container</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="specificContainerFields" class="form-section">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="orderContainerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="anyContainerFields" class="form-section hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="orderContainerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerCondition" class="block text-sm font-medium text-gray-700 mb-1">Container Condition</label>
|
||||||
|
<select id="containerCondition" name="containerCondition" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="any">Any Condition</option>
|
||||||
|
<option value="new">New / Like New</option>
|
||||||
|
<option value="good">Good Condition</option>
|
||||||
|
<option value="acceptable">Acceptable</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date</label>
|
||||||
|
<input type="date" id="pickupDate" name="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="transportCompany" class="block text-sm font-medium text-gray-700 mb-1">Transport Company</label>
|
||||||
|
<input type="text" id="transportCompany" name="transportCompany" placeholder="e.g. ABC Trucking" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverInfo" class="block text-sm font-medium text-gray-700 mb-1">Driver Information</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<input type="text" id="driverName" name="driverName" placeholder="Driver Name" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<input type="text" id="driverPhone" name="driverPhone" placeholder="Driver Phone" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderNotes" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
|
||||||
|
<textarea id="orderNotes" name="orderNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Active Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 40HC</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-19</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0013</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</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">Completed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab Navigation
|
||||||
|
const dashboardContent = document.getElementById('dashboardContent');
|
||||||
|
const preinfoContent = document.getElementById('preinfoContent');
|
||||||
|
const ordersContent = document.getElementById('ordersContent');
|
||||||
|
|
||||||
|
const preinfoNav = document.getElementById('preinfoNav');
|
||||||
|
const ordersNav = document.getElementById('ordersNav');
|
||||||
|
|
||||||
|
preinfoNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.add('active');
|
||||||
|
ordersContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
preinfoNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Container Preinfo';
|
||||||
|
});
|
||||||
|
|
||||||
|
ordersNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.remove('active');
|
||||||
|
ordersContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
ordersNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedition Orders';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Damage checkbox toggle
|
||||||
|
const damageCheck = document.getElementById('damageCheck');
|
||||||
|
const damageDetails = document.getElementById('damageDetails');
|
||||||
|
|
||||||
|
damageCheck.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
damageDetails.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
damageDetails.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Order type toggle
|
||||||
|
const specificContainer = document.getElementById('specificContainer');
|
||||||
|
const anyContainer = document.getElementById('anyContainer');
|
||||||
|
const specificContainerFields = document.getElementById('specificContainerFields');
|
||||||
|
const anyContainerFields = document.getElementById('anyContainerFields');
|
||||||
|
|
||||||
|
specificContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.remove('hidden');
|
||||||
|
anyContainerFields.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
anyContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.add('hidden');
|
||||||
|
anyContainerFields.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('preinfoForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Preinfo submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('orderForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Expedition order submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add more container button
|
||||||
|
document.getElementById('addMoreContainer').addEventListener('click', function() {
|
||||||
|
alert('In a real app, this would add fields for another container');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,689 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Line Operator Dashboard | 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(-5px);
|
||||||
|
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); }
|
||||||
|
}
|
||||||
|
</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">Line Operator Portal</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="flex-grow py-4">
|
||||||
|
<div class="px-4 py-2 text-xs text-blue-300 uppercase tracking-wider">Main</div>
|
||||||
|
<a href="#" class="nav-item active 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="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="#" id="preinfoNav" 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 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 2" />
|
||||||
|
</svg>
|
||||||
|
Container Preinfo
|
||||||
|
</a>
|
||||||
|
<a href="#" id="ordersNav" 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>
|
||||||
|
Expedition Orders
|
||||||
|
</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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
Reports
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">Account</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>
|
||||||
|
</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">
|
||||||
|
LO
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">Maersk Line</p>
|
||||||
|
<p class="text-xs text-blue-300">Line Operator</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">
|
||||||
|
<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>
|
||||||
|
<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="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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<div class="p-6">
|
||||||
|
<!-- Dashboard Overview -->
|
||||||
|
<div id="dashboardContent" class="tab-content active">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Active Containers</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">42</p>
|
||||||
|
<p class="text-sm text-green-600">+3 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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-lg font-semibold text-gray-700">Preinfo Sent</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">18</p>
|
||||||
|
<p class="text-sm text-green-600">+5 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="p-3 rounded-full bg-orange-100 text-orange-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Pending Orders</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">7</p>
|
||||||
|
<p class="text-sm text-orange-600">2 require attention</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<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">Recent Container Activity</h3>
|
||||||
|
</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">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</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">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU7654321</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Preinfo</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">Order</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-13</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Expedited</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-12</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">Payment Status</h3>
|
||||||
|
</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">Invoice</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</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">INV-2023-0042</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$1,250.00</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0041</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$875.50</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0040</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$2,100.00</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Overdue</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-05</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0039</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$950.25</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-05-28</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Form -->
|
||||||
|
<div id="preinfoContent" class="tab-content">
|
||||||
|
<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">Submit Container Preinfo</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Provide information about containers that will arrive at the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="preinfoForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="estimatedArrival" class="block text-sm font-medium text-gray-700 mb-1">Estimated Arrival Date</label>
|
||||||
|
<input type="date" id="estimatedArrival" name="estimatedArrival" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="vesselVoyage" class="block text-sm font-medium text-gray-700 mb-1">Vessel/Voyage</label>
|
||||||
|
<input type="text" id="vesselVoyage" name="vesselVoyage" placeholder="e.g. MAERSK SEVILLE / 123E" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="additionalInfo" class="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
|
||||||
|
<textarea id="additionalInfo" name="additionalInfo" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex items-center">
|
||||||
|
<input type="checkbox" id="damageCheck" name="damageCheck" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||||
|
<label for="damageCheck" class="ml-2 block text-sm text-gray-700">Container has visible damage</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="damageDetails" class="form-section hidden">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe the damage in detail"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end space-x-3">
|
||||||
|
<button type="button" id="addMoreContainer" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||||||
|
Add Another Container
|
||||||
|
</button>
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Preinfo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Recent Preinfo Submissions</h3>
|
||||||
|
</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">Est. Arrival</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">MSCU7654321</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">2023-06-18</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</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">2023-06-17</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">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1122334</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">2023-06-16</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">Delayed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expedition Orders Form -->
|
||||||
|
<div id="ordersContent" class="tab-content">
|
||||||
|
<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">Create Expedition Order</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Request containers to be expedited from the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="orderForm" class="space-y-6">
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderType" class="block text-sm font-medium text-gray-700 mb-1">Order Type</label>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="specificContainer" name="orderType" value="specific" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="specificContainer" class="ml-2 block text-sm text-gray-700">Specific Container</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="anyContainer" name="orderType" value="any" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="anyContainer" class="ml-2 block text-sm text-gray-700">Any Available Container</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="specificContainerFields" class="form-section">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="orderContainerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="anyContainerFields" class="form-section hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="orderContainerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerCondition" class="block text-sm font-medium text-gray-700 mb-1">Container Condition</label>
|
||||||
|
<select id="containerCondition" name="containerCondition" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="any">Any Condition</option>
|
||||||
|
<option value="new">New / Like New</option>
|
||||||
|
<option value="good">Good Condition</option>
|
||||||
|
<option value="acceptable">Acceptable</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date</label>
|
||||||
|
<input type="date" id="pickupDate" name="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="transportCompany" class="block text-sm font-medium text-gray-700 mb-1">Transport Company</label>
|
||||||
|
<input type="text" id="transportCompany" name="transportCompany" placeholder="e.g. ABC Trucking" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverInfo" class="block text-sm font-medium text-gray-700 mb-1">Driver Information</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<input type="text" id="driverName" name="driverName" placeholder="Driver Name" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<input type="text" id="driverPhone" name="driverPhone" placeholder="Driver Phone" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderNotes" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
|
||||||
|
<textarea id="orderNotes" name="orderNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Active Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 40HC</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-19</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0013</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</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">Completed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab Navigation
|
||||||
|
const dashboardContent = document.getElementById('dashboardContent');
|
||||||
|
const preinfoContent = document.getElementById('preinfoContent');
|
||||||
|
const ordersContent = document.getElementById('ordersContent');
|
||||||
|
|
||||||
|
const preinfoNav = document.getElementById('preinfoNav');
|
||||||
|
const ordersNav = document.getElementById('ordersNav');
|
||||||
|
|
||||||
|
preinfoNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.add('active');
|
||||||
|
ordersContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
preinfoNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Container Preinfo';
|
||||||
|
});
|
||||||
|
|
||||||
|
ordersNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.remove('active');
|
||||||
|
ordersContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
ordersNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedition Orders';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Damage checkbox toggle
|
||||||
|
const damageCheck = document.getElementById('damageCheck');
|
||||||
|
const damageDetails = document.getElementById('damageDetails');
|
||||||
|
|
||||||
|
damageCheck.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
damageDetails.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
damageDetails.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Order type toggle
|
||||||
|
const specificContainer = document.getElementById('specificContainer');
|
||||||
|
const anyContainer = document.getElementById('anyContainer');
|
||||||
|
const specificContainerFields = document.getElementById('specificContainerFields');
|
||||||
|
const anyContainerFields = document.getElementById('anyContainerFields');
|
||||||
|
|
||||||
|
specificContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.remove('hidden');
|
||||||
|
anyContainerFields.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
anyContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.add('hidden');
|
||||||
|
anyContainerFields.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('preinfoForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Preinfo submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('orderForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Expedition order submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add more container button
|
||||||
|
document.getElementById('addMoreContainer').addEventListener('click', function() {
|
||||||
|
alert('In a real app, this would add fields for another container');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,689 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Line Operator Dashboard | 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(-5px);
|
||||||
|
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); }
|
||||||
|
}
|
||||||
|
</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">Line Operator Portal</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="flex-grow py-4">
|
||||||
|
<div class="px-4 py-2 text-xs text-blue-300 uppercase tracking-wider">Main</div>
|
||||||
|
<a href="#" class="nav-item active 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="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="#" id="preinfoNav" 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 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 2" />
|
||||||
|
</svg>
|
||||||
|
Container Preinfo
|
||||||
|
</a>
|
||||||
|
<a href="#" id="ordersNav" 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>
|
||||||
|
Expedition Orders
|
||||||
|
</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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
Reports
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">Account</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>
|
||||||
|
</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">
|
||||||
|
LO
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm font-medium">Maersk Line</p>
|
||||||
|
<p class="text-xs text-blue-300">Line Operator</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">
|
||||||
|
<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>
|
||||||
|
<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="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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<div class="p-6">
|
||||||
|
<!-- Dashboard Overview -->
|
||||||
|
<div id="dashboardContent" class="tab-content active">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Active Containers</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">42</p>
|
||||||
|
<p class="text-sm text-green-600">+3 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<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-lg font-semibold text-gray-700">Preinfo Sent</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">18</p>
|
||||||
|
<p class="text-sm text-green-600">+5 since last week</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-white rounded-lg shadow p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="p-3 rounded-full bg-orange-100 text-orange-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700">Pending Orders</h3>
|
||||||
|
<p class="text-3xl font-bold text-gray-900">7</p>
|
||||||
|
<p class="text-sm text-orange-600">2 require attention</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<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">Recent Container Activity</h3>
|
||||||
|
</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">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</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">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU7654321</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Preinfo</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40DV</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">Order</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-13</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Expedited</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-12</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">Payment Status</h3>
|
||||||
|
</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">Invoice</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</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">INV-2023-0042</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$1,250.00</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0041</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$875.50</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0040</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$2,100.00</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Overdue</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-05</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0039</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$950.25</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">Paid</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-05-28</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container Preinfo Form -->
|
||||||
|
<div id="preinfoContent" class="tab-content">
|
||||||
|
<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">Submit Container Preinfo</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Provide information about containers that will arrive at the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="preinfoForm" class="space-y-6">
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="estimatedArrival" class="block text-sm font-medium text-gray-700 mb-1">Estimated Arrival Date</label>
|
||||||
|
<input type="date" id="estimatedArrival" name="estimatedArrival" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="vesselVoyage" class="block text-sm font-medium text-gray-700 mb-1">Vessel/Voyage</label>
|
||||||
|
<input type="text" id="vesselVoyage" name="vesselVoyage" placeholder="e.g. MAERSK SEVILLE / 123E" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="additionalInfo" class="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
|
||||||
|
<textarea id="additionalInfo" name="additionalInfo" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex items-center">
|
||||||
|
<input type="checkbox" id="damageCheck" name="damageCheck" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||||
|
<label for="damageCheck" class="ml-2 block text-sm text-gray-700">Container has visible damage</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="damageDetails" class="form-section hidden">
|
||||||
|
<label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
|
||||||
|
<textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe the damage in detail"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end space-x-3">
|
||||||
|
<button type="button" id="addMoreContainer" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||||||
|
Add Another Container
|
||||||
|
</button>
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Preinfo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Recent Preinfo Submissions</h3>
|
||||||
|
</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">Est. Arrival</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">MSCU7654321</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">2023-06-18</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</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">2023-06-17</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">Received</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1122334</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">2023-06-16</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">Delayed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expedition Orders Form -->
|
||||||
|
<div id="ordersContent" class="tab-content">
|
||||||
|
<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">Create Expedition Order</h3>
|
||||||
|
<p class="text-sm text-gray-600 mt-1">Request containers to be expedited from the depot</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<form id="orderForm" class="space-y-6">
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderType" class="block text-sm font-medium text-gray-700 mb-1">Order Type</label>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="specificContainer" name="orderType" value="specific" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
|
||||||
|
<label for="specificContainer" class="ml-2 block text-sm text-gray-700">Specific Container</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="radio" id="anyContainer" name="orderType" value="any" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
||||||
|
<label for="anyContainer" class="ml-2 block text-sm text-gray-700">Any Available Container</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="specificContainerFields" class="form-section">
|
||||||
|
<label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
||||||
|
<input type="text" id="orderContainerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="anyContainerFields" class="form-section hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
|
||||||
|
<select id="orderContainerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="">Select container type</option>
|
||||||
|
<option value="20DV">20' Dry Van (20DV)</option>
|
||||||
|
<option value="40DV">40' Dry Van (40DV)</option>
|
||||||
|
<option value="40HC">40' High Cube (40HC)</option>
|
||||||
|
<option value="20RF">20' Reefer (20RF)</option>
|
||||||
|
<option value="40RF">40' Reefer (40RF)</option>
|
||||||
|
<option value="20OT">20' Open Top (20OT)</option>
|
||||||
|
<option value="40OT">40' Open Top (40OT)</option>
|
||||||
|
<option value="20FR">20' Flat Rack (20FR)</option>
|
||||||
|
<option value="40FR">40' Flat Rack (40FR)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="containerCondition" class="block text-sm font-medium text-gray-700 mb-1">Container Condition</label>
|
||||||
|
<select id="containerCondition" name="containerCondition" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="any">Any Condition</option>
|
||||||
|
<option value="new">New / Like New</option>
|
||||||
|
<option value="good">Good Condition</option>
|
||||||
|
<option value="acceptable">Acceptable</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date</label>
|
||||||
|
<input type="date" id="pickupDate" name="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="transportCompany" class="block text-sm font-medium text-gray-700 mb-1">Transport Company</label>
|
||||||
|
<input type="text" id="transportCompany" name="transportCompany" placeholder="e.g. ABC Trucking" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="driverInfo" class="block text-sm font-medium text-gray-700 mb-1">Driver Information</label>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<input type="text" id="driverName" name="driverName" placeholder="Driver Name" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<input type="text" id="driverPhone" name="driverPhone" placeholder="Driver Phone" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<label for="orderNotes" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
|
||||||
|
<textarea id="orderNotes" name="orderNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section flex justify-end">
|
||||||
|
<button type="submit" 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">
|
||||||
|
Submit Order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 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">Active Expedition Orders</h3>
|
||||||
|
</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">Order ID</th>
|
||||||
|
<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">Pickup Date</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||||
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">ORD-2023-0015</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 40HC</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-19</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">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">Cancel</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0013</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU1357924</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</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">Completed</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800">View</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab Navigation
|
||||||
|
const dashboardContent = document.getElementById('dashboardContent');
|
||||||
|
const preinfoContent = document.getElementById('preinfoContent');
|
||||||
|
const ordersContent = document.getElementById('ordersContent');
|
||||||
|
|
||||||
|
const preinfoNav = document.getElementById('preinfoNav');
|
||||||
|
const ordersNav = document.getElementById('ordersNav');
|
||||||
|
|
||||||
|
preinfoNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.add('active');
|
||||||
|
ordersContent.classList.remove('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
preinfoNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Container Preinfo';
|
||||||
|
});
|
||||||
|
|
||||||
|
ordersNav.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
dashboardContent.classList.remove('active');
|
||||||
|
preinfoContent.classList.remove('active');
|
||||||
|
ordersContent.classList.add('active');
|
||||||
|
|
||||||
|
// Update navigation styling
|
||||||
|
document.querySelector('.nav-item.active').classList.remove('active');
|
||||||
|
ordersNav.classList.add('active');
|
||||||
|
|
||||||
|
// Update header title
|
||||||
|
document.querySelector('header h2').textContent = 'Expedition Orders';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Damage checkbox toggle
|
||||||
|
const damageCheck = document.getElementById('damageCheck');
|
||||||
|
const damageDetails = document.getElementById('damageDetails');
|
||||||
|
|
||||||
|
damageCheck.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
damageDetails.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
damageDetails.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Order type toggle
|
||||||
|
const specificContainer = document.getElementById('specificContainer');
|
||||||
|
const anyContainer = document.getElementById('anyContainer');
|
||||||
|
const specificContainerFields = document.getElementById('specificContainerFields');
|
||||||
|
const anyContainerFields = document.getElementById('anyContainerFields');
|
||||||
|
|
||||||
|
specificContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.remove('hidden');
|
||||||
|
anyContainerFields.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
anyContainer.addEventListener('change', function() {
|
||||||
|
if (this.checked) {
|
||||||
|
specificContainerFields.classList.add('hidden');
|
||||||
|
anyContainerFields.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submissions
|
||||||
|
document.getElementById('preinfoForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Preinfo submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('orderForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// In a real app, this would send data to the server
|
||||||
|
alert('Expedition order submitted successfully!');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add more container button
|
||||||
|
document.getElementById('addMoreContainer').addEventListener('click', function() {
|
||||||
|
alert('In a real app, this would add fields for another container');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,354 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Container Depot Management System</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #0f4c81 0%, #1a6baf 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
animation: fadeIn 0.8s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.login-container {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-section {
|
||||||
|
width: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.login-form-section {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to bottom right, #2563eb, #1d4ed8);
|
||||||
|
padding: 2rem;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.info-section {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1f2937;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #4b5563;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="password"]:focus {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-forgot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-me {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-me input {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #2563eb;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button:hover {
|
||||||
|
background-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
background-color: rgba(37, 99, 235, 0.5);
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-text {
|
||||||
|
color: rgba(219, 234, 254, 0.9);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMessage {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMessage.error {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMessage.success {
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
/* existing styles remain */
|
||||||
|
min-height: 600px; /* Add this to control maximum height */
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-section {
|
||||||
|
/* existing styles remain */
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
/* existing styles remain */
|
||||||
|
min-height: 600px; /* Match container height */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add these new styles */
|
||||||
|
.icon {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: white;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!-- Rest of the HTML remains the same, just remove all Tailwind classes -->
|
||||||
|
<body>
|
||||||
|
<div class="wave"></div>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<!-- Left side - Login Form -->
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Container Depot</h1>
|
||||||
|
<p>Sign in to access the management system</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="loginForm">
|
||||||
|
<div>
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input type="text" id="username" name="username" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="remember-forgot">
|
||||||
|
<div class="remember-me">
|
||||||
|
<input type="checkbox" id="remember" name="remember">
|
||||||
|
<label for="remember">Remember me</label>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="forgot-password">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="submit-button">
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loginMessage"></div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Need help? Contact system administrator</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right side - Info -->
|
||||||
|
<div class="info-section">
|
||||||
|
<div>
|
||||||
|
<h2>Container Depot Management System</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Line Operators</h3>
|
||||||
|
<p class="feature-text">Manage container preinfo and expedition orders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Barrier Staff</h3>
|
||||||
|
<p class="feature-text">Process container arrivals and departures</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Depot Management</h3>
|
||||||
|
<p class="feature-text">View inventory and generate reports</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="version-info">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Version 1.0.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// JavaScript remains unchanged
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Container Depot Management System</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #0f4c81 0%, #1a6baf 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
.login-container {
|
||||||
|
animation: fadeIn 0.8s ease-in-out;
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="flex items-center justify-center p-4">
|
||||||
|
<div class="wave"></div>
|
||||||
|
|
||||||
|
<div class="login-container bg-white rounded-xl shadow-2xl overflow-hidden max-w-4xl w-full flex flex-col md:flex-row">
|
||||||
|
<!-- Left side - Login Form -->
|
||||||
|
<div class="w-full md:w-1/2 p-8">
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-800">Container Depot</h1>
|
||||||
|
<p class="text-gray-600 mt-2">Sign in to access the management system</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="loginForm" class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
|
||||||
|
<input type="text" id="username" name="username" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||||
|
<input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||||
|
<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="text-sm text-blue-600 hover:text-blue-800">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loginMessage" class="text-center hidden"></div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="mt-6 text-center text-sm text-gray-600">
|
||||||
|
<p>Need help? Contact system administrator</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right side - Info -->
|
||||||
|
<div class="w-full md:w-1/2 bg-gradient-to-br from-blue-600 to-blue-800 p-8 text-white flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold mb-6">Container Depot Management System</h2>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="bg-blue-500 p-2 rounded-full mr-3">
|
||||||
|
<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 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Line Operators</h3>
|
||||||
|
<p class="text-blue-100 text-sm">Manage container preinfo and expedition orders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="bg-blue-500 p-2 rounded-full mr-3">
|
||||||
|
<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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Barrier Staff</h3>
|
||||||
|
<p class="text-blue-100 text-sm">Process container arrivals and departures</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="bg-blue-500 p-2 rounded-full mr-3">
|
||||||
|
<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 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Depot Management</h3>
|
||||||
|
<p class="text-blue-100 text-sm">View inventory and generate reports</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm">Version 1.0.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const username = document.getElementById('username').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
const messageDiv = document.getElementById('loginMessage');
|
||||||
|
|
||||||
|
// This is a frontend demo - in a real Django app, this would be handled by the backend
|
||||||
|
if (username && password) {
|
||||||
|
messageDiv.textContent = "Logging in...";
|
||||||
|
messageDiv.classList.remove('hidden', 'text-red-500');
|
||||||
|
messageDiv.classList.add('text-green-500');
|
||||||
|
|
||||||
|
// Simulate login process
|
||||||
|
setTimeout(() => {
|
||||||
|
// In a real app, this would redirect to the appropriate dashboard based on user role
|
||||||
|
if (username === 'line_operator') {
|
||||||
|
window.location.href = '/line-operator-dashboard';
|
||||||
|
} else if (username === 'barrier') {
|
||||||
|
window.location.href = '/barrier-dashboard';
|
||||||
|
} else if (username === 'depot') {
|
||||||
|
window.location.href = '/depot-dashboard';
|
||||||
|
} else {
|
||||||
|
messageDiv.textContent = "Demo login: Use 'line_operator', 'barrier', or 'depot' as username";
|
||||||
|
messageDiv.classList.remove('text-green-500');
|
||||||
|
messageDiv.classList.add('text-blue-500');
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
messageDiv.textContent = "Please enter both username and password";
|
||||||
|
messageDiv.classList.remove('hidden', 'text-green-500');
|
||||||
|
messageDiv.classList.add('text-red-500');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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:'947f67b0352e3130',t:'MTc0ODYyMDQxMy4wMDAwMDA='};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></body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
{% load static %}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Container Depot Management System</title>
|
||||||
|
<link rel="stylesheet" href="{% static '/css/styles.css' %}"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{# {{ title|default:"Container Depot Management System" }} {{ description|default:"Login to the Container Depot Management System" }}#}
|
||||||
|
<div class="background-image"></div>
|
||||||
|
<div class="wave"></div>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<!-- Left side - Login Form -->
|
||||||
|
<div class="login-form-section">
|
||||||
|
<div>
|
||||||
|
<h1>Container Depot</h1>
|
||||||
|
<p class="subtitle">Sign in to access the management system</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="loginForm" method="post" action="{% url 'login' %}"
|
||||||
|
>
|
||||||
|
{% csrf_token %}
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input type="text" id="username" name="username" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="remember-forgot">
|
||||||
|
<div class="remember-me">
|
||||||
|
<input type="checkbox" id="remember" name="remember">
|
||||||
|
<label for="remember">Remember me</label>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="forgot-password">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="submit-button" >
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loginMessage"></div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Need help? Contact system administrator</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right side - Info -->
|
||||||
|
<div class="info-section">
|
||||||
|
<div>
|
||||||
|
<h2>Container Depot Management System</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Line Operators</h3>
|
||||||
|
<p class="feature-text">Manage container preinfo and expedition orders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Barrier Staff</h3>
|
||||||
|
<p class="feature-text">Process container arrivals and departures</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Depot Management</h3>
|
||||||
|
<p class="feature-text">View inventory and generate reports</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="version-info">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Version 1.0.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<style>
|
||||||
|
#map {
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="map">
|
||||||
|
<div id="map"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
© 2025 Kikimor EOOD | K-DepoT - All rights reserved.
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initMap() {
|
||||||
|
const map = new google.maps.Map(document.getElementById("map"), {
|
||||||
|
center: { lat: 43.2121, lng: 27.9204 },
|
||||||
|
zoom: 15
|
||||||
|
});
|
||||||
|
|
||||||
|
new google.maps.Marker({
|
||||||
|
position: { lat: 43.2121, lng: 27.9204 },
|
||||||
|
map: map,
|
||||||
|
title: "K-DepoT - Kikimor EOOD"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBboGDgiCrc9yp2uSLmVcfVVIVK-kOQqc4&callback=initMap"
|
||||||
|
async
|
||||||
|
defer>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,342 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Container Depot Management System</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #0f4c81 0%, #1a6baf 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
animation: fadeIn 0.8s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.login-container {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-section {
|
||||||
|
width: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.login-form-section {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to bottom right, #2563eb, #1d4ed8);
|
||||||
|
padding: 2rem;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.info-section {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1f2937;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #4b5563;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="password"]:focus {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-forgot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-me {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-me input {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #2563eb;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button:hover {
|
||||||
|
background-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
background-color: rgba(37, 99, 235, 0.5);
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-text {
|
||||||
|
color: rgba(219, 234, 254, 0.9);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMessage {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMessage.error {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginMessage.success {
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wave"></div>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<!-- Left side - Login Form -->
|
||||||
|
<div class="login-form-section">
|
||||||
|
<div>
|
||||||
|
<h1>Container Depot</h1>
|
||||||
|
<p class="subtitle">Sign in to access the management system</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="loginForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input type="text" id="username" name="username" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="remember-forgot">
|
||||||
|
<div class="remember-me">
|
||||||
|
<input type="checkbox" id="remember" name="remember">
|
||||||
|
<label for="remember">Remember me</label>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="forgot-password">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="submit-button">
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loginMessage"></div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Need help? Contact system administrator</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right side - Info -->
|
||||||
|
<div class="info-section">
|
||||||
|
<div>
|
||||||
|
<h2>Container Depot Management System</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Line Operators</h3>
|
||||||
|
<p class="feature-text">Manage container preinfo and expedition orders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Barrier Staff</h3>
|
||||||
|
<p class="feature-text">Process container arrivals and departures</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Depot Management</h3>
|
||||||
|
<p class="feature-text">View inventory and generate reports</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="version-info">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||||
|
</svg>
|
||||||
|
<span>Version 1.0.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const username = document.getElementById('username').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
const messageDiv = document.getElementById('loginMessage');
|
||||||
|
|
||||||
|
if (username && password) {
|
||||||
|
messageDiv.textContent = "Logging in...";
|
||||||
|
messageDiv.classList.remove('hidden', 'error');
|
||||||
|
messageDiv.classList.add('success');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (username === 'line_operator') {
|
||||||
|
window.location.href = '/line-operator-dashboard';
|
||||||
|
} else if (username === 'barrier') {
|
||||||
|
window.location.href = '/barrier-dashboard';
|
||||||
|
} else if (username === 'depot') {
|
||||||
|
window.location.href = '/depot-dashboard';
|
||||||
|
} else {
|
||||||
|
messageDiv.textContent = "Demo login: Use 'line_operator', 'barrier', or 'depot' as username";
|
||||||
|
messageDiv.classList.remove('success');
|
||||||
|
messageDiv.classList.add('info');
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
messageDiv.textContent = "Please enter both username and password";
|
||||||
|
messageDiv.classList.remove('hidden', 'success');
|
||||||
|
messageDiv.classList.add('error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
from django.contrib.auth.models import AbstractUser
|
||||||
|
from django.db import models
|
||||||
|
|
||||||
|
class DepotUser(AbstractUser):
|
||||||
|
USER_TYPES = (
|
||||||
|
('management', 'Management'),
|
||||||
|
('barrier', 'Barrier Staff'),
|
||||||
|
('client', 'Client'),
|
||||||
|
)
|
||||||
|
user_type = models.CharField(max_length=20, choices=USER_TYPES, default='client')
|
||||||
|
|
||||||
|
# Add any other fields you want
|
||||||
|
phone_number = models.CharField(max_length=15, blank=True, null=True)
|
||||||
|
email = models.EmailField(unique=True, blank=False, null=False)
|
||||||
|
line = models.ForeignKey(
|
||||||
|
'common.LinesModel',
|
||||||
|
on_delete=models.CASCADE,
|
||||||
|
related_name='user_lines',
|
||||||
|
blank=True,
|
||||||
|
null=True
|
||||||
|
)
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
from django.shortcuts import render
|
||||||
|
from django.urls import reverse_lazy
|
||||||
|
from django.views.generic import TemplateView, FormView
|
||||||
|
|
||||||
|
from users.forms import LoginForm
|
||||||
|
|
||||||
|
|
||||||
|
# Create your views here.
|
||||||
|
class LoginView(FormView):
|
||||||
|
template_name = 'logintest.html'
|
||||||
|
success_url = reverse_lazy('dashboard')
|
||||||
|
form_class = LoginForm
|
||||||
Loading…
Reference in New Issue