Esqueleto faltantes y sobrantes

resources/js/components/admin/Body.vue

@@ -1,33 +1,28 @@
 <template>
     <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
-        <comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones>
+        <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></tabs-secciones>
         <div class="block" id="pedidos-seccion"
             :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
             <div class="block pb-6" id="pedidos-tabla-y-dropdown" v-show="hayPedidos">
-                <admin-dropdown-descargar
+                <dropdown-descargar
                     :gdc="gdc">
-                </admin-dropdown-descargar>
-                <admin-tabla-pedidos
+                </dropdown-descargar>
+                <tabla-pedidos
                     :pedidos="pedidos" :bonosDeTransporte="bonosDeTransporte" :totalBonosBarriales="totalBonosBarriales">
-                </admin-tabla-pedidos>
+                </tabla-pedidos>
             </div>
             <p class="has-text-centered" v-show="!hayPedidos">
                 Todavía no hay ningún pedido para administrar.
             </p>
         </div>
-        <div class="block pb-6" id="bonos-seccion"
-            :class="seccionActiva === 'bonos-seccion' ? 'is-active' : 'is-hidden'">
-            <admin-tabla-bonos v-show="hayAprobados"
-                :pedidos="pedidos">
-            </admin-tabla-bonos>
-            <p class="has-text-centered" v-show="!hayAprobados">
-                Todavía no hay pedidos aprobados.
-            </p>
+        <div class="block pb-6" id="faltantes-y-sobrantes-seccion"
+            :class="seccionActiva === 'faltantes-y-sobrantes-seccion' ? 'is-active' : 'is-hidden'">
+            <faltantes-y-sobrantes></faltantes-y-sobrantes>
         </div>
         <div class="block pb-6" id="caracteristicas-seccion"
              :class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
-            <admin-caracteristicas-opcionales>
-            </admin-caracteristicas-opcionales>
+            <caracteristicas-opcionales>
+            </caracteristicas-opcionales>
         </div>
     </div>
 </template>
@@ -37,14 +32,14 @@ import CaracteristicasOpcionales from "./CaracteristicasOpcionales.vue";
 import TabsSecciones from "../comunes/TabsSecciones.vue";
 import DropdownDescargar from "./DropdownDescargar.vue";
 import TablaPedidos from "./TablaPedidos.vue";
-import TablaBonos from "./TablaBonos.vue";
+import FaltantesYSobrantes from "./FaltantesYSobrantes.vue";
 export default {
     components: {
         CaracteristicasOpcionales,
         TabsSecciones,
         DropdownDescargar,
         TablaPedidos,
-        TablaBonos,
+        FaltantesYSobrantes,
     },
     data() {
         return {
@@ -53,7 +48,7 @@ export default {
             bonosDeTransporte: 0,
             totalBonosBarriales: 0,
             tabs: [{ id: "pedidos", nombre: "Pedidos" },
-                   { id: "bonos", nombre: "Bonos" },
+                   { id: "faltantes-y-sobrantes", nombre: "Faltantes y Sobrantes" },
                    { id: "caracteristicas", nombre: "Caracteristicas opcionales" }],
             tabActiva: "pedidos",
             seccionActiva: "pedidos-seccion",

resources/js/components/admin/FaltantesYSobrantes.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <div class="block">
+                <tabs-secciones
+                    :tabs="tabs"
+                    :tabInicial="tabActiva"
+                    :clases="['is-centered', 'is-fullwidth']">
+                </tabs-secciones>
+                <div class="block pb-6" id="faltantes-seccion"
+                     :class="seccionActiva === 'faltantes-seccion' ? 'is-active' : 'is-hidden'">
+                    <p>Faltantes</p>
+                </div>
+                <div class="block pb-6" id="sobrantes-seccion"
+                     :class="seccionActiva === 'sobrantes-seccion' ? 'is-active' : 'is-hidden'">
+                    <p>Sobrantes</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import TabsSecciones from "../comunes/TabsSecciones.vue";
+
+export default {
+    name: "FaltantesYSobrantes",
+    components: {
+        TabsSecciones,
+    },
+    data() {
+        return {
+            tabs: [{ id: "faltantes", nombre: "Faltantes" },
+                { id: "sobrantes", nombre: "Sobrantes" }],
+            tabActiva: "faltantes",
+            seccionActiva: "faltantes-seccion",
+        };
+    },
+    methods: {
+        setSeccionActiva(tabId) {
+            this.tabActiva = tabId;
+            this.seccionActiva = tabId + "-seccion";
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/components/comunes/TabsSecciones.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="block">
-        <div class="tabs is-boxed" id="tabs">
+        <div class="tabs"
+            :class="clases">
             <ul class="has-bottom-line">
                 <li v-for="(tab, index) in tabs" class="is-size-6"
                     :key="index"
@@ -20,8 +21,18 @@
 <script>
 export default {
     props: {
-      tabs: Array,
-      tabInicial: String,
+      tabs: {
+          type: Array,
+          required: true
+      },
+      tabInicial: {
+          type: String,
+          required: true
+      },
+      clases: {
+          type: Array,
+          default: () => ['is-boxed']
+      }
     },
     data() {
         return {