Frontend dashboard, shipment, invoice , customer
This commit is contained in:
divya abdar
@@ -5,28 +5,96 @@
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
|
||||
{{-- Header --}}
|
||||
{{-- HEADER --}}
|
||||
<div class="card shadow-sm rounded-3 border-0">
|
||||
<div class="card-body">
|
||||
|
||||
{{-- TOP BAR --}}
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Order Details</Details></h4>
|
||||
<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')
|
||||
<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
|
||||
|
||||
{{-- DELETE ORDER --}}
|
||||
@if($order->status === 'pending')
|
||||
<form action="{{ route('admin.orders.destroy', $order->id) }}"
|
||||
method="POST"
|
||||
onsubmit="return confirm('Delete this entire order?')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="btn btn-delete-order">
|
||||
<i class="fas fa-trash-alt me-2"></i>Delete Order
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
{{-- Customer Info --}}
|
||||
{{-- EDIT ORDER FORM --}}
|
||||
<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">
|
||||
@csrf
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label>Mark No</label>
|
||||
<input type="text" name="mark_no" value="{{ $order->mark_no }}" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label>Origin</label>
|
||||
<input type="text" name="origin" value="{{ $order->origin }}" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label>Destination</label>
|
||||
<input type="text" name="destination" value="{{ $order->destination }}" class="form-control custom-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-save-changes">Save Changes</button>
|
||||
<button type="button"
|
||||
class="btn btn-cancel"
|
||||
onclick="document.getElementById('editOrderForm').style.display='none'">
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- CUSTOMER INFO --}}
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8 d-flex">
|
||||
<div class="me-3">
|
||||
<div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
|
||||
<div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
|
||||
style="width:60px; height:60px; font-size:20px;">
|
||||
{{ strtoupper(substr($user->customer_name ?? 'U', 0, 1)) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="mb-0">{{ $user->customer_name ?? 'Unknown Customer' }}</h5>
|
||||
<p class="mb-0">{{ $user->company_name ?? 'N/A' }}</p>
|
||||
@@ -34,13 +102,14 @@
|
||||
<p class="mb-0 text-muted">{{ $user->mobile_no ?? '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 text-end">
|
||||
<p class="mb-0">{{ $user->address ?? '' }}</p>
|
||||
<small class="text-muted">{{ $user->pincode ?? '' }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Order Summary --}}
|
||||
{{-- ORDER SUMMARY --}}
|
||||
<div class="bg-light rounded p-3 mb-3">
|
||||
<div class="row text-center">
|
||||
<div class="col-md-3 border-end">
|
||||
@@ -65,7 +134,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Origin - Destination --}}
|
||||
{{-- ORIGIN / DESTINATION --}}
|
||||
<div class="row text-center mb-4">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-1 fw-semibold text-muted">Origin</p>
|
||||
@@ -77,7 +146,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Order Items Table --}}
|
||||
{{-- ITEMS TABLE --}}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle text-center">
|
||||
<thead class="table-light">
|
||||
@@ -88,15 +157,17 @@
|
||||
<th>QTY</th>
|
||||
<th>TTL/QTY</th>
|
||||
<th>Unit</th>
|
||||
<th>Price (₹)</th>
|
||||
<th>TTL Amount (₹)</th>
|
||||
<th>Price</th>
|
||||
<th>Total 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>
|
||||
|
||||
<tbody>
|
||||
@foreach($order->items as $index => $item)
|
||||
<tr>
|
||||
@@ -113,38 +184,531 @@
|
||||
<td>{{ $item->kg }}</td>
|
||||
<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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- Totals --}}
|
||||
{{-- TOTALS --}}
|
||||
<div class="row text-center mt-4">
|
||||
<div class="col-md-3">
|
||||
<h6 class="fw-bold text-primary">{{ $order->ctn }}</h6>
|
||||
<small class="text-muted">Total CTN</small>
|
||||
<small>Total CTN</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<h6 class="fw-bold text-primary">{{ $order->qty }}</h6>
|
||||
<small class="text-muted">Total QTY</small>
|
||||
<small>Total QTY</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<h6 class="fw-bold text-success">{{ $order->ttl_kg }}</h6>
|
||||
<small class="text-muted">Total TTL KG</small>
|
||||
<small>Total KG</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<h6 class="fw-bold text-danger">₹{{ number_format($order->ttl_amount, 2) }}</h6>
|
||||
<small class="text-muted">Total Amount</small>
|
||||
<small>Total Amount</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
{{-- ADD ITEM MODAL --}}
|
||||
<div class="modal fade" id="addItemModal" 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-cube me-2"></i>Add Item To Order</h5>
|
||||
<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">
|
||||
@csrf
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
{{-- DELETED ITEMS --}}
|
||||
@php
|
||||
$deletedItems = \App\Models\OrderItem::onlyTrashed()
|
||||
->where('order_id', $order->id)
|
||||
->get();
|
||||
@endphp
|
||||
|
||||
<h5 class="section-title">Deleted Items (Use / Restore)</h5>
|
||||
|
||||
<ul class="list-group mb-3">
|
||||
|
||||
@forelse($deletedItems as $deleted)
|
||||
<li class="list-group-item">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
</button>
|
||||
|
||||
{{-- Restore --}}
|
||||
<form action="{{ route('admin.orders.restoreItem', $deleted->id) }}" method="POST">
|
||||
@csrf
|
||||
<button class="btn btn-sm btn-restore">Restore</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@empty
|
||||
<li class="list-group-item text-muted">No deleted items.</li>
|
||||
@endforelse
|
||||
|
||||
</ul>
|
||||
|
||||
{{-- ADD FORM --}}
|
||||
<div class="row g-3">
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Description</label>
|
||||
<input type="text" name="description" class="form-control custom-input" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">CTN</label>
|
||||
<input type="number" name="ctn" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">QTY</label>
|
||||
<input type="number" name="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" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Unit</label>
|
||||
<input type="text" name="unit" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Price</label>
|
||||
<input type="number" name="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" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">CBM</label>
|
||||
<input type="number" name="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" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">KG</label>
|
||||
<input type="number" name="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" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Shop No</label>
|
||||
<input type="text" name="shop_no" class="form-control custom-input">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-modal-close" data-bs-dismiss="modal">Close</button>
|
||||
<button class="btn btn-modal-add">Add Item</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 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;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Custom Button Styles */
|
||||
.btn-add-item {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-add-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-add-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.btn-add-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-edit-order {
|
||||
background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px 0 rgba(71, 118, 230, 0.3);
|
||||
}
|
||||
|
||||
.btn-edit-order:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px 0 rgba(71, 118, 230, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit-order:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-delete-order {
|
||||
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px 0 rgba(255, 65, 108, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete-order:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px 0 rgba(255, 65, 108, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-delete-item {
|
||||
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
transition: all 0.3s ease;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-delete-item:hover {
|
||||
transform: scale(1.05);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btn-save-changes {
|
||||
background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 176, 155, 0.2);
|
||||
}
|
||||
|
||||
.btn-save-changes:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 176, 155, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
|
||||
border: none;
|
||||
color: #2c3e50;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(142, 158, 171, 0.3);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.custom-modal {
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-gradient-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-bottom: none;
|
||||
padding: 20px 25px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 10px 15px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-input:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-use-item {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 5px 15px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-use-item:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-restore {
|
||||
background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 5px 15px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-restore:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 176, 155, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-modal-close {
|
||||
background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
|
||||
border: none;
|
||||
color: #2c3e50;
|
||||
padding: 10px 25px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-modal-close:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(142, 158, 171, 0.3);
|
||||
}
|
||||
|
||||
.btn-modal-add {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 25px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-modal-add:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Animation for the Add Item Button */
|
||||
@keyframes pulse-glow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-item {
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
|
||||
/* List group items */
|
||||
.list-group-item {
|
||||
border: 1px solid #e9ecef;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.list-group-item:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* Enhanced table styling */
|
||||
.table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background: #667eea ;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(102, 126, 234, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Badge styling */
|
||||
.badge {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Card enhancements */
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.btn-add-item,
|
||||
.btn-edit-order,
|
||||
.btn-delete-order {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-gradient-header {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user