Adds balance payment feature

Implements a feature that allows users to pay their outstanding balance via Lightning.

The changes include:
- Adds the UI elements for invoice generation and display, including QR code.
- Integrates backend endpoints to generate and record payments.
- Adds polling mechanism to track payments and update balance.
- Creates new database models to support manual payment requests.

templates/castle/index.html

@@ -312,31 +312,74 @@
 
 <!-- Pay Balance Dialog -->
 <q-dialog v-model="payDialog.show" position="top">
-  <q-card v-if="payDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
-    <q-form @submit="submitPayment" class="q-gutter-md">
-      <div class="text-h6 q-mb-md">Pay Balance</div>
+  <q-card v-if="payDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card" style="min-width: 400px">
+    <div class="text-h6 q-mb-md">Pay Balance</div>
 
-      <div v-if="balance" class="q-mb-md">
-        Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong>
+    <div v-if="balance" class="q-mb-md">
+      Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong>
+    </div>
+
+    <div v-if="!payDialog.paymentRequest">
+      <q-form @submit="submitPayment" class="q-gutter-md">
+        <q-input
+          filled
+          dense
+          v-model.number="payDialog.amount"
+          type="number"
+          label="Amount to pay (sats) *"
+          min="1"
+          :max="balance ? Math.abs(balance.balance) : 0"
+        ></q-input>
+
+        <div class="row q-mt-lg q-gutter-sm">
+          <q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
+            Generate Lightning Invoice
+          </q-btn>
+          <q-btn unelevated color="orange" @click="showManualPaymentOption" :loading="payDialog.loading">
+            Pay Manually (Cash/Bank)
+          </q-btn>
+        </div>
+        <div class="row q-mt-sm">
+          <q-btn v-close-popup flat color="grey">Cancel</q-btn>
+        </div>
+      </q-form>
+    </div>
+
+    <div v-else>
+      <div class="q-mb-md text-center">
+        <lnbits-qrcode :value="payDialog.paymentRequest" :options="{width: 280}"></lnbits-qrcode>
       </div>
 
-      <q-input
-        filled
-        dense
-        v-model.number="payDialog.amount"
-        type="number"
-        label="Amount to pay (sats) *"
-        min="1"
-        :max="balance ? Math.abs(balance.balance) : 0"
-      ></q-input>
-
-      <div class="row q-mt-lg">
-        <q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
-          Generate Invoice
-        </q-btn>
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      <div class="q-mb-md">
+        <q-input
+          filled
+          dense
+          readonly
+          v-model="payDialog.paymentRequest"
+          label="Lightning Invoice"
+        >
+          <template v-slot:append>
+            <q-btn
+              flat
+              dense
+              icon="content_copy"
+              @click="copyToClipboard(payDialog.paymentRequest)"
+            >
+              <q-tooltip>Copy invoice</q-tooltip>
+            </q-btn>
+          </template>
+        </q-input>
       </div>
-    </q-form>
+
+      <div class="text-caption text-grey q-mb-md">
+        Scan the QR code or copy the invoice to pay with your Lightning wallet.
+        Your balance will update automatically after payment.
+      </div>
+
+      <div class="row">
+        <q-btn v-close-popup flat color="grey">Close</q-btn>
+      </div>
+    </div>
   </q-card>
 </q-dialog>