diff --git a/ui/common/Controller/Facturas.php b/ui/common/Controller/Facturas.php
new file mode 100644
index 0000000..7881af5
--- /dev/null
+++ b/ui/common/Controller/Facturas.php
@@ -0,0 +1,18 @@
+<?php
+namespace Incoviba\Common\Controller;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+class Facturas {
+  public function __invoke(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'facturas.list');
+  }
+  public function proyecto(Request $request, Response $response, View $view, $id_proyecto): Response {
+    return $view->render($response, 'facturas.proyectos.list', compact('id_proyecto'));
+  }
+  public function proyecto_operador(Request $request, Response $response, View $view, $id_proyecto, $id_operador): Response {
+    return $view->render($response, 'facturas.proyectos.operadores.list', compact('id_proyecto', 'id_operador'));
+  }
+}
diff --git a/ui/common/Controller/Ventas.php b/ui/common/Controller/Ventas.php
new file mode 100644
index 0000000..81eefe0
--- /dev/null
+++ b/ui/common/Controller/Ventas.php
@@ -0,0 +1,15 @@
+<?php
+namespace Incoviba\Common\Controller;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+class Ventas {
+  public function __invoke(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'ventas.list');
+  }
+  public function proyecto(Request $request, Response $response, View $view, $proyecto_id): Response {
+    return $view->render($response, 'ventas.show', compact('proyecto_id'));
+  }
+}
diff --git a/ui/resources/routes/01_facturas.php b/ui/resources/routes/01_facturas.php
new file mode 100644
index 0000000..bd15673
--- /dev/null
+++ b/ui/resources/routes/01_facturas.php
@@ -0,0 +1,10 @@
+<?php
+use Incoviba\Common\Controller\Facturas;
+
+$app->group('/facturas', function($app) {
+  $app->group('/{id_proyecto:[0-9]+}', function($app) {
+    $app->get('/{id_operador:[0-9]+}[/]', [Facturas::class, 'proyecto_operador']);
+    $app->get('[/]', [Facturas::class, 'proyecto']);
+  });
+  $app->get('[/]', Facturas::class);
+});
diff --git a/ui/resources/routes/01_ventas.php b/ui/resources/routes/01_ventas.php
new file mode 100644
index 0000000..09b63cc
--- /dev/null
+++ b/ui/resources/routes/01_ventas.php
@@ -0,0 +1,7 @@
+<?php
+use Incoviba\Common\Controller\Ventas;
+
+$app->group('/ventas', function($app) {
+  $app->get('/{proyecto_id:[0-9]+}[/]', [Ventas::class, 'proyecto']);
+  $app->get('[/]', Ventas::class);
+});
diff --git a/ui/resources/views/facturas/list.blade.php b/ui/resources/views/facturas/list.blade.php
new file mode 100644
index 0000000..cf9bd89
--- /dev/null
+++ b/ui/resources/views/facturas/list.blade.php
@@ -0,0 +1,66 @@
+@extends('layout.base')
+
+@section('content')
+  <h1 class="header">
+    Proyectos
+  </h1>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>
+          Proyecto
+        </th>
+        <th>
+          Inmobiliaria
+        </th>
+      </tr>
+    </thead>
+    <tbody id="proyectos"></tbody>
+  </table>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    const proyectos = {
+      id: '#proyectos',
+      data: [],
+      get: function() {
+        return $.ajax({
+          url: '{{$urls->api}}/proyectos',
+          method: 'get',
+          dataType: 'json'
+        }).then((data) => {
+          if (data.proyectos === null || data.proyectos.length == 0) {
+            return
+          }
+          this.data = data.proyectos
+        }).then(() => {
+          this.draw()
+        })
+      },
+      draw: function() {
+        const parent = $(this.id)
+        $.each(this.data, (i, el) => {
+          const url = '{{$urls->base}}/facturas/' + el.id
+          parent.append(
+            $('<tr></tr>').append(
+              $('<td></td>').append(
+                $('<a></a>').attr('href', url).html(el.descripcion)
+              )
+            ).append(
+              $('<td></td>').append(
+                $('<a></a>').attr('href', url).html(el.inmobiliaria.abreviacion)
+              )
+            )
+          )
+        })
+      },
+      setup: function() {
+        this.get()
+      }
+    }
+    $(document).ready(() => {
+      proyectos.setup()
+    })
+  </script>
+@endpush
diff --git a/ui/resources/views/facturas/proyectos/list.blade.php b/ui/resources/views/facturas/proyectos/list.blade.php
new file mode 100644
index 0000000..82ab227
--- /dev/null
+++ b/ui/resources/views/facturas/proyectos/list.blade.php
@@ -0,0 +1,76 @@
+@extends('layout.base')
+
+@section('content')
+  <h1 class="header">
+    Proyecto <span id="proyecto"></span>
+  </h1>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Operador</th>
+        <th>Representante</th>
+      </tr>
+    </thead>
+    <tbody id="operadores"></tbody>
+  </table>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    const proyecto = {
+      id: '#proyecto',
+      data: {},
+      get: function() {
+        const span = $(this.id)
+        return $.ajax({
+          url: '{{$urls->api}}/proyecto/{{$id_proyecto}}',
+          method: 'get',
+          dataType: 'json'
+        }).then((data) => {
+          this.data = data.proyecto
+          span.html(data.proyecto.descripcion + ' - ' + data.proyecto.inmobiliaria.abreviacion)
+        }).then(() => {
+          operadores.get(this.data.id)
+        })
+      },
+      setup: function() {
+        this.get()
+      }
+    }
+    const operadores = {
+      id: '#operadores',
+      data: [],
+      get: function(proyecto) {
+        return $.getJSON('{{$urls->api}}/proyecto/' + proyecto + '/operadores').then((data) => {
+          if (data.operadores === null || data.operadores.length == 0) {
+            return
+          }
+          this.data = data.operadores
+          return data.proyecto.id
+        }).then((proyecto) => {
+          this.draw(proyecto)
+        })
+      },
+      draw: function(proyecto) {
+        const parent = $(this.id)
+        const base_url = '{{$urls->base}}/facturas/' + proyecto + '/'
+        $.each(this.data, (i, el) => {
+          parent.append(
+            $('<tr></tr>').append(
+              $('<td></td>').append(
+                $('<a></a>').attr('href', base_url + el.id).html(el.descripcion)
+              )
+            ).append(
+              $('<td></td>').append(
+                $('<a></a>').attr('href', base_url + el.id).html(el.representante)
+              )
+            )
+          )
+        })
+      }
+    }
+    $(document).ready(() => {
+      proyecto.setup()
+    })
+  </script>
+@endpush
diff --git a/ui/resources/views/facturas/proyectos/operadores/list.blade.php b/ui/resources/views/facturas/proyectos/operadores/list.blade.php
new file mode 100644
index 0000000..80e97d5
--- /dev/null
+++ b/ui/resources/views/facturas/proyectos/operadores/list.blade.php
@@ -0,0 +1,342 @@
+@extends('layout.base')
+
+@section('content')
+  <h1 class="header">
+    Proyecto <span id="proyecto"></span>
+    <br />
+    Operador <span id="operador"></span>
+  </h1>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Factura</th>
+        <th>Fecha</th>
+        <th>Ventas</th>
+        <th>Valor Neto</th>
+        <th>IVA</th>
+        <th>Valor Bruto</th>
+        <th class="text-right">
+          <button class="btn btn-success" data-toggle="modal" data-target="#modal_agregar">
+            <span class="glyphicon glyphicon-plus"></span>
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody id="facturas"></tbody>
+  </table>
+  <div class="modal" id="modal_agregar" tabindex="-1" role="dialog" aria-labelledby="Agregar Factura">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">Agregar Factura</h4>
+        </div>
+        <div class="modal-body">
+          <form>
+            <div class="form-group">
+              <label for="rut" class="control-label">N&uacute;mero</label>
+              <input type="text" name="factura" class="form-control" />
+            </div>
+            <div class="form-group">
+              <label for="fecha" class="control-label">Fecha</label>
+              <div class="ui calendar" id="factura_fecha">
+                <div class="ui input left icon">
+                  <i class="calendar icon"></i>
+                  <input type="text" name="fecha" />
+                </div>
+              </div>
+            <div class="form-group">
+              <label for="valor_neto" class="control-label">Valor Neto</label>
+              <input type="text" name="valor_neto" class="form-control" />
+            </div>
+            <div class="form-group">
+              <label for="iva" class="control-label">IVA</label>
+              <input type="text" name="iva" class="form-control" />
+            </div>
+            <button class="btn btn-default" data-dismiss="modal" id="cerrar_agregar">Agregar</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    const proyecto = {
+      id: '#proyecto',
+      get: function() {
+        return $.getJSON('{{$urls->api}}/proyecto/{{$id_proyecto}}').then((data) => {
+          $('span#proyecto').html(data.proyecto.descripcion + ' - ' + data.proyecto.inmobiliaria.abreviacion)
+          return data.proyecto.id
+        })
+      },
+      setup: function() {
+        this.get().then((proyecto) => {
+          modal().agregar.setup()
+          modal().add_ventas.setup()
+          operador.setup(proyecto)
+        })
+      }
+    }
+    const operador = {
+      id: '#operador',
+      get: function(proyecto) {
+        return $.getJSON('{{$urls->api}}/operador/{{$id_operador}}').then((data) => {
+          $('span#operador').html(data.operador.descripcion)
+          return data.operador.id
+        })
+      },
+      setup: function(proyecto) {
+        this.get(proyecto).then((operador) => {
+          facturas.get(proyecto, operador)
+        })
+      }
+    }
+    class Ventas {
+      constructor(id) {
+        this.id = id
+        this.data = []
+      }
+      get() {
+        return $.getJSON('{{$urls->api}}/factura/' + this.id + '/ventas').then((data) => {
+          if (data.ventas === null || data.ventas.length == 0) {
+            return
+          }
+          this.data = data.ventas
+        }).then(() => {
+          this.draw()
+        })
+      }
+      getParent() {
+        let tbody = $("tbody.ventas[data-id='" + this.id + "']")
+        if (tbody.length == 0) {
+          const td = $("td.ventas[data-id='" + this.id + "']")
+          tbody = $('<tbody></tbody>').attr('class', 'ventas').attr('data-id', this.id)
+          td.append(
+            $('<table></table>').attr('class', 'table').append(
+              $('<thead></thead>').append(
+                $('<tr></tr>').append(
+                  $('<th></th>').html('Unidad')
+                ).append(
+                  $('<th></th>').html('Valor')
+                ).append(
+                  $('<th></th>').attr('class', 'text-right').append(
+                    $('<button></button>').attr('class', 'btn btn-success')
+                      .attr('data-toggle', 'modal')
+                      .attr('data-target', '#modal_add_ventas')
+                      .attr('data-factura', this.id)
+                      .append(
+                        $('<span></span>').attr('class', 'glyphicon glyphicon-plus')
+                      )
+                  )
+                )
+              )
+            ).append(
+              tbody
+            )
+          )
+        }
+        return tbody
+      }
+      draw() {
+        const parent = this.getParent()
+        parent.html('')
+        $.each(this.data, (i, el) => {
+          parent.append(
+            $('<tr></tr>').append(
+              $('<td></td>').html(el.venta.propiedad.unidades[0].descripcion)
+            ).append(
+              $('<td></td>').html(el.valor.formateado)
+            )
+          )
+        })
+      }
+    }
+    const facturas = {
+      id: '#facturas',
+      data: [],
+      get: function(proyecto, operador) {
+        return $.post('{{$urls->api}}/facturas', {proyecto_id: proyecto, operador_id: operador}).then((data) => {
+          if (data.facturas === null || data.facturas.length == 0) {
+            return
+          }
+          this.data = data.facturas
+        }).then(() => {
+          this.draw()
+        })
+      },
+      draw: function() {
+        const parent = $(this.id)
+        parent.html('')
+        $.each(this.data, (i, el) => {
+          this.data[i].ventas = new Ventas(el.id)
+          this.data[i].ventas.get()
+          parent.append(
+            $('<tr></tr>').append(
+              $('<td></td>').html(el.factura)
+            ).append(
+              $('<td></td>').html(el.fecha.formateada)
+            ).append(
+              $('<td></td>').attr('class', 'ventas').attr('data-id', el.id)
+            ).append(
+              $('<td></td>').html(el.valor_neto.formateado)
+            ).append(
+              $('<td></td>').html(el.iva.formateado)
+            ).append(
+              $('<td></td>').html(el.valor_total.formateado)
+            ).append(
+              $('<td></td>')
+            )
+          )
+        })
+      },
+      add: function() {
+        const fecha = $("#factura_fecha").calendar('get date')
+        const data = {
+          proyecto_id: {{$id_proyecto}},
+          operador_id: {{$id_operador}},
+          factura: $("[name='factura']").val(),
+          fecha: fecha.getFullYear() + '-' + ('00' +(fecha.getMonth() + 1)).slice(-2) + '-' + ('00' + fecha.getDate()).slice(-2),
+          valor_neto: $("[name='valor_neto']").val(),
+          iva: $("[name='iva']").val()
+        }
+        return $.post('{{$urls->api}}/facturas/add', data).then((data) => {
+          this.get(data.input.proyecto_id, data.input.operador_id).then((data) => {
+            this.draw()
+          })
+        })
+      },
+      asignar: function(form) {
+        const data = {
+          factura_id: form.find("[name='factura']").val(),
+          venta_id: form.find("[name='venta']").val(),
+          valor: form.find("[name='valor']").val()
+        }
+        return $.post('{{$urls->api}}/factura/' + data.factura_id + '/ventas/add', data).then((result) => {
+          $.each(this.data, (i, el) => {
+            if (el.id == data.factura_id) {
+              el.ventas.get()
+            }
+          })
+        })
+      },
+      setup: function() {
+        this.get()
+      }
+    }
+    const modal = function() {
+      const base = function(before, id, label) {
+        const div = $('<div></div>').attr('class', 'modal').attr('id', id.substring(1)).attr('tabindex', -1).attr('role', 'dialog').attr('aria-labelledby', label).append(
+          $('<div></div>').attr('class', 'modal-dialog').append(
+              $('<div></div>').attr('class', 'modal-content').append(
+                  $('<div></div>').attr('class', 'modal-header').append(
+                      $('<button></button>').attr('type', 'button').attr('class', 'close').attr('data-dismis', 'modal').attr('aria-label', 'Close').append(
+                          $('<span></span>').attr('aria-hidden', 'true').html('&times;')
+                        )
+                    ).append(
+                      $('<h4></h4>').attr('class', 'modal-title').html(label)
+                    )
+                ).append(
+                  $('<div></div>').attr('class', 'modal-body').append(
+                    $('<form></form>')
+                  )
+                )
+            )
+        )
+        before.after(div)
+        return div
+      }
+      return {
+        agregar: {
+          id: '#modal_agregar',
+          button: '#cerrar_agregar',
+          setup: function() {
+            $(this.id).find(this.button).click((e) => {
+              $(this.id).find('form').trigger('submit')
+            })
+            $(this.id).find('form').submit((e) => {
+              e.preventDefault()
+              facturas.add().then(() => {
+                $(e.target).trigger('reset')
+                $(this.id).modal('toggle')
+              })
+              return false
+            })
+
+            const today = new Date()
+            $('#factura_fecha').calendar({
+              type: 'date',
+              minDate: new Date(today.getFullYear()-15, today.getMonth(), today.getDate()),
+              maxDate: new Date(today.getFullYear()+1, today.getMonth(), today.getDate())
+            })
+          }
+        },
+        add_ventas: {
+          id: '#modal_add_ventas',
+          button: '#cerrar_add_ventas',
+          build: function() {
+            const modal = base($('#modal_agregar'), this.id, 'Asignar Venta')
+            const form = modal.find('form')
+            form.append(
+              $('<input/>').attr('type', 'hidden').attr('name', 'factura')
+            ).append(
+              $('<div></div>').attr('class', 'form-group').append(
+                $('<label></label>').attr('for', 'venta').html('Venta')
+              ).append(
+                $('<select></select>').attr('name', 'venta').attr('class', 'form-control')
+              )
+            ).append(
+              $('<div></div>').attr('class', 'form-group').append(
+                $('<label></label>').attr('for', 'valor').html('Valor')
+              ).append(
+                $('<input/>').attr('type', 'text').attr('name', 'valor').attr('class', 'form-control')
+              )
+            ).append(
+              $('<button></button>').attr('class', 'btn btn-default').attr('data-dismiss', 'modal').attr('id', 'cerrar_add_ventas').html('Asignar')
+            )
+
+            this.get().ventas().then((data) => {
+              const parent = $(this.id).find("select[name='venta']")
+              $.each(data.ventas, (i, el) => {
+                parent.append(
+                  $('<option></option>').attr('value', el.id).html(el.propiedad.unidades[0].descripcion)
+                )
+              })
+            })
+          },
+          get: function() {
+            return {
+              ventas: function() {
+                return $.getJSON('{{$urls->api}}/proyecto/{{$id_proyecto}}/ventas')
+              }
+            }
+          },
+          setup: function() {
+            this.build()
+            $(this.id).find(this.button).click((e) => {
+              $(this.id).find('form').trigger('submit')
+            })
+            $(this.id).on('show.bs.modal', (e) => {
+              var btn = $(e.relatedTarget)
+              var id = btn.data('factura')
+
+              $(this.id).find('form').find("[name='factura']").attr('value', id)
+            })
+            $(this.id).find('form').submit((e) => {
+              e.preventDefault()
+              facturas.asignar($(e.target)).then(() => {
+                $(e.target).trigger('reset')
+                $(this.id).modal('toggle')
+              })
+              return false
+            })
+          }
+        }
+      }
+    }
+    $(document).ready(() => {
+      proyecto.setup()
+    })
+  </script>
+@endpush
diff --git a/ui/resources/views/layout/base.blade.php b/ui/resources/views/layout/base.blade.php
index ac17257..eae569d 100644
--- a/ui/resources/views/layout/base.blade.php
+++ b/ui/resources/views/layout/base.blade.php
@@ -8,10 +8,10 @@
 	@endif
 	Incoviba S. A.</title>
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/semantic.min.css" />
-	<link rel="stylesheet" type="text/css" href="css/app.css" />
-	<link rel="stylesheet" type="text/css" href="css/custom.css" />
-	<link rel="icon" type="image/png" href="images/Isotipo 32.png" />
-	<script type="text/javascript" src="js/app.js"></script>
+	<link rel="stylesheet" type="text/css" href="{{$urls->base}}/css/app.css" />
+	<link rel="stylesheet" type="text/css" href="{{$urls->base}}/css/custom.css" />
+	<link rel="icon" type="image/png" href="{{$urls->base}}/images/Isotipo 32.png" />
+	<script type="text/javascript" src="{{$urls->base}}/js/app.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/semantic.min.js"></script>
 
 	@stack('styles')
diff --git a/ui/resources/views/layout/header.blade.php b/ui/resources/views/layout/header.blade.php
index fe8bc64..2c788c4 100644
--- a/ui/resources/views/layout/header.blade.php
+++ b/ui/resources/views/layout/header.blade.php
@@ -3,7 +3,7 @@
 	<div class="row">
 		<div class="col-md-12">
 			<div class="logo_cabezal">
-				<a href="."><img src="images/logo_cabezal.png" /></a>
+				<a href="."><img src="{{$urls->base}}/images/logo_cabezal.png" /></a>
 			</div>
 		</div>
 	</div>
@@ -13,4 +13,4 @@
 		</div>
 	</div>
 </div>
-</header>
\ No newline at end of file
+</header>
diff --git a/ui/resources/views/operadores/list.blade.php b/ui/resources/views/operadores/list.blade.php
index dffe230..b9301e4 100644
--- a/ui/resources/views/operadores/list.blade.php
+++ b/ui/resources/views/operadores/list.blade.php
@@ -83,6 +83,24 @@
               <label for="proyecto" class="control-label">Proyecto</label>
               <select class="form-control" name="proyecto"></select>
             </div>
+            <div class="form-group">
+              <label for="fecha" class="control-label">Desde</label>
+              <div class="ui calendar" id="proyecto_fecha">
+                <div class="ui input left icon">
+                  <i class="calendar icon"></i>
+                  <input type="text" name="fecha" />
+                </div>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="comision" class="control-label">Comisi&oacute;n</label>
+              <div class="input-group">
+                <input type="text" name="comision" class="form-control" />
+                <div class="input-group-addon">
+                  %
+                </div>
+              </div>
+            </div>
             <button class="btn btn-default" data-dismiss="modal" id="cerrar_proyecto">Asignar</button>
           </form>
         </div>
@@ -93,6 +111,57 @@
 
 @push('scripts')
   <script type="text/javascript">
+    const modal = {
+      general: {
+        id: '#modal_general',
+        button: '#cerrar_general',
+        setup: function() {
+          $(this.id).find(this.button).click((e) => {
+            $(this.id).find('form').trigger('submit')
+          })
+          $(this.id).find('form').submit((e) => {
+            e.preventDefault()
+            operadores.add().operador().then(() => {
+              $(e.target).trigger('reset')
+              $(this.id).modal('toggle')
+              $(this.id).modal('hide')
+            })
+            return false
+          })
+        }
+      },
+      proyecto: {
+        id: '#modal_proyecto',
+        button: '#cerrar_proyecto',
+        setup: function() {
+          $(this.id).on('show.bs.modal', function(e) {
+            const btn = $(e.relatedTarget)
+            const operador = btn.data('operador')
+            const modal = $(this)
+            modal.find("[name='operador']").val(operador)
+          })
+          $(this.id).find(this.button).click((e) => {
+            $(this.id).find('form').trigger('submit')
+          })
+          $(this.id).find('form').submit((e) => {
+            e.preventDefault()
+            operadores.add().proyecto().then(() => {
+              $(e.target).trigger('reset')
+              $(this.id).modal('toggle')
+              $(this.id).modal('toggle')
+            })
+            return false
+          })
+
+          const today = new Date()
+          $('#proyecto_fecha').calendar({
+            type: 'date',
+            minDate: new Date(today.getFullYear()-5, today.getMonth(), today.getDate()),
+            maxDate: new Date(today.getFullYear()+1, today.getMonth(), today.getDate())
+          })
+        }
+      }
+    }
     const operadores = {
       id: '#operadores',
       data: [],
@@ -130,10 +199,10 @@
             })
           }
         }
-
       },
       draw: function() {
         const parent = $(this.id)
+        parent.html('')
         $.each(this.data, (i, el) => {
           const row = $('<tr></tr>').append(
             $('<td></td>').html(el.descripcion)
@@ -205,47 +274,36 @@
           },
           proyecto: () => {
             const parent = $('#modal_proyecto').find('form')
+            const operador = parent.find("[name='operador']").val()
+            const fecha = parent.find("#proyecto_fecha").calendar('get date')
             const data = {
-              operador: parent.find("[name='operador']").val(),
+              comision: parent.find("[name='comision']").val(),
+              fecha: fecha.getFullYear() + '-' + ('00' +(fecha.getMonth() + 1)).slice(-2) + '-' + ('00' + fecha.getDate()).slice(-2),
               proyecto: parent.find("[name='proyecto']").val()
             }
-            console.debug(data)
+            return $.ajax({
+              url: '{{$urls->api}}/operador/' + operador + '/proyectos/add',
+              method: 'post',
+              data: data,
+              dataType: 'json'
+            }).then(() => {
+              this.get().operadores()
+            })
           }
         }
+      },
+      edit: function() {
+
+      },
+      remove: function() {
+
       },
       setup: function() {
         this.get().operadores()
         this.get().proyectos()
 
-        $('#modal_general').find('#cerrar_general').click((e) => {
-          $('#modal_general').find('form').trigger('submit')
-        })
-        $('#modal_general').find('form').submit((e) => {
-          e.preventDefault()
-          this.add().operador().then(() => {
-            $(e.target).trigger('reset')
-            $('#modal_general').modal('toggle')
-          })
-          return false
-        })
-
-        $('#modal_proyecto').on('show.bs.modal', function(e) {
-          const btn = $(e.relatedTarget)
-          const operador = btn.data('operador')
-          const modal = $(this)
-          modal.find("[name='operador']").val(operador)
-        })
-        $('#modal_proyecto').find('#cerrar_proyecto').click((e) => {
-          $('#modal_proyecto').find('form').trigger('submit')
-        })
-        $('#modal_proyecto').find('form').submit((e) => {
-          e.preventDefault()
-          this.add().proyecto().then(() => {
-            $(e.target).trigger('reset')
-            $('#modal_proyecto').modal('toggle')
-          })
-          return false
-        })
+        modal.general.setup()
+        modal.proyecto.setup()
       }
     }
     $(document).ready(() => {
diff --git a/ui/resources/views/ventas/list.blade.php b/ui/resources/views/ventas/list.blade.php
new file mode 100644
index 0000000..76036da
--- /dev/null
+++ b/ui/resources/views/ventas/list.blade.php
@@ -0,0 +1,48 @@
+@extends('layout.base')
+
+@section('content')
+  <h1 class="header">
+    Ventas
+  </h1>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>
+          Proyecto
+        </th>
+        <th>
+          Inmobiliaria
+        </th>
+      </tr>
+    </thead>
+    <tbody id="proyectos"></tbody>
+  </table>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    $(document).ready(() => {
+      const base_url = '{{$urls->base}}/ventas/'
+      $.ajax({
+        url: '{{$urls->api}}/proyectos',
+        method: 'get',
+        dataType: 'json'
+      }).then((data) => {
+        const parent = $('#proyectos')
+        $.each(data.proyectos, function(i, el) {
+          parent.append(
+            $('<tr></tr>').append(
+              $('<td></td>').append(
+                $('<a></a>').attr('href', base_url + el.id).html(el.descripcion)
+              )
+            ).append(
+              $('<td></td>').append(
+                $('<a></a>').attr('href', base_url + el.id).html(el.inmobiliaria.abreviacion)
+              )
+            )
+          )
+        })
+      })
+    })
+  </script>
+@endpush
diff --git a/ui/resources/views/ventas/show.blade.php b/ui/resources/views/ventas/show.blade.php
new file mode 100644
index 0000000..0d375fc
--- /dev/null
+++ b/ui/resources/views/ventas/show.blade.php
@@ -0,0 +1,125 @@
+@extends('layout.base')
+
+@section('content')
+  <h1 class="header">
+    Ventas - <span id="proyecto"></span>
+  </h1>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>
+          Departamento
+        </th>
+        <th>
+          Propietario
+        </th>
+        <th class="text-right">
+          Valor
+        </th>
+        <th>
+          Operador
+        </th>
+        <th class="text-right">
+          Comisi&oacute;n
+        </th>
+        <th>
+          Facturas
+        </th>
+      </tr>
+    </thead>
+    <tbody id="ventas">
+    </tbody>
+  </table>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    const proyecto = {
+      id: '#proyecto',
+      data: {},
+      get: function() {
+        return $.ajax({
+          url: '{{$urls->api}}/proyecto/{{$proyecto_id}}',
+          method: 'get',
+          dataType: 'json'
+        }).then((data) => {
+          this.data = data.proyecto
+          $(this.id).html(data.proyecto.descripcion + ' - ' + data.proyecto.inmobiliaria.abreviacion)
+        })
+      },
+      setup: function() {
+        this.get().then(() => {
+          ventas.get().ventas(this.data.id)
+        })
+      }
+    }
+    const ventas = {
+      id: '#ventas',
+      data: [],
+      get: function() {
+        return {
+          ventas: (proyecto) => {
+            return $.ajax({
+              url: '{{$urls->api}}/proyecto/' + proyecto + '/ventas',
+              method: 'get',
+              dataType: 'json'
+            }).then((data) => {
+              this.data = data.ventas
+            }).then(() => {
+              this.draw()
+            })
+          },
+          facturas: (unidad) => {
+            return $.ajax({
+              url: '{{$urls->api}}/unidad/' + unidad + '/facturas',
+              method: 'get',
+              dataType: 'json'
+            })
+          }
+        }
+      },
+      draw: function() {
+        const parent = $(this.id)
+        $.each(this.data, (i, el) => {
+          const row = $('<tr></tr>').append(
+            $('<td></td>').html(el.propiedad.unidades[0].descripcion)
+          ).append(
+            $('<td></td>').html(el.propietario.nombre_completo)
+          ).append(
+            $('<td></td>').attr('class', 'text-right').html(el.valor)
+          )
+          if (el.operador) {
+            row.append(
+              $('<td></td>').html(el.operador.descripcion)
+            ).append(
+              $('<td></td>').attr('class', 'text-right').html(el.comision.formateada)
+            ).append(
+              $('<td></td>').attr('id', el.propiedad.unidades[0].id)
+            )
+            this.get().facturas(el.propiedad.unidades[0].id).then((data) => {
+              const td = $('td#' + data.unidad.id)
+              if (data.facturas === null || data.facturas.length == 0) {
+                return
+              }
+              $.each(data.facturas, (k, it) => {
+                console.debug(it)
+              })
+            })
+          } else {
+            row.append(
+              $('<td></td>')
+            ).append(
+              $('<td></td>')
+            ).append(
+              $('<td></td>')
+            )
+          }
+          parent.append(row)
+        })
+      }
+    }
+    $(document).ready(() => {
+      proyecto.setup()
+    })
+  </script>
+@endpush