Improve frontend

web/src/pages/Account.vue

@@ -13,11 +13,31 @@ defineProps<{
 }>()
 
 const accounts = useAccountStore();
+const TargetReconcilingBalance = ref(0);
+
+function setReconciled(event: Event) {
+    const target = event.target as HTMLInputElement;
+    accounts.SetReconciledForAllTransactions(target.checked);
+}
+
+function cancelReconcilation() {
+    accounts.SetReconciledForAllTransactions(false);
+    accounts.Reconciling = false;
+}
+
+function submitReconcilation() {
+    
+}
+
+function createReconcilationTransaction() {
+
+}
 </script>
 
 <template>
     <h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
-    <EditAccount /> <br />
+    <EditAccount />
+    <br />
 
     <span>
         Current Balance:
@@ -29,15 +49,29 @@ const accounts = useAccountStore();
         <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
     </span>
 
-    <span v-if="accounts.Reconciling">
+    <span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
+        Is <Currency :value="accounts.ReconcilingBalance" /> your current balance? 
+        <Button
+            class="bg-blue-500 mx-3"
+            @click="submitReconcilation">Yes!</Button>
             <br />
-        Reconciling
+
+        No, it's: <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
+        Difference: <Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" />
+        <Button
+            class="bg-orange-500 mx-3"
+            v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
+            @click="createReconcilationTransaction"
+        >Create reconciling Transaction</Button>
+        <Button
+            class="bg-red-500 mx-3"
+            @click="cancelReconcilation"
+        >Cancel</Button>
     </span>
     <span v-if="!accounts.Reconciling">
         Reconciled Balance:
         <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
-        <Currency :value="accounts.ReconcilingBalance" />
-        <Button @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
+        <Button class="bg-blue-500" @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
     </span>
     <table>
         <tr class="font-bold">
@@ -48,7 +82,9 @@ const accounts = useAccountStore();
             <td class="text-right">Amount</td>
             <td style="width: 20px;"></td>
             <td style="width: 40px;"></td>
-            <td style="width: 20px;" v-if="accounts.Reconciling">R</td>
+            <td style="width: 20px;" v-if="accounts.Reconciling">
+                <input type="checkbox" @input="setReconciled" />
+            </td>
         </tr>
         <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow

web/src/stores/budget-account.ts

@@ -120,7 +120,7 @@ export const useAccountStore = defineStore("budget/account", {
             return this.CurrentAccount!.Transactions.map(x => {
                 return this.Transactions.get(x)!
             });
-        }
+        },
     },
     actions: {
         async SetCurrentAccount(budgetid: string, accountid: string) {
@@ -169,6 +169,15 @@ export const useAccountStore = defineStore("budget/account", {
                 state.Months.set(year, yearMap);
             });
         },
+        SetReconciledForAllTransactions(value: boolean) {
+            for (const transaction of this.TransactionsList) {
+                if (transaction.Status == "Reconciled")
+                    continue;
+
+                transaction.Reconciled = value;
+            }
+
+        },
         logout() {
             this.$reset()
         },