Card Changes for New Dashboard

frontend/components/displayIncomeAndExpenditure.vue

@@ -5,7 +5,15 @@ import { Line } from "vue-chartjs";
 
 dayjs.extend(customParseFormat)
 
+const props = defineProps({
+  headerTarget: {
+    type: String,
+    default: ""
+  }
+})
+
 const tempStore = useTempStore()
+const isMounted = ref(false)
 
 const amountMode = ref("net")
 const granularity = ref("year")
@@ -218,12 +226,65 @@ const chartOptions = ref({
   maintainAspectRatio: false,
 })
 
+const showHeaderControls = computed(() => isMounted.value && !!props.headerTarget)
+const showInlineControls = computed(() => !showHeaderControls.value)
+
+onMounted(() => {
+  isMounted.value = true
+})
+
 loadData()
 </script>
 
 <template>
   <div class="h-full flex flex-col gap-2">
-    <div class="flex flex-wrap items-center justify-between gap-2">
+    <Teleport v-if="showHeaderControls" :to="props.headerTarget">
+      <div class="flex flex-wrap items-center justify-end gap-2">
+        <div class="flex flex-wrap items-center gap-2">
+          <USelectMenu
+            v-model="granularity"
+            :options="granularityOptions"
+            value-attribute="value"
+            option-attribute="label"
+            class="w-28"
+          />
+
+          <USelectMenu
+            v-model="selectedYear"
+            :options="yearOptions"
+            value-attribute="value"
+            option-attribute="label"
+            class="w-24"
+          />
+
+          <USelectMenu
+            v-if="granularity === 'month'"
+            v-model="selectedMonth"
+            :options="monthOptions"
+            value-attribute="value"
+            option-attribute="label"
+            class="w-36"
+          />
+        </div>
+
+        <UButtonGroup size="xs">
+          <UButton
+            :variant="amountMode === 'net' ? 'solid' : 'outline'"
+            @click="amountMode = 'net'"
+          >
+            Netto
+          </UButton>
+          <UButton
+            :variant="amountMode === 'gross' ? 'solid' : 'outline'"
+            @click="amountMode = 'gross'"
+          >
+            Brutto
+          </UButton>
+        </UButtonGroup>
+      </div>
+    </Teleport>
+
+    <div v-if="showInlineControls" class="flex flex-wrap items-center justify-between gap-2">
       <div class="flex flex-wrap items-center gap-2">
         <USelectMenu
           v-model="granularity"

frontend/components/displayOpenTasks.vue

@@ -4,11 +4,15 @@ const openTasks = ref([])
 const router = useRouter()
 const auth = useAuthStore()
 
+function isCompletedTask(task) {
+  return ["Abgeschlossen", "Erledigt"].includes(String(task?.categorie || "").trim())
+}
+
 const setupPage = async () => {
   openTasks.value = (await useEntities("tasks").select()).filter((task) => {
     const assignee = task.userId || task.user_id || task.profile
     const currentUser = auth.user?.user_id || auth.user?.id
-    return !task.archived && assignee === currentUser
+    return !task.archived && !isCompletedTask(task) && assignee === currentUser
   })
 }