Shipment dashboard changes

This commit is contained in:
divya abdar
2025-12-03 15:36:04 +05:30
parent 3845972c5c
commit 340c2b2132
15 changed files with 2706 additions and 756 deletions

View File

@@ -15,27 +15,30 @@
<h4 class="fw-bold mb-0">Order Details</h4>
<small class="text-muted">Detailed view of this shipment order</small>
</div>
<a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
</div>
{{-- ACTION BUTTONS --}}
<div class="mt-3 d-flex gap-2">
{{-- ADD ITEM --}}
<button class="btn btn-add-item" data-bs-toggle="modal" data-bs-target="#addItemModal">
<i class="fas fa-plus-circle me-2"></i>Add New Item
</button>
{{-- EDIT ORDER --}}
@if($order->status === 'pending')
<a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
</div>
<!-- {{-- ACTION BUTTONS --}}
<div class="mt-3 d-flex gap-2">
{{-- EDIT ORDER --}} -->
<!-- @if($order->status === 'pending')
<button class="btn btn-edit-order" onclick="document.getElementById('editOrderForm').style.display='block'">
<i class="fas fa-edit me-2"></i>Edit Order
</button>
@else
<button class="btn btn-edit-order" disabled><i class="fas fa-edit me-2"></i>Edit Order</button>
@endif
@endif -->
{{-- DELETE ORDER --}}
<!-- {{-- DELETE ORDER --}}
@if($order->status === 'pending')
<form action="{{ route('admin.orders.destroy', $order->id) }}"
method="POST"
@@ -46,9 +49,9 @@
<i class="fas fa-trash-alt me-2"></i>Delete Order
</button>
</form>
@endif
@endif -->
</div>
<!-- </div> -->
<hr>
@@ -56,7 +59,7 @@
<div id="editOrderForm" class="p-3 bg-light rounded mb-4 shadow-sm" style="display:none;">
<h5 class="fw-bold mb-3">Edit Order</h5>
<form action="{{ route('admin.orders.update', $order->id) }}" method="POST">
<form action="{{ route('admin.orders.updateItem', $order->id) }}" method="POST">
@csrf
<div class="row">
@@ -185,23 +188,157 @@
<td>{{ $item->ttl_kg }}</td>
<td>{{ $item->shop_no }}</td>
<td>
<form action="{{ route('admin.orders.deleteItem', $item->id) }}"
method="POST"
onsubmit="return confirm('Delete this item?')">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-delete-item">
<i class="fas fa-trash"></i>
</button>
</form>
</td>
<td class="d-flex justify-content-center gap-2">
{{-- EDIT BUTTON --}}
<button
type="button"
class="btn btn-sm btn-edit-item"
data-bs-toggle="modal"
data-bs-target="#editItemModal{{ $item->id }}">
<i class="fas fa-edit"></i>
</button>
{{-- DELETE BUTTON --}}
<form action="{{ route('admin.orders.deleteItem', $item->id) }}"
method="POST"
onsubmit="return confirm('Delete this item?')">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-delete-item">
<i class="fas fa-trash"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@foreach($order->items as $item)
<div class="modal fade" id="editItemModal{{ $item->id }}" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content custom-modal">
<div class="modal-header modal-gradient-header">
<h5 class="modal-title text-white">
<i class="fas fa-edit me-2"></i>Edit Item
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<form action="{{ route('admin.orders.updateItem', $item->id) }}" method="POST">
@csrf
@method('PUT')
<div class="modal-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Description</label>
<input type="text" name="description"
value="{{ $item->description }}"
class="form-control custom-input" required>
</div>
<div class="col-md-3">
<label class="form-label">CTN</label>
<input type="number" name="ctn"
value="{{ $item->ctn }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">QTY</label>
<input type="number" name="qty"
value="{{ $item->qty }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">TTL QTY</label>
<input type="number" name="ttl_qty"
value="{{ $item->ttl_qty }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">Unit</label>
<input type="text" name="unit"
value="{{ $item->unit }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">Price</label>
<input type="number" name="price"
value="{{ $item->price }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">Total Amount</label>
<input type="number" name="ttl_amount"
value="{{ $item->ttl_amount }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">CBM</label>
<input type="number" name="cbm"
value="{{ $item->cbm }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">TTL CBM</label>
<input type="number" name="ttl_cbm"
value="{{ $item->ttl_cbm }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">KG</label>
<input type="number" name="kg"
value="{{ $item->kg }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">TTL KG</label>
<input type="number" name="ttl_kg"
value="{{ $item->ttl_kg }}"
class="form-control custom-input">
</div>
<div class="col-md-3">
<label class="form-label">Shop No</label>
<input type="text" name="shop_no"
value="{{ $item->shop_no }}"
class="form-control custom-input">
</div>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer">
<button type="button" class="btn btn-modal-close" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-modal-add">Add Item</button>
</div>
</div>
</form>
</div>
</div>
</div>
@endforeach
{{-- TOTALS --}}
<div class="row text-center mt-4">
<div class="col-md-3">
@@ -239,7 +376,7 @@
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<form action="{{ route('admin.orders.addItem', $order->id) }}" method="POST">
<form id="addItemForm" action="{{ route('admin.orders.addItem', $order->id) }}" method="POST">
@csrf
<div class="modal-body">
@@ -253,54 +390,75 @@
<h5 class="section-title">Deleted Items (Use / Restore)</h5>
<ul class="list-group mb-3">
<div class="table-responsive mb-4">
<table class="table table-bordered align-middle text-center">
<thead class="table-light">
<tr>
<th>#</th>
<th>Description</th>
<th>CTN</th>
<th>QTY</th>
<th>TTL QTY</th>
<th>Unit</th>
<th>Price</th>
<th>TTL Amount</th>
<th>CBM</th>
<th>TTL CBM</th>
<th>KG</th>
<th>TTL KG</th>
<th>Shop No</th>
<th>Actions</th>
</tr>
</thead>
@forelse($deletedItems as $deleted)
<li class="list-group-item">
<tbody>
@forelse($deletedItems as $key => $deleted)
<tr>
<td>{{ $key + 1 }}</td>
<td>{{ $deleted->description }}</td>
<td>{{ $deleted->ctn }}</td>
<td>{{ $deleted->qty }}</td>
<td>{{ $deleted->ttl_qty }}</td>
<td>{{ $deleted->unit }}</td>
<td>{{ number_format($deleted->price, 2) }}</td>
<td>{{ number_format($deleted->ttl_amount, 2) }}</td>
<td>{{ $deleted->cbm }}</td>
<td>{{ $deleted->ttl_cbm }}</td>
<td>{{ $deleted->kg }}</td>
<td>{{ $deleted->ttl_kg }}</td>
<td>{{ $deleted->shop_no }}</td>
<div class="d-flex justify-content-between">
<td class="d-flex justify-content-center gap-2">
<div>
<strong>{{ $deleted->description }}</strong><br>
<small>
CTN: {{ $deleted->ctn }},
QTY: {{ $deleted->qty }},
TTL/QTY: {{ $deleted->ttl_qty }},
Unit: {{ $deleted->unit }},
Price: {{ $deleted->price }},
TTL Amt: {{ $deleted->ttl_amount }},
CBM: {{ $deleted->cbm }},
TTL CBM: {{ $deleted->ttl_cbm }},
KG: {{ $deleted->kg }},
TTL KG: {{ $deleted->ttl_kg }},
Shop: {{ $deleted->shop_no }}
</small>
</div>
{{-- USE THIS ITEM --}}
<button type="button"
class="btn btn-sm btn-use-item"
onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
Use
</button>
<div class="d-flex gap-2">
{{-- Auto-fill button --}}
<button type="button" class="btn btn-sm btn-use-item"
onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
Use This
{{-- RESTORE ITEM --}}
<form action="{{ route('admin.orders.restoreItem', $deleted->id) }}" method="POST">
@csrf
<button type="button"
class="btn btn-sm btn-restore js-restore-item"
data-id="{{ $deleted->id }}"
data-url="{{ route('admin.orders.restoreItem', $deleted->id) }}">
Restore
</button>
</form>
{{-- Restore --}}
<form action="{{ route('admin.orders.restoreItem', $deleted->id) }}" method="POST">
@csrf
<button class="btn btn-sm btn-restore">Restore</button>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="14" class="text-muted">No deleted items.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</li>
@empty
<li class="list-group-item text-muted">No deleted items.</li>
@endforelse
</ul>
{{-- ADD FORM --}}
<div class="row g-3">
@@ -380,21 +538,62 @@
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const token = '{{ csrf_token() }}';
document.querySelectorAll('.js-restore-item').forEach(function (btn) {
btn.addEventListener('click', function () {
if (!confirm('Restore this item?')) return;
const url = this.dataset.url;
const row = this.closest('tr');
fetch(url, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({})
})
.then(response => {
if (!response.ok) throw new Error('Restore failed');
return response.json().catch(() => ({}));
})
.then(() => {
row.remove();
location.reload(); // 🔥 refresh UI so restored item appears
})
.catch(() => {
alert('Could not restore item. Please try again.');
});
});
});
});
</script>
{{-- AUTO-FILL SCRIPT --}}
<script>
function fillFormFromDeleted(item) {
document.querySelector('input[name="description"]').value = item.description;
document.querySelector('input[name="ctn"]').value = item.ctn;
document.querySelector('input[name="qty"]').value = item.qty;
document.querySelector('input[name="ttl_qty"]').value = item.ttl_qty;
document.querySelector('input[name="unit"]').value = item.unit;
document.querySelector('input[name="price"]').value = item.price;
document.querySelector('input[name="ttl_amount"]').value = item.ttl_amount;
document.querySelector('input[name="cbm"]').value = item.cbm;
document.querySelector('input[name="ttl_cbm"]').value = item.ttl_cbm;
document.querySelector('input[name="kg"]').value = item.kg;
document.querySelector('input[name="ttl_kg"]').value = item.ttl_kg;
document.querySelector('input[name="shop_no"]').value = item.shop_no;
let form = document.getElementById('addItemForm');
form.querySelector('input[name="description"]').value = item.description;
form.querySelector('input[name="ctn"]').value = item.ctn;
form.querySelector('input[name="qty"]').value = item.qty;
form.querySelector('input[name="ttl_qty"]').value = item.ttl_qty;
form.querySelector('input[name="unit"]').value = item.unit;
form.querySelector('input[name="price"]').value = item.price;
form.querySelector('input[name="ttl_amount"]').value = item.ttl_amount;
form.querySelector('input[name="cbm"]').value = item.cbm;
form.querySelector('input[name="ttl_cbm"]').value = item.ttl_cbm;
form.querySelector('input[name="kg"]').value = item.kg;
form.querySelector('input[name="ttl_kg"]').value = item.ttl_kg;
form.querySelector('input[name="shop_no"]').value = item.shop_no;
}
</script>
@@ -404,13 +603,15 @@ function fillFormFromDeleted(item) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
padding: 12px 24px;
padding: 6px 14px;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
margin-right: -800px;
}
.btn-add-item:hover {