diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue index 5a43a07..71f45b3 100644 --- a/frontend/src/views/Admin.vue +++ b/frontend/src/views/Admin.vue @@ -28,7 +28,44 @@ {{ loading ? '🔄' : '🔄' }} - + + +
+
Filter op status:
+
+ + + + + +
+
+
ID
@@ -41,12 +78,12 @@
Aanvragen laden...
- -
-
Geen service aanvragen gevonden
+ +
+
Geen service aanvragen gevonden met de geselecteerde filters
- -
+ +
{{ request.id }}
{{ request.name }}
{{ formatDateTime(request.requested_date, request.requested_time) }}
@@ -520,6 +557,15 @@ export default { const settings = ref({}) const pricelist = ref([]) const pageContent = ref([]) + + // Status filter state + const statusFilters = ref({ + pending: true, + confirmed: true, + mail_sent: true, + completed: true, + cancelled: true + }) // Modal states const showRequestModal = ref(false) @@ -559,6 +605,13 @@ export default { tomorrow.setDate(tomorrow.getDate() + 1) return tomorrow.toISOString().split('T')[0] }) + + // Filtered requests based on status checkboxes + const filteredRequests = computed(() => { + return requests.value.filter(request => { + return statusFilters.value[request.status] === true + }) + }) // Helper functions for Dutch text const getStatusText = (status) => { @@ -1104,6 +1157,8 @@ export default { tabs, loading, requests, + filteredRequests, + statusFilters, blockedDates, settings, pricelist, @@ -1267,6 +1322,62 @@ export default { margin: 0; } +/* Status Filter Styles */ +.status-filter { + background: #f8f9fa; + padding: 1rem; + border-radius: 10px; + margin-bottom: 1.5rem; + border: 2px solid #e1e8ed; +} + +.filter-title { + font-weight: bold; + color: #2c3e50; + margin-bottom: 0.75rem; + font-size: 0.95rem; +} + +.filter-checkboxes { + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; +} + +.filter-checkbox { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + padding: 0.5rem; + border-radius: 8px; + transition: background-color 0.3s ease; +} + +.filter-checkbox:hover { + background: white; +} + +.filter-checkbox input[type="checkbox"] { + width: 18px; + height: 18px; + cursor: pointer; + accent-color: var(--primary-color); +} + +.checkbox-label { + display: flex; + align-items: center; + user-select: none; +} + +.filter-checkbox .status-badge { + font-size: 0.85rem; + padding: 0.4rem 0.8rem; + cursor: pointer; +} + .refresh-btn, .add-btn { background: var(--primary-color); color: white;