feat: add account filters

app/Domains/Transaction/Services/TransactionService.php

@@ -223,8 +223,8 @@ public function getNetWorthMonth($teamId, $endDate)
     public static function getNetWorth($teamId, $startDate, $endDate)
     {
         return DB::select("
-         with data (month_date, total, type, balance_type, detail_type) AS (
-            SELECT LAST_DAY(tl.date) as month_date, tl.amount * tl.type, tl.type, accounts.balance_type, adt.name
+         with data (date_unit, total, type, balance_type, detail_type) AS (
+            SELECT LAST_DAY(tl.date) as date_unit, tl.amount * tl.type, tl.type, accounts.balance_type, adt.name
             FROM transaction_lines tl
             INNER JOIN transactions t on tl.transaction_id = t.id
             INNER JOIN accounts on tl.account_id = accounts.id
@@ -234,12 +234,12 @@ public static function getNetWorth($teamId, $startDate, $endDate)
             AND tl.team_id = :teamId
             AND balance_type IS NOT null
          )
-          SELECT month_date,
-          SUM(SUM(CASE WHEN balance_type = 'debit' THEN total ELSE 0 END)) over (ORDER BY month_date) as assets,
-          SUM(SUM(CASE WHEN balance_type = 'credit' THEN total ELSE 0 END)) over (ORDER BY month_date) as debts
+          SELECT date_unit,
+          SUM(SUM(CASE WHEN balance_type = 'debit' THEN total ELSE 0 END)) over (ORDER BY date_unit) as assets,
+          SUM(SUM(CASE WHEN balance_type = 'credit' THEN total ELSE 0 END)) over (ORDER BY date_unit) as debts
           FROM DATA
-          GROUP BY month_date
-          ORDER BY month_date DESC
+          GROUP BY date_unit
+          ORDER BY date_unit DESC
           LIMIT 12;
         ", [
             'teamId' => $teamId,

resources/js/Pages/Finance/Partials/FinanceTemplate.vue

@@ -6,8 +6,6 @@
     import { useImportModal } from '@/domains/transactions/useImportModal';
     import { PANEL_SIZES } from '@/utils/constants';
 
-    const { toggleModal: toggleImportModal } = useImportModal();
-
     const props = defineProps({
         title: {
             type: String
@@ -32,6 +30,9 @@
         },
         forceShowPanel: {
             type: Boolean,
+        },
+        hidePanel: {
+            type: Boolean
         }
     });
 
@@ -53,11 +54,14 @@
 
 <template>
     <article class="relative flex flex-col-reverse w-full pt-16 pb-20 mx-auto md:flex-row md:space-x-2 md:max-w-screen-2xl">
-        <main class="w-full overflow-hidden md:pr-5 md:w-7/12 lg:w-10/12 md:pl-8">
+        <main
+            class="w-full overflow-hidden md:pr-5  md:pl-8"
+            :class="!hidePanel && 'md:w-7/12 lg:w-10/12'"
+        >
             <slot />
         </main>
 
-        <aside class="relative w-full h-screen overflow-auto md:px-2 md:block" :class="panelStyles">
+        <aside class="relative w-full h-screen overflow-auto md:px-2 md:block" :class="panelStyles" v-if="!hidePanel">
             <section class="px-2 md:fixed aside-content md:pr-8">
                 <slot name="prepend-panel" />
                 <slot name="panel">

resources/js/Pages/Finance/Transactions.vue

@@ -22,6 +22,7 @@ import { removeTransaction, useTransactionModal } from "@/domains/transactions";
 import { useServerSearch, IServerSearchData } from "@/composables/useServerSearch";
 import { useAppContextStore } from "@/store";
 import { IAccount, ITransaction } from "@/domains/transactions/models";
+import AccountFilter from "@/domains/transactions/components/AccountFilter.vue";
 
 
 const props = withDefaults(defineProps<{
@@ -154,6 +155,10 @@ const monthName = computed(() => format(pageState.dates.startDate, "MMMM"))
 const listData = computed(() => {
     return transactions.data;
 })
+
+const goToAccount = (accountId: number) => {
+    router.visit(`/finance/accounts/${accountId}`)
+}
 </script>
 
 
@@ -188,7 +193,7 @@ const listData = computed(() => {
     <FinanceTemplate
       title="Transactions"
       :accounts="accounts"
-      :force-show-panel="!showTransactionTable"
+      hide-panel
     >
       <template #prepend-panel v-if="context.isMobile">
         <button
@@ -204,11 +209,10 @@ const listData = computed(() => {
       <main class="mt-4 ">
         <header class="flex bg-base-lvl-3 justify-between px-6 py-2">
             <section>
-                <h4 class="text-lg font-bold text-body-1">
-                    All transactions in <span class="text-secondary">
-                        {{  monthName }}
-                    </span>
-                </h4>
+                <AccountFilter
+                    show-all
+                    @update:model-value="goToAccount"
+                />
             </section>
 
             <section class="flex items-center space-x-2">

resources/js/domains/transactions/components/AccountFilter.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { inject, computed } from "vue";
+
+import { NSelect } from "naive-ui";
+import { IAccount } from "@/domains/transactions/models";
+
+const props = defineProps<{
+    modelValue: IAccount,
+    multiple: boolean;
+}>();
+
+const accountsOptions = inject("accountsOptions", []);
+
+const emit = defineEmits(['update:model-value'])
+
+const selectedAccount = computed({
+    get: () => {
+        return props.modelValue
+    },
+    set: (value: IAccount) => {
+        emit('update:model-value', value)
+    }
+})
+
+</script>
+
+<template>
+    <section class="w-80">
+        <NSelect
+            filterable
+            clearable
+            tag
+            size="large"
+            class="w-full"
+            :multiple="multiple"
+            v-model:value="selectedAccount"
+            :default-expand-all="true"
+            :options="accountsOptions"
+        />
+    </section>
+</template>