stash

package.json

@@ -40,7 +40,7 @@
         "@vitejs/plugin-vue": "^4.3.1",
         "@vue/server-renderer": "^3.3.4",
         "@vueuse/core": "^10.3.0",
-        "atmosphere-ui": "^1.2.2",
+        "atmosphere-ui": "^1.3.2",
         "autoprefixer": "^10.4.15",
         "axios": "^1.4.0",
         "cypress": "^11.1.0",

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

@@ -44,7 +44,11 @@ const adjustAndFinish = () => {
 
 const differenceStateText = computed(() => {
 
-    return (account.reconciliation_last?.difference || 0) < (account.reconciliation_last?.amount ?? 0) ? 'higher' : 'lower'
+    return (account.balance || 0) > (account.reconciliation_last?.amount ?? 0) ? 'higher' : 'lower'
+})
+const differenceAmount = computed(() => {
+
+    return account.reconciliation_last?.amount - account.balance
 })
 
 const hasPendingReconciliation = computed(() => {
@@ -61,7 +65,7 @@ const hasPendingReconciliation = computed(() => {
             <AccountReconciliationAlert class="mr-2 text-white" />
             <p v-if="!isMatched">
                 This account's cleared balance in
-                <strong>Loger</strong> is {{ formatMoney(account.reconciliation_last.difference) }} {{ differenceStateText }} than your
+                <strong>Loger</strong> is {{ formatMoney(differenceAmount) }}  {{ differenceStateText }} than your
                 <strong>
                     bank account.
                 </strong>

resources/js/Pages/Finance/Reconciliation/Show.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, toRefs, provide, ref, onMounted, nextTick } from "vue";
 import { router, useForm } from "@inertiajs/vue3";
-import { AtBackgroundIconCard, AtField, AtButton } from "atmosphere-ui";
+import { AtBackgroundIconCard, AtField } from "atmosphere-ui";
 
 import AppLayout from "@/Components/templates/AppLayout.vue";
 
@@ -10,14 +10,11 @@ import LogerInput from "@/Components/atoms/LogerInput.vue";
 
 import FinanceTemplate from "../Partials/FinanceTemplate.vue";
 import FinanceSectionNav from "../Partials/FinanceSectionNav.vue";
-import TransactionSearch from "@/domains/transactions/components/TransactionSearch.vue";
-import TransactionTable from "@/domains/transactions/components/TransactionTable.vue";
 import ReconciliationTable from "@/domains/transactions/components/ReconciliationTable.vue";
 
 import { useTransactionModal } from "@/domains/transactions";
 import { IServerSearchData, useServerSearch } from "@/composables/useServerSearchV2";
 import { tableAccountCols } from "@/domains/transactions";
-import { useAppContextStore } from "@/store";
 import { formatMoney } from "@/utils";
 import { IAccount, ICategory, ITransaction } from "@/domains/transactions/models";
 import { NPagination } from "naive-ui";
@@ -53,8 +50,6 @@ provide("selectedAccountId", accountId);
 
 const { state } = useServerSearch(serverSearchOptions)
 
-const context = useAppContextStore();
-
 
 interface ReconciliationEntry {
     entry_id: number
@@ -288,9 +283,13 @@ const transactionsMatched = computed(() => {
           @findLinked="findLinked"
           @removed="removeTransaction"
           @edit="handleEdit"
-        />
-
-        <NPagination v-model:page="state.page" :page-count="Math.ceil(transactions.total / 25)" />
+        >
+          <template #footer>
+              <footer class="justify-end flex px-4 mt-4">
+                  <NPagination v-model:page="state.page" :page-count="Math.ceil(transactions.total / 25)" />
+              </footer>
+        </template>
+        </ReconciliationTable>
       </section>
     </FinanceTemplate>
   </AppLayout>

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

@@ -68,7 +68,7 @@ const getTransactionColor = (row: ITransaction) => {
 </script>
 
 <template>
-  <div class="pb-20 mt-5 bg-base-lvl-3">
+  <div class="pb-8 mt-5 bg-base-lvl-3">
     <CustomTable
       :cols="cols"
       :show-prepend="true"
@@ -84,13 +84,6 @@ const getTransactionColor = (row: ITransaction) => {
         </div>
       </template>
 
-      <template v-slot:description="{ scope: { row } }">
-        <span class="text-xs capitalize">
-          {{ row.description }}
-          {{ row.linked }}
-        </span>
-      </template>
-
       <template v-slot:actions="{ scope: { row } }">
         <div class="flex justify-end w-full text-right">
             <button
@@ -115,6 +108,7 @@ const getTransactionColor = (row: ITransaction) => {
         </div>
       </template>
     </CustomTable>
+    <slot name="footer" />
   </div>
 </template>
 

resources/js/domains/transactions/tableAccountCols.ts

@@ -7,7 +7,7 @@ export const tableAccountCols = (accountId: number, showSelects?: false) => [
     ...( showSelects ? [{
         label: "",
         name: "selection",
-        width: 30,
+        width: 20,
         class: 'text-center',
         headerClass: 'text-center',
         render(row: any) {
@@ -35,6 +35,7 @@ export const tableAccountCols = (accountId: number, showSelects?: false) => [
         label: "Payee",
         name: "payee",
         class: 'w-full',
+        width: 200,
         render(row: any) {
             try {
                 const account = row.account_id === accountId ? row.counter_account : row.account
@@ -49,20 +50,16 @@ export const tableAccountCols = (accountId: number, showSelects?: false) => [
         }
     },
     {
-        label: "Category",
-        name: "category",
-        width: 150,
-        align: 'center',
-        class: 'text-center',
+        label: "Description/category",
+        name: "description",
+        width: 220,
         render(row: any) {
-            return row.category?.name
+            return h('div', [
+                h('div', row.description),
+                h('div', { class: 'text-primary font-bold' },  row.category?.name ?? row.category_name)
+            ])
         }
     },
-    {
-        label: "Description",
-        name: "description",
-        width: 300,
-    },
     {
         label: "Amount",
         name: "total",

resources/js/domains/transactions/tableCols.ts

@@ -50,17 +50,16 @@ export const tableCols = [
             }
         }
     },
-    {
-        label: "Category",
-        name: "category",
-        render(row: any) {
-            return row.category?.name ?? row.category_name
-        }
-    },
     {
         label: "Description",
         name: "description",
         width: 300,
+        render(row: any) {
+            return h('div', [
+                h('div', row.description),
+                h('div', row.category?.name ?? row.category_name)
+            ])
+        }
     },
     {
         label: "Amount",