From 37c3ffa8998c502894e8650e077abd694277fd8e Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 22 Apr 2026 09:52:35 +0200
Subject: [PATCH] feat(OrdersPanel): add completion state filter for order
 management

- Introduced a new dropdown filter for order completion states (paid, handed_over) in the OrdersPanel component.
- Updated the filtering logic to include completion state checks when loading orders.
- Added corresponding German localization for the new filter options to enhance user experience.
---
 frontend/src/components/OrdersPanel.vue | 34 +++++++++++++++++++++++++
 frontend/src/i18n/locales/de.json       |  4 +++
 2 files changed, 38 insertions(+)

diff --git a/frontend/src/components/OrdersPanel.vue b/frontend/src/components/OrdersPanel.vue
index 1eba51cd..990def34 100644
--- a/frontend/src/components/OrdersPanel.vue
+++ b/frontend/src/components/OrdersPanel.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="orders-panel">
         <div class="orders-toolbar" :class="{ 'orders-toolbar-global': globalMode }">
+            <label class="orders-toggle">
+                <input v-model="showCompleted" type="checkbox">
+                <span>{{ $t('orders.showCompleted') }}</span>
+            </label>
             <div v-if="globalMode" class="orders-filters">
                 <input
                     v-model="searchQuery"
@@ -20,6 +24,11 @@
                         {{ club.name }}
                     </option>
                 </select>
+                <select v-model="completionFilter">
+                    <option value="">{{ $t('orders.filterAllCompletionStates') }}</option>
+                    <option value="paid">{{ $t('orders.filterPaid') }}</option>
+                    <option value="handed_over">{{ $t('orders.filterHandedOver') }}</option>
+                </select>
             </div>
             <button type="button" class="btn-secondary" :disabled="loading" @click="loadOrders">
                 {{ $t('common.refresh') }}
@@ -193,6 +202,8 @@ export default {
             searchQuery: '',
             statusFilter: '',
             clubFilter: '',
+            completionFilter: '',
+            showCompleted: false,
             newOrder: {
                 item: '',
                 status: 'requested',
@@ -226,6 +237,21 @@ export default {
                 if (this.clubFilter && String(order.clubId) !== String(this.clubFilter)) {
                     return false;
                 }
+                const cost = normalizeAmount(order.cost);
+                const paidAmount = normalizeAmount(order.paidAmount);
+                const openAmount = Math.max(0, Number((cost - paidAmount).toFixed(2)));
+                const isPaid = cost > 0 && openAmount <= 0;
+                const isHandedOver = order.status === 'handed_over';
+                const isCompleted = isPaid || isHandedOver;
+                if (!this.showCompleted && isCompleted) {
+                    return false;
+                }
+                if (this.completionFilter === 'paid' && !isPaid) {
+                    return false;
+                }
+                if (this.completionFilter === 'handed_over' && !isHandedOver) {
+                    return false;
+                }
                 if (!this.searchQuery.trim()) {
                     return true;
                 }
@@ -400,6 +426,14 @@ export default {
     flex-wrap: wrap;
 }
 
+.orders-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
 .orders-filters {
     justify-content: flex-start;
     flex: 1;
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
index 710a83dc..dad8cabf 100644
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -448,6 +448,10 @@
     "searchPlaceholder": "Nach Verein, Mitglied oder Artikel suchen",
     "filterAllStatuses": "Alle Status",
     "filterAllClubs": "Alle Vereine",
+    "filterAllCompletionStates": "Alle Abschlüsse",
+    "filterPaid": "Hat bezahlt",
+    "filterHandedOver": "Artikel ausgehändigt",
+    "showCompleted": "Abgeschlossene einblenden",
     "item": "Was",
     "itemPlaceholder": "z. B. Trikot, Hoodie oder Schlägerhülle",
     "status": "Status",