Add date range filtering to transaction logs
Introduces a date filter section with quick-select buttons (last 7 days, last 30 days, this month), clear filter, and active filter badge to the transaction logs component. Implements debounced search, date range validation, and updates export to include date filters. Enhances UI/UX with new SCSS styles and adds relevant i18n keys for both English and Arabic.mazdak/UX-2367
Naeem Ullah
5 days ago
parent
0929acd502
commit
9821ed4d9e
@ -1,125 +1,139 @@
|
|||||||
:host {
|
// Date filter section
|
||||||
display: block;
|
.date-filter-section {
|
||||||
}
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.card-header {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
.date-input-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 200px;
|
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
padding-left: 2.5rem;
|
padding-right: 2.5rem;
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.date-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1rem;
|
right: 0.75rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.quick-filter-btn {
|
||||||
|
&.active {
|
||||||
|
background-color: var(--bs-primary);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--bs-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table styling
|
||||||
|
.table-responsive {
|
||||||
|
min-height: 400px;
|
||||||
|
|
||||||
|
table {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background-color: #f8f9fa;
|
|
||||||
border-bottom: 2px solid #dee2e6;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
background-color: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group-sm > .btn {
|
code {
|
||||||
padding: 0.25rem 0.5rem;
|
font-size: 0.75rem;
|
||||||
font-size: 0.875rem;
|
background-color: #f8f9fa;
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
font-size: 0.75em;
|
font-size: 0.7rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-info {
|
|
||||||
background-color: #e7f3ff;
|
|
||||||
border-color: #b3d7ff;
|
|
||||||
color: #004085;
|
|
||||||
|
|
||||||
.btn-close {
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Loading spinner
|
||||||
.spinner-border {
|
.spinner-border {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsive adjustments
|
// Search box
|
||||||
@media (max-width: 768px) {
|
|
||||||
.card-header .d-flex {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch !important;
|
|
||||||
gap: 0.75rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
min-width: 100%;
|
position: relative;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.75rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #6c757d;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-responsive {
|
.form-control {
|
||||||
font-size: 0.875rem;
|
padding-right: 2.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.d-flex.justify-content-between {
|
// Active filter badge
|
||||||
flex-direction: column;
|
.active-filter-badge {
|
||||||
gap: 1rem;
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
> div {
|
@keyframes fadeIn {
|
||||||
width: 100%;
|
from {
|
||||||
justify-content: center !important;
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Mobile responsive adjustments
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.date-filter-section {
|
||||||
.btn-group {
|
.btn-group {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.375rem 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loading overlay
|
.table-responsive {
|
||||||
.text-center.py-5 {
|
overflow-x: auto;
|
||||||
min-height: 200px;
|
|
||||||
display: flex;
|
table {
|
||||||
flex-direction: column;
|
min-width: 1200px;
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hover effects
|
.search-box {
|
||||||
.table-hover tbody tr:hover {
|
min-width: 150px;
|
||||||
background-color: rgba(0, 123, 255, 0.05);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Date filter styles
|
// Dark mode support (if needed)
|
||||||
.form-control-sm {
|
[data-bs-theme="dark"] {
|
||||||
min-width: 120px;
|
.table-light {
|
||||||
|
background-color: #2d333b !important;
|
||||||
|
color: #adb5bd;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active state for filter buttons
|
.search-box .search-icon {
|
||||||
.btn-outline-primary.active {
|
color: #adb5bd;
|
||||||
background-color: #0d6efd;
|
}
|
||||||
color: white;
|
|
||||||
border-color: #0d6efd;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue