From 7f6ba993281f46851733630f097a219456408035 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sat, 10 Jan 2026 18:00:12 +0100
Subject: [PATCH] =?UTF-8?q?Added=20Schnellauswahl=20f=C3=BCr=20die=20Expor?=
 =?UTF-8?q?te?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/pages/export/index.vue | 176 ++++++++++++++++++++------------
 1 file changed, 113 insertions(+), 63 deletions(-)

diff --git a/frontend/pages/export/index.vue b/frontend/pages/export/index.vue
index b1c99e8..b948eba 100644
--- a/frontend/pages/export/index.vue
+++ b/frontend/pages/export/index.vue
@@ -1,5 +1,42 @@
 <script setup lang="ts">
 import dayjs from "dayjs"
+
+// --- Helper für Schnellauswahl ---
+
+// Setzt ein spezifisches Quartal (Q1-Q4), optional mit Jahresangabe
+const setQuarter = (quarter: number, year: number = dayjs().year()) => {
+  const startMonth = (quarter - 1) * 3 // Q1=0 (Jan), Q2=3 (Apr), etc.
+
+  // .toDate() ist wichtig für den DatePicker
+  createExportData.value.start_date = dayjs().year(year).month(startMonth).startOf('month').toDate()
+  createExportData.value.end_date = dayjs().year(year).month(startMonth + 2).endOf('month').toDate()
+}
+
+// Berechnet automatisch das vorherige Quartal (inkl. Jahreswechsel, falls wir in Q1 sind)
+const setLastQuarter = () => {
+  const currentMonth = dayjs().month() // 0 bis 11
+  const currentQuarter = Math.floor(currentMonth / 3) + 1 // 1 bis 4
+
+  if (currentQuarter === 1) {
+    // Wenn wir in Q1 sind, ist das letzte Quartal Q4 des Vorjahres
+    setQuarter(4, dayjs().year() - 1)
+  } else {
+    // Sonst einfach das vorherige Quartal im aktuellen Jahr
+    setQuarter(currentQuarter - 1)
+  }
+}
+
+const setMonthPreset = (type: 'current' | 'last') => {
+  let date = dayjs()
+  if (type === 'last') {
+    date = date.subtract(1, 'month')
+  }
+
+  createExportData.value.start_date = date.startOf('month').toDate()
+  createExportData.value.end_date = date.endOf('month').toDate()
+}
+// ---------------------------------
+
 const exports = ref([])
 
 const auth = useAuthStore()
@@ -46,8 +83,6 @@ const createExport = async () => {
   }
 
 }
-
-
 </script>
 
 <template>
@@ -63,28 +98,16 @@ const createExport = async () => {
       >+ SEPA</UButton>
     </template>
   </UDashboardNavbar>
+
   <UTable
       :rows="exports"
       :columns="[
-        {
-          key: 'created_at',
-          label: 'Erstellt am',
-        },{
-          key: 'start_date',
-          label: 'Start',
-        },{
-          key: 'end_date',
-          label: 'Ende',
-        },{
-          key: 'valid_until',
-          label: 'Gültig bis',
-        },{
-          key: 'type',
-          label: 'Typ',
-        },{
-          key: 'download',
-          label: 'Download',
-        },
+        { key: 'created_at', label: 'Erstellt am' },
+        { key: 'start_date', label: 'Start' },
+        { key: 'end_date', label: 'Ende' },
+        { key: 'valid_until', label: 'Gültig bis' },
+        { key: 'type', label: 'Typ' },
+        { key: 'download', label: 'Download' },
     ]"
   >
     <template #created_at-data="{row}">
@@ -100,11 +123,7 @@ const createExport = async () => {
       {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
     </template>
     <template #download-data="{row}">
-      <UButton
-          @click="downloadFile(row)"
-      >
-        Download
-      </UButton>
+      <UButton @click="downloadFile(row)">Download</UButton>
     </template>
   </UTable>
 
@@ -114,46 +133,78 @@ const createExport = async () => {
         Export erstellen
       </template>
 
-      <UFormGroup
-          label="Start:"
-      >
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton
-              icon="i-heroicons-calendar-days-20-solid"
-              :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
-              variant="outline"
-              class="mx-auto"
-          />
+      <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
+        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
 
-          <template #panel="{ close }">
-            <LazyDatePicker v-model="createExportData.start_date" @close="close" />
-          </template>
-        </UPopover>
-      </UFormGroup>
+        <div class="flex flex-col gap-3">
+          <div class="flex gap-2 items-center">
+            <span class="text-xs text-gray-400 w-16">Monat:</span>
+            <UButton size="2xs" color="white" variant="solid" @click="setMonthPreset('last')">Letzter</UButton>
+            <UButton size="2xs" color="white" variant="solid" @click="setMonthPreset('current')">Aktuell</UButton>
+          </div>
 
-      <UFormGroup
-          label="Ende:"
-      >
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton
-              icon="i-heroicons-calendar-days-20-solid"
-              :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
-              variant="outline"
-              class="mx-auto"
-          />
+          <div class="flex gap-2 items-center">
+            <span class="text-xs text-gray-400 w-16">Quartal:</span>
 
-          <template #panel="{ close }">
-            <LazyDatePicker v-model="createExportData.end_date" @close="close" />
-          </template>
-        </UPopover>
-      </UFormGroup>
+            <UButton
+                size="2xs"
+                color="white"
+                variant="solid"
+                @click="setLastQuarter()"
+                class="mr-2 border-r border-gray-200 dark:border-gray-600 pr-3"
+            >
+              Letztes
+            </UButton>
+
+            <UButton
+                v-for="q in 4"
+                :key="q"
+                size="2xs"
+                color="white"
+                variant="solid"
+                @click="setQuarter(q)"
+            >
+              Q{{ q }}
+            </UButton>
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-4">
+        <UFormGroup label="Start:" class="flex-1">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+                class="w-full justify-start"
+            />
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="createExportData.start_date" @close="close" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+
+        <UFormGroup label="Ende:" class="flex-1">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+                class="w-full justify-start"
+            />
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="createExportData.end_date" @close="close" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+      </div>
 
       <template #footer>
-        <UButton
-            @click="createExport"
-        >
-          Erstellen
-        </UButton>
+        <div class="flex justify-end">
+          <UButton @click="createExport">
+            Erstellen
+          </UButton>
+        </div>
       </template>
 
     </UCard>
@@ -162,5 +213,4 @@ const createExport = async () => {
 </template>
 
 <style scoped>
-
-</style>
+</style>
\ No newline at end of file