feat(financial): botões de gerar cobrança e ver boleto na contas a receber

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/pages/financial/AccountsReceivablePage.vue

@@ -68,27 +68,52 @@
 
         <template #body-cell-actions="{ row }">
           <q-td auto-width>
-            <q-btn
-              v-if="row.status !== 'paid' && row.status !== 'cancelled'"
-              color="primary-2"
-              label="Dar baixa"
-              dense
-              no-caps
-              unelevated
-              class="q-px-sm"
-              @click="openSettle(row)"
-            />
-            <q-btn
-              v-else-if="row.status === 'paid'"
-              color="grey-7"
-              label="Reabrir"
-              dense
-              no-caps
-              outline
-              class="q-px-sm"
-              :loading="reopeningId === row.id"
-              @click="onReopen(row)"
-            />
+            <div class="row no-wrap justify-end items-center" style="gap: 6px">
+              <q-btn
+                v-if="row.invoice_url"
+                color="teal-7"
+                label="Ver boleto"
+                icon="mdi-barcode"
+                dense
+                no-caps
+                outline
+                class="q-px-sm"
+                @click="openInvoice(row)"
+              />
+              <q-btn
+                v-else-if="row.status !== 'paid' && row.status !== 'cancelled'"
+                color="deep-purple-5"
+                label="Gerar cobrança"
+                icon="mdi-cash-fast"
+                dense
+                no-caps
+                outline
+                class="q-px-sm"
+                :loading="chargingId === row.id"
+                @click="onCharge(row)"
+              />
+              <q-btn
+                v-if="row.status !== 'paid' && row.status !== 'cancelled'"
+                color="primary-2"
+                label="Dar baixa"
+                dense
+                no-caps
+                unelevated
+                class="q-px-sm"
+                @click="openSettle(row)"
+              />
+              <q-btn
+                v-else-if="row.status === 'paid'"
+                color="grey-7"
+                label="Reabrir"
+                dense
+                no-caps
+                outline
+                class="q-px-sm"
+                :loading="reopeningId === row.id"
+                @click="onReopen(row)"
+              />
+            </div>
           </q-td>
         </template>
       </DefaultTable>
@@ -153,6 +178,7 @@ import {
   getReceivablesMe,
   settleReceivableMe,
   reopenReceivableMe,
+  chargeReceivableMe,
 } from "src/api/unit_receivable";
 
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
@@ -169,6 +195,7 @@ const settleDialog = ref(false);
 const selected = ref(null);
 const settling = ref(false);
 const reopeningId = ref(null);
+const chargingId = ref(null);
 
 const settleForm = ref({ payment_date: null, discount: 0, fine: 0 });
 
@@ -286,5 +313,21 @@ async function onReopen(row) {
   }
 }
 
+async function onCharge(row) {
+  chargingId.value = row.id;
+  try {
+    await chargeReceivableMe(row.id);
+    await loadData();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    chargingId.value = null;
+  }
+}
+
+function openInvoice(row) {
+  if (row.invoice_url) window.open(row.invoice_url, "_blank");
+}
+
 onMounted(loadData);
 </script>