diff --git a/js/db/result-set.js b/js/db/result-set.js
index c539ccd2..4144ca2c 100644
--- a/js/db/result-set.js
+++ b/js/db/result-set.js
@@ -1,123 +1,130 @@
-
-var Result = require('./result');
+const Result = require('./result');
 
 /**
  * This class stores the database results.
  */
 module.exports = new Class({
-	 results: null
-	,error: null
+    results: null,
+    error: null,
 
-	/**
-	 * Initilizes the resultset object.
-	 */
-	,initialize(results, error) {
-		this.results = results;
-		this.error = error;
-	}
-	
-	/**
-	 * Gets the query error.
-	 *
-	 * @return {Db.Err} the error or null if no errors hapened
-	 */
-	,getError() {
-		return this.error;
-	}
-	
-	,fetch() {
-		if (this.error)
-			throw this.error;
-	
-		if (this.results !== null
-		&& this.results.length > 0)
-			return this.results.shift();
+    /**
+     * Initilizes the resultset object.
+     */
+    initialize(results, error) {
+        this.results = results;
+        this.error = error;
+    },
 
-		return null;
-	}
-	
-	/**
-	 * Fetchs the next result from the resultset.
-	 *
-	 * @return {Db.Result} the result or %null if error or there are no more results
-	 */
-	,fetchResult() {
-		var result = this.fetch();
-	
-		if (result !== null) {
-			if (result.data instanceof Array)
-				return new Result(result);
-			else
-				return true;
-		}
+    /**
+     * Gets the query error.
+     *
+     * @return {Db.Err} the error or null if no errors hapened
+     */
+    getError() {
+        return this.error;
+    },
 
-		return null;
-	}
+    fetch() {
+        if (this.error) {
+            throw this.error;
+        }
+        console.log('this.results', this.results);
+        if (this.results !== null && this.results.length > 0) {
+            return this.results.shift();
+        }
 
-	/**
-	 * Fetchs the first row object from the next resultset.
-	 *
-	 * @return {Array} the row if success, %null otherwise
-	 */
-	,fetchObject() {
-		var result = this.fetch();
+        return null;
+    },
 
-		if (result !== null
-		&& result.data instanceof Array
-		&& result.data.length > 0)
-			return result.data[0];
+    /**
+     * Fetchs the next result from the resultset.
+     *
+     * @return {Db.Result} the result or %null if error or there are no more results
+     */
+    fetchResult() {
+        const result = this.fetch();
+        console.log('test result', result);
+        if (result !== null) {
+            if (result.data instanceof Array) {
+                return new Result(result);
+            } else {
+                return true;
+            }
+        }
 
-		return null;
-	}
+        return null;
+    },
 
-	/**
-	 * Fetchs data from the next resultset.
-	 *
-	 * @return {Array} the data
-	 */
-	,fetchData() {
-		var result = this.fetch();
+    /**
+     * Fetchs the first row object from the next resultset.
+     *
+     * @return {Array} the row if success, %null otherwise
+     */
+    fetchObject() {
+        const result = this.fetch();
 
-		if (result !== null
-		&& result.data instanceof Array)
-			return result.data;
+        if (
+            result !== null &&
+            result.data instanceof Array &&
+            result.data.length > 0
+        ) {
+            return result.data[0];
+        }
 
-		return null;
-	}
+        return null;
+    },
 
-	/**
-	 * Fetchs the first row and column value from the next resultset.
-	 *
-	 * @return {Object} the value if success, %null otherwise
-	 */
-	,fetchValue() {
-		var row = this.fetchRow();
+    /**
+     * Fetchs data from the next resultset.
+     *
+     * @return {Array} the data
+     */
+    fetchData() {
+        const result = this.fetch();
 
-		if (row instanceof Array && row.length > 0)
-			return row[0];
+        if (result !== null && result.data instanceof Array) {
+            return result.data;
+        }
 
-		return null;
-	}
+        return null;
+    },
 
-	/**
-	 * Fetchs the first row from the next resultset.
-	 *
-	 * @return {Array} the row if success, %null otherwise
-	 */
-	,fetchRow() {
-		var result = this.fetch();
+    /**
+     * Fetchs the first row and column value from the next resultset.
+     *
+     * @return {Object} the value if success, %null otherwise
+     */
+    fetchValue() {
+        const row = this.fetchRow();
 
-		if (result !== null
-		&& result.data instanceof Array
-		&& result.data.length > 0) {
-			var object = result.data[0];
-			var row = new Array(result.columns.length);
-			for(var i = 0; i < row.length; i++)
-				row[i] = object[result.columns[i].name];
-			return row;
-		}
-			
-		return null;
-	}
+        if (row instanceof Array && row.length > 0) {
+            return row[0];
+        }
+
+        return null;
+    },
+
+    /**
+     * Fetchs the first row from the next resultset.
+     *
+     * @return {Array} the row if success, %null otherwise
+     */
+    fetchRow() {
+        const result = this.fetch();
+
+        if (
+            result !== null &&
+            result.data instanceof Array &&
+            result.data.length > 0
+        ) {
+            const object = result.data[0];
+            const row = new Array(result.columns.length);
+            for (let i = 0; i < row.length; i++) {
+                row[i] = object[result.columns[i].name];
+            }
+            return row;
+        }
+
+        return null;
+    }
 });
-
diff --git a/src/css/app.scss b/src/css/app.scss
index d802cb22..bb9084f8 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -26,6 +26,9 @@ a.link {
         text-decoration: underline;
     }
 }
+.default-radius {
+    border-radius: 0.6em;
+}
 .q-card {
     border-radius: 0.6em !important;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index a156624d..0b04c0da 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -63,5 +63,6 @@ export default {
     orderLoadedIntoBasket: 'Comanda carregada a la cistella!',
     at: 'a les',
     back: 'Tornar',
-    remove: 'Esborrar'
+    remove: 'Esborrar',
+    agency: 'Agència'
 };
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 27bdec11..3122b404 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -77,6 +77,7 @@ export default {
     at: 'at',
     back: 'Back',
     remove: 'Remove',
+    agency: 'Agency',
 
     orders: 'Orders',
     order: 'Pending order',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index a7475965..cba2abde 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -83,6 +83,7 @@ export default {
     at: 'a las',
     back: 'Volver',
     remove: 'Borrar',
+    agency: 'Agencia',
 
     orders: 'Pedidos',
     order: 'Pedido pendiente',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index 659ae4b2..3eba4465 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -63,5 +63,6 @@ export default {
     orderLoadedIntoBasket: 'Commande chargée dans le panier!',
     at: 'à',
     back: 'Retour',
-    remove: 'Effacer'
+    remove: 'Effacer',
+    agency: 'Agence'
 };
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 5b92f163..7fd75025 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -64,5 +64,6 @@ export default {
     orderLoadedIntoBasket: 'Pedido carregado na cesta!',
     at: 'às',
     back: 'Voltar',
-    remove: 'Eliminar'
+    remove: 'Eliminar',
+    agency: 'Agência'
 };
diff --git a/src/js/db/connection.js b/src/js/db/connection.js
index c0bde0ff..7c2b1f1a 100644
--- a/src/js/db/connection.js
+++ b/src/js/db/connection.js
@@ -1,5 +1,5 @@
-import { JsonConnection } from '../vn/json-connection'
-import { ResultSet } from './result-set'
+import { JsonConnection } from '../vn/json-connection';
+import { ResultSet } from './result-set';
 
 /**
  * Simulates a connection to a database by making asynchronous requests to a
@@ -15,7 +15,7 @@ const Flag = {
     NOT_NULL: 1,
     PRI_KEY: 2,
     AI: 512 | 2 | 1
-}
+};
 
 const Type = {
     BOOLEAN: 1,
@@ -24,161 +24,165 @@ const Type = {
     STRING: 5,
     DATE: 8,
     DATE_TIME: 9
-}
+};
 
 export class Connection extends JsonConnection {
-    static Flag = Flag
-    static Type = Type
+    static Flag = Flag;
+    static Type = Type;
 
     /**
-   * Runs a SQL query on the database.
-   *
-   * @param {String} sql The SQL statement
-   * @return {ResultSet} The result
-   */
-    async execSql (sql) {
-        const json = await this.send('core/query', { sql })
-        const results = []
-        let err
+     * Runs a SQL query on the database.
+     *
+     * @param {String} sql The SQL statement
+     * @return {ResultSet} The result
+     */
+    async execSql(sql) {
+        const json = await this.send('core/query', { sql });
+        const results = [];
+        let err;
 
         if (json) {
             try {
                 if (json && json instanceof Array) {
                     for (let i = 0; i < json.length; i++) {
                         if (json[i] !== true) {
-                            const rows = json[i].data
-                            const columns = json[i].columns
+                            const rows = json[i].data;
+                            const columns = json[i].columns;
 
-                            const data = new Array(rows.length)
+                            const data = new Array(rows.length);
                             results.push({
                                 data,
                                 columns,
                                 tables: json[i].tables
-                            })
+                            });
 
                             for (let j = 0; j < rows.length; j++) {
-                                const row = (data[j] = {})
+                                const row = (data[j] = {});
                                 for (let k = 0; k < columns.length; k++) {
-                                    row[columns[k].name] = rows[j][k]
+                                    row[columns[k].name] = rows[j][k];
                                 }
                             }
 
                             for (let j = 0; j < columns.length; j++) {
-                                let castFunc = null
-                                const col = columns[j]
+                                let castFunc = null;
+                                const col = columns[j];
 
                                 switch (col.type) {
                                     case Type.DATE:
                                     case Type.DATE_TIME:
                                     case Type.TIMESTAMP:
-                                        castFunc = this.valueToDate
-                                        break
+                                        castFunc = this.valueToDate;
+                                        break;
                                 }
 
                                 if (castFunc !== null) {
                                     if (col.def != null) {
-                                        col.def = castFunc(col.def)
+                                        col.def = castFunc(col.def);
                                     }
 
                                     for (let k = 0; k < data.length; k++) {
                                         if (data[k][col.name] != null) {
-                                            data[k][col.name] = castFunc(data[k][col.name])
+                                            data[k][col.name] = castFunc(
+                                                data[k][col.name]
+                                            );
                                         }
                                     }
                                 }
                             }
                         } else {
-                            results.push(json[i])
+                            results.push(json[i]);
                         }
                     }
                 }
             } catch (e) {
-                err = e
+                err = e;
             }
         }
 
-        return new ResultSet(results, err)
+        return new ResultSet(results, err);
     }
 
     /**
-   * Runs a query on the database.
-   *
-   * @param {String} query The SQL statement
-   * @param {Object} params The query params
-   * @return {ResultSet} The result
-   */
-    async execQuery (query, params) {
-        const sql = query.replace(/#\w+/g, (key) => {
-            const value = params[key.substring(1)]
-            return value ? this.renderValue(value) : key
-        })
+     * Runs a query on the database.
+     *
+     * @param {String} query The SQL statement
+     * @param {Object} params The query params
+     * @return {ResultSet} The result
+     */
+    async execQuery(query, params) {
+        const sql = query.replace(/#\w+/g, key => {
+            const value = params[key.substring(1)];
+            return value ? this.renderValue(value) : key;
+        });
 
-        return await this.execSql(sql)
+        return await this.execSql(sql);
     }
 
-    async query (query, params) {
-        const res = await this.execQuery(query, params)
-        return res.fetchData()
+    async query(query, params) {
+        const res = await this.execQuery(query, params);
+        return res.fetchData();
     }
 
-    async getObject (query, params) {
-        const res = await this.execQuery(query, params)
-        return res.fetchObject()
+    async getObject(query, params) {
+        const res = await this.execQuery(query, params);
+        return res.fetchObject();
     }
 
-    async getValue (query, params) {
-        const res = await this.execQuery(query, params)
-        return res.fetchValue()
+    async getValue(query, params) {
+        const res = await this.execQuery(query, params);
+        console.log('RESSSS: ', res);
+        return res.fetchValue();
     }
 
-    renderValue (v) {
+    renderValue(v) {
         switch (typeof v) {
             case 'number':
-                return v
+                return v;
             case 'boolean':
-                return v ? 'TRUE' : 'FALSE'
+                return v ? 'TRUE' : 'FALSE';
             case 'string':
-                return "'" + v.replace(this.regexp, this.replaceFunc) + "'"
+                return "'" + v.replace(this.regexp, this.replaceFunc) + "'";
             default:
                 if (v instanceof Date) {
                     if (!isNaN(v.getTime())) {
-                        const unixTime = parseInt(fixTz(v).getTime() / 1000)
-                        return 'DATE(FROM_UNIXTIME(' + unixTime + '))'
+                        const unixTime = parseInt(fixTz(v).getTime() / 1000);
+                        return 'DATE(FROM_UNIXTIME(' + unixTime + '))';
                     } else {
-                        return '0000-00-00'
+                        return '0000-00-00';
                     }
                 } else {
-                    return 'NULL'
+                    return 'NULL';
                 }
         }
     }
 
     /*
-   * Parses a value to date.
-   */
-    valueToDate (value) {
-        return fixTz(new Date(value))
+     * Parses a value to date.
+     */
+    valueToDate(value) {
+        return fixTz(new Date(value));
     }
 }
 
 // TODO: Read time zone from db configuration
-const tz = { timeZone: 'Europe/Madrid' }
-const isLocal = Intl.DateTimeFormat().resolvedOptions().timeZone === tz.timeZone
+const tz = { timeZone: 'Europe/Madrid' };
+const isLocal =
+    Intl.DateTimeFormat().resolvedOptions().timeZone === tz.timeZone;
 
-function fixTz (date) {
-    if (isLocal) return date
+function fixTz(date) {
+    if (isLocal) return date;
 
-    const localDate = new Date(date.toLocaleString('en-US', tz))
+    const localDate = new Date(date.toLocaleString('en-US', tz));
     const hasTime =
-    localDate.getHours() ||
-    localDate.getMinutes() ||
-    localDate.getSeconds() ||
-    localDate.getMilliseconds()
+        localDate.getHours() ||
+        localDate.getMinutes() ||
+        localDate.getSeconds() ||
+        localDate.getMilliseconds();
 
     if (!hasTime) {
-        date.setHours(date.getHours() + 12)
-        date.setHours(0, 0, 0, 0)
+        date.setHours(date.getHours() + 12);
+        date.setHours(0, 0, 0, 0);
     }
 
-    return date
+    return date;
 }
diff --git a/src/js/db/result-set.js b/src/js/db/result-set.js
index bb2d03d9..abc782ee 100644
--- a/src/js/db/result-set.js
+++ b/src/js/db/result-set.js
@@ -1,130 +1,130 @@
-import { Result } from './result'
+import { Result } from './result';
 
 /**
  * This class stores the database results.
  */
 export class ResultSet {
-    results = null
-    error = null
+    results = null;
+    error = null;
 
     /**
-   * Initilizes the resultset object.
-   */
-    constructor (results, error) {
-        this.results = results
-        this.error = error
+     * Initilizes the resultset object.
+     */
+    constructor(results, error) {
+        this.results = results;
+        this.error = error;
     }
 
     /**
-   * Gets the query error.
-   *
-   * @return {Db.Err} the error or null if no errors hapened
-   */
-    getError () {
-        return this.error
+     * Gets the query error.
+     *
+     * @return {Db.Err} the error or null if no errors hapened
+     */
+    getError() {
+        return this.error;
     }
 
-    fetch () {
+    fetch() {
         if (this.error) {
-            throw this.error
+            throw this.error;
         }
 
         if (this.results !== null && this.results.length > 0) {
-            return this.results.shift()
+            return this.results.shift();
         }
 
-        return null
+        return null;
     }
 
     /**
-   * Fetchs the next result from the resultset.
-   *
-   * @return {Db.Result} the result or %null if error or there are no more results
-   */
-    fetchResult () {
-        const result = this.fetch()
+     * Fetchs the next result from the resultset.
+     *
+     * @return {Db.Result} the result or %null if error or there are no more results
+     */
+    fetchResult() {
+        const result = this.fetch();
 
         if (result !== null) {
             if (result.data instanceof Array) {
-                return new Result(result)
+                return new Result(result);
             } else {
-                return true
+                return true;
             }
         }
 
-        return null
+        return null;
     }
 
     /**
-   * Fetchs the first row object from the next resultset.
-   *
-   * @return {Array} the row if success, %null otherwise
-   */
-    fetchObject () {
-        const result = this.fetch()
+     * Fetchs the first row object from the next resultset.
+     *
+     * @return {Array} the row if success, %null otherwise
+     */
+    fetchObject() {
+        const result = this.fetch();
 
         if (
             result !== null &&
-      result.data instanceof Array &&
-      result.data.length > 0
+            result.data instanceof Array &&
+            result.data.length > 0
         ) {
-            return result.data[0]
+            return result.data[0];
         }
 
-        return null
+        return null;
     }
 
     /**
-   * Fetchs data from the next resultset.
-   *
-   * @return {Array} the data
-   */
-    fetchData () {
-        const result = this.fetch()
+     * Fetchs data from the next resultset.
+     *
+     * @return {Array} the data
+     */
+    fetchData() {
+        const result = this.fetch();
 
         if (result !== null && result.data instanceof Array) {
-            return result.data
+            return result.data;
         }
 
-        return null
+        return null;
     }
 
     /**
-   * Fetchs the first row and column value from the next resultset.
-   *
-   * @return {Object} the value if success, %null otherwise
-   */
-    fetchValue () {
-        const row = this.fetchRow()
-
+     * Fetchs the first row and column value from the next resultset.
+     *
+     * @return {Object} the value if success, %null otherwise
+     */
+    fetchValue() {
+        const row = this.fetchRow();
+        console.log('row', row);
         if (row instanceof Array && row.length > 0) {
-            return row[0]
+            return row[0];
         }
 
-        return null
+        return null;
     }
 
     /**
-   * Fetchs the first row from the next resultset.
-   *
-   * @return {Array} the row if success, %null otherwise
-   */
-    fetchRow () {
-        const result = this.fetch()
-
+     * Fetchs the first row from the next resultset.
+     *
+     * @return {Array} the row if success, %null otherwise
+     */
+    fetchRow() {
+        const result = this.fetch();
+        console.log('test result', result);
         if (
             result !== null &&
-      result.data instanceof Array &&
-      result.data.length > 0
+            result.data instanceof Array &&
+            result.data.length > 0
         ) {
-            const object = result.data[0]
-            const row = new Array(result.columns.length)
+            const object = result.data[0];
+            const row = new Array(result.columns.length);
             for (let i = 0; i < row.length; i++) {
-                row[i] = object[result.columns[i].name]
+                row[i] = object[result.columns[i].name];
             }
-            return row
+            return row;
         }
 
-        return null
+        return null;
     }
 }
diff --git a/src/lib/filters.js b/src/lib/filters.js
index cc979fec..d75ede13 100644
--- a/src/lib/filters.js
+++ b/src/lib/filters.js
@@ -6,7 +6,7 @@ export function currency(val) {
     return typeof val === 'number' ? val.toFixed(2) + '€' : val;
 }
 
-export function date(val, format) {
+export function date(val, format = 'YYYY-MM-DD') {
     if (val == null) return val;
     if (!(val instanceof Date)) {
         val = new Date(val);
diff --git a/src/pages/Admin/NewsDetails.vue b/src/pages/Admin/NewsDetails.vue
index b024bd46..6d2cf784 100644
--- a/src/pages/Admin/NewsDetails.vue
+++ b/src/pages/Admin/NewsDetails.vue
@@ -127,13 +127,6 @@ onMounted(async () => {
                     v-model="data.text"
                     :toolbar="[
                         [
-                            {
-                                label: $q.lang.editor.align,
-                                icon: $q.iconSet.editor.align,
-                                fixedLabel: true,
-                                list: 'only-icons',
-                                options: ['left', 'center', 'right', 'justify']
-                            },
                             {
                                 label: $q.lang.editor.align,
                                 icon: $q.iconSet.editor.align,
diff --git a/src/pages/Admin/UsersView.vue b/src/pages/Admin/UsersView.vue
index 44a2ea34..f6522b86 100644
--- a/src/pages/Admin/UsersView.vue
+++ b/src/pages/Admin/UsersView.vue
@@ -45,10 +45,10 @@ const supplantUser = async user => {
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
         <VnSearchBar
-            :sqlQuery="query"
-            searchField="user"
-            @onSearch="onSearch"
-            @onSearchError="users = []"
+            :sql-query="query"
+            search-field="user"
+            @on-search="onSearch"
+            @on-search-error="users = []"
         />
     </Teleport>
     <QPage class="vn-w-xs">
@@ -81,7 +81,10 @@ const supplantUser = async user => {
                         flat
                         rounded
                         @click="supplantUser(user.name)"
-                    />
+                        ><QTooltip>
+                            {{ t('Impersonate user') }}
+                        </QTooltip></QBtn
+                    >
                 </template>
             </CardList>
         </QList>
@@ -91,12 +94,32 @@ const supplantUser = async user => {
 <i18n lang="yaml">
 en-US:
     noData: No data
+    User management: User management
+    Disabled: Disabled
+    Impersonate user: Impersonate user
+    Access log: Access log
 es-ES:
     noData: Sin datos
+    User management: Gestión de usuarios
+    Disabled: Desactivado
+    Impersonate user: Suplantar usuario
+    Access log: Registro de accesos
 ca-ES:
     noData: Sense dades
+    User management: Gestió d'usuaris
+    Disabled: Deshabilitat
+    Impersonate user: Suplantar usuari
+    Access log: Registre d'accessos
 fr-FR:
     noData: Aucune donnée
+    User management: Gestion des utilisateurs
+    Disabled: Désactivé
+    Impersonate user: Accès utilisateur
+    Access log: Journal des accès
 pt-PT:
     noData: Sem dados
+    User management: Gestão de usuarios
+    Disabled: Desativado
+    Impersonate user: Suplantar usuario
+    Access log: Registro de acessos
 </i18n>
diff --git a/src/pages/Admin/VisitsView.vue b/src/pages/Admin/VisitsView.vue
index 79686a50..c2bf260d 100644
--- a/src/pages/Admin/VisitsView.vue
+++ b/src/pages/Admin/VisitsView.vue
@@ -2,11 +2,10 @@
 import { ref, inject, watch, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { date as qdate } from 'quasar';
 
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
-import { formatDateTitle } from 'src/lib/filters.js';
+import { formatDateTitle, date } from 'src/lib/filters.js';
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 
@@ -39,8 +38,8 @@ const getVisits = async () => {
             WHERE c.stamp BETWEEN TIMESTAMP(#from,'00:00:00') AND TIMESTAMP(#to,'23:59:59')
             GROUP BY browser ORDER BY visits DESC`,
             {
-                from: qdate.formatDate(from.value, 'YYYY-MM-DD'),
-                to: qdate.formatDate(to.value, 'YYYY-MM-DD')
+                from: date(from.value),
+                to: date(to.value)
             }
         );
         visitsData.value = visitsResponse;
@@ -60,8 +59,8 @@ watch(
     async () => {
         await router.replace({
             query: {
-                from: qdate.formatDate(from.value, 'YYYY-MM-DD'),
-                to: qdate.formatDate(to.value, 'YYYY-MM-DD')
+                from: date(from.value),
+                to: date(to.value)
             }
         });
         await getVisits();
diff --git a/src/pages/Agencies/PackagesView.vue b/src/pages/Agencies/PackagesView.vue
index 2ef44424..922db3e6 100644
--- a/src/pages/Agencies/PackagesView.vue
+++ b/src/pages/Agencies/PackagesView.vue
@@ -66,27 +66,22 @@ onMounted(() => getPackages());
 
 <i18n lang="yaml">
 en-US:
-    agency: Agency
     bundles: Bundles
     expeditions: Exps.
     prevision: Prev.
 es-ES:
-    agency: Agencia
     bundles: Bultos
     expeditions: Exps.
     prevision: Prev.
 ca-ES:
-    agency: Agència
     bundles: Paquets
     expeditions: Exps.
     prevision: Prev.
 fr-FR:
-    agency: Agence
     bundles: Cartons
     expeditions: Exps.
     prevision: Prev.
 pt-PT:
-    agency: Agência
     bundles: Bultos
     expeditions: Exps.
     prevision: Prev.
diff --git a/src/pages/Ecomerce/CheckoutView.vue b/src/pages/Ecomerce/CheckoutView.vue
index 5730758d..90575406 100644
--- a/src/pages/Ecomerce/CheckoutView.vue
+++ b/src/pages/Ecomerce/CheckoutView.vue
@@ -1 +1,346 @@
-<template>Checkout</template>
+<script setup>
+import { ref, onMounted, inject, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+import { formatDateTitle } from 'src/lib/filters.js';
+import useNotify from 'src/composables/useNotify.js';
+import { useAppStore } from 'stores/app';
+
+const jApi = inject('jApi');
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { notify } = useNotify();
+const appStore = useAppStore();
+
+const stepperRef = ref(null);
+
+const steps = {
+    AGENCY: [
+        { name: 'method' },
+        { name: 'date' },
+        { name: 'address' },
+        { name: 'agency' },
+        { name: 'confirm-delivery' }
+    ],
+    PICKUP: []
+};
+const loading = ref(false);
+const today = ref(null);
+const addresses = ref([]);
+const agencies = ref([]);
+const currentStep = ref(1);
+const lastStep = 5;
+const id = route.params.id;
+const orderForm = ref({
+    method: '',
+    date: '',
+    address: '',
+    agency: ''
+});
+
+const confirmArrivalText = computed(() => {
+    if (!orderForm.value.agency) return '';
+    return `${t('arrival')} ${formatDateTitle(orderForm.value.date)}`;
+});
+
+const confirmAddressText = computed(() => {
+    if (!orderForm.value.address) return '';
+    const address = addresses.value.find(
+        address => address.id === orderForm.value.address
+    );
+    return address.street;
+});
+
+const confirmAgencyText = computed(() => {
+    if (!orderForm.value.agency) return '';
+    const agency = agencies.value.find(
+        agency => agency.id === orderForm.value.agency
+    );
+    return `${t('agency')} ${agency.description}`;
+});
+
+const getAddresses = async () => {
+    try {
+        addresses.value = await jApi.query(
+            `SELECT a.id, a.nickname, p.name province, a.city, a.street, a.isActive, c.name
+            FROM myAddress a
+            LEFT JOIN vn.province p ON p.id = a.provinceFk
+            JOIN vn.country c ON c.id = p.countryFk
+            WHERE a.isActive`
+        );
+        console.log('addresses:', addresses.value);
+    } catch (error) {
+        console.error('Error getting addresses:', error);
+    }
+};
+
+const getAgencies = async () => {
+    try {
+        const { results } = await jApi.execQuery(
+            `CALL vn.zone_getAgency(#address, #date);
+            SELECT DISTINCT a.agencyModeFk id, a.description
+            FROM tmp.zoneGetAgency a
+            JOIN vn.deliveryMethod d
+            ON d.id = a.deliveryMethodFk
+            WHERE d.code IN ('AGENCY', 'DELIVERY')
+            AND a.isVisible
+            ORDER BY a.description;
+            DROP TEMPORARY TABLE tmp.zoneGetAgency`,
+            {
+                address: orderForm.value.address,
+                date: orderForm.value.date
+            }
+        );
+        agencies.value = results[1].data;
+        console.log('agencies:', agencies.value);
+    } catch (error) {
+        console.error('Error getting agencies:', error);
+    }
+};
+
+const onAddressSelected = id => {
+    orderForm.value.address = id;
+    stepperRef.value.next();
+};
+
+const onStepChange = async step => {
+    console.log('step:', step);
+    if (step === 4) {
+        await getAgencies();
+    } else if (step === lastStep) {
+        submit();
+    }
+    // console.log('event:', event);
+};
+
+const submit = async () => {
+    loading.value = true;
+    // const id = route.params.id;
+    let query =
+        'CALL myOrder_create(@orderId, #date, #method, #agency, #address); SELECT @orderId;';
+    if (id) {
+        orderForm.value.id = id;
+        query =
+            'CALL myOrder_configure(#id, #date, #method, #agency, #address)';
+    }
+
+    console.log('id:', id);
+    let resultSet;
+    try {
+        resultSet = await jApi.execQuery(query, orderForm.value);
+        console.log('resultSet:', resultSet);
+        if (id) {
+            notify(t('orderUpdated'), 'positive');
+
+            if (route.query.continue === 'catalog') {
+                router.push({ name: 'catalog' });
+            } else {
+                router.push({ name: 'basket', params: { id } });
+            }
+        } else {
+            console.log('pre resultSet log: ', resultSet);
+            // const orderId = resultSet.fetchValue(); por alguna razon no funciona
+            const orderId = resultSet.results[1].data[0]['@orderId'];
+            console.log('orderId:', orderId);
+            appStore.loadIntoBasket(orderId);
+            router.push({ name: 'catalog' });
+        }
+    } catch (error) {
+        console.error('Error submitting order:', error);
+    } finally {
+        loading.value = false;
+    }
+
+    // const basket = new Hedera.Basket(this.app);
+
+    // if (id) {
+    //     Htk.Toast.showMessage(_('OrderUpdated'));
+
+    //     switch (this.hash.$.continue) {
+    //         case 'catalog':
+    //             redirect = { form: 'ecomerce/catalog' };
+    //             break;
+    //         default:
+    //             redirect = { form: 'ecomerce/basket' };
+    //             if (id !== basket.orderId) redirect.id = id;
+    //     }
+    // } else {
+    //     basket.loadIntoBasket(resultSet.fetchValue());
+    //     redirect = { form: 'ecomerce/catalog' };
+    // }
+
+    // this.hash.setAll(redirect);
+};
+
+onMounted(async () => {
+    today.value = Date.vnNew();
+    today.value.setHours(0, 0, 0, 0);
+    // if (id) {
+    // }
+    getAddresses();
+});
+</script>
+
+<template>
+    <QPage class="vn-w-sm">
+        <QStepper
+            v-model="currentStep"
+            ref="stepperRef"
+            animated
+            keep-alive
+            class="default-radius"
+            @update:model-value="onStepChange"
+        >
+            <QStep name="1" :done="currentStep > 1" done-color="accent">
+                <div class="column justify-center items-center">
+                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                        {{ t('receiveOrPickOrder') }}
+                    </span>
+                    <div class="column" style="max-width: max-content">
+                        <QRadio
+                            v-model="orderForm.method"
+                            val="AGENCY"
+                            :label="t('receiveOrder')"
+                        />
+                        <QRadio
+                            v-model="orderForm.method"
+                            val="PICKUP"
+                            :label="t('pickupInStore')"
+                        />
+                    </div>
+                </div>
+            </QStep>
+            <QStep :name="2" :done="currentStep > 2" done-color="accent">
+                <div class="flex justify-center items-center">
+                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                        {{ t('receiveOrPickOrder') }}
+                    </span>
+                    <QDate
+                        v-model="orderForm.date"
+                        class="margin-auto"
+                        color="accent"
+                    />
+                </div>
+            </QStep>
+            <QStep :name="3" :done="currentStep > 3" done-color="accent">
+                <QList
+                    v-if="orderForm.method === 'AGENCY'"
+                    class="vn-w-xs q-gutter-y-sm"
+                >
+                    <QItem
+                        v-for="(address, index) in addresses"
+                        :key="index"
+                        class="column"
+                        clickable
+                        v-ripple
+                        @click="onAddressSelected(address.id)"
+                    >
+                        <QItemLabel class="text-bold text-subtitle1">
+                            {{ address.nickname }}
+                        </QItemLabel>
+                        <QItemLabel class="text-subtitle1">
+                            {{ address.street }}
+                        </QItemLabel>
+                    </QItem>
+                </QList>
+            </QStep>
+            <QStep :name="4" :done="currentStep > 4" done-color="accent">
+                <div class="flex justify-center items-center">
+                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                        {{ t('orderDateDelivery') }}
+                    </span>
+                    <VnSelect
+                        v-model="orderForm.agency"
+                        option-label="description"
+                        option-value="id"
+                        :options="agencies"
+                        @update:model-value="stepperRef.next()"
+                    />
+                </div>
+            </QStep>
+            <QStep :name="5" :done="currentStep > 5" done-color="accent">
+                <div class="flex column justify-center items-center">
+                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                        {{ t('confirmData') }}
+                    </span>
+                    <div class="column vn-w-xs full-width">
+                        <span>{{ confirmArrivalText }}</span>
+                        <span>{{ confirmAddressText }}</span>
+                        <span>{{ confirmAgencyText }}</span>
+                    </div>
+                </div>
+            </QStep>
+            <template #navigation>
+                <QStepperNavigation class="flex justify-between">
+                    <QBtn
+                        flat
+                        color="primary"
+                        @click="stepperRef.previous()"
+                        label="Back"
+                        class="q-ml-sm"
+                        :class="{ invisible: currentStep === 1 }"
+                    />
+                    <QBtn
+                        @click="stepperRef.next()"
+                        color="primary"
+                        label="next"
+                    />
+                </QStepperNavigation>
+            </template>
+        </QStepper>
+        <pre>{{ orderForm }}</pre>
+    </QPage>
+</template>
+
+<style lang="scss" scoped></style>
+
+<i18n lang="yaml">
+en-US:
+    receiveOrPickOrder: Do you want to receive or pickup the order?
+    receiveOrder: Receive in my store
+    pickupInStore: Store pickup
+    orderDateDelivery: What day you want to receive the order?
+    howDoYouWantToReceive: How do you want to receive the order?
+    confirmData: Confirm data
+    arrival: Arrival
+    orderUpdated: Order updated
+es-ES:
+    receiveOrPickOrder: ¿Quieres recibir o recoger el pedido?
+    receiveOrder: Recibir en mi tienda
+    pickupInStore: Recoger en almacén
+    orderDateDelivery: ¿Qué día quieres recibir el pedido?
+    howDoYouWantToReceive: ¿Cómo quieres recibir el pedido?
+    confirmData: Confirma los datos
+    arrival: Llegada
+    orderUpdated: Pedido actualizado
+ca-ES:
+    receiveOrPickOrder: Vols rebre o recollir la comanda?
+    receiveOrder: Rebre en mi tenda
+    pickupInStore: Recollir en magatzem
+    orderDateDelivery: Quin dia vols rebre la comanda?
+    howDoYouWantToReceive: Com vols rebre la comanda?
+    confirmData: Confirma les dades
+    arrival: Arribada
+    orderUpdated: Comanda actualitzada
+fr-FR:
+    receiveOrPickOrder: Voulez-vous recevoir ou récuperer l'ordre?
+    receiveOrder: Livraison à la boutique
+    pickupInStore: Récupérer en entrepôt
+    orderDateDelivery: Date de livraison?
+    howDoYouWantToReceive: Agence de livraison
+    confirmData: Confirmez les coordonnées
+    arrival: Arrivée
+    orderUpdated: Mise à jour commande
+pt-PT:
+    receiveOrPickOrder: Queres receber ou levantar a encomenda?
+    receiveOrder: Receber na minha loja
+    pickupInStore: Levantar no armazém
+    orderDateDelivery: Como queres receber a encomenda?
+    confirmData: Confirme os dados
+    arrival: Chegada
+    orderUpdated: Encomenda actualizada
+</i18n>
diff --git a/src/pages/Ecomerce/TicketDetails.vue b/src/pages/Ecomerce/TicketDetails.vue
index 37af51ab..776d9b9b 100644
--- a/src/pages/Ecomerce/TicketDetails.vue
+++ b/src/pages/Ecomerce/TicketDetails.vue
@@ -109,7 +109,6 @@ en-US:
     shippingInformation: Shipping Information
     preparation: Preparation
     delivery: Delivery
-    agency: Agency
     warehouse: Store
     deliveryAddress: Delivery address
     total: Total
@@ -118,7 +117,6 @@ es-ES:
     shippingInformation: Datos de envío
     preparation: Preparación
     delivery: Entrega
-    agency: Agencia
     warehouse: Almacén
     deliveryAddress: Dirección de entrega
     total: Total
@@ -127,7 +125,6 @@ ca-ES:
     shippingInformation: Dades d'enviament
     preparation: Preparació
     delivery: Lliurament
-    agency: Agència
     warehouse: Magatzem
     deliveryAddress: Adreça de lliurament
     total: Total
@@ -144,7 +141,6 @@ pt-PT:
     shippingInformation: Dados de envio
     preparation: Preparação
     delivery: Entrega
-    agency: Agência
     warehouse: Armazém
     deliveryAddress: Endereço de entrega
     total: Total
diff --git a/src/router/routes.js b/src/router/routes.js
index 21c2434c..8c55a79f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -66,7 +66,7 @@ const routes = [
             },
             {
                 name: 'checkout',
-                path: '/ecomerce/checkout',
+                path: '/ecomerce/checkout/:id?',
                 component: () => import('pages/Ecomerce/CheckoutView.vue')
             },
             {