You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
12 KiB
HTML
152 lines
12 KiB
HTML
{% extends 'client-base.html' %}
|
|
{% block content %}
|
|
<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>
|
|
{% endblock content %}
|