Frontend dashboard, shipment, invoice , customer
This commit is contained in:
divya abdar
@@ -5,10 +5,18 @@
|
||||
@section('content')
|
||||
<style>
|
||||
/* ===== GLOBAL RESPONSIVE STYLES ===== */
|
||||
html, body {
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
html, body {
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Use Inter globally */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
:root { --admin-font: 'Inter', sans-serif; }
|
||||
body, input, select, textarea, button, table, th, td, .orders-container {
|
||||
font-family: var(--admin-font);
|
||||
}
|
||||
|
||||
/* VARIABLES AND BASE STYLES */
|
||||
:root {
|
||||
--primary-color: #3b82f6; /* Blue 500 */
|
||||
@@ -28,8 +36,6 @@ html, body {
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
margin-top: 28px;
|
||||
font-family: 'Inter', sans-serif; /* A modern, clean font */
|
||||
|
||||
}
|
||||
|
||||
.orders-title {
|
||||
@@ -58,25 +64,41 @@ html, body {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* GRADIENT HEADER STYLES FROM SHIPPING REPORT */
|
||||
.orders-table thead {
|
||||
background: var(--bg-light);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.orders-table th {
|
||||
padding: 16px 20px;
|
||||
text-align: center; /* Center align header text */
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-align: left;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.orders-table th:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.orders-table td {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
white-space: nowrap;
|
||||
text-align: center; /* Center align all table data */
|
||||
}
|
||||
|
||||
.orders-table tbody tr:last-child td {
|
||||
@@ -88,30 +110,109 @@ html, body {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
/* STATUS BADGES */
|
||||
/* ===== IMPROVED STATUS BADGES (FROM SHIPPING REPORT) ===== */
|
||||
.status-badge {
|
||||
padding: 6px 10px;
|
||||
border-radius: 9999px; /* Pill shape */
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
font-size: 11px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 6px 12px 6px 8px !important;
|
||||
border-radius: 20px !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
text-transform: capitalize;
|
||||
justify-content: center;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
color: #fff !important;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid transparent !important;
|
||||
min-width: 40px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.2;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 auto; /* Center badges */
|
||||
}
|
||||
|
||||
.status-badge::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: inherit;
|
||||
opacity: 0.9;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Status icons */
|
||||
.status-icon {
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Invoice Status Badges */
|
||||
.status-paid {
|
||||
background: linear-gradient(135deg, #10b981, #34d399) !important;
|
||||
color: white !important;
|
||||
border-color: #059669 !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
||||
color: #d97706 !important;
|
||||
border-color: #f59e0b !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
.status-overdue {
|
||||
background: linear-gradient(135deg, #fef2f2, #fecaca) !important;
|
||||
color: #dc2626 !important;
|
||||
border-color: #ef4444 !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
/* Shipment Status Badges */
|
||||
.ship-pending {
|
||||
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
||||
color: #d97706 !important;
|
||||
border-color: #f59e0b !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
.ship-in_transit {
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
|
||||
color: #1e40af !important;
|
||||
border-color: #3b82f6 !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
.ship-dispatched {
|
||||
background: linear-gradient(135deg, #e9d5ff, #d8b4fe) !important;
|
||||
color: #7e22ce !important;
|
||||
border-color: #8b5cf6 !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
.ship-delivered {
|
||||
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
||||
color: #065f46 !important;
|
||||
border-color: #10b981 !important;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
.shipstatus{
|
||||
|
||||
}
|
||||
|
||||
/* INVOICE STATUS STYLES */
|
||||
.status-paid { background: #d1fae5; color: #059669; } /* Green */
|
||||
.status-pending { background: #fffbeb; color: #d97706; } /* Yellow */
|
||||
|
||||
/* SHIPMENT STATUS STYLES */
|
||||
.status-delivered { background: #e0f2fe; color: #0284c7; } /* Sky Blue */
|
||||
.status-in_transit { background: #fef3c7; color: #b45309; } /* Amber */
|
||||
|
||||
/* ACTION BUTTON */
|
||||
.action-btn {
|
||||
color: var(--text-muted);
|
||||
@@ -357,11 +458,11 @@ html, body {
|
||||
|
||||
<td>
|
||||
@if($shipment?->status)
|
||||
<span class="status-badge status-{{ str_replace(' ', '_', $shipmentStatus) }}">
|
||||
<span class="status-badge ship-{{ str_replace(' ', '_', $shipmentStatus) }}">
|
||||
{{ ucfirst($shipmentStatus) }}
|
||||
</span>
|
||||
@else
|
||||
<span class="shipstatus">-</span>
|
||||
<span class="status-badge ship-pending">Pending</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@@ -411,6 +512,35 @@ html, body {
|
||||
let allOrders = @json($orders);
|
||||
let filteredOrders = [...allOrders];
|
||||
|
||||
// Status icon helper functions
|
||||
function getInvoiceStatusIcon(status) {
|
||||
switch(status) {
|
||||
case 'paid':
|
||||
return '<i class="bi bi-check-circle-fill status-icon"></i>';
|
||||
case 'pending':
|
||||
return '<i class="bi bi-clock-fill status-icon"></i>';
|
||||
case 'overdue':
|
||||
return '<i class="bi bi-exclamation-triangle-fill status-icon"></i>';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getShipmentStatusIcon(status) {
|
||||
switch(status) {
|
||||
case 'pending':
|
||||
return '<i class="bi bi-clock-fill status-icon"></i>';
|
||||
case 'in_transit':
|
||||
return '<i class="bi bi-truck status-icon"></i>';
|
||||
case 'dispatched':
|
||||
return '<i class="bi bi-send-fill status-icon"></i>';
|
||||
case 'delivered':
|
||||
return '<i class="bi bi-check-circle-fill status-icon"></i>';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize pagination
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderTable();
|
||||
@@ -537,14 +667,14 @@ html, body {
|
||||
<td>${invoice?.final_amount_with_gst ? '₹' + Number(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '-'}</td>
|
||||
<td>
|
||||
${invoice?.status
|
||||
? `<span class="status-badge status-${invoiceStatus}">${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}</span>`
|
||||
: '<span class="status-badge status-pending">Pending</span>'
|
||||
? `<span class="status-badge status-${invoiceStatus}">${getInvoiceStatusIcon(invoiceStatus)}${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}</span>`
|
||||
: '<span class="status-badge status-pending"><i class="bi bi-clock-fill status-icon"></i>Pending</span>'
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
${shipment?.status
|
||||
? `<span class="status-badge status-${shipmentStatus.replace(' ', '_')}">${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1)}</span>`
|
||||
: '<span class="shipstatus">-</span>'
|
||||
? `<span class="status-badge ship-${shipmentStatus.replace(' ', '_')}">${getShipmentStatusIcon(shipmentStatus.replace(' ', '_'))}${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1)}</span>`
|
||||
: '<span class="status-badge ship-pending"><i class="bi bi-clock-fill status-icon"></i>Pending</span>'
|
||||
}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
|
||||
Reference in New Issue
Block a user