ledger list and modal

src/pages/Ledger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {RouterView} from 'vue-router';
+import {CreateLedgerModal} from "@/ledger";
+import {ref} from "vue";
+
+const createLedgerModal = ref<typeof CreateLedgerModal>();
+</script>
+
+<template>
+    <div class="mt-4">
+      <div class="mb-4 border-b-1 flex justify-end">
+        <button class="mb-2" @click="createLedgerModal?.open()">New Ledger</button>
+      </div>
+      <CreateLedgerModal ref="createLedgerModal" />
+      <RouterView />
+    </div>
+</template>

src/pages/Ledgers.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-
-</script>
-
-<template>
-    <div class="mt-4">
-        <div class="flex border-b-2 border-emerald-500">
-        </div>
-        <RouterView />
-    </div>
-</template>
-
-<style scoped>
-@reference "tailwindcss";
-
-a.tab {
-    @apply flex items-center px-4 me-2 rounded-t-md bg-slate-600 hover:bg-slate-700;
-    &.router-link-active {
-        @apply bg-emerald-500 hover:bg-emerald-700;
-    }
-}
-</style>

src/pages/ledger/ListLedgers.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+import {LedgerLine, useLedgersStore} from "@/ledger";
+
+const {ledgers} = useLedgersStore();
+
+</script>
+
+<template>
+  <div class="mt-4">
+    <LedgerLine v-for="leger in ledgers" :ledger="leger"/>
+  </div>
+</template>