From 25fb3dfbd0a7c3a3a438b31f7e673061aa0590e8 Mon Sep 17 00:00:00 2001
From: Leonardo Silveira <sombriks@gmail.com>
Date: Sun, 2 Jun 2024 16:50:18 -0300
Subject: [PATCH 1/3] RED-85

---
 .../src/pages/pagamento/pagamento-page.vue        | 15 +++++++++++++++
 web-app-vue/src/services/router.js                |  2 ++
 2 files changed, 17 insertions(+)
 create mode 100644 web-app-vue/src/pages/pagamento/pagamento-page.vue

diff --git a/web-app-vue/src/pages/pagamento/pagamento-page.vue b/web-app-vue/src/pages/pagamento/pagamento-page.vue
new file mode 100644
index 0000000..781783f
--- /dev/null
+++ b/web-app-vue/src/pages/pagamento/pagamento-page.vue
@@ -0,0 +1,15 @@
+<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>
+</template>
+<script setup>
+</script>
+<style scoped>
+</style>
diff --git a/web-app-vue/src/services/router.js b/web-app-vue/src/services/router.js
index 7248234..bcf820e 100644
--- a/web-app-vue/src/services/router.js
+++ b/web-app-vue/src/services/router.js
@@ -11,6 +11,7 @@ import RecorrenciasPage from '@/pages/recorrencia/recorrencias-page.vue'
 import ContasPage from '@/pages/conta/contas-page.vue'
 import MovimentacaoPage from '@/pages/movimentacao/movimentacao-page.vue'
 import EditarMovimentacaoPage from '@/pages/movimentacao/editar-movimentacao-page.vue'
+import PagamentoPage from '@/pages/pagamento/pagamento-page.vue'
 
 export const routes = [
   { path: '/', redirect: '/dashboard' },
@@ -18,6 +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: 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' },

From 05e9acba7822ef15564808a499991c3f17dc2967 Mon Sep 17 00:00:00 2001
From: Leonardo Silveira <sombriks@gmail.com>
Date: Sun, 2 Jun 2024 21:11:55 -0300
Subject: [PATCH 2/3] RED-85 tela de pagamento

---
 .../pages/dashboard/controles-dashboard.vue   | 21 +++++-------
 .../src/pages/pagamento/pagamento-form.vue    | 22 ++++++++++++
 .../src/pages/pagamento/pagamento-page.vue    | 34 ++++++++++++++-----
 .../pages/pagamento/transferencia-form.vue    | 20 +++++++++++
 web-app-vue/src/services/chart-config.js      |  2 +-
 web-app-vue/src/services/router.js            |  2 +-
 6 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 web-app-vue/src/pages/pagamento/pagamento-form.vue
 create mode 100644 web-app-vue/src/pages/pagamento/transferencia-form.vue

diff --git a/web-app-vue/src/pages/dashboard/controles-dashboard.vue b/web-app-vue/src/pages/dashboard/controles-dashboard.vue
index 89c84d0..7e49cfe 100644
--- a/web-app-vue/src/pages/dashboard/controles-dashboard.vue
+++ b/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)
         }
       ]
     }
diff --git a/web-app-vue/src/pages/pagamento/pagamento-form.vue b/web-app-vue/src/pages/pagamento/pagamento-form.vue
new file mode 100644
index 0000000..3129893
--- /dev/null
+++ b/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>
diff --git a/web-app-vue/src/pages/pagamento/pagamento-page.vue b/web-app-vue/src/pages/pagamento/pagamento-page.vue
index 781783f..b02eda3 100644
--- a/web-app-vue/src/pages/pagamento/pagamento-page.vue
+++ b/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>
diff --git a/web-app-vue/src/pages/pagamento/transferencia-form.vue b/web-app-vue/src/pages/pagamento/transferencia-form.vue
new file mode 100644
index 0000000..2251067
--- /dev/null
+++ b/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>
diff --git a/web-app-vue/src/services/chart-config.js b/web-app-vue/src/services/chart-config.js
index 64a831d..3cbd57c 100644
--- a/web-app-vue/src/services/chart-config.js
+++ b/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,
diff --git a/web-app-vue/src/services/router.js b/web-app-vue/src/services/router.js
index bcf820e..bb949c5 100644
--- a/web-app-vue/src/services/router.js
+++ b/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' },

From e0def6b8fe41a61e456c739f0c50606379881e6a Mon Sep 17 00:00:00 2001
From: Leonardo Silveira <sombriks@gmail.com>
Date: Sat, 8 Jun 2024 12:55:11 -0300
Subject: [PATCH 3/3] =?UTF-8?q?RED-85=20pagamentos=20e=20transfer=C3=AAnci?=
 =?UTF-8?q?as?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 service-node-koa/app/config/db/knexfile.cjs   |  18 +--
 .../src/pages/categoria/lista-categorias.vue  |  18 +--
 .../movimentacao/editar-movimentacao.vue      |   4 +-
 .../src/pages/pagamento/pagamento-form.vue    | 110 +++++++++++++++---
 .../src/pages/pagamento/pagamento-page.vue    |  36 ++++--
 .../pages/pagamento/transferencia-form.vue    |  97 ++++++++++++---
 6 files changed, 227 insertions(+), 56 deletions(-)

diff --git a/service-node-koa/app/config/db/knexfile.cjs b/service-node-koa/app/config/db/knexfile.cjs
index 61d0e6d..b7bd8e2 100644
--- a/service-node-koa/app/config/db/knexfile.cjs
+++ b/service-node-koa/app/config/db/knexfile.cjs
@@ -1,25 +1,27 @@
 /**
-* @type { import("knex").Knex.Config }
-*/
+ * @type { import('knex').Knex.Config }
+ */
 const _cfg = {
   client: 'sqlite3',
   useNullAsDefault: true,
   connection: {
-    filename: `${__dirname}/../../../redline.sqlite3`,
+    filename: `${__dirname}/../../../redline.sqlite3`
   },
   pool: {
     min: 2,
-    max: 10
+    max: 10,
+    afterCreate: (conn, cb) =>
+      conn.run('PRAGMA foreign_keys = ON', cb)
   },
   migrations: {
     directory: `${__dirname}/migrations`,
-    loadExtensions: [".mjs"],
-  },
+    loadExtensions: ['.mjs']
+  }
 }
 
 /**
-* @type { Object.<string, import("knex").Knex.Config> }
-*/
+ * @type { Object.<string, import('knex').Knex.Config> }
+ */
 module.exports = {
   development: { ..._cfg },
   test: {
diff --git a/web-app-vue/src/pages/categoria/lista-categorias.vue b/web-app-vue/src/pages/categoria/lista-categorias.vue
index 14137a1..1247730 100644
--- a/web-app-vue/src/pages/categoria/lista-categorias.vue
+++ b/web-app-vue/src/pages/categoria/lista-categorias.vue
@@ -4,23 +4,23 @@
       <detalhe-categoria :categoria="novaCategoria" @onEdit="salvar"></detalhe-categoria>
       <v-divider></v-divider>
       <detalhe-categoria
-          @onEdit="salvar"
-          @onRemove="remover"
-          v-for="cat in cState.store.categorias"
-          :key="cat.id"
-          :categoria="cat"
+        @onEdit="salvar"
+        @onRemove="remover"
+        v-for="cat in cState.store.categorias"
+        :key="cat.id"
+        :categoria="cat"
       ></detalhe-categoria>
     </v-row>
   </v-container>
 </template>
 <script setup>
-import {onMounted, reactive, ref} from 'vue'
-import {useCategoriaStore} from '@/stores/categoriaStore'
+import { onMounted, reactive } from 'vue'
+import { useCategoriaStore } from '@/stores/categoriaStore'
 import DetalheCategoria from '@/pages/categoria/detalhe-categoria.vue'
 
 const cState = useCategoriaStore()
 
-const novaCategoria = reactive({descricao: 'Nova Categoria'})
+const novaCategoria = reactive({ descricao: 'Nova Categoria' })
 
 const remover = async (categoria) => {
   if (!confirm('deseja realmente excluir esta categoria?')) return
@@ -29,7 +29,7 @@ const remover = async (categoria) => {
 }
 
 const salvar = async (categoria) => {
-  await cState.salvarCategoria({...categoria})
+  await cState.salvarCategoria({ ...categoria })
   await cState.sincronizarCategorias()
 }
 
diff --git a/web-app-vue/src/pages/movimentacao/editar-movimentacao.vue b/web-app-vue/src/pages/movimentacao/editar-movimentacao.vue
index c83eddd..54a7e8d 100644
--- a/web-app-vue/src/pages/movimentacao/editar-movimentacao.vue
+++ b/web-app-vue/src/pages/movimentacao/editar-movimentacao.vue
@@ -36,6 +36,8 @@
             v-model="movForm.descricao"
             label="Descrição"
           />
+          <!-- vencimento (dia do cartão se conta cartão) -->
+          <chip-date class="item" label="Vencimento" v-model="movForm.vencimento" />
           <!-- efetivada? -->
           <v-checkbox
             v-if="!props?.movimentacao?.id"
@@ -43,8 +45,6 @@
             v-model="contaEfetivada"
             label="Paga?"
           />
-          <!-- vencimento (dia do cartão se conta cartão) -->
-          <chip-date class="item" label="Vencimento" v-model="movForm.vencimento" />
           <!-- efetivada (data) -->
           <chip-date
             v-if="contaEfetivada || props?.movimentacao?.id"
diff --git a/web-app-vue/src/pages/pagamento/pagamento-form.vue b/web-app-vue/src/pages/pagamento/pagamento-form.vue
index 3129893..199cbd0 100644
--- a/web-app-vue/src/pages/pagamento/pagamento-form.vue
+++ b/web-app-vue/src/pages/pagamento/pagamento-form.vue
@@ -1,22 +1,100 @@
-<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>
+  <v-container fluid>
+    <v-row align="center">
+      <v-form v-model="valid">
+        <div class="column">
+          <conta-autocomplete
+            class="item"
+            label="Conta de origem"
+            v-model="formPagamento.contaOrigem"
+            :rules="[requiredRule]"
+          />
+          <conta-autocomplete
+            class="item"
+            label="Conta de destino"
+            v-model="formPagamento.contaDestino"
+            :rules="[requiredRule]"
+          />
+          <chip-date
+            class="item"
+            label="Data pagamento"
+            v-model="formPagamento.vencimento"
+          />
+          <chip-periodo
+            label="Período"
+            v-model:inicial="formPagamento.inicial"
+            v-model:final="formPagamento.final"
+          ></chip-periodo>
+          <v-divider />
+          <p>valor total das movimentações do período</p>
+          <!-- movimentações do período -->
+          <v-divider />
+          <div class="item row">
+            <v-btn
+              variant="outlined"
+              class="ma-2"
+              color="green"
+              type="submit"
+              icon="mdi-check"
+            ></v-btn>
+            <v-spacer></v-spacer>
+            <v-btn
+              variant="outlined"
+              color="orange"
+              class="ma-2"
+              type="button"
+              @click="router.push('/historico')"
+              icon="mdi-close"
+            ></v-btn>
+          </div>
+        </div>
+      </v-form>
+    </v-row>
+  </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 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>
+<script setup>
+import { reactive, ref } from 'vue'
+import { requiredRule } from '@/services/basic-rules'
+import ContaAutocomplete from '@/shared/conta-autocomplete.vue'
+import ChipPeriodo from '@/shared/chip-periodo.vue'
+import { endOfMonth, startOfMonth } from 'date-fns'
+import ChipDate from '@/shared/chip-date.vue'
+import { router } from '@/services/router'
 
+const valid = ref(false)
+const formPagamento = reactive({
+  contaOrigem: 0,
+  contaDestino: 0,
+  valor: 0,
+  vencimento: new Date(),
+  inicial: startOfMonth(new Date()),
+  final: endOfMonth(new Date())
+})
+</script>
 <style scoped>
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  margin: 5px;
+}
 
+.row {
+  display: flex;
+  flex-direction: row;
+}
 </style>
diff --git a/web-app-vue/src/pages/pagamento/pagamento-page.vue b/web-app-vue/src/pages/pagamento/pagamento-page.vue
index b02eda3..f8d7049 100644
--- a/web-app-vue/src/pages/pagamento/pagamento-page.vue
+++ b/web-app-vue/src/pages/pagamento/pagamento-page.vue
@@ -1,11 +1,19 @@
 <template>
   <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-card
+      elevation="24"
+      min-width="320"
+      >
+      <v-card-text>
+        <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-card-text>
+    </v-card>
 
   </v-container>
 
@@ -20,12 +28,26 @@
 <!--  </div>-->
 </template>
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import PagamentoForm from '@/pages/pagamento/pagamento-form.vue'
 import TransferenciaForm from '@/pages/pagamento/transferencia-form.vue'
+import { useMovimentacaoStore } from '@/stores/movimentacaoStore'
+import { useCategoriaStore } from '@/stores/categoriaStore'
+import { useContaStore } from '@/stores/contaStore'
+
+const movimentacaoStore = useMovimentacaoStore()
+const categoriaStore = useCategoriaStore()
+const contaStore = useContaStore()
 
 const operacao = ref("")
 
+onMounted(async () => {
+  await Promise.all([
+    contaStore.sincronizarContas(),
+    categoriaStore.sincronizarCategorias(),
+    movimentacaoStore.sincronizarMovimentacoes()
+  ])
+})
 </script>
 <style scoped>
 </style>
diff --git a/web-app-vue/src/pages/pagamento/transferencia-form.vue b/web-app-vue/src/pages/pagamento/transferencia-form.vue
index 2251067..896663e 100644
--- a/web-app-vue/src/pages/pagamento/transferencia-form.vue
+++ b/web-app-vue/src/pages/pagamento/transferencia-form.vue
@@ -1,20 +1,89 @@
-<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>
+  <v-container fluid>
+    <v-row align="center">
+      <v-form v-model="valid" @submit.prevent.stop="transferir">
+        <div class="column min300">
+          <conta-autocomplete
+            class="item"
+            label="Conta de origem"
+            v-model="formTransferencia.contaOrigem"
+            :rules="[requiredRule]"
+          />
+          <conta-autocomplete
+            class="item"
+            label="Conta de destino"
+            v-model="formTransferencia.contaDestino"
+            :rules="[requiredRule]"
+          />
+          <v-text-field
+            class="item"
+            :rules="[requiredRule, numberRule]"
+            type="number"
+            v-model="formTransferencia.valor"
+            label="Valor"
+            prepend-inner-icon="mdi-cash-100"
+          />
+          <chip-date
+            class="item"
+            label="Data transferência"
+            v-model="formTransferencia.vencimento"
+          />
+          <v-divider />
+          <div class="item row">
+            <v-btn
+              variant="outlined"
+              class="ma-2"
+              color="green"
+              type="submit"
+              icon="mdi-check"
+            ></v-btn>
+            <v-spacer></v-spacer>
+            <v-btn
+              variant="outlined"
+              color="orange"
+              class="ma-2"
+              type="button"
+              @click="router.push('/historico')"
+              icon="mdi-close"
+            ></v-btn>
+          </div>
+        </div>
+      </v-form>
+    </v-row>
+  </v-container>
 </template>
+<script setup>
+import { reactive, ref } from 'vue'
+import { numberRule, requiredRule } from '@/services/basic-rules'
+import { router } from '@/services/router'
+import ContaAutocomplete from '@/shared/conta-autocomplete.vue'
+import ChipDate from '@/shared/chip-date.vue'
+
+const valid = ref(false)
+const formTransferencia = reactive({
+  contaOrigem: 0,
+  contaDestino: 0,
+  valor: 0,
+  vencimento: Date.now()
+})
 
+const transferir = () => {
+  if (!valid.value) return console.log('invalid form state')
+  console.log('save save save')
+}
+</script>
 <style scoped>
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  margin: 5px;
+}
 
+.row {
+  display: flex;
+  flex-direction: row;
+}
 </style>