Improve frontend

web/src/pages/Account.vue

@@ -13,31 +13,65 @@ 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:
         <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
     </span>
-   
+
     <span>
         Cleared Balance:
         <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
     </span>
 
-    <span v-if="accounts.Reconciling">
-        <br />
-        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 />
+
+        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