Skip to content

M
MBetterd
Commit ac3a9c46 authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Update reports page layout: cards in single row, 3-column filter form with conditional date inputs 

- Change summary cards to display in single horizontal row using responsive grid (col-12 col-md-6 col-lg-3)
- Add h-100 class to ensure equal card heights
- Reorganize filter form into 3-column layout (Client, Date Range, Sort By)
- Move time filters to always-visible section (works with all date range options)
- Show custom date range inputs only when 'Custom' date range is selected
- Add JavaScript to toggle custom date range visibility based on selection
- Move action buttons to bottom-right of form with Reset and Apply buttons
- Add resetFilters() function to clear all filters
- Add me-2 and text-end CSS utility classes
parent e6c0e63d
Show whitespace changes
Inline Side-by-side
Showing with 73 additions and 38 deletions
app/templates/base.html
View file @ ac3a9c46
...@@ -309,6 +309,15 @@ ...@@ -309,6 +309,15 @@
.collapsed .fa-chevron-down { .collapsed .fa-chevron-down {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.h-100 {
height: 100%;
}
.me-2 {
margin-right: 0.5rem;
}
.text-end {
text-align: right;
}
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
</style> </style>
</head> </head>
......
app/templates/main/reports.html
View file @ ac3a9c46
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col-md-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="card bg-gradient-primary text-white mb-3 shadow-sm border-0"> <div class="card bg-gradient-primary text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="card bg-gradient-info text-white mb-3 shadow-sm border-0"> <div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="card {% if totals.total_balance >= 0 %}bg-gradient-success{% else %}bg-gradient-danger{% endif %} text-white mb-3 shadow-sm border-0"> <div class="card {% if totals.total_balance >= 0 %}bg-gradient-success{% else %}bg-gradient-danger{% endif %} text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
...@@ -73,8 +73,8 @@ ...@@ -73,8 +73,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0"> <div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0 h-100">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
...@@ -106,9 +106,9 @@ ...@@ -106,9 +106,9 @@
<div class="collapse show" id="filterCollapse"> <div class="collapse show" id="filterCollapse">
<div class="card-body"> <div class="card-body">
<form method="GET" action="{{ url_for('main.reports') }}"> <form method="GET" action="{{ url_for('main.reports') }}">
<!-- Client Selection --> <div class="row">
<div class="row mb-3"> <!-- Column 1: Client Selection -->
<div class="col-12"> <div class="col-md-4 mb-3">
<label for="client_id" class="form-label fw-semibold"> <label for="client_id" class="form-label fw-semibold">
<i class="fas fa-user me-1"></i> Client <i class="fas fa-user me-1"></i> Client
</label> </label>
...@@ -119,11 +119,9 @@ ...@@ -119,11 +119,9 @@
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
</div>
<!-- Date Range Selection --> <!-- Column 2: Date Range Selection -->
<div class="row mb-3"> <div class="col-md-4 mb-3">
<div class="col-md-6">
<label for="date_range" class="form-label fw-semibold"> <label for="date_range" class="form-label fw-semibold">
<i class="fas fa-calendar me-1"></i> Date Range <i class="fas fa-calendar me-1"></i> Date Range
</label> </label>
...@@ -137,7 +135,9 @@ ...@@ -137,7 +135,9 @@
<option value="custom" {% if filters.date_range == 'custom' %}selected{% endif %}>Custom</option> <option value="custom" {% if filters.date_range == 'custom' %}selected{% endif %}>Custom</option>
</select> </select>
</div> </div>
<div class="col-md-6">
<!-- Column 3: Sort By -->
<div class="col-md-4 mb-3">
<label for="sort_by" class="form-label fw-semibold"> <label for="sort_by" class="form-label fw-semibold">
<i class="fas fa-sort me-1"></i> Sort By <i class="fas fa-sort me-1"></i> Sort By
</label> </label>
...@@ -154,39 +154,47 @@ ...@@ -154,39 +154,47 @@
</div> </div>
</div> </div>
<!-- Custom Date Range --> <!-- Time Filters (Always Visible) -->
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label fw-semibold"> <label for="start_time" class="form-label fw-semibold">
<i class="fas fa-play me-1"></i> Start <i class="fas fa-clock me-1"></i> Start Time
</label> </label>
<div class="input-group">
<input type="date" class="form-control" id="start_date" name="start_date" value="{{ filters.start_date }}">
<input type="time" class="form-control" id="start_time" name="start_time" value="{{ filters.start_time }}"> <input type="time" class="form-control" id="start_time" name="start_time" value="{{ filters.start_time }}">
</div> </div>
</div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label fw-semibold"> <label for="end_time" class="form-label fw-semibold">
<i class="fas fa-stop me-1"></i> End <i class="fas fa-clock me-1"></i> End Time
</label> </label>
<div class="input-group">
<input type="date" class="form-control" id="end_date" name="end_date" value="{{ filters.end_date }}">
<input type="time" class="form-control" id="end_time" name="end_time" value="{{ filters.end_time }}"> <input type="time" class="form-control" id="end_time" name="end_time" value="{{ filters.end_time }}">
</div> </div>
</div> </div>
<!-- Custom Date Range (Only visible when Custom is selected) -->
<div class="row mb-3" id="customDateRange" style="display: {% if filters.date_range == 'custom' %}block{% else %}none{% endif %};">
<div class="col-md-6">
<label for="start_date" class="form-label fw-semibold">
<i class="fas fa-play me-1"></i> Start Date
</label>
<input type="date" class="form-control" id="start_date" name="start_date" value="{{ filters.start_date }}">
</div>
<div class="col-md-6">
<label for="end_date" class="form-label fw-semibold">
<i class="fas fa-stop me-1"></i> End Date
</label>
<input type="date" class="form-control" id="end_date" name="end_date" value="{{ filters.end_date }}">
</div>
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12 text-end">
<div class="d-flex gap-2"> <button type="button" class="btn btn-outline-secondary me-2" onclick="resetFilters()">
<button type="submit" class="btn btn-primary flex-grow-1"> <i class="fas fa-undo me-1"></i> Reset Filters
</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-search me-1"></i> Apply Filters <i class="fas fa-search me-1"></i> Apply Filters
</button> </button>
<a href="{{ url_for('main.reports') }}" class="btn btn-outline-secondary">
<i class="fas fa-times me-1"></i> Clear
</a>
</div>
</div> </div>
</div> </div>
</form> </form>
...@@ -291,7 +299,10 @@ ...@@ -291,7 +299,10 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const filterCollapse = document.getElementById('filterCollapse'); const filterCollapse = document.getElementById('filterCollapse');
const filterIcon = document.getElementById('filterIcon'); const filterIcon = document.getElementById('filterIcon');
const dateRangeSelect = document.getElementById('date_range');
const customDateRange = document.getElementById('customDateRange');
// Handle collapsible filter animation
if (filterCollapse && filterIcon) { if (filterCollapse && filterIcon) {
filterCollapse.addEventListener('show.bs.collapse', function() { filterCollapse.addEventListener('show.bs.collapse', function() {
filterIcon.classList.remove('fa-chevron-up'); filterIcon.classList.remove('fa-chevron-up');
...@@ -303,7 +314,22 @@ document.addEventListener('DOMContentLoaded', function() { ...@@ -303,7 +314,22 @@ document.addEventListener('DOMContentLoaded', function() {
filterIcon.classList.add('fa-chevron-up'); filterIcon.classList.add('fa-chevron-up');
}); });
} }
// Handle date range selection - show/hide custom date inputs
if (dateRangeSelect && customDateRange) {
dateRangeSelect.addEventListener('change', function() {
if (this.value === 'custom') {
customDateRange.style.display = 'block';
} else {
customDateRange.style.display = 'none';
}
});
}
}); });
function resetFilters() {
window.location.href = "{{ url_for('main.reports') }}";
}
</script> </script>
{% endblock %} {% endblock %}
{% endblock %} {% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment