src/pages/financial/AccountsPayablePage.vue

@@ -27,12 +27,19 @@
     </div>
 
     <div class="row justify-end items-center q-px-md q-mb-sm q-gutter-sm">
-      <q-btn color="primary" label="Últimas Movimentações" unelevated no-caps />
+      <q-btn
+        :color="showMovimentacoes ? 'secondary' : 'primary'"
+        label="Últimas Movimentações"
+        unelevated
+        no-caps
+        @click="showMovimentacoes = !showMovimentacoes"
+      />
       <q-btn color="primary" label="Exportar Relatório" icon="mdi-download" unelevated no-caps />
     </div>
 
     <div class="q-px-md">
       <DefaultTable
+        v-if="!showMovimentacoes"
         v-model:rows="rows"
         no-api-call
         add-item
@@ -42,6 +49,17 @@
         :columns="columns"
         @on-add-item="handleAddItem"
       />
+      <DefaultTable
+        v-else
+        v-model:rows="movimentacoesRows"
+        no-api-call
+        :add-item="false"
+        title="Últimas Movimentações"
+        description="movimentações"
+        :female="true"
+        :columns="movimentacoesColumns"
+        @on-add-item="handleAddItem"
+      />
     </div>
   </div>
 </template>
@@ -52,7 +70,9 @@ import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import FinancialCard from "src/components/financial/FinancialCard.vue";
 
+const showMovimentacoes = ref(false);
 const rows = ref([]);
+const movimentacoesRows = ref([]);
 
 const columns = [
   { name: "unit", label: "Unidade", field: "unit", align: "left" },
@@ -63,5 +83,12 @@ const columns = [
   { name: "status", label: "Status", field: "status", align: "left" },
 ];
 
+const movimentacoesColumns = [
+  { name: "description", label: "Descrição", field: "description", align: "left" },
+  { name: "date", label: "Data", field: "date", align: "left" },
+  { name: "value", label: "Valor", field: "value", align: "left" },
+  { name: "status", label: "Status", field: "status", align: "left" },
+];
+
 const handleAddItem = () => {};
 </script>

src/pages/financial/AccountsReceivablePage.vue

@@ -1,9 +1,94 @@
 <template>
   <div>
     <DefaultHeaderPage title="Contas a Receber" :show-filter-icon="false" />
+
+    <div class="row q-pa-md q-gutter-md">
+      <FinancialCard
+        title="Saldo Tesouraria"
+        icon="mdi-bank-outline"
+        :financial-value="0"
+        :integer="0"
+        integer-label="pagamentos pendentes"
+      />
+      <FinancialCard
+        title="Contas Recebidas"
+        icon="mdi-check-circle-outline"
+        :financial-value="0"
+        :integer="0"
+        integer-label="pagamentos pendentes"
+      />
+      <FinancialCard
+        title="Contas a Receber"
+        icon="mdi-cash-plus"
+        :financial-value="0"
+        :integer="0"
+        integer-label="pagamentos pendentes"
+      />
+    </div>
+
+    <div class="row justify-end items-center q-px-md q-mb-sm q-gutter-sm">
+      <q-btn
+        :color="showMovimentacoes ? 'secondary' : 'primary'"
+        label="Últimas Movimentações"
+        unelevated
+        no-caps
+        @click="showMovimentacoes = !showMovimentacoes"
+      />
+      <q-btn color="primary" label="Exportar Relatório" icon="mdi-download" unelevated no-caps />
+    </div>
+
+    <div class="q-px-md">
+      <DefaultTable
+        v-if="!showMovimentacoes"
+        v-model:rows="rows"
+        no-api-call
+        add-item
+        title="Contas a Receber"
+        description="contas"
+        :female="true"
+        :columns="columns"
+        @on-add-item="handleAddItem"
+      />
+      <DefaultTable
+        v-else
+        v-model:rows="movimentacoesRows"
+        no-api-call
+        :add-item="false"
+        title="Últimas Movimentações"
+        description="movimentações"
+        :female="true"
+        :columns="movimentacoesColumns"
+        @on-add-item="handleAddItem"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import FinancialCard from "src/components/financial/FinancialCard.vue";
+
+const showMovimentacoes = ref(false);
+const rows = ref([]);
+const movimentacoesRows = ref([]);
+
+const columns = [
+  { name: "unit", label: "Unidade", field: "unit", align: "left" },
+  { name: "description", label: "Descrição", field: "description", align: "left" },
+  { name: "category", label: "Categoria", field: "category", align: "left" },
+  { 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" },
+];
+
+const movimentacoesColumns = [
+  { name: "description", label: "Descrição", field: "description", align: "left" },
+  { name: "date", label: "Data", field: "date", align: "left" },
+  { name: "value", label: "Valor", field: "value", align: "left" },
+  { name: "status", label: "Status", field: "status", align: "left" },
+];
+
+const handleAddItem = () => {};
 </script>