inicios del FrontEnd

APP/pages/GeneralViews/NotFoundPage.vue

@@ -0,0 +1,40 @@
+<template>
+  <auth-layout class="not-found-page">
+    <div class="centered">
+      <h1><i class="not-found-icon nc-icon nc-puzzle-10"></i>404</h1>
+      <p>The page you requested could not be found.</p>
+    </div>
+  </auth-layout>
+</template>
+
+<script>
+export default {
+  layout: 'auth'
+};
+</script>
+<style lang="scss">
+.not-found-page {
+  .full-page > .content,
+  .centered {
+    min-height: calc(100vh - 160px);
+  }
+  .not-found-icon {
+    margin-right: 10px;
+  }
+  .centered {
+    h1,
+    i {
+      font-size: 50px;
+    }
+    p {
+      font-size: 20px;
+    }
+    display: flex;
+    padding-bottom: 150px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+  }
+}
+</style>

APP/pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

APP/pages/compras.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="row">
+      <card class="col-8">
+        <el-table
+          :data="
+            compras.filter(
+              (data) =>
+                !search ||
+                data.detalle.toLowerCase().includes(search.toLowerCase()) ||
+                data.fecha.toLowerCase().includes(search.toLowerCase()) ||
+                data.metodo_pago.toLowerCase().includes(search.toLowerCase()) ||
+                data.categoria.toLowerCase().includes(search.toLowerCase())
+            )
+          "
+          border
+          height="900"
+        >
+          <el-TableColumn prop="fecha" label="Fecha" sortable> </el-TableColumn>
+          <el-TableColumn prop="detalle" label="Detalle" sortable>
+          </el-TableColumn>
+          <el-TableColumn prop="valor" label="Valor" sortable> </el-TableColumn>
+
+          <el-TableColumn prop="metodo_pago" label="Metodo de pago" sortable>
+          </el-TableColumn>
+
+          <el-TableColumn prop="categoria" label="Categoria" sortable>
+          </el-TableColumn>
+          <el-TableColumn label="Actions" sortable>
+            <div slot-scope="{ row, $index }">
+              <el-tooltip content="Delete" effect="light">
+                <base-button
+                  type="danger"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteCompra($index)"
+                >
+                  <i class="fas fa-trash"></i>
+                </base-button>
+              </el-tooltip>
+              <el-tooltip content="Edit">
+                <base-button
+                  type="primary"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteCompra($index)"
+                >
+                  <i class="fas fa-edit"></i>
+                </base-button>
+              </el-tooltip>
+            </div>
+
+            <template slot="header" slot-scope="scope">
+              <el-input
+                v-model="search"
+                size="mini"
+                placeholder="Type to search"
+              />
+            </template>
+          </el-TableColumn>
+        </el-table>
+      </card>
+
+      <card class="col-4">
+        <base-input
+          label="Fecha"
+          v-model="newCompra.fecha"
+          type="Date"
+        ></base-input>
+        <base-input
+          label="Descripcion"
+          v-model="newCompra.detalle"
+        ></base-input>
+        <base-input
+          label="Valor"
+          type="Number"
+          v-model="newCompra.valor"
+        ></base-input>
+        <base-input label="Metodo de pago">
+          <select class="form-control" v-model="newCompra.metodo_pago">
+            <option v-for="metodo in metodos_pago">{{ metodo.metodo }}</option>
+          </select>
+        </base-input>
+        <base-input label="categoría">
+          <select class="form-control" v-model="newCompra.categoria">
+            <option v-for="categoria in categorias">{{ categoria.ctg }}</option>
+          </select>
+        </base-input>
+        <base-button type="primary" class="mb-3" size="lg" @click="saveCompra()"
+          >Guardar</base-button
+        >
+      </card>
+    </div>
+  </div>
+</template>
+<script>
+import { Table, TableColumn } from "element-ui";
+import { Select, Option } from "element-ui";
+export default {
+  components: {
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn,
+    [Option.name]: Option,
+    [Select.name]: Select,
+  },
+  data() {
+    return {
+      newCompra: {
+        fecha: "",
+        detalle: "",
+        valor: 0,
+        metodo_pago: "",
+        categoria: "",
+      },
+      compras: [],
+      search: "",
+      metodos_pago: [
+        {
+          metodo: "Efectivo",
+        },
+        {
+          metodo: "Tarjeta Credito",
+        },
+        {
+          metodo: "Tarjeta Debito",
+        },
+      ],
+      categorias: [
+        {
+          ctg: "Restaurante",
+        },
+        {
+          ctg: "Servicios",
+        },
+        {
+          ctg: "Transporte",
+        },
+      ],
+    };
+  },
+  methods: {
+    saveCompra() {
+      var compra = JSON.stringify(this.newCompra);
+      this.compras.push(JSON.parse(compra));
+      console.log(compra);
+    },
+    deleteCompra(index) {
+      this.compras.splice(index, 1);
+      //console.log(index)
+    },
+  },
+};
+</script>
+
+<style>
+</style>

APP/pages/ingresos.vue

@@ -0,0 +1,7 @@
+<template>
+    
+    <div>
+        Ingresos
+    </div>
+
+</template>

APP/pages/presupuesto.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Presupuesto</h1>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

APP/pages/resumen.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Resumen</h1>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>