RED-85 tela de pagamento

web-app-vue/src/pages/dashboard/controles-dashboard.vue

@@ -12,16 +12,11 @@
           <!-- receitas x despesas efetivadas (simple-bar) -->
           <v-expansion-panel-title>Receitas x Despesas</v-expansion-panel-title>
           <v-expansion-panel-text>
-            <VueUiSparkbar
-              :config="receitaDespesaBarConfig"
-              :dataset="receitaDespesaTotalPeriodo"
+            <VueUiSparkbar :config="receitaDespesaBarConfig"
+                           :dataset="receitaDespesaTotalPeriodo"
             ></VueUiSparkbar>
-            <br />
-            <v-divider></v-divider>
-            <br />
-            <VueUiSparkbar
-              :config="receitaDespesaBarConfig"
-              :dataset="receitaDespesaEfetivadaPeriodo"
+            <VueUiSparkbar :config="receitaDespesaBarConfig"
+                           :dataset="receitaDespesaEfetivadaPeriodo"
             ></VueUiSparkbar>
           </v-expansion-panel-text>
         </v-expansion-panel>
@@ -32,6 +27,7 @@
           <v-expansion-panel-title>Limites</v-expansion-panel-title>
           <v-expansion-panel-text>
             <div v-for="(limite, i) in limites" :key="i">
+              <h3>{{limite[1].name}}</h3>
               <VueUiXy :config="lineChartConfig" :dataset="limite" />
             </div>
           </v-expansion-panel-text>
@@ -57,6 +53,7 @@
           <v-expansion-panel-title>Planejamentos</v-expansion-panel-title>
           <v-expansion-panel-text>
             <div v-for="(planejamento, i) in planejamentos" :key="i">
+              <h3>{{planejamento[1].name}}</h3>
               <VueUiXy :config="lineChartConfig" :dataset="planejamento" />
             </div>
           </v-expansion-panel-text>
@@ -316,12 +313,12 @@ const limites = computed(() => {
 const planejamentos = computed(() => {
   const planejamentos = {}
   dashboardState.store.dashboard?.planejamentos?.forEach((planejamento) => {
-    if(!planejamentos[planejamento.descricao]) {
+    if (!planejamentos[planejamento.descricao]) {
       planejamentos[planejamento.descricao] = [
         {
           shape: 'square',
           name: 'Limite',
-          color: planejamento.type === "ENTRADA" ? 'lightgreen' : 'red',
+          color: planejamento.type === 'ENTRADA' ? 'lightgreen' : 'red',
           type: 'line',
           series: dashboardState.store.dashboard?.planejamentos
             ?.filter((l) => l.descricao === planejamento.descricao)
@@ -339,7 +336,7 @@ const planejamentos = computed(() => {
           type: 'line',
           series: dashboardState.store.dashboard?.planejamentos
             ?.filter((l) => l.descricao === planejamento.descricao)
-            .map((l) => planejamento.type === "ENTRADA" ? l.acc : -l.acc)
+            .map((l) => planejamento.type === 'ENTRADA' ? l.acc : -l.acc)
         }
       ]
     }

web-app-vue/src/pages/pagamento/pagamento-form.vue

@@ -0,0 +1,22 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+      <h1>Pagamento</h1>
+      <ol>
+        <li>selecionar uma conta de origem</li>
+        <li>selecionar uma conta de destino</li>
+        <li>definir um período</li>
+        <li>marcar as movimentações do período para pagamento; calcular o valor</li>
+        <li>salvar o movimento de origem</li>
+        <li>salvar o movimento de destino</li>
+        <li>atualizar as movimentações- marcar como pagas</li>
+      </ol>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

web-app-vue/src/pages/pagamento/pagamento-page.vue

@@ -1,15 +1,31 @@
 <template>
-  <div>
-    <h1>Pagamento</h1>
-    <ol>
-      <li>selecionar uma conta de origem</li>
-      <li>selecionar uma conta de destino</li>
-      <li>definir um período</li>
-      <li>marcar as contas do período para pagamento</li>
-    </ol>
-  </div>
+  <v-container fluid>
+    <v-radio-group inline label="Operação" v-model="operacao">
+      <v-radio label="Pagamento" value="pagamento"></v-radio>
+      <v-radio label="Transferência" value="transferencia"></v-radio>
+    </v-radio-group>
+    <pagamento-form v-if="operacao === 'pagamento'"></pagamento-form>
+    <transferencia-form v-if="operacao === 'transferencia'"></transferencia-form>
+
+  </v-container>
+
+<!--  <div>-->
+<!--    <h1>Pagamento</h1>-->
+<!--    <ol>-->
+<!--      <li>selecionar uma conta de origem</li>-->
+<!--      <li>selecionar uma conta de destino</li>-->
+<!--      <li>definir um período</li>-->
+<!--      <li>marcar as contas do período para pagamento</li>-->
+<!--    </ol>-->
+<!--  </div>-->
 </template>
 <script setup>
+import { ref } from 'vue'
+import PagamentoForm from '@/pages/pagamento/pagamento-form.vue'
+import TransferenciaForm from '@/pages/pagamento/transferencia-form.vue'
+
+const operacao = ref("")
+
 </script>
 <style scoped>
 </style>

web-app-vue/src/pages/pagamento/transferencia-form.vue

@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+      <h1>Transferência</h1>
+      <ol>
+        <li>selecionar uma conta de origem</li>
+        <li>selecionar uma conta de destino</li>
+        <li>definir um valor</li>
+        <li>salvar o movimento de origem</li>
+        <li>salvar o movimento de destino</li>
+      </ol>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

web-app-vue/src/services/chart-config.js

@@ -232,7 +232,7 @@ export const lineChartConfig= {
   'useCssAnimation': true,
   'chart': {
     'fontFamily': 'inherit',
-    'backgroundColor': '#000000',
+    'backgroundColor': '#212121',
     'color': '#d5d5d5',
     'height': 600,
     'width': 1000,

web-app-vue/src/services/router.js

@@ -19,7 +19,7 @@ export const routes = [
   { component: DashboardPage, path: '/dashboard', label: 'Dashboard', icon: 'mdi-chart-bar' },
   { component: NovaMovimentacaoPage, path: '/nova-movimentacao', label: 'Novo lançamento', icon: 'mdi-cash-plus' },
   { component: MovimentacaoPage, path: '/historico', label: 'Lançamentos', icon: 'mdi-clipboard-text-search-outline' },
-  { component: PagamentoPage, path: "/pagamento", label: "Pagamentos", icon: 'mdi-cash-multiple' },
+  { component: PagamentoPage, path: "/pagamento", label: "Pagar/Transferir", icon: 'mdi-cash-multiple' },
   { component: ContasPage, path: '/contas', label: 'Contas', icon: 'mdi-card-account-details' },
   { component: CategoriasPage, path: '/categorias', label: 'Categorias', icon: 'mdi-playlist-check' },
   { component: EditarMovimentacaoPage, path: '/editar-movimentacao/:id' },