1663 lines
54 KiB
PHP
1663 lines
54 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('page-title', 'Invoice List')
|
|
|
|
@section('content')
|
|
<style>
|
|
/* Import Inter Font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
/*Remove horizontal scroll bar*/
|
|
html, body {
|
|
overflow-x: hidden !important;
|
|
font-family: 'Inter', sans-serif !important;
|
|
}
|
|
|
|
/* Invoice Management Styles */
|
|
.invoice-management-box {
|
|
background: #fff;
|
|
border-radius: 17px;
|
|
box-shadow: 0 7px 38px #dde3fa77, 0 2px 9px #e5e7ff80;
|
|
margin-bottom: 33px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.invoice-management-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 17px 17px 0 0;
|
|
background: #fceeb8ff;
|
|
min-height: 54px;
|
|
padding: 15px 26px 10px 22px;
|
|
border-bottom: 1.4px solid #e8e2cf;
|
|
box-shadow: 0 1px 13px #ffe2a888;
|
|
}
|
|
|
|
.invoice-management-title {
|
|
font-size: 1.32rem;
|
|
font-weight: 800;
|
|
color: #2451af;
|
|
letter-spacing: .08em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.invoice-management-title i {
|
|
font-size: 1.12em;
|
|
color: #336ad3;
|
|
}
|
|
|
|
/* Tools Row Styling */
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
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);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.search-box i {
|
|
color: #64748b;
|
|
margin-right: 12px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.search-box input {
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
font-size: 15px;
|
|
color: #334155;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: #94a3b8;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* .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-select {
|
|
background: white;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
color: #334155;
|
|
outline: none;
|
|
min-width: 160px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-select:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.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;
|
|
font-family: 'Inter', sans-serif;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.invoice-management-main {
|
|
background: #fff;
|
|
border-radius: 0 0 17px 17px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Table Styling - CENTERED CONTENT */
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
border-radius: 0 0 17px 17px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
.table-container::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(90deg, #a7b8ff, #6c8eff);
|
|
border-radius: 10px;
|
|
}
|
|
.table-container::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(90deg, #5a78ff, #3f63e0);
|
|
}
|
|
.table-container::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
min-width: 1200px;
|
|
border-collapse: separate;
|
|
border-spacing: 0 12px;
|
|
margin-bottom: 0;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Center all table content */
|
|
.table thead tr {
|
|
background: #feebbe !important;
|
|
}
|
|
|
|
.table thead th:first-child {
|
|
border-top-left-radius: 17px;
|
|
}
|
|
.table thead th:last-child {
|
|
border-top-right-radius: 17px;
|
|
}
|
|
|
|
.table thead th {
|
|
background: transparent !important;
|
|
border: none;
|
|
font-weight: 700;
|
|
color: #343535;
|
|
letter-spacing: 0.02em;
|
|
font-size: 14px;
|
|
padding: 20px 15px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
border-bottom: 2px solid #e8e2cf;
|
|
text-align: center !important;
|
|
vertical-align: middle;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.table thead th:first-child {
|
|
padding-left: 30px;
|
|
}
|
|
.table thead th:last-child {
|
|
padding-right: 30px;
|
|
}
|
|
|
|
/* Soft blue background for ALL table rows */
|
|
.table-striped tbody tr {
|
|
background: #f0f8ff !important;
|
|
transition: all 0.2s ease;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.table-striped tbody tr:hover {
|
|
background: #e6f3ff !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Remove striped pattern - all rows same soft blue */
|
|
.table-striped tbody tr:nth-of-type(odd),
|
|
.table-striped tbody tr:nth-of-type(even) {
|
|
background: #f0f8ff !important;
|
|
}
|
|
|
|
/* Center all table cells with proper spacing */
|
|
.table td {
|
|
padding: 18px 15px;
|
|
border: none;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
color: #4a5568;
|
|
text-align: center !important;
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* First and last cell rounded corners */
|
|
.table td:first-child {
|
|
padding-left: 30px;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
border-top-left-radius: 12px;
|
|
border-bottom-left-radius: 12px;
|
|
}
|
|
|
|
.table td:last-child {
|
|
padding-right: 30px;
|
|
border-top-right-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
|
|
/* Invoice Number with Curved Boxes */
|
|
.invoice-number-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.invoice-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
font-weight: bold;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
}
|
|
|
|
/* Different curved background colors for each invoice */
|
|
.invoice-icon-1 {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-2 {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-3 {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-4 {
|
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-5 {
|
|
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-6 {
|
|
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-7 {
|
|
background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.invoice-icon-8 {
|
|
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.invoice-number-link {
|
|
color: #2469d6;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.invoice-number-link:hover {
|
|
color: #1a4fb3;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Badge Styling - Centered with custom backgrounds and icons */
|
|
.badge {
|
|
font-size: 12px !important;
|
|
font-weight: 600 !important;
|
|
padding: 8px 15px 8px 12px !important;
|
|
border-radius: 20px !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
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: 45px;
|
|
box-sizing: border-box;
|
|
line-height: 1.2;
|
|
gap: 6px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Status icons */
|
|
.status-icon {
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Custom status badge backgrounds with icons */
|
|
.badge-paid {
|
|
background: url('/images/status-bg-paid.png') !important;
|
|
}
|
|
|
|
.badge-pending {
|
|
background: url('/images/status-bg-pending.png') !important;
|
|
}
|
|
|
|
.badge-overdue {
|
|
background: url('/images/status-bg-overdue.png') !important;
|
|
}
|
|
|
|
/* Fallback colors if images don't load - ALL WITH SAME SIZE */
|
|
.badge.badge-paid {
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
|
color: #065f46 !important;
|
|
border-color: #10b981 !important;
|
|
width: 98px;
|
|
}
|
|
|
|
.badge.badge-pending {
|
|
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
|
color: #d97706 !important;
|
|
border-color: #f59e0b !important;
|
|
}
|
|
|
|
.badge.badge-overdue {
|
|
background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
|
|
color: #6b21a8 !important;
|
|
border-color: #8b5cf6 !important;
|
|
}
|
|
|
|
/* Entry Button - Centered */
|
|
.btn-entry {
|
|
background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 1px 4px rgba(52, 146, 248, 0.3);
|
|
color: white;
|
|
white-space: nowrap;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
text-decoration: none;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.btn-entry:hover {
|
|
background: linear-gradient(135deg, #46b4fd 55%, #226ad6 110%);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(52, 146, 248, 0.4);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Amount Styling - Centered */
|
|
.amount-cell {
|
|
font-weight: 600;
|
|
color: #194073;
|
|
font-size: 14px;
|
|
text-align: center !important;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.gst-cell {
|
|
font-weight: 500;
|
|
color: #63709b;
|
|
font-size: 14px;
|
|
text-align: center !important;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Date Styling - Centered */
|
|
.date-cell {
|
|
font-size: 13px;
|
|
color: #718096;
|
|
font-weight: 500;
|
|
text-align: center !important;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Customer Name Styling - Centered */
|
|
.customer-cell {
|
|
font-weight: 500;
|
|
color: #2d3748;
|
|
font-size: 14px;
|
|
max-width: 120px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: center !important;
|
|
margin: 0 auto;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Modal Styling */
|
|
.modal.fade .modal-dialog {
|
|
transition: transform 0.3s ease-out;
|
|
transform: translate(0, -50px);
|
|
}
|
|
|
|
.modal.show .modal-dialog {
|
|
transform: none;
|
|
}
|
|
|
|
.modal-content {
|
|
border: none;
|
|
border-radius: 20px;
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-bottom: none;
|
|
padding: 15px 25px;
|
|
border-radius: 20px 20px 0 0;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin: 0;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.modal-header .btn-close {
|
|
filter: invert(1);
|
|
opacity: 0.8;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modal-header .btn-close:hover {
|
|
opacity: 1;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 30px;
|
|
background: #f8fafc;
|
|
max-height: 70vh;
|
|
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: #64748b;
|
|
font-weight: 500;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Stats Summary - Centered */
|
|
.stats-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 15px;
|
|
margin: 25px 30px;
|
|
padding: 0;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 18px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
text-align: center;
|
|
border-left: 3px solid #667eea;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
margin-bottom: 5px;
|
|
text-align: center;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: #718096;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Column Headers - Centered */
|
|
.column-header {
|
|
text-align: center !important;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Remove extra spacing */
|
|
.no-extra-space {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-view {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
/* Ensure all content in table is centered */
|
|
.table tbody tr td {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.table tbody tr td .invoice-number-cell {
|
|
justify-content: center;
|
|
}
|
|
|
|
.table tbody tr td .btn-entry {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Empty State - Centered */
|
|
.text-muted {
|
|
color: #8a9bb9 !important;
|
|
font-style: italic;
|
|
padding: 30px !important;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Card Styling */
|
|
.card {
|
|
border-radius: 0 0 17px 17px;
|
|
border: none;
|
|
margin-bottom: 0 !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card-header {
|
|
background: #f8f9fa !important;
|
|
border-bottom: 1px solid #e9ecef;
|
|
border-radius: 0 !important;
|
|
padding: 18px 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-header h4 {
|
|
margin: 0;
|
|
color: #2451af;
|
|
font-weight: 700;
|
|
font-size: 1.3rem;
|
|
text-align: center;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Mobile Responsive Styles */
|
|
.mobile-invoice-card {
|
|
display: none;
|
|
background: #f0f8ff;
|
|
border-radius: 12px;
|
|
padding: 18px;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
border-left: 4px solid #667eea;
|
|
}
|
|
|
|
.mobile-invoice-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.mobile-invoice-number {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mobile-invoice-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mobile-invoice-number-text {
|
|
font-weight: 600;
|
|
color: #2469d6;
|
|
font-size: 15px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.mobile-invoice-status {
|
|
font-size: 11px !important;
|
|
padding: 6px 12px 6px 8px !important;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.mobile-invoice-details {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.mobile-detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mobile-detail-label {
|
|
font-size: 12px;
|
|
color: #718096;
|
|
margin-bottom: 3px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.mobile-detail-value {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #2d3748;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.mobile-invoice-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mobile-action-btn {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.mobile-action-btn.view {
|
|
background: #f0f8ff;
|
|
color: #2469d6;
|
|
border: 1px solid #2469d6;
|
|
}
|
|
|
|
.mobile-action-btn.entry {
|
|
background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
/* ---------- Pagination Styles ---------- */
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
padding: 15px 30px;
|
|
border-top: 1px solid #eef3fb;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
color: #9ba5bb;
|
|
font-weight: 600;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.pagination-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pagination-btn {
|
|
background: #fff;
|
|
border: 1px solid #e3eaf6;
|
|
color: #1a2951;
|
|
padding: 10px 15px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 45px;
|
|
height: 38px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.pagination-btn:hover:not(:disabled) {
|
|
background: #1a2951;
|
|
color: white;
|
|
border-color: #1a2951;
|
|
}
|
|
|
|
.pagination-btn:disabled {
|
|
background: #f8fafc;
|
|
color: #cbd5e0;
|
|
border-color: #e2e8f0;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.pagination-page-btn {
|
|
background: #fff;
|
|
border: 1px solid #e3eaf6;
|
|
color: #1a2951;
|
|
padding: 8px 15px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.pagination-page-btn:hover {
|
|
background: #1a2951;
|
|
color: white;
|
|
border-color: #1a2951;
|
|
}
|
|
|
|
.pagination-page-btn.active {
|
|
background: #1a2951;
|
|
color: white;
|
|
border-color: #1a2951;
|
|
}
|
|
|
|
.pagination-pages {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.pagination-ellipsis {
|
|
color: #9ba5bb;
|
|
font-size: 14px;
|
|
padding: 0 6px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Image-based pagination buttons */
|
|
.pagination-img-btn {
|
|
background: #fff;
|
|
border: 1px solid #e3eaf6;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 45px;
|
|
height: 38px;
|
|
padding: 0;
|
|
}
|
|
|
|
.pagination-img-btn:hover:not(:disabled) {
|
|
background: #1a2951;
|
|
border-color: #1a2951;
|
|
}
|
|
|
|
.pagination-img-btn:disabled {
|
|
background: #f8fafc;
|
|
border-color: #e2e8f0;
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.pagination-img-btn img {
|
|
width: 18px;
|
|
height: 18px;
|
|
filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%);
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.pagination-img-btn:hover:not(:disabled) img {
|
|
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
|
|
}
|
|
|
|
.pagination-img-btn:disabled img {
|
|
filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.stats-summary {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.invoice-management-bar {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.invoice-tools-row {
|
|
padding: 20px;
|
|
}
|
|
|
|
.table th, .table td {
|
|
font-size: 13px;
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 11px !important;
|
|
padding: 6px 12px 6px 8px !important;
|
|
min-width: 75px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.btn-entry {
|
|
padding: 6px 12px;
|
|
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;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Show mobile cards and hide table on small screens */
|
|
.desktop-table {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-invoice-card {
|
|
display: block;
|
|
}
|
|
|
|
.date-range-container {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.date-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.stats-summary {
|
|
grid-template-columns: 1fr;
|
|
margin: 20px;
|
|
}
|
|
|
|
.pagination-container {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.pagination-controls {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.invoice-management-title {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.card-header h4 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.mobile-invoice-details {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mobile-invoice-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search-box {
|
|
min-width: auto;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 8px 15px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid py-3">
|
|
<!-- INVOICE MANAGEMENT -->
|
|
<div class="invoice-management-box">
|
|
<div class="invoice-management-bar">
|
|
<span class="invoice-management-title">
|
|
<i class="bi bi-receipt"></i> Invoice Management
|
|
</span>
|
|
</div>
|
|
|
|
<!-- TOOLS ROW - Search, Filter, Create Button -->
|
|
<div class="invoice-tools-row">
|
|
<!-- Search Box with Button -->
|
|
<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" placeholder="Search by invoice number, customer name...">
|
|
</div>
|
|
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filter Group -->
|
|
<div class="filter-group">
|
|
<select class="filter-select" id="statusFilter">
|
|
<option value="">All Status</option>
|
|
<option value="paid">Paid</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="overdue">Overdue</option>
|
|
</select>
|
|
|
|
<!-- Date Range Picker -->
|
|
<div class="date-range-container">
|
|
<input type="date" class="date-input" id="startDate">
|
|
<span class="date-separator">to</span>
|
|
<input type="date" class="date-input" id="endDate">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Invoice Button -->
|
|
<!-- <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
|
|
<i class="bi bi-plus-circle"></i> Create Invoice
|
|
</a> -->
|
|
</div>
|
|
|
|
<div class="invoice-management-main no-extra-space">
|
|
<!-- Quick Stats Summary -->
|
|
<div class="stats-summary">
|
|
<div class="stat-card">
|
|
<div class="stat-value">{{ $invoices->count() }}</div>
|
|
<div class="stat-label">Total Invoices</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">₹{{ number_format($invoices->sum('final_amount_with_gst'), 2) }}</div>
|
|
<div class="stat-label">Total Revenue</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{{ $invoices->where('status', 'paid')->count() }}</div>
|
|
<div class="stat-label">Paid Invoices</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{{ $invoices->where('status', 'pending')->count() }}</div>
|
|
<div class="stat-label">Pending Invoices</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ALL INVOICES - Desktop Table -->
|
|
<div class="card shadow-sm desktop-table">
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center compact-view">
|
|
<h4 class="mb-0">All Invoices</h4>
|
|
<span class="text-muted" style="font-size: 13px;">
|
|
{{ $invoices->count() }} invoices
|
|
</span>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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 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>
|
|
|
|
<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>
|
|
<td colspan="10" class="text-muted">No invoices found</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ALL INVOICES - Mobile Cards -->
|
|
<div class="mobile-invoices-container" id="mobileInvoicesContainer">
|
|
@php
|
|
$totalInvoices = $invoices->count();
|
|
$sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
|
|
@endphp
|
|
|
|
@forelse($sortedInvoices as $i => $invoice)
|
|
<div class="mobile-invoice-card" data-invoice-id="{{ $invoice->id }}">
|
|
<div class="mobile-invoice-header">
|
|
<div class="mobile-invoice-number">
|
|
<div class="mobile-invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
</div>
|
|
<span class="mobile-invoice-number-text">{{ $invoice->invoice_number }}</span>
|
|
</div>
|
|
<span class="badge badge-{{ $invoice->status }} mobile-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>
|
|
</div>
|
|
|
|
<div class="mobile-invoice-details">
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Customer</span>
|
|
<span class="mobile-detail-value">{{ $invoice->customer_name }}</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Amount</span>
|
|
<span class="mobile-detail-value">₹{{ number_format($invoice->final_amount, 2) }}</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">GST</span>
|
|
<span class="mobile-detail-value">{{ $invoice->gst_percent }}%</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Total</span>
|
|
<span class="mobile-detail-value">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Invoice Date</span>
|
|
<span class="mobile-detail-value">{{ $invoice->invoice_date }}</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Due Date</span>
|
|
<span class="mobile-detail-value">{{ $invoice->due_date }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mobile-invoice-actions">
|
|
<a href="#" class="mobile-action-btn view open-invoice-popup" data-id="{{ $invoice->id }}">
|
|
<i class="bi bi-eye"></i> View
|
|
</a>
|
|
<a href="{{ route('admin.invoices.edit', $invoice->id) }}" class="mobile-action-btn entry">
|
|
<i class="bi bi-pencil"></i> Entry
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-muted text-center py-4">No invoices found</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Pagination Controls -->
|
|
<div class="pagination-container">
|
|
<div class="pagination-info" id="pageInfo">Showing 1 to {{ $invoices->count() }} of {{ $invoices->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>
|
|
<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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- POPUP MODAL --}}
|
|
<div class="modal fade" id="invoiceModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Invoice Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<div class="modal-body" id="invoiceModalBody">
|
|
<p class="text-center text-muted">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Pagination state
|
|
let currentPage = 1;
|
|
const itemsPerPage = 10;
|
|
let allInvoices = @json($invoices);
|
|
let filteredInvoices = [...allInvoices];
|
|
|
|
// Initialize pagination
|
|
renderTable();
|
|
updatePaginationControls();
|
|
|
|
// Bind pagination events
|
|
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
|
|
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
|
|
|
|
// Invoice popup functionality
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('.open-invoice-popup')) {
|
|
e.preventDefault();
|
|
const id = e.target.closest('.open-invoice-popup').dataset.id;
|
|
const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));
|
|
|
|
document.getElementById('invoiceModalBody').innerHTML =
|
|
"<div class='text-center py-4'><div class='spinner-border text-primary' role='status'></div><p class='mt-2 text-muted'>Loading invoice details...</p></div>";
|
|
|
|
modal.show();
|
|
|
|
fetch(`/admin/invoices/${id}/popup`)
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return res.text();
|
|
})
|
|
.then(html => {
|
|
document.getElementById('invoiceModalBody').innerHTML = html;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading invoice details:', error);
|
|
document.getElementById('invoiceModalBody').innerHTML =
|
|
"<div class='text-center py-4 text-danger'><i class='bi bi-exclamation-triangle fs-1'></i><p class='mt-2'>Failed to load invoice details. Please try again.</p></div>";
|
|
});
|
|
}
|
|
});
|
|
|
|
// Search and filter functionality for both desktop and mobile
|
|
const searchInput = document.getElementById('invoiceSearch');
|
|
const statusFilter = document.getElementById('statusFilter');
|
|
const startDateInput = document.getElementById('startDate');
|
|
const endDateInput = document.getElementById('endDate');
|
|
const searchButton = document.getElementById('searchButton');
|
|
|
|
function filterInvoices() {
|
|
const searchTerm = searchInput.value.toLowerCase();
|
|
const statusValue = statusFilter.value;
|
|
const startDate = startDateInput.value;
|
|
const endDate = endDateInput.value;
|
|
|
|
filteredInvoices = allInvoices.filter(invoice => {
|
|
let include = true;
|
|
|
|
// Search filter
|
|
if (searchTerm) {
|
|
const matchesSearch =
|
|
invoice.invoice_number.toLowerCase().includes(searchTerm) ||
|
|
invoice.customer_name.toLowerCase().includes(searchTerm);
|
|
if (!matchesSearch) include = false;
|
|
}
|
|
|
|
// Status filter
|
|
if (statusValue && 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;
|
|
|
|
if (start && invoiceDate < start) include = false;
|
|
if (end && invoiceDate > end) include = false;
|
|
}
|
|
|
|
return include;
|
|
});
|
|
|
|
currentPage = 1;
|
|
renderTable();
|
|
updatePaginationControls();
|
|
}
|
|
|
|
// 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);
|
|
|
|
// Also trigger search on Enter key in search input
|
|
searchInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
filterInvoices();
|
|
}
|
|
});
|
|
|
|
// Pagination Functions
|
|
function goToPreviousPage() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
renderTable();
|
|
updatePaginationControls();
|
|
}
|
|
}
|
|
|
|
function goToNextPage() {
|
|
const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
renderTable();
|
|
updatePaginationControls();
|
|
}
|
|
}
|
|
|
|
function updatePaginationControls() {
|
|
const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
|
|
const prevBtn = document.getElementById('prevPageBtn');
|
|
const nextBtn = document.getElementById('nextPageBtn');
|
|
const pageInfo = document.getElementById('pageInfo');
|
|
const paginationPages = document.getElementById('paginationPages');
|
|
|
|
prevBtn.disabled = currentPage === 1;
|
|
nextBtn.disabled = currentPage === totalPages || totalPages === 0;
|
|
|
|
// Update page info text
|
|
const startIndex = (currentPage - 1) * itemsPerPage + 1;
|
|
const endIndex = Math.min(currentPage * itemsPerPage, filteredInvoices.length);
|
|
pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredInvoices.length} entries`;
|
|
|
|
// Generate page numbers
|
|
paginationPages.innerHTML = '';
|
|
|
|
if (totalPages <= 7) {
|
|
// Show all pages
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
addPageButton(i, paginationPages);
|
|
}
|
|
} else {
|
|
// Show first page, current page range, and last page
|
|
addPageButton(1, paginationPages);
|
|
|
|
if (currentPage > 3) {
|
|
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
|
|
}
|
|
|
|
const start = Math.max(2, currentPage - 1);
|
|
const end = Math.min(totalPages - 1, currentPage + 1);
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
addPageButton(i, paginationPages);
|
|
}
|
|
|
|
if (currentPage < totalPages - 2) {
|
|
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
|
|
}
|
|
|
|
addPageButton(totalPages, paginationPages);
|
|
}
|
|
}
|
|
|
|
function addPageButton(pageNumber, container) {
|
|
const button = document.createElement('button');
|
|
button.className = 'pagination-page-btn';
|
|
if (pageNumber === currentPage) {
|
|
button.classList.add('active');
|
|
}
|
|
button.textContent = pageNumber;
|
|
button.addEventListener('click', () => {
|
|
currentPage = pageNumber;
|
|
renderTable();
|
|
updatePaginationControls();
|
|
});
|
|
container.appendChild(button);
|
|
}
|
|
|
|
// Render Table Function
|
|
function renderTable() {
|
|
const tbody = document.getElementById('invoicesTableBody');
|
|
const mobileContainer = document.getElementById('mobileInvoicesContainer');
|
|
|
|
if (filteredInvoices.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="10" class="text-muted">No invoices found</td></tr>';
|
|
mobileContainer.innerHTML = '<div class="text-muted text-center py-4">No invoices found</div>';
|
|
return;
|
|
}
|
|
|
|
// Calculate pagination
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const paginatedItems = filteredInvoices.slice(startIndex, endIndex);
|
|
|
|
// Sort by creation date (newest first)
|
|
const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
|
|
|
// Render desktop table
|
|
tbody.innerHTML = '';
|
|
sortedItems.forEach((invoice, index) => {
|
|
const displayIndex = filteredInvoices.length - (startIndex + index);
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${displayIndex}</td>
|
|
<td>
|
|
<div class="invoice-number-cell">
|
|
<div class="invoice-icon invoice-icon-${(displayIndex % 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="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>
|
|
<td>
|
|
<span class="badge badge-${invoice.status}">
|
|
${invoice.status === 'paid' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
|
|
${invoice.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
|
|
${invoice.status === 'overdue' ? '<i class="bi bi-exclamation-triangle-fill status-icon"></i>' : ''}
|
|
${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
|
|
</span>
|
|
</td>
|
|
<td class="date-cell">${invoice.invoice_date}</td>
|
|
<td class="date-cell">${invoice.due_date}</td>
|
|
<td>
|
|
<a href="/admin/invoices/${invoice.id}/edit" class="btn-entry">
|
|
<i class="bi bi-pencil"></i> Entry
|
|
</a>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
|
|
// Render mobile cards
|
|
mobileContainer.innerHTML = '';
|
|
sortedItems.forEach((invoice, index) => {
|
|
const displayIndex = filteredInvoices.length - (startIndex + index);
|
|
const card = document.createElement('div');
|
|
card.className = 'mobile-invoice-card';
|
|
card.setAttribute('data-invoice-id', invoice.id);
|
|
card.innerHTML = `
|
|
<div class="mobile-invoice-header">
|
|
<div class="mobile-invoice-number">
|
|
<div class="mobile-invoice-icon invoice-icon-${(displayIndex % 8) + 1}">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
</div>
|
|
<span class="mobile-invoice-number-text">${invoice.invoice_number}</span>
|
|
</div>
|
|
<span class="badge badge-${invoice.status} mobile-invoice-status">
|
|
${invoice.status === 'paid' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
|
|
${invoice.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
|
|
${invoice.status === 'overdue' ? '<i class="bi bi-exclamation-triangle-fill status-icon"></i>' : ''}
|
|
${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
|
|
</span>
|
|
</div>
|
|
<div class="mobile-invoice-details">
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Customer</span>
|
|
<span class="mobile-detail-value">${invoice.customer_name}</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>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">GST</span>
|
|
<span class="mobile-detail-value">${invoice.gst_percent}%</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Total</span>
|
|
<span class="mobile-detail-value">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Invoice Date</span>
|
|
<span class="mobile-detail-value">${invoice.invoice_date}</span>
|
|
</div>
|
|
<div class="mobile-detail-item">
|
|
<span class="mobile-detail-label">Due Date</span>
|
|
<span class="mobile-detail-value">${invoice.due_date}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-invoice-actions">
|
|
<a href="#" class="mobile-action-btn view open-invoice-popup" data-id="${invoice.id}">
|
|
<i class="bi bi-eye"></i> View
|
|
</a>
|
|
<a href="/admin/invoices/${invoice.id}/edit" class="mobile-action-btn entry">
|
|
<i class="bi bi-pencil"></i> Entry
|
|
</a>
|
|
</div>
|
|
`;
|
|
mobileContainer.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// Add hover effects to table rows
|
|
document.addEventListener('mouseover', function(e) {
|
|
if (e.target.closest('tr')) {
|
|
const row = e.target.closest('tr');
|
|
if (row.parentElement.tagName === 'TBODY') {
|
|
row.style.cursor = 'pointer';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection |