feat(financial): add Asaas charge actions

src/api/franchisee_account_receive.js

@@ -15,6 +15,11 @@ export const settleFranchiseeReceivable = async (id, payload = {}) => {
   return data.payload;
 };
 
+export const chargeFranchiseeReceivable = async (id) => {
+  const { data } = await api.post(`/franchisee-account-receive/${id}/charge`);
+  return data.payload;
+};
+
 export const reopenFranchiseeReceivable = async (id) => {
   const { data } = await api.post(`/franchisee-account-receive/${id}/reopen`);
   return data.payload;

src/pages/financial/AccountsPayablePage.vue

@@ -55,11 +55,10 @@
               dense
               no-caps
               unelevated
-              :disable="!canEdit"
-              :loading="reopeningId === row.id"
+              :disable="!canEdit || row.status === 'paid'"
               @click.prevent.stop="changeStatus(row)"
             >
-              <q-tooltip v-if="canEdit">Clique para alterar o status</q-tooltip>
+              <q-tooltip v-if="canEdit && row.status !== 'paid'">Dar baixa</q-tooltip>
             </q-btn>
           </q-td>
         </template>
@@ -72,10 +71,7 @@
 <script setup>
 import { computed, onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
-import {
-  getCompanyPayables,
-  reopenCompanyPayable,
-} from "src/api/company_payable";
+import { getCompanyPayables } from "src/api/company_payable";
 
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
@@ -90,8 +86,6 @@ const permissions = permissionStore();
 const canAdd = permissions.getAccess("franchisor_financial", "add");
 const canEdit = permissions.getAccess("franchisor_financial", "edit");
 
-const reopeningId = ref(null);
-
 const columns = [
   { name: "history", label: "Descrição", field: "history", align: "left" },
   { name: "plan_account", label: "Plano de Contas", field: "plan_account", align: "left" },
@@ -147,24 +141,7 @@ function openSettle(row) {
 }
 
 function changeStatus(row) {
-  if (row.status === "paid") {
-    onReopen(row);
-    return;
-  }
-
-  openSettle(row);
-}
-
-async function onReopen(row) {
-  reopeningId.value = row.id;
-  try {
-    await reopenCompanyPayable(row.id);
-    await loadData();
-  } catch (e) {
-    console.error(e);
-  } finally {
-    reopeningId.value = null;
-  }
+  if (row.status !== "paid") openSettle(row);
 }
 
 function openCreate() {

src/pages/financial/AccountsReceivablePage.vue

@@ -44,11 +44,44 @@
               dense
               no-caps
               unelevated
-              :disable="!canEdit"
-              :loading="changingStatusId === row.id"
+              :disable="!canEdit || row.status === 'paid'"
               @click.prevent.stop="changeStatus(row)"
             >
-              <q-tooltip v-if="canEdit">Clique para alterar o status</q-tooltip>
+              <q-tooltip v-if="canEdit && row.status !== 'paid'">Dar baixa</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+        <template #body-cell-actions="{ row }">
+          <q-td auto-width>
+            <q-btn
+              v-if="row.invoice_url"
+              round
+              dense
+              flat
+              color="teal-7"
+              icon="mdi-open-in-new"
+              aria-label="Abrir cobrança"
+              @click="openInvoice(row)"
+            >
+              <q-tooltip>Abrir cobrança no Asaas</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-else-if="
+                canEdit &&
+                row.unit_id &&
+                row.status !== 'paid' &&
+                row.status !== 'cancelled'
+              "
+              round
+              dense
+              outline
+              color="deep-purple-5"
+              icon="mdi-cash-fast"
+              aria-label="Gerar cobrança"
+              :loading="chargingId === row.id"
+              @click="onCharge(row)"
+            >
+              <q-tooltip>Gerar cobrança no Asaas</q-tooltip>
             </q-btn>
           </q-td>
         </template>
@@ -65,7 +98,7 @@ import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import FinancialCard from "src/components/financial/FinancialCard.vue";
 import {
   getFranchiseeReceivables,
-  reopenFranchiseeReceivable,
+  chargeFranchiseeReceivable,
 } from "src/api/franchisee_account_receive";
 import AddAccountReceivableDialog from "src/components/financial/AddAccountReceivableDialog.vue";
 import SettleAccountReceivableDialog from "src/components/financial/SettleAccountReceivableDialog.vue";
@@ -77,7 +110,7 @@ const canAdd = permissions.getAccess("franchisor_financial", "add");
 const canEdit = permissions.getAccess("franchisor_financial", "edit");
 const loading = ref(false);
 const items = ref([]);
-const changingStatusId = ref(null);
+const chargingId = ref(null);
 
 const columns = [
   { name: "unit", label: "Unidade", field: "unit", align: "left" },
@@ -86,6 +119,7 @@ const columns = [
   { name: "value", label: "Valor", field: "value", align: "left" },
   { name: "due_date", label: "Vencimento", field: "due_date", align: "left" },
   { name: "status", label: "Status", field: "status", align: "left" },
+  { name: "actions", label: "Ações", field: "actions", align: "right" },
 ];
 
 const formatCurrency = (value) =>
@@ -144,29 +178,24 @@ const openCreate = () => {
 };
 
 const changeStatus = (row) => {
-  if (row.status !== "paid") {
-    $q.dialog({
-      component: SettleAccountReceivableDialog,
-      componentProps: { receivable: row },
-    }).onOk(fetchReceivables);
-    return;
-  }
-
+  if (row.status === "paid") return;
   $q.dialog({
-    title: "Marcar como não pago",
-    message: `Deseja reabrir a conta "${row.history}"?`,
-    ok: { color: "primary", label: "Confirmar" },
-    cancel: { color: "negative", outline: true, label: "Cancelar" },
-  }).onOk(async () => {
-    changingStatusId.value = row.id;
-    try {
-      await reopenFranchiseeReceivable(row.id);
-      await fetchReceivables();
-    } finally {
-      changingStatusId.value = null;
-    }
-  });
+    component: SettleAccountReceivableDialog,
+    componentProps: { receivable: row },
+  }).onOk(fetchReceivables);
 };
 
+const onCharge = async (row) => {
+  chargingId.value = row.id;
+  try {
+    await chargeFranchiseeReceivable(row.id);
+    await fetchReceivables();
+  } finally {
+    chargingId.value = null;
+  }
+};
+
+const openInvoice = (row) => window.open(row.invoice_url, "_blank");
+
 onMounted(fetchReceivables);
 </script>