diff --git a/resources/js/components/comisiones/barrios/BarrioRow.vue b/resources/js/components/comisiones/barrios/BarrioRow.vue
new file mode 100644
index 0000000..ea922e6
--- /dev/null
+++ b/resources/js/components/comisiones/barrios/BarrioRow.vue
@@ -0,0 +1,108 @@
+<script>
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
+import Dropdown from "../../comunes/Dropdown.vue";
+
+export default {
+    name: "BarrioRow",
+    components: { Dropdown },
+    props: {
+        grupo_de_compra: {
+            type: Object,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            saldoControl: 0,
+            inputSaldoInteractuado: false,
+            opcionesDescarga: [
+                {
+                    nombre: "Pedido barrial en csv",
+                    href: `/comisiones/pedidos/${this.grupo_de_compra.id}/`
+                },
+                {
+                    nombre: "Pedido barrial en pdf",
+                    href: `/comisiones/pedidos/${this.grupo_de_compra.id}/pdf`
+                }
+            ],
+        };
+    },
+    mounted() {
+        this.saldoControl = this.grupo_de_compra.saldo;
+    },
+    watch: {
+        lastFetch() {
+            this.saldoControl = this.grupo_de_compra.saldo;
+        },
+    },
+    methods: {
+        ...mapMutations("ui", ["toggleModalBarrio"]),
+        ...mapMutations("comisiones", ["seleccionarGrupoDeCompra"]),
+        ...mapActions("ui", ["toast"]),
+        ...mapActions("comisiones", ["setSaldo"]),
+        async confirmarSaldo() {
+            await this.setSaldo({
+                gdc_id: this.grupo_de_compra.id,
+                saldo: this.saldoControl,
+            });
+            this.inputSaldoInteractuado = false;
+        },
+        abrirModalBarrio() {
+            this.seleccionarGrupoDeCompra({ grupo_de_compra: this.grupo_de_compra });
+            this.toggleModalBarrio();
+        },
+        descargasBarrio() {
+            this.toast({
+                mensaje: `Esto debería ser un dropdown para descargar el pedido de ${this.grupo_de_compra.nombre}`
+            });
+        }
+    },
+    computed: {
+        ...mapState("comisiones", ["lastFetch"]),
+        ...mapGetters("comisiones", ["saldo"]),
+        saldoModificado() {
+            return Number.parseFloat(this.saldo(this.grupo_de_compra.id)) !== Number.parseFloat(this.saldoControl);
+        },
+    }
+}
+</script>
+
+<template>
+    <tr>
+        <th>{{ grupo_de_compra.nombre }}</th>
+        <th>{{ grupo_de_compra.region }}</th>
+        <td>
+            <div class="field has-addons">
+                <div class="control is-expanded">
+                    <input :id="`barrio-input-${grupo_de_compra.id}`"
+                           v-model="saldoControl"
+                           class="input is-small"
+                           type="number"
+                           style="text-align: center"
+                           @input="inputSaldoInteractuado = true">
+                </div>
+                <div class="control">
+                    <button :disabled="!(inputSaldoInteractuado && saldoModificado)"
+                            class="button is-small is-success ml-1"
+                            @click="confirmarSaldo">
+                        <span class="icon"><i class="fas fa-check"/></span>
+                    </button>
+                </div>
+            </div>
+        </td>
+        <td>
+            <dropdown :opciones="opcionesDescarga"
+                      :placeholder="`Pedido de ${grupo_de_compra.nombre}`"
+                      :is-right="false"/>
+        </td>
+        <td>
+            <button class="button is-small"
+                    @click="abrirModalBarrio">
+                <span class="icon"><i class="fas fa-edit"/></span>
+            </button>
+        </td>
+    </tr>
+</template>
+
+<style scoped>
+</style>
diff --git a/resources/js/components/comisiones/barrios/TablaBarrios.vue b/resources/js/components/comisiones/barrios/TablaBarrios.vue
new file mode 100644
index 0000000..e1a4d70
--- /dev/null
+++ b/resources/js/components/comisiones/barrios/TablaBarrios.vue
@@ -0,0 +1,41 @@
+<script>
+import { mapActions, mapState } from "vuex";
+import BarrioRow from "./BarrioRow.vue";
+
+export default {
+    name: "TablaBarrios",
+    components: { BarrioRow },
+    async mounted() {
+        await this.getGruposDeCompra();
+    },
+    methods: {
+        ...mapActions("comisiones", ["getGruposDeCompra"]),
+    },
+    computed: {
+        ...mapState("comisiones", ["grupos_de_compra"]),
+    }
+}
+</script>
+
+<template>
+    <table class="table is-fullwidth is-striped is-bordered">
+        <thead>
+            <tr>
+                <th>Barrio</th>
+                <th>Region</th>
+                <th>Saldo</th>
+                <th>Pedido</th>
+                <th>Modificar</th>
+            </tr>
+        </thead>
+        <tbody>
+            <barrio-row v-for="(gdc,index) in grupos_de_compra"
+                       :grupo_de_compra="gdc"
+                       :key="index"/>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/store/modules/comisiones.js b/resources/js/store/modules/comisiones.js
index 414e84c..648bc43 100644
--- a/resources/js/store/modules/comisiones.js
+++ b/resources/js/store/modules/comisiones.js
@@ -4,6 +4,7 @@ const state = {
     lastFetch: undefined,
     grupos_de_compra: [],
     parametros: [],
+    grupo_de_compra_actual: undefined,
 };
 
 const mutations = {
@@ -25,6 +26,9 @@ const mutations = {
         const i = state.grupos_de_compra.indexOf(barrio);
         state.grupos_de_compra[i].saldo = saldo;
     },
+    seleccionarGrupoDeCompra(state, { grupo_de_compra }) {
+        state.grupo_de_compra_actual = grupo_de_compra;
+    },
 };
 
 const actions = {