<script setup lang="ts">
import {RouterView} from 'vue-router';
import {EditLedgerModal, useLedgersStore} from "@/ledger";
import {ref} from "vue";
import {activityApi} from "@/mammon";

const ledgersStore = useLedgersStore();

const editLedgerModal = ref<typeof EditLedgerModal>();

const processActivities = async () => {
  await activityApi.fetchAllNewActivities();
  await activityApi.processNewActivities();
  await ledgersStore.refresh();
}
</script>

<template>
    <div class="mt-4">
      <div class="mb-4 border-b-1 flex justify-end">
        <button class="mb-2 ms-2" @click="processActivities">Process Activities</button>
        <button class="mb-2 ms-2" @click="editLedgerModal?.open()">New Ledger</button>
      </div>
      <EditLedgerModal ref="editLedgerModal" />
      <RouterView />
    </div>
</template>
