Extract AccountWithReconciled

web/src/components/AccountWithReconciled.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useBudgetsStore } from '../stores/budget';
+import { Account } from '../stores/budget-account';
+
+const props = defineProps<{
+  account: Account
+}>();
+
+const budgetStore = useBudgetsStore();
+const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);
+
+const days = 24 * 60 * 60 * 1000;
+function daysSinceLastReconciled() {
+  const now = new Date().getTime();
+  const diff = new Date(now).getTime() - props.account.LastReconciled.Time.getTime();
+  return Math.floor(diff / days);
+}
+</script>
+
+<template>
+  <span>
+  <router-link 
+    :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
+    {{account.Name}}
+  </router-link>
+    <span v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7" class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline">
+      {{daysSinceLastReconciled()}}
+    </span>
+  </span>
+</template>