Filter table

frontend/src/views/Admin.vue

@@ -28,7 +28,44 @@
           {{ loading ? '🔄' : '🔄' }}
         </button>
       </div>
-      
+
+      <!-- Status Filter -->
+      <div class="status-filter">
+        <div class="filter-title">Filter op status:</div>
+        <div class="filter-checkboxes">
+          <label class="filter-checkbox">
+            <input type="checkbox" v-model="statusFilters.pending" />
+            <span class="checkbox-label">
+              <span :class="['status-badge', 'pending']">{{ getStatusText('pending') }}</span>
+            </span>
+          </label>
+          <label class="filter-checkbox">
+            <input type="checkbox" v-model="statusFilters.confirmed" />
+            <span class="checkbox-label">
+              <span :class="['status-badge', 'confirmed']">{{ getStatusText('confirmed') }}</span>
+            </span>
+          </label>
+          <label class="filter-checkbox">
+            <input type="checkbox" v-model="statusFilters.mail_sent" />
+            <span class="checkbox-label">
+              <span :class="['status-badge', 'mail_sent']">{{ getStatusText('mail_sent') }}</span>
+            </span>
+          </label>
+          <label class="filter-checkbox">
+            <input type="checkbox" v-model="statusFilters.completed" />
+            <span class="checkbox-label">
+              <span :class="['status-badge', 'completed']">{{ getStatusText('completed') }}</span>
+            </span>
+          </label>
+          <label class="filter-checkbox">
+            <input type="checkbox" v-model="statusFilters.cancelled" />
+            <span class="checkbox-label">
+              <span :class="['status-badge', 'cancelled']">{{ getStatusText('cancelled') }}</span>
+            </span>
+          </label>
+        </div>
+      </div>
+
       <div class="requests-table">
         <div class="table-header">
           <div class="header-cell">ID</div>
@@ -41,12 +78,12 @@
         <div v-if="loading" class="loading-row">
           <div class="loading-text">Aanvragen laden...</div>
         </div>
-        
-        <div v-else-if="requests.length === 0" class="empty-row">
-          <div class="empty-text">Geen service aanvragen gevonden</div>
+
+        <div v-else-if="filteredRequests.length === 0" class="empty-row">
+          <div class="empty-text">Geen service aanvragen gevonden met de geselecteerde filters</div>
         </div>
-        
-        <div v-else class="table-row" v-for="request in requests" :key="request.id">
+
+        <div v-else class="table-row" v-for="request in filteredRequests" :key="request.id">
           <div class="cell">{{ request.id }}</div>
           <div class="cell">{{ request.name }}</div>
           <div class="cell">{{ formatDateTime(request.requested_date, request.requested_time) }}</div>
@@ -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;