Pdf Changes Done
This commit is contained in:
Utkarsh Khedkar
@@ -8,10 +8,10 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/*Remove horizontal scroll bar*/
|
||||
html, body {
|
||||
/* html, body {
|
||||
overflow-x: hidden !important;
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Invoice Management Styles */
|
||||
.invoice-management-box {
|
||||
@@ -50,43 +50,50 @@
|
||||
color: #336ad3;
|
||||
}
|
||||
|
||||
/* Tools Row Styling */
|
||||
/* ===== UPDATED FILTER BAR WITH DATE RANGE ===== */
|
||||
.invoice-tools-row {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
|
||||
padding: 25px 30px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
|
||||
position: relative;
|
||||
border-radius: 17px 17px 0 0;
|
||||
top:5px;
|
||||
}
|
||||
|
||||
.filter-bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Search Box Styling */
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 10px 18px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||||
border: 1.5px solid #e2e8f0;
|
||||
min-width: 380px;
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
border-radius: 50px;
|
||||
padding: 8px 20px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
flex: 2;
|
||||
min-width: 250px;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
|
||||
transform: translateY(-2px);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
color: #64748b;
|
||||
color: #667eea;
|
||||
margin-right: 12px;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
@@ -95,93 +102,189 @@
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: #334155;
|
||||
color: #1f2937;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #94a3b8;
|
||||
color: #9ca3af;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* .search-btn {
|
||||
background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 5px 10px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 3px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
white-space: nowrap;
|
||||
} */
|
||||
|
||||
.search-btn:hover {
|
||||
background: linear-gradient(90deg, #3264f8, #3acfff 140%);
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
/* Filter Selects Styling */
|
||||
.filter-select-wrapper {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
border-radius: 50px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
color: #1f2937;
|
||||
outline: none;
|
||||
min-width: 160px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.filter-select:hover {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
border-color: white;
|
||||
box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.create-invoice-btn {
|
||||
background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
|
||||
padding: 12px 28px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 2px 13px #dde7fa42;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
/* ===== NEW: Status dropdown option colors ===== */
|
||||
.filter-select option[value="paid"] {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-select option[value="pending"] {
|
||||
background-color: #fef3c7;
|
||||
color: #d97706;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-select option[value="overdue"] {
|
||||
background-color: #e9d5ff;
|
||||
color: #6b21a8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-select option[value="all"] {
|
||||
background-color: white;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* For Firefox compatibility */
|
||||
.filter-select option {
|
||||
padding: 8px;
|
||||
}
|
||||
/* ===== END status dropdown option colors ===== */
|
||||
|
||||
/* Date Range Styling */
|
||||
.date-range-wrapper {
|
||||
flex: 1.5;
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
/* background: rgba(255, 255, 255, 0.2); */
|
||||
padding: 5px 12px;
|
||||
border-radius: 50px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.date-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 50px;
|
||||
padding: 5px 12px;
|
||||
flex: 1;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.date-input-container i {
|
||||
color: #667eea;
|
||||
margin-right: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: #1f2937;
|
||||
font-family: 'Inter', sans-serif;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.create-invoice-btn:hover {
|
||||
background: linear-gradient(90deg, #3264f8, #3acfff 140%);
|
||||
box-shadow: 0 4px 25px #5ab8f880;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transform: translateY(-2px);
|
||||
.date-input::placeholder {
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1100px) {
|
||||
.filter-bar-container {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.date-range-wrapper {
|
||||
min-width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.invoice-tools-row {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter-bar-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.filter-select-wrapper {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.date-range-wrapper {
|
||||
min-width: 100%;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
padding: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* ===== END UPDATED FILTER BAR ===== */
|
||||
|
||||
.invoice-management-main {
|
||||
background: #fff;
|
||||
border-radius: 0 0 17px 17px;
|
||||
@@ -569,37 +672,6 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Date Range Picker Styles */
|
||||
.date-range-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
background: white;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
outline: none;
|
||||
min-width: 140px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.04);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.date-input:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #000000ff;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Stats Summary - Centered */
|
||||
.stats-summary {
|
||||
display: grid;
|
||||
@@ -950,17 +1022,6 @@
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.invoice-tools-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
@@ -978,10 +1039,6 @@
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.invoice-tools-row {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.table th, .table td {
|
||||
font-size: 13px;
|
||||
padding: 15px 10px;
|
||||
@@ -1003,21 +1060,6 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.create-invoice-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invoice-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -1033,15 +1075,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date-range-container {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-summary {
|
||||
grid-template-columns: 1fr;
|
||||
margin: 20px;
|
||||
@@ -1079,11 +1112,6 @@
|
||||
min-width: auto;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 8px 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1096,56 +1124,58 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- TOOLS ROW - Search, Filter, Create Button -->
|
||||
<!-- UPDATED FILTER BAR WITH DATE RANGE -->
|
||||
<div class="invoice-tools-row">
|
||||
<!-- Search Box with Button -->
|
||||
<form method="GET" action="{{ route('admin.invoices.index') }}">
|
||||
<div class="invoice-tools-row">
|
||||
<div style="display:flex; align-items:center; flex:1; max-width:500px; min-width:380px;">
|
||||
<div class="search-box">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text"
|
||||
id="invoiceSearch"
|
||||
name="search"
|
||||
value="{{ request('search') }}"
|
||||
placeholder="Search by invoice number, customer name...">
|
||||
</div>
|
||||
<button type="submit" id="searchButton" class="search-btn">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
<form method="GET" action="{{ route('admin.invoices.index') }}" style="width: 100%;">
|
||||
<div class="filter-bar-container">
|
||||
<!-- Search Box -->
|
||||
<div class="search-box">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text"
|
||||
id="searchInput"
|
||||
name="search"
|
||||
value="{{ request('search') }}"
|
||||
placeholder="Search Invoices...">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" id="statusFilter" name="status">
|
||||
<option value="all">All Status</option>
|
||||
<option value="paid" {{ request('status')=='paid' ? 'selected' : '' }}>Paid</option>
|
||||
<option value="pending" {{ request('status')=='pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="overdue" {{ request('status')=='overdue' ? 'selected' : '' }}>Overdue</option>
|
||||
</select>
|
||||
<!-- Status Filter -->
|
||||
<div class="filter-select-wrapper">
|
||||
<select class="filter-select" id="statusFilter" name="status">
|
||||
<option value="all" {{ request('status')=='all' ? 'selected' : '' }}>All Status</option>
|
||||
<option value="paid" {{ request('status')=='paid' ? 'selected' : '' }}>Paid</option>
|
||||
<option value="pending" {{ request('status')=='pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="overdue" {{ request('status')=='overdue' ? 'selected' : '' }}>Overdue</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="date-range-container">
|
||||
<input type="date"
|
||||
class="date-input"
|
||||
id="startDate"
|
||||
name="start_date"
|
||||
value="{{ request('start_date') }}">
|
||||
<span class="date-separator">to</span>
|
||||
<input type="date"
|
||||
class="date-input"
|
||||
id="endDate"
|
||||
name="end_date"
|
||||
value="{{ request('end_date') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<!-- Create Invoice Button -->
|
||||
<!-- <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
|
||||
<i class="bi bi-plus-circle"></i> Create Invoice
|
||||
</a> -->
|
||||
<!-- Date Range Filter (FROM - TO) with dd-mm-yyyy format -->
|
||||
<div class="date-range-wrapper">
|
||||
<div class="date-input-container">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
<input type="text"
|
||||
class="date-input"
|
||||
id="startDate"
|
||||
name="start_date"
|
||||
value="{{ request('start_date') ? date('d-m-Y', strtotime(request('start_date'))) : '' }}"
|
||||
placeholder="dd-mm-yyyy"
|
||||
onfocus="(this.type='date')"
|
||||
onblur="if(!this.value) this.type='text'">
|
||||
</div>
|
||||
<span class="date-separator">to</span>
|
||||
<div class="date-input-container">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
<input type="text"
|
||||
class="date-input"
|
||||
id="endDate"
|
||||
name="end_date"
|
||||
value="{{ request('end_date') ? date('d-m-Y', strtotime(request('end_date'))) : '' }}"
|
||||
placeholder="dd-mm-yyyy"
|
||||
onfocus="(this.type='date')"
|
||||
onblur="if(!this.value) this.type='text'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="invoice-management-main no-extra-space">
|
||||
@@ -1181,77 +1211,107 @@
|
||||
<div class="card-body p-0">
|
||||
<div class="table-container">
|
||||
<table class="table table-striped align-middle" id="invoicesTable">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="column-header">#</th>
|
||||
<th class="column-header">Invoice Number</th>
|
||||
<th class="column-header">Customer</th>
|
||||
<th class="column-header">Final Amount</th>
|
||||
<th class="column-header">GST %</th>
|
||||
<th class="column-header">Total w/GST</th>
|
||||
<th class="column-header">Status</th>
|
||||
<th class="column-header">Invoice Date</th>
|
||||
<th class="column-header">Due Date</th>
|
||||
<th class="column-header">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="column-header">#</th>
|
||||
<th class="column-header">Invoice Number</th>
|
||||
<th class="column-header">Customer</th>
|
||||
<th class="column-header">Container</th> {{-- NEW --}}
|
||||
<th class="column-header">Final Amount</th>
|
||||
<th class="column-header">GST %</th>
|
||||
<th class="column-header">Total w/GST</th>
|
||||
<th class="column-header">Status</th>
|
||||
<th class="column-header">Invoice Date</th>
|
||||
<th class="column-header">Due Date</th>
|
||||
<th class="column-header">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="invoicesTableBody">
|
||||
@php
|
||||
$totalInvoices = $invoices->count();
|
||||
$sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
|
||||
@endphp
|
||||
|
||||
@forelse($sortedInvoices as $i => $invoice)
|
||||
<tr>
|
||||
<td>{{ $totalInvoices - $i }}</td>
|
||||
<tbody id="invoicesTableBody">
|
||||
@php
|
||||
$totalInvoices = $invoices->count();
|
||||
$sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
|
||||
@endphp
|
||||
|
||||
@forelse($sortedInvoices as $i => $invoice)
|
||||
<tr>
|
||||
<td>{{ $totalInvoices - $i }}</td>
|
||||
|
||||
<td>
|
||||
<div class="invoice-number-cell">
|
||||
<div class="invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
</div>
|
||||
<a href="#" class="invoice-number-link open-invoice-popup" data-id="{{ $invoice->id }}">
|
||||
{{ $invoice->invoice_number }}
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="invoice-number-cell">
|
||||
<div class="invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
</div>
|
||||
<a href="#" class="invoice-number-link open-invoice-popup" data-id="{{ $invoice->id }}">
|
||||
{{ $invoice->invoice_number }}
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="customer-cell">{{ $invoice->customer_name }}</td>
|
||||
<td class="customer-cell">
|
||||
{{ $invoice->customer_name }}
|
||||
</td>
|
||||
|
||||
<td class="amount-cell">₹{{ number_format($invoice->final_amount, 2) }}</td>
|
||||
<td class="gst-cell">{{ $invoice->gst_percent }}%</td>
|
||||
<td class="amount-cell">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</td>
|
||||
{{-- NEW: Container column --}}
|
||||
<td class="customer-cell">
|
||||
@if($invoice->container)
|
||||
{{ $invoice->container->container_number }}
|
||||
{{-- जर फक्त ID हवी असेल तर:
|
||||
#{{ $invoice->container->id }}
|
||||
--}}
|
||||
@else
|
||||
—
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-{{ $invoice->status }}">
|
||||
@if($invoice->status == 'paid')
|
||||
<i class="bi bi-check-circle-fill status-icon"></i>
|
||||
@elseif($invoice->status == 'pending')
|
||||
<i class="bi bi-clock-fill status-icon"></i>
|
||||
@elseif($invoice->status == 'overdue')
|
||||
<i class="bi bi-exclamation-triangle-fill status-icon"></i>
|
||||
@endif
|
||||
{{ ucfirst($invoice->status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="amount-cell">
|
||||
₹{{ number_format($invoice->final_amount, 2) }}
|
||||
</td>
|
||||
|
||||
<td class="date-cell">{{ $invoice->invoice_date }}</td>
|
||||
<td class="date-cell">{{ $invoice->due_date }}</td>
|
||||
<td class="gst-cell">
|
||||
{{ $invoice->gst_percent }}%
|
||||
</td>
|
||||
|
||||
<td class="amount-cell">
|
||||
₹{{ number_format($invoice->final_amount_with_gst, 2) }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-{{ $invoice->status }}">
|
||||
@if($invoice->status == 'paid')
|
||||
<i class="bi bi-check-circle-fill status-icon"></i>
|
||||
@elseif($invoice->status == 'pending')
|
||||
<i class="bi bi-clock-fill status-icon"></i>
|
||||
@elseif($invoice->status == 'overdue')
|
||||
<i class="bi bi-exclamation-triangle-fill status-icon"></i>
|
||||
@endif
|
||||
{{ ucfirst($invoice->status) }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="date-cell">
|
||||
{{ $invoice->invoice_date }}
|
||||
</td>
|
||||
|
||||
<td class="date-cell">
|
||||
{{ $invoice->due_date }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="{{ route('admin.invoices.edit', $invoice->id) }}"
|
||||
class="btn-entry">
|
||||
<i class="bi bi-pencil"></i> Entry
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
{{-- 1 new column वाढवलाय म्हणून colspan 11 --}}
|
||||
<td colspan="11" class="text-muted">No invoices found</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
|
||||
<td>
|
||||
<a href="{{ route('admin.invoices.edit', $invoice->id) }}"
|
||||
class="btn-entry">
|
||||
<i class="bi bi-pencil"></i> Entry
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="10" class="text-muted">No invoices found</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1366,7 +1426,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Pagination state
|
||||
@@ -1413,18 +1472,28 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
|
||||
// Search and filter functionality for both desktop and mobile
|
||||
const searchInput = document.getElementById('invoiceSearch');
|
||||
// Function to parse dd-mm-yyyy to Date object
|
||||
function parseDate(dateStr) {
|
||||
if (!dateStr) return null;
|
||||
const parts = dateStr.split('-');
|
||||
if (parts.length === 3) {
|
||||
// dd-mm-yyyy format
|
||||
return new Date(parts[2], parts[1] - 1, parts[0]);
|
||||
}
|
||||
return new Date(dateStr);
|
||||
}
|
||||
|
||||
// Search and filter functionality
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const statusFilter = document.getElementById('statusFilter');
|
||||
const startDateInput = document.getElementById('startDate');
|
||||
const endDateInput = document.getElementById('endDate');
|
||||
const searchButton = document.getElementById('searchButton');
|
||||
const startDate = document.getElementById('startDate');
|
||||
const endDate = document.getElementById('endDate');
|
||||
|
||||
function filterInvoices() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
const statusValue = statusFilter.value;
|
||||
const startDate = startDateInput.value;
|
||||
const endDate = endDateInput.value;
|
||||
const startDateValue = startDate.value;
|
||||
const endDateValue = endDate.value;
|
||||
|
||||
filteredInvoices = allInvoices.filter(invoice => {
|
||||
let include = true;
|
||||
@@ -1438,18 +1507,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (statusValue && invoice.status !== statusValue) {
|
||||
if (statusValue && statusValue !== 'all' && invoice.status !== statusValue) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
// Date filter
|
||||
if (startDate || endDate) {
|
||||
const invoiceDate = new Date(invoice.invoice_date);
|
||||
const start = startDate ? new Date(startDate) : null;
|
||||
const end = endDate ? new Date(endDate) : null;
|
||||
// Date range filter
|
||||
if (startDateValue || endDateValue) {
|
||||
const invoiceDate = parseDate(invoice.invoice_date);
|
||||
|
||||
if (start && invoiceDate < start) include = false;
|
||||
if (end && invoiceDate > end) include = false;
|
||||
if (startDateValue) {
|
||||
const start = parseDate(startDateValue);
|
||||
if (invoiceDate < start) include = false;
|
||||
}
|
||||
|
||||
if (endDateValue) {
|
||||
const end = parseDate(endDateValue);
|
||||
if (invoiceDate > end) include = false;
|
||||
}
|
||||
}
|
||||
|
||||
return include;
|
||||
@@ -1462,14 +1536,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Add event listeners for filtering
|
||||
searchInput.addEventListener('input', filterInvoices);
|
||||
searchButton.addEventListener('click', filterInvoices);
|
||||
statusFilter.addEventListener('change', filterInvoices);
|
||||
startDateInput.addEventListener('change', filterInvoices);
|
||||
endDateInput.addEventListener('change', filterInvoices);
|
||||
|
||||
startDate.addEventListener('change', filterInvoices);
|
||||
endDate.addEventListener('change', filterInvoices);
|
||||
|
||||
// Also trigger search on Enter key in search input
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
filterInvoices();
|
||||
}
|
||||
});
|
||||
@@ -1559,7 +1633,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const mobileContainer = document.getElementById('mobileInvoicesContainer');
|
||||
|
||||
if (filteredInvoices.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" class="text-muted">No invoices found</td></tr>';
|
||||
// 1 column वाढवल्यामुळे colspan 11
|
||||
tbody.innerHTML = '<tr><td colspan="11" class="text-muted">No invoices found</td></tr>';
|
||||
mobileContainer.innerHTML = '<div class="text-muted text-center py-4">No invoices found</div>';
|
||||
return;
|
||||
}
|
||||
@@ -1590,6 +1665,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
</div>
|
||||
</td>
|
||||
<td class="customer-cell">${invoice.customer_name}</td>
|
||||
<!-- NEW: Container column -->
|
||||
<td class="customer-cell">
|
||||
${invoice.container ? (invoice.container.container_number ?? '—') : '—'}
|
||||
</td>
|
||||
<td class="amount-cell">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
||||
<td class="gst-cell">${invoice.gst_percent}%</td>
|
||||
<td class="amount-cell">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
||||
@@ -1639,6 +1718,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
<span class="mobile-detail-label">Customer</span>
|
||||
<span class="mobile-detail-value">${invoice.customer_name}</span>
|
||||
</div>
|
||||
<!-- NEW: Container for mobile -->
|
||||
<div class="mobile-detail-item">
|
||||
<span class="mobile-detail-label">Container</span>
|
||||
<span class="mobile-detail-value">
|
||||
${invoice.container ? (invoice.container.container_number ?? '—') : '—'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mobile-detail-item">
|
||||
<span class="mobile-detail-label">Amount</span>
|
||||
<span class="mobile-detail-value">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
|
||||
@@ -1683,11 +1769,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user