kent-logistics/Kent-logistics-Laravel
SHA256
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

staff

Browse Source
This commit is contained in:
Abhishek Mali
2025-12-08 10:17:46 +05:30
parent 0a1d0a9c55
commit 0a65d5f596
7 changed files with 311 additions and 1043 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/Http/Controllers/Admin/ShipmentController.php
View File

@@ -209,4 +209,20 @@ class ShipmentController extends Controller
return redirect()->route('admin.shipments')
->with('success', 'Shipment deleted successfully.');
}
public function dummy($id)
{
// Load shipment
$shipment = Shipment::with('orders')->findOrFail($id);
// Dummy data (you can modify anytime)
$dummyData = [
'title' => 'Dummy Shipment Preview',
'generated_on' => now()->format('d M Y h:i A'),
'note' => 'This is dummy shipment information for testing page layout.'
];
return view('admin.view_shipment', compact('shipment', 'dummyData'));
}
}

32
database/migrations/2025_12_08_044216_create_support_tickets_table.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('support_tickets', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('user_id'); // user who owns the chat
$table->string('status')->default('open'); // open / closed
$table->timestamps();
// foreign key constraint (optional but recommended)
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('support_tickets');
}
};

36
database/migrations/2025_12_08_044254_create_chat_messages_table.php Normal file
View File

@@ -0,0 +1,36 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('chat_messages', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('ticket_id'); // support ticket ID
$table->unsignedBigInteger('sender_id'); // user or admin/staff
$table->text('message')->nullable(); // message content
$table->string('file_path')->nullable(); // image/pdf/video
$table->string('file_type')->default('text'); // text/image/pdf/video
$table->timestamps();
// foreign keys
$table->foreign('ticket_id')->references('id')->on('support_tickets')->onDelete('cascade');
$table->foreign('sender_id')->references('id')->on('users')->onDelete('cascade'); // admin also stored in users table? If admin separate, change later.
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('chat_messages');
}
};

161
resources/views/admin/shipments.blade.php
View File

@@ -258,6 +258,14 @@
line-height: 1.2 !important;
}
/* Loading Status - PROPER */
.badge-loading {
background: linear-gradient(135deg, #e3f2fd, #90caf9) !important;
color: #1565c0 !important;
border-color: #2196f3 !important;
width: 110px;
}
/* Pending Status - SAME SIZE */
.badge-pending {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
@@ -320,16 +328,9 @@
padding: 6px 12px !important;
}
/* NEW: Action Button Styles */
.action-container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-view-details {
background: linear-gradient(135deg, #10b981, #059669);
/* Eye Button Style - PROPER */
.btn-eye {
background: linear-gradient(135deg, #4cc9f0, #4361ee);
color: white;
border: none;
border-radius: 8px;
@@ -341,14 +342,19 @@
justify-content: center;
width: 36px;
height: 36px;
text-decoration: none;
margin: 0 auto;
}
.btn-view-details:hover {
.btn-eye:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
background: linear-gradient(135deg, #059669, #047857);
color: white;
box-shadow: 0 4px 12px rgba(76, 201, 240, 0.3);
background: linear-gradient(135deg, #38bdf8, #3a56d4);
}
/* Action Button Styles */
.action-container {
position: relative;
display: inline-block;
}
.btn-edit-status {
@@ -393,6 +399,16 @@
display: flex;
}
/* Loading Status Option - PROPER */
.status-option.loading {
background: rgba(33, 150, 243, 0.1);
color: #2196f3;
}
.status-option.loading:hover {
background: rgba(33, 150, 243, 0.2);
}
.status-option {
padding: 10px 12px;
border: none;
@@ -456,6 +472,11 @@
display: inline-block;
}
/* Loading Status Indicator - PROPER */
.status-indicator.loading {
background: #2196f3;
}
.status-indicator.pending {
background: #f8961e;
}
@@ -1108,15 +1129,13 @@
</div>
@endif
<!-- ============================= -->
<!-- SEARCH BAR AND ADD BUTTON -->
<!-- ============================= -->
<div class="search-shipment-bar">
<span class="search-icon">🔍</span>
<input type="text" id="searchInput" placeholder="Search Shipments...">
<div class="status-filter-container">
<select id="statusFilter" class="status-filter-select">
<option value="all">All Status</option>
<option value="loading">Loading</option>
<option value="pending">Pending</option>
<option value="in_transit">In Transit</option>
<option value="dispatched">Dispatched</option>
@@ -1135,9 +1154,6 @@
</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">
@@ -1229,9 +1245,6 @@
</div>
</div>
<!-- ============================= -->
<!-- SHIPMENT LIST TABLE -->
<!-- ============================= -->
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-truck me-2"></i> Shipments List</h5>
@@ -1252,6 +1265,7 @@
<th>Total Amount</th>
<th>Status</th>
<th>Date</th>
<th>View</th>
<th>Action</th>
</tr>
</thead>
@@ -1283,51 +1297,48 @@
</td>
<td>{{ \Carbon\Carbon::parse($ship->shipment_date)->format('d M Y') }}</td>
<td>
<div class="action-container">
<!-- 👁️ View Icon -->
<!-- <a href="{{ route('admin.shipment.view', $ship->id) }}"
class="btn-view-details"
title="View Shipment">
<i class="bi bi-eye"></i>
</a> -->
<button type="button" class="btn-eye" onclick="openShipmentDetails({{ $ship->id }})" title="View Shipment">
<i class="bi bi-eye"></i>
</button>
</td>
<!-- ✏️ Edit Status Icon -->
<button type="button" class="btn-edit-status"
onclick="toggleStatusDropdown(this, {{ $ship->id }})"
title="Edit Status">
<td>
<div class="action-container">
<button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, {{ $ship->id }})" title="Edit Status">
<i class="bi bi-pencil"></i>
</button>
<!-- Dropdown -->
<div class="status-dropdown" id="statusDropdown-{{ $ship->id }}">
<form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="status-form">
@csrf
<input type="hidden" name="shipment_id" value="{{ $ship->id }}">
<button type="submit" name="status" value="loading" class="status-option loading">
<span class="status-indicator loading"></span>
Loading
</button>
<button type="submit" name="status" value="pending" class="status-option pending">
<span class="status-indicator pending"></span> Pending
<span class="status-indicator pending"></span>
Pending
</button>
<button type="submit" name="status" value="in_transit" class="status-option in_transit">
<span class="status-indicator in_transit"></span> In Transit
<span class="status-indicator in_transit"></span>
In Transit
</button>
<button type="submit" name="status" value="dispatched" class="status-option dispatched">
<span class="status-indicator dispatched"></span> Dispatched
<span class="status-indicator dispatched"></span>
Dispatched
</button>
<button type="submit" name="status" value="delivered" class="status-option delivered">
<span class="status-indicator delivered"></span> Delivered
<span class="status-indicator delivered"></span>
Delivered
</button>
</form>
</div>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="11" class="text-center py-5 text-muted">
<td colspan="12" class="text-center py-5 text-muted">
<i class="bi bi-inbox display-4 d-block mb-3"></i>
No shipments found
</td>
@@ -1337,21 +1348,17 @@
</table>
</div>
<!-- Pagination Controls -->
<div class="pagination-container">
<div class="pagination-info" id="pageInfo">Showing 1 to {{ $shipments->count() }} of {{ $shipments->count() }} entries</div>
<div class="pagination-controls">
<button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
<!-- Left arrow SVG -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="pagination-pages" id="paginationPages">
<!-- Page numbers will be inserted here -->
</div>
</div>
<button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
<!-- Right arrow SVG -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
@@ -1361,9 +1368,7 @@
</div>
</div>
<!-- ============================= -->
<!-- SHIPMENT DETAILS MODAL -->
<!-- ============================= -->
{{-- SHIPMENT DETAILS MODAL --}}
<div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
@@ -1386,9 +1391,6 @@
</div>
<!-- ========================= -->
<!-- MODAL LOAD SCRIPT (AJAX) -->
<!-- ========================= -->
<script>
// Pagination state
let currentPage = 1;
@@ -1541,7 +1543,7 @@ function renderTable() {
if (filteredShipments.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="11" class="text-center py-5 text-muted">
<td colspan="12" class="text-center py-5 text-muted">
<i class="bi bi-search display-4 d-block mb-3"></i>
No shipments found matching your criteria
</td>
@@ -1567,6 +1569,12 @@ function renderTable() {
row.setAttribute('data-status', shipment.status);
row.setAttribute('data-shipment-id', shipment.shipment_id);
// Function to format status string
const formatStatus = (status) => {
if (!status) return '';
return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
};
row.innerHTML = `
<td class="fw-bold">${displayIndex}</td>
<td>
@@ -1582,15 +1590,21 @@ function renderTable() {
<td class="fw-bold text-success">₹${parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td>
<span class="badge badge-${shipment.status}">
${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1).replace('_', ' ')}
${formatStatus(shipment.status)}
</span>
</td>
<td>${new Date(shipment.shipment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
<td>
<a href="{{ route('admin.shipments.dummy', $ship->id) }}"
class="btn-view-details">
<i class="bi bi-eye"></i>
</a>
</td>
<td>
<div class="action-container">
<a href="/admin/dashboard/${shipment.id}" class="btn-view-details" title="View Shipment">
<i class="bi bi-eye"></i>
</a>
<button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
<i class="bi bi-pencil"></i>
</button>
@@ -1598,6 +1612,10 @@ function renderTable() {
<form action="/admin/shipments/update-status" method="POST" class="status-form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="shipment_id" value="${shipment.id}">
<button type="submit" name="status" value="loading" class="status-option loading">
<span class="status-indicator loading"></span>
Loading
</button>
<button type="submit" name="status" value="pending" class="status-option pending">
<span class="status-indicator pending"></span>
Pending
@@ -1623,6 +1641,9 @@ function renderTable() {
});
}
// --------------------------------------------------------------------
// Function: Open Consolidated Shipment Details Modal
// --------------------------------------------------------------------
function openShipmentDetails(id) {
let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
let content = document.getElementById('shipmentDetailsContent');
@@ -1650,8 +1671,13 @@ function openShipmentDetails(id) {
year: 'numeric'
});
// Function to format status string
const formatStatus = (status) => {
if (!status) return 'N/A';
return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
};
let html = `
<!-- Shipment Basic Info -->
<div class="shipment-info-row">
<div class="shipment-info-item">
<div class="shipment-info-label">Shipment ID</div>
@@ -1663,7 +1689,7 @@ function openShipmentDetails(id) {
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Status</div>
<div class="shipment-info-value">${data.shipment.status}</div>
<div class="shipment-info-value">${formatStatus(data.shipment.status)}</div>
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Date</div>
@@ -1698,7 +1724,9 @@ function openShipmentDetails(id) {
data.orders.forEach(order => {
html += `
<tr>
<td class="fw-bold text-primary">${order.order_id}</td>
<td class="fw-bold">
${order.order_id}
</td>
<td>${order.origin || 'N/A'}</td>
<td>${order.destination || 'N/A'}</td>
<td>${order.mark_no || 'ITEM001'}</td>
@@ -1720,7 +1748,6 @@ function openShipmentDetails(id) {
</table>
</div>
<!-- Totals Section -->
<div class="shipment-totals">
<div class="shipment-totals-row">
<div class="shipment-total-item">

975
resources/views/admin/view-shipment.blade.php
View File

@@ -1,975 +0,0 @@
@extends('admin.layouts.app')
@section('page-title', 'Shipment Details')
@section('content')
<style>
/* ===== ANIMATIONS ===== */
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0px); }
}
/* ===== CARD STYLES ===== */
.card {
border-radius: 20px;
background: #ffffff;
box-shadow: 0 15px 35px rgba(13, 38, 76, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(103, 126, 234, 0.15);
}
.card-header h5 {
margin: 0;
font-size: 20px;
font-weight: 800;
display: flex;
align-items: center;
gap: 10px;
}
/* ===== GLASSMORPHISM BUTTON ===== */
.glass-btn {
background: linear-gradient(
135deg,
rgba(103, 126, 234, 0.25) 0%,
rgba(118, 75, 162, 0.25) 100%
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1.5px solid rgba(255, 255, 255, 0.4);
color: #ffffff !important;
padding: 12px 24px;
border-radius: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 32px rgba(103, 126, 234, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
z-index: 1;
}
.glass-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(103, 126, 234, 0.4) 0%,
rgba(118, 75, 162, 0.4) 100%
);
z-index: -1;
transition: opacity 0.4s ease;
opacity: 0;
}
.glass-btn:hover {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 15px 40px rgba(103, 126, 234, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
border-color: rgba(255, 255, 255, 0.6);
background: linear-gradient(
135deg,
rgba(103, 126, 234, 0.15) 0%,
rgba(118, 75, 162, 0.15) 100%
);
}
.glass-btn:hover::before {
opacity: 1;
}
.glass-btn:active {
transform: translateY(-1px) scale(0.98);
transition: transform 0.1s ease;
}
.glass-btn i {
font-size: 18px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* ===== HEADER STYLES ===== */
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 22px 28px;
border-radius: 20px 20px 0 0 !important;
position: relative;
overflow: hidden;
}
.card-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%
);
pointer-events: none;
}
.title-row {
display: flex;
align-items: center;
gap: 12px;
z-index: 1;
}
.header-controls {
display: flex;
align-items: center;
gap: 12px;
z-index: 1;
}
.header-cancel-btn {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.95);
border: 1.5px solid rgba(255, 255, 255, 0.3);
padding: 10px 14px;
border-radius: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.header-cancel-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* ===== INFO BLOCKS ===== */
.shipment-info-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 32px;
}
.shipment-info-item {
flex: 1;
min-width: 220px;
background: linear-gradient(145deg, #ffffff, #f8fafc);
padding: 24px;
border-radius: 16px;
box-shadow:
0 5px 20px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.8);
position: relative;
overflow: hidden;
}
.shipment-info-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
opacity: 0;
transition: opacity 0.4s ease;
}
.shipment-info-item:hover {
transform: translateY(-6px);
box-shadow:
0 15px 35px rgba(103, 126, 234, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.shipment-info-item:hover::before {
opacity: 1;
}
.shipment-info-label {
color: #64748b;
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.shipment-info-value {
font-size: 24px;
font-weight: 800;
color: #1e293b;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* ===== TOTAL BOXES ===== */
.total-box {
background: linear-gradient(145deg, #ffffff, #f8fafc);
padding: 20px;
border-radius: 16px;
box-shadow:
0 5px 20px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
text-align: center;
min-width: 160px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.8);
position: relative;
overflow: hidden;
}
.total-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.total-box:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 15px 35px rgba(103, 126, 234, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.total-box:hover::after {
transform: translateX(0);
}
.total-title {
font-size: 13px;
font-weight: 700;
color: #64748b;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.total-value {
font-size: 22px;
font-weight: 900;
color: #1e293b;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* ===== TABLE STYLES ===== */
.table {
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.table thead th {
background: #667eea ;
color: #ffffff;
font-weight: 700;
padding: 18px;
white-space: nowrap;
border: none;
position: relative;
}
.table thead th::after {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: rgba(255, 255, 255, 0.3);
}
.table tbody tr {
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.table tbody tr:hover {
background: linear-gradient(90deg, rgba(103, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
transform: translateX(4px);
border-left: 3px solid #667eea;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.table tbody td {
padding: 16px;
vertical-align: middle;
white-space: nowrap;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 500;
}
/* ===== GLASSMORPHISM MODAL ===== */
#newOrderModal .modal-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 24px;
border: 1.5px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
overflow: hidden;
}
#newOrderModal .modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding: 24px 32px;
border-radius: 24px 24px 0 0;
position: relative;
overflow: hidden;
}
#newOrderModal .modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%
);
}
#newOrderModal .modal-title {
color: #ffffff;
font-weight: 800;
font-size: 22px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
#newOrderModal .btn-close {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 8px;
opacity: 0.9;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
#newOrderModal .btn-close:hover {
background: rgba(255, 255, 255, 0.3);
opacity: 1;
transform: rotate(90deg);
}
#newOrderModal .modal-body {
background: rgba(248, 250, 252, 0.7);
padding: 32px;
backdrop-filter: blur(10px);
}
#newOrderModal .modal-footer {
background: rgba(255, 255, 255, 0.8);
border-top: 1px solid rgba(255, 255, 255, 0.4);
padding: 24px 32px;
border-radius: 0 0 24px 24px;
backdrop-filter: blur(10px);
}
#newOrderModal h6 {
color: #1e293b;
font-weight: 700;
margin-bottom: 16px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== ORDER LIST ITEMS ===== */
#availableOrdersList,
#deletedOrdersList {
max-height: 300px;
overflow-y: auto;
border-radius: 16px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.list-group-item {
background: rgba(255, 255, 255, 0.7);
border: 1.5px solid rgba(255, 255, 255, 0.4);
margin-bottom: 8px;
border-radius: 12px !important;
padding: 16px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.list-group-item:hover {
background: rgba(103, 126, 234, 0.1);
border-color: rgba(103, 126, 234, 0.3);
transform: translateX(4px);
box-shadow: 0 5px 15px rgba(103, 126, 234, 0.15);
}
.list-group-item strong {
color: #1e293b;
font-weight: 700;
}
.list-group-item .small {
color: #64748b;
font-size: 13px;
}
.order-checkbox {
width: 18px;
height: 18px;
border-radius: 6px;
border: 2px solid #cbd5e1;
cursor: pointer;
transition: all 0.3s ease;
}
.order-checkbox:checked {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.2);
}
/* ===== MODAL BUTTONS ===== */
#newOrderModal .btn-secondary {
background: rgba(100, 116, 139, 0.2);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(100, 116, 139, 0.3);
color: #64748b;
padding: 12px 28px;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
#newOrderModal .btn-secondary:hover {
background: rgba(100, 116, 139, 0.3);
border-color: rgba(100, 116, 139, 0.5);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
}
#newOrderModal .btn-success {
background: linear-gradient(
135deg,
rgba(34, 197, 94, 0.25) 0%,
rgba(21, 128, 61, 0.25) 100%
);
backdrop-filter: blur(12px);
border: 1.5px solid rgba(34, 197, 94, 0.4);
color: #166534;
padding: 12px 28px;
border-radius: 12px;
font-weight: 700;
transition: all 0.3s ease;
box-shadow:
0 8px 25px rgba(34, 197, 94, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#newOrderModal .btn-success:hover {
background: linear-gradient(
135deg,
rgba(34, 197, 94, 0.35) 0%,
rgba(21, 128, 61, 0.35) 100%
);
border-color: rgba(34, 197, 94, 0.6);
color: #14532d;
transform: translateY(-2px);
box-shadow:
0 12px 30px rgba(34, 197, 94, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a6fe8, #6a42a0);
}
/* ===== ACTION BUTTONS ===== */
.btn-secondary {
background: linear-gradient(135deg, #94a3b8, #64748b);
border: none;
color: white;
padding: 12px 28px;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
}
.btn-secondary:hover {
background: linear-gradient(135deg, #8492a6, #565e6e);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(100, 116, 139, 0.3);
color: white;
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
.shipment-info-item,
.total-box {
min-width: 100%;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.header-controls {
width: 100%;
justify-content: space-between;
}
.glass-btn {
padding: 10px 20px;
font-size: 14px;
}
}
</style>
<div class="container-fluid py-4">
<div class="card mb-4">
<div class="card-header">
<div class="title-row">
<h5 class="mb-0"><i class="bi bi-truck me-2"></i>Shipment Details</h5>
<!-- <small class="text-white-50" style="margin-left:8px; font-weight:600;">{{ $shipment->shipment_id ?? '' }}</small> -->
</div>
<div class="header-controls">
<!-- Add Order button (top-right) with glass effect -->
@if($mode === 'edit' && $shipment->status === 'pending')
<a href="#" data-bs-toggle="modal" data-bs-target="#newOrderModal" class="glass-btn">
<i class="bi bi-plus-circle"></i> Add Order
</a>
@endif
<!-- Cancel/close: goes back to shipments list -->
<a href="{{ route('admin.shipments') }}" class="btn header-cancel-btn" title="Cancel / Back">
<i class="bi bi-x-lg"></i>
</a>
</div>
</div>
<div class="card-body">
<!-- ================================ -->
<!-- SHIPMENT MAIN DETAILS -->
<!-- ================================ -->
<div class="shipment-info-box">
<div class="shipment-info-item">
<div class="shipment-info-label">Shipment ID</div>
<div class="shipment-info-value">{{ $shipment->shipment_id }}</div>
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Status</div>
<div class="shipment-info-value text-capitalize">
{{ str_replace('_', ' ', $shipment->status) }}
</div>
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Shipment Date</div>
<div class="shipment-info-value">
{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}
</div>
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Total Orders</div>
<div class="shipment-info-value">{{ $orders->count() }}</div>
</div>
</div>
<!-- ================================ -->
<!-- SHIPMENT TOTAL BLOCKS -->
<!-- ================================ -->
<h5 class="fw-bold mb-3 mt-4" style="color: #1e293b;">Shipment Summary</h5>
<div class="d-flex flex-wrap gap-3">
<div class="total-box">
<div class="total-title">TOTAL CTN</div>
<div class="total-value">{{ $shipment->total_ctn }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL QTY</div>
<div class="total-value">{{ $shipment->total_qty }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL CBM</div>
<div class="total-value">{{ $shipment->total_cbm }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL KG</div>
<div class="total-value">{{ $shipment->total_kg }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL TTL QTY</div>
<div class="total-value">{{ $shipment->total_ttl_qty }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL TTL CBM</div>
<div class="total-value">{{ $shipment->total_ttl_cbm }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL TTL KG</div>
<div class="total-value">{{ $shipment->total_ttl_kg }}</div>
</div>
<div class="total-box">
<div class="total-title">TOTAL AMOUNT</div>
<div class="total-value text-success">
₹{{ number_format($shipment->total_amount, 2) }}
</div>
</div>
</div>
<!-- ================================ -->
<!-- ORDERS TABLE LIST -->
<!-- ================================ -->
<h5 class="fw-bold mb-3 mt-5" style="color: #1e293b;">Orders in This Shipment</h5>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Order ID</th>
<th>Origin</th>
<th>Destination</th>
<th>CTN</th>
<th>QTY</th>
<th>TTL/QTY</th>
<th>CBM</th>
<th>TTL CBM</th>
<th>KG</th>
<th>TTL KG</th>
<th>Amount (₹)</th>
<!-- Conditionally show Delete column header -->
@if($mode === 'edit' && $shipment->status === 'pending')
<th>Delete</th>
@endif
</tr>
</thead>
<tbody>
@foreach($orders as $order)
<tr>
<td class="fw-bold text-primary">{{ $order->order_id }}</td>
<td>{{ $order->origin }}</td>
<td>{{ $order->destination }}</td>
<td>{{ $order->ctn }}</td>
<td>{{ $order->qty }}</td>
<td>{{ $order->ttl_qty }}</td>
<td>{{ $order->cbm }}</td>
<td>{{ $order->ttl_cbm }}</td>
<td>{{ $order->kg }}</td>
<td>{{ $order->ttl_kg }}</td>
<td class="fw-bold text-success">
₹{{ number_format($order->ttl_amount, 2) }}
</td>
<!-- Conditionally show Delete button -->
@if($mode === 'edit' && $shipment->status === 'pending')
<td>
<form method="POST" action="{{ route('admin.shipments.removeOrder') }}" onsubmit="return confirmDelete()">
@csrf
<input type="hidden" name="shipment_id" value="{{ $shipment->id }}">
<input type="hidden" name="order_id" value="{{ $order->id }}">
<button type="submit" class="btn btn-danger btn-sm" style="border-radius: 10px; padding: 8px 16px;">
<i class="bi bi-trash"></i> Delete
</button>
</form>
</td>
@endif
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- Action Buttons -->
<div class="d-flex justify-content-between mt-4">
<!-- <a href="{{ route('admin.shipments') }}" class="btn btn-secondary">
<i class="bi bi-arrow-left"></i> Back to Shipments
</a>
-->
@if($mode === 'edit' && $shipment->status === 'pending')
<div>
<!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}"
class="btn btn-warning me-2">
<i class="bi bi-pencil"></i> Edit Shipment
</a> -->
<!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'view']) }}"
class="btn btn-info">
<i class="bi bi-eye"></i> View Mode
</a> -->
</div>
@elseif($shipment->status === 'pending')
<div>
<!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}"
class="btn btn-primary">
<i class="bi bi-pencil"></i> Edit Shipment
</a> -->
</div>
@endif
</div>
</div>
</div>
<!-- New Order Modal -->
<div class="modal fade" id="newOrderModal" tabindex="-1" aria-labelledby="newOrderModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newOrderModalLabel">Add Orders to Shipment</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-6">
<h6>Deleted Orders (recently removed)</h6>
<div id="deletedOrdersList" class="list-group"></div>
</div>
<div class="col-md-6">
<h6>Available Orders</h6>
<div id="availableOrdersList" class="list-group"></div>
</div>
</div>
<div class="mt-3">
<small class="text-muted">Select orders to add back to this shipment, then click "Add Selected".</small>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="addSelectedOrdersBtn" type="button" class="btn btn-success">Add Selected</button>
</div>
</div>
</div>
</div>
</div>
<script>
function confirmDelete() {
return confirm('Are you sure you want to remove this order from the shipment?');
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const csrfToken = '{{ csrf_token() }}';
const shipmentId = {{ $shipment->id }};
let availableOrders = @json($availableOrders ?? []);
let deletedOrders = [];
function renderOrdersList(containerId, orders) {
const container = document.getElementById(containerId);
container.innerHTML = '';
if (!orders.length) {
container.innerHTML = '<div class="text-muted py-3">No orders</div>';
return;
}
orders.forEach(order => {
const item = document.createElement('label');
item.className = 'list-group-item d-flex justify-content-between align-items-center';
item.innerHTML = `
<div>
<input type="checkbox" class="me-2 order-checkbox" data-order='${JSON.stringify(order)}'>
<strong>${order.order_id}</strong>
<div class="small text-muted"> ${order.origin} → ${order.destination} • ${order.qty} qty • ₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits:2})}</div>
</div>
<div class="small text-muted">ID: ${order.id}</div>
`;
container.appendChild(item);
});
}
renderOrdersList('availableOrdersList', availableOrders);
renderOrdersList('deletedOrdersList', deletedOrders);
// Intercept remove-order forms (update selector if form action different)
document.querySelectorAll('form[action="{{ route('admin.shipments.removeOrder') }}"]').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
if (!confirm('Are you sure you want to remove this order from the shipment?')) return;
const formData = new FormData(this);
fetch(this.action, {
method: 'POST',
headers: {'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
body: formData
})
.then(res => res.json())
.then(data => {
if (!data.success) { alert(data.message || 'Failed'); return; }
// Remove row from DOM
const row = this.closest('tr');
// Build deleted order object from row cells if present
const orderObj = {
id: formData.get('order_id'),
order_id: row ? row.querySelector('td:first-child')?.innerText.trim() : ('Order-'+formData.get('order_id')),
origin: row ? row.cells[1]?.innerText.trim() : '',
destination: row ? row.cells[2]?.innerText.trim() : '',
qty: row ? row.cells[4]?.innerText.trim() : '',
ttl_amount: row ? row.cells[10]?.innerText.replace('₹','').replace(',','').trim() : 0
};
if (row) row.remove();
deletedOrders.unshift(orderObj);
renderOrdersList('deletedOrdersList', deletedOrders);
// Optional: update totals by refetching shipment summary endpoint or reload
if (data.shipment) updateTotalsInDOM(data.shipment);
})
.catch(err => {
console.error(err);
alert('Remove failed.');
});
});
});
// Open modal from add-order button
document.querySelectorAll('.glass-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
renderOrdersList('availableOrdersList', availableOrders);
renderOrdersList('deletedOrdersList', deletedOrders);
const modal = new bootstrap.Modal(document.getElementById('newOrderModal'));
modal.show();
});
});
// Add selected orders
document.getElementById('addSelectedOrdersBtn').addEventListener('click', function() {
const checked = Array.from(document.querySelectorAll('.order-checkbox:checked'));
if (!checked.length) { alert('Please select orders'); return; }
const orderIds = checked.map(cb => JSON.parse(cb.getAttribute('data-order')).id);
fetch(`/admin/shipments/${shipmentId}/add-orders`, {
method: 'POST',
headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
body: JSON.stringify({ order_ids: orderIds })
})
.then(r => r.json())
.then(data => {
if (!data.success) { alert(data.message || 'Failed'); return; }
// Update orders table — simplest approach: reload page to reflect DB
// But we can also append rows from data.orders (if provided)
location.reload();
})
.catch(err => {
console.error(err);
alert('Add failed.');
});
});
function updateTotalsInDOM(shipment) {
try {
if (document.getElementById('total_qty')) {
document.getElementById('total_qty').innerText = shipment.total_qty;
}
if (document.getElementById('total_amount')) {
document.getElementById('total_amount').innerText = '₹' + parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits:2});
}
// add other totals similarly...
} catch(e) { console.warn(e); }
}
});
document.addEventListener('hidden.bs.modal', function (event) {
document.body.classList.remove('modal-open');
let backdrop = document.querySelector('.modal-backdrop');
if (backdrop) backdrop.remove();
});
</script>
@endsection

128
resources/views/admin/view_shipment.blade.php Normal file
View File

@@ -0,0 +1,128 @@
@extends('admin.layouts.app')
@section('page-title', 'Shipment Preview')
@section('content')
<div class="container py-4">
<div class="card shadow-sm border-0">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="bi bi-box-seam me-2"></i>
Shipment Preview: {{ $shipment->shipment_id }}
</h5>
</div>
<div class="card-body">
<!-- Dummy Info -->
<div class="alert alert-info">
<strong>{{ $dummyData['title'] }}</strong><br>
Generated On: {{ $dummyData['generated_on'] }} <br>
Note: {{ $dummyData['note'] }}
</div>
<!-- Shipment Basic Details -->
<h5 class="fw-bold mt-3">Shipment Details</h5>
<table class="table table-bordered">
<tr>
<th>Shipment ID</th>
<td>{{ $shipment->shipment_id }}</td>
</tr>
<tr>
<th>Origin</th>
<td>{{ $shipment->origin }}</td>
</tr>
<tr>
<th>Destination</th>
<td>{{ $shipment->destination }}</td>
</tr>
<tr>
<th>Status</th>
<td>{{ ucfirst($shipment->status) }}</td>
</tr>
<tr>
<th>Date</th>
<td>{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}</td>
</tr>
</table>
<!-- Orders in Shipment -->
<h5 class="fw-bold mt-4">Orders Contained in Shipment</h5>
@if($shipment->orders->isEmpty())
<p class="text-muted">No orders found.</p>
@else
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead class="table-dark">
<tr>
<th>Order ID</th>
<th>Origin</th>
<th>Destination</th>
<th>CTN</th>
<th>QTY</th>
<th>TTL/QTY</th>
<th>KG</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
@foreach($shipment->orders as $order)
<tr>
<td>{{ $order->order_id }}</td>
<td>{{ $order->origin }}</td>
<td>{{ $order->destination }}</td>
<td>{{ $order->ctn }}</td>
<td>{{ $order->qty }}</td>
<td>{{ $order->ttl_qty }}</td>
<td>{{ $order->ttl_kg }}</td>
<td>₹{{ number_format($order->ttl_amount, 2) }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
<!-- Shipment Totals -->
<h5 class="fw-bold mt-4">Shipment Totals</h5>
<table class="table table-bordered">
<tr>
<th>Total CTN</th>
<td>{{ $shipment->total_ctn }}</td>
</tr>
<tr>
<th>Total Quantity</th>
<td>{{ $shipment->total_qty }}</td>
</tr>
<tr>
<th>Total TTL Quantity</th>
<td>{{ $shipment->total_ttl_qty }}</td>
</tr>
<tr>
<th>Total CBM</th>
<td>{{ $shipment->total_cbm }}</td>
</tr>
<tr>
<th>Total KG</th>
<td>{{ $shipment->total_kg }}</td>
</tr>
<tr>
<th>Total Amount</th>
<td class="fw-bold text-success">
₹{{ number_format($shipment->total_amount, 2) }}
</td>
</tr>
</table>
<a href="{{ route('admin.shipments') }}" class="btn btn-secondary mt-3">
← Back to Shipments
</a>
</div>
</div>
</div>
@endsection

4
routes/web.php
View File

@@ -168,6 +168,10 @@ Route::prefix('admin')
Route::delete('/shipments/{id}', [ShipmentController::class, 'destroy'])
->name('admin.shipments.destroy');
Route::get('/shipment/dummy/{id}', [ShipmentController::class, 'dummy'])
->name('admin.shipments.dummy');
// ---------------------------
// INVOICES
// ---------------------------