diff --git a/ui/common/Controller/Config.php b/ui/common/Controller/Config.php
new file mode 100644
index 0000000..1ee4dda
--- /dev/null
+++ b/ui/common/Controller/Config.php
@@ -0,0 +1,12 @@
+<?php
+namespace Contabilidad\Common\Controller;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+class Config {
+    public function __invoke(Request $request, Response $response, View $view): Response {
+        return $view->render($response, 'config.list');
+    }
+}
\ No newline at end of file
diff --git a/ui/common/Controller/Home.php b/ui/common/Controller/Home.php
index 86ad804..60f6942 100644
--- a/ui/common/Controller/Home.php
+++ b/ui/common/Controller/Home.php
@@ -9,4 +9,7 @@ class Home {
   public function __invoke(Request $request, Response $response, View $view): Response {
     return $view->render($response, 'home');
   }
+  public function info(Request $request, Response $response, View $view): Response {
+      return $view->render($response, 'info');
+  }
 }
diff --git a/ui/common/Controller/TiposCategorias.php b/ui/common/Controller/TiposCategorias.php
new file mode 100644
index 0000000..efe0b87
--- /dev/null
+++ b/ui/common/Controller/TiposCategorias.php
@@ -0,0 +1,12 @@
+<?php
+namespace Contabilidad\Common\Controller;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+class TiposCategorias {
+  public function __invoke(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'categorias.tipos.list');
+  }
+}
diff --git a/ui/common/Controller/TiposCuentas.php b/ui/common/Controller/TiposCuentas.php
new file mode 100644
index 0000000..e2f1ec4
--- /dev/null
+++ b/ui/common/Controller/TiposCuentas.php
@@ -0,0 +1,12 @@
+<?php
+namespace Contabilidad\Common\Controller;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+class TiposCuentas {
+  public function __invoke(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'cuentas.tipos.list');
+  }
+}
diff --git a/ui/php.ini b/ui/php.ini
new file mode 100644
index 0000000..2f3a539
--- /dev/null
+++ b/ui/php.ini
@@ -0,0 +1,4 @@
+[PHP]
+display_errors = E_ALL
+log_errors = true
+error_log = /var/log/php/error.log
diff --git a/ui/public/assets/scripts/categorias.list.js b/ui/public/assets/scripts/categorias.list.js
index 0fcefa2..ef89080 100644
--- a/ui/public/assets/scripts/categorias.list.js
+++ b/ui/public/assets/scripts/categorias.list.js
@@ -1,28 +1,92 @@
+class Categoria {
+  constructor({id, nombre, tipo_id, tipo, saldo, saldoFormateado}) {
+    this.id = id
+    this.nombre = nombre
+    this.tipo_id = tipo_id
+    this.tipo = tipo
+    this.modal = null
+  }
+  setModal(modal) {
+    this.modal = modal
+  }
+  draw() {
+    return $('<tr></tr>').append(
+      $('<td></td>').html(this.nombre)
+    ).append(
+      $('<td></td>').html(this.tipo.descripcion)
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').append(
+        $('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'edit icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.edit()
+          return false
+        })
+      ).append(
+        $('<button></button>').attr('class', 'ui tiny circular red icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'remove icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.remove()
+          return false
+        })
+      )
+    )
+  }
+  edit() {
+    this.modal.find('form').trigger('reset')
+    this.modal.find('form').find("[name='id']").val(this.id)
+    this.modal.find('form').find("[name='nombre']").val(this.nombre)
+    this.modal.find('form').find("#tipos").dropdown('set selected', this.tipo.id)
+    modalToEdit(this.modal)
+    this.modal.modal('show')
+  }
+  remove() {
+    sendDelete(_urls.api + '/categoria/' + this.id + '/delete').then(() => {
+      categorias.getCategorias()
+    })
+  }
+}
+
 const categorias = {
   id: '#categorias',
   categorias: [],
   modal: null,
   getCategorias: function() {
-    return $.ajax({
-      url: _urls.api + '/categorias',
-      method: 'GET',
-      dataType: 'json'
-    }).then((data) => {
-      if (data.categorias === null || data.categorias.length == 0) {
+    this.categorias = []
+    return sendGet(_urls.api + '/categorias').then((data) => {
+      if (data.categorias === null || data.categorias.length === 0) {
         return
       }
-      this.categorias = data.categorias
+      $.each(data.categorias, (i, el) => {
+        const cat = new Categoria(el)
+        cat.setModal(this.modal)
+        this.categorias.push(cat)
+      })
     }).then(() => {
       this.draw()
     })
   },
+  getTipos: function() {
+    sendGet(_urls.api + '/tipos/categorias').then((data) => {
+      this.modal.find('#tipos').dropdown()
+      let values = []
+      $.each(data.tipos, (i, el) => {
+        values.push({value: el.id, text: el.descripcion, name: el.descripcion})
+      })
+      this.modal.find('#tipos').dropdown('change values', values)
+    })
+  },
   getParent: function() {
     let parent = $(this.id).find('tbody')
-    if (parent.length == 0) {
+    if (parent.length === 0) {
       const table = $('<table></table>').attr('class', 'ui table').append(
         $('<thead></thead>').append(
           $('<tr></tr>').append(
             $('<th></th>').html('Categoría')
+          ).append(
+            $('<th></th>').html('Tipo')
           ).append(
             $('<th></th>').attr('class', 'right aligned').append(
               $('<button></button>').attr('class', 'ui tiny green circular icon button').append(
@@ -47,27 +111,31 @@ const categorias = {
     const parent = this.getParent()
     parent.html('')
     $.each(this.categorias, (i, el) => {
-      parent.append(
-        $('<tr></tr>').append(
-          $('<td></td>').html(el.nombre)
-        )
-      )
+      parent.append(el.draw())
     })
   },
   add: function() {
     this.modal.find('form').trigger('reset')
+    modalToAdd(this.modal)
     this.modal.modal('show')
   },
   doAdd: function() {
     const data = JSON.stringify({
-      nombre: $("[name='nombre']").val()
+      nombre: $("[name='nombre']").val(),
+      tipo_id: $("[name='tipo']").val()
     })
-    return $.ajax({
-      url: _urls.api + '/categorias/add',
-      method: 'POST',
-      data: data,
-      dataType: 'json'
-    }).then((data) => {
+    return sendPost(_urls.api + '/categorias/add', data).then((data) => {
+      this.modal.modal('hide')
+      this.getCategorias()
+    })
+  },
+  doEdit: function() {
+    const id = $("[name='id']").val()
+    const data = JSON.stringify({
+      nombre: $("[name='nombre']").val(),
+      tipo_id: $("[name='tipo']").val()
+    })
+    return sendPut(_urls.api + '/categoria/' + id +'/edit', data).then((data) => {
       this.modal.modal('hide')
       this.getCategorias()
     })
@@ -80,9 +148,16 @@ const categorias = {
     })
     this.modal.find('form').submit((e) => {
       e.preventDefault()
-      this.doAdd()
+      const add = $(e.currentTarget).find('.plus.icon')
+      if (add.length > 0) {
+        this.doAdd()
+      } else {
+        this.doEdit()
+      }
       return false
     })
+
+    this.getTipos()
   },
   setup: function() {
     this.setupModal()
diff --git a/ui/public/assets/scripts/colorpicker.js b/ui/public/assets/scripts/colorpicker.js
new file mode 100644
index 0000000..6b5b3e5
--- /dev/null
+++ b/ui/public/assets/scripts/colorpicker.js
@@ -0,0 +1,80 @@
+class Color {
+    constructor({hex, red, green, blue}) {
+        this.hex = hex ?? 'ffffff'
+        this.red = red ?? 255
+        this.green = green ?? 255
+        this.blue = blue ?? 255
+    }
+    toHex() {
+        this.hex = this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0')
+        return this.hex
+    }
+    toRGB() {
+        this.red = parseInt(this.hex.substring(0,2), 16)
+        this.green = parseInt(this.hex.substring(2,4), 16)
+        this.blue = parseInt(this.hex.substring(4), 16)
+        return [this.red, this.green, this.blue]
+    }
+}
+class ColorPicker {
+    constructor(elem) {
+        this.setup(elem)
+    }
+    setup(elem) {
+        this.elem = elem
+        this.color = new Color({})
+        this.color.hex = elem.val()
+        this.color.toRGB()
+        this.holder = $('<div></div>').attr('class', 'color_picker_holder ui horizontal segments')
+        const red = $('<div></div>').attr('class', 'ui basic segment').append($('<div></div>').attr('class', 'ui red slider').slider({
+            max: 255,
+            start: this.color.red,
+            onMove: (content) => {
+                this.color.red = content
+                this.update()
+            }
+        }))
+        const green = $('<div></div>').attr('class', 'ui basic segment').append($('<div></div>').attr('class', 'ui green slider').slider({
+            max: 255,
+            start: this.color.green,
+            onMove: (content) => {
+                this.color.green = content
+                this.update()
+            }
+        }))
+        const blue = $('<div></div>').attr('class', 'ui basic segment').append($('<div></div>').attr('class', 'ui blue slider').slider({
+            max: 255,
+            start: this.color.blue,
+            onMove: (content) => {
+                this.color.blue = content
+                this.update()
+            }
+        }))
+        const color_cell = $('<div></div>').attr('class', 'ui center aligned compact basic segment').append(
+            $('<i></i>').attr('class', 'massive icons').append(
+                $('<i></i>').attr('class', 'square icon color_cell').css('color', '#' + this.color.toHex())
+            ).append(
+                $('<i></i>').attr('class', 'square outline icon')
+            )
+        )
+        this.holder.append(color_cell)
+        const vseg = $('<div></div>').attr('class', 'ui basic segments')
+        vseg.append(red)
+        vseg.append(green)
+        vseg.append(blue)
+        this.holder.append($('<div></div>').attr('class', 'ui basic segment').append(vseg))
+        this.elem.after(this.holder)
+    }
+    setColor(color) {
+        this.color.hex = color
+        this.color.toRGB()
+        this.update()
+    }
+    update() {
+        this.elem.val(this.color.toHex())
+        this.holder.find('.red').slider('set value', this.color.red, false)
+        this.holder.find('.green').slider('set value', this.color.green, false)
+        this.holder.find('.blue').slider('set value', this.color.blue, false)
+        this.holder.find('.color_cell').css('color', '#' + this.color.toHex())
+    }
+}
diff --git a/ui/public/assets/scripts/cuentas.list.js b/ui/public/assets/scripts/cuentas.list.js
index aad4e20..77d8380 100644
--- a/ui/public/assets/scripts/cuentas.list.js
+++ b/ui/public/assets/scripts/cuentas.list.js
@@ -1,42 +1,126 @@
+class Cuenta {
+  constructor({id, nombre, categoria_id, tipo_id, moneda_id, categoria, tipo, moneda, saldo, saldoFormateado}) {
+    this.id = id
+    this.nombre = nombre
+    this.categoria_id = categoria_id
+    this.tipo_id = tipo_id
+    this.moneda_id = moneda_id
+    this.categoria = categoria
+    this.tipo = tipo
+    this.moneda = moneda
+    this.modal = null
+  }
+  setModal(modal) {
+    this.modal = modal
+  }
+  draw() {
+    return $('<tr></tr>').append(
+      $('<td></td>').html(this.nombre)
+    ).append(
+      $('<td></td>').html(this.categoria.nombre + ' - ' + this.categoria.tipo.descripcion)
+    ).append(
+      $('<td></td>').css('color', '#' + this.tipo.color).html(this.tipo.descripcion)
+    ).append(
+        $('<td></td>').html(this.moneda.codigo)
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').append(
+        $('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'edit icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.edit()
+          return false
+        })
+      ).append(
+        $('<button></button>').attr('class', 'ui tiny circular red icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'remove icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.remove()
+          return false
+        })
+      )
+    )
+  }
+  edit() {
+    const form = this.modal.find('form')
+    form.trigger('reset')
+    form.find("[name='id']").val(this.id)
+    form.find("[name='nombre']").val(this.nombre)
+    form.find("[name='categoria']").dropdown('set selected', this.categoria.id)
+    form.find("[name='tipo']").dropdown('set selected', this.tipo.id)
+    form.find("[name='moneda']").dropdown('set selected', this.moneda.id)
+    modalToEdit(this.modal)
+    this.modal.modal('show')
+  }
+  remove() {
+    sendDelete(_urls.api + '/cuenta/' + this.id + '/delete').then(() => {
+      cuentas.get().cuentas()
+    })
+  }
+}
+
 const cuentas = {
   id: '#cuentas',
   cuentas: [],
   categorias: [],
-  getCuentas: function() {
-    return $.ajax({
-      url: _urls.api + '/cuentas',
-      method: 'GET',
-      dataType: 'json'
-    }).then((data) => {
-      if (data.cuentas === null || data.cuentas.length == 0) {
-        return
+  tipos: [],
+  get: function() {
+    return {
+      cuentas: () => {
+        this.cuentas = []
+        return sendGet(_urls.api + '/cuentas').then((data) => {
+          if (data.cuentas === null || data.cuentas.length === 0) {
+            return
+          }
+          $.each(data.cuentas, (i, el) => {
+            const cuenta = new Cuenta(el)
+            cuenta.setModal(this.modal)
+            this.cuentas.push(cuenta)
+          })
+        }).then(() => {
+          this.draw().cuentas()
+        })
+      },
+      categorias: () => {
+        return sendGet(_urls.api + '/categorias').then((data) => {
+          if (data.categorias === null || data.categorias.length === 0) {
+            return
+          }
+          this.categorias = data.categorias
+        }).then(() => {
+          this.draw().categorias()
+        })
+      },
+      tipos: () => {
+        return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
+          if (data.tipos === null || data.tipos.length === 0) {
+            return
+          }
+          this.tipos = data.tipos
+        }).then(() => {
+          this.draw().tipos()
+        })
+      },
+      monedas: () => {
+        return sendGet(_urls.api + '/monedas').then((data) => {
+          if (data.monedas === null || data.monedas.length === 0) {
+            return
+          }
+          this.monedas = data.monedas
+        }).then(() => {
+          this.draw().monedas()
+        })
+      },
+      parent: () => {
+        const segment = $(this.id)
+        let parent = segment.find('tbody')
+        if (parent.length === 0) {
+          parent = this.buildParent(segment)
+        }
+        return parent
       }
-      this.cuentas = data.cuentas
-    }).then(() => {
-      this.draw()
-    })
-  },
-  getCategorias: function() {
-    return $.ajax({
-      url: _urls.api + '/categorias',
-      method: 'GET',
-      dataType: 'json'
-    }).then((data) => {
-      if (data.categorias === null || data.categorias.length == 0) {
-        return
-      }
-      this.categorias = data.categorias
-    }).then(() => {
-      this.drawCategorias()
-    })
-  },
-  drawCategorias: function() {
-    const select = $("[name='categoria']")
-    $.each(this.categorias, (i, el) => {
-      select.append(
-        $('<option></option>').attr('value', el.id).html(el.nombre)
-      )
-    })
+    }
   },
   buildParent: function(segment) {
     const table = $('<table></table>').attr('class', 'ui table').append(
@@ -45,6 +129,10 @@ const cuentas = {
           $('<th></th>').html('Cuenta')
         ).append(
           $('<th></th>').html('Categoría')
+        ).append(
+          $('<th></th>').html('Tipo')
+        ).append(
+            $('<th></th>').html('Moneda')
         ).append(
           $('<th></th>').attr('class', 'right aligned').append(
             $('<button></button>').attr('class', 'ui tiny green circular icon button').append(
@@ -64,44 +152,73 @@ const cuentas = {
     segment.append(table)
     return parent
   },
-  getParent: function() {
-    const segment = $(this.id)
-    let parent = segment.find('tbody')
-    if (parent.length == 0) {
-      parent = this.buildParent(segment)
-    }
-    return parent
-  },
   draw: function() {
-    const parent = this.getParent()
-    parent.html('')
-    $.each(this.cuentas, (i, el) => {
-      parent.append(
-        $('<tr></tr>').append(
-          $('<td></td>').html(el.nombre)
-        ).append(
-          $('<td></td>').html(el.categoria.nombre)
-        )
-      )
-    })
+    return {
+      cuentas: () => {
+        const parent = this.get().parent()
+        parent.html('')
+        $.each(this.cuentas, (i, el) => {
+          parent.append(el.draw())
+        })
+      },
+      categorias: () => {
+        const select = $("[name='categoria']")
+        $.each(this.categorias, (i, el) => {
+          select.append(
+              $('<option></option>').attr('value', el.id).html(el.nombre + ' - ' + el.tipo.descripcion)
+          )
+        })
+      },
+      tipos: () => {
+        const select = $("[name='tipo']")
+        $.each(this.tipos, (i, el) => {
+          select.append($('<option></option>').attr('value', el.id).html(el.descripcion))
+        })
+      },
+      monedas: () => {
+        const select = $("[name='moneda']")
+        $.each(this.monedas, (i, el) => {
+          const opt = $('<option></option>').attr('value', el.id).html(el.denominacion)
+          if (el.codigo === 'CLP') {
+            opt.attr('selected', 'selected')
+          }
+          select.append(opt)
+        })
+      }
+    }
   },
   add: function() {
     this.modal.find('form').trigger('reset')
+    modalToAdd(this.modal)
     this.modal.modal('show')
   },
   doAdd: function() {
     const data = JSON.stringify({
       categoria_id: $("[name='categoria']").val(),
-      nombre: $("[name='nombre']").val()
+      nombre: $("[name='nombre']").val(),
+      tipo_id: $("[name='tipo']").val(),
+      moneda_id: $("[name='moneda']").val()
     })
-    return $.ajax({
-      url: _urls.api + '/cuentas/add',
-      method: 'POST',
-      data: data,
-      dataType: 'json'
-    }).then((data) => {
+    return sendPost(
+      _urls.api + '/cuentas/add',
+      data
+    ).then((data) => {
       this.modal.modal('hide')
-      this.getCuentas()
+      this.get().cuentas()
+    })
+  },
+  doEdit: function() {
+    form = this.modal.find('form')
+    const id = form.find("[name='id']").val()
+    const data = JSON.stringify({
+      nombre: form.find("[name='nombre']").val(),
+      categoria_id: form.find("[name='categoria']").val(),
+      tipo_id: form.find("[name='tipo']").val(),
+      moneda_id: form.find("[name='moneda']").val()
+    })
+    sendPut(_urls.api + '/cuenta/' + id + '/edit', data).then(() => {
+      this.modal.modal('hide')
+      this.get().cuentas()
     })
   },
   setupModal: function() {
@@ -112,14 +229,23 @@ const cuentas = {
     })
     this.modal.find('form').submit((e) => {
       e.preventDefault()
-      this.doAdd()
+      const add = $(e.currentTarget).find('.ui.button').find('.plus.icon')
+      if (add.length > 0) {
+        this.doAdd()
+      } else {
+        this.doEdit()
+      }
       return false
     })
   },
   setup: function() {
     this.setupModal()
-    this.getCuentas().then(() => {
-      this.getCategorias()
+    this.get().cuentas().then(() => {
+      this.get().categorias().then(() => {
+        this.get().tipos().then(() => {
+          this.get().monedas()
+        })
+      })
     })
   }
 }
diff --git a/ui/public/assets/scripts/cuentas.show.js b/ui/public/assets/scripts/cuentas.show.js
index 9035489..c4f03c6 100644
--- a/ui/public/assets/scripts/cuentas.show.js
+++ b/ui/public/assets/scripts/cuentas.show.js
@@ -1,3 +1,85 @@
+class Transaccion {
+  constructor({id, debito_id, credito_id, fecha, glosa, detalle, valor, debito, credito, fechaFormateada, valorFormateado}) {
+    this.id = id
+    this.debito_id = debito_id
+    this.credito_id = credito_id
+    this.fecha = {
+      fecha,
+      formateada: fechaFormateada
+    }
+    this.glosa = glosa
+    this.detalle = detalle
+    this.valor = {
+      valor,
+      formateado: valorFormateado
+    }
+    this.debito = debito
+    this.credito = credito
+    this.modal = null
+  }
+  setCuenta(cuenta) {
+    this.cuenta = cuenta
+  }
+  setModal(modal) {
+    this.modal = modal
+  }
+  isDebito() {
+    return this.debito.id === this.cuenta.id;
+  }
+  isIncrement() {
+    const debits = ['Activo', 'Perdida']
+    if (debits.indexOf(this.cuenta.tipo.descripcion)) {
+      return this.isDebito()
+    }
+    return !this.isDebito()
+  }
+  draw({saldo, format}) {
+    const fuente = (this.isDebito()) ? this.credito : this.debito
+    return $('<tr></tr>').append(
+      $('<td></td>').html(this.fecha.formateada)
+    ).append(
+      $('<td></td>').append(
+        $('<a></a>').attr('href', _urls.base + 'cuenta/' + fuente.id).html(fuente.nombre + ' (' + fuente.categoria.nombre + ')')
+      )
+    ).append(
+      $('<td></td>').html(this.glosa + '<br />' + this.detalle)
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? '' : format.format(this.valor.valor))
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? format.format(this.valor.valor) : '')
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').html(format.format(saldo))
+    ).append(
+      $('<td></td>').attr('class', 'right aligned')/*.append(
+        $('<button></button>').attr('class', 'ui tiny circular icon button').append(
+          $('<i></i>').attr('class', 'edit icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.edit()
+          return false
+        })
+      )*/.append(
+        $('<button></button>').attr('class', 'ui tiny circular red icon button').append(
+          $('<i></i>').attr('class', 'remove icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.remove()
+          return false
+        })
+      )
+    )
+  }
+  edit() {
+    const form = this.modal.find('form')
+    form.find("[name='fecha']")
+  }
+  remove() {
+    sendDelete(_urls.api + '/transaccion/' + this.id + '/delete').then(() => {
+      transacciones.get().transacciones()
+    })
+  }
+}
+
 const transacciones = {
   id: '#transacciones',
   cuenta_id: 0,
@@ -9,49 +91,50 @@ const transacciones = {
     return {
       transacciones: () => {
         let promises = []
-        $.ajax({
-          url: _urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/amount',
-          method: 'GET',
-          dataType: 'json'
-        }).then((data) => {
-          const amount = data.transacciones
-          const step = 100
-          for (let i = 0; i < amount; i += step) {
-            promises.push($.ajax({
-              url: _urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/' + step + '/' + i,
-              method: 'GET',
-              dataType: 'json'
-            }))
+        sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/amount').then((data) => {
+          if (data.cuenta === null) {
+            return
           }
-          Promise.all(promises).then((data_arr) => {
-            if (data_arr[0].cuenta === null) {
-              return
-            }
-            this.cuenta = data_arr[0].cuenta
-            this.saldo = this.cuenta.saldo
-            $('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')')
-            this.transacciones = []
-            data_arr.forEach(data => {
-              if (data.transacciones === null || data.transacciones.length == 0) {
-                return
-              }
-              this.transacciones.push(...data.transacciones)
+          this.cuenta = data.cuenta
+          this.saldo = this.cuenta.saldo
+          $('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')').append(
+              $('<i></i>').attr('class', 'square full icon').css('color', '#' + this.cuenta.tipo.color)
+          )
+          const amount = data.transacciones
+          const step = 50
+          for (let i = 0; i < amount; i += step) {
+            promises.push(
+              sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/' + step + '/' + i)
+            )
+          }
+          if (promises.length > 0) {
+            Promise.all(promises).then((data_arr) => {
+              this.transacciones = []
+              data_arr.forEach(data => {
+                if (data.transacciones === null || data.transacciones.length === 0) {
+                  return
+                }
+                $.each(data.transacciones, (i, el) => {
+                  const tr = new Transaccion(el)
+                  tr.setCuenta(this.cuenta)
+                  tr.setModal(this.modal)
+                  this.transacciones.push(tr)
+                })
+              })
+              this.transacciones.sort((a, b) => {
+                return (new Date(b.fecha)) - (new Date(a.fecha))
+              })
+            }).then(() => {
+              this.draw()
             })
-            this.transacciones.sort((a, b) => {
-              return (new Date(b.fecha)) - (new Date(a.fecha))
-            })
-          }).then(() => {
+          } else {
             this.draw()
-          })
+          }
         })
       },
       cuentas: () => {
-        return $.ajax({
-          url: _urls.api + '/cuentas',
-          method: 'GET',
-          dataType: 'json'
-        }).then((data) => {
-          if (data.cuentas === null || data.cuentas.length == 0) {
+        return sendGet(_urls.api + '/cuentas').then((data) => {
+          if (data.cuentas === null || data.cuentas.length === 0) {
             return
           }
           this.cuentas = data.cuentas
@@ -67,29 +150,12 @@ const transacciones = {
     }
   },
   draw: function() {
-    const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
+    const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: this.cuenta.moneda.codigo})
     const parent = $(this.id)
     parent.html('')
     $.each(this.transacciones, (i, el) => {
-      const fuente = (el.valor < 0) ? el.hasta : el.desde
-      parent.append(
-        $('<tr></tr>').append(
-          $('<td></td>').html(el.fechaFormateada)
-        ).append(
-          $('<td></td>').append(
-            $('<a></a>').attr('href', _urls.base + 'cuenta/' + fuente.id).html(fuente.nombre + ' (' + fuente.categoria.nombre + ')')
-          )
-        ).append(
-          $('<td></td>').html(el.glosa + '<br />' + el.detalle)
-        ).append(
-          $('<td></td>').attr('class', 'right aligned').html((el.valor < 0) ? '' : el.valorFormateado.replace('-', ''))
-        ).append(
-          $('<td></td>').attr('class', 'right aligned').html((el.valor < 0) ? el.valorFormateado.replace('-', '') : '')
-        ).append(
-          $('<td></td>').attr('class', 'right aligned').html(format.format(this.saldo))
-        )
-      )
-      this.saldo -= parseInt(el.valor)
+      parent.append(el.draw({saldo: this.saldo, format: format}))
+      this.saldo = this.saldo + parseInt(el.valor.valor) * ((el.isIncrement()) ? 1 : -1)
     })
   },
   add: function() {
@@ -99,22 +165,26 @@ const transacciones = {
         this.modal.modal('show')
       },
       exec: () => {
+        const fecha = $("[name='fecha']").val()
+        const data1 = JSON.stringify({
+          desde_id: $("[name='moneda']").val(),
+          hasta_id: 1,
+          fecha: fecha,
+          valor: $("[name='cambio']").val()
+        })
+        sendPut(_urls.api + '/tipos/cambios/add', data1)
+
         const valor = $("[name='valor']").val()
         const cuenta = $("[name='cuenta']").val()
         const data = JSON.stringify({
-          desde_id: (valor < 0) ? this.cuenta_id : cuenta,
-          hasta_id: (valor < 0) ? cuenta : this.cuenta_id,
-          fecha: $("[name='fecha']").val(),
+          debito_id: (valor < 0) ? this.cuenta_id : cuenta,
+          credito_id: (valor < 0) ? cuenta : this.cuenta_id,
+          fecha: fecha,
           glosa: $("[name='glosa']").val(),
           detalle: $("[name='detalle']").val(),
           valor: (valor < 0) ? -valor : valor
         })
-        return $.ajax({
-          url: _urls.api + '/transacciones/add',
-          method: 'POST',
-          data: data,
-          dataType: 'json'
-        }).then(() => {
+        return sendPost(_urls.api + '/transacciones/add', data).then(() => {
           this.modal.modal('hide')
           this.get().transacciones()
         })
diff --git a/ui/public/assets/scripts/home.js b/ui/public/assets/scripts/home.js
index e476b0f..8cbe3d2 100644
--- a/ui/public/assets/scripts/home.js
+++ b/ui/public/assets/scripts/home.js
@@ -1,19 +1,234 @@
+const down_icon = 'right chevron'
+const up_icon = 'down chevron'
+
+class Cuenta {
+  constructor({id, nombre, tipo_id, categoria_id, tipo, saldo, saldoFormateado}) {
+    this.id = id
+    this.nombre = nombre
+    this.tipo_id = tipo_id
+    this.categoria_id = categoria_id
+    this.tipo = tipo
+    this.saldo = {
+      saldo,
+      formateado: saldoFormateado
+    }
+  }
+  setTipos(tipos) {
+    this.tipos = tipos
+  }
+  draw() {
+    const tr = $('<tr></tr>').attr('data-id', this.id).attr('data-class', 'cuenta').append(
+        $('<td></td>').append(
+            $('<i></i>').attr('class', 'angle right icon')
+        )
+    ).append(
+        $('<td></td>').append(
+            $('<i></i>').attr('class', 'angle right icon')
+        )
+    ).append(
+      $('<td></td>').append(
+        $('<a></a>').attr('href', _urls.base + 'cuenta/' + this.id).append(
+            $('<i></i>').attr('class', 'square full icon').css('color', '#' + this.tipo.color)
+        ).append(this.nombre)
+      )
+    )
+    $.each(this.tipos, (i, m) => {
+      const td = $('<td></td>').attr('class', 'right aligned')
+      if (m.descripcion === this.tipo.descripcion) {
+        td.html(this.saldo.formateado)
+      }
+      tr.append(td)
+    })
+    $("[data-id='" + this.categoria_id + "'][data-class='categoria']").after(tr)
+  }
+  remove() {
+    $("[data-id='" + this.id + "'][data-class='cuenta']").remove()
+  }
+}
+class Categoria {
+  constructor({id, nombre, tipo_id, tipo, activos, pasivos, ganancias, perdidas}) {
+    this.id = id
+    this.nombre = nombre
+    this.tipo_id = tipo_id
+    this.tipo = tipo
+    this.activos = activos
+    this.pasivos = pasivos
+    this.ganancias = ganancias
+    this.perdidas = perdidas
+    this.is_open = false
+    this.cuentas = []
+  }
+  setTipos(tipos) {
+    this.tipos = tipos
+}
+  draw({format}) {
+    const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
+      $('<i></i>').attr('class', down_icon + ' icon')
+    ).click((e) => {
+      const plus = button.find('.' + down_icon.replace(' ', '.') + '.icon')
+      if (plus.length > 0) {
+        this.loadCuentas()
+        button.find('i.icon').removeClass(down_icon).addClass(up_icon)
+        this.is_open = true
+      } else {
+        this.removeCuentas()
+        button.find('i.icon').removeClass(up_icon).addClass(down_icon)
+        this.is_open = false
+      }
+    })
+    const tr = $('<tr></tr>').attr('data-id', this.id).attr('data-class', 'categoria').append(
+        $('<td></td>').append($('<span></span>').html('<i class="angle right icon"></i>'))
+    ).append(
+      $('<td></td>').attr('colspan', 2).append(
+        $('<div></div>').append(button).append(this.nombre)
+      )
+    )
+    $.each(this.tipos, (i, el) => {
+      tr.append(
+          $('<td></td>').attr('class', 'right aligned').html(format.format(this[el.descripcion.toLowerCase() + 's']))
+      )
+    })
+    $("[data-id='" + this.tipo_id + "'][data-class='tipo_categoria']").after(tr)
+    if (this.is_open) {
+      button.trigger('click')
+    }
+  }
+  remove() {
+    this.removeCuentas()
+    $("[data-id='" + this.id + "'][data-class='categoria']").remove()
+  }
+  loadCuentas() {
+    if (this.cuentas.length === 0) {
+      sendGet(_urls.api + '/categoria/' + this.id + '/cuentas').then((data) => {
+        if (data.cuentas === null || data.cuentas.length === 0) {
+          return
+        }
+        $.each(data.cuentas, (i, el) => {
+          const cuenta = new Cuenta(el)
+          cuenta.setTipos(this.tipos)
+          this.cuentas.push(cuenta)
+        })
+      }).then(() => {
+        this.drawCuentas()
+      })
+      return
+    }
+    this.drawCuentas()
+  }
+  drawCuentas() {
+    if (this.cuentas.length === 0) {
+      $("[data-id='"+this.id+"'][data-class='categoria']").after(
+          $('<tr></tr>').attr('data-class', 'cuenta').attr('data-id', 'vacio').append(
+              $('<td></td>')
+          ).append(
+              $('<td></td>')
+          ).append(
+              $('<td></td>').attr('colspan', 5).html('No hay cuentas.')
+          )
+      )
+      return
+    }
+    $.each(this.cuentas, (i, el) => {
+      el.draw()
+    })
+  }
+  removeCuentas() {
+    if (this.cuentas.length === 0) {
+      $("tr[data-class='cuenta'][data-id='vacio']").remove()
+      return
+    }
+    $.each(this.cuentas, (i, el) => {
+      el.remove()
+    })
+  }
+}
+class TipoCategoria {
+  constructor({id, descripcion, activo, activos, pasivos, ganancias, perdidas}) {
+    this.id = id
+    this.descripcion = descripcion
+    this.activo = activo
+    this.activos = activos
+    this.pasivos = pasivos
+    this.ganancias = ganancias
+    this.perdidas = perdidas
+    this.categorias = []
+  }
+  setTipos(tipos) {
+    this.tipos = tipos
+  }
+  draw({format}) {
+    const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
+      $('<i></i>').attr('class', down_icon + ' icon')
+    ).click((e) => {
+      const plus = button.find('.' + down_icon.replace(' ', '.') + '.icon')
+      if (plus.length > 0) {
+        this.loadCategorias()
+        button.find('i.icon').removeClass(down_icon).addClass(up_icon)
+      } else {
+        this.removeCategorias()
+        button.find('i.icon').removeClass(up_icon).addClass(down_icon)
+      }
+    })
+    const tr = $('<tr></tr>').attr('data-id', this.id).attr('data-class', 'tipo_categoria').append(
+      $('<td></td>').attr('colspan', 3).append(
+        $('<div></div>').append(button).append(this.descripcion)
+      )
+    )
+    $.each(this.tipos, (i, el) => {
+      tr.append($('<td></td>').attr('class', 'right aligned').html(format.format(this[el.descripcion.toLowerCase() + 's'])))
+    })
+    return tr
+  }
+  loadCategorias() {
+    if (this.categorias.length === 0) {
+      sendGet(_urls.api + '/tipos/categoria/' + this.id + '/categorias').then((data) => {
+        if (data.categorias === null || data.categorias.length === 0) {
+          return
+        }
+        $.each(data.categorias, (i, el) => {
+          const cat = new Categoria(el)
+          cat.setTipos(this.tipos)
+          this.categorias.push(cat)
+        })
+      }).then(() => {
+        this.drawCategorias()
+      })
+      return
+    }
+    this.drawCategorias()
+  }
+  drawCategorias() {
+    const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
+    $.each(this.categorias, (i, el) => {
+      el.draw({format})
+    })
+  }
+  removeCategorias() {
+    $.each(this.categorias, (i, el) => {
+      el.remove()
+    })
+  }
+}
 const cuentas = {
-  id: '#cuentas',
-  categorias: [],
+  id: 'cuentas',
+  balance: 0,
+  tipos: [],
+  tipos_categorias: [],
   get: function() {
     return {
       parent: () => {
-        let parent = $(this.id)
+        let parent = $('#' + this.id)
         if (parent.length === 0) {
-          const table = $('<table></table>').attr('class', 'ui striped table').append(
-            $('<thead></thead>').append(
-              $('<tr></tr>').append(
-                $('<th></th>').html('Cuenta')
-              ).append(
-                $('<th></th>').attr('class', 'right aligned').html('Saldo')
-              )
+          const tr = $('<tr></tr>').append(
+              $('<th></th>').attr('colspan', 3).html('Cuenta')
+          )
+          $.each(this.tipos, (i, el) => {
+            tr.append(
+                $('<th></th>').attr('class', 'right aligned').css('color', '#' + el.color).html(el.descripcion)
             )
+          })
+          const table = $('<table></table>').attr('class', 'ui striped table').append(
+            $('<thead></thead>').append(tr)
           )
           parent = $('<tbody></tbody>').attr('id', this.id)
           table.append(parent)
@@ -21,107 +236,74 @@ const cuentas = {
         }
         return parent
       },
-      categorias: () => {
-        return $.ajax({
-          url: _urls.api + '/categorias',
-          method: 'GET',
-          dataType: 'json'
-        }).then((data) => {
-          if (data.categorias === null || data.categorias.length == 0) {
+      tipos_cuentas: () => {
+        return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
+          if (data.tipos === null || data.tipos.length === 0) {
             return
           }
-          this.categorias = data.categorias
-        }).then(() => {
-          this.draw().categorias()
+          this.tipos = data.tipos
         })
       },
-      cuentas: (categoria_id) => {
-        return $.ajax({
-          url: _urls.api + '/categoria/' + categoria_id + '/cuentas',
-          method: 'GET',
-          dataType: 'json'
-        }).then((data) => {
-          if (data.cuentas === null || data.cuentas.length == 0) {
+      tipos_categorias: () => {
+        return sendGet(_urls.api + '/tipos/categorias').then((data) => {
+          if (data.tipos === null || data.tipos.length === 0) {
             return
           }
-          const idx = this.categorias.findIndex(el => {
-            if (el.id == categoria_id) {
-              return true
-            }
+          $.each(data.tipos, (i, el) => {
+            tipo = new TipoCategoria(el)
+            tipo.setTipos(this.tipos)
+            this.tipos_categorias.push(tipo)
           })
-          this.categorias[idx].cuentas = data.cuentas
         }).then(() => {
-          this.draw().cuentas(categoria_id)
+          this.draw().tipos_categorias()
         })
-      }
-    }
-  },
-  remove: function() {
-    return {
-      cuentas: (categoria_id) => {
-        const idx = this.categorias.findIndex(el => {
-          if (el.id == categoria_id) {
-            return true
-          }
+      },
+      balance: () => {
+        sendGet(_urls.api + '/balance').then((data) => {
+          this.balance = data
+        }).then(() => {
+          this.draw().balance()
         })
-        const parent = $("[data-id='" + categoria_id + "']")
-        for (let i = 0; i < this.categorias[idx].cuentas.length; i ++) {
-          parent.next().remove()
-        }
       }
     }
   },
   draw: function() {
     return {
-      categorias: () => {
+      tipos_categorias: () => {
+        const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
         const parent = this.get().parent()
-        $.each(this.categorias, (i, el) => {
-          const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
-            $('<i></i>').attr('class', 'plus icon')
-          ).click((e) => {
-            const plus = button.find('.plus')
-            if (plus.length == 0) {
-              console.debug(e.target)
-              this.remove().cuentas(el.id)
-              button.find('i.icon').removeClass('minus').addClass('plus')
-            } else {
-              console.debug(e.target)
-              this.get().cuentas(el.id)
-              button.find('i.icon').removeClass('plus').addClass('minus')
-            }
-          })
-          const f = $('<tr></tr>').attr('data-id', el.id).append(
-            $('<td></td>').append(
-              $('<div></div>').append(button).append(el.nombre)
-            )
-          ).append(
-            $('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
-          )
-          parent.append(f)
+        $.each(this.tipos_categorias, (i, el) => {
+          parent.append(el.draw({format, tipos: this.tipos}))
         })
+        this.get().balance()
       },
-      cuentas: (categoria_id) => {
-        const idx = this.categorias.findIndex(el => {
-          if (el.id == categoria_id) {
-            return true
-          }
-        })
-        const parent = $("[data-id='" + categoria_id + "']")
-        $.each(this.categorias[idx].cuentas, (i, el) => {
-          parent.after(
-            $('<tr></tr>').attr('class', 'item').append(
-              $('<td></td>').append(
-                $('<a></a>').attr('href', _urls.base + 'cuenta/' + el.id).html(el.nombre)
+      balance: () => {
+        const parent = this.get().parent().parent()
+        if (parent.find('tfoot').length === 0) {
+          parent.append(
+              $('<tfoot></tfoot>')
+          )
+        }
+        const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
+        const foot = parent.find('tfoot')
+        foot.html('')
+        const tr = $('<tr></tr>').append(
+            $('<th></th>').attr('colspan', 3).html('<b>Total</b>')
+        )
+        $.each(this.tipos, (i, el) => {
+          tr.append(
+              $('<th></th>').attr('class', 'right aligned').append(
+                  $('<b></b>').html(format.format(this.balance[el.descripcion.toLowerCase() + 's']))
               )
-            ).append(
-              $('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
-            )
           )
         })
+        foot.append(tr)
       }
     }
   },
   setup: async function() {
-    this.get().categorias()
+    this.get().tipos_cuentas().then(() => {
+      this.get().tipos_categorias()
+    })
   }
 }
diff --git a/ui/public/assets/scripts/tipos_categorias.list.js b/ui/public/assets/scripts/tipos_categorias.list.js
new file mode 100644
index 0000000..51c72fd
--- /dev/null
+++ b/ui/public/assets/scripts/tipos_categorias.list.js
@@ -0,0 +1,177 @@
+class TipoCategoria {
+  constructor({id, descripcion, activo}) {
+    this.id = id
+    this.descripcion = descripcion
+    this.activo = activo
+    this.modal = null
+  }
+  setModal(modal) {
+    this.modal = modal
+  }
+  draw() {
+    const chk = $('<input/>').attr('type', 'checkbox').attr('name', 'activo_' + this.id).attr('value', '1')
+    if (this.activo === '1') {
+      chk.parent().addClass('active')
+      chk.attr('checked', 'checked')
+      chk.checkbox('check')
+    }
+    chk.checkbox({
+      onChange: () => {
+        this.changeActivo()
+      }
+    })
+    return $('<tr></tr>').append(
+      $('<td></td>').html(this.descripcion)
+    ).append(
+      $('<td></td>').append(
+        $('<div></div>').attr('class', 'ui checkbox').append(chk).append(
+          $('<label></label>').html(' ')
+        )
+      )
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').append(
+        $('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'edit icon')
+        ).click((e) => {
+          this.edit()
+        })
+      ).append(
+        $('<button></button>').attr('class', 'ui tiny circular red icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'remove icon')
+        ).click((e) => {
+          this.remove()
+        })
+      )
+    )
+  }
+  changeActivo() {
+    const data = JSON.stringify({
+      descripcion: this.descripcion,
+      activo: this.activo === '1' ? 0 : 1
+    })
+    return sendPut(_urls.api + '/tipos/categoria/' + this.id + '/edit', data).then((data) => {
+      this.modal.modal('hide')
+      tipos_categorias.getTipos()
+    })
+  }
+  edit() {
+    const form = this.modal.find('form')
+    form.find("[name='id']").val(this.id)
+    form.find("[name='descripcion']").val(this.descripcion)
+    if (this.activo === '1') {
+      form.find("[name='activo']").attr('checked', 'checked')
+    }
+    modalToEdit(this.modal)
+    this.modal.modal('show')
+  }
+  remove() {
+    sendDelete(_urls.api + '/tipos/categoria/' + this.id + '/delete').then(() => {
+      tipos_categorias.getTipos()
+    })
+  }
+}
+
+const tipos_categorias = {
+  id: '#tipos_categorias',
+  tipos: [],
+  modal: null,
+  getTipos: function() {
+    this.tipos = []
+    return sendGet(_urls.api + '/tipos/categorias').then((data) => {
+      if (data.tipos === null || data.tipos.length === 0) {
+        return
+      }
+      $.each(data.tipos, (i, el) => {
+        const tipo = new TipoCategoria(el)
+        tipo.setModal(this.modal)
+        this.tipos.push(tipo)
+      })
+    }).then(() => {
+      this.draw()
+    })
+  },
+  getParent: function() {
+    let parent = $(this.id).find('tbody')
+    if (parent.length === 0) {
+      const table = $('<table></table>').attr('class', 'ui table').append(
+        $('<thead></thead>').append(
+          $('<tr></tr>').append(
+            $('<th></th>').attr('class', 'twelve wide').html('Tipo Categoría')
+          ).append(
+            $('<th></th>').attr('class', 'two wide').html('Activo')
+          ).append(
+            $('<th></th>').attr('class', 'two wide right aligned').append(
+              $('<button></button>').attr('class', 'ui tiny green circular icon button').append(
+                $('<i></i>').attr('class', 'plus icon')
+              )
+            )
+          )
+        )
+      )
+      table.find('.ui.button').click((e) => {
+        e.preventDefault()
+        this.add()
+        return false
+      })
+      parent = $('<tbody></tbody>')
+      table.append(parent)
+      $(this.id).append(table)
+    }
+    return parent
+  },
+  draw: function() {
+    const parent = this.getParent()
+    parent.html('')
+    $.each(this.tipos, (i, el) => {
+      parent.append(el.draw())
+    })
+  },
+  add: function() {
+    this.modal.find('form').trigger('reset')
+    modalToAdd(this.modal)
+    this.modal.modal('show')
+  },
+  doAdd: function() {
+    const data = JSON.stringify({
+      descripcion: $("[name='descripcion']").val(),
+      activo: $("[name='activo']").val()
+    })
+    return sendPost(_urls.api + '/tipos/categorias/add', data).then((data) => {
+      this.modal.modal('hide')
+      this.getTipos()
+    })
+  },
+  doEdit: function() {
+    const form = this.modal.find('form')
+    const id = form.find("[name='id']").val()
+    const data = JSON.stringify({
+      descripcion: form.find("[name='descripcion']").val(),
+      activo: form.find("[name='activo']").is(':checked') ? 1 : 0
+    })
+    return sendPut(_urls.api + '/tipos/categoria/' + id + '/edit', data).then((data) => {
+      this.modal.modal('hide')
+      this.getTipos()
+    })
+  },
+  setupModal: function() {
+    this.modal = $('.ui.modal')
+    this.modal.modal()
+    this.modal.find('.close.icon').click(() => {
+      this.modal.modal('hide')
+    })
+    this.modal.find('form').submit((e) => {
+      e.preventDefault()
+      const add = $(e.currentTarget).find('.plus.icon')
+      if (add.length > 0) {
+        this.doAdd()
+      } else {
+        this.doEdit()
+      }
+      return false
+    })
+  },
+  setup: function() {
+    this.setupModal()
+    this.getTipos()
+  }
+}
diff --git a/ui/public/assets/scripts/tipos_cuentas.list.js b/ui/public/assets/scripts/tipos_cuentas.list.js
new file mode 100644
index 0000000..ea739e9
--- /dev/null
+++ b/ui/public/assets/scripts/tipos_cuentas.list.js
@@ -0,0 +1,165 @@
+class TipoCuenta {
+  constructor({id, descripcion, color}) {
+    this.id = id
+    this.descripcion = descripcion
+    this.color = color
+    this.modal = null
+  }
+  setModal(modal) {
+    this.modal = modal
+  }
+  setPicker(picker) {
+    this.picker = picker
+  }
+  draw() {
+    return $('<tr></tr>').append(
+      $('<td></td>').append(
+          $('<i></i>').attr('class', 'square full icon').css('color', '#' + this.color)
+      ).append(this.descripcion)
+    ).append(
+      $('<td></td>').attr('class', 'right aligned').append(
+        $('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'edit icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.edit()
+          return false
+        })
+      ).append(
+        $('<button></button>').attr('class', 'ui tiny circular red icon button').attr('data-id', this.id).append(
+          $('<i></i>').attr('class', 'remove icon')
+        ).click((e) => {
+          e.preventDefault()
+          this.remove()
+          return false
+        })
+      )
+    )
+  }
+  edit() {
+    const form = this.modal.find('form')
+    form.find("[name='id']").val(this.id)
+    form.find("[name='descripcion']").val(this.descripcion)
+    form.find("[name='color']").val(this.color)
+    this.picker.setColor(this.color)
+    modalToEdit(this.modal)
+    this.modal.modal('show')
+  }
+  remove() {
+    sendDelete(_urls.api + '/tipos/cuenta/' + this.id + '/delete').then(() => {
+      tipos_cuentas.getTipos()
+    })
+  }
+}
+
+const tipos_cuentas = {
+  id: '#tipos_cuentas',
+  tipos: [],
+  getTipos: function() {
+    this.tipos = []
+    return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
+      if (data.tipos === null || data.tipos.length === 0) {
+        return
+      }
+      $.each(data.tipos, (i, el) => {
+        const tipo = new TipoCuenta(el)
+        tipo.setModal(this.modal)
+        tipo.setPicker(this.picker)
+        this.tipos.push(tipo)
+      })
+    }).then(() => {
+      this.draw()
+    })
+  },
+  buildParent: function(segment) {
+    const table = $('<table></table>').attr('class', 'ui table').append(
+      $('<thead></thead>').append(
+        $('<tr></tr>').append(
+          $('<th></th>').html('Tipo')
+        ).append(
+          $('<th></th>').attr('class', 'right aligned').append(
+            $('<button></button>').attr('class', 'ui tiny green circular icon button').append(
+              $('<i></i>').attr('class', 'plus icon')
+            )
+          )
+        )
+      )
+    )
+    table.find('.ui.button').click((e) => {
+      e.preventDefault()
+      this.add()
+      return false
+    })
+    parent = $('<tbody></tbody>')
+    table.append(parent)
+    segment.append(table)
+    return parent
+  },
+  getParent: function() {
+    const segment = $(this.id)
+    let parent = segment.find('tbody')
+    if (parent.length === 0) {
+      parent = this.buildParent(segment)
+    }
+    return parent
+  },
+  draw: function() {
+    const parent = this.getParent()
+    parent.html('')
+    $.each(this.tipos, (i, el) => {
+      parent.append(el.draw())
+    })
+  },
+  add: function() {
+    this.modal.find('form').trigger('reset')
+    this.picker.setColor('ffffff')
+    modalToAdd(this.modal)
+    this.modal.modal('show')
+  },
+  doAdd: function() {
+    const data = JSON.stringify({
+      descripcion: this.modal.find('form').find("[name='descripcion']").val(),
+      color: this.modal.find('form').find("[name='color']").val()
+    })
+    return sendPost(
+      _urls.api + '/tipos/cuentas/add',
+      data
+    ).then((data) => {
+      this.modal.modal('hide')
+      this.getCuentas()
+    })
+  },
+  doEdit: function() {
+    id = this.modal.find('form').find("[name='id']").val()
+    const data = JSON.stringify({
+      descripcion: this.modal.find('form').find("[name='descripcion']").val(),
+      color: this.modal.find('form').find("[name='color']").val()
+    })
+    sendPut(_urls.api + '/tipos/cuenta/' + id + '/edit', data).then((data) => {
+      this.modal.modal('hide')
+      this.getTipos()
+    })
+  },
+  setupModal: function() {
+    this.modal = $('.ui.modal')
+    this.modal.modal()
+    this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
+      this.modal.modal('hide')
+    })
+    this.picker = new ColorPicker(this.modal.find("[name='color']"))
+    this.modal.find('form').submit((e) => {
+      e.preventDefault()
+      const add = $(e.currentTarget).find('.add.icon')
+      if (add.length > 0) {
+        this.doAdd()
+      } else {
+        this.doEdit()
+      }
+      return false
+    })
+  },
+  setup: function() {
+    this.setupModal()
+    this.getTipos()
+  }
+}
diff --git a/ui/resources/routes/config.php b/ui/resources/routes/config.php
new file mode 100644
index 0000000..24f553d
--- /dev/null
+++ b/ui/resources/routes/config.php
@@ -0,0 +1,4 @@
+<?php
+use Contabilidad\Common\Controller\Config;
+
+$app->get('/config', Config::class);
diff --git a/ui/resources/routes/home.php b/ui/resources/routes/home.php
index 8e0c408..9b2c326 100644
--- a/ui/resources/routes/home.php
+++ b/ui/resources/routes/home.php
@@ -1,4 +1,5 @@
 <?php
 use Contabilidad\Common\Controller\Home;
 
+$app->get('/info[/]', [Home::class, 'info']);
 $app->get('[/]', Home::class);
diff --git a/ui/resources/routes/tipos.php b/ui/resources/routes/tipos.php
new file mode 100644
index 0000000..a02e7ed
--- /dev/null
+++ b/ui/resources/routes/tipos.php
@@ -0,0 +1,13 @@
+<?php
+$folder = implode(DIRECTORY_SEPARATOR, [__DIR__, 'tipos']);
+if (file_exists($folder)) {
+    $app->group('/tipos', function($app) use ($folder) {
+        $files = new DirectoryIterator($folder);
+        foreach ($files as $file) {
+            if ($file->isDir() or $file->getExtension() != 'php') {
+                continue;
+            }
+            include_once $file->getRealPath();
+        }
+    });
+}
diff --git a/ui/resources/routes/tipos/tipos_categorias.php b/ui/resources/routes/tipos/tipos_categorias.php
new file mode 100644
index 0000000..2ae21df
--- /dev/null
+++ b/ui/resources/routes/tipos/tipos_categorias.php
@@ -0,0 +1,4 @@
+<?php
+use Contabilidad\Common\Controller\TiposCategorias;
+
+$app->get('/categorias', TiposCategorias::class);
diff --git a/ui/resources/routes/tipos/tipos_cuentas.php b/ui/resources/routes/tipos/tipos_cuentas.php
new file mode 100644
index 0000000..d7b591d
--- /dev/null
+++ b/ui/resources/routes/tipos/tipos_cuentas.php
@@ -0,0 +1,4 @@
+<?php
+use Contabilidad\Common\Controller\TiposCuentas;
+
+$app->get('/cuentas', TiposCuentas::class);
diff --git a/ui/resources/views/categorias/list.blade.php b/ui/resources/views/categorias/list.blade.php
index 666e8b6..88f6340 100644
--- a/ui/resources/views/categorias/list.blade.php
+++ b/ui/resources/views/categorias/list.blade.php
@@ -6,10 +6,19 @@
     <i class="close icon"></i>
     <div class="content">
       <form class="ui form">
+        <input type="hidden" name="id" />
         <div class="field">
           <label>Nombre</label>
           <input type="text" name="nombre" />
         </div>
+        <div class="field">
+          <label>Tipo</label>
+          <div class="ui selection dropdown" id="tipos">
+            <input type="hidden" name="tipo" />
+            <div class="default text">Tipo</div>
+            <div class="menu"></div>
+          </div>
+        </div>
         <button class="ui icon button">
           <i class="plus icon"></i>
         </button>
diff --git a/ui/resources/views/categorias/tipos/base.blade.php b/ui/resources/views/categorias/tipos/base.blade.php
new file mode 100644
index 0000000..a1a0944
--- /dev/null
+++ b/ui/resources/views/categorias/tipos/base.blade.php
@@ -0,0 +1,14 @@
+@extends('config.base')
+
+@section('config_content')
+  <h1 class="ui header">
+    @hasSection('tipos_categorias_title')
+      Tipo Categoría @yield('tipos_categorias_title')
+    @else
+      Tipos Categoría
+    @endif
+  </h1>
+  <div class="ui segment">
+    @yield('tipos_categorias_content')
+  </div>
+@endsection
diff --git a/ui/resources/views/categorias/tipos/list.blade.php b/ui/resources/views/categorias/tipos/list.blade.php
new file mode 100644
index 0000000..5100923
--- /dev/null
+++ b/ui/resources/views/categorias/tipos/list.blade.php
@@ -0,0 +1,33 @@
+@extends('categorias.tipos.base')
+
+@section('tipos_categorias_content')
+  <div id="tipos_categorias"></div>
+  <div class="ui modal">
+    <i class="close icon"></i>
+    <div class="content">
+      <form class="ui form">
+        <input type="hidden" name="id" />
+        <div class="field">
+          <label>Descripci&oacute;n</label>
+          <input type="text" name="descripcion" />
+        </div>
+        <div class="field">
+          <label>Activo</label>
+          <input type="checkbox" name="activo" value="1" />
+        </div>
+        <button class="ui icon button">
+          <i class="plus icon"></i>
+        </button>
+      </form>
+    </div>
+  </div>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript" src="{{$urls->scripts}}/tipos_categorias.list.js"></script>
+  <script type="text/javascript">
+    $(document).ready(() => {
+      tipos_categorias.setup()
+    })
+  </script>
+@endpush
diff --git a/ui/resources/views/config/base.blade.php b/ui/resources/views/config/base.blade.php
new file mode 100644
index 0000000..475369d
--- /dev/null
+++ b/ui/resources/views/config/base.blade.php
@@ -0,0 +1,20 @@
+@extends('layout.base')
+
+@section('page_content')
+    <h1 class="ui header">
+        @hasSection('config_title')
+            @yield('config_title')
+        @else
+            Configuraciones
+        @endif
+    </h1>
+    <div class="ui compact grid">
+        <div class="three wide column">
+            @include('config.menu')
+        </div>
+        <div class="thirteen wide column">
+            <div class="ui segment">
+                @yield('config_content')
+            </div>
+        </div>
+@endsection
diff --git a/ui/resources/views/config/list.blade.php b/ui/resources/views/config/list.blade.php
new file mode 100644
index 0000000..4499e0f
--- /dev/null
+++ b/ui/resources/views/config/list.blade.php
@@ -0,0 +1 @@
+@extends('config.base')
diff --git a/ui/resources/views/config/menu.blade.php b/ui/resources/views/config/menu.blade.php
new file mode 100644
index 0000000..c361fbe
--- /dev/null
+++ b/ui/resources/views/config/menu.blade.php
@@ -0,0 +1,4 @@
+<div class="ui vertical fluid borderless menu">
+    @include('config.menu.tipos_categorias')
+    @include('config.menu.tipos_cuentas')
+</div>
diff --git a/ui/resources/views/config/menu/tipos_categorias.blade.php b/ui/resources/views/config/menu/tipos_categorias.blade.php
new file mode 100644
index 0000000..a14ea7b
--- /dev/null
+++ b/ui/resources/views/config/menu/tipos_categorias.blade.php
@@ -0,0 +1,3 @@
+<a class="item" href="{{$urls->base}}tipos/categorias">
+  Tipos Categorías
+</a>
diff --git a/ui/resources/views/config/menu/tipos_cuentas.blade.php b/ui/resources/views/config/menu/tipos_cuentas.blade.php
new file mode 100644
index 0000000..90dc1ff
--- /dev/null
+++ b/ui/resources/views/config/menu/tipos_cuentas.blade.php
@@ -0,0 +1,3 @@
+<a class="item" href="{{$urls->base}}tipos/cuentas">
+  Tipos Cuentas
+</a>
diff --git a/ui/resources/views/cuentas/list.blade.php b/ui/resources/views/cuentas/list.blade.php
index 9437bd3..6e77d09 100644
--- a/ui/resources/views/cuentas/list.blade.php
+++ b/ui/resources/views/cuentas/list.blade.php
@@ -6,6 +6,7 @@
     <i class="close icon"></i>
     <div class="content">
       <form class="ui form">
+        <input type="hidden" name="id" />
         <div class="inline field">
           <label>Categor&iacute;a</label>
           <select name="categoria"></select>
@@ -14,6 +15,14 @@
           <label>Nombre</label>
           <input type="text" name="nombre" />
         </div>
+        <div class="inline field">
+          <label>Tipo</label>
+          <select name="tipo"></select>
+        </div>
+        <div class="inline field">
+          <label>Moneda</label>
+          <select name="moneda"></select>
+        </div>
         <button class="ui icon button">
           <i class="plus icon"></i>
         </button>
diff --git a/ui/resources/views/cuentas/show.blade.php b/ui/resources/views/cuentas/show.blade.php
index 66ba893..41037b6 100644
--- a/ui/resources/views/cuentas/show.blade.php
+++ b/ui/resources/views/cuentas/show.blade.php
@@ -50,6 +50,7 @@
     <i class="close icon"></i>
     <div class="content">
       <form class="ui form">
+        <input type="hidden" name="id" />
         <div class="field">
           <label>Fecha</label>
           <div class="ui calendar">
diff --git a/ui/resources/views/cuentas/tipos/base.blade.php b/ui/resources/views/cuentas/tipos/base.blade.php
new file mode 100644
index 0000000..a2a8cc9
--- /dev/null
+++ b/ui/resources/views/cuentas/tipos/base.blade.php
@@ -0,0 +1,14 @@
+@extends('config.base')
+
+@section('config_content')
+  <h1 class="ui header">
+    @hasSection('tipos_cuentas_title')
+      Tipo Cuenta @yield('tipos_cuentas_title')
+    @else
+      Tipos Cuenta
+    @endif
+  </h1>
+  <div class="ui basic fitted segment">
+    @yield('tipos_cuentas_content')
+  </div>
+@endsection
diff --git a/ui/resources/views/cuentas/tipos/list.blade.php b/ui/resources/views/cuentas/tipos/list.blade.php
new file mode 100644
index 0000000..481f39f
--- /dev/null
+++ b/ui/resources/views/cuentas/tipos/list.blade.php
@@ -0,0 +1,34 @@
+@extends('cuentas.tipos.base')
+
+@section('tipos_cuentas_content')
+  <div id="tipos_cuentas"></div>
+  <div class="ui modal">
+    <i class="close icon"></i>
+    <div class="content">
+      <form class="ui form">
+        <input type="hidden" name="id" />
+        <div class="field">
+          <label>Descripcion</label>
+          <input type="text" name="descripcion" />
+        </div>
+        <div class="inline field">
+          <lable>Color</lable>
+          <input type="text" name="color" value="ffffff" />
+        </div>
+        <button class="ui icon button">
+          <i class="plus icon"></i>
+        </button>
+      </form>
+    </div>
+  </div>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript" src="{{$urls->scripts}}/colorpicker.js"></script>
+  <script type="text/javascript" src="{{$urls->scripts}}/tipos_cuentas.list.js"></script>
+  <script type="text/javascript">
+    $(document).ready(() => {
+      tipos_cuentas.setup()
+    })
+  </script>
+@endpush
diff --git a/ui/resources/views/info.blade.php b/ui/resources/views/info.blade.php
new file mode 100644
index 0000000..ec65ae7
--- /dev/null
+++ b/ui/resources/views/info.blade.php
@@ -0,0 +1,2 @@
+<?php
+    phpinfo();
diff --git a/ui/resources/views/layout/body/menu.blade.php b/ui/resources/views/layout/body/menu.blade.php
index 1eb00c7..80944d6 100644
--- a/ui/resources/views/layout/body/menu.blade.php
+++ b/ui/resources/views/layout/body/menu.blade.php
@@ -2,4 +2,7 @@
   <a class="item" href="{{$urls->base}}">Inicio</a>
   @include('layout.body.menu.cuentas')
   @include('layout.body.menu.categorias')
+  <div class="right menu">
+    <a class="item" href="{{$urls->base}}config">Config</a>
+  </div>
 </nav>
diff --git a/ui/resources/views/layout/body/scripts.blade.php b/ui/resources/views/layout/body/scripts.blade.php
index f3bfbe3..e9c687d 100644
--- a/ui/resources/views/layout/body/scripts.blade.php
+++ b/ui/resources/views/layout/body/scripts.blade.php
@@ -2,10 +2,45 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js" integrity="sha512-t5mAtfZZmR2gl5LK7WEkJoyHCfyzoy10MlerMGhxsXl3J7uSSNTAW6FK/wvGBC8ua9AFazwMaC0LxsMTMiM5gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <script type="text/javascript">
+  const API_KEY = '{{$api_key}}'
   const _urls = {
     base: '{{$urls->base}}',
     api: '{{$urls->api}}'
   }
+  function buildAjax(url, method) {
+    return {
+      url: url,
+      headers: {
+        'Authorization': 'Bearer ' + API_KEY
+      },
+      method: method,
+      dataType: 'json'
+    }
+  }
+  function sendGet(url) {
+    let ajax_obj = buildAjax(url, 'GET')
+    return $.ajax(ajax_obj)
+  }
+  function sendPost(url, data) {
+    let ajax_obj = buildAjax(url, 'POST')
+    ajax_obj['data'] = data
+    return $.ajax(ajax_obj)
+  }
+  function sendPut(url, data) {
+    let ajax_obj = buildAjax(url, 'PUT')
+    ajax_obj['data'] = data
+    return $.ajax(ajax_obj)
+  }
+  function sendDelete(url) {
+    let ajax_obj = buildAjax(url, 'DELETE')
+    return $.ajax(ajax_obj)
+  }
+  function modalToEdit(modal) {
+    $(modal).find('form').find('button').find('.icon').attr('class', 'edit icon')
+  }
+  function modalToAdd(modal) {
+    $(modal).find('form').find('button').find('.icon').attr('class', 'plus icon')
+  }
 </script>
 
 @stack('scripts')
diff --git a/ui/setup/settings/01_env.php b/ui/setup/settings/01_env.php
index 161b2d4..f31544a 100644
--- a/ui/setup/settings/01_env.php
+++ b/ui/setup/settings/01_env.php
@@ -1,4 +1,5 @@
 <?php
 return [
-  'debug' => $_ENV['DEBUG'] ?? false
+  'debug' => $_ENV['DEBUG'] ?? false,
+  'API_KEY' => $_ENV['API_KEY'] ?? ''
 ];
diff --git a/ui/setup/settings/03_web.php b/ui/setup/settings/03_web.php
index ce36463..5e5d0d3 100644
--- a/ui/setup/settings/03_web.php
+++ b/ui/setup/settings/03_web.php
@@ -16,6 +16,10 @@ return [
       $arr['assets'],
       'scripts'
     ]);
+    $arr['styles'] = implode('/', [
+       $arr['assets'],
+       'styles'
+    ]);
     $arr['api'] = $_ENV['API_URL'] ?? 'http://localhost:9001';
     return (object) $arr;
   }
diff --git a/ui/setup/setups/03_web.php b/ui/setup/setups/03_web.php
index 96e1740..7ef8df1 100644
--- a/ui/setup/setups/03_web.php
+++ b/ui/setup/setups/03_web.php
@@ -8,6 +8,7 @@ return [
       $c->get('folders')->cache,
       null,
       [
+        'api_key' => $c->get('API_KEY'),
         'urls' => $c->get('urls')
       ]
     );