sidebar changes
This commit is contained in:
Utkarsh Khedkar
@@ -1,9 +1,152 @@
|
||||
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Shipment Management')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.search-shipment-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.search-shipment-bar input,
|
||||
.search-shipment-bar select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
.btn-add-shipment {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: background-color 0.3s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-add-shipment:hover {
|
||||
background-color: #0b5ed7;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 19px;
|
||||
}
|
||||
.truck-icon {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-shipment-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.search-shipment-bar input,
|
||||
.search-shipment-bar select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 16px;
|
||||
border: 1px solid #ebe5c5;
|
||||
background: #f9faff;
|
||||
}
|
||||
.modal-header {
|
||||
border-radius: 16px 16px 0 0;
|
||||
background: #f8f9fc;
|
||||
border-bottom: 1px solid #e3e4ed;
|
||||
padding: 20px 24px 10px 24px;
|
||||
}
|
||||
.form-label { font-weight:600; }
|
||||
input[type="text"], input[type="date"] {
|
||||
border-radius:8px !important;
|
||||
font-size:15px !important;
|
||||
box-shadow: none;
|
||||
background: #fff !important;
|
||||
border: 1px solid #ddd !important;
|
||||
height: 41px;
|
||||
}
|
||||
/* Table styles */
|
||||
.table-responsive {
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1.5px solid #efe5c5;
|
||||
box-shadow: 0 2px 10px #ebe6cb;
|
||||
padding-top:-10px;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 14px;
|
||||
margin:0;
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
/* Header row: colored + rounded top */
|
||||
.custom-table thead th {
|
||||
background: #ffe9be;
|
||||
font-weight:700;
|
||||
font-size:16px;
|
||||
padding: 10px 5px;
|
||||
border:none;
|
||||
text-align:center;
|
||||
|
||||
|
||||
}
|
||||
.custom-table thead tr:first-child th:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
}
|
||||
.custom-table thead tr:first-child th:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
.custom-table thead tr {
|
||||
box-shadow: 0 2px 9px #f4e1b1;
|
||||
}
|
||||
/* Content row: white + shadow + spacing */
|
||||
.custom-table tbody tr {
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px #ececec;
|
||||
/* margin-bottom: 14px; this is handled by border-spacing */
|
||||
}
|
||||
.custom-table tbody td {
|
||||
font-size:15px;
|
||||
padding:12px 8px;
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
border:none;
|
||||
}
|
||||
.custom-table tbody tr:first-child td:first-child {
|
||||
border-top-left-radius:10px;
|
||||
}
|
||||
.custom-table tbody tr:first-child td:last-child {
|
||||
border-top-right-radius:10px;
|
||||
}
|
||||
.custom-table tbody tr:last-child td:first-child {
|
||||
border-bottom-left-radius:10px;
|
||||
}
|
||||
.custom-table tbody tr:last-child td:last-child {
|
||||
border-bottom-right-radius:10px;
|
||||
}
|
||||
.btn-cancel {
|
||||
background:#fff; color:#222; border:1px solid #bbb; border-radius:8px; font-weight:600; padding:7px 28px;
|
||||
}
|
||||
.btn-create {
|
||||
background:#000; color:#fff; font-weight:600; font-size:17px; border-radius:8px; padding:7px 32px;
|
||||
}
|
||||
</style>
|
||||
<div class="container-fluid py-4">
|
||||
|
||||
{{-- SUCCESS / ERROR MESSAGES --}}
|
||||
@@ -15,101 +158,127 @@
|
||||
<div class="alert alert-danger">{{ session('error') }}</div>
|
||||
@endif
|
||||
|
||||
|
||||
<!-- ============================= -->
|
||||
<!-- CREATE SHIPMENT BOX -->
|
||||
<!-- SEARCH BAR AND ADD BUTTON -->
|
||||
<!-- ============================= -->
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-truck"></i> Create Shipment
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<form action="{{ route('admin.shipments.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Origin</label>
|
||||
<input type="text" class="form-control" name="origin" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Destination</label>
|
||||
<input type="text" class="form-control" name="destination" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Shipment Date</label>
|
||||
<input type="date" name="shipment_date" class="form-control"
|
||||
value="{{ date('Y-m-d') }}" required>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr class="my-3">
|
||||
|
||||
<h6 class="fw-bold text-primary mb-2">Select Orders for Shipment</h6>
|
||||
|
||||
{{-- Orders Table --}}
|
||||
<div class="table-responsive" style="max-height: 350px; overflow-y:auto;">
|
||||
<table class="table table-bordered table-striped text-center align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th>Order ID</th>
|
||||
<th>Mark No</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>CTN</th>
|
||||
<th>QTY</th>
|
||||
<th>TTL Qty</th>
|
||||
<th>Amount</th>
|
||||
<th>KG</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($availableOrders as $order)
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
|
||||
</td>
|
||||
<td class="text-primary fw-bold">{{ $order->order_id }}</td>
|
||||
<td>{{ $order->mark_no }}</td>
|
||||
<td>{{ $order->origin }}</td>
|
||||
<td>{{ $order->destination }}</td>
|
||||
<td>{{ $order->ctn }}</td>
|
||||
<td>{{ $order->qty }}</td>
|
||||
<td>{{ $order->ttl_qty }}</td>
|
||||
<td>₹{{ number_format($order->ttl_amount, 2) }}</td>
|
||||
<td>{{ $order->ttl_kg }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="10" class="text-muted">No available orders</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="text-end mt-3">
|
||||
<button type="submit" class="btn btn-success btn-lg">
|
||||
<i class="bi bi-check-circle"></i> Create Shipment
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="search-shipment-bar mb-4">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input type="text" placeholder="Search Shipments...">
|
||||
<select>
|
||||
<option>All Status</option>
|
||||
<option>Pending</option>
|
||||
<option>In Transit</option>
|
||||
<option>Delivered</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>All Carriers</option>
|
||||
<option>FedEx</option>
|
||||
<option>UPS</option>
|
||||
<option>DHL</option>
|
||||
</select>
|
||||
<button type="button" class="btn-add-shipment" data-bs-toggle="modal" data-bs-target="#createShipmentModal">
|
||||
<span class="truck-icon">🚚</span>
|
||||
Add Shipments
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ============================= -->
|
||||
<!-- CREATE SHIPMENT MODAL -->
|
||||
<!-- ============================= -->
|
||||
|
||||
|
||||
<div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="createShipmentModalLabel" style="font-weight: bold;">
|
||||
Create New Shipment
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{{ route('admin.shipments.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="row g-3 pb-2">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Origin *</label>
|
||||
<input type="text" class="form-control" name="origin" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Destination *</label>
|
||||
<input type="text" class="form-control" name="destination" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Status</label>
|
||||
<input type="text" class="form-control" name="status">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Shipment Date</label>
|
||||
<input type="date"
|
||||
name="shipment_date"
|
||||
class="form-control"
|
||||
value="{{ date('Y-m-d') }}"
|
||||
min="{{ date('Y-m-d') }}"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive" style="max-height:340px;">
|
||||
<table class="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Order ID</th>
|
||||
<th>CTN</th>
|
||||
<th>QTY</th>
|
||||
<th>TTL/QTY</th>
|
||||
<th>Price (₹)</th>
|
||||
<th>Amount (₹)</th>
|
||||
<th>CBM</th>
|
||||
<th>TTL CBM</th>
|
||||
<th>KG</th>
|
||||
<th>TTL KG</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($availableOrders as $order)
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary fw-bold" style="text-decoration:underline;">{{ $order->order_id }}</a>
|
||||
</td>
|
||||
<td>{{ $order->ctn }}</td>
|
||||
<td>{{ $order->qty }}</td>
|
||||
<td>{{ $order->ttl_qty }}</td>
|
||||
<td>₹{{ number_format($order->unit_price, 2) }}</td>
|
||||
<td>₹{{ number_format($order->ttl_amount, 2) }}</td>
|
||||
<td>{{ $order->cbm }}</td>
|
||||
<td>{{ $order->ttl_cbm }}</td>
|
||||
<td>{{ $order->kg }}</td>
|
||||
<td>{{ $order->ttl_kg }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="11" class="text-muted">No available orders</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-4 mb-2">
|
||||
<button type="button" class="btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn-create">
|
||||
Create Shipment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================= -->
|
||||
<!-- SHIPMENT LIST TABLE -->
|
||||
@@ -190,9 +359,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================= -->
|
||||
<!-- SHIPMENT DETAILS MODAL -->
|
||||
<!-- ============================= -->
|
||||
@@ -217,6 +383,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- MODAL LOAD SCRIPT (AJAX) -->
|
||||
<!-- ========================= -->
|
||||
@@ -317,4 +484,4 @@ function openShipmentDetails(id) {
|
||||
</script>
|
||||
|
||||
|
||||
@endsection
|
||||
@endsection
|
||||
Reference in New Issue
Block a user