Account Section UI Changes
This commit is contained in:
Utkarsh Khedkar
@@ -737,6 +737,139 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding: 12px 25px;
|
||||
border-top: 1px solid #eef3fb;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 13px;
|
||||
color: #9ba5bb;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
color: #1a2951;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.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: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
color: #9ba5bb;
|
||||
font-size: 13px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* Image-based pagination buttons */
|
||||
.pagination-img-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
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: 16px;
|
||||
height: 16px;
|
||||
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 {
|
||||
@@ -835,6 +968,16 @@
|
||||
grid-template-columns: 1fr;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@@ -944,7 +1087,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tbody id="invoicesTableBody">
|
||||
@php
|
||||
$totalInvoices = $invoices->count();
|
||||
$sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
|
||||
@@ -1006,7 +1149,7 @@
|
||||
</div>
|
||||
|
||||
<!-- ALL INVOICES - Mobile Cards -->
|
||||
<div class="mobile-invoices-container">
|
||||
<div class="mobile-invoices-container" id="mobileInvoicesContainer">
|
||||
@php
|
||||
$totalInvoices = $invoices->count();
|
||||
$sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
|
||||
@@ -1073,6 +1216,28 @@
|
||||
<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>
|
||||
@@ -1095,6 +1260,20 @@
|
||||
|
||||
<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')) {
|
||||
@@ -1130,13 +1309,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const statusFilter = document.getElementById('statusFilter');
|
||||
const startDateInput = document.getElementById('startDate');
|
||||
const endDateInput = document.getElementById('endDate');
|
||||
|
||||
// Desktop table elements
|
||||
const table = document.getElementById('invoicesTable');
|
||||
const tableRows = table ? table.getElementsByTagName('tbody')[0].getElementsByTagName('tr') : [];
|
||||
|
||||
// Mobile card elements
|
||||
const mobileCards = document.querySelectorAll('.mobile-invoice-card');
|
||||
|
||||
function filterInvoices() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
@@ -1144,56 +1316,38 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const startDate = startDateInput.value;
|
||||
const endDate = endDateInput.value;
|
||||
|
||||
// Filter desktop table rows
|
||||
for (let row of tableRows) {
|
||||
const cells = row.getElementsByTagName('td');
|
||||
if (cells.length < 9) continue;
|
||||
|
||||
const invoiceNumber = cells[1].textContent.toLowerCase();
|
||||
const customerName = cells[2].textContent.toLowerCase();
|
||||
const status = cells[6].textContent.toLowerCase();
|
||||
const invoiceDate = cells[7].textContent;
|
||||
|
||||
const matchesSearch = invoiceNumber.includes(searchTerm) || customerName.includes(searchTerm);
|
||||
const matchesStatus = !statusValue || status.includes(statusValue);
|
||||
|
||||
// Date filtering
|
||||
let matchesDate = true;
|
||||
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 cellDate = new Date(invoiceDate);
|
||||
const invoiceDate = new Date(invoice.invoice_date);
|
||||
const start = startDate ? new Date(startDate) : null;
|
||||
const end = endDate ? new Date(endDate) : null;
|
||||
|
||||
if (start && cellDate < start) matchesDate = false;
|
||||
if (end && cellDate > end) matchesDate = false;
|
||||
if (start && invoiceDate < start) include = false;
|
||||
if (end && invoiceDate > end) include = false;
|
||||
}
|
||||
|
||||
row.style.display = matchesSearch && matchesStatus && matchesDate ? '' : 'none';
|
||||
}
|
||||
return include;
|
||||
});
|
||||
|
||||
// Filter mobile cards
|
||||
for (let card of mobileCards) {
|
||||
const invoiceNumber = card.querySelector('.mobile-invoice-number-text').textContent.toLowerCase();
|
||||
const customerName = card.querySelector('.mobile-detail-item:nth-child(1) .mobile-detail-value').textContent.toLowerCase();
|
||||
const status = card.querySelector('.badge').textContent.toLowerCase();
|
||||
const invoiceDate = card.querySelector('.mobile-detail-item:nth-child(5) .mobile-detail-value').textContent;
|
||||
|
||||
const matchesSearch = invoiceNumber.includes(searchTerm) || customerName.includes(searchTerm);
|
||||
const matchesStatus = !statusValue || status.includes(statusValue);
|
||||
|
||||
// Date filtering
|
||||
let matchesDate = true;
|
||||
if (startDate || endDate) {
|
||||
const cellDate = new Date(invoiceDate);
|
||||
const start = startDate ? new Date(startDate) : null;
|
||||
const end = endDate ? new Date(endDate) : null;
|
||||
|
||||
if (start && cellDate < start) matchesDate = false;
|
||||
if (end && cellDate > end) matchesDate = false;
|
||||
}
|
||||
|
||||
card.style.display = matchesSearch && matchesStatus && matchesDate ? '' : 'none';
|
||||
}
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
}
|
||||
|
||||
// Add event listeners for filtering
|
||||
@@ -1202,12 +1356,214 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
startDateInput.addEventListener('change', filterInvoices);
|
||||
endDateInput.addEventListener('change', filterInvoices);
|
||||
|
||||
// Add hover effects to table rows
|
||||
for (let row of tableRows) {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.cursor = 'pointer';
|
||||
// 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user