diff --git a/db/changes/10162-fallas/00-acl.sql b/db/changes/10162-fallas/00-acl.sql
new file mode 100644
index 0000000000..376788af1d
--- /dev/null
+++ b/db/changes/10162-fallas/00-acl.sql
@@ -0,0 +1 @@
+INSERT INTO `salix`.`ACL` (`model`, `property`, `accessType`, `permission`, `principalType`, `principalId`) VALUES ('WorkerLog', '*', 'READ', 'ALLOW', 'ROLE', 'hr');
diff --git a/db/changes/10162-fallas/00-workerLog.sql b/db/changes/10162-fallas/00-workerLog.sql
new file mode 100644
index 0000000000..730b60aa50
--- /dev/null
+++ b/db/changes/10162-fallas/00-workerLog.sql
@@ -0,0 +1,6 @@
+ALTER TABLE `vn`.`workerLog` 
+    ADD COLUMN `changedModel` VARCHAR(45) NULL DEFAULT NULL AFTER `description`,
+    ADD COLUMN `oldInstance` text CHARACTER SET utf8 COLLATE utf8_unicode_ci,
+    ADD COLUMN  `newInstance` text CHARACTER SET utf8 COLLATE utf8_unicode_ci,
+    ADD COLUMN `changedModelId` int(11) DEFAULT NULL,
+    ADD COLUMN `changedModelValue` varchar(45) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL;
\ No newline at end of file
diff --git a/db/dump/fixtures.sql b/db/dump/fixtures.sql
index c32e8475fa..d5f8ea5b0c 100644
--- a/db/dump/fixtures.sql
+++ b/db/dump/fixtures.sql
@@ -471,19 +471,19 @@ INSERT INTO `vn`.`invoiceOutSerial` (`code`, `description`, `isTaxed`, `taxAreaF
 
 INSERT INTO `vn`.`zone` (`id`, `name`, `hour`, `agencyModeFk`, `travelingDays`, `price`, `bonus`, `m3Max`)
     VALUES 
-        (1,  'Zone pickup A',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 1,  0, 0,    0, 30.50),
-        (2,  'Zone pickup B',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 1,  0, 0,    0, 30.50),
-        (3,  'Zone 247 A',          CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 7,  1, 2,    0, 40.50),
-        (4,  'Zone 247 B',          CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 7,  1, 2,    0, 40.50),
-        (5,  'Zone expensive A',    CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 8,  1, 1000, 0, 50.50),
-        (6,  'Zone expensive B',    CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 8,  1, 1000, 0, 50.50),
-        (7,  'Zone refund',         CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 23, 0, 0,    0, 60.50),
-        (8,  'Zone others',         CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 10, 0, 0,    0, 60.50),
-        (9,  'Zone superMan',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 2,  0, 0,    0, NULL),
-        (10, 'Zone teleportation',  CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 3,  0, 0,    0, NULL),
-        (11, 'Zone pickup C',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 1,  0, 0,    0, NULL),
-        (12, 'Zone entanglement',   CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 4,  0, 0,    0, NULL),
-        (13, 'Zone quantum break',  CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 5,  0, 0,    0, NULL);
+        (1,  'Zone pickup A',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 1,  0, 0,    0, 30.50),
+        (2,  'Zone pickup B',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 1,  0, 0,    0, 30.50),
+        (3,  'Zone 247 A',          CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 7,  1, 2,    0, 40.50),
+        (4,  'Zone 247 B',          CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 7,  1, 2,    0, 40.50),
+        (5,  'Zone expensive A',    CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 8,  1, 1000, 0, 50.50),
+        (6,  'Zone expensive B',    CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 8,  1, 1000, 0, 50.50),
+        (7,  'Zone refund',         CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 23, 0, 0,    0, 60.50),
+        (8,  'Zone others',         CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 10, 0, 0,    0, 60.50),
+        (9,  'Zone superMan',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 2,  0, 0,    0, NULL),
+        (10, 'Zone teleportation',  CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 3,  0, 0,    0, NULL),
+        (11, 'Zone pickup C',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 1,  0, 0,    0, NULL),
+        (12, 'Zone entanglement',   CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 4,  0, 0,    0, NULL),
+        (13, 'Zone quantum break',  CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 5,  0, 0,    0, NULL);
 
 INSERT INTO `vn`.`zoneWarehouse` (`id`, `zoneFk`, `warehouseFk`)
     VALUES 
@@ -1890,14 +1890,10 @@ INSERT INTO `vn`.`zoneEvent`(`zoneFk`, `type`, `dated`)
         (7, 'day', DATE_ADD(CURDATE(), INTERVAL +3 DAY)),
         (7, 'day', DATE_ADD(CURDATE(), INTERVAL +4 DAY)),
         (7, 'day', DATE_ADD(CURDATE(), INTERVAL +5 DAY)),
-        (7, 'day', DATE_ADD(CURDATE(), INTERVAL +6 DAY)),
-        (8, 'day', CURDATE()),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +1 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +2 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +3 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +4 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +5 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +6 DAY));
+        (7, 'day', DATE_ADD(CURDATE(), INTERVAL +6 DAY));
+
+INSERT INTO `vn`.`zoneEvent`(`zoneFk`, `type`, `weekDays`)
+    VALUES (8, 'indefinitely', 'mon,tue,wed,thu,fri,sat,sun');
 
 INSERT INTO `vn`.`workerTimeControl`(`userFk`, `timed`, `manual`, `direction`)
     VALUES
diff --git a/e2e/helpers/extensions.js b/e2e/helpers/extensions.js
index 5fe3620430..2484728f46 100644
--- a/e2e/helpers/extensions.js
+++ b/e2e/helpers/extensions.js
@@ -1,4 +1,3 @@
-import {url as defaultURL} from './config';
 
 function checkVisibility(selector) {
     let selectorMatches = document.querySelectorAll(selector);
@@ -59,18 +58,12 @@ let actions = {
                 return document.location.hash.includes(expectedHash);
             }, {}, expectedHash);
         } catch (error) {
-            throw new Error(`failed to reach URL containing: ${expectedHash}`);
+            throw new Error(`Failed to reach URL containing: ${expectedHash}`);
         }
-        await this.waitForContentLoaded();
+        await this.waitForSpinnerLoad();
         return true;
     },
 
-    waitUntilNotPresent: async function(selector) {
-        await this.wait(selector => {
-            return document.querySelector(selector) == null;
-        }, selector);
-    },
-
     doLogin: async function(userName, password = 'nightmare') {
         await this.waitForSelector(`vn-login vn-textfield[ng-model="$ctrl.user"]`, {visible: true});
         await this.clearInput(`vn-login vn-textfield[ng-model="$ctrl.user"]`);
@@ -81,27 +74,31 @@ let actions = {
     },
 
     login: async function(userName) {
-        await this.goto(`${defaultURL}/#!/login`);
-        let dialog = await this.evaluate(() => {
-            return document.querySelector('button[response="accept"]');
-        });
-        if (dialog)
-            await this.waitToClick('button[response="accept"]');
+        let state = await this.getState();
 
+        if (state != 'login') {
+            try {
+                await this.gotoState('login');
+            } catch (err) {
+                let dialog = await this.evaluate(
+                    () => document.querySelector('button[response="accept"]'));
+
+                if (dialog)
+                    await this.waitToClick('button[response="accept"]');
+                else
+                    throw err;
+            }
+        }
+
+        await this.waitForState('login');
         await this.doLogin(userName);
-        await this.waitForFunction(() => {
-            return document.location.hash === '#!/';
-        }, {});
+        await this.waitForState('home');
     },
 
     selectModule: async function(moduleName) {
-        let snakeName = moduleName.replace(/[\w]([A-Z])/g, m => {
-            return m[0] + '-' + m[1];
-        }).toLowerCase();
-
-        let selector = `vn-home a[ui-sref="${moduleName}.index"]`;
-        await this.waitToClick(selector);
-        await this.expectURL(snakeName);
+        let state = `${moduleName}.index`;
+        await this.waitToClick(`vn-home a[ui-sref="${state}"]`);
+        await this.waitForState(state);
     },
 
     loginAndModule: async function(userName, moduleName) {
@@ -109,56 +106,73 @@ let actions = {
         await this.selectModule(moduleName);
     },
 
-    datePicker: async function(selector, changeMonth, day) {
-        let date = new Date();
-        if (changeMonth) date.setMonth(date.getMonth() + changeMonth);
-        date.setDate(day ? day : 16);
-        date = date.toISOString().substr(0, 10);
-
-        await this.wait(selector);
-        await this.evaluate((selector, date) => {
-            let input = document.querySelector(selector).$ctrl.input;
-            input.value = date;
-            input.dispatchEvent(new Event('change'));
-        }, selector, date);
+    getState: async function() {
+        return await this.evaluate(() => {
+            let $state = angular.element(document.body).injector().get('$state');
+            return $state.current.name;
+        });
     },
 
-    pickTime: async function(selector, time) {
-        await this.wait(selector);
-        await this.evaluate((selector, time) => {
-            let input = document.querySelector(selector).$ctrl.input;
-            input.value = time;
-            input.dispatchEvent(new Event('change'));
-        }, selector, time);
+    gotoState: async function(state, params) {
+        return await this.evaluate((state, params) => {
+            let $state = angular.element(document.body).injector().get('$state');
+            return $state.go(state, params);
+        }, state, params);
     },
 
-    clearTextarea: async function(selector) {
-        await this.waitForSelector(selector, {visible: true});
-        await this.evaluate(inputSelector => {
-            return document.querySelector(`${inputSelector} textarea`).value = '';
-        }, selector);
+    waitForState: async function(state) {
+        await this.waitFor(state => {
+            let $state = angular.element(document.body).injector().get('$state');
+            return !$state.transition && $state.is(state);
+        }, {}, state);
+        await this.waitForSpinnerLoad(state);
     },
 
-    clearInput: async function(selector) {
-        await this.waitForSelector(selector);
+    waitForTransition: async function() {
+        await this.waitFor(() => {
+            const $state = angular.element(document.body).injector().get('$state');
+            return !$state.transition;
+        });
+    },
 
-        let field = await this.evaluate(selector => {
-            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field;
-        }, selector);
+    accessToSection: async function(state) {
+        await this.waitForSelector('vn-left-menu');
+        let nested = await this.evaluate(state => {
+            return document.querySelector(`vn-left-menu li li > a[ui-sref="${state}"]`) != null;
+        }, state);
 
-        if ((field != null && field != '') || field == '0') {
-            let coords = await this.evaluate(selector => {
-                let rect = document.querySelector(selector).getBoundingClientRect();
-                return {x: rect.x + (rect.width / 2), y: rect.y + (rect.height / 2), width: rect.width};
-            }, selector);
-            await this.mouse.move(coords.x, coords.y);
-            await this.waitForSelector(`${selector} [icon="clear"]`, {visible: true});
-            await this.waitToClick(`${selector} [icon="clear"]`);
+        if (nested) {
+            await this.waitToClick('vn-left-menu vn-item-section > vn-icon[icon=keyboard_arrow_down]');
+            await this.wait('vn-left-menu .expanded');
         }
 
-        await this.evaluate(selector => {
-            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field == '';
-        }, selector);
+        await this.evaluate(state => {
+            let navButton = document.querySelector(`vn-left-menu li > a[ui-sref="${state}"]`);
+            navButton.scrollIntoViewIfNeeded();
+            return navButton.click();
+        }, state);
+
+        await this.waitForState(state);
+    },
+
+    reloadSection: async function(state) {
+        await this.click('vn-icon[icon="desktop_windows"]');
+        await this.accessToSection(state);
+    },
+
+    forceReloadSection: async function(sectionRoute) {
+        await this.waitToClick('vn-icon[icon="desktop_windows"]');
+        await this.waitToClick('button[response="accept"]');
+        await this.wait('vn-card.summary');
+        await this.waitToClick(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
+    },
+
+    accessToSearchResult: async function(searchValue) {
+        await this.clearInput('vn-searchbar');
+        await this.write('vn-searchbar', searchValue);
+        await this.waitToClick('vn-searchbar vn-icon[icon="search"]');
+        await this.waitForTransition();
+        await this.waitFor('.vn-descriptor');
     },
 
     getProperty: async function(selector, property) {
@@ -320,12 +334,16 @@ let actions = {
     },
 
     hideSnackbar: async function() {
-        await this.waitFor(750); // holds up for the snackbar to be visible for a small period of time.
+        // Holds up for the snackbar to be visible for a small period of time.
+        if (process.env.DEBUG)
+            await this.waitFor(300);
+
         await this.evaluate(() => {
             let hideButton = document.querySelector('#shapes .shown button');
             if (hideButton)
                 return document.querySelector('#shapes .shown button').click();
         });
+        await this.waitFor('#shapes > .shape', {hidden: true});
     },
 
     waitForLastSnackbar: async function() {
@@ -341,45 +359,64 @@ let actions = {
         return snackBarText;
     },
 
-    accessToSearchResult: async function(searchValue) {
-        await this.clearInput('vn-searchbar');
-        await this.write('vn-searchbar', searchValue);
-        await this.waitToClick('vn-searchbar vn-icon[icon="search"]');
-        await this.waitForContentLoaded();
+    pickDate: async function(selector, date) {
+        date = date || new Date();
+
+        const tzoffset = date.getTimezoneOffset() * 60000;
+        const localIso = (new Date(date.getTime() - tzoffset))
+            .toISOString();
+
+        await this.wait(selector);
+        await this.evaluate((selector, localIso) => {
+            let input = document.querySelector(selector).$ctrl.input;
+            input.value = localIso.substr(0, 10);
+            input.dispatchEvent(new Event('change'));
+        }, selector, localIso);
     },
 
-    accessToSection: async function(sectionRoute) {
-        await this.waitForSelector('vn-left-menu');
-        let nested = await this.evaluate(sectionRoute => {
-            return document.querySelector(`vn-left-menu li li > a[ui-sref="${sectionRoute}"]`) != null;
-        }, sectionRoute);
+    pickTime: async function(selector, time) {
+        await this.wait(selector);
+        await this.evaluate((selector, time) => {
+            let input = document.querySelector(selector).$ctrl.input;
+            input.value = time;
+            input.dispatchEvent(new Event('change'));
+        }, selector, time);
+    },
 
-        if (nested) {
-            await this.waitToClick('vn-left-menu vn-item-section > vn-icon[icon=keyboard_arrow_down]');
-            await this.wait('vn-left-menu .expanded');
+    clearTextarea: async function(selector) {
+        await this.waitForSelector(selector, {visible: true});
+        await this.evaluate(inputSelector => {
+            return document.querySelector(`${inputSelector} textarea`).value = '';
+        }, selector);
+    },
+
+    clearInput: async function(selector) {
+        await this.waitForSelector(selector);
+
+        let field = await this.evaluate(selector => {
+            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field;
+        }, selector);
+
+        if ((field != null && field != '') || field == '0') {
+            let coords = await this.evaluate(selector => {
+                let rect = document.querySelector(selector).getBoundingClientRect();
+                return {x: rect.x + (rect.width / 2), y: rect.y + (rect.height / 2), width: rect.width};
+            }, selector);
+            await this.mouse.move(coords.x, coords.y);
+            await this.waitForSelector(`${selector} [icon="clear"]`, {visible: true});
+            await this.waitToClick(`${selector} [icon="clear"]`);
         }
 
-        await this.evaluate(sectionRoute => {
-            let navButton = document.querySelector(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
-            navButton.scrollIntoViewIfNeeded();
-            return navButton.click();
-        }, sectionRoute);
-        await this.waitForNavigation({waitUntil: ['networkidle0']});
-        await this.waitForContentLoaded();
+        await this.evaluate(selector => {
+            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field == '';
+        }, selector);
     },
 
     autocompleteSearch: async function(selector, searchValue) {
         let builtSelector = await this.selectorFormater(selector);
 
-        await this.waitForContentLoaded();
         await this.waitToClick(selector);
-        await this.waitForSelector(selector => {
-            document
-                .querySelector(`${selector} vn-drop-down`).$ctrl.content
-                .querySelectorAll('li');
-        }, selector);
-
-        await this.write('.vn-drop-down.vn-popover.vn-popup.shown vn-textfield', searchValue);
+        await this.write('.vn-drop-down.shown vn-textfield', searchValue);
 
         try {
             await this.waitForFunction((selector, searchValue) => {
@@ -391,7 +428,7 @@ let actions = {
             }, {}, selector, searchValue);
         } catch (error) {
             let inputValue = await this.evaluate(() => {
-                return document.querySelector('.vn-drop-down.vn-popover.vn-popup.shown vn-textfield input').value;
+                return document.querySelector('.vn-drop-down.shown vn-textfield input').value;
             });
             throw new Error(`${builtSelector} value is ${inputValue}! ${error}`);
         }
@@ -402,28 +439,7 @@ let actions = {
         }, {}, builtSelector, searchValue);
 
         await this.waitForMutation('.vn-drop-down', 'childList');
-        await this.waitForContentLoaded();
-    },
-
-    reloadSection: async function(sectionRoute) {
-        await this.waitForContentLoaded();
-        await Promise.all([
-            this.waitForNavigation({waitUntil: 'networkidle0'}),
-            this.click('vn-icon[icon="desktop_windows"]', {}),
-        ]);
-
-        await Promise.all([
-            this.waitForNavigation({waitUntil: 'networkidle0'}),
-            this.click(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`, {}),
-        ]);
-        await this.waitForContentLoaded();
-    },
-
-    forceReloadSection: async function(sectionRoute) {
-        await this.waitToClick('vn-icon[icon="desktop_windows"]');
-        await this.waitToClick('button[response="accept"]');
-        await this.wait('vn-card.summary');
-        await this.waitToClick(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
+        await this.waitFor('.vn-drop-down', {hidden: true});
     },
 
     checkboxState: async function(selector) {
@@ -457,7 +473,7 @@ let actions = {
     },
 
     waitForSpinnerLoad: async function() {
-        await this.waitUntilNotPresent('vn-topbar vn-spinner');
+        await this.waitFor('vn-topbar vn-spinner', {hidden: true});
     },
 
     waitForWatcherData: async function(selector) {
@@ -509,35 +525,42 @@ let actions = {
     closePopup: async function(selector) {
         await Promise.all([
             this.keyboard.press('Escape'),
-            this.waitForSelector('.vn-popup', {hidden: true}),
+            this.waitFor('.vn-popup', {hidden: true}),
         ]);
     },
 
-    waitForContentLoaded: async function() {
-        await this.waitFor(1000);
-    },
-
     respondToDialog: async function(response) {
-        await this.waitForSelector('.vn-dialog.vn-popup.shown');
+        await this.waitForSelector('.vn-dialog.shown');
         const firstCount = await this.evaluate(text => {
-            const dialogs = document.querySelectorAll('.vn-dialog.vn-popup');
+            const dialogs = document.querySelectorAll('.vn-dialog');
             const dialogOnTop = dialogs[dialogs.length - 1];
             const button = dialogOnTop.querySelector(`div.buttons [response="${text}"]`);
             button.click();
             return dialogs.length;
         }, response);
 
-        this.waitForFunction(firstCount => {
-            const dialogs = document.querySelectorAll('.vn-dialog.vn-popup');
+        await this.waitForFunction(firstCount => {
+            const dialogs = document.querySelectorAll('.vn-dialog');
             return dialogs.length < firstCount;
         }, {}, firstCount);
+    },
+
+    waitForContentLoaded: async function() {
+        // await this.waitFor(250);
     }
 };
 
 export function extendPage(page) {
     for (let name in actions) {
         page[name] = async(...args) => {
-            return await actions[name].call(page, ...args);
+            try {
+                return await actions[name].apply(page, args);
+            } catch (err) {
+                let stringArgs = args
+                    .map(i => typeof i == 'function' ? 'Function' : i)
+                    .join(', ');
+                throw new Error(`.${name}(${stringArgs}): ${err.message}`);
+            }
         };
     }
 
diff --git a/e2e/helpers/puppeteer.js b/e2e/helpers/puppeteer.js
index 1ca0726c0f..67f9da4270 100644
--- a/e2e/helpers/puppeteer.js
+++ b/e2e/helpers/puppeteer.js
@@ -4,16 +4,22 @@ import {extendPage} from './extensions';
 import {url as defaultURL} from './config';
 
 export async function getBrowser() {
-    let headless = !process.env.E2E_SHOW;
+    const args = [
+        `--no-sandbox`,
+        `--window-size=${ 1920 },${ 1080 }`
+    ];
+
+    if (process.env.DEBUG)
+        args.push('--auto-open-devtools-for-tabs');
+
+    const headless = !(process.env.E2E_SHOW || process.env.DEBUG);
     const browser = await Puppeteer.launch({
-        args: [
-            '--no-sandbox',
-            `--window-size=${ 1920 },${ 1080 }`
-        ],
+        args,
         defaultViewport: null,
         headless: headless,
         slowMo: 0, // slow down by ms
     });
+
     let page = (await browser.pages())[0];
     await page.evaluateOnNewDocument(() => {
         Object.defineProperty(navigator, 'language', {
@@ -28,8 +34,8 @@ export async function getBrowser() {
         });
     });
     page = extendPage(page);
-    page.setDefaultTimeout(10000);
-    await page.goto(defaultURL, {waitUntil: 'networkidle0'});
+    page.setDefaultTimeout(4000);
+    await page.goto(defaultURL, {waitUntil: 'load'});
     return {page, close: browser.close.bind(browser)};
 }
 
diff --git a/e2e/helpers/selectors.js b/e2e/helpers/selectors.js
index 0cee79405d..5469c09df3 100644
--- a/e2e/helpers/selectors.js
+++ b/e2e/helpers/selectors.js
@@ -208,7 +208,7 @@ export default {
         createItemButton: `vn-float-button`,
         firstSearchResult: 'vn-item-index a:nth-child(1)',
         searchResult: 'vn-item-index a.vn-tr',
-        searchResultPreviewButton: 'vn-item-index .buttons > [icon="desktop_windows"]',
+        firstResultPreviewButton: 'vn-item-index vn-tbody > :nth-child(1) .buttons > [icon="desktop_windows"]',
         searchResultCloneButton: 'vn-item-index .buttons > [icon="icon-clone"]',
         acceptClonationAlertButton: '.vn-confirm.shown [response="accept"]',
         topbarSearch: 'vn-topbar',
@@ -260,7 +260,6 @@ export default {
         secondRequestDecline: 'vn-item-request vn-tbody > vn-tr:nth-child(1) vn-icon-button[icon="thumb_down"]',
         declineReason: 'vn-textarea[ng-model="$ctrl.denyObservation"]',
         acceptDeclineReason: 'button[response="accept"]',
-
     },
     itemBasicData: {
         basicDataButton: 'vn-left-menu a[ui-sref="item.card.basicData"]',
@@ -369,7 +368,7 @@ export default {
         newTicketButton: 'vn-ticket-index a',
         searchResult: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
         searchWeeklyResult: 'vn-ticket-weekly-index vn-table vn-tbody > vn-tr',
-        searchResultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
+        searchResultDate: 'vn-ticket-summary [label=Landed] span',
         topbarSearch: 'vn-searchbar',
         advancedSearchButton: 'vn-ticket-search-panel button[type=submit]',
         searchButton: 'vn-searchbar vn-icon[icon="search"]',
diff --git a/e2e/paths/01-login/01_login.spec.js b/e2e/paths/01-login/01_login.spec.js
index abb0220115..6b101b00bf 100644
--- a/e2e/paths/01-login/01_login.spec.js
+++ b/e2e/paths/01-login/01_login.spec.js
@@ -12,32 +12,42 @@ describe('Login path', async() => {
         await browser.close();
     });
 
-    it('should receive an error when the username is incorrect', async() => {
-        await page.doLogin('badUser', '');
-        const result = await page.waitForLastSnackbar();
+    describe('Bad login', async() => {
+        it('should receive an error when the username is incorrect', async() => {
+            await page.doLogin('badUser', '');
+            const result = await page.waitForLastSnackbar();
+            const state = await page.getState();
 
-        expect(result.length).toBeGreaterThan(0);
+            expect(result.length).toBeGreaterThan(0);
+            expect(state).toBe('login');
+        });
+
+        it('should receive an error when the username is blank', async() => {
+            await page.doLogin('', '');
+            const result = await page.waitForLastSnackbar();
+            const state = await page.getState();
+
+            expect(result.length).toBeGreaterThan(0);
+            expect(state).toBe('login');
+        });
+
+        it('should receive an error when the password is incorrect', async() => {
+            await page.doLogin('employee', 'badPassword');
+            const result = await page.waitForLastSnackbar();
+            const state = await page.getState();
+
+            expect(result.length).toBeGreaterThan(0);
+            expect(state).toBe('login');
+        });
     });
 
-    it('should receive an error when the username is blank', async() => {
-        await page.doLogin('', '');
-        const result = await page.waitForLastSnackbar();
+    describe('Successful login', async() => {
+        it('should log in', async() => {
+            await page.doLogin('employee', 'nightmare');
+            await page.waitForNavigation();
+            const state = await page.getState();
 
-        expect(result.length).toBeGreaterThan(0);
-    });
-
-    it('should receive an error when the password is incorrect', async() => {
-        await page.doLogin('employee', 'badPassword');
-        const result = await page.waitForLastSnackbar();
-
-        expect(result.length).toBeGreaterThan(0);
-    });
-
-    it('should log in', async() => {
-        await page.doLogin('employee', 'nightmare');
-        await page.waitForNavigation();
-        let url = await page.expectURL('#!/');
-
-        expect(url).toBe(true);
+            expect(state).toBe('home');
+        });
     });
 });
diff --git a/e2e/paths/02-client/01_create_client.spec.js b/e2e/paths/02-client/01_create_client.spec.js
index 65db9e7c6a..0b8c96c167 100644
--- a/e2e/paths/02-client/01_create_client.spec.js
+++ b/e2e/paths/02-client/01_create_client.spec.js
@@ -25,10 +25,7 @@ describe('Client create path', async() => {
 
     it('should now access to the create client view by clicking the create-client floating button', async() => {
         await page.waitToClick(selectors.clientsIndex.createClientButton);
-        await page.wait(selectors.createClientView.createButton);
-        let url = await page.expectURL('#!/client/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.create');
     });
 
     it('should receive an error when clicking the create button having all the form fields empty', async() => {
@@ -105,15 +102,11 @@ describe('Client create path', async() => {
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.clientsButton);
         await page.wait(selectors.clientsIndex.createClientButton);
-        let url = await page.expectURL('#!/client/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.index');
     });
 
     it(`should search for the user Carol Danvers to confirm it exists`, async() => {
         await page.accessToSearchResult('Carol Danvers');
-        let url = await page.expectURL('#!/client/114/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.summary');
     });
 });
diff --git a/e2e/paths/02-client/03_edit_fiscal_data.spec.js b/e2e/paths/02-client/03_edit_fiscal_data.spec.js
index 4cd54b87d0..10a29cdfaa 100644
--- a/e2e/paths/02-client/03_edit_fiscal_data.spec.js
+++ b/e2e/paths/02-client/03_edit_fiscal_data.spec.js
@@ -36,9 +36,7 @@ describe('Client Edit fiscalData path', () => {
 
         it(`should click on the fiscal data button`, async() => {
             await page.waitToClick(selectors.clientFiscalData.fiscalDataButton);
-            let url = await page.expectURL('fiscal-data');
-
-            expect(url).toBe(true);
+            await page.waitForState('client.card.fiscalData');
         });
 
         it('should not be able to edit the verified data checkbox', async() => {
@@ -124,9 +122,7 @@ describe('Client Edit fiscalData path', () => {
         // confirm all addresses have now EQtax checked step 1
         it(`should click on the addresses button to access to the client's addresses`, async() => {
             await page.waitToClick(selectors.clientAddresses.addressesButton);
-            let url = await page.expectURL('/address/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('client.card.address.index');
         });
 
         // confirm all addresses have now EQtax checked step 2
@@ -261,9 +257,7 @@ describe('Client Edit fiscalData path', () => {
         // confirm invoice by address checkbox gets checked if the EQtax differs between addresses step 1
         it(`should click on the addresses button to access to the client's addresses`, async() => {
             await page.waitToClick(selectors.clientAddresses.addressesButton);
-            let url = await page.expectURL('/address/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('client.card.address.index');
         });
 
         // confirm invoice by address checkbox gets checked if the EQtax differs between addresses step 2
diff --git a/e2e/paths/02-client/05_add_address.spec.js b/e2e/paths/02-client/05_add_address.spec.js
index c9228e1cff..f227984535 100644
--- a/e2e/paths/02-client/05_add_address.spec.js
+++ b/e2e/paths/02-client/05_add_address.spec.js
@@ -18,9 +18,7 @@ describe('Client Add address path', () => {
 
     it(`should click on the add new address button to access to the new address form`, async() => {
         await page.waitToClick(selectors.clientAddresses.createAddress);
-        let url = await page.expectURL('address/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.address.create');
     });
 
     it('should receive an error after clicking save button as consignee, street and town fields are empty', async() => {
@@ -72,9 +70,7 @@ describe('Client Add address path', () => {
     });
 
     it(`should navigate back to the addresses index`, async() => {
-        let url = await page.expectURL('/address/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.address.index');
     });
 
     it(`should confirm the new address exists and it's the default one`, async() => {
@@ -101,9 +97,7 @@ describe('Client Add address path', () => {
     it(`should click on the edit icon of the default address`, async() => {
         await page.waitForTextInElement(selectors.clientAddresses.defaultAddress, 'Somewhere in Thailand');
         await page.waitToClick(selectors.clientAddresses.firstEditAddress);
-        let url = await page.expectURL('/edit');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.address.edit');
     });
 
     it(`should click on the active checkbox and receive an error to save it because it is the default address`, async() => {
@@ -119,8 +113,6 @@ describe('Client Add address path', () => {
         await page.waitForSelector('#shapes .shown', {hidden: true});
         await page.waitToClick(selectors.clientAddresses.cancelEditAddressButton);
         await page.waitToClick('.vn-confirm.shown button[response="accept"]');
-        let url = await page.expectURL('address/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.address.index');
     });
 });
diff --git a/e2e/paths/02-client/06_add_address_notes.spec.js b/e2e/paths/02-client/06_add_address_notes.spec.js
index 58a9496982..abfa1ae34e 100644
--- a/e2e/paths/02-client/06_add_address_notes.spec.js
+++ b/e2e/paths/02-client/06_add_address_notes.spec.js
@@ -19,9 +19,7 @@ describe('Client add address notes path', () => {
     it(`should click on the edit icon of the default address`, async() => {
         await page.waitForTextInElement(selectors.clientAddresses.defaultAddress, '20 Ingram Street');
         await page.waitToClick(selectors.clientAddresses.firstEditAddress);
-        let url = await page.expectURL('/edit');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.address.edit');
     });
 
     it('should not save a description without observation type', async() => {
diff --git a/e2e/paths/02-client/08_add_notes.spec.js b/e2e/paths/02-client/08_add_notes.spec.js
index b759cbd078..3d6a8a9152 100644
--- a/e2e/paths/02-client/08_add_notes.spec.js
+++ b/e2e/paths/02-client/08_add_notes.spec.js
@@ -17,16 +17,12 @@ describe('Client Add notes path', () => {
     });
 
     it(`should reach the notes index`, async() => {
-        let url = await page.expectURL('/note');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.note.index');
     });
 
     it(`should click on the add note button`, async() => {
         await page.waitToClick(selectors.clientNotes.addNoteFloatButton);
-        let url = await page.expectURL('/note/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.note.create');
     });
 
     it(`should create a note`, async() => {
diff --git a/e2e/paths/02-client/09_add_credit.spec.js b/e2e/paths/02-client/09_add_credit.spec.js
index 05c50e8090..639d850f64 100644
--- a/e2e/paths/02-client/09_add_credit.spec.js
+++ b/e2e/paths/02-client/09_add_credit.spec.js
@@ -18,9 +18,7 @@ describe('Client Add credit path', () => {
 
     it(`should click on the add credit button`, async() => {
         await page.waitToClick(selectors.clientCredit.addCreditFloatButton);
-        let url = await page.expectURL('/credit/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.credit.create');
     });
 
     it(`should edit the credit`, async() => {
diff --git a/e2e/paths/02-client/10_add_greuge.spec.js b/e2e/paths/02-client/10_add_greuge.spec.js
index c934a42f1d..1dda319bed 100644
--- a/e2e/paths/02-client/10_add_greuge.spec.js
+++ b/e2e/paths/02-client/10_add_greuge.spec.js
@@ -18,9 +18,7 @@ describe('Client Add greuge path', () => {
 
     it(`should click on the add greuge button`, async() => {
         await page.waitToClick(selectors.clientGreuge.addGreugeFloatButton);
-        let url = await page.expectURL('greuge/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.greuge.create');
     });
 
     it(`should receive an error if all fields are empty but date and type on submit`, async() => {
diff --git a/e2e/paths/02-client/12_lock_of_verified_data.spec.js b/e2e/paths/02-client/12_lock_of_verified_data.spec.js
index 870ce7cb17..c8e590c34f 100644
--- a/e2e/paths/02-client/12_lock_of_verified_data.spec.js
+++ b/e2e/paths/02-client/12_lock_of_verified_data.spec.js
@@ -109,7 +109,7 @@ describe('Client lock verified data path', () => {
             await page.waitToClick(selectors.clientFiscalData.saveButton);
             const result = await page.waitForLastSnackbar();
 
-            expect(result).toEqual(jasmine.arrayContaining([`You can't make changes on a client with verified data`]));
+            expect(result).toEqual(`You can't make changes on a client with verified data`);
         });
     });
 
diff --git a/e2e/paths/02-client/13_log.spec.js b/e2e/paths/02-client/13_log.spec.js
index 462d66347a..fc4b98b8b2 100644
--- a/e2e/paths/02-client/13_log.spec.js
+++ b/e2e/paths/02-client/13_log.spec.js
@@ -27,9 +27,7 @@ describe('Client log path', () => {
 
     it('should navigate to the log section', async() => {
         await page.waitToClick(selectors.clientLog.logButton);
-        let url = await page.expectURL('log');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.log');
     });
 
     it('should check the previous value of the last logged change', async() => {
@@ -46,7 +44,6 @@ describe('Client log path', () => {
         let lastModificationCurrentValue = await page.
             waitToGetProperty(selectors.clientLog.lastModificationCurrentValue, 'innerText');
 
-
         expect(lastModificationPreviousValue).toEqual('name: DavidCharlesHaller');
         expect(lastModificationCurrentValue).toEqual('name: this is a test');
     });
diff --git a/e2e/paths/02-client/14_balance.spec.js b/e2e/paths/02-client/14_balance.spec.js
index ef7930c8d5..87dc84a8ea 100644
--- a/e2e/paths/02-client/14_balance.spec.js
+++ b/e2e/paths/02-client/14_balance.spec.js
@@ -41,9 +41,7 @@ describe('Client balance path', () => {
     it('should click the new payment button', async() => {
         await page.closePopup();
         await page.reloadSection('client.card.balance.index');
-        let url = await page.expectURL('/balance');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.balance.index');
     });
 
     it('should create a new payment that clears the debt', async() => {
@@ -110,17 +108,13 @@ describe('Client balance path', () => {
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.clientsButton);
         await page.wait(selectors.clientsIndex.createClientButton);
-        let url = await page.expectURL('#!/client/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.index');
     });
 
     it('should now search for the user Petter Parker', async() => {
         await page.accessToSearchResult('Petter Parker');
         await page.waitToClick(selectors.clientBalance.balanceButton);
-        let url = await page.expectURL('/balance');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.balance.index');
     });
 
     it('should not be able to click the new payment button as it isnt present', async() => {
diff --git a/e2e/paths/02-client/19_summary.spec.js b/e2e/paths/02-client/19_summary.spec.js
index 11b5a298ec..ab39154cfd 100644
--- a/e2e/paths/02-client/19_summary.spec.js
+++ b/e2e/paths/02-client/19_summary.spec.js
@@ -17,9 +17,7 @@ describe('Client summary path', () => {
     });
 
     it('should reach the first route summary section', async() => {
-        let url = await page.expectURL('#!/client/102/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('client.card.summary');
     });
 
     it('should display details from the client on the header', async() => {
diff --git a/e2e/paths/03-worker/01_summary.spec.js b/e2e/paths/03-worker/01_summary.spec.js
index 86a95eee38..4ea87481a2 100644
--- a/e2e/paths/03-worker/01_summary.spec.js
+++ b/e2e/paths/03-worker/01_summary.spec.js
@@ -16,9 +16,7 @@ describe('Worker summary path', () => {
     });
 
     it('should reach the employee summary section', async() => {
-        const url = await page.expectURL('#!/worker/3/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('worker.card.summary');
     });
 
     it('should check the summary contains the name and userName on the header', async() => {
diff --git a/e2e/paths/03-worker/04_time_control.spec.js b/e2e/paths/03-worker/04_time_control.spec.js
index 36aaca61ea..36340e8809 100644
--- a/e2e/paths/03-worker/04_time_control.spec.js
+++ b/e2e/paths/03-worker/04_time_control.spec.js
@@ -316,16 +316,12 @@ describe('Worker time control path', () => {
 
             it('should search for a worker and access to its summary', async() => {
                 await page.accessToSearchResult('HankPym');
-                let url = await page.expectURL('/summary');
-
-                expect(url).toBe(true);
+                await page.waitForState('worker.card.summary');
             });
 
             it('should access to the time control section', async() => {
                 await page.accessToSection('worker.card.timeControl');
-                let url = await page.expectURL('/time-control');
-
-                expect(url).toBe(true);
+                await page.waitForState('worker.card.timeControl');
             });
 
             it('should lovingly scan in Hank Pym', async() => {
diff --git a/e2e/paths/04-item/01_summary.spec.js b/e2e/paths/04-item/01_summary.spec.js
index 01e7306686..6f2c2c9265 100644
--- a/e2e/paths/04-item/01_summary.spec.js
+++ b/e2e/paths/04-item/01_summary.spec.js
@@ -19,8 +19,8 @@ describe('Item summary path', () => {
         await page.write(selectors.itemsIndex.topbarSearch, 'Ranged weapon');
         await page.waitToClick(selectors.itemsIndex.searchButton);
         await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 3);
-        await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon longbow 2m');
-        await page.waitToClick(selectors.itemsIndex.searchResultPreviewButton);
+        await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon');
+        await page.waitToClick(selectors.itemsIndex.firstResultPreviewButton);
         const isVisible = await page.isVisible(selectors.itemSummary.basicData);
 
         expect(isVisible).toBeTruthy();
@@ -68,11 +68,10 @@ describe('Item summary path', () => {
 
     it('should search for other item', async() => {
         await page.clearInput('vn-searchbar');
-        await page.waitToClick(selectors.itemsIndex.searchButton);
         await page.write(selectors.itemsIndex.topbarSearch, 'Melee Reinforced');
-        await page.waitToClick(selectors.itemsIndex.searchButton);
+        await page.keyboard.press('Enter');
         await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 2);
-        await page.waitToClick(selectors.itemsIndex.searchResultPreviewButton);
+        await page.waitToClick(selectors.itemsIndex.firstResultPreviewButton);
         await page.waitForSelector(selectors.itemSummary.basicData, {visible: true});
     });
 
@@ -104,9 +103,7 @@ describe('Item summary path', () => {
 
     it(`should navigate to the one of the items detailed section`, async() => {
         await page.accessToSearchResult('Melee weapon combat fist 15cm');
-        let url = await page.expectURL('summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.card.summary');
     });
 
     it(`should check the descritor edit button is not visible for employee`, async() => {
diff --git a/e2e/paths/04-item/08_create_and_clone.spec.js b/e2e/paths/04-item/08_create_and_clone.spec.js
index d06ef46823..73249a0b94 100644
--- a/e2e/paths/04-item/08_create_and_clone.spec.js
+++ b/e2e/paths/04-item/08_create_and_clone.spec.js
@@ -27,23 +27,17 @@ describe('Item Create/Clone path', () => {
 
         it('should access to the create item view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.itemsIndex.createItemButton);
-            let url = await page.expectURL('#!/item/create');
-
-            expect(url).toBe(true);
+            await page.waitForState('item.create');
         });
 
         it('should return to the item index by clickig the cancel button', async() => {
             await page.waitToClick(selectors.itemCreateView.cancelButton);
-            let url = await page.expectURL('#!/item/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('item.index');
         });
 
         it('should now access to the create item view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.itemsIndex.createItemButton);
-            let url = await page.expectURL('#!/item/create');
-
-            expect(url).toBe(true);
+            await page.waitForState('item.create');
         });
 
         it('should create the Infinity Gauntlet item', async() => {
@@ -87,9 +81,7 @@ describe('Item Create/Clone path', () => {
         it('should return to the items index by clicking the return to items button', async() => {
             await page.waitToClick(selectors.itemBasicData.goToItemIndexButton);
             await page.wait(selectors.itemsIndex.createItemButton);
-            let url = await page.expectURL('#!/item/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('item.index');
         });
 
         it(`should search for the item Infinity Gauntlet`, async() => {
@@ -106,9 +98,7 @@ describe('Item Create/Clone path', () => {
             await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Infinity Gauntlet');
             await page.waitToClick(selectors.itemsIndex.searchResultCloneButton);
             await page.waitToClick(selectors.itemsIndex.acceptClonationAlertButton);
-            let url = await page.expectURL('tags');
-
-            expect(url).toBe(true);
+            await page.waitForState('item.tags');
         });
 
         it('should search for the item Infinity Gauntlet and find two', async() => {
diff --git a/e2e/paths/04-item/09_regularize.spec.js b/e2e/paths/04-item/09_regularize.spec.js
index 838b24cf0a..a37d97fa37 100644
--- a/e2e/paths/04-item/09_regularize.spec.js
+++ b/e2e/paths/04-item/09_regularize.spec.js
@@ -34,9 +34,7 @@ describe('Item regularize path', () => {
 
     it('should search for an specific item', async() => {
         await page.accessToSearchResult('Ranged weapon pistol 9mm');
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.card.summary');
     });
 
     it('should open the regularize dialog and check the warehouse matches the local user settings', async() => {
@@ -63,9 +61,7 @@ describe('Item regularize path', () => {
             page.waitForNavigation({waitUntil: ['load', 'networkidle0', 'domcontentloaded']}),
             page.waitToClick(selectors.globalItems.ticketsButton)
         ]);
-        let url = await page.expectURL('#!/ticket/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.index');
     });
 
     it('should clear the user local settings now', async() => {
@@ -78,12 +74,9 @@ describe('Item regularize path', () => {
     });
 
     it('should search for the ticket with alias missing', async() => {
-        await page.accessToSearchResult('Carol Danvers');
         await page.keyboard.press('Escape');
         await page.accessToSearchResult('missing');
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.summary');
     });
 
     it(`should check the ticket sale quantity is showing a negative value`, async() => {
@@ -105,16 +98,12 @@ describe('Item regularize path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.itemsButton);
-        let url = await page.expectURL('#!/item/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.index');
     });
 
     it('should search for the item once again', async() => {
         await page.accessToSearchResult('Ranged weapon pistol 9mm');
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.card.summary');
     });
 
     it('should regularize the item once more', async() => {
@@ -136,16 +125,12 @@ describe('Item regularize path', () => {
             page.waitToClick(selectors.globalItems.ticketsButton)
         ]);
         await page.waitForTransitionEnd('vn-searchbar');
-        let url = await page.expectURL('#!/ticket/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.index');
     });
 
     it('should search for the ticket with id 25 once again', async() => {
         await page.accessToSearchResult('25');
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.summary');
     });
 
     it(`should check the ticket contains now two sales`, async() => {
diff --git a/e2e/paths/04-item/11_item_log.spec.js b/e2e/paths/04-item/11_item_log.spec.js
index 213365c120..82800b9b87 100644
--- a/e2e/paths/04-item/11_item_log.spec.js
+++ b/e2e/paths/04-item/11_item_log.spec.js
@@ -25,9 +25,7 @@ describe('Item log path', () => {
 
     it('should access to the create item view by clicking the create floating button', async() => {
         await page.waitToClick(selectors.itemsIndex.createItemButton);
-        let url = await page.expectURL('#!/item/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.create');
     });
 
     it('should create the Knowledge artifact item', async() => {
@@ -44,17 +42,13 @@ describe('Item log path', () => {
     it('should return to the items index by clicking the return to items button', async() => {
         await page.waitToClick(selectors.itemBasicData.goToItemIndexButton);
         await page.wait(selectors.itemsIndex.createItemButton);
-        let url = await page.expectURL('#!/item/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.index');
     });
 
     it(`should search for the created item and navigate to it's log section`, async() => {
         await page.accessToSearchResult('Knowledge artifact');
         await page.accessToSection('item.card.log');
-        let url = await page.expectURL('/log');
-
-        expect(url).toBe(true);
+        await page.waitForState('item.card.log');
     });
 
     it(`should confirm the log is showing 5 entries`, async() => {
diff --git a/e2e/paths/04-item/13_request.spec.js b/e2e/paths/04-item/13_request.spec.js
index d6aecbb48e..ab48e0c375 100644
--- a/e2e/paths/04-item/13_request.spec.js
+++ b/e2e/paths/04-item/13_request.spec.js
@@ -16,9 +16,7 @@ describe('Item request path', () => {
     });
 
     it('should reach the item request section', async() => {
-        const result = await page.expectURL('/item/request');
-
-        expect(result).toBe(true);
+        await page.waitForState('item.request');
     });
 
     it('should fill the id and quantity then check the concept was updated', async() => {
@@ -38,9 +36,8 @@ describe('Item request path', () => {
 
     it('should now click on the second declain request icon then type the reason', async() => {
         await page.waitToClick(selectors.itemRequest.secondRequestDecline);
-        await page.write(selectors.itemRequest.declineReason, 'not quite as expected');
-        await page.waitToClick(selectors.itemRequest.acceptDeclineReason);
-        await page.waitForContentLoaded();
+        await page.write(selectors.itemRequest.declineReason, 'Not quite as expected');
+        await page.respondToDialog('accept');
         let status = await page.waitToGetProperty(selectors.itemRequest.firstRequestStatus, 'innerText');
 
         expect(status).toContain('Denegada');
diff --git a/e2e/paths/05-ticket/02_expeditions_and_log.spec.js b/e2e/paths/05-ticket/02_expeditions_and_log.spec.js
index 94fad9b698..f0accedaf8 100644
--- a/e2e/paths/05-ticket/02_expeditions_and_log.spec.js
+++ b/e2e/paths/05-ticket/02_expeditions_and_log.spec.js
@@ -19,8 +19,9 @@ describe('Ticket expeditions and log path', () => {
 
     it(`should delete a former expedition and confirm the remaining expedition are the expected ones`, async() => {
         await page.waitToClick(selectors.ticketExpedition.secondExpeditionRemoveButton);
-        await page.waitToClick(selectors.ticketExpedition.acceptDeleteRowButton),
+        await page.waitToClick(selectors.ticketExpedition.acceptDeleteRowButton);
         await page.reloadSection('ticket.card.expedition');
+
         await page.waitForSelector(selectors.ticketExpedition.expeditionRow, {});
         const result = await page
             .countElement(selectors.ticketExpedition.expeditionRow);
diff --git a/e2e/paths/05-ticket/05_tracking_state.spec.js b/e2e/paths/05-ticket/05_tracking_state.spec.js
index 108e8776f7..2623966bef 100644
--- a/e2e/paths/05-ticket/05_tracking_state.spec.js
+++ b/e2e/paths/05-ticket/05_tracking_state.spec.js
@@ -21,9 +21,7 @@ describe('Ticket Create new tracking state path', () => {
         it('should access to the create state view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.ticketTracking.createStateButton);
             await page.waitForSelector(selectors.createStateView.state, {visible: true});
-            let url = await page.expectURL('tracking/edit');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.card.tracking.edit');
         });
 
         it(`should attempt create a new state but receive an error if state is empty`, async() => {
@@ -51,9 +49,7 @@ describe('Ticket Create new tracking state path', () => {
 
         it('should now access to the create state view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.ticketTracking.createStateButton);
-            let url = await page.expectURL('tracking/edit');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.card.tracking.edit');
         });
 
         it(`should attemp to create an state for which salesPerson doesn't have permissions`, async() => {
diff --git a/e2e/paths/05-ticket/06_basic_data_steps.spec.js b/e2e/paths/05-ticket/06_basic_data_steps.spec.js
index de78b9fa7c..3191673a55 100644
--- a/e2e/paths/05-ticket/06_basic_data_steps.spec.js
+++ b/e2e/paths/05-ticket/06_basic_data_steps.spec.js
@@ -68,9 +68,7 @@ describe('Ticket Edit basic data path', () => {
 
     it(`should click next`, async() => {
         await page.waitToClick(selectors.ticketBasicData.nextStepButton);
-        let url = await page.expectURL('data/step-two');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.basicData.stepTwo');
     });
 
     it(`should have a price diference`, async() => {
@@ -83,8 +81,6 @@ describe('Ticket Edit basic data path', () => {
     it(`should select a new reason for the changes made then click on finalize`, async() => {
         await page.waitToClick(selectors.ticketBasicData.chargesReason);
         await page.waitToClick(selectors.ticketBasicData.finalizeButton);
-        let url = await page.expectURL('summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.summary');
     });
 });
diff --git a/e2e/paths/05-ticket/09_weekly.spec.js b/e2e/paths/05-ticket/09_weekly.spec.js
index 3e791dc180..1629107fb8 100644
--- a/e2e/paths/05-ticket/09_weekly.spec.js
+++ b/e2e/paths/05-ticket/09_weekly.spec.js
@@ -41,9 +41,7 @@ describe('Ticket descriptor path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.ticketsButton);
-        let url = await page.expectURL('#!/ticket/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.index');
     });
 
     it('should confirm the ticket 11 was added to thursday', async() => {
@@ -57,25 +55,12 @@ describe('Ticket descriptor path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.ticketsButton);
-        let url = await page.expectURL('#!/ticket/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.index');
     });
 
     it('should now search for the ticket 11', async() => {
-        await page.write(selectors.ticketsIndex.topbarSearch, '11');
-        await page.waitToClick(selectors.ticketsIndex.searchButton);
-        await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1);
-        const result = await page.countElement(selectors.ticketsIndex.searchResult);
-
-        expect(result).toEqual(1);
-    });
-
-    it(`should click on the search result to access to the ticket`, async() => {
-        await page.waitToClick(selectors.ticketsIndex.searchResult);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.accessToSearchResult('11');
+        await page.waitForState('ticket.card.summary');
     });
 
     it('should add the ticket to saturday turn using the descriptor more menu', async() => {
@@ -91,9 +76,7 @@ describe('Ticket descriptor path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.ticketsButton);
-        let url = await page.expectURL('#!/ticket/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.index');
     });
 
     it('should confirm the ticket 11 was added on saturday', async() => {
diff --git a/e2e/paths/05-ticket/10_request.spec.js b/e2e/paths/05-ticket/10_request.spec.js
index 737d690488..2bb0cbb73f 100644
--- a/e2e/paths/05-ticket/10_request.spec.js
+++ b/e2e/paths/05-ticket/10_request.spec.js
@@ -30,13 +30,10 @@ describe('Ticket purchase request path', () => {
     });
 
     it('should have been redirected to the request index', async() => {
-        let url = await page.expectURL('/request');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.request.index');
     });
 
     it(`should edit the third request quantity as it's state is still new`, async() => {
-        await page.waitFor(2000); // looks like it needs more than a single second some times to load
         await page.write(selectors.ticketRequests.thirdRequestQuantity, '9');
         await page.keyboard.press('Enter');
         const result = await page.waitForLastSnackbar();
diff --git a/e2e/paths/05-ticket/11_diary.spec.js b/e2e/paths/05-ticket/11_diary.spec.js
index b529ee1ffb..5e900fd25e 100644
--- a/e2e/paths/05-ticket/11_diary.spec.js
+++ b/e2e/paths/05-ticket/11_diary.spec.js
@@ -28,7 +28,7 @@ xdescribe('Ticket diary path', () => {
     it(`should click on the search result to access to the ticket summary`, async() => {
         await page.waitForTextInElement(selectors.ticketsIndex.searchResult, 'Bat cave');
         await page.waitToClick(selectors.ticketsIndex.searchResult);
-        let url = await page.expectURL('/summary');
+        let url = await page.expectURL('/summary'); // use waitForState instead
 
         expect(url).toBe(true);
     });
@@ -37,7 +37,7 @@ xdescribe('Ticket diary path', () => {
         await page.waitToClick(selectors.ticketSummary.firstSaleItemId);
         await page.waitForTransitionEnd('.vn-popover');
         await page.waitToClick(selectors.ticketSummary.popoverDiaryButton);
-        let url = await page.expectURL('/diary');
+        let url = await page.expectURL('/diary'); // use waitForState instead
 
         expect(url).toBe(true);
     });
diff --git a/e2e/paths/05-ticket/12_descriptor.spec.js b/e2e/paths/05-ticket/12_descriptor.spec.js
index 59691d380e..ce9f064dd2 100644
--- a/e2e/paths/05-ticket/12_descriptor.spec.js
+++ b/e2e/paths/05-ticket/12_descriptor.spec.js
@@ -18,9 +18,7 @@ describe('Ticket descriptor path', () => {
     describe('Delete ticket', () => {
         it('should search for an specific ticket', async() => {
             await page.accessToSearchResult('18');
-            let url = await page.expectURL('/summary');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.card.summary');
         });
 
         it(`should update the shipped hour using the descriptor menu`, async() => {
@@ -50,16 +48,13 @@ describe('Ticket descriptor path', () => {
         });
 
         it('should have been relocated to the ticket index', async() => {
-            let url = await page.expectURL('#!/ticket/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.index');
         });
 
         it(`should search for the deleted ticket and check it's date`, async() => {
             await page.write(selectors.ticketsIndex.topbarSearch, '18');
             await page.waitToClick(selectors.ticketsIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1);
-            await page.wait(selectors.ticketsIndex.searchResultDate);
+            await page.waitForState('ticket.card.summary');
             const result = await page.waitToGetProperty(selectors.ticketsIndex.searchResultDate, 'innerText');
 
             expect(result).toContain(2000);
@@ -69,9 +64,7 @@ describe('Ticket descriptor path', () => {
     describe('add stowaway', () => {
         it('should search for a ticket', async() => {
             await page.accessToSearchResult('16');
-            let url = await page.expectURL('/summary');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.card.summary');
         });
 
         it('should open the add stowaway dialog', async() => {
@@ -102,9 +95,7 @@ describe('Ticket descriptor path', () => {
 
         it(`should navigate back to the added ticket using the descriptors ship button`, async() => {
             await page.waitToClick(selectors.ticketDescriptor.shipButton);
-            let url = await page.expectURL('#!/ticket/17/summary');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.card.summary');
         });
 
         it('should delete the stowaway', async() => {
@@ -128,9 +119,7 @@ describe('Ticket descriptor path', () => {
 
             await page.loginAndModule('adminBoss', 'ticket');
             await page.accessToSearchResult(invoiceableTicketId);
-            let url = await page.expectURL(`ticket/${invoiceableTicketId}/summary`);
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.card.summary');
         });
 
         it(`should make sure the ticket doesn't have an invoiceOutFk yet`, async() => {
diff --git a/e2e/paths/05-ticket/13_services.spec.js b/e2e/paths/05-ticket/13_services.spec.js
index 07a0a57686..1a32ea9448 100644
--- a/e2e/paths/05-ticket/13_services.spec.js
+++ b/e2e/paths/05-ticket/13_services.spec.js
@@ -44,9 +44,6 @@ describe('Ticket services path', () => {
             await page.loginAndModule('administrative', 'ticket');
             await page.accessToSearchResult(editableTicketId);
             await page.accessToSection('ticket.card.service');
-            let url = await page.expectURL('/service');
-
-            expect(url).toBe(true);
         });
 
         it('should click on the add button to prepare the form to create a new service', async() => {
diff --git a/e2e/paths/05-ticket/14_create_ticket.spec.js b/e2e/paths/05-ticket/14_create_ticket.spec.js
index e501ea0ef9..176e899304 100644
--- a/e2e/paths/05-ticket/14_create_ticket.spec.js
+++ b/e2e/paths/05-ticket/14_create_ticket.spec.js
@@ -17,15 +17,16 @@ describe('Ticket create path', () => {
 
     it('should open the new ticket form', async() => {
         await page.waitToClick(selectors.ticketsIndex.newTicketButton);
-        let url = await page.expectURL('#!/ticket/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.create');
     });
 
     it('should succeed to create a ticket', async() => {
+        const nextMonth = new Date();
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+
         await page.autocompleteSearch(selectors.createTicketView.client, 'Tony Stark');
         await page.autocompleteSearch(selectors.createTicketView.address, 'Tony Stark');
-        await page.datePicker(selectors.createTicketView.deliveryDate, 1, null);
+        await page.pickDate(selectors.createTicketView.deliveryDate, nextMonth);
         await page.autocompleteSearch(selectors.createTicketView.warehouse, 'Warehouse One');
         await page.autocompleteSearch(selectors.createTicketView.agency, 'Silla247');
         await page.waitToClick(selectors.createTicketView.createButton);
@@ -35,8 +36,6 @@ describe('Ticket create path', () => {
     });
 
     it('should check the url is now the summary of the ticket', async() => {
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.summary');
     });
 });
diff --git a/e2e/paths/05-ticket/15_create_ticket_from_client.spec.js b/e2e/paths/05-ticket/15_create_ticket_from_client.spec.js
index 28c11de3a6..a68ce894ef 100644
--- a/e2e/paths/05-ticket/15_create_ticket_from_client.spec.js
+++ b/e2e/paths/05-ticket/15_create_ticket_from_client.spec.js
@@ -19,9 +19,7 @@ describe('Ticket create from client path', () => {
     it('should click the create simple ticket on the descriptor menu', async() => {
         await page.waitToClick(selectors.clientDescriptor.moreMenu);
         await page.waitToClick(selectors.clientDescriptor.simpleTicketButton);
-        let url = await page.expectURL('clientFk=102');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.create');
     });
 
     it('should check if the client details are the expected ones', async() => {
@@ -31,7 +29,6 @@ describe('Ticket create from client path', () => {
         const address = await page
             .waitToGetProperty(selectors.createTicketView.address, 'value');
 
-
         expect(client).toContain('Petter Parker');
         expect(address).toContain('20 Ingram Street');
     });
diff --git a/e2e/paths/05-ticket/16_summary.spec.js b/e2e/paths/05-ticket/16_summary.spec.js
index e7c6507d79..7ead648a26 100644
--- a/e2e/paths/05-ticket/16_summary.spec.js
+++ b/e2e/paths/05-ticket/16_summary.spec.js
@@ -18,9 +18,7 @@ describe('Ticket Summary path', () => {
     it('should navigate to the target ticket summary section', async() => {
         await page.loginAndModule('employee', 'ticket');
         await page.accessToSearchResult(ticketId);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.summary');
     });
 
     it(`should display details from the ticket and it's client on the top of the header`, async() => {
@@ -75,9 +73,7 @@ describe('Ticket Summary path', () => {
     it('should log in as production then navigate to the summary of the same ticket', async() => {
         await page.loginAndModule('production', 'ticket');
         await page.accessToSearchResult(ticketId);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.summary');
     });
 
     it('should click on the SET OK button', async() => {
diff --git a/e2e/paths/05-ticket/17_log.spec.js b/e2e/paths/05-ticket/17_log.spec.js
index 2008d022e3..c677d2e620 100644
--- a/e2e/paths/05-ticket/17_log.spec.js
+++ b/e2e/paths/05-ticket/17_log.spec.js
@@ -19,9 +19,7 @@ describe('Ticket log path', () => {
         await page.loginAndModule('employee', 'ticket');
         await page.accessToSearchResult(ticketId);
         await page.accessToSection('ticket.card.observation');
-        let url = await page.expectURL('/observation');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.observation');
     });
 
     it('should create a new note for the test', async() => {
@@ -36,9 +34,7 @@ describe('Ticket log path', () => {
 
     it('should navigate to the log section', async() => {
         await page.accessToSection('ticket.card.log');
-        let url = await page.expectURL('/log');
-
-        expect(url).toBe(true);
+        await page.waitForState('ticket.card.log');
     });
 
     it('should set the viewport width to 1920 to see the table full width', async() => {
diff --git a/e2e/paths/06-claim/01_basic_data.spec.js b/e2e/paths/06-claim/01_basic_data.spec.js
index 9718fb5834..222cb558b4 100644
--- a/e2e/paths/06-claim/01_basic_data.spec.js
+++ b/e2e/paths/06-claim/01_basic_data.spec.js
@@ -27,13 +27,11 @@ describe('Claim edit basic data path', () => {
         await page.waitToClick(selectors.claimBasicData.saveButton);
         const result = await page.waitForLastSnackbar();
 
-        expect(result).toEqual(jasmine.arrayContaining(['Data saved!']));
+        expect(result).toEqual('Data saved!');
     });
 
     it(`should have been redirected to the next section of claims as the role is salesAssistant`, async() => {
-        let url = await page.expectURL('/detail');
-
-        expect(url).toBe(true);
+        await page.waitForState('claim.card.detail');
     });
 
     it('should confirm the claim state was edited', async() => {
@@ -58,6 +56,6 @@ describe('Claim edit basic data path', () => {
         await page.waitToClick(selectors.claimBasicData.saveButton);
         const result = await page.waitForLastSnackbar();
 
-        expect(result).toEqual(jasmine.arrayContaining(['Data saved!']));
+        expect(result).toEqual('Data saved!');
     });
 });
diff --git a/e2e/paths/06-claim/02_development.spec.js b/e2e/paths/06-claim/02_development.spec.js
index 346f885814..970a801eed 100644
--- a/e2e/paths/06-claim/02_development.spec.js
+++ b/e2e/paths/06-claim/02_development.spec.js
@@ -32,9 +32,7 @@ describe('Claim development', () => {
     });
 
     it(`should redirect to the next section of claims as the role is salesAssistant`, async() => {
-        let url = await page.expectURL('/action');
-
-        expect(url).toBe(true);
+        await page.waitForState('claim.card.action');
     });
 
     it('should edit a development', async() => {
diff --git a/e2e/paths/06-claim/03_detail.spec.js b/e2e/paths/06-claim/03_detail.spec.js
index cf758919eb..93d2cba4cd 100644
--- a/e2e/paths/06-claim/03_detail.spec.js
+++ b/e2e/paths/06-claim/03_detail.spec.js
@@ -56,7 +56,7 @@ xdescribe('Claim detail', () => {
         await page.loginAndModule('salesAssistant', 'claim');
         await page.accessToSearchResult('1');
         await page.accessToSection('claim.card.detail');
-        let url = await page.expectURL('/detail');
+        let url = await page.expectURL('/detail'); // replace with waitForState
 
         expect(url).toBe(true);
     });
@@ -99,7 +99,7 @@ xdescribe('Claim detail', () => {
     });
 
     it(`should have been redirected to the next section in claims`, async() => {
-        let url = await page.expectURL('development');
+        let url = await page.expectURL('development'); // replace with waitForState
 
         expect(url).toBe(true);
     });
diff --git a/e2e/paths/06-claim/04_claim_action.spec.js b/e2e/paths/06-claim/04_claim_action.spec.js
index 1db3938d54..a482e21c3a 100644
--- a/e2e/paths/06-claim/04_claim_action.spec.js
+++ b/e2e/paths/06-claim/04_claim_action.spec.js
@@ -67,7 +67,7 @@ describe('Claim action path', () => {
         await page.waitToClick(selectors.claimAction.isPaidWithManaCheckbox);
         const result = await page.waitForLastSnackbar();
 
-        expect(result).toEqual(jasmine.arrayContaining(['Data saved!']));
+        expect(result).toEqual('Data saved!');
     });
 
     it('should confirm the "is paid with mana" checkbox is checked', async() => {
diff --git a/e2e/paths/06-claim/05_summary.spec.js b/e2e/paths/06-claim/05_summary.spec.js
index 9dab659548..c63e686cbf 100644
--- a/e2e/paths/06-claim/05_summary.spec.js
+++ b/e2e/paths/06-claim/05_summary.spec.js
@@ -18,9 +18,7 @@ describe('claim Summary path', () => {
     it('should navigate to the target claim summary section', async() => {
         await page.loginAndModule('employee', 'claim');
         await page.accessToSearchResult(claimId);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('claim.card.summary');
     });
 
     it(`should display details from the claim and it's client on the top of the header`, async() => {
diff --git a/e2e/paths/06-claim/06_descriptor.spec.js b/e2e/paths/06-claim/06_descriptor.spec.js
index 104f63945e..ee49fe2457 100644
--- a/e2e/paths/06-claim/06_descriptor.spec.js
+++ b/e2e/paths/06-claim/06_descriptor.spec.js
@@ -18,9 +18,7 @@ describe('claim Descriptor path', () => {
     it('should now navigate to the target claim summary section', async() => {
         await page.loginAndModule('employee', 'claim');
         await page.accessToSearchResult(claimId);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('claim.card.summary');
     });
 
     it(`should not be able to see the delete claim button of the descriptor more menu`, async() => {
@@ -31,9 +29,7 @@ describe('claim Descriptor path', () => {
     it(`should log in as salesAssistant and navigate to the target claim`, async() => {
         await page.loginAndModule('salesAssistant', 'claim');
         await page.accessToSearchResult(claimId);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('claim.card.summary');
     });
 
     it(`should be able to see the delete claim button of the descriptor more menu`, async() => {
@@ -50,9 +46,7 @@ describe('claim Descriptor path', () => {
     });
 
     it(`should have been relocated to the claim index`, async() => {
-        let url = await page.expectURL('/claim/index');
-
-        expect(url).toBe(true);
+        await page.waitForState('claim.index');
     });
 
     it(`should search for the deleted claim to find no results`, async() => {
diff --git a/e2e/paths/07-order/01_summary.spec.js b/e2e/paths/07-order/01_summary.spec.js
index cba56bf709..f4bc448272 100644
--- a/e2e/paths/07-order/01_summary.spec.js
+++ b/e2e/paths/07-order/01_summary.spec.js
@@ -16,9 +16,7 @@ describe('Order summary path', () => {
     });
 
     it('should reach the order summary section', async() => {
-        const url = await page.expectURL('#!/order/16/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('order.card.summary');
     });
 
     it('should check the summary contains the order id', async() => {
diff --git a/e2e/paths/07-order/02_basic_data.spec.js b/e2e/paths/07-order/02_basic_data.spec.js
index 768985628b..d7bd01208d 100644
--- a/e2e/paths/07-order/02_basic_data.spec.js
+++ b/e2e/paths/07-order/02_basic_data.spec.js
@@ -4,7 +4,6 @@ import getBrowser from '../../helpers/puppeteer';
 describe('Order edit basic data path', () => {
     let browser;
     let page;
-    const today = new Date().getDate();
 
     beforeAll(async() => {
         browser = await getBrowser();
@@ -40,9 +39,7 @@ describe('Order edit basic data path', () => {
             await page.accessToSearchResult(orderId);
             await page.accessToSection('order.card.basicData');
             await page.waitForSelector(selectors.orderBasicData.observation, {visible: true});
-            let url = await page.expectURL(`#!/order/${orderId}/basic-data`);
-
-            expect(url).toBe(true);
+            await page.waitForState('order.card.basicData');
         });
 
         it('should not be able to change anything', async() => {
@@ -60,26 +57,20 @@ describe('Order edit basic data path', () => {
             await page.waitToClick(selectors.orderBasicData.acceptButton);
             await page.waitForContentLoaded();
             await page.waitToClick(selectors.ordersIndex.createOrderButton);
-            let url = await page.expectURL('#!/order/create');
-
-            expect(url).toBe(true);
+            await page.waitForState('order.create');
         });
 
         it('should now create a new one', async() => {
             await page.autocompleteSearch(selectors.createOrderView.client, 'Jessica Jones');
-            await page.datePicker(selectors.createOrderView.landedDatePicker, 0, today);
+            await page.pickDate(selectors.createOrderView.landedDatePicker);
             await page.autocompleteSearch(selectors.createOrderView.agency, 'Other agency');
             await page.waitToClick(selectors.createOrderView.createButton);
-            let url = await page.expectURL('/catalog');
-
-            expect(url).toBe(true);
+            await page.waitForState('order.card.catalog');
         });
 
         it('should navigate to the basic data section of the new order', async() => {
             await page.accessToSection('order.card.basicData');
-            let url = await page.expectURL('/basic-data');
-
-            expect(url).toBe(true);
+            await page.waitForState('order.card.basicData');
         });
 
         it('should be able to modify all the properties', async() => {
diff --git a/e2e/paths/07-order/03_lines.spec.js b/e2e/paths/07-order/03_lines.spec.js
index 21fceac447..450e1b9c97 100644
--- a/e2e/paths/07-order/03_lines.spec.js
+++ b/e2e/paths/07-order/03_lines.spec.js
@@ -41,10 +41,7 @@ describe('Order lines', () => {
     it('should confirm the whole order and redirect to ticket index filtered by clientFk', async() => {
         await page.waitToClick(selectors.orderLine.confirmOrder);
 
-        let hashPartOne = await page.expectURL('ticket/index');
-        let hashPartTwo = await page.expectURL('clientFk');
-
-        expect(hashPartOne).toBe(true);
-        expect(hashPartTwo).toBe(true);
+        await page.expectURL('ticket/index');
+        await page.expectURL('clientFk');
     });
 });
diff --git a/e2e/paths/07-order/04_catalog.spec.js b/e2e/paths/07-order/04_catalog.spec.js
index ca64897793..0db3130889 100644
--- a/e2e/paths/07-order/04_catalog.spec.js
+++ b/e2e/paths/07-order/04_catalog.spec.js
@@ -17,21 +17,15 @@ describe('Order catalog', () => {
 
     it('should open the create new order form', async() => {
         await page.waitToClick(selectors.ordersIndex.createOrderButton);
-        let url = await page.expectURL('order/create');
-
-        expect(url).toBe(true);
+        await page.waitForState('order.create');
     });
 
     it('should create a new order', async() => {
-        let today = new Date().getDate();
-
         await page.autocompleteSearch(selectors.createOrderView.client, 'Tony Stark');
-        await page.datePicker(selectors.createOrderView.landedDatePicker, 0, today);
+        await page.pickDate(selectors.createOrderView.landedDatePicker);
         await page.autocompleteSearch(selectors.createOrderView.agency, 'Other agency');
         await page.waitToClick(selectors.createOrderView.createButton);
-        let url = await page.expectURL('/catalog');
-
-        expect(url).toBe(true);
+        await page.waitForState('order.card.catalog');
     });
 
     it('should add the realm and type filters and obtain results', async() => {
diff --git a/e2e/paths/08-route/01_summary.spec.js b/e2e/paths/08-route/01_summary.spec.js
index c062b9b086..02cc71f2fd 100644
--- a/e2e/paths/08-route/01_summary.spec.js
+++ b/e2e/paths/08-route/01_summary.spec.js
@@ -17,9 +17,7 @@ describe('Route summary path', () => {
     });
 
     it('should reach the first route summary section', async() => {
-        let url = await page.expectURL('#!/route/1/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('route.card.summary');
     });
 
     it(`should display details from the route on the header`, async() => {
diff --git a/e2e/paths/08-route/02_basic_data.spec.js b/e2e/paths/08-route/02_basic_data.spec.js
index 91688b3ff9..66e516366c 100644
--- a/e2e/paths/08-route/02_basic_data.spec.js
+++ b/e2e/paths/08-route/02_basic_data.spec.js
@@ -18,9 +18,12 @@ describe('Route basic Data path', () => {
     });
 
     it('should edit the route basic data', async() => {
+        const nextMonth = new Date();
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+
         await page.autocompleteSearch(selectors.routeBasicData.worker, 'adminBossNick');
         await page.autocompleteSearch(selectors.routeBasicData.vehicle, '1111-IMK');
-        await page.datePicker(selectors.routeBasicData.createdDate, 1, null);
+        await page.pickDate(selectors.routeBasicData.createdDate, nextMonth);
         await page.clearInput(selectors.routeBasicData.kmStart);
         await page.write(selectors.routeBasicData.kmStart, '1');
         await page.clearInput(selectors.routeBasicData.kmEnd);
@@ -37,7 +40,6 @@ describe('Route basic Data path', () => {
         await page.reloadSection('route.card.basicData');
         const worker = await page.waitToGetProperty(selectors.routeBasicData.worker, 'value');
 
-
         expect(worker).toEqual('adminBoss - adminBossNick');
     });
 
diff --git a/e2e/paths/08-route/03_create.spec.js b/e2e/paths/08-route/03_create.spec.js
index 11ffd500b4..dafccff7f1 100644
--- a/e2e/paths/08-route/03_create.spec.js
+++ b/e2e/paths/08-route/03_create.spec.js
@@ -19,9 +19,7 @@ describe('Route create path', () => {
         it('should click on the add new route button and open the creation form', async() => {
             await page.waitForContentLoaded();
             await page.waitToClick(selectors.routeIndex.addNewRouteButton);
-            let url = await page.expectURL('#!/route/create');
-
-            expect(url).toBe(true);
+            await page.waitForState('route.create');
         });
 
         it(`should attempt to create a new route but fail since employee has no access rights`, async() => {
@@ -41,14 +39,12 @@ describe('Route create path', () => {
 
         it('should again click on the add new route button and open the creation form', async() => {
             await page.waitToClick(selectors.routeIndex.addNewRouteButton);
-            let url = await page.expectURL('#!/route/create');
-
-            expect(url).toBe(true);
+            await page.waitForState('route.create');
         });
 
         it(`should create a new route`, async() => {
             await page.autocompleteSearch(selectors.createRouteView.worker, 'teamManagerNick');
-            await page.datePicker(selectors.createRouteView.createdDatePicker, 0, null);
+            await page.pickDate(selectors.createRouteView.createdDatePicker);
             await page.autocompleteSearch(selectors.createRouteView.vehicleAuto, '4444-IMK');
             await page.autocompleteSearch(selectors.createRouteView.agency, 'Teleportation device');
             await page.write(selectors.createRouteView.description, 'faster faster!!');
@@ -59,9 +55,7 @@ describe('Route create path', () => {
         });
 
         it(`should confirm the redirection to the created route summary`, async() => {
-            let url = await page.expectURL('/summary');
-
-            expect(url).toBe(true);
+            await page.waitForState('route.card.summary');
         });
     });
 });
diff --git a/e2e/paths/09-invoice-out/01_summary.spec.js b/e2e/paths/09-invoice-out/01_summary.spec.js
index 126c745d34..728f0130a9 100644
--- a/e2e/paths/09-invoice-out/01_summary.spec.js
+++ b/e2e/paths/09-invoice-out/01_summary.spec.js
@@ -17,9 +17,7 @@ describe('InvoiceOut summary path', () => {
     });
 
     it('should reach the summary section', async() => {
-        const result = await page.expectURL('/summary');
-
-        expect(result).toBe(true);
+        await page.waitForState('invoiceOut.card.summary');
     });
 
     it('should contain the company from which the invoice is emited', async() => {
diff --git a/e2e/paths/09-invoice-out/02_descriptor.spec.js b/e2e/paths/09-invoice-out/02_descriptor.spec.js
index e70c39ded5..ceb2175e2d 100644
--- a/e2e/paths/09-invoice-out/02_descriptor.spec.js
+++ b/e2e/paths/09-invoice-out/02_descriptor.spec.js
@@ -20,10 +20,7 @@ describe('InvoiceOut descriptor path', () => {
             await page.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton);
             await page.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222');
             await page.waitToClick(selectors.ticketsIndex.advancedSearchButton);
-            await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1);
-            const result = await page.countElement(selectors.ticketsIndex.searchResult);
-
-            expect(result).toEqual(1);
+            await page.waitForState('ticket.card.summary');
         });
 
         it('should navigate to the invoiceOut index', async() => {
@@ -31,25 +28,12 @@ describe('InvoiceOut descriptor path', () => {
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.invoiceOutButton);
             await page.wait(selectors.invoiceOutIndex.topbarSearch);
-            let url = await page.expectURL('#!/invoice-out/index');
-
-            expect(url).toBe(true);
-        });
-
-        it('should search for the target invoiceOut', async() => {
-            await page.write(selectors.invoiceOutIndex.topbarSearch, 'T2222222');
-            await page.waitToClick(selectors.invoiceOutIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 1);
-            const result = await page.countElement(selectors.invoiceOutIndex.searchResult);
-
-            expect(result).toEqual(1);
+            await page.waitForState('invoiceOut.index');
         });
 
         it(`should click on the search result to access to the invoiceOut summary`, async() => {
             await page.accessToSearchResult('T2222222');
-            let url = await page.expectURL('/summary');
-
-            expect(url).toBe(true);
+            await page.waitForState('invoiceOut.card.summary');
         });
 
         it('should delete the invoiceOut using the descriptor more menu', async() => {
@@ -62,9 +46,7 @@ describe('InvoiceOut descriptor path', () => {
         });
 
         it('should have been relocated to the invoiceOut index', async() => {
-            let url = await page.expectURL('#!/invoice-out/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('invoiceOut.index');
         });
 
         it(`should search for the deleted invouceOut to find no results`, async() => {
@@ -80,13 +62,10 @@ describe('InvoiceOut descriptor path', () => {
             await page.waitToClick(selectors.globalItems.applicationsMenuButton);
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.ticketsButton);
-            let url = await page.expectURL('#!/ticket/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('ticket.index');
         });
 
         it('should search for tickets with an specific invoiceOut to find no results', async() => {
-            await page.waitFor(2000);
             await page.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton);
             await page.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222');
             await page.waitToClick(selectors.ticketsIndex.advancedSearchButton);
@@ -101,16 +80,12 @@ describe('InvoiceOut descriptor path', () => {
             await page.waitToClick(selectors.globalItems.applicationsMenuButton);
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.invoiceOutButton);
-            let url = await page.expectURL('#!/invoice-out/index');
-
-            expect(url).toBe(true);
+            await page.waitForState('invoiceOut.index');
         });
 
         it(`should search and access to the invoiceOut summary`, async() => {
             await page.accessToSearchResult('T1111111');
-            let url = await page.expectURL('/summary');
-
-            expect(url).toBe(true);
+            await page.waitForState('invoiceOut.card.summary');
         });
 
         it(`should check the invoiceOut is booked in the summary data`, async() => {
diff --git a/e2e/paths/10-travel/01_thermograph.spec.js b/e2e/paths/10-travel/01_thermograph.spec.js
index efa2295a65..67a62381a9 100644
--- a/e2e/paths/10-travel/01_thermograph.spec.js
+++ b/e2e/paths/10-travel/01_thermograph.spec.js
@@ -18,16 +18,12 @@ describe('Travel thermograph path', () => {
     });
 
     it('should reach the thermograph section', async() => {
-        const result = await page.expectURL('/thermograph/index');
-
-        expect(result).toBe(true);
+        await page.waitForState('travel.card.thermograph.index');
     });
 
     it('should click the add thermograph floating button', async() => {
         await page.waitToClick(selectors.travelThermograph.add);
-        const result = await page.expectURL('/thermograph/create');
-
-        expect(result).toBe(true);
+        await page.waitForState('travel.card.thermograph.create');
     });
 
     it('should select the thermograph and then the file to upload', async() => {
diff --git a/e2e/paths/10-travel/02_basic_data_and_log.spec.js b/e2e/paths/10-travel/02_basic_data_and_log.spec.js
index a835df2a2b..85c7231c85 100644
--- a/e2e/paths/10-travel/02_basic_data_and_log.spec.js
+++ b/e2e/paths/10-travel/02_basic_data_and_log.spec.js
@@ -18,13 +18,14 @@ describe('Travel basic data path', () => {
     });
 
     it('should reach the thermograph section', async() => {
-        const result = await page.expectURL('/basic-data');
-
-        expect(result).toBe(true);
+        await page.waitForState('travel.card.basicData');
     });
 
     it('should set a wrong delivery date then receive an error on submit', async() => {
-        await page.datePicker(selectors.travelBasicDada.deliveryDate, -1, null);
+        const lastMonth = new Date();
+        lastMonth.setMonth(lastMonth.getMonth() - 1);
+
+        await page.pickDate(selectors.travelBasicDada.deliveryDate, lastMonth);
         await page.waitToClick(selectors.travelBasicDada.save);
         const result = await page.waitForLastSnackbar();
 
@@ -89,9 +90,7 @@ describe('Travel basic data path', () => {
 
     it('should navigate to the travel logs', async() => {
         await page.accessToSection('travel.card.log');
-        const result = await page.expectURL('/log');
-
-        expect(result).toBe(true);
+        await page.waitForState('travel.card.log');
     });
 
     it('should check the 1st log contains details from the changes made', async() => {
diff --git a/e2e/paths/11-zone/01_basic-data.spec.js b/e2e/paths/11-zone/01_basic-data.spec.js
index c63bb83217..7044ab70c3 100644
--- a/e2e/paths/11-zone/01_basic-data.spec.js
+++ b/e2e/paths/11-zone/01_basic-data.spec.js
@@ -18,9 +18,7 @@ describe('Zone basic data path', () => {
     });
 
     it('should reach the basic data section', async() => {
-        let url = await page.expectURL('#!/zone/10/basic-data');
-
-        expect(url).toBe(true);
+        await page.waitForState('zone.card.basicData');
     });
 
     it('should edit de form and then save', async() => {
@@ -31,7 +29,7 @@ describe('Zone basic data path', () => {
         await page.clearInput(selectors.zoneBasicData.travelingDays);
         await page.write(selectors.zoneBasicData.travelingDays, '1');
         await page.clearInput(selectors.zoneBasicData.closing);
-        await page.type(selectors.zoneBasicData.closing, '2100');
+        await page.pickTime(selectors.zoneBasicData.closing, '21:00');
         await page.clearInput(selectors.zoneBasicData.price);
         await page.write(selectors.zoneBasicData.price, '999');
         await page.clearInput(selectors.zoneBasicData.bonus);
@@ -40,14 +38,13 @@ describe('Zone basic data path', () => {
         await page.write(selectors.zoneBasicData.inflation, '200');
         await page.waitToClick(selectors.zoneBasicData.volumetric);
         await page.waitToClick(selectors.zoneBasicData.saveButton);
-        await page.waitForContentLoaded();
+        const result = await page.waitForLastSnackbar();
+
+        expect(result).toEqual('Data saved!');
     });
 
     it('should now reload the section', async() => {
         await page.reloadSection('zone.card.basicData');
-        let url = await page.expectURL('#!/zone/10/basic-data');
-
-        expect(url).toBe(true);
     });
 
     it('should confirm the name was updated', async() => {
diff --git a/e2e/paths/12-entry/01_summary.spec.js b/e2e/paths/12-entry/01_summary.spec.js
index 39b12b8402..e57654f940 100644
--- a/e2e/paths/12-entry/01_summary.spec.js
+++ b/e2e/paths/12-entry/01_summary.spec.js
@@ -17,9 +17,7 @@ describe('Entry summary path', () => {
     });
 
     it('should reach the second entry summary section', async() => {
-        let url = await page.expectURL('#!/entry/2/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('entry.card.summary');
     });
 
     it(`should display details from the entry on the header`, async() => {
diff --git a/e2e/paths/12-entry/02_descriptor.spec.js b/e2e/paths/12-entry/02_descriptor.spec.js
index 8fa0d2a4fe..699d005170 100644
--- a/e2e/paths/12-entry/02_descriptor.spec.js
+++ b/e2e/paths/12-entry/02_descriptor.spec.js
@@ -17,9 +17,7 @@ describe('Entry descriptor path', () => {
     });
 
     it('should reach the second entry summary section', async() => {
-        let url = await page.expectURL('#!/entry/2/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('entry.card.summary');
     });
 
     it('should show some entry information', async() => {
@@ -30,32 +28,22 @@ describe('Entry descriptor path', () => {
 
     it('should click the travels button to be redirected to the travels index filtered by the current agency', async() => {
         await page.waitToClick(selectors.entryDescriptor.travelsQuicklink);
-        const url = await page.expectURL('/travel/index');
-        const filter = await page.expectURL('agencyFk');
-
-        expect(url).toBe(true);
-        expect(filter).toBe(true);
+        await page.expectURL('/travel/index');
+        await page.expectURL('agencyFk');
     });
 
     it('should go back to the entry summary', async() => {
         await page.waitToClick(selectors.globalItems.homeButton);
         await page.selectModule('entry');
         await page.accessToSearchResult('2');
-        let url = await page.expectURL('#!/entry/2/summary');
-
-        expect(url).toBe(true);
+        await page.waitForState('entry.card.summary');
     });
 
     it('should click the entries button to be redirected to the entries index filtered by the current supplier', async() => {
         await page.waitToClick(selectors.entryDescriptor.entriesQuicklink);
-        const url = await page.expectURL('/entry/index');
-        const supplierFilter = await page.expectURL('supplierFk');
-        const toFilter = await page.expectURL('to');
-        const fromFilter = await page.expectURL('from');
-
-        expect(url).toBe(true);
-        expect(supplierFilter).toBe(true);
-        expect(toFilter).toBe(true);
-        expect(fromFilter).toBe(true);
+        await page.expectURL('/entry/index');
+        await page.expectURL('supplierFk');
+        await page.expectURL('to');
+        await page.expectURL('from');
     });
 });
diff --git a/front/core/components/drop-down/index.js b/front/core/components/drop-down/index.js
index 9f2dfe424b..ed7de7179c 100644
--- a/front/core/components/drop-down/index.js
+++ b/front/core/components/drop-down/index.js
@@ -29,13 +29,16 @@ export default class DropDown extends Popover {
     }
 
     set search(value) {
-        let oldValue = this._search;
+        function nullify(value) {
+            return value == '' || value == undefined ? null : value;
+        }
+
+        let oldValue = nullify(this._search);
         this._search = value;
 
         if (!this.shown) return;
 
-        value = value == '' || value == null ? null : value;
-        oldValue = oldValue == '' || oldValue == null ? null : oldValue;
+        value = nullify(value);
         if (value === oldValue && this.modelData != null) return;
 
         if (value != null)
@@ -45,7 +48,8 @@ export default class DropDown extends Popover {
 
         if (this.model) {
             this.model.clear();
-            if (!this.data) {
+
+            if (this.model instanceof CrudModel) {
                 this.searchTimeout = this.$timeout(() => {
                     this.refreshModel();
                     this.searchTimeout = null;
@@ -353,6 +357,7 @@ export default class DropDown extends Popover {
     set model(value) {
         this.linkEvents({_model: value}, {dataChange: this.onDataChange});
         this.onDataChange();
+        this.search = this.search;
     }
 
     get url() {
@@ -362,10 +367,9 @@ export default class DropDown extends Popover {
     set url(value) {
         this._url = value;
         if (value) {
-            this.model = new CrudModel(this.$q, this.$http);
-            this.model.autoLoad = false;
-            this.model.url = value;
-            this.model.$onInit();
+            let model = new CrudModel(this.$q, this.$http);
+            model.url = value;
+            this.initModel(model);
         }
     }
 
@@ -376,13 +380,18 @@ export default class DropDown extends Popover {
     set data(value) {
         this._data = value;
         if (value) {
-            this.model = new ArrayModel(this.$q, this.$filter);
-            this.model.autoLoad = false;
-            this.model.orgData = value;
-            this.model.$onInit();
+            let model = new ArrayModel(this.$q, this.$filter);
+            model.orgData = value;
+            this.initModel(model);
         }
     }
 
+    initModel(model) {
+        model.autoLoad = false;
+        model.$onInit();
+        this.model = model;
+    }
+
     refreshModel() {
         let model = this.model;
 
diff --git a/front/core/components/searchbar/searchbar.js b/front/core/components/searchbar/searchbar.js
index 640ed48d6a..21e72f60d7 100644
--- a/front/core/components/searchbar/searchbar.js
+++ b/front/core/components/searchbar/searchbar.js
@@ -239,6 +239,8 @@ export default class Searchbar extends Component {
 
         this.filter = filter;
 
+        if (!filter && this.model)
+            this.model.clear();
         if (source != 'state')
             this.transition = this.$state.go(state, params, opts).transition;
         if (source != 'bar')
diff --git a/front/core/components/snackbar/snackbar.js b/front/core/components/snackbar/snackbar.js
index eb75f9ab83..9439198f0e 100644
--- a/front/core/components/snackbar/snackbar.js
+++ b/front/core/components/snackbar/snackbar.js
@@ -6,9 +6,8 @@ import './style.scss';
  * A simple component to show non-obstructive notifications to the user.
  */
 export default class Controller extends Component {
-    constructor($element, $translate) {
-        super($element);
-        this.$translate = $translate;
+    constructor($element, $) {
+        super($element, $);
         this.snackbar = $element[0].firstChild;
         this.$snackbar = angular.element(this.snackbar);
     }
@@ -19,38 +18,54 @@ export default class Controller extends Component {
      * @return {Object} Created snackbar shape
      */
     createShape(data) {
-        let shape = document.createElement('div');
-        shape.className = 'shape';
+        let shape = Object.assign({
+            nMessages: 1
+        }, data);
+
+        let element = document.createElement('div');
+        element.className = 'shape';
+        setTimeout(() => element.classList.add('shown'), 30);
+        shape.element = element;
+
+        if (shape.type)
+            element.classList.add(shape.type);
 
         let button = document.createElement('button');
+        button.addEventListener('click', () => this.onButtonClick(shape));
+        element.appendChild(button);
 
-        let buttonText = data.actionText || this.$translate.instant('Hide');
+        let buttonText = shape.actionText || this.$t('Hide');
         buttonText = document.createTextNode(buttonText);
         button.appendChild(buttonText);
 
-        button.addEventListener('click', () => {
-            this.onButtonClick(shape);
-        });
-
-        shape.appendChild(button);
-
         let shapeText = document.createElement('div');
         shapeText.setAttribute('class', 'text');
-        shape.appendChild(shapeText);
+        element.appendChild(shapeText);
 
-        let text = document.createTextNode(data.message);
+        let text = document.createTextNode(shape.message);
         shapeText.appendChild(text);
 
-        if (data.shapeType)
-            shape.classList.add(data.shapeType);
+        let chip = document.createElement('vn-chip');
+        chip.className = 'warning small';
+        chip.style.visibility = 'hidden';
 
-        let parent = this.snackbar.querySelectorAll('.shape')[0];
+        let chipWrapper = document.createElement('div');
+        chip.append(chipWrapper);
+
+        let span = document.createElement('span');
+        chipWrapper.append(span);
+
+        let chipText = document.createTextNode(shape.nMessages);
+        span.append(chipText);
+
+        shapeText.appendChild(chip);
+
+        let parent = this.snackbar.querySelector('.shape');
 
         if (parent)
-            this.snackbar.insertBefore(shape, parent);
+            this.snackbar.insertBefore(element, parent);
         else
-            this.snackbar.appendChild(shape);
-
+            this.snackbar.appendChild(element);
 
         return shape;
     }
@@ -61,58 +76,28 @@ export default class Controller extends Component {
      * @param {Object} data The message data
      */
     show(data) {
-        this.actionHandler = data.actionHandler;
+        let shape = this.lastShape;
 
-        let shape;
+        const isEqual = shape
+            && shape.type == data.type
+            && shape.message == data.message;
 
-        const lastShape = this.lastShape;
-        const lastShapeData = lastShape && lastShape.data;
-        const isEqual = lastShape && (lastShapeData.shapeType == data.shapeType && lastShapeData.message == data.message);
+        if (isEqual) {
+            shape.nMessages++;
 
-        if (lastShape && isEqual) {
-            shape = lastShape.element;
+            const chip = shape.element.querySelector('.text vn-chip');
+            chip.style.visibility = 'visible';
 
-            const shapeText = shape.querySelector('.text');
-            let chip = shapeText.querySelector('vn-chip');
-
-            if (chip) {
-                const text = chip.querySelector('span');
-                const number = parseInt(text.innerHTML);
-
-                text.innerHTML = number + 1;
-            } else {
-                chip = document.createElement('vn-chip');
-                chip.setAttribute('class', 'warning small');
-                let parent = document.createElement('div');
-                let span = document.createElement('span');
-                let text = document.createTextNode(1);
-                span.append(text);
-                parent.append(span);
-                chip.append(parent);
-
-                shapeText.appendChild(chip);
-            }
-
-            lastShape.element.classList.add('shown');
-
-            if (this.hideTimeout)
-                clearTimeout(this.hideTimeout);
-        } else {
+            const span = chip.querySelector('span');
+            span.innerHTML = shape.nMessages;
+        } else
             shape = this.createShape(data);
 
-            setTimeout(() =>
-                shape.classList.add('shown'), 30);
-        }
+        clearTimeout(shape.hideTimeout);
+        shape.hideTimeout = setTimeout(
+            () => this.hide(shape), shape.timeout || 3000);
 
-        this.hideTimeout = setTimeout(() => {
-            this.hide(shape);
-            this.lastShape = null;
-        }, data.timeout || 3000);
-
-        this.lastShape = {
-            data: data,
-            element: shape
-        };
+        this.lastShape = shape;
     }
 
     /**
@@ -121,8 +106,7 @@ export default class Controller extends Component {
      * @param {Object} data The message data
      */
     showError(data) {
-        data.shapeType = 'error';
-
+        data.type = 'error';
         this.show(data);
     }
 
@@ -132,8 +116,7 @@ export default class Controller extends Component {
      * @param {Object} data The message data
      */
     showSuccess(data) {
-        data.shapeType = 'success';
-
+        data.type = 'success';
         this.show(data);
     }
 
@@ -142,8 +125,11 @@ export default class Controller extends Component {
      * @param {Object} shape Snackbar element
      */
     hide(shape) {
-        setTimeout(() => shape.classList.remove('shown'), 30);
-        setTimeout(() => shape.remove(), 250);
+        if (this.lastShape == shape)
+            this.lastShape = null;
+
+        shape.element.classList.remove('shown');
+        setTimeout(() => shape.element.remove(), 250);
     }
 
     onSnackbarClick(event) {
@@ -151,13 +137,12 @@ export default class Controller extends Component {
     }
 
     onButtonClick(shape) {
-        if (this.actionHandler)
-            this.actionHandler();
+        if (shape.actionHandler)
+            shape.actionHandler();
         else
             this.hide(shape);
     }
 }
-Controller.$inject = ['$element', '$translate'];
 
 ngModule.component('vnSnackbar', {
     template: require('./snackbar.html'),
diff --git a/modules/claim/front/action/index.js b/modules/claim/front/action/index.js
index dc22cb4be6..a847ef0093 100644
--- a/modules/claim/front/action/index.js
+++ b/modules/claim/front/action/index.js
@@ -1,16 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, $http, $translate, vnApp, $httpParamSerializer) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
-            where: {claimFk: $stateParams.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {relation: 'sale',
                     scope: {
@@ -34,9 +30,7 @@ class Controller {
     }
 
     getClaimedSales() {
-        let json = encodeURIComponent(JSON.stringify(this.claim.id));
-
-        let query = `ClaimBeginnings/${json}`;
+        let query = `ClaimBeginnings/${this.claim.id}`;
         this.$http.get(query).then(res => {
             if (res.data)
                 this.claimedSales = res.data;
@@ -54,8 +48,7 @@ class Controller {
     }
 
     deleteClaimedSale(id) {
-        let json = encodeURIComponent(JSON.stringify(id));
-        let query = `ClaimEnds/${json}`;
+        let query = `ClaimEnds/${id}`;
         this.$http.delete(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -63,7 +56,7 @@ class Controller {
     }
 
     importToNewRefundTicket() {
-        let query = `ClaimBeginnings/${this.$stateParams.id}/importToNewRefundTicket`;
+        let query = `ClaimBeginnings/${this.$params.id}/importToNewRefundTicket`;
         return this.$http.post(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -112,7 +105,7 @@ class Controller {
     }
 
     importTicketLines(ticketFk) {
-        let data = {claimFk: this.$stateParams.id, ticketFk: ticketFk};
+        let data = {claimFk: this.$params.id, ticketFk: ticketFk};
 
         let query = `ClaimEnds/importTicketSales`;
         this.$http.post(query, data).then(() => {
@@ -123,7 +116,7 @@ class Controller {
     }
 
     regularize() {
-        let data = {claimFk: this.$stateParams.id};
+        let data = {claimFk: this.$params.id};
         let query = `Claims/regularizeClaim`;
         return this.$http.post(query, data).then(() => {
             if (this.claim.responsibility >= Math.ceil(this.maxResponsibility) / 2)
@@ -137,9 +130,8 @@ class Controller {
 
     getGreugeTypeId() {
         const params = {filter: {where: {code: 'freightPickUp'}}};
-        const serializedParams = this.$httpParamSerializer(params);
-        const query = `GreugeTypes/findOne?${serializedParams}`;
-        return this.$http.get(query).then(res => {
+        const query = `GreugeTypes/findOne`;
+        return this.$http.get(query, {params}).then(res => {
             this.greugeTypeFreightId = res.data.id;
 
             return res;
@@ -188,7 +180,7 @@ class Controller {
     }
 
     saveResponsibility(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {responsibility: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -196,7 +188,7 @@ class Controller {
     }
 
     saveMana(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {isChargedToMana: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -208,8 +200,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnApp', '$httpParamSerializer'];
-
 ngModule.component('vnClaimAction', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/action/index.spec.js b/modules/claim/front/action/index.spec.js
index c0bcea452a..639e908271 100644
--- a/modules/claim/front/action/index.spec.js
+++ b/modules/claim/front/action/index.spec.js
@@ -18,7 +18,8 @@ describe('claim', () => {
             $state = _$state_;
             $state.params.id = 1;
 
-            controller = $componentController('vnClaimAction', {$state, $scope});
+            const $element = angular.element('<vn-claim-action></vn-claim-action>');
+            controller = $componentController('vnClaimAction', {$element, $scope});
             controller.claim = {ticketFk: 1};
             controller.$.model = {refresh: () => {}};
             controller.$.addSales = {
diff --git a/modules/claim/front/basic-data/index.html b/modules/claim/front/basic-data/index.html
index 9be04cb57f..948ac6b18d 100644
--- a/modules/claim/front/basic-data/index.html
+++ b/modules/claim/front/basic-data/index.html
@@ -2,7 +2,7 @@
     vn-id="watcher"
     data="$ctrl.claim"
     form="form"
-    url="Claims/{{$ctrl.$stateParams.id}}/updateClaim"
+    url="Claims/{{$ctrl.$params.id}}/updateClaim"
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
@@ -55,6 +55,9 @@
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>
-        <vn-button label="Undo changes" ng-if="$ctrl.$scope.form.$dirty" ng-click="watcher.loadOriginalData()"></vn-button>
+        <vn-button label="Undo changes" 
+            ng-if="$ctrl.$.form.$dirty" 
+            ng-click="watcher.loadOriginalData()">
+        </vn-button>
     </vn-button-bar>
 </form>
diff --git a/modules/claim/front/basic-data/index.js b/modules/claim/front/basic-data/index.js
index bc616dd5c7..c3eac92ff3 100644
--- a/modules/claim/front/basic-data/index.js
+++ b/modules/claim/front/basic-data/index.js
@@ -1,24 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, aclService) {
-        this.$scope = $scope;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.aclService = aclService;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.submit().then(() => {
+        this.$.watcher.submit().then(() => {
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.detail');
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', 'aclService'];
-
 ngModule.component('vnClaimBasicData', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/basic-data/index.spec.js b/modules/claim/front/basic-data/index.spec.js
index 54b6e025d7..65e934cb81 100644
--- a/modules/claim/front/basic-data/index.spec.js
+++ b/modules/claim/front/basic-data/index.spec.js
@@ -11,12 +11,13 @@ describe('Claim', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
-            let aclService = {hasAny: () => true};
-            controller = $componentController('vnClaimBasicData', {$scope, aclService});
+            const $element = angular.element('<vn-claim-basic-data></vn-claim-basic-data>');
+            controller = $componentController('vnClaimBasicData', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.detail' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
                 controller.onSubmit();
 
diff --git a/modules/claim/front/descriptor/index.js b/modules/claim/front/descriptor/index.js
index fd00368b8c..55048c20c9 100644
--- a/modules/claim/front/descriptor/index.js
+++ b/modules/claim/front/descriptor/index.js
@@ -2,8 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $httpParamSerializer) {
-        super($element, $scope);
+    constructor($element, $, $httpParamSerializer) {
+        super($element, $);
         this.$httpParamSerializer = $httpParamSerializer;
 
         this.moreOptions = [
diff --git a/modules/claim/front/detail/index.js b/modules/claim/front/detail/index.js
index 74033b565e..33b348513a 100644
--- a/modules/claim/front/detail/index.js
+++ b/modules/claim/front/detail/index.js
@@ -1,17 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($state, $, $http, $translate, vnApp, aclService) {
-        this.$state = $state;
-        this.$ = $;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.aclService = aclService;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.edit = {};
         this.filter = {
-            where: {claimFk: $state.params.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {
                     relation: 'sale',
@@ -173,7 +169,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', '$http', '$translate', 'vnApp', 'aclService'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClaimDetail', {
     template: require('./index.html'),
diff --git a/modules/claim/front/detail/index.spec.js b/modules/claim/front/detail/index.spec.js
index a4d7878c58..922076b9f5 100644
--- a/modules/claim/front/detail/index.spec.js
+++ b/modules/claim/front/detail/index.spec.js
@@ -6,12 +6,10 @@ describe('claim', () => {
         let $scope;
         let controller;
         let $httpBackend;
-        let $state;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_, $rootScope) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.descriptor = {
                 show: () => {}
@@ -19,9 +17,8 @@ describe('claim', () => {
             $httpBackend = _$httpBackend_;
             $httpBackend.whenGET('Claims/ClaimBeginnings').respond({});
             $httpBackend.whenGET(`Tickets/1/isEditable`).respond(true);
-            $state = _$state_;
-            aclService = {hasAny: () => true};
-            controller = $componentController('vnClaimDetail', {$state, aclService, $scope});
+            const $element = angular.element('<vn-claim-detail></vn-claim-detail>');
+            controller = $componentController('vnClaimDetail', {$element, $scope});
             controller.claim = {ticketFk: 1};
             controller.salesToClaim = [{saleFk: 1}, {saleFk: 2}];
             controller.salesClaimed = [{id: 1, sale: {}}];
@@ -33,6 +30,7 @@ describe('claim', () => {
             controller.$.editPopover = {
                 hide: () => {}
             };
+            jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
         }));
 
         describe('openAddSalesDialog()', () => {
@@ -111,7 +109,6 @@ describe('claim', () => {
                     quantity: 10}};
                 controller.newDiscount = 10;
 
-
                 jest.spyOn(controller.vnApp, 'showSuccess');
                 jest.spyOn(controller, 'calculateTotals');
                 jest.spyOn(controller, 'clearDiscount');
diff --git a/modules/claim/front/development/index.html b/modules/claim/front/development/index.html
index 38082847a4..2b504be11c 100644
--- a/modules/claim/front/development/index.html
+++ b/modules/claim/front/development/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClaimDevelopments"
     fields="['id', 'claimFk', 'claimReasonFk', 'claimResultFk', 'claimResponsibleFk', 'workerFk', 'claimRedeliveryFk']"
-    link="{claimFk: $ctrl.$state.params.id}"
+    link="{claimFk: $ctrl.$params.id}"
     filter="$ctrl.filter"
     data="claimDevelopments"
     auto-load="true">
diff --git a/modules/claim/front/development/index.js b/modules/claim/front/development/index.js
index d6220fbca2..cc86d54525 100644
--- a/modules/claim/front/development/index.js
+++ b/modules/claim/front/development/index.js
@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($state, $scope, aclService) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.aclService = aclService;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.watcher.updateOriginalData();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
 
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.action');
@@ -20,8 +15,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', 'aclService'];
-
 ngModule.component('vnClaimDevelopment', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/development/index.spec.js b/modules/claim/front/development/index.spec.js
index 4d9ebdc7ee..5708f82f27 100644
--- a/modules/claim/front/development/index.spec.js
+++ b/modules/claim/front/development/index.spec.js
@@ -6,7 +6,6 @@ describe('Claim', () => {
     describe('Component vnClaimDevelopment', () => {
         let controller;
         let $scope;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
@@ -14,13 +13,15 @@ describe('Claim', () => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
             $scope.model = crudModel;
-            aclService = {hasAny: () => true};
-            controller = $componentController('vnClaimDevelopment', {$scope, aclService});
+            const $element = angular.element('<vn-claim-development></vn-claim-development>');
+            controller = $componentController('vnClaimDevelopment', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.action' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
+
                 controller.onSubmit();
 
                 expect(controller.$state.go).toHaveBeenCalledWith('claim.card.action');
diff --git a/modules/claim/front/dms/style.scss b/modules/claim/front/dms/style.scss
deleted file mode 100644
index 28f9db6fca..0000000000
--- a/modules/claim/front/dms/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "./variables";
-
-vn-claim-dms-index {
-    .drop-zone {
-        color: $color-font-secondary;
-        box-sizing: border-box;
-        border-radius: 0.5em;
-        text-align: center;
-        min-height: 100%;
-        
-        .empty-rows {
-            padding: 5em $spacing-md;
-            font-size: 1.4em
-        }
-
-        vn-icon {
-            font-size: 3em
-        }
-    }
-
-    .photo-list {
-        
-        padding: $spacing-md;
-        min-height: 100%;
-
-        .photo {
-            width: 32em;
-            height: 18em;
-        }
-    }
-}
\ No newline at end of file
diff --git a/modules/claim/front/index/index.js b/modules/claim/front/index/index.js
index 1e9724987a..df6d15b384 100644
--- a/modules/claim/front/index/index.js
+++ b/modules/claim/front/index/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-        this.ticketSelected = null;
-    }
-
+export default class Controller extends Section {
     stateColor(claim) {
         switch (claim.description) {
         case 'Pendiente':
@@ -45,8 +41,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnClaimIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/claim/front/photos/index.html b/modules/claim/front/photos/index.html
index 447538bd1f..4a6e3e7b24 100644
--- a/modules/claim/front/photos/index.html
+++ b/modules/claim/front/photos/index.html
@@ -1,10 +1,9 @@
 <vn-crud-model vn-id="model" auto-load="true"
     url="ClaimDms"
-    link="{claimFk: $ctrl.$stateParams.id}"
+    link="{claimFk: $ctrl.$params.id}"
     limit="20"
     data="$ctrl.photos">
 </vn-crud-model>
-
 <vn-horizontal class="photo-list drop-zone" vn-droppable="$ctrl.onDrop($event)">
     <section class="empty-rows" ng-if="!$ctrl.photos.length">
         <section><vn-icon icon="image"></vn-icon></section>
@@ -12,8 +11,8 @@
     </section>
     <section class="photo" ng-repeat="photo in $ctrl.photos">
         <section class="image vn-shadow" on-error-src 
-            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
+            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
         </section>
         <section class="actions">
             <vn-button
diff --git a/modules/claim/front/photos/index.js b/modules/claim/front/photos/index.js
index 61256aad1d..baf5fd1540 100644
--- a/modules/claim/front/photos/index.js
+++ b/modules/claim/front/photos/index.js
@@ -1,17 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, $http, $translate, vnToken, vnApp, vnConfig) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
-    }
-
+class Controller extends Section {
     showWorkerDescriptor(event, workerFk) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -106,8 +97,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnToken', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnClaimPhotos', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/photos/index.spec.js b/modules/claim/front/photos/index.spec.js
index 81eab69ee3..1172800f6a 100644
--- a/modules/claim/front/photos/index.spec.js
+++ b/modules/claim/front/photos/index.spec.js
@@ -3,7 +3,6 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Claim', () => {
     describe('Component vnClaimPhotos', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
@@ -11,12 +10,12 @@ describe('Claim', () => {
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
             $httpParamSerializer = _$httpParamSerializer_;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClaimPhotos', {$: $scope});
+            const $element = angular.element('<vn-claim-photos></vn-claim-photos>');
+            controller = $componentController('vnClaimPhotos', {$element, $scope});
             controller.$.model = crudModel;
             controller.claim = {
                 id: 1,
diff --git a/modules/claim/front/summary/index.html b/modules/claim/front/summary/index.html
index 20dca702bb..6f639c709e 100644
--- a/modules/claim/front/summary/index.html
+++ b/modules/claim/front/summary/index.html
@@ -86,8 +86,8 @@
             <vn-horizontal class="photo-list">
                 <section class="photo" ng-repeat="photo in photos">
                     <section class="image" on-error-src 
-                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
+                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                     </section>
                 </section>
             </vn-horizontal>
diff --git a/modules/claim/front/summary/index.js b/modules/claim/front/summary/index.js
index 448ce9b387..094aa49fef 100644
--- a/modules/claim/front/summary/index.js
+++ b/modules/claim/front/summary/index.js
@@ -1,19 +1,17 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $stateParams, vnToken) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.accessToken = vnToken.token;
+class Controller extends Section {
+    $onChanges() {
+        if (this.claim && this.claim.id)
+            this.getSummary();
     }
 
     get claim() {
         return this._claim;
     }
 
-
     set claim(value) {
         this._claim = value;
 
@@ -35,11 +33,6 @@ class Controller {
         });
     }
 
-    $onChanges() {
-        if (this.claim && this.claim.id)
-            this.getSummary();
-    }
-
     showItemDescriptor(event, itemFk) {
         this.$.itemDescriptor.itemFk = itemFk;
         this.$.itemDescriptor.parent = event.target;
@@ -59,8 +52,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams', 'vnToken'];
-
 ngModule.component('vnClaimSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/summary/index.spec.js b/modules/claim/front/summary/index.spec.js
index f1897a3e09..b6e03d929e 100644
--- a/modules/claim/front/summary/index.spec.js
+++ b/modules/claim/front/summary/index.spec.js
@@ -5,12 +5,15 @@ describe('Claim', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClaimSummary');
+            const $element = angular.element('<vn-claim-summary></vn-claim-summary>');
+            controller = $componentController('vnClaimSummary', {$element, $scope});
             controller.claim = {id: 1};
             controller.$.model = crudModel;
         }));
@@ -29,6 +32,7 @@ describe('Claim', () => {
         describe('$onChanges()', () => {
             it('should call getSummary when item.id is defined', () => {
                 jest.spyOn(controller, 'getSummary');
+
                 controller.$onChanges();
 
                 expect(controller.getSummary).toHaveBeenCalledWith();
diff --git a/modules/client/front/address/create/index.html b/modules/client/front/address/create/index.html
index 519638d48d..084af36e5e 100644
--- a/modules/client/front/address/create/index.html
+++ b/modules/client/front/address/create/index.html
@@ -11,7 +11,7 @@
     vn-id="model"
     url="AddressObservations"
     fields="['id', 'addressFk', 'observationTypeFk', 'description']"
-    link="{addressFk: $ctrl.$stateParams.addressId}"
+    link="{addressFk: $ctrl.$params.addressId}"
     data="observations"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/client/front/address/create/index.js b/modules/client/front/address/create/index.js
index 9070c876f2..69087f1546 100644
--- a/modules/client/front/address/create/index.js
+++ b/modules/client/front/address/create/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
 
diff --git a/modules/client/front/address/edit/index.js b/modules/client/front/address/edit/index.js
index f310b7250e..f2d6603342 100644
--- a/modules/client/front/address/edit/index.js
+++ b/modules/client/front/address/edit/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     removeObservation(index) {
         this.$.watcher.setDirty();
         this.$.model.remove(index);
diff --git a/modules/client/front/address/index/index.html b/modules/client/front/address/index/index.html
index c78f517483..bdf4496ced 100644
--- a/modules/client/front/address/index/index.html
+++ b/modules/client/front/address/index/index.html
@@ -1,6 +1,6 @@
 <vn-crud-model
     vn-id="model"
-    url="Clients/{{$ctrl.$stateParams.id}}/addresses"
+    url="Clients/{{$ctrl.$params.id}}/addresses"
     filter="$ctrl.filter"
     limit="10"
     data="$ctrl.addresses"
diff --git a/modules/client/front/address/index/index.js b/modules/client/front/address/index/index.js
index a7b9bc23b1..19f3524fbb 100644
--- a/modules/client/front/address/index/index.js
+++ b/modules/client/front/address/index/index.js
@@ -1,13 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $scope, $stateParams, $translate, vnApp) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             fields: [
                 'id',
@@ -47,7 +44,7 @@ class Controller {
     }
 
     setDefault(address) {
-        let query = `Clients/${this.$stateParams.id}`;
+        let query = `Clients/${this.$params.id}`;
         let params = {defaultAddressFk: address.id};
         this.$http.patch(query, params).then(res => {
             if (res.data) {
@@ -72,7 +69,7 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$http', '$scope', '$stateParams', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientAddressIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/address/index/index.spec.js b/modules/client/front/address/index/index.spec.js
index 1398f617ff..d53abe8bea 100644
--- a/modules/client/front/address/index/index.spec.js
+++ b/modules/client/front/address/index/index.spec.js
@@ -15,9 +15,10 @@ describe('Client', () => {
             $stateParams.id = 1;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientAddressIndex', {$stateParams, $scope});
+            const $element = angular.element('<vn-client-address-index></vn-client-address-index>');
+            controller = $componentController('vnClientAddressIndex', {$element, $scope});
             controller.client = {id: 101, defaultAddressFk: 121};
-            controller.$scope.model = crudModel;
+            controller.$.model = crudModel;
         }));
 
         describe('setDefault()', () => {
diff --git a/modules/client/front/balance/create/index.js b/modules/client/front/balance/create/index.js
index a480fac729..1a7d8b97bb 100644
--- a/modules/client/front/balance/create/index.js
+++ b/modules/client/front/balance/create/index.js
@@ -1,19 +1,15 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, $http, vnApp, $translate, vnConfig) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.receipt = {
             payed: new Date(),
-            clientFk: this.$state.params.id,
-            companyFk: vnConfig.companyFk,
-            bankFk: vnConfig.bankFk
+            clientFk: this.$params.id,
+            companyFk: this.vnConfig.companyFk,
+            bankFk: this.vnConfig.bankFk
         };
     }
 
@@ -57,7 +53,7 @@ class Controller {
     getAmountPaid() {
         let filter = {
             where: {
-                clientFk: this.$state.params.id,
+                clientFk: this.$params.id,
                 companyFk: this.receipt.companyFk
             }
         };
@@ -86,7 +82,6 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate', 'vnConfig'];
 
 ngModule.component('vnClientBalanceCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/balance/index/index.html b/modules/client/front/balance/index/index.html
index 8cdb5c9712..1e26607d12 100644
--- a/modules/client/front/balance/index/index.html
+++ b/modules/client/front/balance/index/index.html
@@ -97,7 +97,7 @@
                     <vn-td center shrink>
                         <a ng-show="balance.hasPdf"
                             target="_blank"
-                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.accessToken}}">
+                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.vnToken.token}}">
                             <vn-icon-button
                                 icon="cloud_download"
                                 title="{{'Download PDF' | translate}}">
diff --git a/modules/client/front/balance/index/index.js b/modules/client/front/balance/index/index.js
index 5a5d0e0b2c..13840af92c 100644
--- a/modules/client/front/balance/index/index.js
+++ b/modules/client/front/balance/index/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $translate, $scope, vnToken, $http, vnConfig) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'company',
@@ -46,17 +42,16 @@ class Controller {
 
     getData() {
         return this.$.model.applyFilter(null, {
-            clientId: this.$stateParams.id,
+            clientId: this.$params.id,
             companyId: this.companyId
         }).then(() => this.$.riskModel.applyFilter({
             where: {
-                clientFk: this.$stateParams.id,
+                clientFk: this.$params.id,
                 companyFk: this.companyId
             }
         })).then(() => this.getBalances());
     }
 
-
     getCurrentBalance() {
         const clientRisks = this.$.riskModel.data;
         const selectedCompany = this.companyId;
@@ -79,7 +74,6 @@ class Controller {
         });
     }
 
-
     openCreateDialog() {
         this.$.balanceCreateDialog.companyFk = this.companyId;
         this.$.balanceCreateDialog.onResponse = () => this.getData();
@@ -110,7 +104,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$translate', '$scope', 'vnToken', '$http', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientBalanceIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/balance/index/index.spec.js b/modules/client/front/balance/index/index.spec.js
index aaa12b2e3a..6a7a6e321d 100644
--- a/modules/client/front/balance/index/index.spec.js
+++ b/modules/client/front/balance/index/index.spec.js
@@ -2,15 +2,14 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientBalanceIndex', () => {
-        let $componentController;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             let $scope = $rootScope.$new();
-            controller = $componentController('vnClientBalanceIndex', {$scope});
+            const $element = angular.element('<vn-client-balance-index></vn-client-balance-index>');
+            controller = $componentController('vnClientBalanceIndex', {$element, $scope});
             controller.$.model = {applyFilter: () => {}};
             controller.$.riskModel = {
                 applyFilter: () => {},
@@ -30,7 +29,7 @@ describe('Client', () => {
         describe('getData()', () => {
             it('should apply the filters on he models and get the client balance', () => {
                 controller._companyId = 442;
-                controller.$stateParams.id = 101;
+                controller.$params.id = 101;
                 jest.spyOn(controller, 'getBalances').mockReturnThis();
                 jest.spyOn(controller.$.model, 'applyFilter').mockReturnValue(Promise.resolve());
                 jest.spyOn(controller.$.riskModel, 'applyFilter').mockReturnValue(Promise.resolve());
diff --git a/modules/client/front/basic-data/index.js b/modules/client/front/basic-data/index.js
index 093ef4bec5..5d491ec758 100644
--- a/modules/client/front/basic-data/index.js
+++ b/modules/client/front/basic-data/index.js
@@ -1,7 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
 ngModule.component('vnClientBasicData', {
     template: require('./index.html'),
+    controller: Section,
     bindings: {
         client: '<'
     }
diff --git a/modules/client/front/contact/index.html b/modules/client/front/contact/index.html
index 2cefdd86d6..664a59567e 100644
--- a/modules/client/front/contact/index.html
+++ b/modules/client/front/contact/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientContacts"
     fields="['id', 'name', 'phone', 'clientFk']"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="contacts"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/client/front/contact/index.js b/modules/client/front/contact/index.js
index 4b0cc95ca2..4f29ddb8c9 100644
--- a/modules/client/front/contact/index.js
+++ b/modules/client/front/contact/index.js
@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams, $translate) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     add() {
-        this.$scope.model.insert({
+        this.$.model.insert({
             clientFk: this.client.id,
             name: this.$translate.instant('Phone'),
             phone: null
@@ -16,16 +11,14 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$translate'];
-
 ngModule.component('vnClientContact', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/create/index.js b/modules/client/front/create/index.js
index a663717d62..cce41b3bc7 100644
--- a/modules/client/front/create/index.js
+++ b/modules/client/front/create/index.js
@@ -1,12 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state, $http, $translate, vnApp) {
-        this.$ = $scope;
-        this.$state = $state;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.client = {
             active: true
         };
@@ -78,7 +75,7 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/create/index.spec.js b/modules/client/front/create/index.spec.js
index c297b0545d..804c0b9614 100644
--- a/modules/client/front/create/index.spec.js
+++ b/modules/client/front/create/index.spec.js
@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientCreate', {$element, $scope});
         }));
 
         it('should define and set scope, state and client properties', () => {
diff --git a/modules/client/front/credit-insurance/create/index.js b/modules/client/front/credit-insurance/create/index.js
index 86c067086f..5ea2a8039d 100644
--- a/modules/client/front/credit-insurance/create/index.js
+++ b/modules/client/front/credit-insurance/create/index.js
@@ -1,19 +1,16 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($http, $filter, $state, $scope, $translate, vnApp) {
-        this.$http = $http;
-        this.$state = $state;
-        this.$scope = $scope;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.creditClassification = {
-            started: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
+            started: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
         };
     }
 
     onSubmit() {
-        if (this.$scope.form.$invalid)
+        if (this.$.form.$invalid)
             return this.vnApp.showError(this.$translate.instant('Some fields are invalid'));
 
         let query = `creditClassifications/createWithInsurance`;
@@ -29,7 +26,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$filter', '$state', '$scope', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/credit-insurance/create/index.spec.js b/modules/client/front/credit-insurance/create/index.spec.js
index 1d1cd0e088..29bd2c11e9 100644
--- a/modules/client/front/credit-insurance/create/index.spec.js
+++ b/modules/client/front/credit-insurance/create/index.spec.js
@@ -14,7 +14,8 @@ describe('Client', () => {
             $scope.form = {
                 $invalid: false
             };
-            controller = $componentController('vnClientCreditInsuranceCreate', {$scope});
+            const $element = angular.element('<vn-client-credit-insurance-create></vn-client-credit-insurance-create>');
+            controller = $componentController('vnClientCreditInsuranceCreate', {$element, $scope});
             controller.client = {id: 101};
             controller.card = {
                 reload: () => {}
diff --git a/modules/client/front/credit-insurance/index/index.js b/modules/client/front/credit-insurance/index/index.js
index accdc8c5da..e386444f49 100644
--- a/modules/client/front/credit-insurance/index/index.js
+++ b/modules/client/front/credit-insurance/index/index.js
@@ -1,12 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $scope) {
-        this.$http = $http;
-        this.$scope = $scope;
-    }
-
+class Controller extends Section {
     $onChanges() {
         if (this.client && this.client.id)
             this._getClassifications(this.client.id);
@@ -52,7 +48,7 @@ class Controller {
 
     closeContract(classification) {
         this.classificationId = classification.id;
-        this.$scope.closeContract.show();
+        this.$.closeContract.show();
     }
 
     returnDialog(response) {
@@ -65,8 +61,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope'];
-
 ngModule.component('vnClientCreditInsuranceIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/credit-insurance/index/index.spec.js b/modules/client/front/credit-insurance/index/index.spec.js
index 48403263e1..bed58a7d69 100644
--- a/modules/client/front/credit-insurance/index/index.spec.js
+++ b/modules/client/front/credit-insurance/index/index.spec.js
@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceIndex');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-credit-insurance-index></vn-client-credit-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceIndex', {$element, $scope});
             controller.client = {id: 101};
         }));
 
@@ -59,14 +62,14 @@ describe('Client', () => {
 
         describe('closeContract()', () => {
             it('should define the classificationId property of the controller and then call the show method()', () => {
-                controller.$scope.closeContract = {show: () => {}};
-                jest.spyOn(controller.$scope.closeContract, 'show');
+                controller.$.closeContract = {show: () => {}};
+                jest.spyOn(controller.$.closeContract, 'show');
 
                 expect(controller.classificationId).toBeFalsy();
                 controller.closeContract({id: 1});
 
                 expect(controller.classificationId).toEqual(1);
-                expect(controller.$scope.closeContract.show).toHaveBeenCalledWith();
+                expect(controller.$.closeContract.show).toHaveBeenCalledWith();
             });
         });
 
diff --git a/modules/client/front/credit-insurance/insurance/create/index.js b/modules/client/front/credit-insurance/insurance/create/index.js
index 2c7670ff58..2363cac76a 100644
--- a/modules/client/front/credit-insurance/insurance/create/index.js
+++ b/modules/client/front/credit-insurance/insurance/create/index.js
@@ -1,25 +1,25 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, $filter) {
-        this.$scope = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.insurance = {
-            created: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
+            created: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
         };
     }
 
     onSubmit() {
-        let params = {classificationId: this.$state.params.classificationId};
+        let params = {classificationId: this.$params.classificationId};
         let state = 'client.card.creditInsurance.insurance.index';
 
-        this.$scope.watcher.submitGo(state, params).then(() => {
+        this.$.watcher.submitGo(state, params).then(() => {
             this.card.reload();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/credit-insurance/insurance/index/index.html b/modules/client/front/credit-insurance/insurance/index/index.html
index 28f44f044a..11c9935d01 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.html
+++ b/modules/client/front/credit-insurance/insurance/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="CreditInsurances"
-    link="{creditClassification: $ctrl.$stateParams.classificationId}"
+    link="{creditClassification: $ctrl.$params.classificationId}"
     limit="20"
     data="insurances"
     auto-load="true">
@@ -30,7 +30,7 @@
 </div>
 <a 
     ng-if="!$ctrl.isClosed"
-    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$stateParams.classificationId}}})" 
+    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$params.classificationId}}})" 
     fixed-bottom-right
     vn-tooltip="New credit"
     vn-bind="+">
diff --git a/modules/client/front/credit-insurance/insurance/index/index.js b/modules/client/front/credit-insurance/insurance/index/index.js
index 4851bf200f..f78d06785c 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.js
+++ b/modules/client/front/credit-insurance/insurance/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $http) {
-        this.$stateParams = $stateParams;
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.isClosed = true;
         this.filter = {
             include: [
@@ -15,7 +15,7 @@ class Controller {
     $onInit() {
         let filter = {
             fields: ['finished'],
-            where: {id: this.$stateParams.classificationId}
+            where: {id: this.$params.classificationId}
         };
         filter = encodeURIComponent(JSON.stringify(filter));
 
@@ -27,7 +27,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$http'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/credit-insurance/insurance/index/index.spec.js b/modules/client/front/credit-insurance/insurance/index/index.spec.js
index 8c3cdee834..490d6a9241 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.spec.js
+++ b/modules/client/front/credit-insurance/insurance/index/index.spec.js
@@ -4,13 +4,16 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
-            let $stateParams = {classificationId: 1};
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceInsuranceIndex', {$stateParams});
+            const $element = angular.element('<vn-client-credit-insurance-insurance-index></vn-client-credit-insurance-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceInsuranceIndex', {$element, $scope});
+            controller.$params = {classificationId: 1};
         }));
 
         describe('$onInit()', () => {
diff --git a/modules/client/front/credit/create/index.js b/modules/client/front/credit/create/index.js
index 7493073b66..049c206b3b 100644
--- a/modules/client/front/credit/create/index.js
+++ b/modules/client/front/credit/create/index.js
@@ -1,17 +1,12 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($http, $scope, $state) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$http.get(`Recoveries/${this.$state.params.id}/hasActiveRecovery`).then(res => {
+        this.$http.get(`Recoveries/${this.$params.id}/hasActiveRecovery`).then(res => {
             let activeRecovery = res.data;
             if (activeRecovery)
-                this.$scope.confirmation.show();
+                this.$.confirmation.show();
             else
                 this.addCredit();
         });
@@ -31,7 +26,7 @@ class Controller {
     }
 
     addCredit() {
-        this.$scope.watcher.submit().then(
+        this.$.watcher.submit().then(
             () => {
                 this.goToIndex();
             }
@@ -39,8 +34,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope', '$state'];
-
 ngModule.component('vnClientCreditCreate', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/credit/create/index.spec.js b/modules/client/front/credit/create/index.spec.js
index 13f0349695..a69fb64a90 100644
--- a/modules/client/front/credit/create/index.spec.js
+++ b/modules/client/front/credit/create/index.spec.js
@@ -30,7 +30,8 @@ describe('Client', () => {
             $state = _$state_;
             $state.params.id = 101;
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditCreate', {$scope, $state});
+            const $element = angular.element('<vn-client-credit-create></vn-client-credit-create>');
+            controller = $componentController('vnClientCreditCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
@@ -42,13 +43,13 @@ describe('Client', () => {
             });
 
             it('should call show() method when the client have a recovery', () => {
-                jest.spyOn(controller.$scope.confirmation, 'show');
+                jest.spyOn(controller.$.confirmation, 'show');
                 $httpBackend.whenGET(`Recoveries/101/hasActiveRecovery`).respond(true);
                 $httpBackend.expectGET(`Recoveries/101/hasActiveRecovery`);
                 controller.onSubmit();
                 $httpBackend.flush();
 
-                expect(controller.$scope.confirmation.show).toHaveBeenCalledWith();
+                expect(controller.$.confirmation.show).toHaveBeenCalledWith();
             });
 
             it('should call addCredit() method when the client doesnt have a recovery', () => {
diff --git a/modules/client/front/credit/index/index.html b/modules/client/front/credit/index/index.html
index 03de6f0e75..6cb7f9e84c 100644
--- a/modules/client/front/credit/index/index.html
+++ b/modules/client/front/credit/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientCredits"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="credits"
     order="created DESC"
diff --git a/modules/client/front/credit/index/index.js b/modules/client/front/credit/index/index.js
index e8fae8d9de..bea30b2d10 100644
--- a/modules/client/front/credit/index/index.js
+++ b/modules/client/front/credit/index/index.js
@@ -1,8 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -22,7 +23,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/descriptor-popover/index.js b/modules/client/front/descriptor-popover/index.js
index 816eaf05e4..1a1b41f769 100644
--- a/modules/client/front/descriptor-popover/index.js
+++ b/modules/client/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.client = null;
         this._quicklinks = {};
     }
@@ -59,7 +56,6 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnClientDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/client/front/dms/create/index.js b/modules/client/front/dms/create/index.js
index 46c4d75653..0422ab6a63 100644
--- a/modules/client/front/dms/create/index.js
+++ b/modules/client/front/dms/create/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.dms = {
             files: [],
             hasFile: false,
@@ -106,7 +102,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientDmsCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/dms/create/index.spec.js b/modules/client/front/dms/create/index.spec.js
index 2c1215d6bc..0f0e2cb090 100644
--- a/modules/client/front/dms/create/index.spec.js
+++ b/modules/client/front/dms/create/index.spec.js
@@ -13,7 +13,8 @@ describe('Client', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnClientDmsCreate', {$scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientDmsCreate', {$element, $scope});
             controller._client = {id: 101, name: 'Bruce wayne'};
         }));
 
diff --git a/modules/client/front/dms/edit/index.js b/modules/client/front/dms/edit/index.js
index 460aa17a74..dedd67e3f4 100644
--- a/modules/client/front/dms/edit/index.js
+++ b/modules/client/front/dms/edit/index.js
@@ -1,16 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Section {
     get client() {
         return this._client;
     }
@@ -38,7 +30,7 @@ class Controller {
     }
 
     setDefaultParams() {
-        const path = `Dms/${this.$stateParams.dmsId}`;
+        const path = `Dms/${this.$params.dmsId}`;
         this.$http.get(path).then(res => {
             const dms = res.data && res.data;
             this.dms = {
@@ -55,7 +47,7 @@ class Controller {
     }
 
     onSubmit() {
-        const query = `dms/${this.$stateParams.dmsId}/updateFile`;
+        const query = `dms/${this.$params.dmsId}/updateFile`;
         const options = {
             method: 'POST',
             url: query,
@@ -93,8 +85,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnClientDmsEdit', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/dms/edit/index.spec.js b/modules/client/front/dms/edit/index.spec.js
index 4d432cfd05..f4aaf52f8c 100644
--- a/modules/client/front/dms/edit/index.spec.js
+++ b/modules/client/front/dms/edit/index.spec.js
@@ -5,16 +5,16 @@ describe('Client', () => {
         let controller;
         let $scope;
         let $httpBackend;
-        let $state;
 
         beforeEach(ngModule('client'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $state = {params: {dmsId: 1}};
-            controller = $componentController('vnClientDmsEdit', {$scope, $state});
+            const $element = angular.element('<vn-client-dms-edit></vn-client-dms-edit>');
+            controller = $componentController('vnClientDmsEdit', {$element, $scope});
             controller._client = {id: 1};
+            controller.$params = {dmsId: 1};
         }));
 
         describe('client() setter', () => {
diff --git a/modules/client/front/dms/index/index.html b/modules/client/front/dms/index/index.html
index 78bc45b574..987613d724 100644
--- a/modules/client/front/dms/index/index.html
+++ b/modules/client/front/dms/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="ClientDms"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="$ctrl.clientDms"
@@ -56,7 +56,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         {{::document.dms.file}}
                     </a>
                 </vn-td>
@@ -70,7 +70,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">
diff --git a/modules/client/front/dms/index/index.js b/modules/client/front/dms/index/index.js
index 0f1c8a2dca..2b47c3e57b 100644
--- a/modules/client/front/dms/index/index.js
+++ b/modules/client/front/dms/index/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, vnToken, $http, vnApp, $translate) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.accessToken = vnToken.token;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'dms',
@@ -71,7 +67,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', 'vnToken', '$http', 'vnApp', '$translate'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientDmsIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/dms/index/index.spec.js b/modules/client/front/dms/index/index.spec.js
index 49b6014c0d..816e8a25de 100644
--- a/modules/client/front/dms/index/index.spec.js
+++ b/modules/client/front/dms/index/index.spec.js
@@ -3,18 +3,17 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Client', () => {
     describe('Component vnClientDmsIndex', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientDmsIndex', {$: $scope});
+            const $element = angular.element('<vn-client-dms-index></vn-client-dms-index>');
+            controller = $componentController('vnClientDmsIndex', {$element, $scope});
             controller.$.model = crudModel;
         }));
 
diff --git a/modules/client/front/fiscal-data/index.js b/modules/client/front/fiscal-data/index.js
index f302606dd0..fdbb0fafc9 100644
--- a/modules/client/front/fiscal-data/index.js
+++ b/modules/client/front/fiscal-data/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     onSubmit() {
         const orgData = this.$.watcher.orgData;
         delete this.client.despiteOfClient;
diff --git a/modules/client/front/greuge/create/index.js b/modules/client/front/greuge/create/index.js
index b0a2eec939..3154d15f08 100644
--- a/modules/client/front/greuge/create/index.js
+++ b/modules/client/front/greuge/create/index.js
@@ -1,12 +1,12 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, $filter) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.greuge = {
             shipped: new Date(),
-            clientFk: $state.params.id
+            clientFk: this.$params.id
         };
     }
 
@@ -26,7 +26,7 @@ class Controller {
         );
     }
 }
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientGreugeCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/greuge/create/index.spec.js b/modules/client/front/greuge/create/index.spec.js
index 73563ca3d7..cb52ae2a75 100644
--- a/modules/client/front/greuge/create/index.spec.js
+++ b/modules/client/front/greuge/create/index.spec.js
@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientGreugeCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientGreugeCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-greuge-create></vn-client-greuge-create>');
+            controller = $componentController('vnClientGreugeCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/client/front/greuge/index/index.html b/modules/client/front/greuge/index/index.html
index 683ac0afe6..463ac6303b 100644
--- a/modules/client/front/greuge/index/index.html
+++ b/modules/client/front/greuge/index/index.html
@@ -2,13 +2,13 @@
     vn-id="model"
     url="greuges"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="greuges"
     auto-load="true">
 </vn-crud-model>
 <mg-ajax 
-    path="greuges/{{$ctrl.$stateParams.id}}/sumAmount" 
+    path="greuges/{{$ctrl.$params.id}}/sumAmount" 
     options="mgEdit">
 </mg-ajax>
 <vn-data-viewer
diff --git a/modules/client/front/greuge/index/index.js b/modules/client/front/greuge/index/index.js
index b89b01d7e3..bacb93544b 100644
--- a/modules/client/front/greuge/index/index.js
+++ b/modules/client/front/greuge/index/index.js
@@ -1,8 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -17,7 +18,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientGreugeIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/index/index.js b/modules/client/front/index/index.js
index 054944f9d8..f5400e05a6 100644
--- a/modules/client/front/index/index.js
+++ b/modules/client/front/index/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state) {
-        this.$ = $scope;
-        this.$state = $state;
-        this.clientSelected = null;
-    }
-
+export default class Controller extends Section {
     openSummary(client, event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -25,7 +20,6 @@ export default class Controller {
             {q: JSON.stringify({clientFk: client.id})});
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnClientIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/index/index.spec.js b/modules/client/front/index/index.spec.js
index 8b00381c7a..110db5e6aa 100644
--- a/modules/client/front/index/index.spec.js
+++ b/modules/client/front/index/index.spec.js
@@ -2,13 +2,16 @@ import './index';
 
 describe('Client index', () => {
     let $state;
+    let $scope;
     let controller;
 
     beforeEach(ngModule('client'));
 
-    beforeEach(angular.mock.inject(($componentController, _$state_) => {
+    beforeEach(angular.mock.inject(($componentController, _$state_, $rootScope) => {
         $state = _$state_;
-        controller = $componentController('vnClientIndex');
+        $scope = $rootScope.$new();
+        const $element = angular.element('<vn-client-index></vn-client-index>');
+        controller = $componentController('vnClientIndex', {$element, $scope});
     }));
 
     describe('filterTickets()', () => {
diff --git a/modules/client/front/log/index.html b/modules/client/front/log/index.html
index 90874d0cba..881d5c039e 100644
--- a/modules/client/front/log/index.html
+++ b/modules/client/front/log/index.html
@@ -1 +1 @@
-<vn-log url="ClientLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="ClientLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/client/front/log/index.js b/modules/client/front/log/index.js
index 2f01d229cd..e4cac6e58a 100644
--- a/modules/client/front/log/index.js
+++ b/modules/client/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnClientLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/client/front/mandate/index.html b/modules/client/front/mandate/index.html
index 79016761f9..3084646dab 100644
--- a/modules/client/front/mandate/index.html
+++ b/modules/client/front/mandate/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="Mandates"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="mandates"
     order="created DESC"
diff --git a/modules/client/front/mandate/index.js b/modules/client/front/mandate/index.js
index 607bb335b3..640678e42d 100644
--- a/modules/client/front/mandate/index.js
+++ b/modules/client/front/mandate/index.js
@@ -1,8 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -21,7 +22,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientMandate', {
     template: require('./index.html'),
diff --git a/modules/client/front/note/create/index.js b/modules/client/front/note/create/index.js
index 75c7ebc80b..108aba4074 100644
--- a/modules/client/front/note/create/index.js
+++ b/modules/client/front/note/create/index.js
@@ -1,19 +1,19 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($state) {
-        this.$state = $state;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.note = {
-            clientFk: parseInt($state.params.id),
+            clientFk: parseInt(this.$params.id),
             text: null
         };
     }
 
     cancel() {
-        this.$state.go('client.card.note.index', {id: this.$state.params.id});
+        this.$state.go('client.card.note.index', {id: this.$params.id});
     }
 }
-Controller.$inject = ['$state'];
 
 ngModule.component('vnNoteCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/note/create/index.spec.js b/modules/client/front/note/create/index.spec.js
index 5ac62efa37..0dc515b1e7 100644
--- a/modules/client/front/note/create/index.spec.js
+++ b/modules/client/front/note/create/index.spec.js
@@ -2,17 +2,16 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnNoteCreate', () => {
-        let $componentController;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, _$state_) => {
             $state = _$state_;
             $state.params.id = '1234';
-            controller = $componentController('vnNoteCreate', {$state: $state});
+            const $element = angular.element('<vn-note-create></vn-note-create>');
+            controller = $componentController('vnNoteCreate', {$element, $state});
         }));
 
         it('should define clientFk using $state.params.id', () => {
diff --git a/modules/client/front/note/index/index.html b/modules/client/front/note/index/index.html
index a77362ff6a..634a9c3ce7 100644
--- a/modules/client/front/note/index/index.html
+++ b/modules/client/front/note/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="clientObservations"
     filter="$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="notes"
     auto-load="true">
 </vn-crud-model>
@@ -24,7 +24,7 @@
     </vn-card>
 </vn-data-viewer>
 <a vn-tooltip="New note"
-    ui-sref="client.card.note.create({id: $ctrl.$stateParams.id})" 
+    ui-sref="client.card.note.create({id: $ctrl.$params.id})" 
     vn-bind="+" 
     fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
diff --git a/modules/client/front/note/index/index.js b/modules/client/front/note/index/index.js
index ef1f0d5fb4..654c460e49 100644
--- a/modules/client/front/note/index/index.js
+++ b/modules/client/front/note/index/index.js
@@ -1,16 +1,17 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-export default class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             order: 'created DESC',
         };
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientNote', {
     template: require('./index.html'),
diff --git a/modules/client/front/postcode/index.js b/modules/client/front/postcode/index.js
index 836ea9a81e..c05ea05182 100644
--- a/modules/client/front/postcode/index.js
+++ b/modules/client/front/postcode/index.js
@@ -3,14 +3,6 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     get townSelection() {
         return this._townSelection;
     }
@@ -54,8 +46,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnClientPostcode', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/postcode/index.spec.js b/modules/client/front/postcode/index.spec.js
index a5e5db9d56..2cefb6985f 100644
--- a/modules/client/front/postcode/index.spec.js
+++ b/modules/client/front/postcode/index.spec.js
@@ -4,14 +4,15 @@ describe('Client', () => {
     describe('Component vnClientPostcode', () => {
         let controller;
         let $httpBackend;
-        let $element;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            $element = angular.element('<vn-dialog></vn-dialog>');
-            controller = $componentController('vnClientPostcode', {$element});
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-dialog></vn-dialog>');
+            controller = $componentController('vnClientPostcode', {$element, $scope});
             controller.client = {id: 101};
         }));
 
diff --git a/modules/client/front/recovery/create/index.js b/modules/client/front/recovery/create/index.js
index ee69e08612..aa378203be 100644
--- a/modules/client/front/recovery/create/index.js
+++ b/modules/client/front/recovery/create/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, $filter) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.recovery = {
             started: new Date()
         };
@@ -18,7 +18,7 @@ class Controller {
     }
 
     onSubmit() {
-        this.recovery.clientFk = this.$state.params.id;
+        this.recovery.clientFk = this.$params.id;
         this.$.watcher.submit().then(
             () => {
                 this.goToIndex();
@@ -26,7 +26,7 @@ class Controller {
         );
     }
 }
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientRecoveryCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/recovery/create/index.spec.js b/modules/client/front/recovery/create/index.spec.js
index cf28cee8de..d2635ee8da 100644
--- a/modules/client/front/recovery/create/index.spec.js
+++ b/modules/client/front/recovery/create/index.spec.js
@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientRecoveryCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientRecoveryCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-recovery-create></vn-client-recovery-create>');
+            controller = $componentController('vnClientRecoveryCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/client/front/recovery/index/index.html b/modules/client/front/recovery/index/index.html
index d5c28dc887..214dff822a 100644
--- a/modules/client/front/recovery/index/index.html
+++ b/modules/client/front/recovery/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="Recoveries"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="recoveries"
     order="started DESC"
diff --git a/modules/client/front/recovery/index/index.js b/modules/client/front/recovery/index/index.js
index b291ddc04d..f824309824 100644
--- a/modules/client/front/recovery/index/index.js
+++ b/modules/client/front/recovery/index/index.js
@@ -1,24 +1,17 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $scope, $http) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     setFinished(recovery) {
         if (!recovery.finished) {
             let params = {finished: Date.now()};
             this.$http.patch(`Recoveries/${recovery.id}`, params).then(
-                () => this.$scope.model.refresh()
+                () => this.$.model.refresh()
             );
         }
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http'];
-
 ngModule.component('vnClientRecoveryIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/client/front/sample/create/index.js b/modules/client/front/sample/create/index.js
index f478243c7d..bfb0fd2873 100644
--- a/modules/client/front/sample/create/index.js
+++ b/modules/client/front/sample/create/index.js
@@ -1,16 +1,13 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
-    constructor($element, $, vnApp, $httpParamSerializer, vnConfig) {
+class Controller extends Section {
+    constructor($element, $) {
         super($element, $);
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
-        this.vnConfig = vnConfig;
         this.clientSample = {
             clientFk: this.$params.id,
-            companyId: vnConfig.companyFk
+            companyId: this.vnConfig.companyFk
         };
     }
 
@@ -82,12 +79,11 @@ class Controller extends Component {
 
         if (isPreview) params.isPreview = true;
 
-        const serializedParams = this.$httpParamSerializer(params);
-        const query = `email/${sampleType.code}?${serializedParams}`;
-        this.$http.get(query).then(cb);
+        const query = `email/${sampleType.code}`;
+        this.$http.get(query, {params}).then(cb);
     }
 }
-Controller.$inject = ['$element', '$scope', 'vnApp', '$httpParamSerializer', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientSampleCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/sample/index/index.html b/modules/client/front/sample/index/index.html
index 4825d4121e..dfd662ba5c 100644
--- a/modules/client/front/sample/index/index.html
+++ b/modules/client/front/sample/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientSamples"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="samples"
     order="created DESC"
diff --git a/modules/client/front/sample/index/index.js b/modules/client/front/sample/index/index.js
index 4ce12e27c9..48f9319ce6 100644
--- a/modules/client/front/sample/index/index.js
+++ b/modules/client/front/sample/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -45,7 +45,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientSampleIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/sms/index.js b/modules/client/front/sms/index.js
index c7d89e7170..3dfdda8a3f 100644
--- a/modules/client/front/sms/index.js
+++ b/modules/client/front/sms/index.js
@@ -1,23 +1,14 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Section {
     open() {
-        this.$scope.SMSDialog.show();
+        this.$.SMSDialog.show();
     }
 
     charactersRemaining() {
-        const element = this.$scope.message;
+        const element = this.$.message;
         const value = element.input.value;
 
         const maxLength = 160;
diff --git a/modules/client/front/sms/index.spec.js b/modules/client/front/sms/index.spec.js
index 3958aec3b4..a7b4cd3df5 100644
--- a/modules/client/front/sms/index.spec.js
+++ b/modules/client/front/sms/index.spec.js
@@ -15,7 +15,7 @@ describe('Client', () => {
             controller = $componentController('vnClientSms', {$element, $scope});
             controller.client = {id: 101};
             controller.$params = {id: 101};
-            controller.$scope.message = {
+            controller.$.message = {
                 input: {
                     value: 'My SMS'
                 }
@@ -59,7 +59,7 @@ describe('Client', () => {
 
         describe('charactersRemaining()', () => {
             it('should return the characters remaining in a element', () => {
-                controller.$scope.message = {
+                controller.$.message = {
                     input: {
                         value: 'My message 0€'
                     }
diff --git a/modules/client/front/summary/index.js b/modules/client/front/summary/index.js
index fdf0984b7e..4dd299903c 100644
--- a/modules/client/front/summary/index.js
+++ b/modules/client/front/summary/index.js
@@ -1,11 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http) {
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     $onChanges() {
         if (!this.client)
             return;
@@ -41,8 +38,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http'];
-
 ngModule.component('vnClientSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/summary/index.spec.js b/modules/client/front/summary/index.spec.js
index 15607008a9..1c747d25ae 100644
--- a/modules/client/front/summary/index.spec.js
+++ b/modules/client/front/summary/index.spec.js
@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientSummary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-summary></vn-client-summary>');
+            controller = $componentController('vnClientSummary', {$element, $scope});
             controller.client = {id: 101};
         }));
 
diff --git a/modules/client/front/web-access/index.js b/modules/client/front/web-access/index.js
index bdd5375a38..3f7f46f047 100644
--- a/modules/client/front/web-access/index.js
+++ b/modules/client/front/web-access/index.js
@@ -1,11 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $http, vnApp, $translate) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.canChangePassword = false;
         this.canEnableCheckBox = true;
     }
@@ -64,7 +62,7 @@ export default class Controller {
         return true;
     }
 }
-Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientWebAccess', {
     template: require('./index.html'),
diff --git a/modules/client/front/web-access/index.spec.js b/modules/client/front/web-access/index.spec.js
index 319d1d1dc2..0ed3345d1f 100644
--- a/modules/client/front/web-access/index.spec.js
+++ b/modules/client/front/web-access/index.spec.js
@@ -13,7 +13,8 @@ describe('Component VnClientWebAccess', () => {
         $httpBackend = _$httpBackend_;
         vnApp = _vnApp_;
         jest.spyOn(vnApp, 'showError');
-        controller = $componentController('vnClientWebAccess', {$scope});
+        const $element = angular.element('<vn-client-web-access></vn-client-web-access>');
+        controller = $componentController('vnClientWebAccess', {$element, $scope});
     }));
 
     describe('$onChanges()', () => {
diff --git a/modules/client/front/web-payment/index.html b/modules/client/front/web-payment/index.html
index 110f4a2bf9..ef0e568c59 100644
--- a/modules/client/front/web-payment/index.html
+++ b/modules/client/front/web-payment/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="clients/getTransactions"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="transactions"
     order="created DESC"
diff --git a/modules/client/front/web-payment/index.js b/modules/client/front/web-payment/index.js
index 4c379dcadc..c68abf49e5 100644
--- a/modules/client/front/web-payment/index.js
+++ b/modules/client/front/web-payment/index.js
@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
-    }
-
+class Controller extends Section {
     confirm(transaction) {
         const path = 'Clients/confirmTransaction';
         let data = {id: transaction.id};
         this.$http.post(path, data).then(res => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         });
     }
 
@@ -26,8 +21,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnClientWebPayment', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/client/front/web-payment/index.spec.js b/modules/client/front/web-payment/index.spec.js
index dc2d40b1a9..ee07f2fff7 100644
--- a/modules/client/front/web-payment/index.spec.js
+++ b/modules/client/front/web-payment/index.spec.js
@@ -15,7 +15,8 @@ describe('Component vnClientWebPayment', () => {
         $httpBackend = _$httpBackend_;
         vnApp = _vnApp_;
         jest.spyOn(vnApp, 'showError');
-        controller = $componentController('vnClientWebPayment', {$scope: $scope});
+        const $element = angular.element('<vn-client-web-payment></vn-client-web-payment>');
+        controller = $componentController('vnClientWebPayment', {$element, $scope});
     }));
 
     describe('confirm()', () => {
diff --git a/modules/entry/front/buy/index.js b/modules/entry/front/buy/index.js
index bc8788239a..674243eb14 100644
--- a/modules/entry/front/buy/index.js
+++ b/modules/entry/front/buy/index.js
@@ -1,17 +1,9 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
-
-class Controller extends Component {
-    constructor($element, $) {
-        super($element, $);
-    }
-}
-
-Controller.$inject = ['$element', '$scope'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnEntryBuy', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
     bindings: {
         entry: '<'
     }
diff --git a/modules/entry/front/index/index.js b/modules/entry/front/index/index.js
index 7368cc05e1..ab0a901b78 100644
--- a/modules/entry/front/index/index.js
+++ b/modules/entry/front/index/index.js
@@ -1,10 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-export default class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-
+export default class Controller extends Section {
     showTravelDescriptor(event, travelFk) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -16,8 +13,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnEntryIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/entry/front/log/index.html b/modules/entry/front/log/index.html
index 4932965d1d..fd8ae7c2a1 100644
--- a/modules/entry/front/log/index.html
+++ b/modules/entry/front/log/index.html
@@ -1 +1 @@
-<vn-log url="EntryLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="EntryLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/entry/front/log/index.js b/modules/entry/front/log/index.js
index a5fb6c6682..d045f20350 100644
--- a/modules/entry/front/log/index.js
+++ b/modules/entry/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnEntryLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/entry/front/summary/index.js b/modules/entry/front/summary/index.js
index 3b26907d71..94eaf17915 100644
--- a/modules/entry/front/summary/index.js
+++ b/modules/entry/front/summary/index.js
@@ -1,13 +1,8 @@
 import ngModule from '../module';
 import './style.scss';
-import Component from 'core/lib/component';
-
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
-        this.$httpParamSerializer = $httpParamSerializer;
-    }
+import Section from 'salix/components/section';
 
+class Controller extends Section {
     get entry() {
         return this._entry;
     }
@@ -26,8 +21,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnEntrySummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/entry/front/summary/index.spec.js b/modules/entry/front/summary/index.spec.js
index 64952cec1b..a59bb80097 100644
--- a/modules/entry/front/summary/index.spec.js
+++ b/modules/entry/front/summary/index.spec.js
@@ -4,7 +4,6 @@ describe('component vnEntrySummary', () => {
     let controller;
     let $httpBackend;
     let $scope;
-    let $element;
 
     beforeEach(angular.mock.module('entry', $translateProvider => {
         $translateProvider.translations('en', {});
@@ -13,7 +12,7 @@ describe('component vnEntrySummary', () => {
     beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
         $httpBackend = _$httpBackend_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-entry-summary></vn-entry-summary>`);
+        const $element = angular.element(`<vn-entry-summary></vn-entry-summary>`);
         controller = $componentController('vnEntrySummary', {$element, $scope});
     }));
 
diff --git a/modules/invoiceOut/front/descriptor-popover/index.js b/modules/invoiceOut/front/descriptor-popover/index.js
index 2e3fb15fd1..c530bdd0f6 100644
--- a/modules/invoiceOut/front/descriptor-popover/index.js
+++ b/modules/invoiceOut/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $,) {
+        super($element, $);
         this.worker = null;
         this._quicklinks = {};
     }
@@ -69,7 +66,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnInvoiceOutDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/invoiceOut/front/descriptor/index.js b/modules/invoiceOut/front/descriptor/index.js
index a69f6ed8b5..fea3c8bada 100644
--- a/modules/invoiceOut/front/descriptor/index.js
+++ b/modules/invoiceOut/front/descriptor/index.js
@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, vnToken, vnApp, $state, $translate, $http, aclService) {
-        this.$scope = $scope;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.$http = $http;
-        this.aclService = aclService;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.moreOptions = [
             {callback: this.showInvoiceOutPdf, name: 'Show invoice PDF'},
             {callback: this.showDeleteInvoiceOutDialog, name: 'Delete Invoice', acl: 'invoicing'},
@@ -22,7 +17,7 @@ class Controller {
 
             return !hasAclProperty || (hasAclProperty && this.aclService.hasAny([option.acl]));
         });
-        this.$scope.moreButton.data = options;
+        this.$.moreButton.data = options;
     }
 
     onMoreChange(callback) {
@@ -58,11 +53,11 @@ class Controller {
     }
 
     showDeleteInvoiceOutDialog() {
-        this.$scope.deleteConfirmation.show();
+        this.$.deleteConfirmation.show();
     }
 
     showBookInvoiceOutDialog() {
-        this.$scope.bookConfirmation.show();
+        this.$.bookConfirmation.show();
     }
 
     deleteInvoiceOut(response) {
@@ -94,8 +89,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', 'vnToken', 'vnApp', '$state', '$translate', '$http', 'aclService'];
-
 ngModule.component('vnInvoiceOutDescriptor', {
     template: require('./index.html'),
     bindings: {
diff --git a/modules/invoiceOut/front/index/index.js b/modules/invoiceOut/front/index/index.js
index 46ad6bc3f7..d5c0fde3a7 100644
--- a/modules/invoiceOut/front/index/index.js
+++ b/modules/invoiceOut/front/index/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, vnToken) {
-        this.accessToken = vnToken.token;
-        this.$ = $scope;
-        this.selectedInvoiceOut = null;
-    }
-
+export default class Controller extends Section {
     showClientDescriptor(event, clientFk) {
         this.$.clientDescriptor.clientFk = clientFk;
         this.$.clientDescriptor.parent = event.target;
@@ -27,15 +22,13 @@ export default class Controller {
     }
 
     openPdf(id, event) {
-        let url = `api/InvoiceOuts/${id}/download?access_token=${this.accessToken}`;
+        let url = `api/InvoiceOuts/${id}/download?access_token=${this.vnToken.token}`;
         window.open(url, '_blank');
         event.preventDefault();
         event.stopImmediatePropagation();
     }
 }
 
-Controller.$inject = ['$scope', 'vnToken'];
-
 ngModule.component('vnInvoiceOutIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/invoiceOut/front/summary/index.js b/modules/invoiceOut/front/summary/index.js
index 0596c616fa..7b9bb9efdb 100644
--- a/modules/invoiceOut/front/summary/index.js
+++ b/modules/invoiceOut/front/summary/index.js
@@ -1,13 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, vnToken) {
-        this.accessToken = vnToken.token;
-        this.$http = $http;
-        this.$ = $scope;
-    }
-
+class Controller extends Section {
     set invoiceOut(value) {
         this._invoiceOut = value;
         if (value && value.id)
@@ -45,8 +40,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', 'vnToken'];
-
 ngModule.component('vnInvoiceOutSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/invoiceOut/front/summary/index.spec.js b/modules/invoiceOut/front/summary/index.spec.js
index f6ab4cb91d..ac6c40bcf7 100644
--- a/modules/invoiceOut/front/summary/index.spec.js
+++ b/modules/invoiceOut/front/summary/index.spec.js
@@ -4,12 +4,15 @@ describe('InvoiceOut', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('invoiceOut'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnInvoiceOutSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-invoice-out-summary></vn-invoice-out-summary>');
+            controller = $componentController('vnInvoiceOutSummary', {$element, $scope});
             controller.invoiceOut = {id: 1};
         }));
 
diff --git a/modules/item/front/barcode/index.html b/modules/item/front/barcode/index.html
index dba745d283..ade4c2f7d1 100644
--- a/modules/item/front/barcode/index.html
+++ b/modules/item/front/barcode/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemBarcodes"
     fields="['id', 'itemFk', 'code']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     data="barcodes"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/item/front/barcode/index.js b/modules/item/front/barcode/index.js
index 4096ab7eb2..d9e17a42a7 100644
--- a/modules/item/front/barcode/index.js
+++ b/modules/item/front/barcode/index.js
@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
+export default class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemBarcode', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/basic-data/index.js b/modules/item/front/basic-data/index.js
index 33a60b32d4..fb80c5178f 100644
--- a/modules/item/front/basic-data/index.js
+++ b/modules/item/front/basic-data/index.js
@@ -1,6 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
-class Controller extends Component {
+import Section from 'salix/components/section';
+
+class Controller extends Section {
     showIntrastat(event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
diff --git a/modules/item/front/basic-data/index.spec.js b/modules/item/front/basic-data/index.spec.js
index 178fac2784..fd7be5d934 100644
--- a/modules/item/front/basic-data/index.spec.js
+++ b/modules/item/front/basic-data/index.spec.js
@@ -5,14 +5,13 @@ describe('vnItemBasicData', () => {
         let $httpBackend;
         let $scope;
         let controller;
-        let $element;
 
         beforeEach(ngModule('item'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            $element = angular.element('<vn-item-basic-data></vn-item-basic-data>');
+            const $element = angular.element('<vn-item-basic-data></vn-item-basic-data>');
             controller = $componentController('vnItemBasicData', {$element, $scope});
             controller.$.watcher = {};
             controller.$params.id = 1;
diff --git a/modules/item/front/botanical/index.js b/modules/item/front/botanical/index.js
index 51161d53a5..03c62a0e33 100644
--- a/modules/item/front/botanical/index.js
+++ b/modules/item/front/botanical/index.js
@@ -1,17 +1,17 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($http, $state) {
-        this.$http = $http;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.botanical = {
-            itemFk: this.$state.params.id
+            itemFk: this.$params.id
         };
     }
 
     _getBotanical() {
         let filter = {
-            where: {itemFk: this.$state.params.id},
+            where: {itemFk: this.$params.id},
             include: [{relation: 'genus'}, {relation: 'specie'}]
         };
         this.$http.get(`ItemBotanicals?filter=${JSON.stringify(filter)}`)
@@ -26,8 +26,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$state'];
-
 ngModule.component('vnItemBotanical', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/botanical/index.spec.js b/modules/item/front/botanical/index.spec.js
index f4b6fa3c2c..1cf79bbb3b 100644
--- a/modules/item/front/botanical/index.spec.js
+++ b/modules/item/front/botanical/index.spec.js
@@ -3,19 +3,17 @@ import './index.js';
 describe('ItemBotanical', () => {
     describe('Component vnItemBotanical', () => {
         let $httpBackend;
-        let $state;
+        let $scope;
         let controller;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            $state = {
-                params: {
-                    id: 123
-                }
-            };
-            controller = $componentController('vnItemBotanical', {$state});
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-botanical></vn-item-botanical>');
+            controller = $componentController('vnItemBotanical', {$element, $scope});
+            controller.$params = {id: 123};
         }));
 
         describe('_getBotanical()', () => {
diff --git a/modules/item/front/create/index.js b/modules/item/front/create/index.js
index 646baa8cd8..ab51b0734f 100644
--- a/modules/item/front/create/index.js
+++ b/modules/item/front/create/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.item = {
             relevancy: 0
         };
@@ -16,7 +16,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemCreate', {
     template: require('./index.html'),
diff --git a/modules/item/front/create/index.spec.js b/modules/item/front/create/index.spec.js
index cd5197305c..518d5f78b2 100644
--- a/modules/item/front/create/index.spec.js
+++ b/modules/item/front/create/index.spec.js
@@ -2,15 +2,13 @@ import './index.js';
 
 describe('Item', () => {
     describe('Component vnItemCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Item', () => {
                     };
                 }
             };
-            controller = $componentController('vnItemCreate', {$scope: $scope});
+            const $element = angular.element('<vn-item-create></vn-item-create>');
+            controller = $componentController('vnItemCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/item/front/descriptor-popover/index.js b/modules/item/front/descriptor-popover/index.js
index 42886fd584..c7a62baae9 100644
--- a/modules/item/front/descriptor-popover/index.js
+++ b/modules/item/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.item = null;
         this._quicklinks = {};
     }
@@ -68,7 +65,7 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/item/front/descriptor-popover/index.spec.js b/modules/item/front/descriptor-popover/index.spec.js
index eb09bf7d93..dfc673b0bf 100644
--- a/modules/item/front/descriptor-popover/index.spec.js
+++ b/modules/item/front/descriptor-popover/index.spec.js
@@ -5,7 +5,6 @@ describe('Item', () => {
         let $httpBackend;
         let $scope;
         let controller;
-        let $element;
         let $timeout;
 
         beforeEach(ngModule('item'));
@@ -13,10 +12,10 @@ describe('Item', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$timeout_) => {
             $httpBackend = _$httpBackend_;
             $timeout = _$timeout_;
-            $element = angular.element(`<div></div>`);
             $scope = $rootScope.$new();
             $scope.popover = {relocate: () => {}, show: () => {}};
-            controller = $componentController('vnItemDescriptorPopover', {$scope, $element});
+            const $element = angular.element('<vn-item-descriptor-popover></vn-item-descriptor-popover>');
+            controller = $componentController('vnItemDescriptorPopover', {$element, $scope});
         }));
 
         describe('itemFk()', () => {
diff --git a/modules/item/front/descriptor/index.js b/modules/item/front/descriptor/index.js
index c4e66dfe3e..e04fdb595b 100644
--- a/modules/item/front/descriptor/index.js
+++ b/modules/item/front/descriptor/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller {
-    constructor($state, $scope, $http, vnApp, $translate, vnConfig) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.vnConfig = vnConfig;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.moreOptions = [
             {callback: this.showRegularizeDialog, name: 'Regularize stock'}
         ];
@@ -64,7 +60,7 @@ class Controller {
     }
 
     showRegularizeDialog() {
-        this.$scope.regularize.show();
+        this.$.regularize.show();
     }
 
     set quicklinks(value = {}) {
@@ -94,7 +90,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', '$http', 'vnApp', '$translate', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemDescriptor', {
     template: require('./index.html'),
diff --git a/modules/item/front/diary/index.js b/modules/item/front/diary/index.js
index 6d9f80641e..e77ad1c2c8 100644
--- a/modules/item/front/diary/index.js
+++ b/modules/item/front/diary/index.js
@@ -1,16 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state, $window, $translate, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $stateParams;
-        this.$window = $window;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     get item() {
         return this._item;
     }
@@ -19,17 +11,17 @@ class Controller {
         this._item = value;
 
         this.filter = {
-            where: {itemFk: this.$stateParams.id}
+            where: {itemFk: this.$params.id}
         };
 
-        this.$scope.$applyAsync(() => {
-            if (this.$stateParams.warehouseFk)
-                this.warehouseFk = this.$stateParams.warehouseFk;
+        this.$.$applyAsync(() => {
+            if (this.$params.warehouseFk)
+                this.warehouseFk = this.$params.warehouseFk;
             else if (value)
                 this.warehouseFk = value.itemType.warehouseFk;
 
-            if (this.$stateParams.ticketFk)
-                this.ticketFk = this.$stateParams.ticketFk;
+            if (this.$params.ticketFk)
+                this.ticketFk = this.$params.ticketFk;
         });
     }
 
@@ -42,7 +34,7 @@ class Controller {
             });
 
             this.filter.where.warehouseFk = value;
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         }
     }
 
@@ -51,27 +43,25 @@ class Controller {
     }
 
     get freeLineIndex() {
-        let lines = this.$scope.model.data;
+        let lines = this.$.model.data;
         let minDate = new Date();
         minDate.setHours(0, 0, 0, 0);
 
         let maxDate = new Date();
         maxDate.setHours(23, 59, 59, 59);
 
-
         for (let i = 0; i < lines.length; i++) {
             const dated = new Date(lines[i].date);
 
             let isForFuture = dated > maxDate;
             let isForToday = (dated >= minDate && dated <= maxDate);
-
             if (isForFuture || isForToday)
                 return i;
         }
     }
 
     get onPreparationLineIndex() {
-        let lines = this.$scope.model.data;
+        let lines = this.$.model.data;
         for (let i = this.freeLineIndex; i >= 0; i--) {
             let line = lines[i];
 
@@ -87,7 +77,7 @@ class Controller {
     }
 
     get givenTicketIndex() {
-        let lines = this.$scope.model.data;
+        let lines = this.$.model.data;
 
         for (let i = lines.length - 1; i > 0; i--) {
             let line = lines[i];
@@ -102,15 +92,12 @@ class Controller {
         let selectedTicketLineIndex = this.givenTicketIndex;
         let lineIndex = this.onPreparationLineIndex;
 
-
         let lines = body.querySelector('vn-tbody').children;
 
         if (lineIndex == undefined || !lines.length) return;
 
-
         let onPreparationLine = lines[lineIndex];
 
-
         let balance = onPreparationLine.querySelector('.balanceSpan');
         balance.classList.add('message');
         balance.title = this.$translate.instant('Visible quantity');
@@ -150,9 +137,9 @@ class Controller {
     showDescriptor(event, sale) {
         if (!sale.isTicket) return;
 
-        this.$scope.descriptor.ticketFk = sale.origin;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.ticketFk = sale.origin;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
 
         event.preventDefault();
     }
@@ -160,20 +147,18 @@ class Controller {
     showClientDescriptor(event, sale) {
         if (!sale.isTicket) return;
 
-        this.$scope.clientDescriptor.clientFk = sale.clientFk;
-        this.$scope.clientDescriptor.parent = event.target;
-        this.$scope.clientDescriptor.show();
+        this.$.clientDescriptor.clientFk = sale.clientFk;
+        this.$.clientDescriptor.parent = event.target;
+        this.$.clientDescriptor.show();
 
         event.preventDefault();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$window', '$translate', '$stateParams'];
-
 ngModule.component('vnItemDiary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/item/front/diary/index.spec.js b/modules/item/front/diary/index.spec.js
index 9e7f0cf0c4..94458a569d 100644
--- a/modules/item/front/diary/index.spec.js
+++ b/modules/item/front/diary/index.spec.js
@@ -3,18 +3,17 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Item', () => {
     describe('Component vnItemDiary', () => {
-        let $stateParams;
         let $scope;
         let controller;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope, _$stateParams_) => {
-            $stateParams = _$stateParams_;
-            $stateParams.id = 1;
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
-            controller = $componentController('vnItemDiary', {$scope, $stateParams});
-            controller.$scope.model = crudModel;
+            const $element = angular.element('<vn-item-diary></vn-item-diary>');
+            controller = $componentController('vnItemDiary', {$element, $scope});
+            controller.$.model = crudModel;
+            controller.$params = {id: 1};
         }));
 
         describe('isToday()', () => {
@@ -40,7 +39,7 @@ describe('Item', () => {
                 let currentDate = new Date();
                 currentDate.setDate(currentDate.getDate() + 1);
 
-                controller.$scope.model = {data: [
+                controller.$.model = {data: [
                     {name: 'My item 1', alertLevel: 3, date: '2018-05-02'},
                     {name: 'My item 2', alertLevel: 1, date: '2018-05-03'},
                     {name: 'My item 3', alertLevel: 0, date: currentDate}]
@@ -55,7 +54,7 @@ describe('Item', () => {
             it(`should call onPreparationLineIndex() and return an index from line with alertLevel 1 and isPicked true`, () => {
                 let currentDate = new Date();
                 currentDate.setDate(currentDate.getDate() + 1);
-                controller.$scope.model = {data: [
+                controller.$.model = {data: [
                     {name: 'My item 1', alertLevel: 3, isPicked: true, date: currentDate},
                     {name: 'My item 3', alertLevel: 1, isPicked: true, date: currentDate},
                     {name: 'My item 4', alertLevel: 1, isPicked: false, date: currentDate},
@@ -69,10 +68,10 @@ describe('Item', () => {
 
         describe('set item()', () => {
             it('should set warehouseFk property based on itemType warehouseFk', () => {
-                jest.spyOn(controller.$scope, '$applyAsync');
+                jest.spyOn(controller.$, '$applyAsync');
                 controller.item = {id: 1, itemType: {warehouseFk: 1}};
 
-                expect(controller.$scope.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
+                expect(controller.$.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
                 $scope.$apply();
 
                 expect(controller.warehouseFk).toEqual(1);
@@ -80,11 +79,11 @@ describe('Item', () => {
             });
 
             it(`should set warehouseFk property based on url query warehouseFk`, () => {
-                jest.spyOn(controller.$scope, '$applyAsync');
-                controller.$stateParams.warehouseFk = 4;
+                jest.spyOn(controller.$, '$applyAsync');
+                controller.$params.warehouseFk = 4;
                 controller.item = {id: 1, itemType: {warehouseFk: 1}};
 
-                expect(controller.$scope.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
+                expect(controller.$.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
                 $scope.$apply();
 
                 expect(controller.warehouseFk).toEqual(4);
@@ -94,7 +93,7 @@ describe('Item', () => {
 
         describe('givenTicketIndex() setter', () => {
             it(`should return the index position of the line of a given ticket fk`, () => {
-                controller.$scope.model = {data: [
+                controller.$.model = {data: [
                     {name: 'My item 1', origin: 1, alertLevel: 3, isPicked: true, date: '2018-05-02'},
                     {name: 'My item 3', origin: 2, alertLevel: 1, isPicked: true, date: '2018-05-03'},
                     {name: 'My item 4', origin: 3, alertLevel: 1, isPicked: false, date: '2018-05-03'}]
@@ -103,7 +102,7 @@ describe('Item', () => {
 
                 let index = controller.givenTicketIndex;
 
-                expect(controller.$scope.model.data[index].origin).toEqual(2);
+                expect(controller.$.model.data[index].origin).toEqual(2);
             });
         });
     });
diff --git a/modules/item/front/fetched-tags/index.js b/modules/item/front/fetched-tags/index.js
index b88e853b4b..9140abcf4c 100644
--- a/modules/item/front/fetched-tags/index.js
+++ b/modules/item/front/fetched-tags/index.js
@@ -1,8 +1,10 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
 ngModule.component('vnFetchedTags', {
     template: require('./index.html'),
+    controller: Component,
     bindings: {
         maxLength: '<',
         item: '<',
diff --git a/modules/item/front/index/index.js b/modules/item/front/index/index.js
index 968c7b027a..ad978e0aa7 100644
--- a/modules/item/front/index/index.js
+++ b/modules/item/front/index/index.js
@@ -1,15 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $state, $scope, aclService) {
-        this.aclService = aclService;
-        this.$http = $http;
-        this.$state = $state;
-        this.$ = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.itemSelected = null;
         this.imagesPath = '//verdnatura.es/vn-image-data/catalog';
-
         this.showFields = {
             id: false,
             actions: false
@@ -33,7 +30,7 @@ class Controller {
     }
 
     showWorkerDescriptor(event, workerFk) {
-        if (event.defaultPrevented) return;
+        if (event.defaltPrevented) return;
 
         event.preventDefault();
         event.stopPropagation();
@@ -67,7 +64,8 @@ class Controller {
         this.$.preview.show();
     }
 }
-Controller.$inject = ['$http', '$state', '$scope', 'aclService'];
+
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemIndex', {
     template: require('./index.html'),
diff --git a/modules/item/front/index/index.spec.js b/modules/item/front/index/index.spec.js
index aa8523b79c..de07cd04d2 100644
--- a/modules/item/front/index/index.spec.js
+++ b/modules/item/front/index/index.spec.js
@@ -2,16 +2,17 @@ import './index.js';
 
 describe('Item', () => {
     describe('Component vnItemIndex', () => {
-        let $state;
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_) => {
-            $state = _$state_;
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnItemIndex', {$state});
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-index></vn-item-index>');
+            controller = $componentController('vnItemIndex', {$element, $scope});
         }));
 
         describe('onCloneAccept()', () => {
diff --git a/modules/item/front/last-entries/index.js b/modules/item/front/last-entries/index.js
index 3ef89f0862..752f1b0354 100644
--- a/modules/item/front/last-entries/index.js
+++ b/modules/item/front/last-entries/index.js
@@ -1,10 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
 
         let defaultDate = new Date();
         defaultDate.setDate(defaultDate.getDate() - 75);
@@ -12,7 +12,7 @@ class Controller {
 
         this.filter = {
             where: {
-                itemFk: $stateParams.id,
+                itemFk: this.$params.id,
                 date: defaultDate
             }
         };
@@ -25,7 +25,7 @@ class Controller {
         if (!value) return;
 
         this.filter.where.date = value;
-        this.$scope.model.refresh();
+        this.$.model.refresh();
     }
 
     get date() {
@@ -33,7 +33,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemLastEntries', {
     template: require('./index.html'),
diff --git a/modules/item/front/log/index.html b/modules/item/front/log/index.html
index 3a6bb92ad4..280a2b839f 100644
--- a/modules/item/front/log/index.html
+++ b/modules/item/front/log/index.html
@@ -1 +1 @@
-<vn-log url="ItemLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="ItemLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/item/front/log/index.js b/modules/item/front/log/index.js
index 9253147c78..4433b2460b 100644
--- a/modules/item/front/log/index.js
+++ b/modules/item/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnItemLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/item/front/niche/index.html b/modules/item/front/niche/index.html
index 70dabe671c..572d81a2e9 100644
--- a/modules/item/front/niche/index.html
+++ b/modules/item/front/niche/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemNiches"
     fields="['id', 'itemFk', 'warehouseFk', 'code']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     data="niches"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/item/front/niche/index.js b/modules/item/front/niche/index.js
index 5d2442c584..f4e7cd0be3 100644
--- a/modules/item/front/niche/index.js
+++ b/modules/item/front/niche/index.js
@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
+export default class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemNiche', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/request/index.html b/modules/item/front/request/index.html
index 20da8946dd..0516e7ff5e 100644
--- a/modules/item/front/request/index.html
+++ b/modules/item/front/request/index.html
@@ -91,7 +91,7 @@
                     <vn-icon-button
                         ng-if="request.isOk != 0"
                         icon="thumb_down"
-                        ng-click="$ctrl.showDenyReason($event, request)"
+                        ng-click="denyDialog.show(request)"
                         translate-attr="{title: 'Discard'}"
                         tabindex="-1">
                     </vn-icon-button>
@@ -111,8 +111,9 @@
     vn-id="itemDescriptor">
 </vn-item-descriptor-popover>
 <vn-dialog
-    vn-id="denyReason"
-    on-response="$ctrl.denyRequest($response)">
+    vn-id="deny-dialog"
+    on-accept="$ctrl.onDenyAccept($data)"
+    on-close="$ctrl.onDenyClose()">
     <tpl-body>
         <h5 class="vn-pa-md" translate>Specify the reasons to deny this request</h5>
         <vn-horizontal class="vn-pa-md">
diff --git a/modules/item/front/request/index.js b/modules/item/front/request/index.js
index 3684a19114..51035c4686 100644
--- a/modules/item/front/request/index.js
+++ b/modules/item/front/request/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
 
@@ -33,7 +33,7 @@ export default class Controller extends Component {
     getState(isOk) {
         if (isOk === null)
             return 'Nueva';
-        else if (isOk === -1 || isOk)
+        else if (isOk)
             return 'Aceptada';
         else
             return 'Denegada';
@@ -102,25 +102,26 @@ export default class Controller extends Component {
         delete this.denyRequestId;
     }
 
-    denyRequest(response) {
-        if (response !== 'accept') return;
-
+    onDenyAccept(request) {
         let params = {
             observation: this.denyObservation
         };
 
-        let query = `TicketRequests/${this.selectedRequest.id}/deny`;
-        this.$http.post(query, params).then(res => {
-            const request = res.data;
-            this.selectedRequest.isOk = request.isOk;
-            this.selectedRequest.attenderFk = request.attenderFk;
-            this.selectedRequest.response = request.response;
+        let query = `TicketRequests/${request.id}/deny`;
+        return this.$http.post(query, params).then(res => {
+            const newRequest = res.data;
+            request.isOk = newRequest.isOk;
+            request.attenderFk = newRequest.attenderFk;
+            request.response = newRequest.response;
 
             this.vnApp.showSuccess(this.$t('Data saved!'));
-            this.denyObservation = null;
         });
     }
 
+    onDenyClose() {
+        this.denyObservation = null;
+    }
+
     showTicketDescriptor(event, ticketFk) {
         this.$.ticketDescriptor.ticketFk = ticketFk;
         this.$.ticketDescriptor.parent = event.target;
diff --git a/modules/item/front/request/index.spec.js b/modules/item/front/request/index.spec.js
index aaaade5660..042b209960 100644
--- a/modules/item/front/request/index.spec.js
+++ b/modules/item/front/request/index.spec.js
@@ -4,7 +4,6 @@ import crudModel from 'core/mocks/crud-model';
 describe('Item', () => {
     describe('Component vnItemRequest', () => {
         let $scope;
-        let $element;
         let controller;
         let $httpBackend;
 
@@ -15,7 +14,7 @@ describe('Item', () => {
             $scope = $rootScope.$new();
             $scope.model = crudModel;
             $scope.denyReason = {hide: () => {}};
-            $element = angular.element('<vn-item-request></vn-item-request>');
+            const $element = angular.element('<vn-item-request></vn-item-request>');
             controller = $componentController('vnItemRequest', {$element, $scope});
         }));
 
@@ -84,7 +83,6 @@ describe('Item', () => {
                 let request = {saleFk: 1, saleQuantity: 1};
                 jest.spyOn(controller.vnApp, 'showSuccess');
 
-
                 $httpBackend.when('PATCH', `Sales/${request.saleFk}/`).respond();
                 $httpBackend.expect('PATCH', `Sales/${request.saleFk}/`).respond();
                 controller.changeQuantity(request);
@@ -112,20 +110,20 @@ describe('Item', () => {
             });
         });
 
-        describe('denyRequest()', () => {
-            it(`should perform a query and call vnApp.showSuccess(), refresh(), hide() and set denyObservation to null in the controller`, () => {
-                jest.spyOn(controller.vnApp, 'showSuccess');
+        describe('onDenyAccept()', () => {
+            it(`should deny the request`, () => {
+                const request = {
+                    id: 1,
+                    response: 'new'
+                };
 
-                const request = {id: 1};
-                const expectedResult = {isOk: false, attenderFk: 106, response: 'Denied!'};
-                controller.selectedRequest = request;
+                const url = `TicketRequests/:id/deny`;
+                $httpBackend.expectRoute('POST', url).respond({response: 'denied'});
 
-                $httpBackend.when('POST', `TicketRequests/${request.id}/deny`).respond(expectedResult);
-                $httpBackend.expect('POST', `TicketRequests/${request.id}/deny`).respond(expectedResult);
-                controller.denyRequest('accept');
+                controller.onDenyAccept(request);
                 $httpBackend.flush();
 
-                expect(controller.vnApp.showSuccess).toHaveBeenCalledWith('Data saved!');
+                expect(request.response).toBe('denied');
             });
         });
     });
diff --git a/modules/item/front/summary/index.js b/modules/item/front/summary/index.js
index 7e12abda00..d38f1f29a6 100644
--- a/modules/item/front/summary/index.js
+++ b/modules/item/front/summary/index.js
@@ -1,11 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http) {
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     getSummary() {
         this.$http.get(`Items/${this.item.id}/getSummary`).then(response => {
             this.summary = response.data;
@@ -18,8 +15,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http'];
-
 ngModule.component('vnItemSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/item/front/summary/index.spec.js b/modules/item/front/summary/index.spec.js
index 8058ece100..069c24512f 100644
--- a/modules/item/front/summary/index.spec.js
+++ b/modules/item/front/summary/index.spec.js
@@ -4,12 +4,15 @@ describe('Item', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnItemSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-summary></vn-item-summary>');
+            controller = $componentController('vnItemSummary', {$element, $scope});
             controller.item = {id: 1};
         }));
 
diff --git a/modules/item/front/tags/index.html b/modules/item/front/tags/index.html
index 834d4c9774..888efd8d0b 100644
--- a/modules/item/front/tags/index.html
+++ b/modules/item/front/tags/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemTags"
     fields="['id', 'itemFk', 'tagFk', 'value', 'priority']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     include="$ctrl.include"
     order="priority ASC"
     data="$ctrl.itemTags"
diff --git a/modules/item/front/tags/index.js b/modules/item/front/tags/index.js
index c12e1b9b56..8737aeed4d 100644
--- a/modules/item/front/tags/index.js
+++ b/modules/item/front/tags/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.include = {
             relation: 'tag',
             scope: {
@@ -47,15 +47,15 @@ class Controller {
     }
 
     add() {
-        this.$scope.model.insert({
-            itemFk: this.$stateParams.id,
+        this.$.model.insert({
+            itemFk: this.$params.id,
             priority: this.getHighestPriority()
         });
     }
 
     getHighestPriority() {
         let max = 0;
-        this.$scope.model.data.forEach(tag => {
+        this.$.model.data.forEach(tag => {
             if (tag.priority > max)
                 max = tag.priority;
         });
@@ -63,17 +63,15 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.watcher.updateOriginalData();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
             this.card.reload();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemTags', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/item/front/tags/index.spec.js b/modules/item/front/tags/index.spec.js
index a59f0b6e04..10128e4f0f 100644
--- a/modules/item/front/tags/index.spec.js
+++ b/modules/item/front/tags/index.spec.js
@@ -12,7 +12,8 @@ describe('Item', () => {
             $scope = $rootScope.$new();
             $scope.model = crudModel;
             $scope.model.data = [{priority: 1}, {priority: 2}, {priority: 1}];
-            controller = $componentController('vnItemTags', {$scope});
+            const $element = angular.element('<vn-item-tags></vn-item-tags>');
+            controller = $componentController('vnItemTags', {$element, $scope});
         }));
 
         describe('itemTags setter', () => {
diff --git a/modules/item/front/tax/index.js b/modules/item/front/tax/index.js
index e0c2428de1..251e0802d9 100644
--- a/modules/item/front/tax/index.js
+++ b/modules/item/front/tax/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($stateParams, $http, $translate, $scope) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
-        this._ = $translate;
-    }
-
+export default class Controller extends Section {
     $onInit() {
         this.getTaxes();
     }
@@ -21,7 +15,7 @@ export default class Controller {
             }]
         };
 
-        let url = `Items/${this.$stateParams.id}/taxes`;
+        let url = `Items/${this.$params.id}/taxes`;
         this.$http.get(url, {params: {filter}}).then(json => {
             this.taxes = json.data;
         });
@@ -41,8 +35,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$http', '$translate', '$scope'];
-
 ngModule.component('vnItemTax', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/waste/index.js b/modules/item/front/waste/index.js
index 9344c2222d..d1a10fbf40 100644
--- a/modules/item/front/waste/index.js
+++ b/modules/item/front/waste/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
 ngModule.component('vnItemWaste', {
     template: require('./index.html'),
-    controller: Component
+    controller: Section
 });
diff --git a/modules/order/front/basic-data/index.js b/modules/order/front/basic-data/index.js
index 81aef83044..d1f1fc2256 100644
--- a/modules/order/front/basic-data/index.js
+++ b/modules/order/front/basic-data/index.js
@@ -1,18 +1,20 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope) {
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         let isDirty = false;
-        $scope.$watch('$ctrl.selection', newValue => {
+        this.$.$watch('$ctrl.selection', newValue => {
             if (newValue) {
-                $scope.addressModel.where = {clientFk: newValue.id};
-                $scope.addressModel.refresh();
+                this.$.addressModel.where = {clientFk: newValue.id};
+                this.$.addressModel.refresh();
                 if (isDirty)
                     this.order.addressFk = newValue.defaultAddressFk;
                 isDirty = true;
             } else {
-                $scope.addressModel.clear();
+                this.$.addressModel.clear();
                 if (isDirty)
                     this.order.addressFk = null;
             }
@@ -20,8 +22,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnOrderBasicData', {
     controller: Controller,
     template: require('./index.html'),
diff --git a/modules/order/front/card/index.js b/modules/order/front/card/index.js
index e791677616..80fa99d1d7 100644
--- a/modules/order/front/card/index.js
+++ b/modules/order/front/card/index.js
@@ -47,7 +47,7 @@ class Controller extends ModuleCard {
             ]
         };
 
-        this.$q.all([
+        return this.$q.all([
             this.$http.get(`Orders/${this.$params.id}`, {filter})
                 .then(res => this.order = res.data),
             this.$http.get(`Orders/${this.$params.id}/getTotal`)
diff --git a/modules/order/front/catalog-view/index.js b/modules/order/front/catalog-view/index.js
index fe1f1c7123..838da05ea5 100644
--- a/modules/order/front/catalog-view/index.js
+++ b/modules/order/front/catalog-view/index.js
@@ -2,7 +2,6 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 import './style.scss';
 
-
 class Controller extends Component {
     preview(event, item) {
         event.preventDefault();
diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html
index 7131d6a6e2..4c8786e13a 100644
--- a/modules/order/front/catalog/index.html
+++ b/modules/order/front/catalog/index.html
@@ -7,7 +7,7 @@
 <vn-crud-model
     vn-id="model"
     url="Orders/CatalogFilter"
-    params="{orderFk: $ctrl.$state.params.id}"
+    params="{orderFk: $ctrl.$params.id}"
     limit="50"
     data="$ctrl.items">
 </vn-crud-model>
diff --git a/modules/order/front/catalog/index.js b/modules/order/front/catalog/index.js
index e0ed611755..bd9a07f131 100644
--- a/modules/order/front/catalog/index.js
+++ b/modules/order/front/catalog/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $scope, $state, $compile, $transitions) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$compile = $compile;
-        this.$transitions = $transitions;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.itemTypes = [];
         this._tags = [];
 
@@ -52,17 +48,17 @@ class Controller {
         if (!value) return;
 
         this.$.$applyAsync(() => {
-            if (this.$stateParams.itemId)
-                this.itemId = parseInt(this.$stateParams.itemId);
+            if (this.$params.itemId)
+                this.itemId = parseInt(this.$params.itemId);
 
-            if (this.$stateParams.categoryId)
-                this.categoryId = parseInt(this.$stateParams.categoryId);
+            if (this.$params.categoryId)
+                this.categoryId = parseInt(this.$params.categoryId);
 
-            if (this.$stateParams.typeId)
-                this.typeId = parseInt(this.$stateParams.typeId);
+            if (this.$params.typeId)
+                this.typeId = parseInt(this.$params.typeId);
 
-            if (this.$stateParams.tags)
-                this.tags = JSON.parse(this.$stateParams.tags);
+            if (this.$params.tags)
+                this.tags = JSON.parse(this.$params.tags);
         });
     }
 
@@ -350,8 +346,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope', '$state', '$compile', '$transitions'];
-
 ngModule.component('vnOrderCatalog', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/order/front/catalog/index.spec.js b/modules/order/front/catalog/index.spec.js
index e2d2d0aff0..f017121108 100644
--- a/modules/order/front/catalog/index.spec.js
+++ b/modules/order/front/catalog/index.spec.js
@@ -20,7 +20,8 @@ describe('Order', () => {
             $state.params.categoryId = 1;
             $state.params.typeId = 2;
             $state.current.name = 'my.current.state';
-            controller = $componentController('vnOrderCatalog', {$scope, $state});
+            const $element = angular.element('<vn-order-catalog></vn-order-catalog>');
+            controller = $componentController('vnOrderCatalog', {$element, $scope});
             controller._order = {id: 4};
         }));
 
diff --git a/modules/order/front/create/card.js b/modules/order/front/create/card.js
index 7f1bb61332..158ad9a102 100644
--- a/modules/order/front/create/card.js
+++ b/modules/order/front/create/card.js
@@ -1,19 +1,16 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, vnApp, $translate, $state, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-        this.translate = $translate;
-        this.vnApp = vnApp;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.order = {};
-        this.$state = $state;
-        this.clientFk = $stateParams.clientFk;
+        this.clientFk = this.$params.clientFk;
     }
 
     $onInit() {
-        if (this.$stateParams && this.$stateParams.clientFk)
-            this.clientFk = this.$stateParams.clientFk;
+        if (this.$params && this.$params.clientFk)
+            this.clientFk = this.$params.clientFk;
     }
 
     set order(value) {
@@ -102,14 +99,12 @@ class Controller {
             agencyModeId: this.order.agencyModeFk
         };
         this.$http.post(`Orders/new`, params).then(res => {
-            this.vnApp.showSuccess(this.translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
             this.$state.go('order.card.catalog', {id: res.data});
         });
     }
 }
 
-Controller.$inject = ['$http', 'vnApp', '$translate', '$state', '$stateParams'];
-
 ngModule.component('vnOrderCreateCard', {
     template: require('./card.html'),
     controller: Controller,
diff --git a/modules/order/front/create/card.spec.js b/modules/order/front/create/card.spec.js
index ef2bba5296..f8f0653a74 100644
--- a/modules/order/front/create/card.spec.js
+++ b/modules/order/front/create/card.spec.js
@@ -4,12 +4,15 @@ describe('Order', () => {
     describe('Component vnOrderCreateCard', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('order'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _vnApp_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _vnApp_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnOrderCreateCard');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-order-create-card></vn-order-create-card>');
+            controller = $componentController('vnOrderCreateCard', {$element, $scope});
             controller.item = {id: 3};
         }));
 
diff --git a/modules/order/front/create/index.js b/modules/order/front/create/index.js
index 9c8d7ce6b4..5c02e82258 100644
--- a/modules/order/front/create/index.js
+++ b/modules/order/front/create/index.js
@@ -1,18 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     async onSubmit() {
         let newOrderID = await this.$.card.createOrder();
         this.$state.go('order.card.summary', {id: newOrderID});
     }
 }
-Controller.$inject = ['$scope', '$http', '$state'];
 
 ngModule.component('vnOrderCreate', {
     template: require('./index.html'),
diff --git a/modules/order/front/create/index.spec.js b/modules/order/front/create/index.spec.js
index 80a8341ece..82834a9874 100644
--- a/modules/order/front/create/index.spec.js
+++ b/modules/order/front/create/index.spec.js
@@ -10,7 +10,8 @@ describe('Order', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.card = {createOrder: () => {}};
-            controller = $componentController('vnOrderCreate', {$scope});
+            const $element = angular.element('<vn-order-create></vn-order-create>');
+            controller = $componentController('vnOrderCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/order/front/descriptor/index.js b/modules/order/front/descriptor/index.js
index 0d8a1e14a2..b9d1e7973a 100644
--- a/modules/order/front/descriptor/index.js
+++ b/modules/order/front/descriptor/index.js
@@ -1,12 +1,9 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($translate, $scope, vnApp, $http, $state) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.vnApp = vnApp;
-        this.$http = $http;
-        this.$translate = $translate;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.moreOptions = [
             {name: 'Delete order', callback: () => this.showDeleteOrderDialog()}
         ];
@@ -55,12 +52,10 @@ class Controller {
     }
 
     showDeleteOrderDialog() {
-        this.$scope.deleteOrderConfirmation.show();
+        this.$.deleteOrderConfirmation.show();
     }
 }
 
-Controller.$inject = ['$translate', '$scope', 'vnApp', '$http', '$state'];
-
 ngModule.component('vnOrderDescriptor', {
     template: require('./index.html'),
     bindings: {
diff --git a/modules/order/front/descriptor/index.spec.js b/modules/order/front/descriptor/index.spec.js
index 924ea4a979..5bb2ac0879 100644
--- a/modules/order/front/descriptor/index.spec.js
+++ b/modules/order/front/descriptor/index.spec.js
@@ -2,13 +2,16 @@ import './index.js';
 
 describe('Order Component vnOrderDescriptor', () => {
     let $httpBackend;
+    let $scope;
     let controller;
 
-        beforeEach(ngModule('order'));
+    beforeEach(ngModule('order'));
 
-    beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+    beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
         $httpBackend = _$httpBackend_;
-        controller = $componentController('vnOrderDescriptor');
+        $scope = $rootScope.$new();
+        const $element = angular.element('<vn-order-descriptor></vn-order-descriptor>');
+        controller = $componentController('vnOrderDescriptor', {$element, $scope});
         controller.order = {id: 1};
     }));
 
diff --git a/modules/order/front/index/index.js b/modules/order/front/index/index.js
index 10940eb271..99f00733e3 100644
--- a/modules/order/front/index/index.js
+++ b/modules/order/front/index/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$state = $state;
-        this.$ = $scope;
-        this.ticketSelected = null;
-    }
-
+export default class Controller extends Section {
     showClientDescriptor(event, clientFk) {
         this.$.clientDescriptor.clientFk = clientFk;
         this.$.clientDescriptor.parent = event.target;
@@ -36,8 +30,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$stateParams'];
-
 ngModule.component('vnOrderIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/order/front/line/index.js b/modules/order/front/line/index.js
index 149251c875..9351c5df83 100644
--- a/modules/order/front/line/index.js
+++ b/modules/order/front/line/index.js
@@ -43,10 +43,9 @@ class Controller extends Section {
             rows: [row.id],
             actualOrderId: this.$params.id
         };
-        return this.$http.post(`OrderRows/removes`, params).then(() => {
-            this.card.reload();
-            this.vnApp.showSuccess(this.$t('Data saved!'));
-        });
+        return this.$http.post(`OrderRows/removes`, params)
+            .then(() => this.card.reload())
+            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
     }
 
     showDescriptor(event, itemFk) {
diff --git a/modules/order/front/prices-popover/index.js b/modules/order/front/prices-popover/index.js
index b732f2090a..307cbc8d67 100644
--- a/modules/order/front/prices-popover/index.js
+++ b/modules/order/front/prices-popover/index.js
@@ -103,7 +103,6 @@ class Controller extends Component {
             return;
         }
 
-
         let params = {
             orderFk: this.order.id,
             items: filledLines
diff --git a/modules/order/front/summary/index.js b/modules/order/front/summary/index.js
index 42b71d90e3..ca6c29522b 100644
--- a/modules/order/front/summary/index.js
+++ b/modules/order/front/summary/index.js
@@ -1,14 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.order = {};
-    }
-
+class Controller extends Section {
     setSummary() {
         this.$http.get(`Orders/${this.order.id}/summary`).then(res => {
             if (res && res.data)
@@ -17,7 +11,7 @@ class Controller {
     }
 
     get formattedAddress() {
-        if (!this.summary) return;
+        if (!this.summary) return null;
 
         let address = this.summary.address;
         let province = address.province ? `(${address.province.name})` : '';
@@ -31,18 +25,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state'];
-
 ngModule.component('vnOrderSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/order/front/summary/index.spec.js b/modules/order/front/summary/index.spec.js
index f693db35d8..2fa7c1c93a 100644
--- a/modules/order/front/summary/index.spec.js
+++ b/modules/order/front/summary/index.spec.js
@@ -9,7 +9,8 @@ describe('Order', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnOrderSummary');
+            const $element = angular.element('<vn-order-summary></vn-order-summary>');
+            controller = $componentController('vnOrderSummary', {$element});
             controller.order = {id: 1};
         }));
 
diff --git a/modules/order/front/volume/index.html b/modules/order/front/volume/index.html
index 9dc1b811f0..36451f5174 100644
--- a/modules/order/front/volume/index.html
+++ b/modules/order/front/volume/index.html
@@ -3,12 +3,12 @@
     vn-id="model"
     url="OrderRows"
     filter="::$ctrl.filter"
-    link="{orderFk: $ctrl.$stateParams.id}"
+    link="{orderFk: $ctrl.$params.id}"
     limit="20"
     data="rows"
     on-data-change="$ctrl.onDataChange()">
 </vn-crud-model>
-<mg-ajax path="Orders/{{$ctrl.$stateParams.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
+<mg-ajax path="Orders/{{$ctrl.$params.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
 <vn-data-viewer model="model" class="header vn-w-lg">
     <vn-card class="vn-pa-lg">
         <vn-label-value
diff --git a/modules/order/front/volume/index.js b/modules/order/front/volume/index.js
index ef5232366a..f287636122 100644
--- a/modules/order/front/volume/index.js
+++ b/modules/order/front/volume/index.js
@@ -1,11 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [{
                 relation: 'item'
@@ -16,31 +15,30 @@ class Controller {
     }
 
     onDataChange() {
-        this.$http.get(`Orders/${this.$stateParams.id}/getVolumes`)
+        this.$http.get(`Orders/${this.$params.id}/getVolumes`)
             .then(response => {
-                if (response.data)
-                    this.$scope.model.data.forEach(order => {
+                if (response.data) {
+                    this.$.model.data.forEach(order => {
                         response.data.volumes.forEach(volume => {
                             if (order.itemFk === volume.itemFk)
                                 order.volume = volume.volume;
                         });
                     });
+                }
             });
     }
 
     showDescriptor(event, itemFk) {
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnOrderVolume', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/order/front/volume/index.spec.js b/modules/order/front/volume/index.spec.js
index c5fe0f2cf4..194592406d 100644
--- a/modules/order/front/volume/index.spec.js
+++ b/modules/order/front/volume/index.spec.js
@@ -21,7 +21,8 @@ describe('Order', () => {
             $scope.popover = {relocate: () => {}};
             $state = _$state_;
             $state.params.id = 1;
-            controller = $componentController('vnOrderVolume', {$scope}, {$httpBackend}, {$state});
+            const $element = angular.element('<vn-order-volume></vn-order-volume>');
+            controller = $componentController('vnOrderVolume', {$element, $scope});
         }));
 
         it('should join the sale volumes to its respective sale', () => {
@@ -31,29 +32,29 @@ describe('Order', () => {
             controller.onDataChange();
             $httpBackend.flush();
 
-            expect(controller.$scope.model.data[0].volume).toBe(0.008);
-            expect(controller.$scope.model.data[1].volume).toBe(0.003);
+            expect(controller.$.model.data[0].volume).toBe(0.008);
+            expect(controller.$.model.data[1].volume).toBe(0.003);
         });
 
         describe('showDescriptor()', () => {
             it('should set $scope.descriptor.itemFk, $scope.descriptor.parent and call $scope.descriptor.show()', () => {
                 let event = {target: 1};
                 let itemFk = 1;
-                jest.spyOn(controller.$scope.descriptor, 'show');
+                jest.spyOn(controller.$.descriptor, 'show');
                 controller.showDescriptor(event, itemFk);
 
-                expect(controller.$scope.descriptor.itemFk).toBe(1);
-                expect(controller.$scope.descriptor.parent).toBe(1);
-                expect(controller.$scope.descriptor.show).toHaveBeenCalledWith();
+                expect(controller.$.descriptor.itemFk).toBe(1);
+                expect(controller.$.descriptor.parent).toBe(1);
+                expect(controller.$.descriptor.show).toHaveBeenCalledWith();
             });
         });
 
         describe('onDescriptorLoad()', () => {
             it('should call $scope.popover.relocate()', () => {
-                jest.spyOn(controller.$scope.popover, 'relocate');
+                jest.spyOn(controller.$.popover, 'relocate');
                 controller.onDescriptorLoad();
 
-                expect(controller.$scope.popover.relocate).toHaveBeenCalledWith();
+                expect(controller.$.popover.relocate).toHaveBeenCalledWith();
             });
         });
     });
diff --git a/modules/route/front/basic-data/index.js b/modules/route/front/basic-data/index.js
index d4a481dc5f..cced46f553 100644
--- a/modules/route/front/basic-data/index.js
+++ b/modules/route/front/basic-data/index.js
@@ -1,19 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, vnApp, $translate) {
-        this.$ = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$.watcher.submit().then(() => {
-            this.card.reload();
-        });
+        this.$.watcher.submit().then(() =>
+            this.card.reload()
+        );
     }
 }
-Controller.$inject = ['$scope', 'vnApp', '$translate'];
 
 ngModule.component('vnRouteBasicData', {
     template: require('./index.html'),
diff --git a/modules/route/front/create/index.js b/modules/route/front/create/index.js
index 03fe574fc4..703ecb49ab 100644
--- a/modules/route/front/create/index.js
+++ b/modules/route/front/create/index.js
@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+export default class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.submit().then(
+        this.$.watcher.submit().then(
             res => this.$state.go('route.card.summary', {id: res.data.id})
         );
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnRouteCreate', {
     template: require('./index.html'),
diff --git a/modules/route/front/descriptor-popover/index.js b/modules/route/front/descriptor-popover/index.js
index 7d5cd3d916..a0363839f4 100644
--- a/modules/route/front/descriptor-popover/index.js
+++ b/modules/route/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.route = null;
         this._quicklinks = {};
     }
@@ -118,7 +115,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnRouteDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/route/front/descriptor/index.js b/modules/route/front/descriptor/index.js
index 51ca23a92c..558d236b74 100644
--- a/modules/route/front/descriptor/index.js
+++ b/modules/route/front/descriptor/index.js
@@ -2,8 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $httpParamSerializer) {
-        super($element, $scope);
+    constructor($element, $, $httpParamSerializer) {
+        super($element, $);
 
         this.$httpParamSerializer = $httpParamSerializer;
         this.moreOptions = [
diff --git a/modules/route/front/index/index.js b/modules/route/front/index/index.js
index 7355812657..0349af2932 100644
--- a/modules/route/front/index/index.js
+++ b/modules/route/front/index/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, vnToken) {
-        this.$ = $scope;
-        this.accessToken = vnToken.token;
-    }
-
+export default class Controller extends Section {
     showWorkerDescriptor(event, workerFk) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -25,7 +21,6 @@ export default class Controller {
         this.$.summary.show();
     }
 }
-Controller.$inject = ['$scope', 'vnToken'];
 
 ngModule.component('vnRouteIndex', {
     template: require('./index.html'),
diff --git a/modules/route/front/log/index.html b/modules/route/front/log/index.html
index 6a6adf250f..7df2e30ae2 100644
--- a/modules/route/front/log/index.html
+++ b/modules/route/front/log/index.html
@@ -1 +1 @@
-<vn-log url="RouteLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="RouteLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/route/front/log/index.js b/modules/route/front/log/index.js
index ff0a2a9d1b..b7d456b239 100644
--- a/modules/route/front/log/index.js
+++ b/modules/route/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnRouteLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/route/front/summary/index.js b/modules/route/front/summary/index.js
index b1d42e6f15..a922ad0082 100644
--- a/modules/route/front/summary/index.js
+++ b/modules/route/front/summary/index.js
@@ -1,12 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http) {
-        this.$http = $http;
-        this.$ = $scope;
-    }
-
+class Controller extends Section {
     set route(value) {
         this._route = value;
         if (value && value.id)
@@ -47,8 +43,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http'];
-
 ngModule.component('vnRouteSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/route/front/summary/index.spec.js b/modules/route/front/summary/index.spec.js
index 0dfc016b44..99c029394e 100644
--- a/modules/route/front/summary/index.spec.js
+++ b/modules/route/front/summary/index.spec.js
@@ -9,7 +9,8 @@ describe('Route', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnRouteSummary');
+            const $element = angular.element('<vn-route-summary></vn-route-summary>');
+            controller = $componentController('vnRouteSummary', {$element});
             controller.route = {id: 1};
         }));
 
diff --git a/modules/route/front/tickets/index.js b/modules/route/front/tickets/index.js
index f363302359..556ad0b6c4 100644
--- a/modules/route/front/tickets/index.js
+++ b/modules/route/front/tickets/index.js
@@ -3,12 +3,6 @@ import Section from 'salix/components/section';
 import './style.scss';
 
 class Controller extends Section {
-    constructor($element, $scope, $filter) {
-        super($element, $scope);
-
-        this.$filter = $filter;
-    }
-
     get route() {
         return this._route;
     }
@@ -200,8 +194,6 @@ class Controller extends Section {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$filter'];
-
 ngModule.component('vnRouteTickets', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/basic-data/index.js b/modules/ticket/front/basic-data/index.js
index 4965ee61e7..4deebff175 100644
--- a/modules/ticket/front/basic-data/index.js
+++ b/modules/ticket/front/basic-data/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     set ticket(data) {
         if (!data) return;
 
@@ -25,8 +21,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state'];
-
 ngModule.component('vnTicketBasicData', {
     template: require('./index.html'),
     bindings: {
diff --git a/modules/ticket/front/basic-data/step-one/index.js b/modules/ticket/front/basic-data/step-one/index.js
index b8fffd2c1c..f6655a221a 100644
--- a/modules/ticket/front/basic-data/step-one/index.js
+++ b/modules/ticket/front/basic-data/step-one/index.js
@@ -1,14 +1,8 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $translate, vnApp) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Component {
     $onInit() {
         this.basicData.registerChild(this);
     }
@@ -247,8 +241,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketBasicDataStepOne', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/basic-data/step-one/index.spec.js b/modules/ticket/front/basic-data/step-one/index.spec.js
index b1931d0bb0..a0673cbbee 100644
--- a/modules/ticket/front/basic-data/step-one/index.spec.js
+++ b/modules/ticket/front/basic-data/step-one/index.spec.js
@@ -13,7 +13,8 @@ describe('Ticket', () => {
             $state = _$state_;
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnTicketBasicDataStepOne', {$state});
+            const $element = angular.element('<vn-ticket-basic-data-step-one></vn-ticket-basic-data-step-one>');
+            controller = $componentController('vnTicketBasicDataStepOne', {$element});
             controller.ticket = {
                 addressFk: 121,
                 agencyModeFk: 7,
diff --git a/modules/ticket/front/basic-data/step-two/index.js b/modules/ticket/front/basic-data/step-two/index.js
index f766f57269..00556350ba 100644
--- a/modules/ticket/front/basic-data/step-two/index.js
+++ b/modules/ticket/front/basic-data/step-two/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, $state, $translate, vnApp) {
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Component {
     $onInit() {
         this.data.registerChild(this);
     }
@@ -92,13 +86,11 @@ class Controller {
                 this.$translate.instant(`The ticket has been unrouted`)
             );
             this.card.reload();
-            this.$state.go('ticket.card.summary', {id: this.$state.params.id});
+            this.$state.go('ticket.card.summary', {id: this.$params.id});
         });
     }
 }
 
-Controller.$inject = ['$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketBasicDataStepTwo', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/basic-data/step-two/index.spec.js b/modules/ticket/front/basic-data/step-two/index.spec.js
index 1ca89fd907..e67389f9dd 100644
--- a/modules/ticket/front/basic-data/step-two/index.spec.js
+++ b/modules/ticket/front/basic-data/step-two/index.spec.js
@@ -7,7 +7,8 @@ describe('Ticket', () => {
         beforeEach(ngModule('ticket'));
 
         beforeEach(angular.mock.inject($componentController => {
-            controller = $componentController('vnTicketBasicDataStepTwo');
+            const $element = angular.element('<vn-ticket-basic-data-step-two><vn-ticket-basic-data-step-two>');
+            controller = $componentController('vnTicketBasicDataStepTwo', {$element});
         }));
 
         describe('getTotalPrice()', () => {
diff --git a/modules/ticket/front/component/index.html b/modules/ticket/front/component/index.html
index 16db43a2e0..e555eb8d70 100644
--- a/modules/ticket/front/component/index.html
+++ b/modules/ticket/front/component/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model 
     vn-id="model"
     url="Sales"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     data="components"
     auto-load="true">
diff --git a/modules/ticket/front/component/index.js b/modules/ticket/front/component/index.js
index 027fdad776..d0b6ed880d 100644
--- a/modules/ticket/front/component/index.js
+++ b/modules/ticket/front/component/index.js
@@ -1,10 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             order: 'concept ASC',
             include: [{
@@ -32,7 +32,7 @@ class Controller {
     }
 
     base() {
-        let sales = this.$scope.model.data;
+        let sales = this.$.model.data;
         let sum = 0;
 
         if (!sales) return;
@@ -59,18 +59,16 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketComponents', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/component/index.spec.js b/modules/ticket/front/component/index.spec.js
index 4dd361b27d..3547a49058 100644
--- a/modules/ticket/front/component/index.spec.js
+++ b/modules/ticket/front/component/index.spec.js
@@ -75,7 +75,8 @@ describe('ticket', () => {
                 ],
                 quantity: 5
             }];
-            controller = $componentController('vnTicketComponents', {$scope});
+            const $element = angular.element('<vn-ticket-components></vn-ticket-components>');
+            controller = $componentController('vnTicketComponents', {$element, $scope});
         }));
 
         describe('base()', () => {
diff --git a/modules/ticket/front/create/card.js b/modules/ticket/front/create/card.js
index 54cc56c684..01c5da4c9c 100644
--- a/modules/ticket/front/create/card.js
+++ b/modules/ticket/front/create/card.js
@@ -1,20 +1,16 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, vnApp, $translate, $state, $stateParams, vnConfig) {
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-        this.translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.ticket = {};
-        this.$state = $state;
-        this.clientFk = $stateParams.clientFk;
+        this.clientFk = this.$params.clientFk;
     }
 
     $onInit() {
-        if (this.$stateParams && this.$stateParams.clientFk)
-            this.clientId = parseInt(this.$stateParams.clientFk);
+        if (this.$params && this.$params.clientFk)
+            this.clientId = parseInt(this.$params.clientFk);
 
         this.warehouseId = this.vnConfig.warehouseFk;
     }
@@ -124,14 +120,12 @@ class Controller {
             warehouseId: this.ticket.warehouseFk,
         };
         this.$http.post(`Tickets/new`, params).then(res => {
-            this.vnApp.showSuccess(this.translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
             this.$state.go('ticket.card.summary', {id: res.data.id});
         });
     }
 }
 
-Controller.$inject = ['$http', 'vnApp', '$translate', '$state', '$stateParams', 'vnConfig'];
-
 ngModule.component('vnTicketCreateCard', {
     template: require('./card.html'),
     controller: Controller,
diff --git a/modules/ticket/front/create/index.js b/modules/ticket/front/create/index.js
index bb9b4c76e2..c93051d7ad 100644
--- a/modules/ticket/front/create/index.js
+++ b/modules/ticket/front/create/index.js
@@ -1,18 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     async onSubmit() {
         let newTicketID = await this.$.card.createTicket();
         this.$state.go('ticket.card.summary', {id: newTicketID});
     }
 }
-Controller.$inject = ['$scope', '$http', '$state'];
 
 ngModule.component('vnTicketCreate', {
     template: require('./index.html'),
diff --git a/modules/ticket/front/descriptor-popover/index.js b/modules/ticket/front/descriptor-popover/index.js
index 5b94f3c14d..822296c5b5 100644
--- a/modules/ticket/front/descriptor-popover/index.js
+++ b/modules/ticket/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.ticket = null;
         this._quicklinks = {};
     }
@@ -106,7 +103,6 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnTicketDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/ticket/front/descriptor/addStowaway.html b/modules/ticket/front/descriptor/addStowaway.html
index ec7005e797..d15d7185d2 100644
--- a/modules/ticket/front/descriptor/addStowaway.html
+++ b/modules/ticket/front/descriptor/addStowaway.html
@@ -1,5 +1,5 @@
 <vn-crud-model vn-id="model"
-    url="Tickets/{{$ctrl.$stateParams.id}}/getPossibleStowaways"
+    url="Tickets/{{$ctrl.$params.id}}/getPossibleStowaways"
     data="possibleStowaways">
 </vn-crud-model>
 <vn-dialog
diff --git a/modules/ticket/front/descriptor/addStowaway.js b/modules/ticket/front/descriptor/addStowaway.js
index 7a56705764..28286386b9 100644
--- a/modules/ticket/front/descriptor/addStowaway.js
+++ b/modules/ticket/front/descriptor/addStowaway.js
@@ -1,15 +1,8 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $, $http, vnApp, $translate) {
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$ = $;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-    }
-
+class Controller extends Component {
     addStowaway(stowaway) {
         let params = {id: stowaway.id, shipFk: this.ticket.id};
         this.$http.post(`Stowaways/`, params)
@@ -29,8 +22,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnAddStowaway', {
     template: require('./addStowaway.html'),
     controller: Controller,
diff --git a/modules/ticket/front/descriptor/index.js b/modules/ticket/front/descriptor/index.js
index 6ea2d18927..d60e2ce670 100644
--- a/modules/ticket/front/descriptor/index.js
+++ b/modules/ticket/front/descriptor/index.js
@@ -235,8 +235,7 @@ class Controller extends Component {
             clientId: this.ticket.client.id,
             ticketId: this.ticket.id
         };
-        const serializedParams = this.$httpParamSerializer(params);
-        this.$http.get(`email/delivery-note?${serializedParams}`).then(
+        this.$http.get(`email/delivery-note`, {params}).then(
             () => this.vnApp.showMessage(this.$translate.instant('Notification sent!'))
         );
     }
diff --git a/modules/ticket/front/dms/create/index.js b/modules/ticket/front/dms/create/index.js
index f1b59f6c01..e745d98b85 100644
--- a/modules/ticket/front/dms/create/index.js
+++ b/modules/ticket/front/dms/create/index.js
@@ -1,13 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.dms = {
             files: [],
             hasFile: false,
@@ -103,8 +99,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnTicketDmsCreate', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/dms/create/index.spec.js b/modules/ticket/front/dms/create/index.spec.js
index f0d7ad7c51..c6cb1da5a6 100644
--- a/modules/ticket/front/dms/create/index.spec.js
+++ b/modules/ticket/front/dms/create/index.spec.js
@@ -13,7 +13,8 @@ describe('Ticket', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnTicketDmsCreate', {$scope});
+            const $element = angular.element('<vn-ticket-dms-create></vn-ticket-dms-create>');
+            controller = $componentController('vnTicketDmsCreate', {$element});
             controller._ticket = {
                 id: 15,
                 client: {id: 101, name: 'Bruce wayne'},
diff --git a/modules/ticket/front/dms/edit/index.js b/modules/ticket/front/dms/edit/index.js
index 9ff9678169..44e3890f8c 100644
--- a/modules/ticket/front/dms/edit/index.js
+++ b/modules/ticket/front/dms/edit/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Section {
     get ticket() {
         return this._ticket;
     }
@@ -37,7 +29,7 @@ class Controller {
     }
 
     setDefaultParams() {
-        const path = `Dms/${this.$stateParams.dmsId}`;
+        const path = `Dms/${this.$params.dmsId}`;
         this.$http.get(path).then(res => {
             const dms = res.data && res.data;
             this.dms = {
@@ -54,7 +46,7 @@ class Controller {
     }
 
     onSubmit() {
-        const query = `dms/${this.$stateParams.dmsId}/updateFile`;
+        const query = `dms/${this.$params.dmsId}/updateFile`;
         const options = {
             method: 'POST',
             url: query,
@@ -92,8 +84,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketDmsEdit', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/dms/edit/index.spec.js b/modules/ticket/front/dms/edit/index.spec.js
index 757ca24ef6..20224a4b98 100644
--- a/modules/ticket/front/dms/edit/index.spec.js
+++ b/modules/ticket/front/dms/edit/index.spec.js
@@ -5,16 +5,16 @@ describe('Ticket', () => {
         let controller;
         let $scope;
         let $httpBackend;
-        let $state;
 
         beforeEach(ngModule('ticket'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $state = {params: {dmsId: 1}};
-            controller = $componentController('vnTicketDmsEdit', {$scope, $state});
+            const $element = angular.element('<vn-ticket-dms-edit></vn-ticket-dms-edit>');
+            controller = $componentController('vnTicketDmsEdit', {$element});
             controller._ticket = {id: 1, ticketFk: 16};
+            controller.$params = {dmsId: 1};
         }));
 
         describe('ticket() setter', () => {
diff --git a/modules/ticket/front/dms/index/index.html b/modules/ticket/front/dms/index/index.html
index 4e4834510e..3b690cfd39 100644
--- a/modules/ticket/front/dms/index/index.html
+++ b/modules/ticket/front/dms/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="TicketDms"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="$ctrl.ticketDms"
@@ -54,7 +54,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         {{::document.dms.file}}
                     </a>
                 </vn-td>
@@ -68,7 +68,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">
diff --git a/modules/ticket/front/dms/index/index.js b/modules/ticket/front/dms/index/index.js
index c6ceb6b0d7..a37d154262 100644
--- a/modules/ticket/front/dms/index/index.js
+++ b/modules/ticket/front/dms/index/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, $http, $translate, vnToken, vnApp) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'dms',
@@ -71,8 +67,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnToken', 'vnApp'];
-
 ngModule.component('vnTicketDmsIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/dms/index/index.spec.js b/modules/ticket/front/dms/index/index.spec.js
index 8916a5c63d..cd1fd0125a 100644
--- a/modules/ticket/front/dms/index/index.spec.js
+++ b/modules/ticket/front/dms/index/index.spec.js
@@ -3,18 +3,15 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Ticket', () => {
     describe('Component vnTicketDmsIndex', () => {
-        let $componentController;
-        let $scope;
         let $httpBackend;
         let controller;
 
         beforeEach(ngModule('ticket'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            $scope = $rootScope.$new();
-            controller = $componentController('vnTicketDmsIndex', {$: $scope});
+            const $element = angular.element('<vn-ticket-dms-index></vn-ticket-dms-index>');
+            controller = $componentController('vnTicketDmsIndex', {$element});
             controller.$.model = crudModel;
         }));
 
diff --git a/modules/ticket/front/expedition/index.html b/modules/ticket/front/expedition/index.html
index b2e8599706..a90d48670f 100644
--- a/modules/ticket/front/expedition/index.html
+++ b/modules/ticket/front/expedition/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="Expeditions/filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="expeditions"
     order="created DESC"
diff --git a/modules/ticket/front/expedition/index.js b/modules/ticket/front/expedition/index.js
index 5b8a715816..1079e0b21a 100644
--- a/modules/ticket/front/expedition/index.js
+++ b/modules/ticket/front/expedition/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams, $http) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     deleteExpedition(expedition) {
         this.expeditionId = expedition.id;
         this.$.deleteExpedition.show();
@@ -51,8 +46,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$http'];
-
 ngModule.component('vnTicketExpedition', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/expedition/index.spec.js b/modules/ticket/front/expedition/index.spec.js
index 2985f698cf..839108df73 100644
--- a/modules/ticket/front/expedition/index.spec.js
+++ b/modules/ticket/front/expedition/index.spec.js
@@ -4,19 +4,18 @@ describe('Ticket', () => {
     describe('Component vnTicketExpedition', () => {
         let controller;
         let $scope;
-        let $state;
         let $httpBackend;
 
         beforeEach(ngModule('ticket'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_, _$httpBackend_) => {
-            $state = _$state_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
             $scope.model = {
                 refresh: () => {}
             };
-            controller = $componentController('vnTicketExpedition', {$state, $scope});
+            const $element = angular.element('<vn-ticket-expedition></vn-ticket-expedition>');
+            controller = $componentController('vnTicketExpedition', {$element, $scope});
         }));
 
         describe('returnDialog()', () => {
diff --git a/modules/ticket/front/index/index.js b/modules/ticket/front/index/index.js
index e9f522839e..7d61630865 100644
--- a/modules/ticket/front/index/index.js
+++ b/modules/ticket/front/index/index.js
@@ -1,17 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import UserError from 'core/lib/user-error';
 import './style.scss';
 
-export default class Controller {
-    constructor($scope, $state, $stateParams, $translate, $http) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.$stateParams = $stateParams;
-        this.$state = $state;
-        this.selectedTicket = null;
-    }
-
+export default class Controller extends Section {
     openBalanceDialog() {
         const checkedTickets = this.checked;
         const description = [];
@@ -123,8 +115,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$stateParams', '$translate', '$http'];
-
 ngModule.component('vnTicketIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/index/index.spec.js b/modules/ticket/front/index/index.spec.js
index 6b0b42ffde..1cb57926bb 100644
--- a/modules/ticket/front/index/index.spec.js
+++ b/modules/ticket/front/index/index.spec.js
@@ -23,7 +23,8 @@ describe('Component vnTicketIndex', () => {
 
     beforeEach(inject(($componentController, _$window_) => {
         $window = _$window_;
-        controller = $componentController('vnTicketIndex');
+        const $element = angular.element('<vn-ticket-index></vn-ticket-index>');
+        controller = $componentController('vnTicketIndex', {$element});
     }));
 
     describe('compareDate()', () => {
diff --git a/modules/ticket/front/log/index.html b/modules/ticket/front/log/index.html
index 4fe26c871e..91109d3eb8 100644
--- a/modules/ticket/front/log/index.html
+++ b/modules/ticket/front/log/index.html
@@ -1 +1 @@
-<vn-log url="TicketLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="TicketLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/ticket/front/log/index.js b/modules/ticket/front/log/index.js
index 6a486d3d09..df25844819 100644
--- a/modules/ticket/front/log/index.js
+++ b/modules/ticket/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnTicketLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/ticket/front/note/index.html b/modules/ticket/front/note/index.html
index 617cf2f7db..32d93c6301 100644
--- a/modules/ticket/front/note/index.html
+++ b/modules/ticket/front/note/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="TicketObservations"
     fields="['id', 'ticketFk', 'observationTypeFk', 'description']"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="observations"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/ticket/front/note/index.js b/modules/ticket/front/note/index.js
index 4a74b3b98c..3eda4561b4 100644
--- a/modules/ticket/front/note/index.js
+++ b/modules/ticket/front/note/index.js
@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnTicketObservation', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/package/index.html b/modules/ticket/front/package/index.html
index 12ac138621..84d79fce39 100644
--- a/modules/ticket/front/package/index.html
+++ b/modules/ticket/front/package/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="TicketPackagings"
     fields="['id', 'ticketFk', 'packagingFk', 'quantity', 'created']"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="packages"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/ticket/front/package/index.js b/modules/ticket/front/package/index.js
index d73c000c7a..df0b9a5037 100644
--- a/modules/ticket/front/package/index.js
+++ b/modules/ticket/front/package/index.js
@@ -1,31 +1,25 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-
+class Controller extends Section {
     add() {
-        this.$scope.model.insert({
+        this.$.model.insert({
             packagingFk: null,
             quantity: null,
             created: new Date(),
-            ticketFk: this.$stateParams.id
+            ticketFk: this.$params.id
         });
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketPackage', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html
index 67ce5464ef..58e13a451c 100644
--- a/modules/ticket/front/picture/index.html
+++ b/modules/ticket/front/picture/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="sales"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="sales"
diff --git a/modules/ticket/front/picture/index.js b/modules/ticket/front/picture/index.js
index a68e69d520..257a53e6cf 100644
--- a/modules/ticket/front/picture/index.js
+++ b/modules/ticket/front/picture/index.js
@@ -1,10 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams, $http) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'item',
@@ -16,18 +15,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$http'];
-
 ngModule.component('vnTicketPicture', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/request/create/index.js b/modules/ticket/front/request/create/index.js
index fac89be8b3..2d432e637b 100644
--- a/modules/ticket/front/request/create/index.js
+++ b/modules/ticket/front/request/create/index.js
@@ -1,24 +1,22 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($state, $scope) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.ticketRequest = {
-            ticketFk: $state.params.id
+            ticketFk: this.$params.id
         };
     }
 
     onSubmit() {
-        this.$.watcher.submit().then(
-            json => this.$state.go('ticket.card.request.index', {id: this.$state.params.id})
+        this.$.watcher.submit().then(() =>
+            this.$state.go('ticket.card.request.index', {id: this.$params.id})
         );
     }
 }
 
-Controller.$inject = ['$state', '$scope'];
-
 ngModule.component('vnTicketRequestCreate', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/request/index/index.html b/modules/ticket/front/request/index/index.html
index 3953381168..0acb661e3b 100644
--- a/modules/ticket/front/request/index/index.html
+++ b/modules/ticket/front/request/index/index.html
@@ -3,7 +3,7 @@
     url="TicketRequests"
     fields="['id', 'description', 'created', 'requesterFk', 'attenderFk', 'quantity', 'price', 'saleFk', 'isOk']"
     order="created ASC"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     data="purchaseRequests"
     auto-load="true">
diff --git a/modules/ticket/front/request/index/index.js b/modules/ticket/front/request/index/index.js
index e8cb54f22e..c2e6dc1238 100644
--- a/modules/ticket/front/request/index/index.js
+++ b/modules/ticket/front/request/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -50,7 +50,7 @@ class Controller {
                 icon: 'icon-transaction',
                 state: `item.card.diary({
                         id: ${itemFk}, 
-                        ticketFk: ${this.$stateParams.id}
+                        ticketFk: ${this.$params.id}
                     })`,
                 tooltip: 'Item diary'
             }
@@ -94,8 +94,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketRequestIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/request/index/index.spec.js b/modules/ticket/front/request/index/index.spec.js
index 90d71f0626..17f085010c 100644
--- a/modules/ticket/front/request/index/index.spec.js
+++ b/modules/ticket/front/request/index/index.spec.js
@@ -3,14 +3,12 @@ import './index';
 describe('Ticket', () => {
     describe('Component vnTicketRequestIndex', () => {
         let controller;
-        let $scope;
 
         beforeEach(ngModule('ticket'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-            $scope = $rootScope.$new();
-
-            controller = $componentController('vnTicketRequestIndex', {$scope});
+        beforeEach(angular.mock.inject($componentController => {
+            const $element = angular.element('<vn-ticket-request-index></vn-ticket-request-index>');
+            controller = $componentController('vnTicketRequestIndex', {$element});
         }));
 
         describe('getRequestState()', () => {
diff --git a/modules/ticket/front/sale-checked/index.html b/modules/ticket/front/sale-checked/index.html
index c7e060e4e4..a2afd3b8f7 100644
--- a/modules/ticket/front/sale-checked/index.html
+++ b/modules/ticket/front/sale-checked/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="sales"
     filter="::$ctrl.filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="sales"
     order="concept ASC"
diff --git a/modules/ticket/front/sale-checked/index.js b/modules/ticket/front/sale-checked/index.js
index 08157bc9dd..1fd9b662b4 100644
--- a/modules/ticket/front/sale-checked/index.js
+++ b/modules/ticket/front/sale-checked/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [{
                 relation: 'item'
@@ -29,18 +29,16 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketSaleChecked', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale-tracking/index.html b/modules/ticket/front/sale-tracking/index.html
index 0186fb9356..b365ef1ca2 100644
--- a/modules/ticket/front/sale-tracking/index.html
+++ b/modules/ticket/front/sale-tracking/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="SaleTrackings/listSaleTracking"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="sales"
     order="itemFk DESC"
diff --git a/modules/ticket/front/sale-tracking/index.js b/modules/ticket/front/sale-tracking/index.js
index 41ff12a4a8..8dca9c0261 100644
--- a/modules/ticket/front/sale-tracking/index.js
+++ b/modules/ticket/front/sale-tracking/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-    }
-
+class Controller extends Section {
     showItemDescriptor(event, itemFk) {
         this.quicklinks = {
             btnThree: {
@@ -36,8 +32,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketSaleTracking', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale/editDiscount.js b/modules/ticket/front/sale/editDiscount.js
index 6011f77bf1..825f717778 100644
--- a/modules/ticket/front/sale/editDiscount.js
+++ b/modules/ticket/front/sale/editDiscount.js
@@ -1,14 +1,7 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, $http, $state, vnApp, $translate) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-    }
-
+class Controller extends Component {
     set edit(value) {
         this._edit = value;
         this.clearDiscount();
@@ -59,7 +52,7 @@ class Controller {
 
         if (modified) {
             const params = {salesIds: salesIds, newDiscount: this.newDiscount};
-            const query = `Tickets/${this.$state.params.id}/updateDiscount`;
+            const query = `Tickets/${this.$params.id}/updateDiscount`;
             this.$http.post(query, params).then(() => {
                 this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
                 this.clearDiscount();
@@ -79,8 +72,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', 'vnApp', '$translate'];
-
 ngModule.component('vnTicketSaleEditDiscount', {
     template: require('./editDiscount.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale/index.html b/modules/ticket/front/sale/index.html
index b050d3579f..e120ad9426 100644
--- a/modules/ticket/front/sale/index.html
+++ b/modules/ticket/front/sale/index.html
@@ -1,6 +1,6 @@
 <vn-crud-model auto-load="false"
     vn-id="model"
-    url="Tickets/{{$ctrl.$stateParams.id}}/getSales"
+    url="Tickets/{{$ctrl.$params.id}}/getSales"
     data="$ctrl.sales">
 </vn-crud-model>
 <vn-watcher
diff --git a/modules/ticket/front/sale/index.js b/modules/ticket/front/sale/index.js
index c5e947d237..fe19696f3b 100644
--- a/modules/ticket/front/sale/index.js
+++ b/modules/ticket/front/sale/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, $http, vnApp, $translate) {
-        this.$scope = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.edit = {};
         this.moreOptions = [
             {
@@ -73,8 +69,8 @@ class Controller {
     }
 
     loadSubTotal() {
-        if (!this.$stateParams.id || !this.sales) return;
-        this.$http.get(`Tickets/${this.$stateParams.id}/subtotal`).then(res => {
+        if (!this.$params.id || !this.sales) return;
+        this.$http.get(`Tickets/${this.$params.id}/subtotal`).then(res => {
             this.subtotal = res.data || 0.0;
         });
     }
@@ -88,8 +84,8 @@ class Controller {
 
     loadVAT() {
         this.VAT = 0.0;
-        if (!this.$stateParams.id || !this.sales) return;
-        this.$http.get(`Tickets/${this.$stateParams.id}/getVAT`).then(res => {
+        if (!this.$params.id || !this.sales) return;
+        this.$http.get(`Tickets/${this.$params.id}/getVAT`).then(res => {
             this.VAT = res.data || 0.0;
         });
     }
@@ -106,7 +102,7 @@ class Controller {
 
             return (shouldShow && (option.always || this.isChecked));
         });
-        this.$scope.moreButton.data = options;
+        this.$.moreButton.data = options;
     }
 
     onMoreChange(callback) {
@@ -191,7 +187,7 @@ class Controller {
         });
 
         if (this.newInstances().length === 0)
-            this.$scope.watcher.updateOriginalData();
+            this.$.watcher.updateOriginalData();
 
         this.refreshTotal();
     }
@@ -211,7 +207,7 @@ class Controller {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -234,13 +230,13 @@ class Controller {
     }
 
     showRemoveLinesDialog() {
-        this.$scope.deleteLines.show();
+        this.$.deleteLines.show();
     }
 
     showTransferPopover(event) {
         this.setTransferParams();
-        this.$scope.transfer.parent = event.target;
-        this.$scope.transfer.show();
+        this.$.transfer.parent = event.target;
+        this.$.transfer.show();
     }
 
     setTransferParams() {
@@ -264,7 +260,7 @@ class Controller {
             sales: this.transfer.sales
         };
 
-        this.$scope.watcher.updateOriginalData();
+        this.$.watcher.updateOriginalData();
 
         const query = `tickets/${this.ticket.id}/transferSales`;
         this.$http.post(query, params).then(res => {
@@ -281,7 +277,7 @@ class Controller {
         const sales = this.checkedLines();
 
         if (this.newInstances().length === 0)
-            this.$scope.watcher.updateOriginalData();
+            this.$.watcher.updateOriginalData();
 
         this.$http.post(`Claims/createFromSales`, {claim: claim, sales: sales}).then(res => {
             this.$state.go('claim.card.basicData', {id: res.data.id});
@@ -312,13 +308,13 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 
     showEditPricePopover(event, sale) {
@@ -330,8 +326,8 @@ class Controller {
             id: sale.id,
             quantity: sale.quantity
         };
-        this.$scope.editPricePopover.parent = event.target;
-        this.$scope.editPricePopover.show();
+        this.$.editPricePopover.parent = event.target;
+        this.$.editPricePopover.show();
     }
 
     updatePrice() {
@@ -342,11 +338,11 @@ class Controller {
                 this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
             }).finally(() => {
                 if (this.newInstances().length === 0)
-                    this.$scope.watcher.updateOriginalData();
+                    this.$.watcher.updateOriginalData();
             });
         }
 
-        this.$scope.editPricePopover.hide();
+        this.$.editPricePopover.hide();
     }
 
     updateNewPrice() {
@@ -364,23 +360,23 @@ class Controller {
             price: sale.price,
             discount: sale.discount
         }];
-        this.$scope.editPopover.parent = event.target;
-        this.$scope.editPopover.show();
+        this.$.editPopover.parent = event.target;
+        this.$.editPopover.show();
     }
 
     showEditDialog() {
         this.edit = this.checkedLines();
-        this.$scope.editDialog.show();
+        this.$.editDialog.show();
     }
 
     hideEditDialog() {
-        this.$scope.model.refresh();
-        this.$scope.editDialog.hide();
+        this.$.model.refresh();
+        this.$.editDialog.hide();
     }
 
     hideEditPopover() {
-        this.$scope.model.refresh();
-        this.$scope.editPopover.hide();
+        this.$.model.refresh();
+        this.$.editPopover.hide();
     }
 
     /*
@@ -416,7 +412,7 @@ class Controller {
             });
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -449,14 +445,14 @@ class Controller {
             destination: phone,
             message: this.$translate.instant('Product not available', params)
         };
-        this.$scope.sms.open();
+        this.$.sms.open();
     }
 
     /**
      * Inserts a new instance
      */
     add() {
-        this.$scope.model.insert({});
+        this.$.model.insert({});
     }
 
     /*
@@ -481,11 +477,11 @@ class Controller {
         this.$http.post(query, data).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).catch(e => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
             throw e;
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -498,11 +494,11 @@ class Controller {
         this.$http.post(query, data).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).catch(e => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
             throw e;
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -532,7 +528,7 @@ class Controller {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -559,7 +555,7 @@ class Controller {
         const query = `Sales/${sale.id}/recalculatePrice`;
         this.$http.post(query).then(res => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         });
     }
 
@@ -570,8 +566,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnTicketSale', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale/specs/editDiscount.spec.js b/modules/ticket/front/sale/specs/editDiscount.spec.js
index 8937d25c65..8eccfe74f2 100644
--- a/modules/ticket/front/sale/specs/editDiscount.spec.js
+++ b/modules/ticket/front/sale/specs/editDiscount.spec.js
@@ -19,7 +19,8 @@ describe('Ticket', () => {
             }};
             $state = _$state_;
             $state.params.id = 11;
-            controller = $componentController('vnTicketSaleEditDiscount', {$scope, $state});
+            const $element = angular.element('<vn-ticket-sale-edit-discount></vn-ticket-sale-edit-discount>');
+            controller = $componentController('vnTicketSaleEditDiscount', {$element, $scope});
             controller._edit = [{id: 3}];
             controller.onHide = () => {};
         }));
diff --git a/modules/ticket/front/sale/specs/index.spec.js b/modules/ticket/front/sale/specs/index.spec.js
index 3b0f04a82c..1c8fbda534 100644
--- a/modules/ticket/front/sale/specs/index.spec.js
+++ b/modules/ticket/front/sale/specs/index.spec.js
@@ -53,7 +53,8 @@ describe('Ticket', () => {
                     writable: false
                 }
             });
-            controller = $componentController('vnTicketSale', {$scope, $state});
+            const $element = angular.element('<vn-ticket-sale></vn-ticket-sale>');
+            controller = $componentController('vnTicketSale', {$element, $scope});
             controller.card = {reload: () => {}};
             controller.ticket = ticket;
             controller.sales = sales;
@@ -196,12 +197,12 @@ describe('Ticket', () => {
 
         describe('showSMSDialog()', () => {
             it('should open an SMS dialog with specified data', () => {
-                jest.spyOn(controller.$scope.sms, 'open');
+                jest.spyOn(controller.$.sms, 'open');
 
                 controller.sales[0].checked = true;
                 controller.showSMSDialog();
 
-                expect(controller.$scope.sms.open).toHaveBeenCalledWith();
+                expect(controller.$.sms.open).toHaveBeenCalledWith();
                 expect(controller.newSMS.destination).toEqual(111111111);
                 expect(controller.newSMS.message).not.toEqual('');
             });
@@ -242,7 +243,7 @@ describe('Ticket', () => {
 
         describe('updateQuantity()', () => {
             it('should make a POST query saving sale quantity', () => {
-                jest.spyOn(controller.$scope.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
                 const data = {quantity: 10};
                 const sale = sales[0];
                 sale.quantity = 10;
@@ -256,13 +257,13 @@ describe('Ticket', () => {
                 controller.updateQuantity(sale);
                 $httpBackend.flush();
 
-                expect(controller.$scope.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
             });
         });
 
         describe('updateConcept()', () => {
             it('should make a POST query saving sale concept', () => {
-                jest.spyOn(controller.$scope.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
                 const data = {newConcept: 'My new weapon'};
                 const sale = sales[0];
                 sale.concept = 'My new weapon';
@@ -276,13 +277,13 @@ describe('Ticket', () => {
                 controller.updateConcept(sale);
                 $httpBackend.flush();
 
-                expect(controller.$scope.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
             });
         });
 
         describe('addSale()', () => {
             it('should make a POST query adding a new sale', () => {
-                jest.spyOn(controller.$scope.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
                 const newSale = {itemFk: 4, quantity: 10};
                 const params = {itemId: 4, quantity: 10};
 
@@ -307,7 +308,7 @@ describe('Ticket', () => {
                 controller.addSale(newSale);
                 $httpBackend.flush();
 
-                expect(controller.$scope.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
             });
         });
 
diff --git a/modules/ticket/front/services/index.html b/modules/ticket/front/services/index.html
index 0cbcbe5df6..419110eacb 100644
--- a/modules/ticket/front/services/index.html
+++ b/modules/ticket/front/services/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model 
     vn-id="model"
     url="TicketServices"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="$ctrl.services"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/ticket/front/services/index.js b/modules/ticket/front/services/index.js
index fca4cd0700..8627360c6b 100644
--- a/modules/ticket/front/services/index.js
+++ b/modules/ticket/front/services/index.js
@@ -1,18 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import UserError from 'core/lib/user-error';
 
-class Controller {
-    constructor($http, $scope, $stateParams, vnApp, $translate, $element) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$element = $element;
-        this.services = [];
-    }
-
+class Controller extends Section {
     $onInit() {
+        this.services = [];
         this.getDefaultTaxClass();
     }
 
@@ -26,10 +18,10 @@ class Controller {
 
     add() {
         if (this.defaultTaxClass) {
-            this.$scope.model.insert({
+            this.$.model.insert({
                 taxClassFk: this.defaultTaxClass.id,
                 quantity: 1,
-                ticketFk: this.$stateParams.id
+                ticketFk: this.$params.id
             });
         }
     }
@@ -40,7 +32,7 @@ class Controller {
 
     newServiceTypeDialog(elementIndex, event) {
         event.preventDefault();
-        this.$scope.createServiceTypeDialog.show();
+        this.$.createServiceTypeDialog.show();
         this.currentServiceIndex = elementIndex;
     }
 
@@ -56,17 +48,15 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
 
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.model.refresh();
         });
     }
 }
 
-Controller.$inject = ['$http', '$scope', '$stateParams', 'vnApp', '$translate', '$element'];
-
 ngModule.component('vnTicketService', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/sms/index.js b/modules/ticket/front/sms/index.js
index ac11315132..56959e3ee3 100644
--- a/modules/ticket/front/sms/index.js
+++ b/modules/ticket/front/sms/index.js
@@ -3,21 +3,12 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     open() {
-        this.$scope.SMSDialog.show();
+        this.$.SMSDialog.show();
     }
 
     charactersRemaining() {
-        const element = this.$scope.message;
+        const element = this.$.message;
         const value = element.input.value;
 
         const maxLength = 160;
@@ -49,8 +40,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketSms', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sms/index.spec.js b/modules/ticket/front/sms/index.spec.js
index cd397b9fab..45e7765d16 100644
--- a/modules/ticket/front/sms/index.spec.js
+++ b/modules/ticket/front/sms/index.spec.js
@@ -4,17 +4,16 @@ describe('Ticket', () => {
     describe('Component vnTicketSms', () => {
         let controller;
         let $httpBackend;
-        let $element;
 
         beforeEach(ngModule('ticket'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             let $scope = $rootScope.$new();
-            $element = angular.element('<vn-dialog></vn-dialog>');
+            const $element = angular.element('<vn-dialog></vn-dialog>');
             controller = $componentController('vnTicketSms', {$element, $scope});
             controller.$params = {id: 11};
-            controller.$scope.message = {
+            controller.$.message = {
                 input: {
                     value: 'My SMS'
                 }
@@ -58,7 +57,7 @@ describe('Ticket', () => {
 
         describe('charactersRemaining()', () => {
             it('should return the characters remaining in a element', () => {
-                controller.$scope.message = {
+                controller.$.message = {
                     input: {
                         value: 'My message 0€'
                     }
diff --git a/modules/ticket/front/summary/index.js b/modules/ticket/front/summary/index.js
index 0101103408..7e892b265f 100644
--- a/modules/ticket/front/summary/index.js
+++ b/modules/ticket/front/summary/index.js
@@ -1,15 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, $http, vnApp, $translate) {
-        this.$scope = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$http = $http;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     get ticket() {
         return this._ticket;
     }
@@ -46,9 +39,9 @@ class Controller {
                 tooltip: 'Route summary'
             }
         };
-        this.$scope.routeDescriptor.routeFk = this.summary.routeFk;
-        this.$scope.routeDescriptor.parent = event.target;
-        this.$scope.routeDescriptor.show();
+        this.$.routeDescriptor.routeFk = this.summary.routeFk;
+        this.$.routeDescriptor.parent = event.target;
+        this.$.routeDescriptor.show();
     }
 
     showDescriptor(event, itemFk) {
@@ -63,13 +56,13 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 
     get isEditable() {
@@ -83,10 +76,10 @@ class Controller {
     setOkState() {
         let params = {};
 
-        if (this.$state.params.id)
-            params = {ticketFk: this.$state.params.id};
+        if (this.$params.id)
+            params = {ticketFk: this.$params.id};
 
-        if (!this.$state.params.id)
+        if (!this.$params.id)
             params = {ticketFk: this.ticket.id};
 
         params.code = 'OK';
@@ -112,8 +105,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnTicketSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/summary/index.spec.js b/modules/ticket/front/summary/index.spec.js
index 08557e36e5..e1f0e8836e 100644
--- a/modules/ticket/front/summary/index.spec.js
+++ b/modules/ticket/front/summary/index.spec.js
@@ -9,7 +9,8 @@ describe('Ticket', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnTicketSummary');
+            const $element = angular.element('<vn-ticket-summary></vn-ticket-summary>');
+            controller = $componentController('vnTicketSummary', {$element});
             controller.ticket = {id: 1};
         }));
 
diff --git a/modules/ticket/front/tracking/edit/index.js b/modules/ticket/front/tracking/edit/index.js
index 03c5c6c0f9..f2de083898 100644
--- a/modules/ticket/front/tracking/edit/index.js
+++ b/modules/ticket/front/tracking/edit/index.js
@@ -1,16 +1,13 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, vnApp, $translate, $http) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.ticket = {
-            ticketFk: $state.params.id
+            ticketFk: this.$params.id
         };
-        this.params = {ticketFk: $state.params.id};
+        this.params = {ticketFk: this.$params.id};
     }
 
     $onInit() {
@@ -64,7 +61,6 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$scope', '$state', 'vnApp', '$translate', '$http'];
 
 ngModule.component('vnTicketTrackingEdit', {
     template: require('./index.html'),
diff --git a/modules/ticket/front/tracking/edit/index.spec.js b/modules/ticket/front/tracking/edit/index.spec.js
index 313a25b73a..cf80368143 100644
--- a/modules/ticket/front/tracking/edit/index.spec.js
+++ b/modules/ticket/front/tracking/edit/index.spec.js
@@ -9,7 +9,8 @@ describe('Ticket', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $translate, vnApp) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnTicketTrackingEdit');
+            const $element = angular.element('<vn-ticket-tracking-edit></vn-ticket-tracking-edit>');
+            controller = $componentController('vnTicketTrackingEdit', {$element});
             controller.ticket = {id: 1};
             controller.$ = {watcher: {updateOriginalData: () => {}}};
             controller.card = {reload: () => {}};
diff --git a/modules/ticket/front/tracking/index/index.html b/modules/ticket/front/tracking/index/index.html
index 8398a06025..f66c624497 100644
--- a/modules/ticket/front/tracking/index/index.html
+++ b/modules/ticket/front/tracking/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="TicketTrackings"
     filter="::$ctrl.filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="trackings"
     order="created DESC"
diff --git a/modules/ticket/front/tracking/index/index.js b/modules/ticket/front/tracking/index/index.js
index adc1ac5a2d..e58dc4300d 100644
--- a/modules/ticket/front/tracking/index/index.js
+++ b/modules/ticket/front/tracking/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -37,8 +37,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketTrackingIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/volume/index.html b/modules/ticket/front/volume/index.html
index 0006b88540..977f765135 100644
--- a/modules/ticket/front/volume/index.html
+++ b/modules/ticket/front/volume/index.html
@@ -2,15 +2,15 @@
     vn-id="model"
     url="sales"
     filter="::$ctrl.filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="$ctrl.sales"
     limit="20">
 </vn-crud-model>
 <vn-crud-model auto-load="true"
-    url="tickets/{{$ctrl.$stateParams.id}}/getVolume"
+    url="tickets/{{$ctrl.$params.id}}/getVolume"
     data="$ctrl.volumes">
 </vn-crud-model>
-<mg-ajax path="tickets/{{$ctrl.$stateParams.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
+<mg-ajax path="tickets/{{$ctrl.$params.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
 <vn-vertical>
     <vn-card class="vn-pa-lg">
         <vn-horizontal>
diff --git a/modules/ticket/front/volume/index.js b/modules/ticket/front/volume/index.js
index 914c9819d7..bf616cb242 100644
--- a/modules/ticket/front/volume/index.js
+++ b/modules/ticket/front/volume/index.js
@@ -1,10 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [{
                 relation: 'item'
@@ -34,7 +33,6 @@ class Controller {
         if (value) this.applyVolumes();
     }
 
-
     applyVolumes() {
         if (!this.sales || !this.volumes) return;
 
@@ -58,18 +56,16 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnTicketVolume', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/volume/index.spec.js b/modules/ticket/front/volume/index.spec.js
index 6c2a808eb4..2f6efee212 100644
--- a/modules/ticket/front/volume/index.spec.js
+++ b/modules/ticket/front/volume/index.spec.js
@@ -19,7 +19,8 @@ describe('ticket', () => {
             }};
             $state = _$state_;
             $state.params.id = 101;
-            controller = $componentController('vnTicketVolume', {$scope, $httpBackend, $state});
+            const $element = angular.element('<vn-ticket-volume></vn-ticket-volume>');
+            controller = $componentController('vnTicketVolume', {$element, $scope});
         }));
 
         describe('sales() setter', () => {
diff --git a/modules/ticket/front/weekly/index.js b/modules/ticket/front/weekly/index.js
index f15576e9f7..edc68aadb9 100644
--- a/modules/ticket/front/weekly/index.js
+++ b/modules/ticket/front/weekly/index.js
@@ -1,14 +1,11 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, vnApp, $translate, $http) {
-        this.$ = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$http = $http;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
 
         this.ticketSelected = null;
-
         this.weekdays = [
             {id: 0, name: 'Monday'},
             {id: 1, name: 'Tuesday'},
@@ -77,8 +74,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', 'vnApp', '$translate', '$http'];
-
 ngModule.component('vnTicketWeeklyIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/travel/back/models/travel.json b/modules/travel/back/models/travel.json
index 0eafe40102..aebf4e3cd9 100644
--- a/modules/travel/back/models/travel.json
+++ b/modules/travel/back/models/travel.json
@@ -7,7 +7,7 @@
 	},
     "options": {
         "mysql": {
-        "table": "travel"
+            "table": "travel"
         }
     },
     "properties": {
diff --git a/modules/travel/front/basic-data/index.js b/modules/travel/front/basic-data/index.js
index 7406598b04..139ef46e87 100644
--- a/modules/travel/front/basic-data/index.js
+++ b/modules/travel/front/basic-data/index.js
@@ -1,17 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        return this.$.watcher.submit().then(() => {
-            this.card.reload();
-        });
+        return this.$.watcher.submit().then(() =>
+            this.card.reload()
+        );
     }
 }
-Controller.$inject = ['$scope'];
 
 ngModule.component('vnTravelBasicData', {
     template: require('./index.html'),
diff --git a/modules/travel/front/basic-data/index.spec.js b/modules/travel/front/basic-data/index.spec.js
index ed874d7e82..aaad487efb 100644
--- a/modules/travel/front/basic-data/index.spec.js
+++ b/modules/travel/front/basic-data/index.spec.js
@@ -2,14 +2,14 @@ import './index.js';
 
 describe('Travel Component vnTravelBasicData', () => {
     let controller;
-    let $scope;
+
     beforeEach(angular.mock.module('travel', $translateProvider => {
         $translateProvider.translations('en', {});
     }));
 
-    beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-        $scope = $rootScope.$new();
-        controller = $componentController('vnTravelBasicData', $scope);
+    beforeEach(angular.mock.inject($componentController => {
+        const $element = angular.element('<vn-travel-basic-data></vn-travel-basic-data>');
+        controller = $componentController('vnTravelBasicData', {$element});
         controller.card = {reload: () => {}};
         controller.$.watcher = {submit: () => {}};
     }));
diff --git a/modules/travel/front/create/index.js b/modules/travel/front/create/index.js
index 0d5a2cc018..286d508dec 100644
--- a/modules/travel/front/create/index.js
+++ b/modules/travel/front/create/index.js
@@ -2,14 +2,9 @@ import ngModule from '../module';
 import Section from 'salix/components/section';
 
 class Controller extends Section {
-    constructor($element, $, $stateParams) {
-        super($element, $);
-        this.$stateParams = $stateParams;
-    }
-
     $onChanges() {
-        if (this.$stateParams && this.$stateParams.q)
-            this.travel = JSON.parse(this.$stateParams.q);
+        if (this.$params && this.$params.q)
+            this.travel = JSON.parse(this.$params.q);
     }
 
     onSubmit() {
@@ -19,8 +14,6 @@ class Controller extends Section {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$stateParams'];
-
 ngModule.component('vnTravelCreate', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/travel/front/create/index.spec.js b/modules/travel/front/create/index.spec.js
index a6fa5a9b18..e47f30bd36 100644
--- a/modules/travel/front/create/index.spec.js
+++ b/modules/travel/front/create/index.spec.js
@@ -2,7 +2,6 @@ import './index';
 import watcher from 'core/mocks/watcher';
 
 describe('Travel Component vnTravelCreate', () => {
-    let $element;
     let $scope;
     let $state;
     let controller;
@@ -13,7 +12,7 @@ describe('Travel Component vnTravelCreate', () => {
         $scope = $rootScope.$new();
         $state = _$state_;
         $scope.watcher = watcher;
-        $element = angular.element('<div></div>');
+        const $element = angular.element('<vn-travel-create></vn-travel-create>');
         controller = $componentController('vnTravelCreate', {$element, $scope});
     }));
 
@@ -28,8 +27,8 @@ describe('Travel Component vnTravelCreate', () => {
     });
 
     describe('$onChanges()', () => {
-        it('should update the travel data when stateParams.q is defined', () => {
-            controller.$stateParams = {q: '{"ref": 1,"agencyModeFk": 1}'};
+        it('should update the travel data when $params.q is defined', () => {
+            controller.$params = {q: '{"ref": 1,"agencyModeFk": 1}'};
 
             const params = {q: '{"ref": 1, "agencyModeFk": 1}'};
             const json = JSON.parse(params.q);
diff --git a/modules/travel/front/descriptor-popover/index.js b/modules/travel/front/descriptor-popover/index.js
index cb13d7f068..cb7e29bdac 100644
--- a/modules/travel/front/descriptor-popover/index.js
+++ b/modules/travel/front/descriptor-popover/index.js
@@ -2,11 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.travel = null;
         this._quicklinks = {};
     }
@@ -76,7 +73,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnTravelDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/travel/front/descriptor/index.js b/modules/travel/front/descriptor/index.js
index 187a7ed8f7..911cae0102 100644
--- a/modules/travel/front/descriptor/index.js
+++ b/modules/travel/front/descriptor/index.js
@@ -1,20 +1,13 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-}
-
-Controller.$inject = ['$scope'];
+import Component from 'core/lib/component';
 
 ngModule.component('vnTravelDescriptor', {
     template: require('./index.html'),
+    controller: Component,
     bindings: {
         travel: '<'
     },
     require: {
         card: '^?vnTravelCard'
     },
-    controller: Controller
 });
diff --git a/modules/travel/front/index/index.spec.js b/modules/travel/front/index/index.spec.js
index e49100d679..4b018dea66 100644
--- a/modules/travel/front/index/index.spec.js
+++ b/modules/travel/front/index/index.spec.js
@@ -11,10 +11,9 @@ describe('Travel Component vnTravelIndex', () => {
 
     beforeEach(ngModule('travel'));
 
-    beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-        let $scope = $rootScope.$new();
-        let $element = angular.element('<div></div>');
-        controller = $componentController('vnTravelIndex', {$element, $scope});
+    beforeEach(angular.mock.inject($componentController => {
+        const $element = angular.element('<vn-travel-index></vn-travel-index>');
+        controller = $componentController('vnTravelIndex', {$element});
         controller.$.summary = {show: jasmine.createSpy('show')};
     }));
 
diff --git a/modules/travel/front/log/index.html b/modules/travel/front/log/index.html
index 8b442f671d..fc4622e5a5 100644
--- a/modules/travel/front/log/index.html
+++ b/modules/travel/front/log/index.html
@@ -1 +1 @@
-<vn-log url="TravelLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="TravelLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/travel/front/log/index.js b/modules/travel/front/log/index.js
index a9a07aaf6f..742488058c 100644
--- a/modules/travel/front/log/index.js
+++ b/modules/travel/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnTravelLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/travel/front/summary/index.js b/modules/travel/front/summary/index.js
index 8ee2da49d2..af940aa6cc 100644
--- a/modules/travel/front/summary/index.js
+++ b/modules/travel/front/summary/index.js
@@ -1,12 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-import Component from 'core/lib/component';
 
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
+class Controller extends Section {
+    $onInit() {
         this.entries = [];
-        this.$httpParamSerializer = $httpParamSerializer;
     }
 
     get travel() {
@@ -50,8 +48,7 @@ class Controller extends Component {
             }
         };
 
-        const serializedParams = this.$httpParamSerializer(params);
-        return this.$http.get(`TravelThermographs?${serializedParams}`).then(res => {
+        return this.$http.get(`TravelThermographs`, {params}).then(res => {
             this.travelThermographs = res.data;
         });
     }
@@ -66,8 +63,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnTravelSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/travel/front/summary/index.spec.js b/modules/travel/front/summary/index.spec.js
index 9b041f22b9..7f5c68aec5 100644
--- a/modules/travel/front/summary/index.spec.js
+++ b/modules/travel/front/summary/index.spec.js
@@ -4,7 +4,6 @@ describe('component vnTravelSummary', () => {
     let controller;
     let $httpBackend;
     let $scope;
-    let $element;
     let $httpParamSerializer;
 
     beforeEach(angular.mock.module('travel', $translateProvider => {
@@ -15,7 +14,7 @@ describe('component vnTravelSummary', () => {
         $httpBackend = _$httpBackend_;
         $httpParamSerializer = _$httpParamSerializer_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-travel-summary></vn-travel-summary>`);
+        const $element = angular.element(`<vn-travel-summary></vn-travel-summary>`);
         controller = $componentController('vnTravelSummary', {$element, $scope});
     }));
 
diff --git a/modules/travel/front/thermograph/create/index.js b/modules/travel/front/thermograph/create/index.js
index b35313fc87..6c04649911 100644
--- a/modules/travel/front/thermograph/create/index.js
+++ b/modules/travel/front/thermograph/create/index.js
@@ -1,13 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.dms = {files: [], state: 'Ok'};
     }
 
@@ -86,8 +82,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnTravelThermographCreate', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/travel/front/thermograph/create/index.spec.js b/modules/travel/front/thermograph/create/index.spec.js
index 625f5bb205..58fbe3991f 100644
--- a/modules/travel/front/thermograph/create/index.spec.js
+++ b/modules/travel/front/thermograph/create/index.spec.js
@@ -3,7 +3,6 @@ import './index';
 describe('Ticket', () => {
     describe('Component vnTravelThermographCreate', () => {
         let controller;
-        let $scope;
         let $httpBackend;
         let $httpParamSerializer;
         const travelId = 3;
@@ -11,11 +10,11 @@ describe('Ticket', () => {
 
         beforeEach(ngModule('travel'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
-            $scope = $rootScope.$new();
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _$httpParamSerializer_) => {
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnTravelThermographCreate', {$scope});
+            const $element = angular.element('<vn-travel-thermograph-create></vn-travel-thermograph-create>');
+            controller = $componentController('vnTravelThermographCreate', {$element});
             controller._travel = {
                 id: travelId
             };
diff --git a/modules/travel/front/thermograph/edit/index.js b/modules/travel/front/thermograph/edit/index.js
index 0180983127..90e0cc7b10 100644
--- a/modules/travel/front/thermograph/edit/index.js
+++ b/modules/travel/front/thermograph/edit/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
     get travel() {
         return this._travel;
     }
diff --git a/modules/travel/front/thermograph/edit/index.spec.js b/modules/travel/front/thermograph/edit/index.spec.js
index eac92ba0fa..1808271341 100644
--- a/modules/travel/front/thermograph/edit/index.spec.js
+++ b/modules/travel/front/thermograph/edit/index.spec.js
@@ -5,7 +5,6 @@ describe('Worker', () => {
     describe('Component vnTravelThermographEdit', () => {
         let controller;
         let $scope;
-        let $element;
         let $httpBackend;
         let $httpParamSerializer;
 
@@ -15,7 +14,7 @@ describe('Worker', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            $element = angular.element(`<vn-travel-thermograph-edit></vn-travel-thermograph-edit`);
+            const $element = angular.element(`<vn-travel-thermograph-edit></vn-travel-thermograph-edit`);
             controller = $componentController('vnTravelThermographEdit', {$element, $scope});
             controller._travel = {id: 3};
             controller.$params = {id: 3, thermographId: 6};
diff --git a/modules/travel/front/thermograph/index/index.html b/modules/travel/front/thermograph/index/index.html
index 583b40eed0..dae88d2a71 100644
--- a/modules/travel/front/thermograph/index/index.html
+++ b/modules/travel/front/thermograph/index/index.html
@@ -30,7 +30,7 @@
                         <vn-td>{{::thermograph.created | date: 'dd/MM/yyyy'}}</vn-td>
                         <vn-td shrink>
                             <a target="_blank"
-                                href="api/dms/{{::thermograph.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                                href="api/dms/{{::thermograph.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                                 <vn-icon-button
                                     icon="cloud_download"
                                     title="{{'Download file' | translate}}">
diff --git a/modules/travel/front/thermograph/index/index.js b/modules/travel/front/thermograph/index/index.js
index 48487eb7c5..40cae39175 100644
--- a/modules/travel/front/thermograph/index/index.js
+++ b/modules/travel/front/thermograph/index/index.js
@@ -1,11 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
-import Component from 'core/lib/component';
 
-class Controller extends Component {
-    constructor($element, $, vnToken) {
-        super($element, $);
-        this.accessToken = vnToken.token;
+class Controller extends Section {
+    $onInit() {
         this.filter = {
             include:
                 {relation: 'warehouse',
@@ -33,8 +31,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', 'vnToken'];
-
 ngModule.component('vnTravelThermographIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/back/model-config.json b/modules/worker/back/model-config.json
index 884759bc95..e91e8b0fc3 100644
--- a/modules/worker/back/model-config.json
+++ b/modules/worker/back/model-config.json
@@ -52,5 +52,11 @@
     },
     "Device": {
         "dataSource": "vn"
+    },
+    "WorkerLog": {
+        "dataSource": "vn"
     }
 }
+
+
+
diff --git a/modules/worker/back/models/worker-log.json b/modules/worker/back/models/worker-log.json
new file mode 100644
index 0000000000..f100f34868
--- /dev/null
+++ b/modules/worker/back/models/worker-log.json
@@ -0,0 +1,58 @@
+{
+	"name": "WorkerLog",
+	"base": "VnModel",
+	"options": {
+		"mysql": {
+			"table": "workerLog"
+		}
+	},
+	"properties": {
+		"id": {
+			"id": true,
+			"type": "Number",
+			"forceId": false
+		},
+		"originFk": {
+			"type": "Number",
+			"required": true
+		},
+		"userFk": {
+			"type": "Number"
+		},
+		"action": {
+			"type": "String",
+			"required": true
+		},
+		"changedModel": {
+			"type": "String"
+		},
+		"oldInstance": {
+			"type": "Object"
+		},
+		"newInstance": {
+			"type": "Object"
+		},
+		"creationDate": {
+			"type": "Date"
+		},
+		"changedModelId": {
+			"type": "String"
+		},
+		"changedModelValue": {
+			"type": "String"
+		},
+		"description": {
+			"type": "String"
+		}
+	},
+	"relations": {
+		"user": {
+			"type": "belongsTo",
+			"model": "Account",
+			"foreignKey": "userFk"
+		}  
+	},
+	"scope": {
+		"order": ["creationDate DESC", "id DESC"]
+	}
+}
diff --git a/modules/worker/back/models/worker.json b/modules/worker/back/models/worker.json
index 7456a3caad..6af7e86084 100644
--- a/modules/worker/back/models/worker.json
+++ b/modules/worker/back/models/worker.json
@@ -1,7 +1,11 @@
 {
     "name": "Worker",
     "description": "Company employees",
-    "base": "VnModel",
+    "base": "Loggable",
+    "log": {
+        "model":"WorkerLog",
+        "showField": "firstName"
+	},
     "options": {
         "mysql": {
             "table": "worker"
diff --git a/modules/worker/front/basic-data/index.html b/modules/worker/front/basic-data/index.html
index 67439b350e..bdc309c002 100644
--- a/modules/worker/front/basic-data/index.html
+++ b/modules/worker/front/basic-data/index.html
@@ -1,10 +1,9 @@
+<mg-ajax path="Workers/{{patch.params.id}}" options="vnPatch"></mg-ajax>
 <vn-watcher
     vn-id="watcher"
     data="$ctrl.worker"
     form="form"
-    id-field="id"
-    url="Workers"
-    save="post">
+    save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
     <vn-card class="vn-pa-lg">
diff --git a/modules/worker/front/basic-data/index.js b/modules/worker/front/basic-data/index.js
index 28107dc12e..ebeb4716b1 100644
--- a/modules/worker/front/basic-data/index.js
+++ b/modules/worker/front/basic-data/index.js
@@ -1,16 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($) {
-        Object.assign(this, {$});
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$.watcher.submit()
+        return this.$.watcher.submit()
             .then(() => this.card.reload());
     }
 }
-Controller.$inject = ['$scope'];
 
 ngModule.component('vnWorkerBasicData', {
     template: require('./index.html'),
diff --git a/modules/worker/front/calendar/index.js b/modules/worker/front/calendar/index.js
index 1860f6bdd6..6b849d19f1 100644
--- a/modules/worker/front/calendar/index.js
+++ b/modules/worker/front/calendar/index.js
@@ -1,10 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($element, $http) {
-        this.element = $element[0];
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.date = new Date();
         this.events = {};
     }
@@ -103,7 +103,6 @@ class Controller {
         dayNumber.style.color = 'rgba(0, 0, 0, 0.7)';
     }
 }
-Controller.$inject = ['$element', '$http'];
 
 ngModule.component('vnWorkerCalendar', {
     template: require('./index.html'),
diff --git a/modules/worker/front/calendar/index.spec.js b/modules/worker/front/calendar/index.spec.js
index 2f85e3a1a9..da49b8f0f8 100644
--- a/modules/worker/front/calendar/index.spec.js
+++ b/modules/worker/front/calendar/index.spec.js
@@ -4,7 +4,6 @@ describe('Worker', () => {
     describe('Component vnWorkerCalendar', () => {
         let $httpBackend;
         let $scope;
-        let $element;
         let controller;
         let year = new Date().getFullYear();
 
@@ -13,15 +12,10 @@ describe('Worker', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $element = angular.element('<div></div>');
+            const $element = angular.element('<vn-worker-calencar></vn-worker-calencar>');
             controller = $componentController('vnWorkerCalendar', {$element, $scope});
         }));
 
-        afterEach(() => {
-            $element.remove();
-            $scope.$destroy();
-        });
-
         describe('started property', () => {
             it(`should return first day and month of current year`, () => {
                 let started = new Date(year, 0, 1);
diff --git a/modules/worker/front/department/index.js b/modules/worker/front/department/index.js
index 28c2cfa99b..35dc650f62 100644
--- a/modules/worker/front/department/index.js
+++ b/modules/worker/front/department/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, vnApp, $translate) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     $postLink() {
         this.$.treeview.fetch();
     }
@@ -87,8 +81,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnWorkerDepartment', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/worker/front/descriptor-popover/index.js b/modules/worker/front/descriptor-popover/index.js
index 55843a67da..6463853f91 100644
--- a/modules/worker/front/descriptor-popover/index.js
+++ b/modules/worker/front/descriptor-popover/index.js
@@ -2,11 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.worker = null;
         this._quicklinks = {};
     }
@@ -84,7 +81,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnWorkerDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/worker/front/descriptor-popover/index.spec.js b/modules/worker/front/descriptor-popover/index.spec.js
index dc524bc2de..0b2746475d 100644
--- a/modules/worker/front/descriptor-popover/index.spec.js
+++ b/modules/worker/front/descriptor-popover/index.spec.js
@@ -5,17 +5,16 @@ describe('worker Component vnWorkerDescriptorPopover', () => {
     let $httpParamSerializer;
     let $scope;
     let controller;
-    let $element;
 
     beforeEach(ngModule('worker'));
 
     beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
         $httpBackend = _$httpBackend_;
         $httpParamSerializer = _$httpParamSerializer_;
-        $element = angular.element(`<div></div>`);
         $scope = $rootScope.$new();
         $scope.popover = {relocate: () => {}, show: () => {}};
-        controller = $componentController('vnWorkerDescriptorPopover', {$scope, $element});
+        const $element = angular.element(`<vn-worker-descriptor-popover></vn-worker-descriptor-popover>`);
+        controller = $componentController('vnWorkerDescriptorPopover', {$element, $scope});
     }));
 
     describe('workerFk()', () => {
diff --git a/modules/worker/front/descriptor/index.js b/modules/worker/front/descriptor/index.js
index 6dab069580..82cfd0886a 100644
--- a/modules/worker/front/descriptor/index.js
+++ b/modules/worker/front/descriptor/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, $state) {
-        this.$state = $state;
-        this.$http = $http;
-    }
-
+class Controller extends Component {
     get worker() {
         return this._worker;
     }
@@ -33,9 +29,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$state'];
-
-
 ngModule.component('vnWorkerDescriptor', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/dms/create/index.js b/modules/worker/front/dms/create/index.js
index e7bfe7bfdc..388b9a3332 100644
--- a/modules/worker/front/dms/create/index.js
+++ b/modules/worker/front/dms/create/index.js
@@ -1,11 +1,10 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
-    constructor($element, $, vnConfig) {
+class Controller extends Section {
+    constructor($element, $) {
         super($element, $);
-        this.vnConfig = vnConfig;
         this.dms = {
             files: [],
             hasFile: false,
diff --git a/modules/worker/front/dms/edit/index.js b/modules/worker/front/dms/edit/index.js
index 1a593414ae..ac0104fa18 100644
--- a/modules/worker/front/dms/edit/index.js
+++ b/modules/worker/front/dms/edit/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
     get worker() {
         return this._worker;
     }
diff --git a/modules/worker/front/dms/index/index.html b/modules/worker/front/dms/index/index.html
index 697d3d5aa1..011d95a952 100644
--- a/modules/worker/front/dms/index/index.html
+++ b/modules/worker/front/dms/index/index.html
@@ -41,7 +41,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">{{::document.dms.file}}
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">{{::document.dms.file}}
                     </a>
                 </vn-td>
                 <vn-td>
@@ -49,7 +49,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">
diff --git a/modules/worker/front/dms/index/index.js b/modules/worker/front/dms/index/index.js
index ab3be34080..d322145a0b 100644
--- a/modules/worker/front/dms/index/index.js
+++ b/modules/worker/front/dms/index/index.js
@@ -3,9 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $, vnToken) {
+    constructor($element, $) {
         super($element, $);
-        this.accessToken = vnToken.token;
         this.filter = {
             include: {
                 relation: 'dms',
@@ -68,8 +67,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', 'vnToken'];
-
 ngModule.component('vnWorkerDmsIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/dms/index/index.spec.js b/modules/worker/front/dms/index/index.spec.js
index 7378ef3010..074f11524b 100644
--- a/modules/worker/front/dms/index/index.spec.js
+++ b/modules/worker/front/dms/index/index.spec.js
@@ -3,7 +3,6 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Worker', () => {
     describe('Component vnWorkerDmsIndex', () => {
-        let $componentController;
         let $scope;
         let $element;
         let $httpBackend;
@@ -11,8 +10,7 @@ describe('Worker', () => {
 
         beforeEach(ngModule('worker'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
             $element = angular.element(`<vn-worker-dms-index></vn-worker-dms-index`);
diff --git a/modules/worker/front/index.js b/modules/worker/front/index.js
index f703e7c213..00b4bdaa85 100644
--- a/modules/worker/front/index.js
+++ b/modules/worker/front/index.js
@@ -13,6 +13,7 @@ import './department';
 import './calendar';
 import './time-control';
 import './log';
+import './worker-log';
 import './dms/index';
 import './dms/create';
 import './dms/edit';
diff --git a/modules/worker/front/index/index.js b/modules/worker/front/index/index.js
index 1b585f0133..02632e095a 100644
--- a/modules/worker/front/index/index.js
+++ b/modules/worker/front/index/index.js
@@ -1,14 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($, $state) {
-        this.$state = $state;
-        Object.assign(this, {
-            $,
-            selectedWorker: null,
-        });
-    }
-
+export default class Controller extends Section {
     preview(event, worker) {
         if (event.defaultPrevented) return;
 
@@ -31,7 +24,6 @@ export default class Controller {
         callback.call(this);
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnWorkerIndex', {
     template: require('./index.html'),
diff --git a/modules/worker/front/locale/es.yml b/modules/worker/front/locale/es.yml
index 172844aa33..c3a4933695 100644
--- a/modules/worker/front/locale/es.yml
+++ b/modules/worker/front/locale/es.yml
@@ -7,6 +7,7 @@ Extension: Extensión
 Fiscal identifier: NIF
 Go to client: Ir al cliente
 Last name: Apellidos
+Log: Historial
 Private Branch Exchange: Centralita
 Role: Rol
 Search workers by id, firstName, lastName or user name: Buscar trabajadores por el identificador, nombre, apellidos o nombre de usuario
diff --git a/modules/worker/front/log/index.js b/modules/worker/front/log/index.js
index 4a577658ba..5e42687d3b 100644
--- a/modules/worker/front/log/index.js
+++ b/modules/worker/front/log/index.js
@@ -1,9 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-export default class Controller {
-    constructor($scope) {
-        this.$ = $scope;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.actionsText = {
             'insert': 'Creates',
             'update': 'Updates',
@@ -70,8 +71,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnLog', {
     controller: Controller,
     template: require('./index.html'),
diff --git a/modules/worker/front/pbx/index.js b/modules/worker/front/pbx/index.js
index aa869b8950..a62280d9b9 100644
--- a/modules/worker/front/pbx/index.js
+++ b/modules/worker/front/pbx/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-class Controller extends Component {
+class Controller extends Section {
     onSubmit() {
         const sip = this.worker.sip;
         const params = {
diff --git a/modules/worker/front/routes.json b/modules/worker/front/routes.json
index d7eded94b6..9aa214c5ce 100644
--- a/modules/worker/front/routes.json
+++ b/modules/worker/front/routes.json
@@ -13,7 +13,8 @@
             {"state": "worker.card.pbx", "icon": "icon-pbx"},
             {"state": "worker.card.calendar", "icon": "icon-calendar"},
             {"state": "worker.card.timeControl", "icon": "access_time"},
-            {"state": "worker.card.dms.index", "icon": "cloud_upload"}
+            {"state": "worker.card.dms.index", "icon": "cloud_upload"},
+            {"state": "worker.card.workerLog", "icon": "history"}
         ]
     },
     "routes": [
@@ -51,6 +52,11 @@
                 "worker": "$ctrl.worker"
             },
             "acl": ["hr"]
+        }, {
+            "url" : "/log",
+            "state": "worker.card.workerLog",
+            "component": "vn-worker-log",
+            "description": "Log"
         }, {
             "url": "/pbx",
             "state": "worker.card.pbx",
diff --git a/modules/worker/front/summary/index.js b/modules/worker/front/summary/index.js
index a3fbb34f52..f6ee85a5b6 100644
--- a/modules/worker/front/summary/index.js
+++ b/modules/worker/front/summary/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($, $http) {
-        Object.assign(this, {
-            $,
-            $http
-        });
-    }
-
+class Controller extends Section {
     get worker() {
         return this._worker;
     }
@@ -60,8 +54,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http'];
-
 ngModule.component('vnWorkerSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/time-control/index.js b/modules/worker/front/time-control/index.js
index 13829e0c57..14aeb541f4 100644
--- a/modules/worker/front/time-control/index.js
+++ b/modules/worker/front/time-control/index.js
@@ -1,7 +1,8 @@
-import Component from 'core/lib/component';
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-class Controller extends Component {
+
+class Controller extends Section {
     constructor($element, $, vnWeekDays) {
         super($element, $);
         this.weekDays = [];
diff --git a/modules/worker/front/worker-log/index.html b/modules/worker/front/worker-log/index.html
new file mode 100644
index 0000000000..090dbf2e3d
--- /dev/null
+++ b/modules/worker/front/worker-log/index.html
@@ -0,0 +1 @@
+<vn-log url="WorkerLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/worker/front/worker-log/index.js b/modules/worker/front/worker-log/index.js
new file mode 100644
index 0000000000..1f1a4f2f8b
--- /dev/null
+++ b/modules/worker/front/worker-log/index.js
@@ -0,0 +1,7 @@
+import ngModule from '../module';
+import Section from 'salix/components/section';
+
+ngModule.component('vnWorkerLog', {
+    template: require('./index.html'),
+    controller: Section,
+});
diff --git a/modules/zone/front/basic-data/index.js b/modules/zone/front/basic-data/index.js
index a730ed362d..40e5b49dc1 100644
--- a/modules/zone/front/basic-data/index.js
+++ b/modules/zone/front/basic-data/index.js
@@ -1,20 +1,14 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.submit().then(() => {
-            this.card.reload();
-        });
+        this.$.watcher.submit().then(() =>
+            this.card.reload()
+        );
     }
 }
 
-Controller.$inject = ['$scope', '$state'];
-
 ngModule.component('vnZoneBasicData', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/zone/front/create/index.js b/modules/zone/front/create/index.js
index 98d377d0f0..c0bce4f08a 100644
--- a/modules/zone/front/create/index.js
+++ b/modules/zone/front/create/index.js
@@ -1,9 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
+export default class Controller extends Section {
+    $onInit() {
         this.zone = {
             travelingDays: 0,
             price: 0.20,
@@ -13,12 +12,11 @@ export default class Controller {
     }
 
     onSubmit() {
-        return this.$scope.watcher.submit().then(res => {
-            this.$state.go('zone.card.location', {id: res.data.id});
-        });
+        return this.$.watcher.submit().then(res =>
+            this.$state.go('zone.card.location', {id: res.data.id})
+        );
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnZoneCreate', {
     template: require('./index.html'),
diff --git a/modules/zone/front/create/index.spec.js b/modules/zone/front/create/index.spec.js
index c2956b6cfa..79fe00ed89 100644
--- a/modules/zone/front/create/index.spec.js
+++ b/modules/zone/front/create/index.spec.js
@@ -19,7 +19,8 @@ describe('Zone Component vnZoneCreate', () => {
                 }
             };
         };
-        controller = $componentController('vnZoneCreate', {$scope});
+        const $element = angular.element('<vn-zone-create></vn-zone-create>');
+        controller = $componentController('vnZoneCreate', {$element, $scope});
     }));
 
     describe('onSubmit()', () => {
diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js
index 71021223d6..3c691e23b3 100644
--- a/modules/zone/front/delivery-days/index.spec.js
+++ b/modules/zone/front/delivery-days/index.spec.js
@@ -3,15 +3,13 @@ import popover from 'core/mocks/popover';
 import crudModel from 'core/mocks/crud-model';
 
 describe('Zone Component vnZoneDeliveryDays', () => {
-    let $componentController;
     let $httpBackend;
     let controller;
     let $element;
 
     beforeEach(ngModule('zone'));
 
-    beforeEach(angular.mock.inject((_$componentController_, _$httpBackend_) => {
-        $componentController = _$componentController_;
+    beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
         $httpBackend = _$httpBackend_;
         $element = angular.element('<vn-zone-delivery-days></vn-zone-delivery-days');
         controller = $componentController('vnZoneDeliveryDays', {$element});
diff --git a/modules/zone/front/descriptor/index.js b/modules/zone/front/descriptor/index.js
index 736d8dd314..b3808f2569 100644
--- a/modules/zone/front/descriptor/index.js
+++ b/modules/zone/front/descriptor/index.js
@@ -1,10 +1,8 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, $state, $http) {
-        this.$scope = $scope;
-        this.$state = $state;
-        this.$http = $http;
+class Controller extends Component {
+    $onInit() {
         this.moreOptions = [
             {callback: this.deleteZone, name: 'Delete'}
         ];
@@ -15,7 +13,7 @@ class Controller {
     }
 
     deleteZone() {
-        this.$scope.deleteZone.show();
+        this.$.deleteZone.show();
     }
 
     returnDialog(response) {
@@ -27,8 +25,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http'];
-
 ngModule.component('vnZoneDescriptor', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/zone/front/location/index.js b/modules/zone/front/location/index.js
index 9fcd055b39..c30ded3ad8 100644
--- a/modules/zone/front/location/index.js
+++ b/modules/zone/front/location/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
     $postLink() {
         this.onSearch();
     }
diff --git a/modules/zone/front/main/index.spec.js b/modules/zone/front/main/index.spec.js
index d8d283ad10..24b63a9590 100644
--- a/modules/zone/front/main/index.spec.js
+++ b/modules/zone/front/main/index.spec.js
@@ -6,7 +6,7 @@ describe('Zone Component vnZone', () => {
     beforeEach(ngModule('zone'));
 
     beforeEach(angular.mock.inject($componentController => {
-        let $element = angular.element(`<div></div>`);
+        const $element = angular.element('<vn-zone></vn-zone>');
         controller = $componentController('vnZone', {$element});
     }));
 
diff --git a/modules/zone/front/summary/index.js b/modules/zone/front/summary/index.js
index 636e528be5..47a6ba32a9 100644
--- a/modules/zone/front/summary/index.js
+++ b/modules/zone/front/summary/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
-
-        this.$httpParamSerializer = $httpParamSerializer;
-    }
+class Controller extends Section {
     get zone() {
         return this._zone;
     }
@@ -32,8 +27,7 @@ class Controller extends Component {
                 }
             }
         };
-        const serializedParams = this.$httpParamSerializer(params);
-        this.$http.get(`Zones/findOne?${serializedParams}`).then(res => {
+        this.$http.get(`Zones/findOne`, {params}).then(res => {
             this.summary = res.data;
         });
     }
@@ -47,15 +41,12 @@ class Controller extends Component {
                 }
             }
         };
-        const serializedParams = this.$httpParamSerializer(params);
-        this.$http.get(`Zones/${this.zone.id}/warehouses?${serializedParams}`).then(res => {
+        this.$http.get(`Zones/${this.zone.id}/warehouses`, {params}).then(res => {
             this.zoneWarehouses = res.data;
         });
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnZoneSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/zone/front/summary/index.spec.js b/modules/zone/front/summary/index.spec.js
index 9025af7668..0956fa8c6b 100644
--- a/modules/zone/front/summary/index.spec.js
+++ b/modules/zone/front/summary/index.spec.js
@@ -1,7 +1,6 @@
 import './index';
 
 describe('component vnZoneSummary', () => {
-    let $element;
     let $scope;
     let controller;
     let $httpBackend;
@@ -13,7 +12,7 @@ describe('component vnZoneSummary', () => {
         $httpBackend = _$httpBackend_;
         $httpParamSerializer = _$httpParamSerializer_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-zone-summary></vn-zone-summary>`);
+        const $element = angular.element(`<vn-zone-summary></vn-zone-summary>`);
         controller = $componentController('vnZoneSummary', {$element, $scope});
     }));
 
@@ -52,17 +51,4 @@ describe('component vnZoneSummary', () => {
             expect(controller.summary).toBeDefined();
         });
     });
-
-    xdescribe('getEntries()', () => {
-        it('should call the getEntries method to get the entries data', () => {
-            controller._travel = {id: 999};
-
-            const query = `/api/Travels/${controller._travel.id}/getEntries`;
-            $httpBackend.expectGET(query).respond('I am the entries');
-            controller.getEntries();
-            $httpBackend.flush();
-
-            expect(controller.entries).toEqual('I am the entries');
-        });
-    });
 });
diff --git a/modules/zone/front/warehouses/index.js b/modules/zone/front/warehouses/index.js
index 328f3a1b49..9191a1f491 100644
--- a/modules/zone/front/warehouses/index.js
+++ b/modules/zone/front/warehouses/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-class Controller extends Component {
+class Controller extends Section {
     constructor($element, $) {
         super($element, $);
 
diff --git a/package-lock.json b/package-lock.json
index 8648fe476f..dd10182e35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2098,6 +2098,13 @@
                 "extend": "^3.0.1",
                 "split-array-stream": "^2.0.0",
                 "stream-events": "^1.0.4"
+            },
+            "dependencies": {
+                "arrify": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+                    "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+                }
             }
         },
         "@google-cloud/projectify": {
@@ -2138,6 +2145,11 @@
                 "xdg-basedir": "^3.0.0"
             },
             "dependencies": {
+                "arrify": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+                    "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+                },
                 "mime": {
                     "version": "2.4.4",
                     "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
@@ -3210,7 +3222,8 @@
         "arrify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-            "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+            "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+            "dev": true
         },
         "asn1": {
             "version": "0.2.4",
@@ -7972,6 +7985,12 @@
                 "pinkie-promise": "^2.0.0"
             },
             "dependencies": {
+                "arrify": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+                    "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+                    "dev": true
+                },
                 "glob": {
                     "version": "7.1.4",
                     "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
@@ -8327,20 +8346,6 @@
                         "kind-of": "^1.1.0"
                     }
                 },
-                "glob": {
-                    "version": "7.1.4",
-                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
-                    "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
-                    "dev": true,
-                    "requires": {
-                        "fs.realpath": "^1.0.0",
-                        "inflight": "^1.0.4",
-                        "inherits": "2",
-                        "minimatch": "^3.0.4",
-                        "once": "^1.3.0",
-                        "path-is-absolute": "^1.0.0"
-                    }
-                },
                 "jasmine": {
                     "version": "2.99.0",
                     "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.99.0.tgz",
@@ -8354,7 +8359,7 @@
                 },
                 "kind-of": {
                     "version": "1.1.0",
-                    "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+                    "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
                     "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=",
                     "dev": true
                 },
@@ -8382,9 +8387,9 @@
                     }
                 },
                 "xtend": {
-                    "version": "4.0.1",
-                    "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-                    "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+                    "version": "4.0.2",
+                    "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+                    "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
                     "dev": true
                 }
             }
@@ -9990,7 +9995,7 @@
         },
         "jasmine-core": {
             "version": "2.99.1",
-            "resolved": "http://registry.npmjs.org/jasmine-core/-/jasmine-core-2.99.1.tgz",
+            "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.99.1.tgz",
             "integrity": "sha1-5kAN8ea1bhMLYcS80JPap/boyhU=",
             "dev": true
         },