feat(chart-of-accounts): list accounts and wire new account button

Loads accounts ordered by code from the API, maps to code/name/type columns, opens the dialog from Nova Conta and reloads on save; drops the dev banner.

src/pages/financial/ChartOfAccountsPage.vue

@@ -2,7 +2,6 @@
   <div>
     <DefaultHeaderPage title="Plano de Contas" :show-filter-icon="false" />
 
-    <div class="q-px-md"><DevBanner /></div>
     <div class="q-px-md">
       <DefaultTable
         v-model:rows="rows"
@@ -10,6 +9,7 @@
         add-item
         add-item-label="Nova Conta"
         dense-add
+        :loading="loading"
         title="Plano de Contas"
         description="contas"
         :female="true"
@@ -21,12 +21,26 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
-import DevBanner from "src/components/shared/DevBanner.vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import AddFinancialPlanAccountDialog from "src/components/financial/AddFinancialPlanAccountDialog.vue";
+import { getFinancialPlanAccounts } from "src/api/financial_plan_account";
 
-const rows = ref([]);
+const $q = useQuasar();
+
+const accounts = ref([]);
+const loading = ref(false);
+
+const rows = computed(() =>
+  accounts.value.map((account) => ({
+    id: account.id,
+    code: account.code,
+    name: account.description,
+    type: account.chart_type,
+  })),
+);
 
 const columns = [
   { name: "code", label: "Código", field: "code", align: "left" },
@@ -34,5 +48,23 @@ const columns = [
   { name: "type", label: "Tipo", field: "type", align: "left" },
 ];
 
-const handleAddItem = () => {};
+const fetchAccounts = async () => {
+  loading.value = true;
+  try {
+    accounts.value = await getFinancialPlanAccounts();
+  } catch {
+    $q.notify({ type: "negative", message: "Erro ao carregar o plano de contas." });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleAddItem = () => {
+  $q.dialog({ component: AddFinancialPlanAccountDialog }).onOk(() => {
+    $q.notify({ type: "positive", message: "Conta cadastrada com sucesso." });
+    fetchAccounts();
+  });
+};
+
+onMounted(fetchAccounts);
 </script>